Fixed redirecting to schema using object help menu (#7427)

Author: bilalabbad

frontend/app/src/entities/nodes/object/ui/object-table/object-table-context.tsx

@@ -39,6 +39,10 @@ export const ObjectTableProvider = ({
 
   React.useEffect(() => {
     if (!kindInQsp) return;
+    if (window.location.pathname === "/schema") {
+      // nuqs updates faster than React router QSP. If navigating to another route using "kind" QSP, it'll update it here 1st.
+      return;
+    }
     if (!isGenericSchema(schema) || !schema.used_by?.find((kind) => kind === kindInQsp)) {
       setObjectTableQueryParams({ kind: null });
     }

frontend/app/src/entities/schema/ui/schema-selector.tsx

@@ -24,10 +24,7 @@ type SchemaSelectorProps = {
   className?: string;
 };
 export const SchemaSelector = ({ className = "" }: SchemaSelectorProps) => {
-  const [selectedKind, setKind] = useQueryState(
-    QSP.KIND,
-    parseAsNativeArrayOf(parseAsString).withDefault([])
-  );
+  const [selectedKind, setKind] = useQueryState(QSP.KIND, parseAsNativeArrayOf(parseAsString));
   const nodes = useAtomValue(nodeSchemasAtom);
   const generics = useAtomValue(genericSchemasAtom);
   const profiles = useAtomValue(profileSchemasAtom);

frontend/app/src/entities/schema/ui/schema-viewer.tsx

@@ -28,10 +28,7 @@ import { SchemaHelpMenu } from "./schema-help-menu";
 import { ModelDisplay, PropertyRow, TabPanelStyled, TabStyled } from "./styled";
 
 export const SchemaViewerStack = ({ className = "" }: { className: string }) => {
-  const [selectedKind, setKinds] = useQueryState(
-    QSP.KIND,
-    parseAsNativeArrayOf(parseAsString).withDefault([])
-  );
+  const [selectedKind, setKinds] = useQueryState(QSP.KIND, parseAsNativeArrayOf(parseAsString));
   const nodes = useAtomValue(nodeSchemasAtom);
   const generics = useAtomValue(genericSchemasAtom);
   const profiles = useAtomValue(profileSchemasAtom);

frontend/app/src/entities/schema/ui/styled.tsx

@@ -146,10 +146,7 @@ export const TabPanelStyled = ({ className, ...props }: TabPanelProps) => {
 export const NullDisplay = () => <div className="text-gray-500 text-xs">null</div>;
 
 export const ModelDisplay = ({ kinds }: { kinds?: string[] }) => {
-  const [selectedKinds, setKinds] = useQueryState(
-    QSP.KIND,
-    parseAsNativeArrayOf(parseAsString).withDefault([])
-  );
+  const [selectedKinds, setKinds] = useQueryState(QSP.KIND, parseAsNativeArrayOf(parseAsString));
   if (!kinds) return null;
   if (kinds.length === 0) return <span>empty</span>;
 

frontend/app/src/shared/components/menu/object-help-button.tsx

@@ -2,6 +2,7 @@ import { Icon } from "@iconify-icon/react";
 import { Pressable } from "react-aria-components";
 
 import { INFRAHUB_DOC_LOCAL } from "@/config/config";
+import { QSP } from "@/config/qsp";
 
 import { constructPath } from "@/shared/api/rest/fetch";
 import {
@@ -50,7 +51,7 @@ export const ObjectHelpButton = ({ documentationUrl, kind, ...props }: ObjectHel
 
             <MenuItem
               isDisabled={!kind}
-              href={constructPath("/schema", [{ name: "kind", value: kind }])}
+              href={constructPath("/schema", [{ name: QSP.KIND, value: kind }])}
             >
               <Icon icon="mdi:code-json" className="text-lg" />
               Schema

frontend/app/tests/e2e/schema.spec.ts

@@ -3,6 +3,15 @@ import { expect, test } from "@playwright/test";
 import { saveScreenshotForDocs } from "../utils";
 
 test.describe("/schema - Schema visualizer", () => {
+  test("redirect to schema page using object help menu", async ({ page }) => {
+    await page.goto("/objects/InfraInterface");
+    await page.getByRole("button", { name: "?" }).click();
+    await page.getByRole("menuitem", { name: "Schema" }).click();
+    await expect(page.getByTestId("schema-viewer")).toBeVisible();
+    await expect(page.getByText("KindInfraInterface")).toBeVisible();
+    await expect(page).toHaveURL(/\/schema\?kind=InfraInterface/);
+  });
+
   test("display help menu correctly", async ({ page }) => {
     await page.goto("/schema");