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

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':
@@ -68,14 +83,15 @@ export const AccessField: React.FC<Props> = ({ path, pluginConfig }) => {
     }
   }
 
-  const isScopedAllowed = (scope: ScopeKey, slug: string, key: string): boolean =>
-    access[scope]?.[slug]?.[key] !== false
+  const isScopedAllowed = (scope: ScopeKey, slug: string, configKey: string): boolean =>
+    access[scope]?.[slug]?.[configKey] !== false
 
-  const isFlatAllowed = (scope: FlatKey, key: string): boolean => access[scope]?.[key] !== false
+  const isFlatAllowed = (scope: FlatKey, configKey: string): boolean =>
+    access[scope]?.[configKey] !== false
 
-  const toggleScoped = (scope: ScopeKey, slug: string, key: string, allow: boolean) => {
+  const toggleScoped = (scope: ScopeKey, slug: string, configKey: string, allow: boolean) => {
     if (allow) {
-      const slugBucket = without(access[scope]?.[slug], key)
+      const slugBucket = without(access[scope]?.[slug], configKey)
       const scopeBucket = slugBucket
         ? setKey(access[scope], slug, slugBucket)
         : without(access[scope], slug)
@@ -85,18 +101,18 @@ export const AccessField: React.FC<Props> = ({ path, pluginConfig }) => {
         setKey(
           access,
           scope,
-          setKey(access[scope], slug, setKey(access[scope]?.[slug], key, false)),
+          setKey(access[scope], slug, setKey(access[scope]?.[slug], configKey, false)),
         ),
       )
     }
   }
 
-  const toggleFlat = (scope: FlatKey, key: string, allow: boolean) => {
+  const toggleFlat = (scope: FlatKey, configKey: string, allow: boolean) => {
     if (allow) {
-      const bucket = without(access[scope], key)
+      const bucket = without(access[scope], configKey)
       setValue(bucket ? setKey(access, scope, bucket) : (without(access, scope) ?? {}))
     } else {
-      setValue(setKey(access, scope, setKey(access[scope], key, false)))
+      setValue(setKey(access, scope, setKey(access[scope], configKey, false)))
     }
   }
 
@@ -106,7 +122,7 @@ export const AccessField: React.FC<Props> = ({ path, pluginConfig }) => {
       setValue(scopeBucket ? setKey(access, scope, scopeBucket) : (without(access, scope) ?? {}))
     } else {
       const slugBucket = leaves.reduce<Record<string, boolean>>(
-        (acc, leaf) => ({ ...acc, [leaf.key]: false }),
+        (acc, leaf) => ({ ...acc, [leaf.configKey]: false }),
         {},
       )
       setValue(setKey(access, scope, setKey(access[scope], slug, slugBucket)))
@@ -118,226 +134,165 @@ export const AccessField: React.FC<Props> = ({ path, pluginConfig }) => {
       setValue(without(access, scope) ?? {})
     } else {
       const bucket = leaves.reduce<Record<string, boolean>>(
-        (acc, leaf) => ({ ...acc, [leaf.key]: false }),
+        (acc, leaf) => ({ ...acc, [leaf.configKey]: false }),
         {},
       )
       setValue(setKey(access, scope, bucket))
     }
   }
 
-  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.key}>
-                      <CheckboxInput
-                        checked={isScopedAllowed('collections', slug, leaf.key)}
-                        id={`${path}.collections.${slug}.${leaf.key}`}
-                        label={leaf.label}
-                        onToggle={(e) =>
-                          toggleScoped('collections', slug, leaf.key, 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.key}>
-                      <CheckboxInput
-                        checked={isScopedAllowed('globals', slug, leaf.key)}
-                        id={`${path}.globals.${slug}.${leaf.key}`}
-                        label={leaf.label}
-                        onToggle={(e) => toggleScoped('globals', slug, leaf.key, 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.key}>
-                    <CheckboxInput
-                      checked={isFlatAllowed('tools', leaf.key)}
-                      id={`${path}.tools.${leaf.key}`}
-                      label={leaf.label}
-                      onToggle={(e) => toggleFlat('tools', leaf.key, 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.key}>
-                    <CheckboxInput
-                      checked={isFlatAllowed('prompts', leaf.key)}
-                      id={`${path}.prompts.${leaf.key}`}
-                      label={leaf.label}
-                      onToggle={(e) => toggleFlat('prompts', leaf.key, 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.key}>
-                    <CheckboxInput
-                      checked={isFlatAllowed('resources', leaf.key)}
-                      id={`${path}.resources.${leaf.key}`}
-                      label={leaf.label}
-                      onToggle={(e) => toggleFlat('resources', leaf.key, 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(),

package/src/components/AccessField/index.css

@@ -3,32 +3,22 @@
     display: flex;
     flex-direction: column;
     gap: var(--base);
+    /* Breathing room below the API-key section's divider - the fields
+       container itself adds no gap between these two fields. */
+    padding-block-start: var(--spacer-4);
+    /* This custom field renders straight into `render-fields` (no `.field-type`
+       wrapper), so it must carry the standard inter-field margin itself -
+       otherwise the next field (e.g. an overrideApiKeyCollection field) butts
+       against the last card. */
+    margin-block-end: var(--spacer-3);
   }
 
-  .mcp-access-field__section {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 2);
-    padding-bottom: var(--base);
-    /* Full-bleed separator: extend past the sidebar's horizontal gutter so the
-       border-block-end spans the entire sidebar width. */
-    margin-inline-start: calc(-1 * var(--sidebar-gutter-h-left, var(--gutter-h)));
-    margin-inline-end: calc(-1 * var(--sidebar-gutter-h-right, var(--gutter-h)));
-    padding-inline-start: var(--sidebar-gutter-h-left, var(--gutter-h));
-    padding-inline-end: var(--sidebar-gutter-h-right, var(--gutter-h));
-    border-block-end: 1px solid var(--theme-elevation-100);
-  }
-
-  .mcp-access-field__section:last-child {
-    border-block-end: none;
-  }
-
-  .mcp-access-field__section-header {
+  .mcp-access-field__header {
     display: flex;
     flex-direction: column;
   }
 
-  .mcp-access-field__section-header h4 {
+  .mcp-access-field__header h4 {
     margin: 0;
     color: var(--color-text);
     font-family: var(--text-heading-small-font-family);
@@ -38,7 +28,7 @@
     letter-spacing: var(--text-heading-small-letter-spacing);
   }
 
-  .mcp-access-field__section-header p {
+  .mcp-access-field__header p {
     margin: 0;
     color: var(--color-text-secondary);
     font-family: var(--text-body-medium-font-family);
@@ -48,38 +38,46 @@
     letter-spacing: var(--text-body-medium-letter-spacing);
   }
 
-  .mcp-access-field__group {
-    margin-block-end: calc(var(--base) / 2);
+  .mcp-access-field__tabbed-content {
+    display: flex;
+    flex-direction: column;
   }
 
-  .mcp-access-field__group-label {
-    font-weight: 600;
+  .mcp-access-field__cards {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
   }
 
-  .mcp-access-field__group-actions {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--base) / 6);
+  /* The collapsible header is pointer-events: none so clicks reach the toggle
+     overlay; re-enable events on the checkbox and lift it above the toggle. */
+  .mcp-access-field__card-checkbox {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    pointer-events: auto;
   }
 
-  .mcp-access-field__action {
-    appearance: none;
-    background: none;
-    border: none;
-    color: var(--theme-elevation-500);
-    cursor: pointer;
-    font-size: 0.75rem;
-    padding: 0;
+  .mcp-access-field__leaf-group {
+    padding-block: calc(var(--base) / 2);
+    border-block-end: 1px solid var(--theme-elevation-100);
+  }
+
+  .mcp-access-field__leaf-group:first-child {
+    padding-block-start: 0;
   }
 
-  .mcp-access-field__action:hover {
-    color: var(--theme-text);
-    text-decoration: underline;
+  .mcp-access-field__leaf-group:last-child {
+    border-block-end: none;
+    padding-block-end: 0;
   }
 
-  .mcp-access-field__action-sep {
-    color: var(--theme-elevation-300);
-    font-size: 0.75rem;
+  .mcp-access-field__leaf-group-label {
+    margin: 0 0 calc(var(--base) / 2);
+    color: var(--color-text-secondary);
+    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-access-field__list {
@@ -88,6 +86,14 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: calc(var(--base) / 3);
+    gap: calc(var(--base) / 2);
+  }
+
+  .mcp-access-field__leaf-description {
+    margin: calc(var(--base) / 6) 0 0;
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
   }
 }

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

@@ -0,0 +1,34 @@
+'use client'
+
+import { PopupList, useConfig, useTranslation } from '@payloadcms/ui'
+import { formatAdminURL } from 'payload/shared'
+import React from 'react'
+
+import type {
+  PluginMCPTranslationKeys,
+  PluginMCPTranslations,
+} from '../../translations/index.js'
+
+/**
+ * Entry in the user menu's Settings sub-popup linking to the API keys
+ * collection. The collection is excluded from the main nav
+ * (`admin.group: false`) and managed from here instead.
+ */
+export const MCPSettingsMenu: React.FC = () => {
+  const { config } = useConfig()
+  const { t } = useTranslation<PluginMCPTranslations, PluginMCPTranslationKeys>()
+
+  return (
+    <PopupList.MenuItem>
+      <PopupList.GroupLabel label={t('plugin-mcp:mcp')} />
+      <PopupList.Button
+        href={formatAdminURL({
+          adminRoute: config.routes.admin,
+          path: '/collections/payload-mcp-api-keys',
+        })}
+      >
+        {t('plugin-mcp:manageAPIKeys')}
+      </PopupList.Button>
+    </PopupList.MenuItem>
+  )
+}