From 52a26b51af0b726d9579600036f60fc1713cb5c7 Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Sat, 31 May 2025 17:46:01 -0700
Subject: [PATCH 1/2] revamp UI for access requests

---
 .../SpecificPrivilegeSection.tsx              | 459 ++++++++++--------
 .../components/RolePermissionsSection.tsx     |   4 +-
 .../components/RequestAccessModal.tsx         |   4 +-
 3 files changed, 257 insertions(+), 210 deletions(-)

diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
index e8bc03698..8eaf05fe7 100644
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
@@ -6,6 +6,8 @@ import {
   faCheck,
   faClock,
   faLockOpen,
+  faPencil,
+  faPlus,
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -50,6 +52,7 @@ import {
   useDeleteProjectUserAdditionalPrivilege
 } from "@app/hooks/api";
 import { TAccessApprovalPolicy } from "@app/hooks/api/types";
+import { faEye, faTrashCan } from "@fortawesome/free-regular-svg-icons";
 
 const secretPermissionSchema = z.object({
   secretPath: z.string().optional(),
@@ -205,7 +208,7 @@ export const SpecificPrivilegeSecretForm = ({
     if (!data.secretPath) {
       createNotification({
         type: "error",
-        text: "Please select a secret path",
+        text: "Please select a secret path...",
         title: "Error"
       });
       return;
@@ -264,18 +267,18 @@ export const SpecificPrivilegeSecretForm = ({
   };
 
   return (
-    <div className="mt-4 w-full">
+    <div className="w-full">
       <form onSubmit={privilegeForm.handleSubmit(handleSubmit)}>
-        <div className={twMerge("flex items-start gap-4", !privilege && "flex-wrap")}>
+        <div className={twMerge("flex items-start", !privilege && "flex-col")}>
           <Controller
             control={privilegeForm.control}
             name="environmentSlug"
             render={({ field: { onChange, ...field } }) => (
-              <FormControl label="Environment">
+              <FormControl label="Environment" className="w-full">
                 <Select
                   {...field}
                   isDisabled={isMemberEditDisabled}
-                  className="bg-mineshaft-600 hover:bg-mineshaft-500"
+                  className="bg-mineshaft-900 hover:bg-mineshaft-800 w-full"
                   onValueChange={(e) => onChange(e)}
                 >
                   {currentWorkspace?.environments?.map(({ slug, id, name }) => (
@@ -297,12 +300,13 @@ export const SpecificPrivilegeSecretForm = ({
                     isDisabled={!!selectablePaths.length}
                     content="The selected environment doesn't have any policies."
                   >
-                    <div>
+                    <div className="w-full">
                       <FormControl label="Secret Path">
                         <Select
                           {...field}
                           isDisabled={isMemberEditDisabled || !selectablePaths.length}
-                          className="w-48"
+                          className="w-full hover:bg-mineshaft-800"
+                          placeholder="Select a secret path"
                           onValueChange={(e) => field.onChange(e)}
                         >
                           {selectablePaths.map((path) => (
@@ -328,222 +332,265 @@ export const SpecificPrivilegeSecretForm = ({
               );
             }}
           />
-          <div className="flex flex-grow justify-between">
-            <Controller
-              control={privilegeForm.control}
-              name="read"
-              render={({ field }) => (
-                <div className="flex flex-col items-center">
-                  <FormLabel label="View" className="mb-4" />
-                  <Checkbox
-                    isDisabled={isMemberEditDisabled}
-                    id="secret-read"
-                    className="h-5 w-5"
-                    isChecked={field.value}
-                    onCheckedChange={(isChecked) => field.onChange(isChecked)}
-                  />
-                </div>
-              )}
-            />
-            <Controller
-              control={privilegeForm.control}
-              name="create"
-              render={({ field }) => (
-                <div className="flex flex-col items-center">
-                  <FormLabel label="Create" className="mb-4" />
-                  <Checkbox
-                    isDisabled={isMemberEditDisabled}
-                    id="secret-create"
-                    className="h-5 w-5"
-                    isChecked={field.value}
-                    onCheckedChange={(isChecked) => field.onChange(isChecked)}
-                  />
-                </div>
-              )}
-            />
-            <Controller
-              control={privilegeForm.control}
-              name="edit"
-              render={({ field }) => (
-                <div className="flex flex-col items-center">
-                  <FormLabel label="Modify" className="mb-4" />
-                  <Checkbox
-                    isDisabled={isMemberEditDisabled}
-                    id="secret-modify"
-                    className="h-5 w-5"
-                    isChecked={field.value}
-                    onCheckedChange={(isChecked) => field.onChange(isChecked)}
-                  />
-                </div>
-              )}
-            />
-            <Controller
-              control={privilegeForm.control}
-              name="delete"
-              render={({ field }) => (
-                <div className="flex flex-col items-center">
-                  <FormLabel label="Delete" className="mb-4" />
-                  <Checkbox
-                    isDisabled={isMemberEditDisabled}
-                    id="secret-delete"
-                    className="h-5 w-5"
-                    isChecked={field.value}
-                    onCheckedChange={(isChecked) => field.onChange(isChecked)}
-                  />
-                </div>
-              )}
-            />
-          </div>
-          <div className="mt-6 flex items-center space-x-2">
-            <Popover>
-              <PopoverTrigger disabled={isMemberEditDisabled}>
-                <div>
-                  <Tooltip content={getAccessLabel(true)}>
-                    <Button
-                      variant="outline_bg"
-                      leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
-                      rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-2" />}
-                      isDisabled={isMemberEditDisabled}
-                      className={twMerge(
-                        "border-none bg-mineshaft-600 py-2.5 text-xs capitalize hover:bg-mineshaft-500",
-                        isTemporary && "text-primary",
-                        isExpired && "text-red-600"
-                      )}
+          <FormControl label="Permissions" className="w-full">
+            <div className="flex flex-col w-full justify-between">
+              <div className="flex flex-row gap-2 w-full">
+                <Controller
+                  control={privilegeForm.control}
+                  name="read"
+                  render={({ field }) => (
+                    <label 
+                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                      htmlFor="secret-read"
                     >
-                      {getAccessLabel(false)}
-                    </Button>
-                  </Tooltip>
-                </div>
-              </PopoverTrigger>
-              <PopoverContent
-                arrowClassName="fill-gray-600"
-                side="right"
-                sideOffset={12}
-                hideCloseBtn
-                className="border border-gray-600 pt-4"
-              >
-                <div className="flex flex-col space-y-4">
-                  <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
-                    Configure timed access
-                  </div>
-                  {isExpired && <Tag colorSchema="red">Expired</Tag>}
-                  <Controller
-                    control={privilegeForm.control}
-                    defaultValue="1h"
-                    name="temporaryAccess.temporaryRange"
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        label={<TtlFormLabel label="Validity" />}
-                        isError={Boolean(error?.message)}
-                        errorText={error?.message}
+                      <Checkbox
+                        isDisabled={isMemberEditDisabled}
+                        id="secret-read"
+                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        isChecked={field.value}
+                        onCheckedChange={(isChecked) => field.onChange(isChecked)}
+                      />
+                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                        <div className="flex flex-row items-center gap-1">
+                          <FontAwesomeIcon icon={faEye} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
+                          <FormLabel label="View" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
+                        </div>
+                        <p className="text-xs text-mineshaft-400">Read secret values</p>
+                      </div>
+                    </label>
+                  )}
+                />
+                <Controller
+                  control={privilegeForm.control}
+                  name="create"
+                  render={({ field }) => (
+                    <label 
+                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                      htmlFor="secret-change"
+                    >
+                      <Checkbox
+                        isDisabled={isMemberEditDisabled}
+                        id="secret-change"
+                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        isChecked={field.value}
+                        onCheckedChange={(isChecked) => field.onChange(isChecked)}
+                      />
+                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                        <div className="flex flex-row items-center gap-1">
+                          <FontAwesomeIcon icon={faPlus} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
+                          <FormLabel label="Create" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
+                        </div>
+                        <p className="text-xs text-mineshaft-400">Create new secrets</p>
+                      </div>
+                    </label>
+                  )}
+                />
+              </div>
+              <div className="flex flex-row gap-2 w-full">
+                <Controller
+                  control={privilegeForm.control}
+                  name="edit"
+                  render={({ field }) => (
+                    <label 
+                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                      htmlFor="secret-modify"
+                    >
+                      <Checkbox
+                        isDisabled={isMemberEditDisabled}
+                        id="secret-modify"
+                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        isChecked={field.value}
+                        onCheckedChange={(isChecked) => field.onChange(isChecked)}
+                      />
+                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                        <div className="flex flex-row items-center gap-1">
+                          <FontAwesomeIcon icon={faPencil} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
+                          <FormLabel label="Modify" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
+                        </div>
+                        <p className="text-xs text-mineshaft-400">Update existing secrets</p>
+                      </div>
+                    </label>
+                  )}
+                />
+                <Controller
+                  control={privilegeForm.control}
+                  name="delete"
+                  render={({ field }) => (
+                    <label 
+                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                      htmlFor="secret-delete"
+                    >
+                      <Checkbox
+                        isDisabled={isMemberEditDisabled}
+                        id="secret-delete"
+                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        isChecked={field.value}
+                        onCheckedChange={(isChecked) => field.onChange(isChecked)}
+                      />
+                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                        <div className="flex flex-row items-center gap-1">
+                          <FontAwesomeIcon icon={faTrashCan} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
+                          <FormLabel label="Delete" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
+                        </div>
+                        <p className="text-xs text-mineshaft-400">Delete existing secrets</p>
+                      </div>
+                    </label>
+                  )}
+                />
+              </div>
+            </div>
+          </FormControl>
+          <FormControl label="Time Period" className="w-full">
+            <div className="mt-1 flex items-center space-x-2 w-full">
+              <Popover>
+                <PopoverTrigger disabled={isMemberEditDisabled}>
+                  <div className="w-full">
+                    <Tooltip content={getAccessLabel(true)}>
+                      <Button
+                        variant="outline_bg"
+                        leftIcon={isTemporary ? <FontAwesomeIcon icon={faClock} /> : undefined}
+                        rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-4" />}
+                        isDisabled={isMemberEditDisabled}
+                        className={twMerge(
+                          "border-mineshaft-600 text-mineshaft-300 w-full hover:border-mineshaft-600 bg-mineshaft-900 py-2.5 text-sm capitalize hover:bg-mineshaft-800",
+                          isExpired && "text-red-600"
+                        )}
                       >
-                        <Input {...field} />
-                      </FormControl>
-                    )}
-                  />
-                  <div className="flex items-center space-x-2">
-                    <Button
-                      size="xs"
-                      onClick={() => {
-                        const temporaryRange = privilegeForm.getValues(
-                          "temporaryAccess.temporaryRange"
-                        );
-                        if (!temporaryRange) {
-                          privilegeForm.setError(
-                            "temporaryAccess.temporaryRange",
-                            { type: "required", message: "Required" },
-                            { shouldFocus: true }
-                          );
-                          return;
-                        }
-                        privilegeForm.clearErrors("temporaryAccess.temporaryRange");
-                        privilegeForm.setValue(
-                          "temporaryAccess",
-                          {
-                            isTemporary: true,
-                            temporaryAccessStartTime: new Date().toISOString(),
-                            temporaryRange,
-                            temporaryAccessEndTime: new Date(
-                              new Date().getTime() + ms(temporaryRange)
-                            ).toISOString()
-                          },
-                          { shouldDirty: true }
-                        );
-                      }}
-                    >
-                      {temporaryAccessField.isTemporary && !policies ? "Restart" : "Grant"}
-                    </Button>
-
-                    {temporaryAccessField.isTemporary && (
+                        {getAccessLabel(false)}
+                      </Button>
+                    </Tooltip>
+                  </div>
+                </PopoverTrigger>
+                <PopoverContent
+                  arrowClassName="fill-mineshaft-600"
+                  side="right"
+                  sideOffset={12}
+                  hideCloseBtn
+                  className="border border-mineshaft-600 pt-4 bg-mineshaft-800"
+                >
+                  <div className="flex flex-col space-y-4">
+                    <div className="text-sm text-mineshaft-300">
+                      Configure timed access
+                    </div>
+                    {isExpired && <Tag colorSchema="red">Expired</Tag>}
+                    <Controller
+                      control={privilegeForm.control}
+                      defaultValue="1h"
+                      name="temporaryAccess.temporaryRange"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label={<TtlFormLabel label="Validity" />}
+                          isError={Boolean(error?.message)}
+                          errorText={error?.message}
+                        >
+                          <Input {...field} />
+                        </FormControl>
+                      )}
+                    />
+                    <div className="flex items-center space-x-2">
                       <Button
                         size="xs"
-                        variant="outline_bg"
-                        colorSchema="danger"
                         onClick={() => {
-                          privilegeForm.setValue("temporaryAccess", {
-                            isTemporary: false
-                          });
+                          const temporaryRange = privilegeForm.getValues(
+                            "temporaryAccess.temporaryRange"
+                          );
+                          if (!temporaryRange) {
+                            privilegeForm.setError(
+                              "temporaryAccess.temporaryRange",
+                              { type: "required", message: "Required" },
+                              { shouldFocus: true }
+                            );
+                            return;
+                          }
+                          privilegeForm.clearErrors("temporaryAccess.temporaryRange");
+                          privilegeForm.setValue(
+                            "temporaryAccess",
+                            {
+                              isTemporary: true,
+                              temporaryAccessStartTime: new Date().toISOString(),
+                              temporaryRange,
+                              temporaryAccessEndTime: new Date(
+                                new Date().getTime() + ms(temporaryRange)
+                              ).toISOString()
+                            },
+                            { shouldDirty: true }
+                          );
                         }}
                       >
-                        Cancel
+                        {temporaryAccessField.isTemporary && !policies ? "Restart" : "Grant"}
                       </Button>
-                    )}
+
+                      {temporaryAccessField.isTemporary && (
+                        <Button
+                          size="xs"
+                          variant="outline_bg"
+                          colorSchema="danger"
+                          onClick={() => {
+                            privilegeForm.setValue("temporaryAccess", {
+                              isTemporary: false
+                            });
+                          }}
+                        >
+                          Cancel
+                        </Button>
+                      )}
+                    </div>
                   </div>
-                </div>
-              </PopoverContent>
-            </Popover>
-            {/* eslint-disable-next-line no-nested-ternary */}
-            {privilegeForm.formState.isDirty && privilege ? (
-              <>
-                <Tooltip content="Cancel" className="mr-4">
-                  <IconButton
-                    variant="outline_bg"
-                    className="border border-mineshaft-500 bg-mineshaft-600 py-2.5 hover:border-red/70 hover:bg-red/20"
-                    ariaLabel="delete-privilege"
-                    isDisabled={privilegeForm.formState.isSubmitting}
-                    onClick={() => privilegeForm.reset()}
+                </PopoverContent>
+              </Popover>
+              {/* eslint-disable-next-line no-nested-ternary */}
+              {privilegeForm.formState.isDirty && privilege ? (
+                <>
+                  <Tooltip content="Cancel" className="mr-4">
+                    <IconButton
+                      variant="outline_bg"
+                      className="border border-mineshaft-500 bg-mineshaft-600 py-2.5 hover:border-red/70 hover:bg-red/20"
+                      ariaLabel="delete-privilege"
+                      isDisabled={privilegeForm.formState.isSubmitting}
+                      onClick={() => privilegeForm.reset()}
+                    >
+                      <FontAwesomeIcon icon={faArrowRotateLeft} className="py-0.5" />
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip
+                    content={isMemberEditDisabled ? "Access restricted" : "Save"}
+                    className="mr-4"
                   >
-                    <FontAwesomeIcon icon={faArrowRotateLeft} className="py-0.5" />
-                  </IconButton>
-                </Tooltip>
+                    <IconButton
+                      isDisabled={isMemberEditDisabled}
+                      className="border-none py-3"
+                      ariaLabel="save-privilege"
+                      type="submit"
+                    >
+                      {privilegeForm.formState.isSubmitting ? (
+                        <Spinner size="xs" className="m-0 h-3 w-3 text-slate-500" />
+                      ) : (
+                        <FontAwesomeIcon icon={faCheck} className="px-0.5" />
+                      )}
+                    </IconButton>
+                  </Tooltip>
+                </>
+              ) : // eslint-disable-next-line no-nested-ternary
+              privilege ? (
                 <Tooltip
-                  content={isMemberEditDisabled ? "Access restricted" : "Save"}
+                  content={isMemberEditDisabled ? "Access restricted" : "Delete"}
                   className="mr-4"
                 >
                   <IconButton
                     isDisabled={isMemberEditDisabled}
-                    className="border-none py-3"
-                    ariaLabel="save-privilege"
-                    type="submit"
+                    variant="outline_bg"
+                    className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
+                    ariaLabel="delete-privilege"
+                    onClick={() => handlePopUpOpen("deletePrivilege")}
                   >
-                    {privilegeForm.formState.isSubmitting ? (
-                      <Spinner size="xs" className="m-0 h-3 w-3 text-slate-500" />
-                    ) : (
-                      <FontAwesomeIcon icon={faCheck} className="px-0.5" />
-                    )}
+                    <FontAwesomeIcon icon={faTrash} />
                   </IconButton>
                 </Tooltip>
-              </>
-            ) : // eslint-disable-next-line no-nested-ternary
-            privilege ? (
-              <Tooltip
-                content={isMemberEditDisabled ? "Access restricted" : "Delete"}
-                className="mr-4"
-              >
-                <IconButton
-                  isDisabled={isMemberEditDisabled}
-                  variant="outline_bg"
-                  className="border border-mineshaft-500 bg-mineshaft-600 py-3 hover:border-red/70 hover:bg-red/20"
-                  ariaLabel="delete-privilege"
-                  onClick={() => handlePopUpOpen("deletePrivilege")}
-                >
-                  <FontAwesomeIcon icon={faTrash} />
-                </IconButton>
-              </Tooltip>
-            ) : (
-              <div />
-            )}
-          </div>
+              ) : (
+                <div />
+              )}
+            </div>
+          </FormControl>
         </div>
         <div className="mb-4 flex w-full">
           <Controller
@@ -552,7 +599,7 @@ export const SpecificPrivilegeSecretForm = ({
             render={({ field }) => (
               <div className="w-full">
                 <FormLabel label="Note" className="mb-2" />
-                <Input {...field} isDisabled={isMemberEditDisabled} maxLength={255} />
+                <Input {...field} isDisabled={isMemberEditDisabled} maxLength={255} placeholder="Add the reason for this access request..." className="text-mineshaft-300" />
               </div>
             )}
           />
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx
index a1bbe3d54..382cb0b55 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/RolePermissionsSection.tsx
@@ -158,8 +158,8 @@ export const RolePermissionsSection = ({ roleSlug, isDisabled }: Props) => {
                       variant="outline_bg"
                       type="submit"
                       className={twMerge(
-                        "mr-4 h-10 border border-primary",
-                        isDirty && "bg-primary text-black"
+                        "mr-4 h-10 border",
+                        isDirty && "bg-primary text-black hover:bg-primary hover:opacity-80"
                       )}
                       isDisabled={isSubmitting || !isDirty}
                       isLoading={isSubmitting}
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx
index 8b3561bf6..b337f4e69 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx
@@ -14,9 +14,9 @@ export const RequestAccessModal = ({
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
-        className="max-w-4xl"
+        className="max-w-xl"
         title="Request Access"
-        subTitle="Your role has limited permissions, please contact your administrator to gain access"
+        subTitle="Request access to any secrets and resources based on the predefined policies."
       >
         <SpecificPrivilegeSecretForm onClose={() => onOpenChange(false)} policies={policies} />
       </ModalContent>

From f3d5790e2cc5e1da122570e0e62f3fd188615d97 Mon Sep 17 00:00:00 2001
From: carlosmonastyrski <charly.monastyrski@gmail.com>
Date: Mon, 2 Jun 2025 13:10:50 -0300
Subject: [PATCH 2/2] Fix lint issues

---
 .../SpecificPrivilegeSection.tsx              | 101 +++++++++++-------
 1 file changed, 65 insertions(+), 36 deletions(-)

diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
index 8eaf05fe7..e8d2ef77f 100644
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
@@ -1,5 +1,7 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { faEye, faTrashCan } from "@fortawesome/free-regular-svg-icons";
 import {
   faArrowRotateLeft,
   faCaretDown,
@@ -52,7 +54,6 @@ import {
   useDeleteProjectUserAdditionalPrivilege
 } from "@app/hooks/api";
 import { TAccessApprovalPolicy } from "@app/hooks/api/types";
-import { faEye, faTrashCan } from "@fortawesome/free-regular-svg-icons";
 
 const secretPermissionSchema = z.object({
   secretPath: z.string().optional(),
@@ -278,7 +279,7 @@ export const SpecificPrivilegeSecretForm = ({
                 <Select
                   {...field}
                   isDisabled={isMemberEditDisabled}
-                  className="bg-mineshaft-900 hover:bg-mineshaft-800 w-full"
+                  className="w-full bg-mineshaft-900 hover:bg-mineshaft-800"
                   onValueChange={(e) => onChange(e)}
                 >
                   {currentWorkspace?.environments?.map(({ slug, id, name }) => (
@@ -333,27 +334,33 @@ export const SpecificPrivilegeSecretForm = ({
             }}
           />
           <FormControl label="Permissions" className="w-full">
-            <div className="flex flex-col w-full justify-between">
-              <div className="flex flex-row gap-2 w-full">
+            <div className="flex w-full flex-col justify-between">
+              <div className="flex w-full flex-row gap-2">
                 <Controller
                   control={privilegeForm.control}
                   name="read"
                   render={({ field }) => (
-                    <label 
-                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                    <label
+                      className={`group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-900 p-3 duration-100 hover:border-primary/30 hover:bg-primary/10 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
                       htmlFor="secret-read"
                     >
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-read"
-                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        className={`mx-2 h-5 w-5 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                      <div className="ml-1 flex flex-col text-mineshaft-300">
                         <div className="flex flex-row items-center gap-1">
-                          <FontAwesomeIcon icon={faEye} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
-                          <FormLabel label="View" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
+                          <FontAwesomeIcon
+                            icon={faEye}
+                            className={`text-sm ${field.value ? "text-primary-200" : ""}`}
+                          />
+                          <FormLabel
+                            label="View"
+                            className={`ml-0.5 mt-0 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                          />
                         </div>
                         <p className="text-xs text-mineshaft-400">Read secret values</p>
                       </div>
@@ -364,21 +371,27 @@ export const SpecificPrivilegeSecretForm = ({
                   control={privilegeForm.control}
                   name="create"
                   render={({ field }) => (
-                    <label 
-                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                    <label
+                      className={`group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-900 p-3 duration-100 hover:border-primary/30 hover:bg-primary/10 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
                       htmlFor="secret-change"
                     >
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-change"
-                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        className={`mx-2 h-5 w-5 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                      <div className="ml-1 flex flex-col text-mineshaft-300">
                         <div className="flex flex-row items-center gap-1">
-                          <FontAwesomeIcon icon={faPlus} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
-                          <FormLabel label="Create" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
+                          <FontAwesomeIcon
+                            icon={faPlus}
+                            className={`text-sm ${field.value ? "text-primary-200" : ""}`}
+                          />
+                          <FormLabel
+                            label="Create"
+                            className={`ml-0.5 mt-0 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                          />
                         </div>
                         <p className="text-xs text-mineshaft-400">Create new secrets</p>
                       </div>
@@ -386,26 +399,32 @@ export const SpecificPrivilegeSecretForm = ({
                   )}
                 />
               </div>
-              <div className="flex flex-row gap-2 w-full">
+              <div className="flex w-full flex-row gap-2">
                 <Controller
                   control={privilegeForm.control}
                   name="edit"
                   render={({ field }) => (
-                    <label 
-                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                    <label
+                      className={`group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-900 p-3 duration-100 hover:border-primary/30 hover:bg-primary/10 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
                       htmlFor="secret-modify"
                     >
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-modify"
-                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        className={`mx-2 h-5 w-5 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                      <div className="ml-1 flex flex-col text-mineshaft-300">
                         <div className="flex flex-row items-center gap-1">
-                          <FontAwesomeIcon icon={faPencil} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
-                          <FormLabel label="Modify" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
+                          <FontAwesomeIcon
+                            icon={faPencil}
+                            className={`text-sm ${field.value ? "text-primary-200" : ""}`}
+                          />
+                          <FormLabel
+                            label="Modify"
+                            className={`ml-0.5 mt-0 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                          />
                         </div>
                         <p className="text-xs text-mineshaft-400">Update existing secrets</p>
                       </div>
@@ -416,21 +435,27 @@ export const SpecificPrivilegeSecretForm = ({
                   control={privilegeForm.control}
                   name="delete"
                   render={({ field }) => (
-                    <label 
-                      className={`group cursor-pointer w-full flex flex-row justify-start items-center gap-2 border border-mineshaft-600 rounded-md p-3 my-1 bg-mineshaft-900 hover:bg-primary/10 hover:border-primary/30 duration-100 ${field.value ? "bg-primary/10 border-primary/50 hover:border-primary/50" : ""}`}
+                    <label
+                      className={`group my-1 flex w-full cursor-pointer flex-row items-center justify-start gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-900 p-3 duration-100 hover:border-primary/30 hover:bg-primary/10 ${field.value ? "border-primary/50 bg-primary/10 hover:border-primary/50" : ""}`}
                       htmlFor="secret-delete"
                     >
                       <Checkbox
                         isDisabled={isMemberEditDisabled}
                         id="secret-delete"
-                        className={`h-5 w-5 mx-2 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
+                        className={`mx-2 h-5 w-5 ${field.value ? "bg-primary hover:bg-primary/80" : ""}`}
                         isChecked={field.value}
                         onCheckedChange={(isChecked) => field.onChange(isChecked)}
                       />
-                      <div className="flex flex-col text-mineshaft-300 ml-1">
+                      <div className="ml-1 flex flex-col text-mineshaft-300">
                         <div className="flex flex-row items-center gap-1">
-                          <FontAwesomeIcon icon={faTrashCan} className={`text-sm ${field.value ? "text-primary-200" : ""}`} />
-                          <FormLabel label="Delete" className={`ml-0.5 text-mineshaft-300 mt-0 ${field.value ? "text-primary-200" : ""}`} />
+                          <FontAwesomeIcon
+                            icon={faTrashCan}
+                            className={`text-sm ${field.value ? "text-primary-200" : ""}`}
+                          />
+                          <FormLabel
+                            label="Delete"
+                            className={`ml-0.5 mt-0 text-mineshaft-300 ${field.value ? "text-primary-200" : ""}`}
+                          />
                         </div>
                         <p className="text-xs text-mineshaft-400">Delete existing secrets</p>
                       </div>
@@ -441,7 +466,7 @@ export const SpecificPrivilegeSecretForm = ({
             </div>
           </FormControl>
           <FormControl label="Time Period" className="w-full">
-            <div className="mt-1 flex items-center space-x-2 w-full">
+            <div className="mt-1 flex w-full items-center space-x-2">
               <Popover>
                 <PopoverTrigger disabled={isMemberEditDisabled}>
                   <div className="w-full">
@@ -452,7 +477,7 @@ export const SpecificPrivilegeSecretForm = ({
                         rightIcon={<FontAwesomeIcon icon={faCaretDown} className="ml-4" />}
                         isDisabled={isMemberEditDisabled}
                         className={twMerge(
-                          "border-mineshaft-600 text-mineshaft-300 w-full hover:border-mineshaft-600 bg-mineshaft-900 py-2.5 text-sm capitalize hover:bg-mineshaft-800",
+                          "w-full border-mineshaft-600 bg-mineshaft-900 py-2.5 text-sm capitalize text-mineshaft-300 hover:border-mineshaft-600 hover:bg-mineshaft-800",
                           isExpired && "text-red-600"
                         )}
                       >
@@ -466,12 +491,10 @@ export const SpecificPrivilegeSecretForm = ({
                   side="right"
                   sideOffset={12}
                   hideCloseBtn
-                  className="border border-mineshaft-600 pt-4 bg-mineshaft-800"
+                  className="border border-mineshaft-600 bg-mineshaft-800 pt-4"
                 >
                   <div className="flex flex-col space-y-4">
-                    <div className="text-sm text-mineshaft-300">
-                      Configure timed access
-                    </div>
+                    <div className="text-sm text-mineshaft-300">Configure timed access</div>
                     {isExpired && <Tag colorSchema="red">Expired</Tag>}
                     <Controller
                       control={privilegeForm.control}
@@ -599,7 +622,13 @@ export const SpecificPrivilegeSecretForm = ({
             render={({ field }) => (
               <div className="w-full">
                 <FormLabel label="Note" className="mb-2" />
-                <Input {...field} isDisabled={isMemberEditDisabled} maxLength={255} placeholder="Add the reason for this access request..." className="text-mineshaft-300" />
+                <Input
+                  {...field}
+                  isDisabled={isMemberEditDisabled}
+                  maxLength={255}
+                  placeholder="Add the reason for this access request..."
+                  className="text-mineshaft-300"
+                />
               </div>
             )}
           />