feat(rbac): added frontend permission validation for missing pages and merged new features

frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -42,17 +42,19 @@ export const AutoCapitalizationSection = withProjectPermission(
         <p className="mb-3 text-xl font-semibold">{t("settings.project.auto-capitalization")}</p>
         <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
           {(isAllowed) => (
-            <Checkbox
-              className="data-[state=checked]:bg-primary"
-              id="autoCapitalization"
-              isDisabled={!isAllowed}
-              isChecked={currentWorkspace?.autoCapitalization ?? false}
-              onCheckedChange={(state) => {
-                handleToggleCapitalizationToggle(state as boolean);
-              }}
-            >
-              {t("settings.project.auto-capitalization-description")}
-            </Checkbox>
+            <div className="w-max">
+              <Checkbox
+                className="data-[state=checked]:bg-primary"
+                id="autoCapitalization"
+                isDisabled={!isAllowed}
+                isChecked={currentWorkspace?.autoCapitalization ?? false}
+                onCheckedChange={(state) => {
+                  handleToggleCapitalizationToggle(state as boolean);
+                }}
+              >
+                {t("settings.project.auto-capitalization-description")}
+              </Checkbox>
+            </div>
           )}
         </ProjectPermissionCan>
       </div>

frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx

@@ -90,17 +90,19 @@ export const E2EESection = withProjectPermission(
         </p>
         <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
           {(isAllowed) => (
-            <Checkbox
-              className="data-[state=checked]:bg-primary"
-              id="autoCapitalization"
-              isChecked={!bot.isActive}
-              isDisabled={!isAllowed}
-              onCheckedChange={async () => {
-                await toggleBotActivate();
-              }}
-            >
-              End-to-end encryption enabled
-            </Checkbox>
+            <div className="w-max">
+              <Checkbox
+                className="data-[state=checked]:bg-primary"
+                id="autoCapitalization"
+                isChecked={!bot.isActive}
+                isDisabled={!isAllowed}
+                onCheckedChange={async () => {
+                  await toggleBotActivate();
+                }}
+              >
+                End-to-end encryption enabled
+              </Checkbox>
+            </div>
           )}
         </ProjectPermissionCan>
       </div>

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentTable.tsx

@@ -1,4 +1,4 @@
-import { faArrowDown,faArrowUp, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faArrowUp, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -16,9 +16,7 @@ import {
   Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import {
-  useReorderWsEnvironment
-} from "@app/hooks/api";
+import { useReorderWsEnvironment } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 type Props = {
@@ -39,18 +37,23 @@ export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
   const { createNotification } = useNotificationContext();
   const reorderWsEnvironment = useReorderWsEnvironment();
 
-  const handleReorderEnv= async (shouldMoveUp: boolean, name: string, slug: string) => {
+  const handleReorderEnv = async (shouldMoveUp: boolean, name: string, slug: string) => {
     try {
       if (!currentWorkspace?._id) return;
 
-      const indexOfEnv = currentWorkspace.environments.findIndex((env) => env.name === name && env.slug === slug);
+      const indexOfEnv = currentWorkspace.environments.findIndex(
+        (env) => env.name === name && env.slug === slug
+      );
 
       // check that this reordering is possible
-      if (indexOfEnv === 0 && shouldMoveUp || indexOfEnv === currentWorkspace.environments.length - 1 && !shouldMoveUp) {
-        return
+      if (
+        (indexOfEnv === 0 && shouldMoveUp) ||
+        (indexOfEnv === currentWorkspace.environments.length - 1 && !shouldMoveUp)
+      ) {
+        return;
       }
 
-      const indexToSwap = shouldMoveUp ? indexOfEnv - 1 : indexOfEnv + 1
+      const indexToSwap = shouldMoveUp ? indexOfEnv - 1 : indexOfEnv + 1;
 
       await reorderWsEnvironment.mutateAsync({
         workspaceID: currentWorkspace._id,
@@ -92,31 +95,48 @@ export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
                 <Td>{name}</Td>
                 <Td>{slug}</Td>
                 <Td className="flex items-center justify-end">
-                  <IconButton
-                    className="mr-3 py-2"
-                    onClick={() => {
-                      handleReorderEnv(false, name, slug)
-                    }}
-                    colorSchema="primary"
-                    variant="plain"
-                    ariaLabel="update"
-                    isDisabled={pos === currentWorkspace.environments.length - 1}
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Edit}
+                    a={ProjectPermissionSub.Environments}
                   >
-                    <FontAwesomeIcon icon={faArrowDown} />
-                  </IconButton>
-                  <IconButton
-                    className="mr-3 py-2"
-                    onClick={() => {
-                      handleReorderEnv(true, name, slug)
-                    }}
-                    colorSchema="primary"
-                    variant="plain"
-                    ariaLabel="update"
-                    isDisabled={pos === 0}
+                    {(isAllowed) => (
+                      <IconButton
+                        className="mr-3 py-2"
+                        onClick={() => {
+                          handleReorderEnv(false, name, slug);
+                        }}
+                        colorSchema="primary"
+                        variant="plain"
+                        ariaLabel="update"
+                        isDisabled={pos === currentWorkspace.environments.length - 1 || !isAllowed}
+                      >
+                        <FontAwesomeIcon icon={faArrowDown} />
+                      </IconButton>
+                    )}
+                  </ProjectPermissionCan>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Edit}
+                    a={ProjectPermissionSub.Environments}
                   >
-                    <FontAwesomeIcon icon={faArrowUp} />
-                  </IconButton>
-                  <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Environments}
+                    {(isAllowed) => (
+                      <IconButton
+                        className="mr-3 py-2"
+                        onClick={() => {
+                          handleReorderEnv(true, name, slug);
+                        }}
+                        colorSchema="primary"
+                        variant="plain"
+                        ariaLabel="update"
+                        isDisabled={pos === 0 || !isAllowed}
+                      >
+                        <FontAwesomeIcon icon={faArrowUp} />
+                      </IconButton>
+                    )}
+                  </ProjectPermissionCan>
+
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Edit}
+                    a={ProjectPermissionSub.Environments}
                   >
                     {(isAllowed) => (
                       <IconButton

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectIndexSecretsSection/ProjectIndexSecretsSection.tsx

@@ -1,3 +1,4 @@
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   decryptAssymmetric,
   decryptSymmetric
@@ -24,7 +25,7 @@ export const ProjectIndexSecretsSection = withProjectPermission(
     const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
     const { data: encryptedSecrets } = useGetWorkspaceSecrets(currentWorkspace?._id ?? "");
     const nameWorkspaceSecrets = useNameWorkspaceSecrets();
-    
+
     const onEnableBlindIndices = async () => {
       if (!currentWorkspace?._id) return;
       if (!encryptedSecrets) return;
@@ -65,9 +66,19 @@ export const ProjectIndexSecretsSection = withProjectPermission(
           secrets. To access individual secrets by name through the SDK and public API, please
           enable blind indexing.
         </p>
-        <Button onClick={onEnableBlindIndices} color="mineshaft" size="sm" type="submit">
-          Enable Blind Indexing
-        </Button>
+        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
+          {(isAllowed) => (
+            <Button
+              onClick={onEnableBlindIndices}
+              isDisabled={!isAllowed}
+              color="mineshaft"
+              size="sm"
+              type="submit"
+            >
+              Enable Blind Indexing
+            </Button>
+          )}
+        </ProjectPermissionCan>
       </div>
     ) : (
       <div />