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,36 +79,57 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
           <div className="flex items-center space-x-4">
             {isCustomRole && (
               <>
+                {isDirty && (
                   <Button
-                  colorSchema="primary"
+                    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>
-                <Button
+                  <Modal
-                  className="ml-4 text-mineshaft-300"
+                    isOpen={popUp.createPolicy.isOpen}
-                  variant="link"
+                    onOpenChange={(isOpen) => handlePopUpToggle("createPolicy", isOpen)}
-                  isDisabled={isSubmitting || !isDirty}
-                  isLoading={isSubmitting}
-                  onClick={() => reset()}
-                  leftIcon={<FontAwesomeIcon icon={faCancel} />}
                   >
-                  Cancel
+                    <ModalTrigger asChild disabled={isDisabled}>
-                </Button>
+                      <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) => (
@@ -124,21 +146,6 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
             </GeneralPermissionOptions>
           ))}
         </div>
-            <Modal
-              isOpen={popUp.createPolicy.isOpen}
-              onOpenChange={(isOpen) => handlePopUpToggle("createPolicy", isOpen)}
-            >
-              <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>
-          </>
-        )}
       </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,26 +59,10 @@ export const GeneralPermissionOptions = <T extends keyof NonNullable<TFormSchema
           </div>
         )}
       </div>
-      <AnimatePresence>
       {isOpen && (
-          <motion.div
+        <div key={`select-${subject}-type`} className="flex flex-col space-y-4 bg-bunker-800 p-6">
-            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
+            <div key={el.id} className="bg-mineshaft-800 p-5 first:rounded-t-md last:rounded-b-md">
-                  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">
@@ -111,7 +95,12 @@ export const GeneralPermissionOptions = <T extends keyof NonNullable<TFormSchema
                 cloneElement(children, {
                   position: rootIndex
                 })}
-                  <div className="mt-2 flex justify-end space-x-4">
+              <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} />}
@@ -141,12 +130,10 @@ export const GeneralPermissionOptions = <T extends keyof NonNullable<TFormSchema
                   </Button>
                 )}{" "}
               </div>
-                </motion.div>
+            </div>
           ))}
-            </AnimatePresence>
+        </div>
-          </motion.div>
       )}
-      </AnimatePresence>
     </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
+    <div className="mt-6 border-t  border-t-gray-800 bg-mineshaft-800  pt-2">
-      className={twMerge(
-        "mt-6 bg-mineshaft-800",
-        items.fields.length && " border-t border-t-gray-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`);