Disable option creation for restricted namespaces in dropdown and enum (#6334)

* add hook to get namespace info

* disable option for restricted namespaces

* add fragment

* remove workaround

* disable enum option creation

* update fragment

* move e2e test

* add test id

* update test to use branch + add test for disabled button

* hide buttons

* update import

* update test

* revert move e2e test

* fix import

* revert config

Author: pa-lem

changelog/+dropdown.fixed.md

@@ -0,0 +1 @@
+Disable option creation for restricted namespaces in dropdown and enum

frontend/app/src/entities/schema/ui/hooks/useNamespace.ts

@@ -0,0 +1,11 @@
+import { namespacesAtom } from "@/entities/schema/stores/schema.atom";
+import { Namespace } from "@/entities/schema/types";
+import { useAtomValue } from "jotai";
+
+export const useNamespace = (namespace: string | null | undefined): Namespace | undefined => {
+  const namespaces = useAtomValue(namespacesAtom);
+
+  return namespaces.find((n) => {
+    return n.name === namespace;
+  });
+};

frontend/app/src/shared/components/inputs/dropdown.tsx

@@ -1,5 +1,6 @@
 import { DROPDOWN_ADD_MUTATION, DROPDOWN_REMOVE_MUTATION } from "@/entities/schema/api/dropdown";
 import { AttributeSchema, ModelSchema } from "@/entities/schema/types";
+import { useNamespace } from "@/entities/schema/ui/hooks/useNamespace";
 import { useMutation } from "@/shared/api/graphql/useQuery";
 import { Button } from "@/shared/components/buttons/button-primitive";
 import SlideOver, { SlideOverTitle } from "@/shared/components/display/slide-over";
@@ -143,17 +144,21 @@ export const DropdownAddAction: React.FC<DropdownAddActionProps> = ({
   field,
   addOption,
 }) => {
+  const namespace = useNamespace(schema.namespace);
   const [open, setOpen] = useState(false);
   const [addDropdownItem] = useMutation(DROPDOWN_ADD_MUTATION);
 
   return (
     <div className="p-2 pt-0">
-      <Button
-        className="w-full bg-custom-blue-700/10 border border-custom-blue-700/20 text-custom-blue-700 enabled:hover:bg-custom-blue-700/20"
-        onClick={() => setOpen(!open)}
-      >
-        + Add option
-      </Button>
+      {namespace?.user_editable && (
+        <Button
+          className="w-full bg-custom-blue-700/10 border border-custom-blue-700/20 text-custom-blue-700 enabled:hover:bg-custom-blue-700/20"
+          onClick={() => setOpen(!open)}
+          data-testid="add-option-button"
+        >
+          + Add option
+        </Button>
+      )}
 
       <SlideOver
         title={

frontend/app/src/shared/components/inputs/enum.tsx

@@ -1,5 +1,6 @@
 import { ENUM_ADD_MUTATION, ENUM_REMOVE_MUTATION } from "@/entities/schema/api/enum";
 import { AttributeSchema, ModelSchema } from "@/entities/schema/types";
+import { useNamespace } from "@/entities/schema/ui/hooks/useNamespace";
 import { useMutation } from "@/shared/api/graphql/useQuery";
 import { Button, ButtonProps } from "@/shared/components/buttons/button-primitive";
 import SlideOver, { SlideOverTitle } from "@/shared/components/display/slide-over";
@@ -83,19 +84,22 @@ interface EnumAddActionProps {
 }
 
 export const EnumAddAction: React.FC<EnumAddActionProps> = ({ schema, field, addOption }) => {
+  const namespace = useNamespace(schema?.namespace);
   const [open, setOpen] = useState(false);
   const [addEnum] = useMutation(ENUM_ADD_MUTATION);
 
   if (!schema || !field) return null;
 
   return (
     <div className="p-2 pt-0">
-      <Button
-        className="w-full bg-custom-blue-700/10 border border-custom-blue-700/20 text-custom-blue-700 enabled:hover:bg-custom-blue-700/20"
-        onClick={() => setOpen(!open)}
-      >
-        + Add option
-      </Button>
+      {namespace?.user_editable && (
+        <Button
+          className="w-full bg-custom-blue-700/10 border border-custom-blue-700/20 text-custom-blue-700 enabled:hover:bg-custom-blue-700/20"
+          onClick={() => setOpen(!open)}
+        >
+          + Add option
+        </Button>
+      )}
 
       <SlideOver
         title={

frontend/app/tests/e2e/objects/object-dropdown-creation.spec.ts

@@ -1,5 +1,7 @@
 import { expect, test } from "@playwright/test";
 import { ACCOUNT_STATE_PATH } from "../../constants";
+import { generateRandomBranchName } from "../../utils";
+import { createBranchAPI, deleteBranchAPI } from "../utils/graphql";
 
 test.describe("object dropdown creation", () => {
   test.use({ storageState: ACCOUNT_STATE_PATH.ADMIN });
@@ -12,8 +14,18 @@ test.describe("object dropdown creation", () => {
     });
   });
 
+  const BRANCH_NAME = generateRandomBranchName();
+
+  test.beforeAll(async ({ request }) => {
+    await createBranchAPI(request, BRANCH_NAME);
+  });
+
+  test.afterAll(async ({ request }) => {
+    await deleteBranchAPI(request, BRANCH_NAME);
+  });
+
   test("should open the creation form and open the tag option creation form", async ({ page }) => {
-    await page.goto("/objects/InfraDevice");
+    await page.goto(`/objects/InfraDevice?branch=${BRANCH_NAME}`);
 
     // Open creation form
     await page.getByTestId("create-object-button").click();
@@ -39,4 +51,13 @@ test.describe("object dropdown creation", () => {
     // Closes the form
     await page.getByRole("button", { name: "Cancel" }).click();
   });
+
+  test("should not be able to create a new option for dropdown", async ({ page }) => {
+    await page.goto(`/objects/CoreWebhook?branch=${BRANCH_NAME}`);
+    await page.getByTestId("create-object-button").click();
+    await page.getByRole("combobox", { name: "Select an object type" }).click();
+    await page.getByRole("option", { name: "Custom Webhook Core" }).click();
+    await page.getByRole("combobox", { name: "Branch Scope" }).click();
+    expect(await page.getByTestId("add-option-button")).toBeHidden();
+  });
 });