awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvement: adjust policy UI for flow/clarity

Browse Source
This commit is contained in:
Scott Wilson
2024-10-11 12:23:47 -07:00
committed by =
parent bac9936c2a
commit 41e4af4e65
3 changed files with 50 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/views/Project/RolePage/components/RolePermissionsSection/components/GeneralPermissionConditions.tsx
View File

@@ -43,7 +43,11 @@ export const GeneralPermissionConditions = ({ position = 0, isDisabled, type }:
});
return (
<div className="mt-6 border-t border-t-gray-800 bg-mineshaft-800 pt-2">
<div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
<p className="mt-2 text-gray-300">Conditions</p>
<p className="mb-2 text-sm text-mineshaft-400">
When this policy should apply (always if no conditions are added).
</p>
<div className="mt-2 flex flex-col space-y-2">
{items.fields.map((el, index) => {
const condition = watch(`permissions.secrets.${position}.conditions.${index}`) as {
@@ -163,7 +167,7 @@ export const GeneralPermissionConditions = ({ position = 0, isDisabled, type }:
})
}
>
New Condition
Add Condition
</Button>
</div>
</div>

68
frontend/src/views/Project/RolePage/components/RolePermissionsSection/components/GeneralPermissionPolicies.tsx
View File

@@ -73,6 +73,44 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
<div key={`select-${subject}-type`} className="flex flex-col space-y-4 bg-bunker-800 p-6">
{items.fields.map((el, rootIndex) => (
<div key={el.id} className="bg-mineshaft-800 p-5 first:rounded-t-md last:rounded-b-md">
{isConditionalSubjects(subject) && (
<div className="mt-4 mb-6 flex w-full items-center text-gray-300">
<div className="w-1/4">Permission</div>
<div className="mr-4 w-1/4">
<Controller
defaultValue={false as any}
name={`permissions.${subject}.${rootIndex}.inverted`}
render={({ field }) => (
<Select
value={String(field.value)}
onValueChange={(val) => field.onChange(val === "true")}
containerClassName="w-full"
className="w-full"
>
<SelectItem value="false">Allow</SelectItem>
<SelectItem value="true">Forbid</SelectItem>
</Select>
)}
/>
</div>
<div>
<Tooltip
asChild
content={
<>
<p>
Whether to allow or forbid the selected actions when the following
conditions (if any) are met.
</p>
<p className="mt-2">Forbid rules must come after allow rules.</p>
</>
}
>
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-gray-400" />
</Tooltip>
</div>
</div>
)}
<div className="flex text-gray-300">
<div className="w-1/4">Actions</div>
<div className="flex flex-grow flex-wrap justify-start gap-8">
@@ -101,36 +139,6 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
})}
</div>
</div>
{isConditionalSubjects(subject) && (
<div className="mt-4 flex w-full items-center text-gray-300">
<div className="w-1/4">Effect</div>
<div className="mr-4 w-1/4">
<Controller
defaultValue={false as any}
name={`permissions.${subject}.${rootIndex}.inverted`}
render={({ field }) => (
<Select
value={String(field.value)}
onValueChange={(val) => field.onChange(val === "true")}
containerClassName="w-full"
className="w-full"
>
<SelectItem value="false">Allow</SelectItem>
<SelectItem value="true">Disallow</SelectItem>
</Select>
)}
/>
</div>
<div>
<Tooltip
asChild
content="Whether to allow or forbid. Forbid rules must be added after allow rules."
>
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-gray-400" />
</Tooltip>
</div>
</div>
)}
{children &&
cloneElement(children, {
position: rootIndex

8
frontend/src/views/Project/RolePage/components/RolePermissionsSection/components/SecretPermissionConditions.tsx
View File

@@ -36,7 +36,11 @@ export const SecretPermissionConditions = ({ position = 0, isDisabled }: Props)
});
return (
<div className="mt-6 border-t border-t-gray-800 bg-mineshaft-800 pt-2">
<div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
<p className="mt-2 text-gray-300">Conditions</p>
<p className="mb-2 text-sm text-mineshaft-400">
When this policy should apply (always if no conditions are added).
</p>
<div className="mt-2 flex flex-col space-y-2">
{items.fields.map((el, index) => {
const condition = watch(`permissions.secrets.${position}.conditions.${index}`) as {
@@ -157,7 +161,7 @@ export const SecretPermissionConditions = ({ position = 0, isDisabled }: Props)
})
}
>
New Condition
Add Condition
</Button>
</div>
</div>