Split “Schema and Indexes” into two panels (#39350)

GitOrigin-RevId: 9c11c8104f45e3301bb59653a122ea6dce3ed5db

Author: Nicolapps

npm-packages/convex/src/cli/lib/indexes.ts

@@ -208,7 +208,7 @@ function setSchemaProgressSpinner(
         if (index.backfill.state === "in_progress") {
           const dashboardUrl = deploymentDashboardUrlPage(
             deploymentName,
-            `/data?table=${index.table}&showSchemaAndIndexes=true`,
+            `/data?table=${index.table}&showIndexes=true`,
           );
           msg = `Backfilling index ${index.name} (${indexesCompleted}/${numIndexes} ready), \
 see progress on the dashboard here: ${dashboardUrl}`;

npm-packages/dashboard-common/src/features/data/components/DataContent.tsx

@@ -179,20 +179,20 @@ export function DataContent({
   });
   const { popupEl } = popupState;
 
-  // Handle query parameter to open schema popup
+  // Handle query parameter to open the indexes panel
   useEffect(() => {
-    if (!!router.query.showSchemaAndIndexes && !popupState.popup) {
-      popupState.setPopup({ type: "viewSchema", tableName });
+    if (!!router.query.showIndexes && !popupState.popup) {
+      popupState.setPopup({ type: "viewIndexes", tableName });
       void router.push(
         {
           pathname: router.pathname,
-          query: omit(router.query, "showSchemaAndIndexes"),
+          query: omit(router.query, "showIndexes"),
         },
         undefined,
         { shallow: true },
       );
     }
-  }, [router.query.showSchemaAndIndexes, router, popupState, tableName]);
+  }, [router.query.showIndexes, router, popupState, tableName]);
 
   const selectedDocumentId = rowsThatAreSelected.values().next().value;
   const selectedDocument = data.find((row) => row._id === selectedDocumentId);

npm-packages/dashboard-common/src/features/data/components/DataOverflowMenu/DataOverflowMenu.tsx

@@ -1,10 +1,10 @@
-import { BackspaceIcon } from "@heroicons/react/24/outline";
+import { BackspaceIcon, FingerPrintIcon } from "@heroicons/react/24/outline";
 import {
   BarChartIcon,
   TrashIcon,
   DotsVerticalIcon,
   CodeIcon,
-  CardStackIcon,
+  CubeIcon,
 } from "@radix-ui/react-icons";
 import { useContext } from "react";
 import { DeploymentInfoContext } from "@common/lib/deploymentContext";
@@ -17,15 +17,17 @@ export function DataOverflowMenu({
   numRows,
   onClickCustomQuery,
   onClickClearTable,
-  onClickSchemaIndexes,
+  onClickSchema,
+  onClickIndexes,
   onClickMetrics,
   onClickDeleteTable,
 }: {
   tableSchemaStatus: TableSchemaStatus | undefined;
   numRows: number;
   onClickCustomQuery: () => void;
   onClickClearTable: () => void;
-  onClickSchemaIndexes: () => void;
+  onClickSchema: () => void;
+  onClickIndexes: () => void;
   onClickMetrics: () => void;
   onClickDeleteTable: () => void;
 }) {
@@ -62,9 +64,13 @@ export function DataOverflowMenu({
         <CodeIcon />
         Custom query
       </MenuItem>
-      <MenuItem action={onClickSchemaIndexes}>
-        <CardStackIcon />
-        Schema and Indexes
+      <MenuItem action={onClickSchema}>
+        <CubeIcon />
+        Schema
+      </MenuItem>
+      <MenuItem action={onClickIndexes}>
+        <FingerPrintIcon className="size-4" />
+        Indexes
       </MenuItem>
       <MenuItem action={onClickMetrics}>
         <BarChartIcon />

npm-packages/dashboard-common/src/features/data/components/DataPanel.tsx

@@ -34,7 +34,7 @@ export function DataPanel({
                 <ClosePanelButton onClose={onClose} className="ml-auto" />
               </div>
             </div>
-            {children}
+            <div className="flex grow flex-col overflow-y-auto">{children}</div>
           </div>
         </div>
       </Panel>

npm-packages/dashboard-common/src/features/data/components/DataSidebar.tsx

@@ -1,4 +1,4 @@
-import { CodeIcon, MagnifyingGlassIcon, PlusIcon } from "@radix-ui/react-icons";
+import { CubeIcon, MagnifyingGlassIcon, PlusIcon } from "@radix-ui/react-icons";
 import { useMutation } from "convex/react";
 import classNames from "classnames";
 import { useContext, useState } from "react";
@@ -92,7 +92,7 @@ export function DataSidebar({
           <Button
             variant="neutral"
             onClick={showSchema.showSchema}
-            icon={<CodeIcon />}
+            icon={<CubeIcon />}
             className="animate-fadeInFromLoading overflow-hidden"
           >
             <span className="truncate">Schema</span>

npm-packages/dashboard-common/src/features/data/components/DataToolbar/DataToolbar.test.tsx

@@ -195,20 +195,34 @@ describe("DataToolbar", () => {
     expect(saveButton).toBeDefined();
   });
 
-  it("should open the indexes panel", async () => {
+  it("should open the schema panel", async () => {
     setup();
     const menuButton = await screen.findByLabelText("Open table settings");
     const user = userEvent.setup();
     await user.click(menuButton);
 
-    const indexes = await screen.findByText(`Schema and Indexes`);
+    const indexes = await screen.findByText("Schema");
     expect(indexes).toBeEnabled();
 
     await user.click(indexes);
 
     await screen.findByText("Schema for table");
   });
 
+  it("should open the indexes panel", async () => {
+    setup();
+    const menuButton = await screen.findByLabelText("Open table settings");
+    const user = userEvent.setup();
+    await user.click(menuButton);
+
+    const indexes = await screen.findByText("Indexes");
+    expect(indexes).toBeEnabled();
+
+    await user.click(indexes);
+
+    await screen.findByText("Indexes for table");
+  });
+
   it("should open the metrics chart", async () => {
     setup();
     const menuButton = await screen.findByLabelText("Open table settings");

npm-packages/dashboard-common/src/features/data/components/DataToolbar/DataToolbar.tsx

@@ -173,12 +173,18 @@ export function DataToolbar({
                 });
                 setPopup({ type: "clearTable", tableName });
               }}
-              onClickSchemaIndexes={() => {
+              onClickSchema={() => {
                 log("view table schema", {
                   how: "toolbar",
                 });
                 setPopup({ type: "viewSchema", tableName });
               }}
+              onClickIndexes={() => {
+                log("view table indexes", {
+                  how: "toolbar",
+                });
+                setPopup({ type: "viewIndexes", tableName });
+              }}
               onClickMetrics={() => {
                 log("view table metrics", {
                   how: "toolbar",

npm-packages/dashboard-common/src/features/data/components/LearnMoreLink.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+import { ExternalLinkIcon } from "@radix-ui/react-icons";
+
+export function LearnMoreLink({ name, link }: { name: string; link: string }) {
+  return (
+    <div className="mb-2 px-4 text-xs text-content-primary sm:px-6">
+      Learn more about{" "}
+      <Link
+        passHref
+        href={link}
+        className="inline-flex items-center text-content-link"
+        target="_blank"
+      >
+        {name}
+        <ExternalLinkIcon className="ml-0.5 h-3 w-3" />
+      </Link>
+    </div>
+  );
+}

npm-packages/dashboard-common/src/features/data/components/TableIndexesPanel.tsx

@@ -0,0 +1,54 @@
+import { DataPanel } from "@common/features/data/components/DataPanel";
+import { ConvexSchemaFilePath } from "@common/features/data/components/ConvexSchemaFilePath";
+import { Loading } from "@ui/Loading";
+import { useSingleTableSchemaStatus } from "./TableSchema";
+import { IndexList } from "./IndexList";
+import { LearnMoreLink } from "./LearnMoreLink";
+
+export function TableIndexesPanel({
+  tableName,
+  onClose,
+}: {
+  tableName: string;
+  onClose: () => void;
+}) {
+  return (
+    <DataPanel
+      title={
+        <>
+          Indexes for table{" "}
+          <span className="font-mono text-[1.0625rem]">{tableName}</span>
+        </>
+      }
+      onClose={onClose}
+    >
+      <IndexBody tableName={tableName} />
+    </DataPanel>
+  );
+}
+
+function IndexBody({ tableName }: { tableName: string }) {
+  const tableSchemaStatus = useSingleTableSchemaStatus(tableName);
+  if (tableSchemaStatus === undefined) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      <LearnMoreLink
+        name="indexes"
+        link="https://docs.convex.dev/database/indexes"
+      />
+      <div className="px-4 sm:px-6">
+        {tableSchemaStatus.isDefined ? (
+          <IndexList tableName={tableName} />
+        ) : (
+          <>
+            Once you add your table to your <ConvexSchemaFilePath /> file,
+            you’ll be able to see any indexes you’ve defined here.
+          </>
+        )}
+      </div>
+    </>
+  );
+}