feat(rbac): added new permission check for workspace in frontend

frontend/src/views/DashboardPage/components/SecretImportSection/SecretImportItem.tsx

@@ -9,9 +9,10 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { ProjectPermissionCan } from "@app/components/permissions";
 import { EmptyState, IconButton, SecretInput, TableContainer, Tooltip } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import { useToggle } from "@app/hooks/useToggle";
+import { ProjectPermissionActions, ProjectPermissionSub,useWorkspace  } from "@app/context";
+import { useToggle } from "@app/hooks";
 
 type Props = {
   onDelete: (environment: string, secretPath: string) => void;
@@ -49,7 +50,9 @@ export const SecretImportItem = ({
   const rowEnv = currentWorkspace?.environments?.find(({ slug }) => slug === importedEnv);
 
   useEffect(() => {
-    const filteredSecrets = importedSecrets.filter(secret => secret.key.toUpperCase().includes(searchTerm.toUpperCase()))
+    const filteredSecrets = importedSecrets.filter((secret) =>
+      secret.key.toUpperCase().includes(searchTerm.toUpperCase())
+    );
 
     if (filteredSecrets.length > 0 && searchTerm) {
       setIsExpanded.on();
@@ -58,7 +61,6 @@ export const SecretImportItem = ({
     }
   }, [searchTerm]);
 
-
   useEffect(() => {
     if (isDragging) {
       setIsExpanded.off();
@@ -78,7 +80,11 @@ export const SecretImportItem = ({
         className="group flex cursor-default flex-row items-center hover:bg-mineshaft-700"
         onClick={() => setIsExpanded.toggle()}
       >
-        <td className={`ml-0.5 flex h-10 w-10 items-center justify-center border-none px-4 ${isExpanded && "border-t-2 border-mineshaft-500"}`}>
+        <td
+          className={`ml-0.5 flex h-10 w-10 items-center justify-center border-none px-4 ${
+            isExpanded && "border-t-2 border-mineshaft-500"
+          }`}
+        >
           <Tooltip content="Secret Import" className="capitalize">
             <FontAwesomeIcon icon={faFileImport} className="text-green-700" />
           </Tooltip>
@@ -106,28 +112,39 @@ export const SecretImportItem = ({
                 </IconButton>
               </Tooltip>
             </div>
-            <div className="opacity-0 group-hover:opacity-100">
-              <Tooltip content="Delete" className="capitalize">
-                <IconButton
-                  size="md"
-                  variant="plain"
-                  colorSchema="danger"
-                  ariaLabel="delete"
-                  onClick={(evt) => {
-                    evt.stopPropagation();
-                    onDelete(importedEnv, importedSecPath);
-                  }}
-                >
-                  <FontAwesomeIcon icon={faXmark} size="lg" />
-                </IconButton>
-              </Tooltip>
-            </div>
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Delete}
+              a={ProjectPermissionSub.SecretImports}
+            >
+              {(isAllowed) => (
+                <div className="opacity-0 group-hover:opacity-100">
+                  <Tooltip content="Delete" className="capitalize">
+                    <IconButton
+                      size="md"
+                      variant="plain"
+                      colorSchema="danger"
+                      ariaLabel="delete"
+                      isDisabled={!isAllowed}
+                      onClick={(evt) => {
+                        evt.stopPropagation();
+                        onDelete(importedEnv, importedSecPath);
+                      }}
+                    >
+                      <FontAwesomeIcon icon={faXmark} size="lg" />
+                    </IconButton>
+                  </Tooltip>
+                </div>
+              )}
+            </ProjectPermissionCan>
           </div>
         </td>
       </tr>
       <tr>
         {isExpanded && !isDragging && (
-          <td colSpan={3} className={`bg-bunker-800 ${isExpanded && "border-b-2 border-mineshaft-500"}`}>
+          <td
+            colSpan={3}
+            className={`bg-bunker-800 ${isExpanded && "border-b-2 border-mineshaft-500"}`}
+          >
             <div className="rounded-md bg-bunker-700 p-1">
               <TableContainer>
                 <table className="secret-table">
@@ -146,19 +163,26 @@ export const SecretImportItem = ({
                         </td>
                       </tr>
                     )}
-                    {importedSecrets.filter(secret => secret.key.toUpperCase().includes(searchTerm.toUpperCase())).map(({ key, value, overriden }, index) => (
-                      <tr key={`${importedEnv}-${importedSecPath}-${key}-${index + 1}`}>
-                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
-                          {key}
-                        </td>
-                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
-                          <SecretInput value={value} isDisabled isVisible />
-                        </td>
-                        <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
-                          <EnvFolderIcon env={overriden?.env} secretPath={overriden?.secretPath} />
-                        </td>
-                      </tr>
-                    ))}
+                    {importedSecrets
+                      .filter((secret) =>
+                        secret.key.toUpperCase().includes(searchTerm.toUpperCase())
+                      )
+                      .map(({ key, value, overriden }, index) => (
+                        <tr key={`${importedEnv}-${importedSecPath}-${key}-${index + 1}`}>
+                          <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                            {key}
+                          </td>
+                          <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                            <SecretInput value={value} isDisabled isVisible />
+                          </td>
+                          <td className="h-10" style={{ padding: "0.25rem 1rem" }}>
+                            <EnvFolderIcon
+                              env={overriden?.env}
+                              secretPath={overriden?.secretPath}
+                            />
+                          </td>
+                        </tr>
+                      ))}
                   </tbody>
                 </table>
               </TableContainer>