mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-21 00:17:46 +00:00
feat: upgraded to tw v4
This commit is contained in:
@@ -107,7 +107,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
|
||||
"mt-4 w-full",
|
||||
viewMode === ViewMode.Modal && "fixed inset-0 z-50 p-10",
|
||||
viewMode === ViewMode.Undocked &&
|
||||
"fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-[32rem] lg:w-[34%]"
|
||||
"fixed bottom-4 left-20 z-50 h-[40%] w-[38%] min-w-lg lg:w-[34%]"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
@@ -119,7 +119,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
|
||||
{viewMode === ViewMode.Docked && (
|
||||
<div className="mb-4 flex items-start justify-between border-b border-mineshaft-400 pb-4">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-mineshaft-100">Access Tree</h3>
|
||||
<h3 className="text-lg font-medium text-mineshaft-100">Access Tree</h3>
|
||||
<p className="text-sm leading-3 text-mineshaft-400">
|
||||
Visual access policies for the configured role.
|
||||
</p>
|
||||
@@ -191,7 +191,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
|
||||
<SelectItem
|
||||
key={env.slug}
|
||||
value={env.slug}
|
||||
className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
|
||||
className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
|
||||
>
|
||||
<div className="ml-3 truncate font-medium">{env.name}</div>
|
||||
</SelectItem>
|
||||
@@ -209,7 +209,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
|
||||
<Panel position="top-right" className="flex gap-2">
|
||||
<Tooltip position="bottom" align="center" content={expandButtonLabel}>
|
||||
<IconButton
|
||||
className="rounded p-2"
|
||||
className="rounded-sm p-2"
|
||||
colorSchema="secondary"
|
||||
variant="plain"
|
||||
onClick={handleToggleView}
|
||||
@@ -226,7 +226,7 @@ const AccessTreeContent = ({ permissions, subject, onClose }: AccessTreeProps) =
|
||||
</Tooltip>
|
||||
<Tooltip align="end" position="bottom" content={hideButtonLabel}>
|
||||
<IconButton
|
||||
className="rounded p-2"
|
||||
className="rounded-sm p-2"
|
||||
colorSchema="secondary"
|
||||
variant="plain"
|
||||
onClick={onClose}
|
||||
|
||||
+2
-2
@@ -55,13 +55,13 @@ const ErrorDisplay = ({
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative flex flex-1 flex-col overflow-hidden">
|
||||
<pre className="thin-scrollbar w-full flex-1 overflow-y-auto whitespace-pre-wrap rounded bg-mineshaft-700 p-2 text-xs text-mineshaft-100">
|
||||
<pre className="thin-scrollbar w-full flex-1 overflow-y-auto rounded-sm bg-mineshaft-700 p-2 text-xs whitespace-pre-wrap text-mineshaft-100">
|
||||
{display}
|
||||
</pre>
|
||||
<IconButton
|
||||
variant="plain"
|
||||
colorSchema="secondary"
|
||||
className="absolute right-4 top-2"
|
||||
className="absolute top-2 right-4"
|
||||
ariaLabel="Copy secret value"
|
||||
onClick={copyToClipboard}
|
||||
>
|
||||
|
||||
@@ -46,7 +46,7 @@ export const PermissionSimulation = ({
|
||||
<Panel position="top-left">
|
||||
<Button
|
||||
size="xs"
|
||||
className="mr-1 rounded"
|
||||
className="mr-1 rounded-sm"
|
||||
colorSchema="secondary"
|
||||
onClick={handlePermissionSimulation}
|
||||
rightIcon={
|
||||
@@ -65,9 +65,9 @@ export const PermissionSimulation = ({
|
||||
<Panel
|
||||
onClick={handlePermissionSimulation}
|
||||
position="top-left"
|
||||
className={`group flex flex-col gap-2 pb-4 pr-4 ${expand ? "" : "cursor-pointer"}`}
|
||||
className={`group flex flex-col gap-2 pr-4 pb-4 ${expand ? "" : "cursor-pointer"}`}
|
||||
>
|
||||
<div className="flex w-[20rem] flex-col gap-1.5 rounded border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200">
|
||||
<div className="flex w-[20rem] flex-col gap-1.5 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-2 font-inter text-gray-200">
|
||||
<div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span className="text-sm">Permission Simulation</span>
|
||||
@@ -83,7 +83,7 @@ export const PermissionSimulation = ({
|
||||
</IconButton>
|
||||
</div>
|
||||
{expand && (
|
||||
<p className="mb-2 mt-1 text-xs text-mineshaft-400">
|
||||
<p className="mt-1 mb-2 text-xs text-mineshaft-400">
|
||||
Evaluate conditional policies to see what permissions will be granted given a secret
|
||||
name or tags
|
||||
</p>
|
||||
@@ -121,7 +121,7 @@ export const PermissionSimulation = ({
|
||||
onValueChange={setEnvironment}
|
||||
className="w-full border border-mineshaft-500 capitalize"
|
||||
position="popper"
|
||||
dropdownContainerClassName="max-w-[19rem]"
|
||||
dropdownContainerClassName="max-w-76"
|
||||
>
|
||||
{environments.map(({ name, slug }) => {
|
||||
return (
|
||||
|
||||
@@ -32,7 +32,7 @@ export const FolderNode = ({
|
||||
<>
|
||||
<Handle
|
||||
type="target"
|
||||
className="pointer-events-none !cursor-pointer opacity-0"
|
||||
className="pointer-events-none cursor-pointer! opacity-0"
|
||||
position={Position.Top}
|
||||
/>
|
||||
<div
|
||||
@@ -42,7 +42,7 @@ export const FolderNode = ({
|
||||
<FontAwesomeIcon className="mb-0.5 font-medium text-yellow" icon={faFolder} />
|
||||
<span>{parentId ? `/${name}` : "/"}</span>
|
||||
</div>
|
||||
<div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded bg-mineshaft-600 px-2 py-1 text-xs">
|
||||
<div className="mt-1.5 flex w-full flex-wrap items-center justify-center gap-x-2 gap-y-1 rounded-sm bg-mineshaft-600 px-2 py-1 text-xs">
|
||||
{Object.entries(actions).map(([action, access]) => {
|
||||
const { className, icon } = AccessMap[access];
|
||||
|
||||
@@ -70,7 +70,7 @@ export const FolderNode = ({
|
||||
</div>
|
||||
<Handle
|
||||
type="source"
|
||||
className="pointer-events-none !cursor-pointer opacity-0"
|
||||
className="pointer-events-none cursor-pointer! opacity-0"
|
||||
position={Position.Bottom}
|
||||
/>
|
||||
</>
|
||||
|
||||
+1
-1
@@ -61,7 +61,7 @@ export const AccessTreeSecretPathInput = ({
|
||||
<div ref={wrapperRef} className="relative">
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex items-center overflow-hidden rounded transition-all duration-300 ease-in-out",
|
||||
"flex items-center overflow-hidden rounded-sm transition-all duration-300 ease-in-out",
|
||||
isFocused ? "bg-mineshaft-800 shadow-md" : "bg-mineshaft-700",
|
||||
isExpanded ? "w-64" : "h-10 w-10"
|
||||
)}
|
||||
|
||||
+5
-5
@@ -26,11 +26,11 @@ type ConditionDisplayProps = {
|
||||
const ConditionDisplay = ({ _key: key, value, operator }: ConditionDisplayProps) => {
|
||||
return (
|
||||
<li>
|
||||
<span className="font-medium capitalize text-mineshaft-100">{camelCaseToSpaces(key)}</span>{" "}
|
||||
<span className="font-medium text-mineshaft-100 capitalize">{camelCaseToSpaces(key)}</span>{" "}
|
||||
<span className="text-mineshaft-200">
|
||||
{formatedConditionsOperatorNames[operator as PermissionConditionOperators]}
|
||||
</span>{" "}
|
||||
<span className="rounded bg-mineshaft-600 p-0.5 font-mono">
|
||||
<span className="rounded-sm bg-mineshaft-600 p-0.5 font-mono">
|
||||
{typeof value === "string" ? value : value.join(", ")}
|
||||
</span>
|
||||
.
|
||||
@@ -45,7 +45,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
|
||||
case PermissionAccess.Full:
|
||||
component = (
|
||||
<>
|
||||
<div className="flex items-center gap-1.5 capitalize text-green">
|
||||
<div className="flex items-center gap-1.5 text-green capitalize">
|
||||
<FontAwesomeIcon icon={faCheckCircle} size="xs" />
|
||||
<span>Full {formatActionName(action)} Permissions</span>
|
||||
</div>
|
||||
@@ -62,7 +62,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
|
||||
case PermissionAccess.Partial:
|
||||
component = (
|
||||
<>
|
||||
<div className="flex items-center gap-1.5 capitalize text-yellow">
|
||||
<div className="flex items-center gap-1.5 text-yellow capitalize">
|
||||
<FontAwesomeIcon icon={faCircleMinus} className="text-yellow" size="xs" />
|
||||
<span>Conditional {formatActionName(action)} Permissions</span>
|
||||
</div>
|
||||
@@ -137,7 +137,7 @@ export const FolderNodeTooltipContent = ({ action, access, actionRuleMap, subjec
|
||||
case PermissionAccess.None:
|
||||
component = (
|
||||
<>
|
||||
<div className="flex items-center gap-1.5 capitalize text-red">
|
||||
<div className="flex items-center gap-1.5 text-red capitalize">
|
||||
<FontAwesomeIcon icon={faCircleXmark} size="xs" />
|
||||
<span>No {formatActionName(action)} Permissions</span>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +40,7 @@ export const RoleNode = ({
|
||||
<>
|
||||
<Handle
|
||||
type="target"
|
||||
className="pointer-events-none !cursor-pointer opacity-0"
|
||||
className="pointer-events-none cursor-pointer! opacity-0"
|
||||
position={Position.Top}
|
||||
/>
|
||||
<div className="flex h-14 w-full flex-col items-center justify-center rounded-md border border-mineshaft bg-mineshaft-800 px-2 py-3 font-inter shadow-lg transition-opacity duration-500">
|
||||
@@ -51,7 +51,7 @@ export const RoleNode = ({
|
||||
</div>
|
||||
<Handle
|
||||
type="source"
|
||||
className="pointer-events-none !cursor-pointer opacity-0"
|
||||
className="pointer-events-none cursor-pointer! opacity-0"
|
||||
position={Position.Bottom}
|
||||
/>
|
||||
</>
|
||||
|
||||
@@ -15,7 +15,7 @@ export const ShowMoreButtonNode = ({
|
||||
<div className="flex h-full w-full items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-2">
|
||||
<Handle
|
||||
type="target"
|
||||
className="pointer-events-none !cursor-pointer opacity-0"
|
||||
className="pointer-events-none cursor-pointer! opacity-0"
|
||||
position={Position.Top}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user