feat: resolved review comments: metadata overflow, save not working on first policy etc

frontend/src/views/Org/IdentityPage/components/IdentityDetailsSection.tsx

@@ -85,7 +85,7 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
         <div>
           <p className="text-sm font-semibold text-mineshaft-300">Metadata</p>
           {data?.metadata?.length ? (
-            <div className="mt-1 flex gap-2 text-sm text-mineshaft-300">
+            <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
               {data.metadata?.map((el) => (
                 <div key={el.id} className="flex items-center">
                   <Tag
@@ -99,7 +99,9 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
                     size="xs"
                     className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
                   >
-                    <div>{el.value}</div>
+                    <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
+                      {el.value}
+                    </div>
                   </Tag>
                 </div>
               ))}

frontend/src/views/Org/UserPage/components/UserDetailsSection.tsx

@@ -171,7 +171,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
         <div>
           <p className="text-sm font-semibold text-mineshaft-300">Metadata</p>
           {membership?.metadata?.length ? (
-            <div className="mt-1 flex gap-2 text-sm text-mineshaft-300">
+            <div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
               {membership.metadata?.map((el) => (
                 <div key={el.id} className="flex items-center">
                   <Tag
@@ -185,7 +185,9 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
                     size="xs"
                     className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
                   >
-                    <div>{el.value}</div>
+                    <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
+                      {el.value}
+                    </div>
                   </Tag>
                 </div>
               ))}

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

@@ -17,7 +17,7 @@ import {
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
-import { useDeleteProjectRole,useGetProjectRoleBySlug } from "@app/hooks/api";
+import { useDeleteProjectRole, useGetProjectRoleBySlug } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { TabSections } from "../Types";
@@ -76,7 +76,9 @@ export const RolePage = withProjectPermission(
               variant="link"
               type="submit"
               leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-              onClick={() => router.push(`/project/${projectId}/members?selectedTab=${TabSections.Roles}`)}
+              onClick={() =>
+                router.push(`/project/${projectId}/members?selectedTab=${TabSections.Roles}`)
+              }
               className="mb-4"
             >
               Roles
@@ -139,7 +141,7 @@ export const RolePage = withProjectPermission(
               <div className="mr-4 w-96">
                 <RoleDetailsSection roleSlug={roleSlug} handlePopUpOpen={handlePopUpOpen} />
               </div>
-              <RolePermissionsSection roleSlug={roleSlug} />
+              <RolePermissionsSection roleSlug={roleSlug} isDisabled={!isCustomRole} />
             </div>
           </div>
         )}

frontend/src/views/Project/RolePage/components/RolePermissionsSection/ProjectRoleModifySection.utils.ts

@@ -178,7 +178,7 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
       if (canCreate) formVal[subject as ProjectPermissionSub.Member]![0].create = true;
     } else if (subject === ProjectPermissionSub.SecretFolders) {
       const canRead = action.includes(ProjectPermissionActions.Read);
-      if (!formVal[subject]) formVal[subject] = [];
+      if (!formVal[subject]) formVal[subject] = [{}];
 
       // from above statement we are sure it won't be undefined
       if (canRead) formVal[subject as ProjectPermissionSub.Member]![0].read = true;

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

@@ -2,7 +2,6 @@ import { FormProvider, useForm } from "react-hook-form";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { AnimatePresence } from "framer-motion";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, Modal, ModalContent, ModalTrigger } from "@app/components/v2";
@@ -95,22 +94,21 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
             )}
           </div>
         </div>
-        <AnimatePresence>
-          <div className="py-4">
-            {(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}`}
-              >
-                {subject === ProjectPermissionSub.Secrets ? (
-                  <SecretPermissionConditions />
-                ) : undefined}
-              </GeneralPermissionOptions>
-            ))}
-          </div>
-        </AnimatePresence>
+        <div className="py-4">
+          {(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)}

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 { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 
 import { Button, Checkbox, Tag } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
@@ -15,13 +15,15 @@ type Props<T extends ProjectPermissionSub> = {
   subject: T;
   actions: TProjectPermissionObject[T]["actions"];
   children?: JSX.Element;
+  isDisabled?: boolean;
 };
 
 export const GeneralPermissionOptions = <T extends keyof NonNullable<TFormSchema["permissions"]>>({
   subject,
   actions,
   children,
-  title
+  title,
+  isDisabled
 }: Props<T>) => {
   const { control } = useFormContext<TFormSchema>();
   const items = useFieldArray({
@@ -57,74 +59,93 @@ export const GeneralPermissionOptions = <T extends keyof NonNullable<TFormSchema
           </div>
         )}
       </div>
-      {isOpen && (
-        <motion.div
-          key={`select-${subject}-type`}
-          transition={{ duration: 0.3 }}
-          initial={{ opacity: 0, translateY: -10 }}
-          animate={{ opacity: 1, translateY: 0 }}
-          exit={{ opacity: 0, translateX: 10 }}
-          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
-                              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">
-                {subject === ProjectPermissionSub.Secrets && (
-                  <Button
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    variant="star"
-                    size="xs"
-                    className="mt-2"
-                    onClick={() => items.insert(rootIndex, [{} as any])}
-                  >
-                    Add rule
-                  </Button>
-                )}
-                <Button
-                  leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                  variant="outline_bg"
-                  size="xs"
-                  className="mt-2 hover:border-red"
-                  onClick={() => items.remove(rootIndex)}
+      <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"
                 >
-                  Remove Rule
-                </Button>
-              </div>
-            </div>
-          ))}
-        </motion.div>
-      )}
+                  <div className="flex text-gray-300">
+                    <div className="w-1/4">Actions</div>
+                    <div className="flex flex-grow flex-wrap justify-start gap-8">
+                      {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
+                                  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 rule
+                      </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 Rule
+                      </Button>
+                    )}{" "}
+                  </div>
+                </motion.div>
+              ))}
+            </AnimatePresence>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };

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

@@ -90,16 +90,20 @@ export const NewPermissionRule = ({ onClose }: Props) => {
           onClick={form.handleSubmit((el) => {
             const rootPolicyValue = rootForm.getValues("permissions")?.[el.type];
             if (rootPolicyValue && selectedSubject === ProjectPermissionSub.Secrets) {
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore-error akhilmhdh: this is because of ts collision with both
-              rootForm.setValue(`permissions.${el.type}`, [
-                ...rootPolicyValue,
-                ...(el?.permissions[el.type] || [])
-              ]);
+              rootForm.setValue(
+                `permissions.${el.type}`,
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore-error akhilmhdh: this is because of ts collision with both
+                [...rootPolicyValue, ...(el?.permissions[el.type] || [])],
+                { shouldDirty: true, shouldTouch: true }
+              );
             } else {
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore-error akhilmhdh: this is because of ts collision with both
-              rootForm.setValue(`permissions.${el.type}`, el?.permissions?.[el.type]);
+              rootForm.setValue(`permissions.${el.type}`, el?.permissions?.[el.type], {
+                shouldDirty: true,
+                shouldTouch: true
+              });
             }
             onClose();
           })}

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

@@ -9,9 +9,10 @@ import { TFormSchema } from "../ProjectRoleModifySection.utils";
 
 type Props = {
   position?: number;
+  isDisabled?: boolean;
 };
 
-export const SecretPermissionConditions = ({ position = 0 }: Props) => {
+export const SecretPermissionConditions = ({ position = 0, isDisabled }: Props) => {
   const { control } = useFormContext<TFormSchema>();
   const items = useFieldArray({
     control,
@@ -108,6 +109,7 @@ export const SecretPermissionConditions = ({ position = 0 }: Props) => {
           variant="star"
           size="xs"
           className="mt-3"
+          isDisabled={isDisabled}
           onClick={() =>
             items.append({
               lhs: "environment",