@payloadcms/plugin-mcp 4.0.0-canary.1 → 4.0.0-canary.2

package/src/components/APIKeyField/index.client.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { APIKeyInput, Button, useField, useTranslation, WarningTriangleIcon } from '@payloadcms/ui'
+import React, { useState } from 'react'
+
+import type {
+  PluginMCPTranslationKeys,
+  PluginMCPTranslations,
+} from '../../translations/index.js'
+
+import './index.css'
+
+const baseClass = 'mcp-api-key-field'
+
+/**
+ * Custom component for the MCP API-keys collection's `apiKey` field:
+ * - no key yet: a "Generate new key" button
+ * - key set: a dismissible privacy warning + the shared masked-key input
+ */
+export const APIKeyField: React.FC = () => {
+  const { setValue: setApiKey, value: apiKey } = useField<string>({ path: 'apiKey' })
+  const { t } = useTranslation<PluginMCPTranslations, PluginMCPTranslationKeys>()
+  const [isWarningDismissed, setIsWarningDismissed] = useState(false)
+
+  const generateKey = () => {
+    setApiKey(crypto.randomUUID())
+    setIsWarningDismissed(false)
+  }
+
+  return (
+    <div className={baseClass}>
+      <p className={`${baseClass}__description`}>
+        {t('plugin-mcp:apiKeyDescription')}
+      </p>
+      <div className={`${baseClass}__panel`}>
+        <div className={`${baseClass}__header`}>
+          <span className={`${baseClass}__title`}>{t('authentication:apiKey')}</span>
+          {!apiKey && (
+            <Button
+              buttonStyle="primary"
+              className={`${baseClass}__generate`}
+              onClick={generateKey}
+            >
+              {t('authentication:generateNewAPIKey')}
+            </Button>
+          )}
+        </div>
+        {Boolean(apiKey) && (
+          <div className={`${baseClass}__body`}>
+            {!isWarningDismissed && (
+              <div className={`${baseClass}__warning`}>
+                <WarningTriangleIcon className={`${baseClass}__warning-icon`} />
+                <p className={`${baseClass}__warning-text`}>
+                  <strong>{t('plugin-mcp:keepKeyPrivate')}</strong>
+                  {` ${t('plugin-mcp:keyPrivateDescription')}`}
+                </p>
+                <button
+                  aria-label={t('plugin-mcp:dismiss')}
+                  className={`${baseClass}__warning-dismiss`}
+                  onClick={() => setIsWarningDismissed(true)}
+                  type="button"
+                >
+                  &times;
+                </button>
+              </div>
+            )}
+            <APIKeyInput aria-label={t('authentication:apiKey')} value={apiKey} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/APIKeyField/index.css

@@ -0,0 +1,105 @@
+@layer payload-default {
+  /* Section wrapper: description + panel, closed off by a full-bleed divider
+     that spans the fields column past its horizontal gutter. */
+  .mcp-api-key-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+    margin-inline: calc(-1 * var(--gutter-h));
+    padding-inline: var(--gutter-h);
+    padding-block-end: var(--spacer-4);
+    border-block-end: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .mcp-api-key-field__description {
+    margin: 0;
+    color: var(--color-text);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .mcp-api-key-field__panel {
+    overflow: hidden;
+    background: var(--color-bg);
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--button-radius);
+  }
+
+  .mcp-api-key-field__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-2);
+    min-height: var(--spacer-5);
+    padding: var(--spacer-2) var(--spacer-3);
+    background: var(--color-bg-secondary);
+  }
+
+  /* Holds the warning + key row; its top border is the full-width divider
+     under the header. Only rendered once a key exists. */
+  .mcp-api-key-field__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    padding: var(--spacer-3);
+    border-block-start: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .mcp-api-key-field__title {
+    color: var(--color-text);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+  }
+
+  .mcp-api-key-field__generate {
+    margin: 0;
+  }
+
+  /* Matches the core Banner's warning treatment: theme-adaptive warning-tertiary
+     bg with regular --color-text (NOT --color-text-onwarning, which is only
+     defined for light mode and reads as muddy dark-on-dark in dark mode). */
+  .mcp-api-key-field__warning {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
+    padding: calc(var(--spacer-2) + (var(--spacer-1) / 2)) calc(var(--base) / 2);
+    background: var(--color-bg-warning-tertiary);
+    border: none;
+    border-radius: var(--radius-medium);
+    color: var(--color-text);
+  }
+
+  .mcp-api-key-field__warning-icon {
+    flex-shrink: 0;
+    width: 15px;
+    height: 13px;
+  }
+
+  .mcp-api-key-field__warning-text {
+    flex-grow: 1;
+    margin: 0;
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .mcp-api-key-field__warning-text strong {
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+
+  .mcp-api-key-field__warning-dismiss {
+    appearance: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1;
+    padding: 0;
+  }
+}

package/src/components/APIKeysEmptyState/index.client.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import type { NoResultsClientProps } from 'payload'
+
+import { Button, NoListResults, useTranslation } from '@payloadcms/ui'
+import React from 'react'
+
+import type {
+  PluginMCPTranslationKeys,
+  PluginMCPTranslations,
+} from '../../translations/index.js'
+
+export const APIKeysEmptyState: React.FC<NoResultsClientProps> = ({
+  hasCreatePermission,
+  newDocumentURL,
+  viewType,
+}) => {
+  const { t } = useTranslation<PluginMCPTranslations, PluginMCPTranslationKeys>()
+
+  return (
+    <NoListResults
+      Actions={
+        hasCreatePermission && newDocumentURL && viewType !== 'trash'
+          ? [
+              <Button el="link" key="create" to={newDocumentURL}>
+                {t('authentication:generateNewAPIKey')}
+              </Button>,
+            ]
+          : []
+      }
+      description={t('plugin-mcp:apiKeyDescription')}
+      title={t('plugin-mcp:noAPIKeys')}
+      withMargin
+    />
+  )
+}

package/src/components/AccessField/index.client.tsx

@@ -2,9 +2,13 @@
 
 import type { JSONFieldClientProps } from 'payload'
 
-import { CheckboxInput, Collapsible, useField } from '@payloadcms/ui'
-import React from 'react'
+import { CheckboxInput, Collapsible, Tabs, useField, useTranslation } from '@payloadcms/ui'
+import React, { useState } from 'react'
 
+import type {
+  PluginMCPTranslationKeys,
+  PluginMCPTranslations,
+} from '../../translations/index.js'
 import type { ClientMCPPluginConfig, MCPAPIKeysDocAccessTree } from '../../types.js'
 
 import './index.css'
@@ -14,6 +18,11 @@ const baseClass = 'mcp-access-field'
 type ClientItem = ClientMCPPluginConfig['items'][number]
 type ScopeKey = 'collections' | 'globals'
 type FlatKey = 'prompts' | 'resources' | 'tools'
+type TabKey = 'collections' | 'globals' | 'server'
+
+const LEAF_GROUP_KEYS = ['operations', 'auth', 'custom'] as const
+
+type LeafGroupKey = (typeof LEAF_GROUP_KEYS)[number]
 
 type Props = {
   pluginConfig: ClientMCPPluginConfig
@@ -39,15 +48,21 @@ const setKey = <T extends Record<string, unknown>>(
 
 export const AccessField: React.FC<Props> = ({ path, pluginConfig }) => {
   const { setValue, value } = useField<MCPAPIKeysDocAccessTree>({ path })
+  const { t } = useTranslation<PluginMCPTranslations, PluginMCPTranslationKeys>()
+  const [activeTab, setActiveTab] = useState<null | TabKey>(null)
   const access = value ?? {}
+  const leafGroupLabels: Record<LeafGroupKey, string> = {
+    auth: t('plugin-mcp:authentication'),
+    custom: t('general:custom'),
+    operations: t('plugin-mcp:operations'),
+  }
 
-  // Bucket items for rendering. (Bucketing is cheap and runs once per render;
-  // memoizing would mean managing inputs/refs for marginal benefit.)
   const collectionsBySlug: Record<string, ClientItem[]> = {}
   const globalsBySlug: Record<string, ClientItem[]> = {}
-  const tools: ClientItem[] = []
   const prompts: ClientItem[] = []
   const resources: ClientItem[] = []
+  const tools: ClientItem[] = []
+
   for (const item of pluginConfig.items) {
     switch (item.type) {
       case 'collectionTool':
@@ -126,221 +141,158 @@ export const AccessField: React.FC<Props> = ({ path, pluginConfig }) => {
     }
   }
 
-  const collectionSlugs = Object.keys(collectionsBySlug)
-  const globalSlugs = Object.keys(globalsBySlug)
-
-  return (
-    <div className={baseClass}>
-      {collectionSlugs.length > 0 && (
-        <section className={`${baseClass}__section`}>
-          <header className={`${baseClass}__section-header`}>
-            {/* TODO: needs i18n once design is finalized */}
-            <h4>Collection-level permissions</h4>
-            {/* TODO: needs i18n once design is finalized */}
-            <p>Allow MCP clients to perform the following actions within these collections:</p>
-          </header>
-          {collectionSlugs.map((slug) => {
-            const leaves = collectionsBySlug[slug]!
-            return (
-              <Collapsible
-                actions={
-                  <GroupActions
-                    onSetAll={(allow) => setAllScoped('collections', slug, leaves, allow)}
-                  />
-                }
-                className={`${baseClass}__group`}
-                header={<span className={`${baseClass}__group-label`}>{titleCase(slug)}</span>}
-                initCollapsed
-                key={`collection-${slug}`}
-              >
-                <ul className={`${baseClass}__list`}>
-                  {leaves.map((leaf) => (
-                    <li key={leaf.configKey}>
-                      <CheckboxInput
-                        checked={isScopedAllowed('collections', slug, leaf.configKey)}
-                        id={`${path}.collections.${slug}.${leaf.configKey}`}
-                        label={leaf.label}
-                        onToggle={(e) =>
-                          toggleScoped('collections', slug, leaf.configKey, e.target.checked)
-                        }
-                        tooltip={leaf.description}
-                      />
-                    </li>
-                  ))}
-                </ul>
-              </Collapsible>
-            )
-          })}
-        </section>
-      )}
+  const renderLeaf = (
+    leaf: ClientItem,
+    id: string,
+    checked: boolean,
+    onToggle: (allow: boolean) => void,
+  ) => (
+    <li className={`${baseClass}__leaf`} key={leaf.configKey}>
+      <CheckboxInput
+        checked={checked}
+        id={id}
+        label={leaf.label}
+        onToggle={(e) => onToggle(e.target.checked)}
+      />
+      {leaf.description && <p className={`${baseClass}__leaf-description`}>{leaf.description}</p>}
+    </li>
+  )
 
-      {globalSlugs.length > 0 && (
-        <section className={`${baseClass}__section`}>
-          <header className={`${baseClass}__section-header`}>
-            {/* TODO: needs i18n once design is finalized */}
-            <h4>Global-level permissions</h4>
-            {/* TODO: needs i18n once design is finalized */}
-            <p>Allow MCP clients to perform the following actions on these globals:</p>
-          </header>
-          {globalSlugs.map((slug) => {
-            const leaves = globalsBySlug[slug]!
-            return (
-              <Collapsible
-                actions={
-                  <GroupActions
-                    onSetAll={(allow) => setAllScoped('globals', slug, leaves, allow)}
-                  />
-                }
-                className={`${baseClass}__group`}
-                header={<span className={`${baseClass}__group-label`}>{titleCase(slug)}</span>}
-                initCollapsed
-                key={`global-${slug}`}
-              >
-                <ul className={`${baseClass}__list`}>
-                  {leaves.map((leaf) => (
-                    <li key={leaf.configKey}>
-                      <CheckboxInput
-                        checked={isScopedAllowed('globals', slug, leaf.configKey)}
-                        id={`${path}.globals.${slug}.${leaf.configKey}`}
-                        label={leaf.label}
-                        onToggle={(e) =>
-                          toggleScoped('globals', slug, leaf.configKey, e.target.checked)
-                        }
-                        tooltip={leaf.description}
-                      />
-                    </li>
-                  ))}
-                </ul>
-              </Collapsible>
-            )
-          })}
-        </section>
-      )}
+  const renderCard = ({
+    id,
+    isLeafAllowed,
+    label,
+    leaves,
+    onSetAll,
+    onToggleLeaf,
+  }: {
+    id: string
+    isLeafAllowed: (leaf: ClientItem) => boolean
+    label: string
+    leaves: ClientItem[]
+    onSetAll: (allow: boolean) => void
+    onToggleLeaf: (leaf: ClientItem, allow: boolean) => void
+  }) => {
+    const allowedCount = leaves.filter(isLeafAllowed).length
+    const groups = LEAF_GROUP_KEYS.map((key) => ({
+      key,
+      label: leafGroupLabels[key],
+      leaves: leaves.filter((leaf) => (leaf.group ?? 'custom') === key),
+    })).filter((group) => group.leaves.length > 0)
+    const hasGroupLabels = groups.length > 1
 
-      {(tools.length > 0 || prompts.length > 0 || resources.length > 0) && (
-        <section className={`${baseClass}__section`}>
-          <header className={`${baseClass}__section-header`}>
-            {/* TODO: needs i18n once design is finalized */}
-            <h4>Project-level permissions</h4>
-            {/* TODO: needs i18n once design is finalized */}
-            <p>Cross-cutting tools, prompts, and resources not scoped to a single collection.</p>
-          </header>
-          {tools.length > 0 && (
-            <Collapsible
-              actions={<GroupActions onSetAll={(allow) => setAllFlat('tools', tools, allow)} />}
-              className={`${baseClass}__group`}
-              header={
-                /* TODO: needs i18n once design is finalized */
-                <span className={`${baseClass}__group-label`}>Tools</span>
-              }
-              initCollapsed
-            >
-              <ul className={`${baseClass}__list`}>
-                {tools.map((leaf) => (
-                  <li key={leaf.configKey}>
-                    <CheckboxInput
-                      checked={isFlatAllowed('tools', leaf.configKey)}
-                      id={`${path}.tools.${leaf.configKey}`}
-                      label={leaf.label}
-                      onToggle={(e) => toggleFlat('tools', leaf.configKey, e.target.checked)}
-                      tooltip={leaf.description}
-                    />
-                  </li>
-                ))}
-              </ul>
-            </Collapsible>
-          )}
-          {prompts.length > 0 && (
-            <Collapsible
-              actions={<GroupActions onSetAll={(allow) => setAllFlat('prompts', prompts, allow)} />}
-              className={`${baseClass}__group`}
-              header={
-                /* TODO: needs i18n once design is finalized */
-                <span className={`${baseClass}__group-label`}>Prompts</span>
-              }
-              initCollapsed
-            >
+    return (
+      <Collapsible
+        className={`${baseClass}__card`}
+        header={
+          // Keep header clicks on the checkbox from also toggling the collapsible.
+          <span
+            className={`${baseClass}__card-checkbox`}
+            onClick={(e) => e.stopPropagation()}
+            role="presentation"
+          >
+            <CheckboxInput
+              checked={allowedCount === leaves.length}
+              id={`${id}._all`}
+              label={label}
+              onToggle={() => onSetAll(allowedCount < leaves.length)}
+              partialChecked={allowedCount > 0 && allowedCount < leaves.length}
+            />
+          </span>
+        }
+        initCollapsed
+        key={id}
+      >
+        <div className={`${baseClass}__card-groups`}>
+          {groups.map((group) => (
+            <div className={`${baseClass}__leaf-group`} key={group.key}>
+              {hasGroupLabels && <p className={`${baseClass}__leaf-group-label`}>{group.label}</p>}
               <ul className={`${baseClass}__list`}>
-                {prompts.map((leaf) => (
-                  <li key={leaf.configKey}>
-                    <CheckboxInput
-                      checked={isFlatAllowed('prompts', leaf.configKey)}
-                      id={`${path}.prompts.${leaf.configKey}`}
-                      label={leaf.label}
-                      onToggle={(e) => toggleFlat('prompts', leaf.configKey, e.target.checked)}
-                      tooltip={leaf.description}
-                    />
-                  </li>
-                ))}
+                {group.leaves.map((leaf) =>
+                  renderLeaf(leaf, `${id}.${leaf.configKey}`, isLeafAllowed(leaf), (allow) =>
+                    onToggleLeaf(leaf, allow),
+                  ),
+                )}
               </ul>
-            </Collapsible>
-          )}
-          {resources.length > 0 && (
-            <Collapsible
-              actions={
-                <GroupActions onSetAll={(allow) => setAllFlat('resources', resources, allow)} />
-              }
-              className={`${baseClass}__group`}
-              header={
-                /* TODO: needs i18n once design is finalized */
-                <span className={`${baseClass}__group-label`}>Resources</span>
-              }
-              initCollapsed
-            >
-              <ul className={`${baseClass}__list`}>
-                {resources.map((leaf) => (
-                  <li key={leaf.configKey}>
-                    <CheckboxInput
-                      checked={isFlatAllowed('resources', leaf.configKey)}
-                      id={`${path}.resources.${leaf.configKey}`}
-                      label={leaf.label}
-                      onToggle={(e) => toggleFlat('resources', leaf.configKey, e.target.checked)}
-                      tooltip={leaf.description}
-                    />
-                  </li>
-                ))}
-              </ul>
-            </Collapsible>
+            </div>
+          ))}
+        </div>
+      </Collapsible>
+    )
+  }
+
+  const renderScope = (scope: ScopeKey, bySlug: Record<string, ClientItem[]>) =>
+    Object.entries(bySlug).map(([slug, leaves]) =>
+      renderCard({
+        id: `${path}.${scope}.${slug}`,
+        isLeafAllowed: (leaf) => isScopedAllowed(scope, slug, leaf.configKey),
+        label: titleCase(slug),
+        leaves,
+        onSetAll: (allow) => setAllScoped(scope, slug, leaves, allow),
+        onToggleLeaf: (leaf, allow) => toggleScoped(scope, slug, leaf.configKey, allow),
+      }),
+    )
+
+  const renderFlat = (scope: FlatKey, label: string, leaves: ClientItem[]) =>
+    leaves.length > 0 &&
+    renderCard({
+      id: `${path}.${scope}`,
+      isLeafAllowed: (leaf) => isFlatAllowed(scope, leaf.configKey),
+      label,
+      leaves,
+      onSetAll: (allow) => setAllFlat(scope, leaves, allow),
+      onToggleLeaf: (leaf, allow) => toggleFlat(scope, leaf.configKey, allow),
+    })
+
+  const tabs: Array<{ key: TabKey; label: string }> = [
+    ...(Object.keys(collectionsBySlug).length > 0
+      ? [{ key: 'collections' as const, label: t('general:collections') }]
+      : []),
+    ...(Object.keys(globalsBySlug).length > 0
+      ? [{ key: 'globals' as const, label: t('general:globals') }]
+      : []),
+    ...(prompts.length > 0 || resources.length > 0 || tools.length > 0
+      ? [{ key: 'server' as const, label: t('plugin-mcp:server') }]
+      : []),
+  ]
+  if (tabs.length === 0) {
+    return null
+  }
+
+  const currentTab = activeTab ?? tabs[0]!.key
+
+  return (
+    <div className={baseClass}>
+      <header className={`${baseClass}__header`}>
+        <h4>{t('plugin-mcp:permissions')}</h4>
+        <p>{t('plugin-mcp:permissionsDescription')}</p>
+      </header>
+      <div className={`${baseClass}__tabbed-content`}>
+        <Tabs
+          className={`${baseClass}__tabs`}
+          onChange={setActiveTab}
+          tabs={tabs.map((tab) => ({
+            label: tab.label,
+            value: tab.key,
+          }))}
+          value={currentTab}
+        />
+        <div className={`${baseClass}__cards`}>
+          {currentTab === 'collections' && renderScope('collections', collectionsBySlug)}
+          {currentTab === 'globals' && renderScope('globals', globalsBySlug)}
+          {currentTab === 'server' && (
+            <>
+              {renderFlat('prompts', t('plugin-mcp:prompts'), prompts)}
+              {renderFlat('resources', t('plugin-mcp:resources'), resources)}
+              {renderFlat('tools', t('plugin-mcp:tools'), tools)}
+            </>
           )}
-        </section>
-      )}
+        </div>
+      </div>
     </div>
   )
 }
 
-const GroupActions: React.FC<{ onSetAll: (allow: boolean) => void }> = ({ onSetAll }) => (
-  // TODO: button labels + aria-labels need i18n once design is finalized
-  <div className={`${baseClass}__group-actions`}>
-    <button
-      aria-label="Select all"
-      className={`${baseClass}__action`}
-      onClick={(e) => {
-        e.stopPropagation()
-        onSetAll(true)
-      }}
-      title="Select all"
-      type="button"
-    >
-      all
-    </button>
-    <span aria-hidden className={`${baseClass}__action-sep`}>
-      /
-    </span>
-    <button
-      aria-label="Clear all"
-      className={`${baseClass}__action`}
-      onClick={(e) => {
-        e.stopPropagation()
-        onSetAll(false)
-      }}
-      title="Clear all"
-      type="button"
-    >
-      none
-    </button>
-  </div>
-)
-
 const titleCase = (slug: string): string =>
   slug.replace(/(^|[-_])(.)/g, (_, sep: string, ch: string) =>
     sep ? ` ${ch.toUpperCase()}` : ch.toUpperCase(),