fix(dashboard): Update API keys domains with new design (#7123)

**What**
- Adds new design
- Separates secret and publishable keys into two domains (re-uses the same code).
- Adds skeleton layout for loading state of details page.
- Adds toasts.

packages/admin-next/dashboard/src/components/common/skeleton/skeleton.tsx

@@ -136,6 +136,82 @@ export const GeneralSectionSkeleton = ({
   )
 }
 
+type TableSkeletonProps = {
+  rowCount?: number
+  search?: boolean
+  filters?: boolean
+  orderBy?: boolean
+  pagination?: boolean
+  layout?: "fit" | "fill"
+}
+
+export const TableSkeleton = ({
+  rowCount = 10,
+  search = true,
+  filters = true,
+  orderBy = true,
+  pagination = true,
+  layout = "fit",
+}: TableSkeletonProps) => {
+  // Row count + header row
+  const totalRowCount = rowCount + 1
+
+  const rows = Array.from({ length: totalRowCount }, (_, i) => i)
+  const hasToolbar = search || filters || orderBy
+
+  return (
+    <div
+      aria-hidden
+      className={clx({
+        "flex h-full flex-col overflow-hidden": layout === "fill",
+      })}
+    >
+      {hasToolbar && (
+        <div className="flex items-center justify-between px-6 py-4">
+          {filters && <Skeleton className="h-7 w-full max-w-[135px]" />}
+          {(search || orderBy) && (
+            <div className="flex items-center gap-x-2">
+              {search && <Skeleton className="h-7 w-[160px]" />}
+              {orderBy && <Skeleton className="h-7 w-7" />}
+            </div>
+          )}
+        </div>
+      )}
+      <div className="flex flex-col divide-y border-y">
+        {rows.map((row) => (
+          <Skeleton key={row} className="h-10 w-full rounded-none" />
+        ))}
+      </div>
+      {pagination && (
+        <div
+          className={clx("flex items-center justify-between p-4", {
+            "border-t": layout === "fill",
+          })}
+        >
+          <Skeleton className="h-7 w-[138px]" />
+          <div className="flex items-center gap-x-2">
+            <Skeleton className="h-7 w-24" />
+            <Skeleton className="h-7 w-11" />
+            <Skeleton className="h-7 w-11" />
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const TableSectionSkeleton = (props: TableSkeletonProps) => {
+  return (
+    <Container className="divide-y p-0" aria-hidden>
+      <div className="flex items-center justify-between px-6 py-4" aria-hidden>
+        <HeadingSkeleton level="h2" characters={16} />
+        <IconButtonSkeleton />
+      </div>
+      <TableSkeleton {...props} />
+    </Container>
+  )
+}
+
 export const JsonViewSectionSkeleton = () => {
   return (
     <Container className="divide-y p-0" aria-hidden>

packages/admin-next/dashboard/src/components/layout/settings-layout/settings-layout.tsx

@@ -68,8 +68,12 @@ const useDeveloperRoutes = (): NavItemProps[] => {
   return useMemo(
     () => [
       {
-        label: t("apiKeyManagement.domain.apiKeys"),
-        to: "/settings/api-key-management",
+        label: t("apiKeyManagement.domain.publishable"),
+        to: "/settings/publishable-api-keys",
+      },
+      {
+        label: t("apiKeyManagement.domain.secret"),
+        to: "/settings/secret-api-keys",
       },
       {
         label: t("workflowExecutions.domain"),

packages/admin-next/dashboard/src/components/table/data-table/data-table-skeleton/data-table-skeleton.tsx

@@ -1,138 +0,0 @@
-import { Table, clx } from "@medusajs/ui"
-import { ColumnDef } from "@tanstack/react-table"
-import { Skeleton } from "../../../common/skeleton"
-
-type DataTableSkeletonProps = {
-  columns: ColumnDef<any, any>[]
-  rowCount: number
-  searchable: boolean
-  orderBy: boolean
-  filterable: boolean
-  pagination: boolean
-  layout?: "fit" | "fill"
-}
-
-export const DataTableSkeleton = ({
-  columns,
-  rowCount,
-  filterable,
-  searchable,
-  orderBy,
-  pagination,
-  layout = "fit",
-}: DataTableSkeletonProps) => {
-  const rows = Array.from({ length: rowCount }, (_, i) => i)
-
-  const hasToolbar = filterable || searchable || orderBy
-  const hasSearchOrOrder = searchable || orderBy
-
-  const hasSelect = columns.find((c) => c.id === "select")
-  const hasActions = columns.find((c) => c.id === "actions")
-  const colCount = columns.length - (hasSelect ? 1 : 0) - (hasActions ? 1 : 0)
-  const colWidth = 100 / colCount
-
-  return (
-    <div
-      className={clx({
-        "flex h-full flex-col overflow-hidden": layout === "fill",
-      })}
-    >
-      {hasToolbar && (
-        <div className="flex items-center justify-between px-6 py-4">
-          {filterable && <Skeleton className="h-7 w-full max-w-[160px]" />}
-          {hasSearchOrOrder && (
-            <div className="flex items-center gap-x-2">
-              {searchable && <Skeleton className="h-7 w-[160px]" />}
-              {orderBy && <Skeleton className="h-7 w-7" />}
-            </div>
-          )}
-        </div>
-      )}
-      <div
-        className={clx("flex w-full flex-col overflow-hidden", {
-          "flex flex-1 flex-col": layout === "fill",
-        })}
-      >
-        <div
-          className={clx("w-full", {
-            "min-h-0 flex-grow overflow-hidden": layout === "fill",
-            "overflow-x-auto": layout === "fit",
-          })}
-        >
-          <Table>
-            <Table.Header>
-              <Table.Row
-                className={clx({
-                  "border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
-                    hasActions,
-                  "[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap":
-                    hasSelect,
-                })}
-              >
-                {columns.map((col, i) => {
-                  const isSelectHeader = col.id === "select"
-                  const isActionsHeader = col.id === "actions"
-
-                  const isSpecialHeader = isSelectHeader || isActionsHeader
-
-                  return (
-                    <Table.HeaderCell
-                      key={i}
-                      style={{
-                        width: !isSpecialHeader ? `${colWidth}%` : undefined,
-                      }}
-                    >
-                      {isActionsHeader ? null : (
-                        <Skeleton
-                          className={clx("h-7", {
-                            "w-7": isSelectHeader,
-                            "w-full": !isSelectHeader,
-                          })}
-                        />
-                      )}
-                    </Table.HeaderCell>
-                  )
-                })}
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {rows.map((_, j) => (
-                <Table.Row key={j}>
-                  {columns.map((col, k) => {
-                    const isSpecialCell =
-                      col.id === "select" || col.id === "actions"
-
-                    return (
-                      <Table.Cell key={k}>
-                        <Skeleton
-                          className={clx("h-7", {
-                            "w-7": isSpecialCell,
-                            "w-full": !isSpecialCell,
-                          })}
-                        />
-                      </Table.Cell>
-                    )
-                  })}
-                </Table.Row>
-              ))}
-            </Table.Body>
-          </Table>
-        </div>
-        {pagination && (
-          <div
-            className={clx("flex items-center justify-between p-4", {
-              "border-t": layout === "fill",
-            })}
-          >
-            <Skeleton className="h-7 w-[138px]" />
-            <div className="flex items-center gap-x-2">
-              <Skeleton className="h-7 w-24" />
-              <Skeleton className="h-7 w-11" />
-              <Skeleton className="h-7 w-11" />
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

packages/admin-next/dashboard/src/components/table/data-table/data-table-skeleton/index.ts

@@ -1 +0,0 @@
-export * from "./data-table-skeleton"

packages/admin-next/dashboard/src/components/table/data-table/data-table.tsx

@@ -1,9 +1,9 @@
 import { clx } from "@medusajs/ui"
 import { memo } from "react"
 import { NoRecords } from "../../common/empty-table-content"
+import { TableSkeleton } from "../../common/skeleton"
 import { DataTableQuery, DataTableQueryProps } from "./data-table-query"
 import { DataTableRoot, DataTableRootProps } from "./data-table-root"
-import { DataTableSkeleton } from "./data-table-skeleton"
 
 interface DataTableProps<TData>
   extends Omit<DataTableRootProps<TData>, "noResults">,
@@ -35,12 +35,11 @@ export const DataTable = <TData,>({
 }: DataTableProps<TData>) => {
   if (isLoading) {
     return (
-      <DataTableSkeleton
+      <TableSkeleton
         layout={layout}
-        columns={columns}
         rowCount={pageSize}
-        searchable={search}
-        filterable={!!filters?.length}
+        search={search}
+        filters={!!filters?.length}
         orderBy={!!orderBy?.length}
         pagination={!!pagination}
       />