feat(dashboard): Pub Api Key domain

.changeset/gentle-pots-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+feature(ui): Adds a `size` variant to `<Copy />` component, and prevent clicks from propigating to parent elements". Also adds additional sizes to the `<Avatar />` component.

packages/admin-next/dashboard/public/locales/en/translation.json

@@ -27,6 +27,8 @@
     "details": "Details",
     "enabled": "Enabled",
     "disabled": "Disabled",
+    "active": "Active",
+    "revoked": "Revoked",
     "remove": "Remove",
     "admin": "Admin",
     "store": "Store",
@@ -183,10 +185,16 @@
     "domain": "API Key Management",
     "createKey": "Create key",
     "createPublishableApiKey": "Create Publishable API Key",
+    "editKey": "Edit key",
     "revoke": "Revoke",
     "publishableApiKeyHint": "Publishable API keys are used to limit the scope of requests to specific sales channels.",
     "deleteKeyWarning": "You are about to delete the API key {{title}}. This action cannot be undone.",
-    "revokeKeyWarning": "You are about to revoke the API key {{title}}."
+    "revokeKeyWarning": "You are about to revoke the API key {{title}}. This action cannot be undone, and the key cannot be used in future requests.",
+    "removeSalesChannelWarning": "You are about to remove the sales channel {{name}} from the API key. This action cannot be undone.",
+    "removeSalesChannelsWarning_one": "You are about to remove {{count}} sales channel from the API key. This action cannot be undone.",
+    "removeSalesChannelsWarning_other": "You are about to remove {{count}} sales channels from the API key. This action cannot be undone.",
+    "createdBy": "Created by",
+    "revokedBy": "Revoked by"
   },
   "fields": {
     "name": "Name",
@@ -234,6 +242,8 @@
     "variants": "Variants",
     "orders": "Orders",
     "account": "Account",
-    "total": "Total"
+    "total": "Total",
+    "created": "Created",
+    "key": "Key"
   }
 }

packages/admin-next/dashboard/src/components/common/user-link/index.ts

@@ -0,0 +1 @@
+export * from "./user-link"

packages/admin-next/dashboard/src/components/common/user-link/user-link.tsx

@@ -0,0 +1,34 @@
+import { Avatar, Text } from "@medusajs/ui"
+import { Link } from "react-router-dom"
+
+type UserLinkProps = {
+  id: string
+  first_name?: string | null
+  last_name?: string | null
+  email: string
+  type?: "customer" | "user"
+}
+
+export const UserLink = ({
+  id,
+  first_name,
+  last_name,
+  email,
+  type = "user",
+}: UserLinkProps) => {
+  const name = [first_name, last_name].filter(Boolean).join(" ")
+  const fallback = name ? name.slice(0, 1) : email.slice(0, 1)
+  const link = type === "user" ? `/settings/users/${id}` : `/customers/${id}`
+
+  return (
+    <Link
+      to={link}
+      className="flex items-center gap-x-2 w-fit transition-fg hover:text-ui-fg-subtle outline-none focus-visible:shadow-borders-focus rounded-md"
+    >
+      <Avatar size="2xsmall" fallback={fallback.toUpperCase()} />
+      <Text size="small" leading="compact" weight="regular">
+        {name || email}
+      </Text>
+    </Link>
+  )
+}

packages/admin-next/dashboard/src/providers/router-provider/router-provider.tsx

@@ -3,7 +3,9 @@ import type {
   AdminCustomerGroupsRes,
   AdminCustomersRes,
   AdminProductsRes,
+  AdminPublishableApiKeysRes,
   AdminRegionsRes,
+  AdminSalesChannelsRes,
 } from "@medusajs/medusa"
 import {
   Outlet,
@@ -487,6 +489,10 @@ const router = createBrowserRouter([
                 path: ":id",
                 lazy: () =>
                   import("../../routes/sales-channels/sales-channel-detail"),
+                handle: {
+                  crumb: (data: AdminSalesChannelsRes) =>
+                    data.sales_channel.name,
+                },
                 children: [
                   {
                     path: "edit",
@@ -533,6 +539,10 @@ const router = createBrowserRouter([
                   import(
                     "../../routes/api-key-management/api-key-management-detail"
                   ),
+                handle: {
+                  crumb: (data: AdminPublishableApiKeysRes) =>
+                    data.publishable_api_key.title,
+                },
                 children: [
                   {
                     path: "edit",
@@ -541,6 +551,13 @@ const router = createBrowserRouter([
                         "../../routes/api-key-management/api-key-management-edit"
                       ),
                   },
+                  {
+                    path: "add-sales-channels",
+                    lazy: () =>
+                      import(
+                        "../../routes/api-key-management/api-key-management-add-sales-channels"
+                      ),
+                  },
                 ],
               },
             ],

packages/admin-next/dashboard/src/routes/api-key-management/api-key-management-add-sales-channels/api-key-management-add-sales-channels.tsx

@@ -0,0 +1,36 @@
+import { FocusModal } from "@medusajs/ui"
+import { useAdminPublishableApiKeySalesChannels } from "medusa-react"
+import { useParams } from "react-router-dom"
+import { useRouteModalState } from "../../../hooks/use-route-modal-state"
+import { AddSalesChannelsToApiKeyForm } from "./components"
+
+export const ApiKeyManagementAddSalesChannels = () => {
+  const { id } = useParams()
+  const [open, onOpenChange, subscribe] = useRouteModalState()
+
+  const { sales_channels, isLoading, isError, error } =
+    useAdminPublishableApiKeySalesChannels(id!)
+
+  const handleSuccessfulSubmit = () => {
+    onOpenChange(false, true)
+  }
+
+  if (isError) {
+    throw error
+  }
+
+  return (
+    <FocusModal open={open} onOpenChange={onOpenChange}>
+      <FocusModal.Content>
+        {!isLoading && sales_channels && (
+          <AddSalesChannelsToApiKeyForm
+            apiKey={id!}
+            preSelected={sales_channels.map((sc) => sc.id)}
+            onSuccessfulSubmit={handleSuccessfulSubmit}
+            subscribe={subscribe}
+          />
+        )}
+      </FocusModal.Content>
+    </FocusModal>
+  )
+}