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/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}
       />