feat(rbac): added glob support in permission and revealed settings

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx

@@ -2,53 +2,49 @@ import { useTranslation } from "react-i18next";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { OrgPermissionCan } from "@app/components/permissions";
+import { OrgPermissionCan, PermissionDeniedBanner } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
-import { withPermission } from "@app/hoc";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
 import { usePopUp } from "@app/hooks";
 
 import { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal";
 import { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";
 
-export const OrgIncidentContactsSection = withPermission(
-  () => {
-    const { t } = useTranslation();
-    const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
-      "addContact"
-    ] as const);
+export const OrgIncidentContactsSection = () => {
+  const { t } = useTranslation();
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "addContact"
+  ] as const);
+  const permission = useOrgPermission();
 
-    return (
-      <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-        <div className="flex justify-between mb-4">
-          <p className="min-w-max text-xl font-semibold">
-            {t("section.incident.incident-contacts")}
-          </p>
-          <OrgPermissionCan
-            I={OrgPermissionActions.Create}
-            a={OrgPermissionSubjects.IncidentAccount}
-          >
-            {(isAllowed) => (
-              <Button
-                colorSchema="secondary"
-                type="submit"
-                isDisabled={!isAllowed}
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                onClick={() => handlePopUpOpen("addContact")}
-              >
-                Add contact
-              </Button>
-            )}
-          </OrgPermissionCan>
-        </div>
-        <OrgIncidentContactsTable />
-        <AddOrgIncidentContactModal
-          popUp={popUp}
-          handlePopUpClose={handlePopUpClose}
-          handlePopUpToggle={handlePopUpToggle}
-        />
+  return (
+    <div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+      <div className="flex justify-between mb-4">
+        <p className="min-w-max text-xl font-semibold">{t("section.incident.incident-contacts")}</p>
+        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.IncidentAccount}>
+          {(isAllowed) => (
+            <Button
+              colorSchema="secondary"
+              type="submit"
+              isDisabled={!isAllowed}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("addContact")}
+            >
+              Add contact
+            </Button>
+          )}
+        </OrgPermissionCan>
       </div>
-    );
-  },
-  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.IncidentAccount }
-);
+      {permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.IncidentAccount) ? (
+        <OrgIncidentContactsTable />
+      ) : (
+        <PermissionDeniedBanner />
+      )}
+      <AddOrgIncidentContactModal
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    </div>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -7,7 +7,6 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { withPermission } from "@app/hoc";
 import { useRenameOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
@@ -16,77 +15,70 @@ const formSchema = yup.object({
 
 type FormData = yup.InferType<typeof formSchema>;
 
-export const OrgNameChangeSection = withPermission(
-  (): JSX.Element => {
-    const { currentOrg } = useOrganization();
-    const { createNotification } = useNotificationContext();
-    const { handleSubmit, control, reset } = useForm<FormData>({
-      resolver: yupResolver(formSchema)
-    });
-    const { mutateAsync, isLoading } = useRenameOrg();
+export const OrgNameChangeSection = (): JSX.Element => {
+  const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
+  const { handleSubmit, control, reset } = useForm<FormData>({
+    resolver: yupResolver(formSchema)
+  });
+  const { mutateAsync, isLoading } = useRenameOrg();
 
-    useEffect(() => {
-      if (currentOrg) {
-        reset({ name: currentOrg.name });
-      }
-    }, [currentOrg]);
+  useEffect(() => {
+    if (currentOrg) {
+      reset({ name: currentOrg.name });
+    }
+  }, [currentOrg]);
 
-    const onFormSubmit = async ({ name }: FormData) => {
-      try {
-        if (!currentOrg?._id) return;
-        if (name === "") return;
+  const onFormSubmit = async ({ name }: FormData) => {
+    try {
+      if (!currentOrg?._id) return;
+      if (name === "") return;
 
-        await mutateAsync({ orgId: currentOrg?._id, newOrgName: name });
-        createNotification({
-          text: "Successfully renamed organization",
-          type: "success"
-        });
-      } catch (error) {
-        console.error(error);
-        createNotification({
-          text: "Failed to rename organization",
-          type: "error"
-        });
-      }
-    };
+      await mutateAsync({ orgId: currentOrg?._id, newOrgName: name });
+      createNotification({
+        text: "Successfully renamed organization",
+        type: "success"
+      });
+    } catch (error) {
+      console.error(error);
+      createNotification({
+        text: "Failed to rename organization",
+        type: "error"
+      });
+    }
+  };
 
-    return (
-      <form
-        onSubmit={handleSubmit(onFormSubmit)}
-        className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
-      >
-        <p className="text-xl font-semibold text-mineshaft-100 mb-4">Organization name</p>
-        <div className="mb-2 max-w-md">
-          <Controller
-            defaultValue=""
-            render={({ field, fieldState: { error } }) => (
-              <FormControl isError={Boolean(error)} errorText={error?.message}>
-                <Input placeholder="Acme Corp" {...field} />
-              </FormControl>
-            )}
-            control={control}
-            name="name"
-          />
-        </div>
-        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
-          {(isAllowed) => (
-            <Button
-              isLoading={isLoading}
-              isDisabled={!isAllowed}
-              colorSchema="primary"
-              variant="outline_bg"
-              type="submit"
-            >
-              Save
-            </Button>
+  return (
+    <form
+      onSubmit={handleSubmit(onFormSubmit)}
+      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+    >
+      <p className="text-xl font-semibold text-mineshaft-100 mb-4">Organization name</p>
+      <div className="mb-2 max-w-md">
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input placeholder="Acme Corp" {...field} />
+            </FormControl>
           )}
-        </OrgPermissionCan>
-      </form>
-    );
-  },
-  {
-    action: OrgPermissionActions.Read,
-    subject: OrgPermissionSubjects.Settings,
-    containerClassName: "mb-4"
-  }
-);
+          control={control}
+          name="name"
+        />
+      </div>
+      <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+        {(isAllowed) => (
+          <Button
+            isLoading={isLoading}
+            isDisabled={!isAllowed}
+            colorSchema="primary"
+            variant="outline_bg"
+            type="submit"
+          >
+            Save
+          </Button>
+        )}
+      </OrgPermissionCan>
+    </form>
+  );
+};