Profile type select update to display informations on the related nod…

…e object (#4039)

* update key to prevent duplicates

* update options labels

* update locator after renaming

* fix profile selector for kind

* update locators

* add fragment

* update locator

* remove log

* hide profile select for filters

* fix props propagation

changelog/4001.fixed.md

@@ -0,0 +1 @@
+Updates the profile type select when creating a profile, to display more relevant informations about the related nodes

frontend/app/src/components/form/object-form.tsx

@@ -30,6 +30,7 @@ import useFilters from "@/hooks/useFilters";
 import useQuery from "@/hooks/useQuery";
 import { getProfiles } from "@/graphql/queries/objects/getProfiles";
 import { getObjectAttributes } from "@/utils/getSchemaObjectColumns";
+import { PROFILE_KIND } from "@/config/constants";
 
 type Profile = Record<string, Pick<AttributeType, "value" | "__typename">>;
 
@@ -66,6 +67,28 @@ const ObjectForm = ({ kind, isFilterForm, ...props }: ObjectFormProps) => {
 
       if (!relatedSchema) return;
 
+      if (kind === PROFILE_KIND) {
+        const relationship = relatedSchema.relationships?.find(
+          (relationship) => relationship.name === "related_nodes"
+        );
+
+        const nodeSchema =
+          relationship?.peer &&
+          [...schemas, ...generics, ...profiles].find(
+            (schema) => schema.kind === relationship.peer
+          );
+
+        if (!nodeSchema) return;
+
+        const currentGeneric = {
+          value: relatedSchema.kind,
+          label: nodeSchema.label ?? nodeSchema.name,
+          badge: nodeSchema.namespace,
+        };
+
+        setKindToCreate(currentGeneric.value ?? "");
+      }
+
       const currentGeneric = {
         value: relatedSchema.kind,
         label: relatedSchema.label ?? relatedSchema.name,
@@ -76,10 +99,33 @@ const ObjectForm = ({ kind, isFilterForm, ...props }: ObjectFormProps) => {
     }
 
     const items = generic.used_by
-      .map((kind) => {
-        const relatedSchema = [...schemas, ...profiles].find((schema) => schema.kind === kind);
-
-        if (!relatedSchema) return null;
+      .map((usedByKind) => {
+        const relatedSchema = [...schemas, ...profiles].find(
+          (schema) => schema.kind === usedByKind
+        );
+
+        if (!relatedSchema) return;
+
+        // When choosing a profile, display informations about the related node
+        if (kind === PROFILE_KIND) {
+          const relationship = relatedSchema.relationships?.find(
+            (relationship) => relationship.name === "related_nodes"
+          );
+
+          const nodeSchema =
+            relationship?.peer &&
+            [...schemas, ...generics, ...profiles].find(
+              (schema) => schema.kind === relationship.peer
+            );
+
+          if (!nodeSchema) return;
+
+          return {
+            value: relatedSchema.kind,
+            label: nodeSchema.label ?? nodeSchema.name,
+            badge: nodeSchema.namespace,
+          };
+        }
 
         return {
           value: relatedSchema.kind,
@@ -132,7 +178,7 @@ const NodeWithProfileForm = ({ kind, currentProfiles, ...props }: ObjectFormProp
 
   return (
     <>
-      {nodeSchema.generate_profile && (
+      {nodeSchema.generate_profile && !props.isFilterForm && (
         <ProfilesSelector
           schema={nodeSchema}
           defaultValue={currentProfiles}

frontend/app/src/components/form/utils.ts

@@ -126,7 +126,6 @@ export const getFormFieldsFromSchema = ({
         if (!schemas) return null;
 
         const relatedSchema = schemas.find((schema) => schema.kind === kind);
-        console.log("relatedSchema: ", relatedSchema);
 
         if (!relatedSchema) return null;
 

frontend/app/src/components/ui/combobox.tsx

@@ -151,11 +151,11 @@ export const ComboboxList = ({ items, onReset }: ComboboxListProps) => {
 
       {filteredOptions.length > 0 ? (
         <ComboboxPrimitive.Options static className="h-full overflow-auto">
-          {filteredOptions.map((item) => {
+          {filteredOptions.map((item, index) => {
             return typeof item === "string" ? (
-              <ComboboxItem key={item} item={item} />
+              <ComboboxItem key={index} item={item} />
             ) : (
-              <ComboboxItem key={item.label} item={item} />
+              <ComboboxItem key={index} item={item} />
             );
           })}
         </ComboboxPrimitive.Options>

frontend/app/tests/e2e/objects/profiles/multi-profiles.spec.ts

@@ -22,7 +22,7 @@ test.describe("/objects/CoreProfile - Profiles page", () => {
       // Generic profile
       await page.getByTestId("create-object-button").click();
       await page.getByLabel("Select an object type").click();
-      await page.getByRole("option", { name: "ProfileInfraInterface Profile" }).click();
+      await page.getByRole("option", { name: "Interface Infra", exact: true }).click();
       await page.getByLabel("Profile Name *").fill("Generic profile");
       await page.getByLabel("Description").fill("Desc from generic profile");
       await page.getByRole("button", { name: "Save" }).click();
@@ -33,7 +33,7 @@ test.describe("/objects/CoreProfile - Profiles page", () => {
       // L2 profile v1
       await page.getByTestId("create-object-button").click();
       await page.getByLabel("Select an object type").click();
-      await page.getByRole("option", { name: "ProfileInfraInterfaceL2 Profile" }).click();
+      await page.getByRole("option", { name: "Interface L2 Infra", exact: true }).click();
       await page.getByLabel("Profile Name *").fill("L2 profile v1");
       await page.getByLabel("Description").fill("Desc from L2 profile v1");
       await page.getByRole("button", { name: "Save" }).click();
@@ -44,7 +44,7 @@ test.describe("/objects/CoreProfile - Profiles page", () => {
       // L2 profile v2
       await page.getByTestId("create-object-button").click();
       await page.getByLabel("Select an object type").click();
-      await page.getByRole("option", { name: "ProfileInfraInterfaceL2 Profile" }).click();
+      await page.getByRole("option", { name: "Interface L2 Infra", exact: true }).click();
       await page.getByLabel("Profile Name *").fill("L2 profile v2");
       await page.getByLabel("Description").fill("Desc from L2 profile v2");
       await page.getByLabel("Profile Priority").fill("10");

frontend/app/tests/e2e/objects/profiles/profiles.spec.ts

@@ -34,7 +34,7 @@ test.describe("/objects/CoreProfile - Profiles page", () => {
     await test.step("Create a new profile", async () => {
       await page.getByTestId("create-object-button").click();
       await page.getByLabel("Select an object type").click();
-      await page.getByRole("option", { name: "ProfileBuiltinTag" }).click();
+      await page.getByRole("option", { name: "Tag Builtin", exact: true }).click();
       await page.getByLabel("Profile Name *").fill("profile test tag");
       await page.getByLabel("Description").fill("A profile for E2E test");
       await page.getByRole("button", { name: "Save" }).click();
@@ -220,7 +220,7 @@ test.describe("/objects/CoreProfile - Profile for Interface L2 and fields verifi
         .filter({ hasText: /^Clear$/ })
         .getByRole("combobox")
         .fill("l2");
-      await page.getByRole("option", { name: "ProfileInfraInterfaceL2" }).click();
+      await page.getByRole("option", { name: "Interface L2 Infra", exact: true }).click();
     });
 
     await test.step("verify Interface L2 optional attributes are all visible", async () => {
@@ -257,7 +257,7 @@ test.describe("/objects/CoreProfile - Profile for Interface L2 and fields verifi
       ]);
       await page.getByTestId("create-object-button").click();
       await page.getByLabel("Select an object type").click();
-      await page.getByRole("option", { name: "ProfileInfraInterfaceL2" }).click();
+      await page.getByRole("option", { name: "Interface L2 Infra", exact: true }).click();
     });
 
     await test.step("fill and submit form", async () => {
@@ -294,9 +294,7 @@ test.describe("/objects/CoreProfile - Profile for Interface L2 and fields verifi
       ]);
       await page.getByTestId("create-object-button").click();
       await page.getByLabel("Select an object type").click();
-      await page
-        .getByRole("option", { name: "ProfileInfraInterface Profile", exact: true })
-        .click();
+      await page.getByRole("option", { name: "Interface Infra", exact: true }).click();
     });
 
     await test.step("fill and submit form", async () => {