implement

Author: emmatown

docs/content/docs/config/lists.md

@@ -68,7 +68,7 @@ The `actions` property of the list configuration object is where you define acti
 An action can be triggered on individual items or in bulk from the list view in the Admin UI, or directly using GraphQL.
 
 ```typescript
-import { config, list } from '@keystone-6/core';
+import { config, list, action } from '@keystone-6/core';
 import { allowAll } from '@keystone-6/core/access';
 import { text, integer } from '@keystone-6/core/fields';
 
@@ -81,7 +81,7 @@ export default config({
         votes: integer({ defaultValue: 0 }),
       },
       actions: {
-        vote: {
+        vote: action({
           access: allowAll,
           async resolve ({ where }, context) {
             if (!where) return null
@@ -94,7 +94,7 @@ export default config({
             label: 'Vote +1',
             icon: 'voteIcon',
           },
-        },
+        }),
       },
     }),
   },

examples/actions/schema.graphql

@@ -138,9 +138,17 @@ type Mutation {
   deletePost(where: PostWhereUniqueInput!): Post
   deletePosts(where: [PostWhereUniqueInput!]!): [Post]
   votePost(where: PostWhereUniqueInput!): Post
-  votePosts(where: [PostWhereUniqueInput!]!): [Post]
+  votePosts(data: [VotePostArgs!]!): [Post]
   reportAPost(where: PostWhereUniqueInput!): Post
-  reportSomePosts(where: [PostWhereUniqueInput!]!): [Post]
+  reportSomePosts(data: [ReportAPostArgs!]!): [Post]
+}
+
+input VotePostArgs {
+  where: PostWhereUniqueInput!
+}
+
+input ReportAPostArgs {
+  where: PostWhereUniqueInput!
 }
 
 type Query {
@@ -263,12 +271,14 @@ type KeystoneAdminUIActionMetaMessages {
 }
 
 type KeystoneAdminUIActionMetaGraphQL {
+  fields: [String!]!
   names: KeystoneAdminUIActionMetaGraphQLNames!
 }
 
 type KeystoneAdminUIActionMetaGraphQLNames {
   one: String!
   many: String
+  data: String
 }
 
 type KeystoneAdminUIActionMetaItemView {

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx

@@ -14,6 +14,7 @@ import { Heading, Text } from '@keystar/ui/typography'
 import { gql, type TypedDocumentNode, useApolloClient } from '../../../../admin-ui/apollo'
 import { Container, CONTAINER_MAX } from '../../../../admin-ui/components/Container'
 import { ErrorDetailsDialog } from '../../../../admin-ui/components/Errors'
+import { serializeActionData } from '../../../../admin-ui/utils/actionData'
 import type { ActionMeta, ListMeta } from '../../../../types'
 
 export function ItemPageHeader({
@@ -150,13 +151,30 @@ function ItemActions({
 
     const { messages: m } = action
     try {
-      const data = await apolloClient.mutate({
-        mutation: gql`mutation ${action.graphql.names.one}($id: ID!) {
+      const dataForAction =
+        value && initialValue ? serializeActionData(list, action, value, initialValue) : {}
+      const mutation = (
+        action.graphql.fields.length && action.graphql.names.data
+          ? gql`mutation ${action.graphql.names.one}($id: ID!, $data: ${action.graphql.names.data}!) {
+            result: ${action.graphql.names.one}(where: { id: $id }, data: $data) {
+              id
+            }
+          }`
+          : gql`mutation ${action.graphql.names.one}($id: ID!) {
             result: ${action.graphql.names.one}(where: { id: $id }) {
               id
             }
-          }` as TypedDocumentNode<{ result: { id: string } }, { id: string }>,
-        variables: { id: item.id as string },
+          }`
+      ) as TypedDocumentNode<
+        { result: { id: string } },
+        { id: string; data?: Record<string, unknown> }
+      >
+      const data = await apolloClient.mutate({
+        mutation,
+        variables:
+          action.graphql.fields.length && action.graphql.names.data
+            ? { id: item.id as string, data: dataForAction }
+            : { id: item.id as string },
       })
 
       if (!action.itemView.hideToast) {

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx

@@ -41,6 +41,7 @@ import { EmptyState } from '../../../../admin-ui/components/EmptyState'
 import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
 import { PageContainer } from '../../../../admin-ui/components/PageContainer'
 import { useList } from '../../../../admin-ui/context'
+import { serializeActionData } from '../../../../admin-ui/utils/actionData'
 import { useSearchFilter } from '../../../../fields/types/relationship/views/useFilter'
 import type { ActionMeta, FieldMeta, JSONValue, ListMeta } from '../../../../types'
 import {
@@ -343,10 +344,14 @@ function ListPage({ listKey }: ListPageProps) {
     () => columns.map(fieldKey => list.fields[fieldKey]).filter(Boolean),
     [columns, list.fields]
   )
+
   const queriedFields = useMemo(
     () => [
       ...new Set([
         ...shownFields,
+        ...list.actions
+          .filter(action => action.listView.actionMode === 'enabled')
+          .flatMap(action => action.graphql.fields),
         ...getQueriedFieldKeysForActions(columns, list.actions, 'listView')
           .map(fieldKey => list.fields[fieldKey])
           .filter(Boolean),
@@ -397,7 +402,7 @@ function ListPage({ listKey }: ListPageProps) {
           count: ${list.graphql.names.listQueryCountName}(where: $where)
         }
       `
-    }, [list, shownFields]),
+    }, [list, queriedFields]),
     {
       fetchPolicy: 'cache-and-network',
       errorPolicy: 'all',
@@ -462,6 +467,7 @@ function ListPage({ listKey }: ListPageProps) {
           label: 'Delete',
           icon: 'trash2Icon',
           graphql: {
+            fields: [],
             names: {
               one: list.graphql.names.deleteMutationName,
               many: list.graphql.names.deleteManyMutationName,
@@ -703,6 +709,7 @@ function ListPage({ listKey }: ListPageProps) {
               return (
                 <ActionItemsDialog
                   itemIds={selectedItemIds}
+                  items={data?.items ?? []}
                   action={action}
                   list={list}
                   onSuccess={remaining => {
@@ -830,27 +837,47 @@ type ActionErrorResult = {
 function ActionItemsDialog({
   list,
   itemIds,
+  items,
   onSuccess,
   onErrors,
   action,
 }: {
   list: ListMeta
   itemIds: string[]
+  items: Record<string, unknown>[]
   onSuccess: (remaining: Set<string>) => void
   onErrors: (result: ActionErrorResult) => void
   action: ActionMeta
 }) {
-  const [actionOnItems] = useMutation<{ results?: ({ id: string } | null)[] }>(
-    gql`mutation($where: [${list.graphql.names.whereUniqueInputName}!]!) {
+  const actionMutation =
+    action.key === 'delete'
+      ? gql`mutation($where: [${list.graphql.names.whereUniqueInputName}!]!) {
       results: ${action.graphql.names.many}(where: $where) {
         id
       }
-    }`,
-    {
-      variables: { where: itemIds.map(id => ({ id })) },
-      errorPolicy: 'all',
-    }
-  )
+    }`
+      : gql`mutation($data: [${action.graphql.names.one[0].toUpperCase()}${action.graphql.names.one.slice(1)}Args!]!) {
+      results: ${action.graphql.names.many}(data: $data) {
+        id
+      }
+    }`
+  const [actionOnItems] = useMutation<{ results?: ({ id: string } | null)[] }>(actionMutation, {
+    variables:
+      action.key === 'delete'
+        ? { where: itemIds.map(id => ({ id })) }
+        : {
+            data: itemIds.flatMap(id => {
+              const row = items.find(item => String(item.id) === id)
+              if (!row) {
+                return []
+              }
+              const deserialized = deserializeItemToValue(list.fields, row)
+              const data = serializeActionData(list, action, deserialized, deserialized)
+              return Object.keys(data).length ? { where: { id }, data } : { where: { id } }
+            }),
+          },
+    errorPolicy: 'all',
+  })
   const { messages: m } = action
 
   async function onTryAction() {

packages/core/src/admin-ui/admin-meta-graphql.ts

@@ -69,9 +69,11 @@ export const adminMetaQuery = gql`
               successMany
             }
             graphql {
+              fields
               names {
                 one
                 many
+                data
               }
             }
             itemView {

packages/core/src/admin-ui/context.tsx

@@ -264,11 +264,22 @@ export function useListItem(
 > {
   const list = useList(listKey)
   const query = useMemo(() => {
-    const selectedFields = Object.values(list.fields)
-      .filter(field => {
-        if (field.key === 'id') return true
-        return field.itemView.fieldMode !== 'hidden'
-      })
+    const selectedFieldKeys = new Set<string>(
+      Object.values(list.fields)
+        .filter(field => {
+          if (field.key === 'id') return true
+          return field.itemView.fieldMode !== 'hidden'
+        })
+        .map(field => field.key)
+    )
+    for (const action of list.actions) {
+      for (const fieldKey of action.graphql.fields) {
+        selectedFieldKeys.add(fieldKey)
+      }
+    }
+    const selectedFields = [...selectedFieldKeys]
+      .map(fieldKey => list.fields[fieldKey])
+      .filter(Boolean)
       .map(field => field.controller.graphqlSelection)
       .join('\n')
 

packages/core/src/admin-ui/utils/actionData.ts

@@ -0,0 +1,15 @@
+import type { ListMeta, ActionMeta } from '../../types'
+import { pick } from './pick'
+import { serializeValueToOperationItem } from './utils'
+
+export function serializeActionData(
+  list: ListMeta,
+  action: ActionMeta,
+  value: Record<string, unknown>,
+  initialValue: Record<string, unknown>
+): Record<string, unknown> {
+  const fields = pick(list.fields, action.graphql.fields)
+  const pickedInitialValue = pick(initialValue, action.graphql.fields)
+  const pickedValue = pick(value, action.graphql.fields)
+  return serializeValueToOperationItem('update', fields, pickedValue, pickedInitialValue)
+}

packages/core/src/admin-ui/utils/pick.ts

@@ -0,0 +1,12 @@
+export function pick<T extends Record<string, unknown>, K extends keyof T>(
+  value: T,
+  keys: readonly K[]
+): Pick<T, K> {
+  const result: Partial<Pick<T, K>> = {}
+  for (const key of keys) {
+    if (Object.prototype.hasOwnProperty.call(value, key)) {
+      result[key] = value[key]
+    }
+  }
+  return result as Pick<T, K>
+}

packages/core/src/index.ts

@@ -1,4 +1,4 @@
-export { list, config, group } from './schema'
+export { list, config, group, action } from './schema'
 export type { ListConfig, BaseFields } from './types'
 // this re-exports `g` and `graphql`
 // note the usage of export * over explicitly listing the exports

packages/core/src/lib/admin-meta-graphql.ts

@@ -154,13 +154,17 @@ const KeystoneAdminUIActionMeta = g.object<ActionMetaSource>()({
       type: g.object<ActionMetaSource['graphql']>()({
         name: 'KeystoneAdminUIActionMetaGraphQL',
         fields: {
+          fields: g.field({
+            type: g.nonNull(g.list(g.nonNull(g.String))),
+          }),
           names: g.field({
             type: g.nonNull(
               g.object<ActionMetaSource['graphql']['names']>()({
                 name: 'KeystoneAdminUIActionMetaGraphQLNames',
                 fields: {
                   one: g.field({ type: g.nonNull(g.String) }),
                   many: g.field({ type: g.String }),
+                  data: g.field({ type: g.String }),
                 },
               })
             ),