chore: add render component fixes + role permission handler logic

dashboard/package-lock.json

@@ -15504,8 +15504,7 @@
     "@icons/material": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz",
-      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==",
-      "requires": {}
+      "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
     },
     "@ironplans/api": {
       "version": "0.4.1",
@@ -15634,8 +15633,7 @@
     "@material-ui/types": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
-      "requires": {}
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
     },
     "@material-ui/utils": {
       "version": "4.11.3",
@@ -15934,8 +15932,7 @@
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
       "integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@types/body-parser": {
       "version": "1.19.2",
@@ -17009,15 +17006,13 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "anser": {
       "version": "2.1.0",
@@ -17976,8 +17971,7 @@
     "cohere-sentry": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cohere-sentry/-/cohere-sentry-1.0.1.tgz",
-      "integrity": "sha512-OHdKcc8LED8X/JQKlMD0Zapb4rcOkPu0m11+okHouMDep1/MvyOG4JXcK4Mo3sabJT65yozc9Uo+nJfSWzaFcg==",
-      "requires": {}
+      "integrity": "sha512-OHdKcc8LED8X/JQKlMD0Zapb4rcOkPu0m11+okHouMDep1/MvyOG4JXcK4Mo3sabJT65yozc9Uo+nJfSWzaFcg=="
     },
     "collection-visit": {
       "version": "1.0.0",
@@ -20918,8 +20912,7 @@
     "markdown-to-jsx": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.3.tgz",
-      "integrity": "sha512-jtQ6VyT7rMT5tPV0g2EJakEnXLiPksnvlYtwQsVVZ611JsWGN8bQ1tVSDX4s6JllfEH6wmsYxNjTUAMrPmNA8w==",
-      "requires": {}
+      "integrity": "sha512-jtQ6VyT7rMT5tPV0g2EJakEnXLiPksnvlYtwQsVVZ611JsWGN8bQ1tVSDX4s6JllfEH6wmsYxNjTUAMrPmNA8w=="
     },
     "material-colors": {
       "version": "1.2.6",
@@ -22324,8 +22317,7 @@
     "react-table": {
       "version": "7.7.0",
       "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
-      "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==",
-      "requires": {}
+      "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA=="
     },
     "react-transition-group": {
       "version": "4.4.2",
@@ -25478,8 +25470,7 @@
       "version": "7.5.5",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
       "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "xtend": {
       "version": "4.0.2",

dashboard/src/main/home/project-settings/roles-admin/components/PolicyDocumentRenderer.tsx

@@ -1,5 +1,5 @@
-import { capitalize, get, set } from "lodash";
-import React, { useCallback, useContext, useEffect } from "react";
+import _, { capitalize, get, set } from "lodash";
+import React, { useContext, useEffect, useRef } from "react";
 import api from "shared/api";
 import {
   POLICY_HIERARCHY_TREE,
@@ -30,8 +30,28 @@ const PolicyDocumentRenderer = ({
   onChange: (data: PolicyDocType) => void;
   readOnly?: boolean;
 }) => {
-  const { currentProject } = useContext(Context);
+  const { currentProject, setCurrentOverlay } = useContext(Context);
   const [scopeHierarchy, setScopeHierarchy] = React.useState<any>(null);
+  const emptyPolicyDoc = useRef(
+    populatePolicy({
+      scope: "project",
+      verbs: [],
+    })
+  );
+
+  useEffect(() => {
+    if (!scopeHierarchy) {
+      return;
+    }
+
+    emptyPolicyDoc.current = populatePolicy(
+      {
+        scope: "project",
+        verbs: [],
+      },
+      scopeHierarchy
+    );
+  }, [scopeHierarchy]);
 
   useEffect(() => {
     api
@@ -44,12 +64,41 @@ const PolicyDocumentRenderer = ({
       });
   }, [currentProject?.id]);
 
-  const handleChangeVerbs = (dataPath: string, verbs: Verbs[]) => {
+  const handleChangeVerbs = (verbsPath: string, verbs: Verbs[]) => {
     const newPolicyDoc = structuredClone(value) as PolicyDocType;
+    const pathToChildren = verbsPath
+      .split(".")
+      .slice(0, -1)
+      .concat(["children"])
+      .join(".");
+
+    const isReadRemovedTransitive =
+      !verbs.includes("get") &&
+      Object.keys(_.get(newPolicyDoc, pathToChildren, {})).length;
+
+    if (isReadRemovedTransitive) {
+      const emptyPolicyDocumentForChildren = get(
+        emptyPolicyDoc.current,
+        pathToChildren
+      );
+
+      set(newPolicyDoc, pathToChildren, emptyPolicyDocumentForChildren);
+    }
 
-    set(newPolicyDoc, dataPath, verbs);
+    set(newPolicyDoc, verbsPath, verbs);
 
-    onChange(newPolicyDoc);
+    if (isReadRemovedTransitive) {
+      setCurrentOverlay({
+        message: `Dummy text?`,
+        onYes: () => {
+          onChange(newPolicyDoc);
+          setCurrentOverlay(null);
+        },
+        onNo: () => setCurrentOverlay(null),
+      });
+    } else {
+      onChange(newPolicyDoc);
+    }
   };
 
   if (!scopeHierarchy) {
@@ -111,13 +160,13 @@ const RenderComponents = (
 
   const Component = (
     <>
-      <Card anidationLevel={anidationLevel}>
-        <ScopePermissionsHandler
-          name={scope}
-          dataPath={verbsPath}
-          readOnly={readOnly}
-        />
-      </Card>
+      <ScopePermissionsHandler
+        name={scope}
+        parent={dataPath.split(".").slice(0, -1).join(".")}
+        dataPath={verbsPath}
+        readOnly={readOnly}
+        anidationLevel={anidationLevel}
+      />
       {components.map((c) => c)}
     </>
   );
@@ -135,28 +184,48 @@ const Card = styled.div<{ anidationLevel: number }>`
 `;
 
 const ScopePermissionsHandler = ({
+  anidationLevel,
+  parent,
   name,
   dataPath,
   readOnly,
 }: {
+  anidationLevel: number;
+  parent: string;
   name: string;
   dataPath: string;
   readOnly: boolean;
 }) => {
   const { handleChangeVerbs, data } = React.useContext(Store);
+  const { setCurrentError } = React.useContext(Context);
 
   const verbs = get(data, dataPath);
 
+  const onChange = (newVerbs: Verbs[]) => {
+    const pathToParentsVerbs = parent.split(".").concat("verbs").join(".");
+
+    const isActionAllowed =
+      anidationLevel === 0
+        ? true
+        : get(data, pathToParentsVerbs, []).includes("get");
+
+    if (isActionAllowed) {
+      handleChangeVerbs(dataPath, newVerbs);
+      return;
+    }
+
+    setCurrentError(
+      "This action is not allowed since the parent does not have read permissions enabled."
+    );
+
+    // show something to tell user
+  };
+
   return (
-    <>
+    <Card anidationLevel={anidationLevel}>
       {name}
-      {readOnly ? null : (
-        <Select
-          values={verbs}
-          onChange={(newVerbs) => handleChangeVerbs(dataPath, newVerbs)}
-        />
-      )}
-    </>
+      {readOnly ? null : <Select values={verbs} onChange={onChange} />}
+    </Card>
   );
 };