@payloadcms/plugin-mcp 4.0.0-canary.3 → 4.0.0-internal.17c13d2

package/src/collection/getAccessField.ts

@@ -1,84 +0,0 @@
-import type { JSONField } from 'payload'
-
-import type { ClientMCPPluginConfig, MCPItem, SanitizedMCPPluginConfig } from '../types.js'
-
-import {
-  COLLECTION_AUTH_BUILTINS,
-  COLLECTION_BUILTINS,
-  GLOBAL_BUILTINS,
-} from '../mcp/builtinTools.js'
-
-/**
- * Returns the API key collection's `access` field — a JSON field whose value
- * is the `MCPAPIKeysDocAccessTree` the endpoint consults. The actual UI is
- * a custom client component (`AccessField`) which renders a permissions
- * matrix; the field's stored shape is just the runtime access tree.
- */
-export const getAccessField = ({
-  pluginConfig,
-}: {
-  pluginConfig: SanitizedMCPPluginConfig
-}): JSONField => {
-  const clientPluginConfig = sanitizeClientPluginConfig(pluginConfig)
-
-  return {
-    name: 'access',
-    type: 'json',
-    admin: {
-      components: {
-        Field: {
-          clientProps: { pluginConfig: clientPluginConfig },
-          path: '@payloadcms/plugin-mcp/client#AccessField',
-        },
-      },
-    },
-    defaultValue: {},
-    label: false,
-  }
-}
-
-/**
- * Strips the non-serializable parts of `SanitizedMCPPluginConfig` (handlers,
- * input/argsSchema functions, etc.) so the result is safe to thread to a
- * client component via `clientProps`.
- */
-const sanitizeClientPluginConfig = (
-  pluginConfig: SanitizedMCPPluginConfig,
-): ClientMCPPluginConfig => ({
-  items: pluginConfig.items.map((item) => {
-    const group = itemGroup(item)
-
-    return {
-      ...(item.type === 'collectionTool' ? { collectionSlug: item.collectionSlug } : {}),
-      ...(item.type === 'globalTool' ? { globalSlug: item.globalSlug } : {}),
-      type: item.type,
-      configKey: item.configKey,
-      ...(group === 'operations' ? {} : { description: itemDescription(item) }),
-      group,
-      label: item.label,
-    }
-  }),
-})
-
-const itemDescription = (item: MCPItem): string => {
-  if (item.type === 'prompt') {
-    return item.prompt.description
-  }
-  if (item.type === 'resource') {
-    return item.resource.description
-  }
-  return item.tool.description
-}
-
-const itemGroup = (item: MCPItem): 'auth' | 'custom' | 'operations' | undefined => {
-  if (item.type === 'collectionTool') {
-    if (item.configKey in COLLECTION_BUILTINS) {
-      return 'operations'
-    }
-    return item.configKey in COLLECTION_AUTH_BUILTINS ? 'auth' : 'custom'
-  }
-  if (item.type === 'globalTool') {
-    return item.configKey in GLOBAL_BUILTINS ? 'operations' : 'custom'
-  }
-  return undefined
-}

package/src/collection/index.ts

@@ -1,105 +0,0 @@
-import type { CollectionConfig } from 'payload'
-
-import { createAPIKeyFields } from 'payload'
-
-import type { SanitizedMCPPluginConfig } from '../types.js'
-
-import { getAccessField } from './getAccessField.js'
-
-const apiKeyStorageFields = createAPIKeyFields({
-  apiKeyField: {
-    admin: {
-      components: { Field: '@payloadcms/plugin-mcp/client#APIKeyField' },
-    },
-    required: true,
-  },
-  apiKeyIndexField: {
-    index: true,
-    required: true,
-  },
-  includeEnableAPIKey: false,
-})
-
-export const getAPIKeysCollection = ({
-  pluginConfig,
-}: {
-  pluginConfig: SanitizedMCPPluginConfig
-}): CollectionConfig => {
-  const collection: CollectionConfig = {
-    slug: 'payload-mcp-api-keys',
-    admin: {
-      components: {
-        views: {
-          list: {
-            NoResults: '@payloadcms/plugin-mcp/client#APIKeysEmptyState',
-          },
-        },
-      },
-      defaultColumns: ['label', 'lastUsed', 'user'],
-      // Kept out of the main nav — reachable through the user menu's settings instead.
-      group: false,
-      useAsTitle: 'label',
-    },
-    fields: [
-      ...apiKeyStorageFields,
-      getAccessField({ pluginConfig }),
-      {
-        name: 'label',
-        type: 'text',
-        admin: {
-          description: ({ t }) => t('plugin-mcp:titleDescription'),
-          position: 'sidebar',
-        },
-        label: ({ t }) => t('plugin-mcp:title'),
-      },
-      {
-        name: 'description',
-        type: 'text',
-        admin: {
-          description: ({ t }) => t('plugin-mcp:descriptionDescription'),
-          position: 'sidebar',
-        },
-        label: ({ t }) => t('plugin-mcp:description'),
-      },
-      {
-        name: 'lastUsed',
-        type: 'date',
-        admin: {
-          date: { pickerAppearance: 'dayAndTime' },
-          disabled: { field: true },
-        },
-        label: ({ t }) => t('plugin-mcp:lastUsed'),
-      },
-      {
-        name: 'user',
-        type: 'relationship',
-        admin: {
-          description: ({ t }) => t('plugin-mcp:userDescription'),
-          position: 'sidebar',
-        },
-        label: ({ t }) => t('general:user'),
-        relationTo: pluginConfig.userCollection,
-        required: true,
-      },
-      {
-        name: 'overrideAccess',
-        type: 'checkbox',
-        admin: {
-          description: ({ t }) => t('plugin-mcp:overrideAccessDescription'),
-          position: 'sidebar',
-        },
-        defaultValue: false,
-        label: ({ t }) => t('plugin-mcp:overrideAccess'),
-      },
-    ],
-    labels: {
-      plural: ({ t }) => `${t('plugin-mcp:mcp')} ${t('plugin-mcp:apiKeys')}`,
-      singular: ({ t }) => `${t('plugin-mcp:mcp')} ${t('authentication:apiKey')}`,
-    },
-    versions: false,
-  }
-
-  return pluginConfig.overrideApiKeyCollection
-    ? pluginConfig.overrideApiKeyCollection(collection)
-    : collection
-}

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

@@ -1,68 +0,0 @@
-'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

@@ -1,105 +0,0 @@
-@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

@@ -1,33 +0,0 @@
-'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

@@ -1,296 +0,0 @@
-'use client'
-
-import type { JSONFieldClientProps } from 'payload'
-
-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'
-
-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
-} & JSONFieldClientProps
-
-/** Drop a key from an object and return a new object — or `undefined` if it'd be empty. */
-const without = <T extends Record<string, unknown>>(
-  obj: T | undefined,
-  key: string,
-): T | undefined => {
-  if (!obj || !(key in obj)) {
-    return obj
-  }
-  const { [key]: _omitted, ...rest } = obj
-  return Object.keys(rest).length === 0 ? undefined : (rest as T)
-}
-
-const setKey = <T extends Record<string, unknown>>(
-  obj: T | undefined,
-  key: string,
-  value: unknown,
-): T => ({ ...(obj ?? {}), [key]: value }) as T
-
-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'),
-  }
-
-  const collectionsBySlug: Record<string, ClientItem[]> = {}
-  const globalsBySlug: Record<string, ClientItem[]> = {}
-  const prompts: ClientItem[] = []
-  const resources: ClientItem[] = []
-  const tools: ClientItem[] = []
-
-  for (const item of pluginConfig.items) {
-    switch (item.type) {
-      case 'collectionTool':
-        ;(collectionsBySlug[item.collectionSlug!] ??= []).push(item)
-        break
-      case 'globalTool':
-        ;(globalsBySlug[item.globalSlug!] ??= []).push(item)
-        break
-      case 'prompt':
-        prompts.push(item)
-        break
-      case 'resource':
-        resources.push(item)
-        break
-      case 'tool':
-        tools.push(item)
-        break
-    }
-  }
-
-  const isScopedAllowed = (scope: ScopeKey, slug: string, configKey: string): boolean =>
-    access[scope]?.[slug]?.[configKey] !== false
-
-  const isFlatAllowed = (scope: FlatKey, configKey: string): boolean =>
-    access[scope]?.[configKey] !== false
-
-  const toggleScoped = (scope: ScopeKey, slug: string, configKey: string, allow: boolean) => {
-    if (allow) {
-      const slugBucket = without(access[scope]?.[slug], configKey)
-      const scopeBucket = slugBucket
-        ? setKey(access[scope], slug, slugBucket)
-        : without(access[scope], slug)
-      setValue(scopeBucket ? setKey(access, scope, scopeBucket) : (without(access, scope) ?? {}))
-    } else {
-      setValue(
-        setKey(
-          access,
-          scope,
-          setKey(access[scope], slug, setKey(access[scope]?.[slug], configKey, false)),
-        ),
-      )
-    }
-  }
-
-  const toggleFlat = (scope: FlatKey, configKey: string, allow: boolean) => {
-    if (allow) {
-      const bucket = without(access[scope], configKey)
-      setValue(bucket ? setKey(access, scope, bucket) : (without(access, scope) ?? {}))
-    } else {
-      setValue(setKey(access, scope, setKey(access[scope], configKey, false)))
-    }
-  }
-
-  const setAllScoped = (scope: ScopeKey, slug: string, leaves: ClientItem[], allow: boolean) => {
-    if (allow) {
-      const scopeBucket = without(access[scope], slug)
-      setValue(scopeBucket ? setKey(access, scope, scopeBucket) : (without(access, scope) ?? {}))
-    } else {
-      const slugBucket = leaves.reduce<Record<string, boolean>>(
-        (acc, leaf) => ({ ...acc, [leaf.configKey]: false }),
-        {},
-      )
-      setValue(setKey(access, scope, setKey(access[scope], slug, slugBucket)))
-    }
-  }
-
-  const setAllFlat = (scope: FlatKey, leaves: ClientItem[], allow: boolean) => {
-    if (allow) {
-      setValue(without(access, scope) ?? {})
-    } else {
-      const bucket = leaves.reduce<Record<string, boolean>>(
-        (acc, leaf) => ({ ...acc, [leaf.configKey]: false }),
-        {},
-      )
-      setValue(setKey(access, scope, bucket))
-    }
-  }
-
-  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>
-  )
-
-  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
-
-    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`}>
-                {group.leaves.map((leaf) =>
-                  renderLeaf(leaf, `${id}.${leaf.configKey}`, isLeafAllowed(leaf), (allow) =>
-                    onToggleLeaf(leaf, allow),
-                  ),
-                )}
-              </ul>
-            </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)}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const titleCase = (slug: string): string =>
-  slug.replace(/(^|[-_])(.)/g, (_, sep: string, ch: string) =>
-    sep ? ` ${ch.toUpperCase()}` : ch.toUpperCase(),
-  )