improvement: revise edit role page and access tree

frontend/src/pages/project/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/IdentityProjectAdditionalPrivilegeModifySection.tsx

@@ -352,19 +352,21 @@ export const IdentityProjectAdditionalPrivilegeModifySection = ({
         <div className="p-4">
           <div className="mb-2 text-lg">Policies</div>
           {(isCreate || !isPending) && <PermissionEmptyState />}
-          {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map(
-            (permissionSubject) => (
-              <GeneralPermissionPolicies
-                subject={permissionSubject}
-                actions={PROJECT_PERMISSION_OBJECT[permissionSubject].actions}
-                title={PROJECT_PERMISSION_OBJECT[permissionSubject].title}
-                key={`project-permission-${permissionSubject}`}
-                isDisabled={isDisabled}
-              >
-                {renderConditionalComponents(permissionSubject, isDisabled)}
-              </GeneralPermissionPolicies>
-            )
-          )}
+          <div>
+            {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map(
+              (permissionSubject) => (
+                <GeneralPermissionPolicies
+                  subject={permissionSubject}
+                  actions={PROJECT_PERMISSION_OBJECT[permissionSubject].actions}
+                  title={PROJECT_PERMISSION_OBJECT[permissionSubject].title}
+                  key={`project-permission-${permissionSubject}`}
+                  isDisabled={isDisabled}
+                >
+                  {renderConditionalComponents(permissionSubject, isDisabled)}
+                </GeneralPermissionPolicies>
+              )
+            )}
+          </div>
         </div>
       </FormProvider>
     </form>

frontend/src/pages/project/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx

@@ -348,17 +348,19 @@ export const MembershipProjectAdditionalPrivilegeModifySection = ({
         <div className="p-4">
           <div className="mb-2 text-lg">Policies</div>
           {(isCreate || !isPending) && <PermissionEmptyState />}
-          {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
-            <GeneralPermissionPolicies
-              subject={subject}
-              actions={PROJECT_PERMISSION_OBJECT[subject].actions}
-              title={PROJECT_PERMISSION_OBJECT[subject].title}
-              key={`project-permission-${subject}`}
-              isDisabled={isDisabled}
-            >
-              {renderConditionalComponents(subject, isDisabled)}
-            </GeneralPermissionPolicies>
-          ))}
+          <div>
+            {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
+              <GeneralPermissionPolicies
+                subject={subject}
+                actions={PROJECT_PERMISSION_OBJECT[subject].actions}
+                title={PROJECT_PERMISSION_OBJECT[subject].title}
+                key={`project-permission-${subject}`}
+                isDisabled={isDisabled}
+              >
+                {renderConditionalComponents(subject, isDisabled)}
+              </GeneralPermissionPolicies>
+            ))}
+          </div>
         </div>
       </FormProvider>
     </form>

frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx

@@ -1,5 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { faCopy, faEdit, faEllipsisV, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
@@ -12,19 +14,17 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  PageHeader,
-  Tooltip
+  PageHeader
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useDeleteProjectRole, useGetProjectRoleBySlug } from "@app/hooks/api";
 import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 import { DuplicateProjectRoleModal } from "@app/pages/project/RoleDetailsBySlugPage/components/DuplicateProjectRoleModal";
+import { RolePermissionsSection } from "@app/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
-import { RoleDetailsSection } from "./components/RoleDetailsSection";
 import { RoleModal } from "./components/RoleModal";
-import { RolePermissionsSection } from "./components/RolePermissionsSection";
 
 const Page = () => {
   const navigate = useNavigate();
@@ -88,17 +88,29 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader
+            title={
+              <div className="flex flex-col">
+                <div>
+                  <span>{data.name}</span>
+                  <p className="text-sm font-[400] normal-case leading-3 text-mineshaft-400">
+                    {data.slug} {data.description && `- ${data.description}`}
+                  </p>
+                </div>
+              </div>
+            }
+          >
             {isCustomRole && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild className="rounded-lg">
-                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
-                    <Tooltip content="More options">
-                      <Button variant="outline_bg">More</Button>
-                    </Tooltip>
-                  </div>
+                  <Button
+                    colorSchema="secondary"
+                    rightIcon={<FontAwesomeIcon icon={faEllipsisV} className="ml-2" />}
+                  >
+                    Options
+                  </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="p-1">
+                <DropdownMenuContent align="end" sideOffset={2} className="p-1">
                   <ProjectPermissionCan
                     I={ProjectPermissionActions.Edit}
                     a={ProjectPermissionSub.Role}
@@ -113,6 +125,7 @@ const Page = () => {
                             roleSlug
                           })
                         }
+                        icon={<FontAwesomeIcon icon={faEdit} />}
                         disabled={!isAllowed}
                       >
                         Edit Role
@@ -128,6 +141,7 @@ const Page = () => {
                         className={twMerge(
                           !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
                         )}
+                        icon={<FontAwesomeIcon icon={faCopy} />}
                         onClick={() => {
                           handlePopUpOpen("duplicateRole");
                         }}
@@ -143,13 +157,9 @@ const Page = () => {
                   >
                     {(isAllowed) => (
                       <DropdownMenuItem
-                        className={twMerge(
-                          isAllowed
-                            ? "hover:!bg-red-500 hover:!text-white"
-                            : "pointer-events-none cursor-not-allowed opacity-50"
-                        )}
+                        icon={<FontAwesomeIcon icon={faTrash} />}
                         onClick={() => handlePopUpOpen("deleteRole")}
-                        disabled={!isAllowed}
+                        isDisabled={!isAllowed}
                       >
                         Delete Role
                       </DropdownMenuItem>
@@ -159,12 +169,7 @@ const Page = () => {
               </DropdownMenu>
             )}
           </PageHeader>
-          <div className="flex">
-            <div className="mr-4 w-96">
-              <RoleDetailsSection roleSlug={roleSlug} handlePopUpOpen={handlePopUpOpen} />
-            </div>
-            <RolePermissionsSection roleSlug={roleSlug} isDisabled={!isCustomRole} />
-          </div>
+          <RolePermissionsSection roleSlug={roleSlug} isDisabled={!isCustomRole} />
         </div>
       )}
       <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />

frontend/src/pages/project/RoleDetailsBySlugPage/components/AddPoliciesButton.tsx

@@ -24,7 +24,7 @@ export const AddPoliciesButton = ({ isDisabled }: Props) => {
   ] as const);
 
   return (
-    <>
+    <div>
       <Button
         className="h-10 rounded-r-none"
         variant="outline_bg"
@@ -73,6 +73,6 @@ export const AddPoliciesButton = ({ isDisabled }: Props) => {
         isOpen={popUp.applyTemplate.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("applyTemplate", isOpen)}
       />
-    </>
+    </div>
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/ConditionsFields.tsx

@@ -0,0 +1,206 @@
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Select,
+  SelectItem,
+  Tooltip
+} from "@app/components/v2";
+import {
+  ConditionalProjectPermissionSubject,
+  PermissionConditionOperators
+} from "@app/context/ProjectPermissionContext/types";
+
+import {
+  getConditionOperatorHelperInfo,
+  renderOperatorSelectItems
+} from "./PermissionConditionHelpers";
+import { TFormSchema } from "./ProjectRoleModifySection.utils";
+
+export const ConditionsFields = ({
+  isDisabled,
+  subject,
+  position,
+  selectOptions
+}: {
+  isDisabled: boolean | undefined;
+  subject: ConditionalProjectPermissionSubject;
+  position: number;
+  selectOptions: [{ value: string; label: string }, ...{ value: string; label: string }[]];
+}) => {
+  const {
+    control,
+    watch,
+    setValue,
+    formState: { errors }
+  } = useFormContext<TFormSchema>();
+  const items = useFieldArray({
+    control,
+    name: `permissions.${subject}.${position}.conditions`
+  });
+
+  const conditionErrorMessage =
+    errors?.permissions?.[subject]?.[position]?.conditions?.message ||
+    errors?.permissions?.[subject]?.[position]?.conditions?.root?.message;
+
+  return (
+    <div className="mt-6 border-t border-t-mineshaft-600 bg-mineshaft-800 pt-2">
+      <div className="flex w-full items-center justify-between">
+        <div className="mt-2.5 flex items-center text-gray-300">
+          <span>Conditions</span>
+          <Tooltip
+            className="max-w-sm"
+            content={
+              <>
+                <p>
+                  Conditions determine when a policy will be applied (always if no conditions are
+                  present).
+                </p>
+                <p className="mt-3">
+                  All conditions must evaluate to true for the policy to take effect.
+                </p>
+              </>
+            }
+          >
+            <FontAwesomeIcon size="xs" className="ml-1 text-mineshaft-400" icon={faInfoCircle} />
+          </Tooltip>
+        </div>
+        <Button
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          variant="outline_bg"
+          size="xs"
+          className="mt-2"
+          isDisabled={isDisabled}
+          onClick={() =>
+            items.append({
+              lhs: selectOptions[0].value,
+              operator: PermissionConditionOperators.$EQ,
+              rhs: ""
+            })
+          }
+        >
+          Add Condition
+        </Button>
+      </div>
+      <div className="mt-2 flex flex-col space-y-2">
+        {Boolean(items.fields.length) &&
+          items.fields.map((el, index) => {
+            const condition =
+              (watch(`permissions.${subject}.${position}.conditions.${index}`) as {
+                lhs: string;
+                rhs: string;
+                operator: string;
+              }) || {};
+            return (
+              <div
+                key={el.id}
+                className="flex items-start gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
+              >
+                <div className="w-1/4">
+                  <Controller
+                    control={control}
+                    name={`permissions.${subject}.${position}.conditions.${index}.lhs`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0"
+                      >
+                        <Select
+                          defaultValue={field.value}
+                          {...field}
+                          onValueChange={(e) => {
+                            setValue(
+                              `permissions.${subject}.${position}.conditions.${index}.operator`,
+                              PermissionConditionOperators.$IN as never
+                            );
+                            field.onChange(e);
+                          }}
+                          position="popper"
+                          className="w-full"
+                        >
+                          {selectOptions.map(({ value, label }) => (
+                            <SelectItem key={value} value={value}>
+                              {label}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                <div className="flex w-44 items-center space-x-2">
+                  <Controller
+                    control={control}
+                    name={`permissions.${subject}.${position}.conditions.${index}.operator`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0 flex-grow"
+                      >
+                        <Select
+                          position="popper"
+                          defaultValue={field.value}
+                          {...field}
+                          onValueChange={(e) => field.onChange(e)}
+                          className="w-full"
+                        >
+                          {renderOperatorSelectItems(condition.lhs)}
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                  <div>
+                    <Tooltip
+                      asChild
+                      content={getConditionOperatorHelperInfo(
+                        condition?.operator as PermissionConditionOperators
+                      )}
+                      className="max-w-xs"
+                    >
+                      <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-bunker-400" />
+                    </Tooltip>
+                  </div>
+                </div>
+                <div className="flex-grow">
+                  <Controller
+                    control={control}
+                    name={`permissions.${subject}.${position}.conditions.${index}.rhs`}
+                    render={({ field, fieldState: { error } }) => (
+                      <FormControl
+                        isError={Boolean(error?.message)}
+                        errorText={error?.message}
+                        className="mb-0 flex-grow"
+                      >
+                        <Input {...field} />
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                <IconButton
+                  ariaLabel="remove"
+                  variant="outline_bg"
+                  className="p-2.5"
+                  onClick={() => items.remove(index)}
+                >
+                  <FontAwesomeIcon icon={faTrash} />
+                </IconButton>
+              </div>
+            );
+          })}
+      </div>
+      {conditionErrorMessage && (
+        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
+          <FontAwesomeIcon icon={faWarning} className="text-red" />
+          <span>{conditionErrorMessage}</span>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/src/pages/project/RoleDetailsBySlugPage/components/DynamicSecretPermissionConditions.tsx

@@ -1,26 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import {
-  getConditionOperatorHelperInfo,
-  renderOperatorSelectItems
-} from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -28,162 +8,17 @@ type Props = {
 };
 
 export const DynamicSecretPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    setValue,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const items = useFieldArray({
-    control,
-    name: `permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions`
-  });
-
-  const conditionErrorMessage =
-    errors?.permissions?.[ProjectPermissionSub.DynamicSecrets]?.[position]?.conditions?.message ||
-    errors?.permissions?.[ProjectPermissionSub.DynamicSecrets]?.[position]?.conditions?.root
-      ?.message;
-
   return (
-    <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="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition = watch(
-            `permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}`
-          ) as {
-            lhs: string;
-            rhs: string;
-            operator: string;
-          };
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => {
-                          setValue(
-                            `permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}.operator`,
-                            PermissionConditionOperators.$IN as never
-                          );
-                          field.onChange(e);
-                        }}
-                        className="w-full"
-                      >
-                        <SelectItem value="environment">Environment Slug</SelectItem>
-                        <SelectItem value="secretPath">Secret Path</SelectItem>
-                        <SelectItem value="metadataKey">Metadata Key</SelectItem>
-                        <SelectItem value="metadataValue">Metadata Value</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        {renderOperatorSelectItems(condition.lhs)}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.DynamicSecrets}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {conditionErrorMessage && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{conditionErrorMessage}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "environment",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.DynamicSecrets}
+      position={position}
+      selectOptions={[
+        { value: "environment", label: "Environment Slug" },
+        { value: "secretPath", label: "Secret Path" },
+        { value: "metadataKey", label: "Metadata Key" },
+        { value: "metadataValue", label: "Metadata Value" }
+      ]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionConditions.tsx

@@ -1,180 +1,26 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import {
-  getConditionOperatorHelperInfo,
-  renderOperatorSelectItems
-} from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
   isDisabled?: boolean;
   type:
-    | ProjectPermissionSub.DynamicSecrets
     | ProjectPermissionSub.SecretFolders
     | ProjectPermissionSub.SecretImports
     | ProjectPermissionSub.SecretRotation;
 };
 
 export const GeneralPermissionConditions = ({ position = 0, isDisabled, type }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const items = useFieldArray({
-    control,
-    name: `permissions.${type}.${position}.conditions`
-  });
-
   return (
-    <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="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${type}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${type}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="environment">Environment Slug</SelectItem>
-                        <SelectItem value="secretPath">Secret Path</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${type}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        {renderOperatorSelectItems(condition.lhs)}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${type}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[type]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[type]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>{}</div>
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "environment",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={type}
+      position={position}
+      selectOptions={[
+        { value: "environment", label: "Environment Slug" },
+        { value: "secretPath", label: "Secret Path" }
+      ]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx

@@ -3,6 +3,7 @@ import { Control, Controller, useFieldArray, useFormContext, useWatch } from "re
 import {
   faChevronDown,
   faChevronRight,
+  faDiagramProject,
   faGripVertical,
   faInfoCircle,
   faPlus,
@@ -27,6 +28,7 @@ type Props<T extends ProjectPermissionSub> = {
   actions: TProjectPermissionObject[T]["actions"];
   children?: JSX.Element;
   isDisabled?: boolean;
+  onShowAccessTree?: (subject: ProjectPermissionSub) => void;
 };
 
 type ActionProps = {
@@ -71,7 +73,8 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
   actions,
   children,
   title,
-  isDisabled
+  isDisabled,
+  onShowAccessTree
 }: Props<T>) => {
   const { control, watch } = useFormContext<TFormSchema>();
   const { fields, remove, insert, move } = useFieldArray({
@@ -89,7 +92,7 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
   const [draggedItem, setDraggedItem] = useState<number | null>(null);
   const [dragOverItem, setDragOverItem] = useState<number | null>(null);
 
-  if (!watchFields || !Array.isArray(watchFields) || watchFields.length === 0) return <div />;
+  if (!watchFields || !Array.isArray(watchFields) || watchFields.length === 0) return null;
 
   const handleDragStart = (_: React.DragEvent, index: number) => {
     setDraggedItem(index);
@@ -121,9 +124,9 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
   };
 
   return (
-    <div className="border border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md">
+    <div className="overflow-clip border border-mineshaft-600 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md">
       <div
-        className="flex cursor-pointer items-center space-x-8 px-5 py-4 text-sm text-gray-300"
+        className="flex h-14 cursor-pointer items-center px-5 py-4 text-sm text-gray-300"
         role="button"
         tabIndex={0}
         onClick={() => setIsOpen.toggle()}
@@ -133,20 +136,50 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
           }
         }}
       >
-        <div>
-          <FontAwesomeIcon icon={isOpen ? faChevronDown : faChevronRight} />
-        </div>
-        <div className="flex-grow">{title}</div>
+        <FontAwesomeIcon className="mr-8" icon={isOpen ? faChevronDown : faChevronRight} />
+
+        <div className="flex-grow text-base">{title}</div>
         {fields.length > 1 && (
           <div>
-            <Tag size="xs" className="px-2">
-              {fields.length} rules
+            <Tag size="xs" className="mr-2 px-2">
+              {fields.length} Rules
             </Tag>
           </div>
         )}
+        {onShowAccessTree && (
+          <Button
+            leftIcon={<FontAwesomeIcon icon={faDiagramProject} />}
+            variant="outline_bg"
+            size="xs"
+            className="ml-2"
+            onClick={(e) => {
+              e.stopPropagation();
+              onShowAccessTree(subject);
+            }}
+          >
+            Visualize Access
+          </Button>
+        )}
+        {!isDisabled && isOpen && isConditionalSubjects(subject) && (
+          <Button
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            variant="outline_bg"
+            className="ml-2"
+            size="xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              insert(fields.length, [
+                { read: false, edit: false, create: false, delete: false } as any
+              ]);
+            }}
+            isDisabled={isDisabled}
+          >
+            Add Rule
+          </Button>
+        )}
       </div>
       {isOpen && (
-        <div key={`select-${subject}-type`} className="flex flex-col space-y-4 bg-bunker-800 p-6">
+        <div key={`select-${subject}-type`} className="flex flex-col space-y-3 bg-bunker-700 p-3">
           {fields.map((el, rootIndex) => {
             let isFullReadAccessEnabled = false;
 
@@ -154,78 +187,89 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
               isFullReadAccessEnabled = watch(`permissions.${subject}.${rootIndex}.read` as any);
             }
 
+            const isInverted = watch(`permissions.${subject}.${rootIndex}.inverted` as any);
+
             return (
               <div
                 key={el.id}
                 className={twMerge(
-                  "relative bg-mineshaft-800 p-5 pr-10 first:rounded-t-md last:rounded-b-md",
-                  dragOverItem === rootIndex ? "border-2 border-blue-400" : "",
+                  "relative rounded-md border-l-[6px] bg-mineshaft-800 px-5 py-4 transition-colors duration-300",
+                  isInverted ? "border-l-red-600/50" : "border-l-green-600/50",
+                  dragOverItem === rootIndex ? "border-2 border-primary/50" : "",
                   draggedItem === rootIndex ? "opacity-50" : ""
                 )}
                 onDragOver={(e) => handleDragOver(e, rootIndex)}
                 onDrop={handleDrop}
               >
-                {!isDisabled && (
-                  <Tooltip position="left" content="Drag to reorder permission">
-                    <div
-                      draggable
-                      onDragStart={(e) => handleDragStart(e, rootIndex)}
-                      onDragEnd={handleDragEnd}
-                      className="absolute right-3 top-2 cursor-move rounded-md bg-mineshaft-700 p-2 text-gray-400 hover:text-gray-200"
-                    >
-                      <FontAwesomeIcon icon={faGripVertical} />
-                    </div>
-                  </Tooltip>
-                )}
-
-                <div className="mb-4 flex items-center">
-                  {isConditionalSubjects(subject) && (
+                {isConditionalSubjects(subject) && (
+                  <div className="mb-4 flex items-center gap-3">
                     <div className="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"
-                              isDisabled={isDisabled}
-                            >
-                              <SelectItem value="false">Allow</SelectItem>
-                              <SelectItem value="true">Forbid</SelectItem>
-                            </Select>
-                          )}
+                      <div className="mr-3">Permission</div>
+                      <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-40"
+                            className="w-full"
+                            isDisabled={isDisabled}
+                            position="popper"
+                          >
+                            <SelectItem value="false">Allow</SelectItem>
+                            <SelectItem value="true">Forbid</SelectItem>
+                          </Select>
+                        )}
+                      />
+                      <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="ml-2 text-bunker-400"
                         />
-                      </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>
-                            </>
-                          }
+                      </Tooltip>
+                      {!isDisabled && (
+                        <Button
+                          leftIcon={<FontAwesomeIcon icon={faTrash} />}
+                          variant="outline_bg"
+                          size="xs"
+                          className="ml-auto mr-3"
+                          onClick={() => remove(rootIndex)}
+                          isDisabled={isDisabled}
                         >
-                          <FontAwesomeIcon
-                            icon={faInfoCircle}
-                            size="sm"
-                            className="text-gray-400"
-                          />
+                          Remove Rule
+                        </Button>
+                      )}
+                      {!isDisabled && (
+                        <Tooltip position="left" content="Drag to reorder permission">
+                          <div
+                            draggable
+                            onDragStart={(e) => handleDragStart(e, rootIndex)}
+                            onDragEnd={handleDragEnd}
+                            className="cursor-move text-bunker-300 hover:text-bunker-200"
+                          >
+                            <FontAwesomeIcon icon={faGripVertical} />
+                          </div>
                         </Tooltip>
-                      </div>
+                      )}
                     </div>
-                  )}
-                </div>
-                <div className="flex gap-4 text-gray-300">
-                  <div className="w-1/4">Actions</div>
-                  <div className="flex flex-grow flex-wrap justify-start gap-8">
+                  </div>
+                )}
+                <div className="flex flex-col text-gray-300">
+                  <div className="mb-2">Actions</div>
+                  <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">
                     {actions.map(({ label, value }, index) => {
                       if (typeof value !== "string") return undefined;
 
@@ -255,41 +299,6 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                   cloneElement(children, {
                     position: rootIndex
                   })}
-                <div
-                  className={twMerge(
-                    "mt-4 flex justify-start space-x-4",
-                    isConditionalSubjects(subject) && "justify-end"
-                  )}
-                >
-                  {!isDisabled && isConditionalSubjects(subject) && (
-                    <Button
-                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                      variant="star"
-                      size="xs"
-                      className="mt-2"
-                      onClick={() => {
-                        insert(rootIndex + 1, [
-                          { read: false, edit: false, create: false, delete: false } as any
-                        ]);
-                      }}
-                      isDisabled={isDisabled}
-                    >
-                      Add policy
-                    </Button>
-                  )}
-                  {!isDisabled && (
-                    <Button
-                      leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                      variant="outline_bg"
-                      size="xs"
-                      className="mt-2 hover:border-red"
-                      onClick={() => remove(rootIndex)}
-                      isDisabled={isDisabled}
-                    >
-                      Remove policy
-                    </Button>
-                  )}{" "}
-                </div>
               </div>
             );
           })}

frontend/src/pages/project/RoleDetailsBySlugPage/components/IdentityManagementPermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,150 +8,12 @@ type Props = {
 };
 
 export const IdentityManagementPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const permissionSubject = ProjectPermissionSub.Identity;
-  const items = useFieldArray({
-    control,
-    name: `permissions.${permissionSubject}.${position}.conditions`
-  });
-
   return (
-    <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="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="identityId">Identity ID</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value={PermissionConditionOperators.$EQ}>Equal</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$NEQ}>Not Equal</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>{}</div>
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "identityId",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.Identity}
+      position={position}
+      selectOptions={[{ value: "identityId", label: "Identity ID" }]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/PermissionConditionHelpers.tsx

@@ -17,17 +17,36 @@ export const getConditionOperatorHelperInfo = (type: PermissionConditionOperator
   }
 };
 
+// scott: we may need to pass the subject in the future to further refine returned items
 export const renderOperatorSelectItems = (type: string) => {
-  if (type === "secretTags") {
-    return <SelectItem value={PermissionConditionOperators.$IN}>Contains</SelectItem>;
+  switch (type) {
+    case "secretTags":
+      return <SelectItem value={PermissionConditionOperators.$IN}>Contains</SelectItem>;
+    case "identityId":
+      return (
+        <>
+          <SelectItem value={PermissionConditionOperators.$EQ}>Equal</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$NEQ}>Not Equal</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
+        </>
+      );
+    case "hostname":
+    case "name":
+      return (
+        <>
+          <SelectItem value={PermissionConditionOperators.$EQ}>Equals</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$GLOB}>Glob</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
+        </>
+      );
+    default:
+      return (
+        <>
+          <SelectItem value={PermissionConditionOperators.$EQ}>Equal</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$NEQ}>Not Equal</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$GLOB}>Glob Match</SelectItem>
+          <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
+        </>
+      );
   }
-
-  return (
-    <>
-      <SelectItem value={PermissionConditionOperators.$EQ}>Equal</SelectItem>
-      <SelectItem value={PermissionConditionOperators.$NEQ}>Not Equal</SelectItem>
-      <SelectItem value={PermissionConditionOperators.$GLOB}>Glob Match</SelectItem>
-      <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-    </>
-  );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/PermissionEmptyState.tsx

@@ -12,7 +12,7 @@ export const PermissionEmptyState = () => {
     ([key, value]) => key && value?.length > 0
   );
 
-  if (isNotEmptyPermissions) return <div />;
+  if (isNotEmptyPermissions) return null;
 
   return <EmptyState title="No policies applied" className="py-8" />;
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/PkiSubscriberPermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,149 +8,12 @@ type Props = {
 };
 
 export const PkiSubscriberPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-
-  const permissionSubject = ProjectPermissionSub.PkiSubscribers;
-  const items = useFieldArray({
-    control,
-    name: `permissions.${permissionSubject}.${position}.conditions`
-  });
-
   return (
-    <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="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="name">Name</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value={PermissionConditionOperators.$EQ}>Equals</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$GLOB}>Glob</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Tooltip
-                  asChild
-                  content={getConditionOperatorHelperInfo(
-                    condition?.operator as PermissionConditionOperators
-                  )}
-                  className="max-w-xs"
-                >
-                  <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                </Tooltip>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "name",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.PkiSubscribers}
+      position={position}
+      selectOptions={[{ value: "name", label: "Name" }]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/PkiTemplatePermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,149 +8,12 @@ type Props = {
 };
 
 export const PkiTemplatePermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-
-  const permissionSubject = ProjectPermissionSub.CertificateTemplates;
-  const items = useFieldArray({
-    control,
-    name: `permissions.${permissionSubject}.${position}.conditions`
-  });
-
   return (
-    <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="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="name">Name</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value={PermissionConditionOperators.$EQ}>Equals</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$GLOB}>Glob</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Tooltip
-                  asChild
-                  content={getConditionOperatorHelperInfo(
-                    condition?.operator as PermissionConditionOperators
-                  )}
-                  className="max-w-xs"
-                >
-                  <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                </Tooltip>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="delete"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "name",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.CertificateTemplates}
+      position={position}
+      selectOptions={[{ value: "name", label: "Name" }]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/RoleDetailsSection.tsx

@@ -1,98 +0,0 @@
-import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { IconButton, Tooltip } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useTimedReset } from "@app/hooks";
-import { useGetProjectRoleBySlug } from "@app/hooks/api";
-import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-  roleSlug: string;
-  handlePopUpOpen: (popUpName: keyof UsePopUpState<["role"]>, data?: object) => void;
-};
-
-export const RoleDetailsSection = ({ roleSlug, handlePopUpOpen }: Props) => {
-  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
-    initialState: "Copy ID to clipboard"
-  });
-
-  const { currentWorkspace } = useWorkspace();
-  const { data } = useGetProjectRoleBySlug(currentWorkspace?.id ?? "", roleSlug as string);
-
-  const isCustomRole = !Object.values(ProjectMembershipRole).includes(
-    (data?.slug ?? "") as ProjectMembershipRole
-  );
-
-  return data ? (
-    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-        <h3 className="text-lg font-semibold text-mineshaft-100">Project Role Details</h3>
-        {isCustomRole && (
-          <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Role}>
-            {(isAllowed) => {
-              return (
-                <Tooltip content="Edit Role">
-                  <IconButton
-                    isDisabled={!isAllowed}
-                    ariaLabel="copy icon"
-                    variant="plain"
-                    className="group relative"
-                    onClick={() => {
-                      handlePopUpOpen("role", {
-                        roleSlug
-                      });
-                    }}
-                  >
-                    <FontAwesomeIcon icon={faPencil} />
-                  </IconButton>
-                </Tooltip>
-              );
-            }}
-          </ProjectPermissionCan>
-        )}
-      </div>
-      <div className="pt-4">
-        <div className="mb-4">
-          <p className="text-sm font-semibold text-mineshaft-300">Role ID</p>
-          <div className="group flex align-top">
-            <p className="text-sm text-mineshaft-300">{data.id}</p>
-            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-              <Tooltip content={copyTextId}>
-                <IconButton
-                  ariaLabel="copy icon"
-                  variant="plain"
-                  className="group relative ml-2"
-                  onClick={() => {
-                    navigator.clipboard.writeText(data.id);
-                    setCopyTextId("Copied");
-                  }}
-                >
-                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
-                </IconButton>
-              </Tooltip>
-            </div>
-          </div>
-        </div>
-        <div className="mb-4">
-          <p className="text-sm font-semibold text-mineshaft-300">Name</p>
-          <p className="text-sm text-mineshaft-300">{data.name}</p>
-        </div>
-        <div className="mb-4">
-          <p className="text-sm font-semibold text-mineshaft-300">Slug</p>
-          <p className="text-sm text-mineshaft-300">{data.slug}</p>
-        </div>
-        <div className="mb-4">
-          <p className="text-sm font-semibold text-mineshaft-300">Description</p>
-          <p className="text-sm text-mineshaft-300">
-            {data.description?.length ? data.description : "-"}
-          </p>
-        </div>
-      </div>
-    </div>
-  ) : (
-    <div />
-  );
-};

frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { MongoAbility, MongoQuery, RawRuleOf } from "@casl/ability";
 import { faSave } from "@fortawesome/free-solid-svg-icons";
@@ -88,6 +88,8 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
     roleSlug as string
   );
 
+  const [showAccessTree, setShowAccessTree] = useState<ProjectPermissionSub | null>(null);
+
   const form = useForm<TFormSchema>({
     values: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : undefined,
     resolver: zodResolver(projectRoleFormSchema)
@@ -133,71 +135,90 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
     [JSON.stringify(permissions)]
   );
 
+  const isSecretManagerProject = currentWorkspace.type === ProjectType.SecretManager;
+
   return (
     <div className="w-full">
-      {currentWorkspace.type === ProjectType.SecretManager && (
-        <AccessTree permissions={formattedPermissions} />
-      )}
       <form
         onSubmit={handleSubmit(onSubmit)}
-        className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+        className="flex h-full w-full flex-1 flex-col rounded-lg border border-mineshaft-600 bg-mineshaft-900 py-4"
       >
         <FormProvider {...form}>
-          <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
-            <h3 className="text-lg font-semibold text-mineshaft-100">Policies</h3>
-            <div className="flex items-center space-x-4">
-              {isCustomRole && (
-                <>
-                  {isDirty && (
-                    <Button
-                      className="mr-4 text-mineshaft-300"
-                      variant="link"
-                      isDisabled={isSubmitting}
-                      isLoading={isSubmitting}
-                      onClick={() => reset()}
-                    >
-                      Discard
-                    </Button>
-                  )}
-                  <div className="flex items-center">
-                    <Button
-                      variant="outline_bg"
-                      type="submit"
-                      className={twMerge(
-                        "mr-4 h-10 border",
-                        isDirty && "bg-primary text-black hover:bg-primary hover:opacity-80"
-                      )}
-                      isDisabled={isSubmitting || !isDirty}
-                      isLoading={isSubmitting}
-                      leftIcon={<FontAwesomeIcon icon={faSave} />}
-                    >
-                      Save
-                    </Button>
-                    <AddPoliciesButton isDisabled={isDisabled} />
-                  </div>
-                </>
-              )}
+          <div className="mx-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
+            <div>
+              <h3 className="text-lg font-semibold text-mineshaft-100">Policies</h3>
+              <p className="text-sm leading-3 text-mineshaft-400">
+                Configure granular access policies
+              </p>
             </div>
-          </div>
-          <div className="py-4">
-            {!isPending && <PermissionEmptyState />}
-            {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[])
-              .filter((subject) => !EXCLUDED_PERMISSION_SUBS.includes(subject))
-              .filter((subject) => ProjectTypePermissionSubjects[currentWorkspace.type][subject])
-              .map((subject) => (
-                <GeneralPermissionPolicies
-                  subject={subject}
-                  actions={PROJECT_PERMISSION_OBJECT[subject].actions}
-                  title={PROJECT_PERMISSION_OBJECT[subject].title}
-                  key={`project-permission-${subject}`}
-                  isDisabled={isDisabled}
+            {isCustomRole && (
+              <div className="flex items-center gap-2">
+                {isDirty && (
+                  <Button
+                    className="mr-4 text-mineshaft-300"
+                    variant="link"
+                    isDisabled={isSubmitting}
+                    isLoading={isSubmitting}
+                    onClick={() => reset()}
+                  >
+                    Discard
+                  </Button>
+                )}
+                <Button
+                  colorSchema="secondary"
+                  type="submit"
+                  className={twMerge("h-10 border")}
+                  isDisabled={isSubmitting || !isDirty}
+                  isLoading={isSubmitting}
+                  leftIcon={<FontAwesomeIcon icon={faSave} />}
                 >
-                  {renderConditionalComponents(subject, isDisabled)}
-                </GeneralPermissionPolicies>
-              ))}
+                  Save
+                </Button>
+                <div className="ml-2 border-l border-mineshaft-500 pl-4">
+                  <AddPoliciesButton isDisabled={isDisabled} />
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="flex flex-1 flex-col overflow-hidden pl-4 pr-1">
+            <div className="thin-scrollbar flex-1 overflow-y-scroll py-4">
+              {!isPending && <PermissionEmptyState />}
+              {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[])
+                .filter((subject) => !EXCLUDED_PERMISSION_SUBS.includes(subject))
+                .filter((subject) => ProjectTypePermissionSubjects[currentWorkspace.type][subject])
+                .map((subject) => (
+                  <GeneralPermissionPolicies
+                    subject={subject}
+                    actions={PROJECT_PERMISSION_OBJECT[subject].actions}
+                    title={PROJECT_PERMISSION_OBJECT[subject].title}
+                    key={`project-permission-${subject}`}
+                    isDisabled={isDisabled}
+                    onShowAccessTree={
+                      isSecretManagerProject &&
+                      [
+                        ProjectPermissionSub.Secrets,
+                        ProjectPermissionSub.SecretFolders,
+                        ProjectPermissionSub.DynamicSecrets,
+                        ProjectPermissionSub.SecretImports
+                      ].includes(subject)
+                        ? setShowAccessTree
+                        : undefined
+                    }
+                  >
+                    {renderConditionalComponents(subject, isDisabled)}
+                  </GeneralPermissionPolicies>
+                ))}
+            </div>
           </div>
         </FormProvider>
       </form>
+      {isSecretManagerProject && showAccessTree && (
+        <AccessTree
+          permissions={formattedPermissions}
+          subject={showAccessTree}
+          onClose={() => setShowAccessTree(null)}
+        />
+      )}
     </div>
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/SecretPermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import { PermissionConditionOperators } from "@app/context/ProjectPermissionContext/types";
-
-import {
-  getConditionOperatorHelperInfo,
-  renderOperatorSelectItems
-} from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,159 +8,17 @@ type Props = {
 };
 
 export const SecretPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    setValue,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const items = useFieldArray({
-    control,
-    name: `permissions.secrets.${position}.conditions`
-  });
-
-  const conditionErrorMessage =
-    errors?.permissions?.secrets?.[position]?.conditions?.message ||
-    errors?.permissions?.secrets?.[position]?.conditions?.root?.message;
-
   return (
-    <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="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </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 {
-            lhs: string;
-            rhs: string;
-            operator: string;
-          };
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.secrets.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => {
-                          setValue(
-                            `permissions.secrets.${position}.conditions.${index}.operator`,
-                            PermissionConditionOperators.$IN as never
-                          );
-                          field.onChange(e);
-                        }}
-                        className="w-full"
-                      >
-                        <SelectItem value="environment">Environment Slug</SelectItem>
-                        <SelectItem value="secretPath">Secret Path</SelectItem>
-                        <SelectItem value="secretName">Secret Name</SelectItem>
-                        <SelectItem value="secretTags">Secret Tags</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.secrets.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        {renderOperatorSelectItems(condition.lhs)}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.secrets.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {conditionErrorMessage && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{conditionErrorMessage}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "environment",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.Secrets}
+      position={position}
+      selectOptions={[
+        { value: "environment", label: "Environment Slug" },
+        { value: "secretPath", label: "Secret Path" },
+        { value: "secretName", label: "Secret Name" },
+        { value: "secretTags", label: "Secret Tags" }
+      ]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/SecretSyncPermissionConditions.tsx

@@ -1,26 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import {
-  getConditionOperatorHelperInfo,
-  renderOperatorSelectItems
-} from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -28,159 +8,15 @@ type Props = {
 };
 
 export const SecretSyncPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    setValue,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-  const items = useFieldArray({
-    control,
-    name: `permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions`
-  });
-
-  const conditionErrorMessage =
-    errors?.permissions?.[ProjectPermissionSub.SecretSyncs]?.[position]?.conditions?.message ||
-    errors?.permissions?.[ProjectPermissionSub.SecretSyncs]?.[position]?.conditions?.root?.message;
-
   return (
-    <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="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition = watch(
-            `permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}`
-          ) as {
-            lhs: string;
-            rhs: string;
-            operator: string;
-          };
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => {
-                          setValue(
-                            `permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.operator`,
-                            PermissionConditionOperators.$IN as never
-                          );
-                          field.onChange(e);
-                        }}
-                        className="w-full"
-                      >
-                        <SelectItem value="environment">Environment Slug</SelectItem>
-                        <SelectItem value="secretPath">Secret Path</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        {renderOperatorSelectItems(condition.lhs)}
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <div>
-                  <Tooltip
-                    asChild
-                    content={getConditionOperatorHelperInfo(
-                      condition?.operator as PermissionConditionOperators
-                    )}
-                    className="max-w-xs"
-                  >
-                    <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                  </Tooltip>
-                </div>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${ProjectPermissionSub.SecretSyncs}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="remove"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {conditionErrorMessage && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{conditionErrorMessage}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "environment",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.SecretSyncs}
+      position={position}
+      selectOptions={[
+        { value: "environment", label: "Environment Slug" },
+        { value: "secretPath", label: "Secret Path" }
+      ]}
+    />
   );
 };

frontend/src/pages/project/RoleDetailsBySlugPage/components/SshHostPermissionConditions.tsx

@@ -1,23 +1,6 @@
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { faInfoCircle, faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ProjectPermissionSub } from "@app/context/ProjectPermissionContext/types";
 
-import {
-  Button,
-  FormControl,
-  IconButton,
-  Input,
-  Select,
-  SelectItem,
-  Tooltip
-} from "@app/components/v2";
-import {
-  PermissionConditionOperators,
-  ProjectPermissionSub
-} from "@app/context/ProjectPermissionContext/types";
-
-import { getConditionOperatorHelperInfo } from "./PermissionConditionHelpers";
-import { TFormSchema } from "./ProjectRoleModifySection.utils";
+import { ConditionsFields } from "./ConditionsFields";
 
 type Props = {
   position?: number;
@@ -25,149 +8,12 @@ type Props = {
 };
 
 export const SshHostPermissionConditions = ({ position = 0, isDisabled }: Props) => {
-  const {
-    control,
-    watch,
-    formState: { errors }
-  } = useFormContext<TFormSchema>();
-
-  const permissionSubject = ProjectPermissionSub.SshHosts;
-  const items = useFieldArray({
-    control,
-    name: `permissions.${permissionSubject}.${position}.conditions`
-  });
-
   return (
-    <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="text-sm text-mineshaft-400">
-        Conditions determine when a policy will be applied (always if no conditions are present).
-      </p>
-      <p className="mb-3 text-sm leading-4 text-mineshaft-400">
-        All conditions must evaluate to true for the policy to take effect.
-      </p>
-      <div className="mt-2 flex flex-col space-y-2">
-        {items.fields.map((el, index) => {
-          const condition =
-            (watch(`permissions.${permissionSubject}.${position}.conditions.${index}`) as {
-              lhs: string;
-              rhs: string;
-              operator: string;
-            }) || {};
-
-          return (
-            <div
-              key={el.id}
-              className="flex gap-2 bg-mineshaft-800 first:rounded-t-md last:rounded-b-md"
-            >
-              <div className="w-1/4">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.lhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value="hostname">Hostname</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div className="flex w-36 items-center space-x-2">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.operator`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Select
-                        defaultValue={field.value}
-                        {...field}
-                        onValueChange={(e) => field.onChange(e)}
-                        className="w-full"
-                      >
-                        <SelectItem value={PermissionConditionOperators.$EQ}>Equals</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$GLOB}>Glob</SelectItem>
-                        <SelectItem value={PermissionConditionOperators.$IN}>In</SelectItem>
-                      </Select>
-                    </FormControl>
-                  )}
-                />
-                <Tooltip
-                  asChild
-                  content={getConditionOperatorHelperInfo(
-                    condition?.operator as PermissionConditionOperators
-                  )}
-                  className="max-w-xs"
-                >
-                  <FontAwesomeIcon icon={faInfoCircle} size="xs" className="text-gray-400" />
-                </Tooltip>
-              </div>
-              <div className="flex-grow">
-                <Controller
-                  control={control}
-                  name={`permissions.${permissionSubject}.${position}.conditions.${index}.rhs`}
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      isError={Boolean(error?.message)}
-                      errorText={error?.message}
-                      className="mb-0 flex-grow"
-                    >
-                      <Input {...field} onChange={(e) => field.onChange(e.target.value.trim())} />
-                    </FormControl>
-                  )}
-                />
-              </div>
-              <div>
-                <IconButton
-                  ariaLabel="plus"
-                  variant="outline_bg"
-                  className="p-2.5"
-                  onClick={() => items.remove(index)}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message && (
-        <div className="flex items-center space-x-2 py-2 text-sm text-gray-400">
-          <FontAwesomeIcon icon={faWarning} className="text-red" />
-          <span>{errors?.permissions?.[permissionSubject]?.[position]?.conditions?.message}</span>
-        </div>
-      )}
-      <div>
-        <Button
-          leftIcon={<FontAwesomeIcon icon={faPlus} />}
-          variant="star"
-          size="xs"
-          className="mt-3"
-          isDisabled={isDisabled}
-          onClick={() =>
-            items.append({
-              lhs: "hostname",
-              operator: PermissionConditionOperators.$EQ,
-              rhs: ""
-            })
-          }
-        >
-          Add Condition
-        </Button>
-      </div>
-    </div>
+    <ConditionsFields
+      isDisabled={isDisabled}
+      subject={ProjectPermissionSub.SshHosts}
+      position={position}
+      selectOptions={[{ value: "hostname", label: "Hostname" }]}
+    />
   );
 };