feat: updated layout and fixed item not getting removed

frontend/src/views/Project/RolePage/components/RolePermissionsSection/RolePermissionsSection.tsx

@@ -2,9 +2,10 @@ import { FormProvider, useForm } from "react-hook-form";
 import { faCancel, faPlus, faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, Modal, ModalContent, ModalTrigger, Spinner } from "@app/components/v2";
+import { Button, IconButton, Modal, ModalContent, ModalTrigger, Tooltip } from "@app/components/v2";
 import { ProjectPermissionSub, useWorkspace } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useGetProjectRoleBySlug, useUpdateProjectRole } from "@app/hooks/api";
@@ -78,67 +79,73 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
           <div className="flex items-center space-x-4">
             {isCustomRole && (
               <>
-                <Button
-                  colorSchema="primary"
-                  type="submit"
-                  isDisabled={isSubmitting || !isDirty}
-                  isLoading={isSubmitting}
-                  leftIcon={<FontAwesomeIcon icon={faSave} />}
-                >
-                  Save
-                </Button>
-                <Button
-                  className="ml-4 text-mineshaft-300"
-                  variant="link"
-                  isDisabled={isSubmitting || !isDirty}
-                  isLoading={isSubmitting}
-                  onClick={() => reset()}
-                  leftIcon={<FontAwesomeIcon icon={faCancel} />}
-                >
-                  Cancel
-                </Button>
+                {isDirty && (
+                  <Button
+                    className="ml-4 text-mineshaft-300"
+                    variant="link"
+                    isDisabled={isSubmitting}
+                    isLoading={isSubmitting}
+                    onClick={() => reset()}
+                    leftIcon={<FontAwesomeIcon icon={faCancel} />}
+                  >
+                    Discard
+                  </Button>
+                )}
+                <div className="flex items-center">
+                  <Button
+                    variant="outline_bg"
+                    type="submit"
+                    className={twMerge("h-10 rounded-r-none", isDirty && "bg-primary text-black")}
+                    isDisabled={isSubmitting || !isDirty}
+                    isLoading={isSubmitting}
+                    leftIcon={<FontAwesomeIcon icon={faSave} />}
+                  >
+                    Save
+                  </Button>
+                  <Modal
+                    isOpen={popUp.createPolicy.isOpen}
+                    onOpenChange={(isOpen) => handlePopUpToggle("createPolicy", isOpen)}
+                  >
+                    <ModalTrigger asChild disabled={isDisabled}>
+                      <IconButton
+                        isDisabled={isDisabled}
+                        ariaLabel="new-policy"
+                        className="rounded-l-none bg-mineshaft-600 p-3"
+                        variant="outline_bg"
+                      >
+                        <Tooltip content="New policy">
+                          <FontAwesomeIcon icon={faPlus} />
+                        </Tooltip>
+                      </IconButton>
+                    </ModalTrigger>
+                    <ModalContent
+                      title="New Policy"
+                      subTitle="Policies grant additional permissions."
+                    >
+                      <NewPermissionRule onClose={() => handlePopUpToggle("createPolicy")} />
+                    </ModalContent>
+                  </Modal>
+                </div>
               </>
             )}
           </div>
         </div>
-        {isSubmitting ? (
-          <div className="flex items-center justify-center space-x-4 pt-16">
-            <Spinner size="lg" />
-            <p className="text-sm text-gray-400">Saving your policy.</p>
-          </div>
-        ) : (
-          <>
-            <div className="py-4">
-              {!isLoading && <PermissionEmptyState />}
-              {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
-                <GeneralPermissionOptions
-                  subject={subject}
-                  actions={PROJECT_PERMISSION_OBJECT[subject].actions}
-                  title={PROJECT_PERMISSION_OBJECT[subject].title}
-                  key={`project-permission-${subject}`}
-                  isDisabled={isDisabled}
-                >
-                  {subject === ProjectPermissionSub.Secrets ? (
-                    <SecretPermissionConditions isDisabled={isDisabled} />
-                  ) : undefined}
-                </GeneralPermissionOptions>
-              ))}
-            </div>
-            <Modal
-              isOpen={popUp.createPolicy.isOpen}
-              onOpenChange={(isOpen) => handlePopUpToggle("createPolicy", isOpen)}
+        <div className="py-4">
+          {!isLoading && <PermissionEmptyState />}
+          {(Object.keys(PROJECT_PERMISSION_OBJECT) as ProjectPermissionSub[]).map((subject) => (
+            <GeneralPermissionOptions
+              subject={subject}
+              actions={PROJECT_PERMISSION_OBJECT[subject].actions}
+              title={PROJECT_PERMISSION_OBJECT[subject].title}
+              key={`project-permission-${subject}`}
+              isDisabled={isDisabled}
             >
-              <ModalTrigger asChild disabled={isDisabled}>
-                <Button isDisabled={isDisabled} leftIcon={<FontAwesomeIcon icon={faPlus} />}>
-                  Add Policy
-                </Button>
-              </ModalTrigger>
-              <ModalContent title="New Policy" subTitle="Policies grant additional permissions.">
-                <NewPermissionRule onClose={() => handlePopUpToggle("createPolicy")} />
-              </ModalContent>
-            </Modal>
-          </>
-        )}
+              {subject === ProjectPermissionSub.Secrets ? (
+                <SecretPermissionConditions isDisabled={isDisabled} />
+              ) : undefined}
+            </GeneralPermissionOptions>
+          ))}
+        </div>
       </FormProvider>
     </form>
   );

frontend/src/views/Project/RolePage/components/RolePermissionsSection/components/GeneralPermissionOptions.tsx

@@ -2,7 +2,7 @@ import { cloneElement } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import { faChevronDown, faChevronRight, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { AnimatePresence, motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
 
 import { Button, Checkbox, Tag } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
@@ -59,94 +59,81 @@ export const GeneralPermissionOptions = <T extends keyof NonNullable<TFormSchema
           </div>
         )}
       </div>
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            key={`select-${subject}-type`}
-            transition={{ duration: 0.3 }}
-            initial={{ opacity: 0, translateY: -10 }}
-            animate={{ opacity: 1, translateY: 0 }}
-            exit={{ opacity: 0, translateY: 10 }}
-            className="flex flex-col space-y-4 bg-bunker-800 p-6"
-          >
-            <AnimatePresence>
-              {items.fields.map((el, rootIndex) => (
-                <motion.div
-                  key={el.id}
-                  transition={{ duration: 0.3 }}
-                  initial={{ opacity: 0, translateY: -20 }}
-                  animate={{ opacity: 1, translateY: 0 }}
-                  exit={{ opacity: 0, translateY: -20 }}
-                  className="bg-mineshaft-800 p-5 first:rounded-t-md last:rounded-b-md"
-                >
-                  <div className="flex text-gray-300">
-                    <div className="w-1/4">Actions</div>
-                    <div className="flex flex-grow flex-wrap justify-start gap-8">
-                      {actions.map(({ label, value }) => {
-                        if (typeof value !== "string") return undefined;
-                        return (
-                          <Controller
-                            key={`${el.id}-${label}`}
-                            name={`permissions.${subject}.${rootIndex}.${value}` as any}
-                            control={control}
-                            defaultValue={false}
-                            render={({ field }) => (
-                              <div className="flex items-center justify-center">
-                                <Checkbox
-                                  isDisabled={isDisabled}
-                                  isChecked={Boolean(field.value)}
-                                  onCheckedChange={field.onChange}
-                                  id={`permissions.${subject}.${rootIndex}.${String(value)}`}
-                                >
-                                  {label}
-                                </Checkbox>
-                              </div>
-                            )}
-                          />
-                        );
-                      })}
-                    </div>
-                  </div>
-                  {children &&
-                    cloneElement(children, {
-                      position: rootIndex
-                    })}
-                  <div className="mt-2 flex justify-end space-x-4">
-                    {!isDisabled && subject === ProjectPermissionSub.Secrets && (
-                      <Button
-                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                        variant="star"
-                        size="xs"
-                        className="mt-2"
-                        onClick={() => {
-                          items.insert(rootIndex, [
-                            { 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={() => items.remove(rootIndex)}
-                        isDisabled={isDisabled}
-                      >
-                        Remove policy
-                      </Button>
-                    )}{" "}
-                  </div>
-                </motion.div>
-              ))}
-            </AnimatePresence>
-          </motion.div>
-        )}
-      </AnimatePresence>
+      {isOpen && (
+        <div key={`select-${subject}-type`} className="flex flex-col space-y-4 bg-bunker-800 p-6">
+          {items.fields.map((el, rootIndex) => (
+            <div key={el.id} className="bg-mineshaft-800 p-5 first:rounded-t-md last:rounded-b-md">
+              <div className="flex text-gray-300">
+                <div className="w-1/4">Actions</div>
+                <div className="flex flex-grow flex-wrap justify-start gap-8">
+                  {actions.map(({ label, value }) => {
+                    if (typeof value !== "string") return undefined;
+                    return (
+                      <Controller
+                        key={`${el.id}-${label}`}
+                        name={`permissions.${subject}.${rootIndex}.${value}` as any}
+                        control={control}
+                        defaultValue={false}
+                        render={({ field }) => (
+                          <div className="flex items-center justify-center">
+                            <Checkbox
+                              isDisabled={isDisabled}
+                              isChecked={Boolean(field.value)}
+                              onCheckedChange={field.onChange}
+                              id={`permissions.${subject}.${rootIndex}.${String(value)}`}
+                            >
+                              {label}
+                            </Checkbox>
+                          </div>
+                        )}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+              {children &&
+                cloneElement(children, {
+                  position: rootIndex
+                })}
+              <div
+                className={twMerge(
+                  "mt-4 flex justify-start space-x-4",
+                  subject === ProjectPermissionSub.Secrets && "justify-end"
+                )}
+              >
+                {!isDisabled && subject === ProjectPermissionSub.Secrets && (
+                  <Button
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                    variant="star"
+                    size="xs"
+                    className="mt-2"
+                    onClick={() => {
+                      items.insert(rootIndex, [
+                        { 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={() => items.remove(rootIndex)}
+                    isDisabled={isDisabled}
+                  >
+                    Remove policy
+                  </Button>
+                )}{" "}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };

frontend/src/views/Project/RolePage/components/RolePermissionsSection/components/SecretPermissionConditions.tsx

@@ -1,7 +1,6 @@
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import { faPlus, faTrash, faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { twMerge } from "tailwind-merge";
 
 import { Button, FormControl, IconButton, Input, Select, SelectItem } from "@app/components/v2";
 import { PermissionConditionOperators } from "@app/context/ProjectPermissionContext/types";
@@ -31,12 +30,7 @@ export const SecretPermissionConditions = ({ position = 0, isDisabled }: Props)
   });
 
   return (
-    <div
-      className={twMerge(
-        "mt-6 bg-mineshaft-800",
-        items.fields.length && " border-t border-t-gray-800  pt-2"
-      )}
-    >
+    <div className="mt-6 border-t  border-t-gray-800 bg-mineshaft-800  pt-2">
       <div className="mt-2 flex flex-col space-y-2">
         {items.fields.map((el, index) => {
           const lhs = watch(`permissions.secrets.${position}.conditions.${index}.lhs`);