fix(catalog): change structure for tabs to use urls

apps/console/src/app/[entity]/catalog/[id]/[...tab]/page.tsx

@@ -0,0 +1,35 @@
+import { Metadata } from "next";
+
+import {
+  CatalogTabNames,
+  generateNextMetaBase,
+  getCatalogTabTitle,
+} from "@instill-ai/toolkit/server";
+
+import { CatalogTabPageRender } from "./render";
+
+type Props = {
+  params: { entity: string; id: string; tab: string[] };
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id, tab } = params;
+  const tabName = (tab[0] as CatalogTabNames) || "catalogs";
+
+  const metadata: Metadata = {
+    title: `Instill Cloud | ${id} | ${getCatalogTabTitle(tabName)}`,
+    description: `${getCatalogTabTitle(tabName)} tab of ${id} catalog`,
+    metadataBase: generateNextMetaBase({
+      defaultBase: "http://localhost:3000",
+    }),
+    openGraph: {
+      images: ["/instill-open-graph.png"],
+    },
+  };
+
+  return Promise.resolve(metadata);
+}
+
+export default async function Page() {
+  return <CatalogTabPageRender />;
+}

apps/console/src/app/[entity]/catalog/[id]/[...tab]/render.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import { useParams } from "next/navigation";
+
+import {
+  AppTopbar,
+  CatalogMainView,
+  NamespaceSwitch,
+  PageBase,
+} from "@instill-ai/toolkit";
+
+import { useAppAccessToken } from "~/lib/use-app-access-token";
+import { useAppTrackToken } from "~/lib/useAppTrackToken";
+
+export const CatalogTabPageRender = () => {
+  const params = useParams();
+  const { id, tab } = params as { id: string; tab: string[] };
+  const activeTab = tab?.[0] || "upload";
+
+  useAppAccessToken();
+  useAppTrackToken({ enabled: true });
+
+  return (
+    <PageBase>
+      <AppTopbar namespaceSwitch={<NamespaceSwitch />} />
+      <PageBase.Container>
+        <CatalogMainView activeTab={activeTab} catalogId={id} />
+      </PageBase.Container>
+    </PageBase>
+  );
+};

apps/console/src/app/[entity]/catalog/[id]/page.tsx

@@ -0,0 +1,12 @@
+import { redirect } from "next/navigation";
+
+type RedirectionCatalogPageProps = {
+  params: { id: string; entity: string };
+};
+
+export default async function RedirectionCatalogPage({
+  params,
+}: RedirectionCatalogPageProps) {
+  const { entity, id } = params;
+  return redirect(`/${entity}/catalog/${id}/upload`);
+}

apps/console/src/app/[entity]/catalog/page.tsx

@@ -2,11 +2,11 @@ import { Metadata } from "next";
 
 import { generateNextMetaBase } from "@instill-ai/toolkit/server";
 
-import { KnowladgeBasePageRender } from "./render";
+import { CatalogPageRender } from "./render";
 
 export async function generateMetadata() {
   const metadata: Metadata = {
-    title: `Instill Cloud | Catalog`,
+    title: `Instill Cloud | Artifacts`,
     metadataBase: generateNextMetaBase({
       defaultBase: "http://localhost:3000",
     }),
@@ -19,5 +19,5 @@ export async function generateMetadata() {
 }
 
 export default async function Page() {
-  return <KnowladgeBasePageRender />;
+  return <CatalogPageRender />;
 }

apps/console/src/app/[entity]/catalog/render.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-
 import {
   AppTopbar,
   CatalogMainView,
@@ -12,23 +10,16 @@ import {
 import { useAppAccessToken } from "~/lib/use-app-access-token";
 import { useAppTrackToken } from "~/lib/useAppTrackToken";
 
-export const KnowladgeBasePageRender = () => {
-  const router = useRouter();
-
-  const accessToken = useAppAccessToken();
+export const CatalogPageRender = () => {
+  useAppAccessToken();
   useAppTrackToken({ enabled: true });
-  // useInitAmplitude();
 
   return (
     <PageBase>
       <AppTopbar namespaceSwitch={<NamespaceSwitch />} />
       <PageBase.Container>
         <PageBase.Content contentPadding="!p-0">
-          <CatalogMainView
-            accessToken={accessToken.isSuccess ? accessToken.data : null}
-            enableQuery={accessToken.isSuccess}
-            router={router}
-          />
+          <CatalogMainView activeTab="catalogs" />
         </PageBase.Content>
       </PageBase.Container>
     </PageBase>

packages/toolkit/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@instill-ai/toolkit",
-  "version": "0.110.0",
+  "version": "0.110.0-rc.113",
+
   "description": "Instill AI's frontend toolkit",
   "repository": "https://github.com/instill-ai/design-system.git",
   "bugs": "https://github.com/instill-ai/design-system/issues",

packages/toolkit/src/lib/dashboard/getModelTriggersSummary.ts

@@ -1,28 +1,31 @@
-import { ModelTriggerCountRecord, ModelTriggersStatusSummary } from "instill-sdk";
+import {
+  ModelTriggerCountRecord,
+  ModelTriggersStatusSummary,
+} from "instill-sdk";
 
 export function getModelTriggersSummary(
-    modelTriggerCounts: ModelTriggerCountRecord[]
+  modelTriggerCounts: ModelTriggerCountRecord[],
 ): ModelTriggersStatusSummary {
-    const completedModel = modelTriggerCounts.find(
-        (r) => r.status === "STATUS_COMPLETED"
-    );
+  const completedModel = modelTriggerCounts.find(
+    (r) => r.status === "STATUS_COMPLETED",
+  );
 
-    const erroredModel = modelTriggerCounts.find(
-        (r) => r.status === "STATUS_ERRORED"
-    );
+  const erroredModel = modelTriggerCounts.find(
+    (r) => r.status === "STATUS_ERRORED",
+  );
 
-    return {
-        completed: {
-            statusType: "STATUS_COMPLETED" as const,
-            type: "model" as const,
-            amount: completedModel?.triggerCount || 0,
-            delta: 0
-        },
-        errored: {
-            statusType: "STATUS_ERRORED" as const,
-            type: "model" as const,
-            amount: erroredModel?.triggerCount || 0,
-            delta: 0
-        }
-    };
-}
+  return {
+    completed: {
+      statusType: "STATUS_COMPLETED" as const,
+      type: "model" as const,
+      amount: completedModel?.triggerCount || 0,
+      delta: 0,
+    },
+    errored: {
+      statusType: "STATUS_ERRORED" as const,
+      type: "model" as const,
+      amount: erroredModel?.triggerCount || 0,
+      delta: 0,
+    },
+  };
+}

packages/toolkit/src/lib/react-query-service/metric/useModelTriggerCount.ts

@@ -2,39 +2,40 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { ListModelTriggerCountRequest, Nullable } from "instill-sdk";
+
 import { getInstillAPIClient } from "../../sdk-helper";
 
 export function useModelTriggerCount({
-    enabled,
-    accessToken,
-    requesterId,
-    start,
-    stop,
+  enabled,
+  accessToken,
+  requesterId,
+  start,
+  stop,
 }: {
-    enabled: boolean;
-    accessToken: Nullable<string>;
-    requesterId: string;
-    start?: string;
-    stop?: string;
+  enabled: boolean;
+  accessToken: Nullable<string>;
+  requesterId: string;
+  start?: string;
+  stop?: string;
 }) {
-    return useQuery({
-        queryKey: ["modelTriggerCount", requesterId, start, stop],
-        queryFn: async () => {
-            if (!accessToken) {
-                throw new Error("accessToken not provided");
-            }
+  return useQuery({
+    queryKey: ["modelTriggerCount", requesterId, start, stop],
+    queryFn: async () => {
+      if (!accessToken) {
+        throw new Error("accessToken not provided");
+      }
 
-            const client = getInstillAPIClient({ accessToken });
+      const client = getInstillAPIClient({ accessToken });
 
-            const request: ListModelTriggerCountRequest = {
-                requesterId,
-                start,
-                stop,
-            };
+      const request: ListModelTriggerCountRequest = {
+        requesterId,
+        start,
+        stop,
+      };
 
-            const data = await client.core.metric.listModelTriggerCount(request);
-            return data;
-        },
-        enabled: enabled && !!requesterId,
-    });
+      const data = await client.core.metric.listModelTriggerCount(request);
+      return data;
+    },
+    enabled: enabled && !!requesterId,
+  });
 }

packages/toolkit/src/lib/react-query-service/metric/useModelTriggerMetric.ts

@@ -40,4 +40,4 @@ export function useModelTriggerMetric({
     },
     enabled,
   });
-}
+}

packages/toolkit/src/server/utility/getCatalogTabTitle.ts

@@ -0,0 +1,16 @@
+const CatalogTabsDictionary = {
+  catalogs: "My Catalogs",
+  upload: "Upload Documents",
+  files: "Files",
+  chunks: "Chunks",
+  api: "API",
+  retrieve: "Retrieve Chunk",
+  ask_question: "Ask Question",
+  get_catalog: "Get Catalog",
+};
+
+export type CatalogTabNames = keyof typeof CatalogTabsDictionary;
+
+export const getCatalogTabTitle = (tabName: CatalogTabNames = "catalogs") => {
+  return CatalogTabsDictionary[tabName] || CatalogTabsDictionary.catalogs;
+};

packages/toolkit/src/server/utility/index.ts

@@ -11,6 +11,7 @@ export * from "./chunk";
 export * from "./removeObjKey";
 export * from "./getModelTabTitle";
 export * from "./getPipelineTabTitle";
+export * from "./getCatalogTabTitle";
 export * from "./formatResourceId";
 export * from "./parseResourceId";
 export * from "./generateNextMetaBase";