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',
           },
-        },
+        }),
       },
     }),
   },

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

@@ -26,9 +26,11 @@ function CreateItemPage({ listKey }: { listKey: string }) {
         <ItemPageHeader
           list={list}
           actions={[]}
+          value={null}
           label="Create"
           title={`Create ${list.singular}`}
           item={null}
+          initialValue={null}
           onAction={null}
         />
       }

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

@@ -14,19 +14,24 @@ 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({
   list,
   actions,
   item,
+  value,
+  initialValue,
   label,
   title = label,
   onAction,
 }: {
   list: ListMeta
   actions: ActionMeta[]
   item: Record<string, unknown> | null
+  value: Record<string, unknown> | null
+  initialValue: Record<string, unknown> | null
   label: string
   title: string
   onAction: ((action: ActionMeta, resultId: string | null) => void) | null
@@ -67,7 +72,14 @@ export function ItemPageHeader({
       )}
 
       {item && onAction && actions.length > 0 && (
-        <ItemActions list={list} item={item} actions={actions} onAction={onAction} />
+        <ItemActions
+          list={list}
+          item={item}
+          value={value}
+          initialValue={initialValue}
+          actions={actions}
+          onAction={onAction}
+        />
       )}
     </Grid>
   )
@@ -96,11 +108,15 @@ type ActionError = {
 function ItemActions({
   list,
   item,
+  initialValue,
+  value,
   actions,
   onAction,
 }: {
   list: ListMeta
   item: Record<string, unknown>
+  value: Record<string, unknown> | null
+  initialValue: Record<string, unknown> | null
   actions: ActionMeta[]
   onAction: (action: ActionMeta, resultId: string | null) => void
 }) {
@@ -135,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/ItemPage/index.tsx

@@ -162,6 +162,8 @@ function ResetButton(props: { onReset: () => void; hasChanges?: boolean }) {
 function ItemForm({
   listKey,
   initialValue,
+  value,
+  onChange,
   itemLabel,
   onSaveSuccess,
   fieldModes,
@@ -170,6 +172,8 @@ function ItemForm({
 }: {
   listKey: string
   initialValue: Record<string, unknown>
+  value: Record<string, unknown>
+  onChange: (value: Record<string, unknown>) => void
   itemLabel: string
   onSaveSuccess: () => void
   fieldModes: Record<string, ConditionalFilter<'edit' | 'read' | 'hidden', BaseListTypeInfo>>
@@ -188,11 +192,9 @@ function ItemForm({
     { errorPolicy: 'all' }
   )
 
-  const [value, setValue] = useState(() => initialValue)
   function resetValueState() {
-    setValue(() => initialValue)
+    onChange(initialValue)
   }
-  useEffect(() => resetValueState(), [initialValue])
 
   const invalidFields = useInvalidFields(list.fields, value, isRequireds)
   const [forceValidation, setForceValidation] = useState(false)
@@ -257,7 +259,7 @@ function ItemForm({
             invalidFields={invalidFields}
             fieldModes={fieldModes}
             fieldPositions={fieldPositions}
-            onChange={useCallback(value => setValue(value), [setValue])}
+            onChange={onChange}
             value={value}
             isRequireds={isRequireds}
           />
@@ -271,7 +273,7 @@ function ItemForm({
             groups={list.groups}
             forceValidation={forceValidation}
             invalidFields={invalidFields}
-            onChange={useCallback(value => setValue(value), [setValue])}
+            onChange={onChange}
             value={value}
             fieldModes={fieldModes}
             fieldPositions={fieldPositions}
@@ -321,6 +323,10 @@ function ItemPage({ listKey }: ItemPageProps) {
     if (!item) return null
     return deserializeItemToValue(list.fields, item)
   }, [list.fields, data?.item])
+  const [value, setValue] = useState<Record<string, unknown> | null>(null)
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
 
   const { actionsInContext, fieldModes, fieldPositions, isRequireds } = useMemo(() => {
     const actionModes = Object.fromEntries(
@@ -394,6 +400,8 @@ function ItemPage({ listKey }: ItemPageProps) {
           label={typeof pageLabel !== 'string' ? 'Loading...' : pageLabel}
           title={pageTitle}
           item={item ?? null}
+          value={value ?? initialValue}
+          initialValue={initialValue}
           onAction={onAction}
         />
       }
@@ -429,14 +437,16 @@ function ItemPage({ listKey }: ItemPageProps) {
                 </ItemNotFound>
               ))}
           </Box>
-          {initialValue && (
+          {initialValue && value && (
             <ItemForm
               fieldModes={fieldModes}
               fieldPositions={fieldPositions}
               isRequireds={isRequireds}
               listKey={listKey}
               itemLabel={itemLabel}
               initialValue={initialValue}
+              value={value}
+              onChange={setValue}
               onSaveSuccess={refetch}
             />
           )}

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

@@ -41,8 +41,10 @@ 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 { deserializeItemToValue } from '../../../../admin-ui/utils'
 import { FilterAdd } from './FilterAdd'
 import { PaginationControls, snapValueToClosest } from './PaginationControls'
 import { Tag } from './Tag'
@@ -332,7 +334,23 @@ function ListPage({ listKey }: ListPageProps) {
     label: f.label,
     isDisabled: f.listView.fieldMode === 'read',
   }))
-  const shownFields = columns.map(fieldKey => list.fields[fieldKey]).filter(Boolean)
+  const shownFields = useMemo(
+    () => columns.map(fieldKey => list.fields[fieldKey]).filter(Boolean),
+    [columns, list.fields]
+  )
+  const queriedFields = useMemo(() => {
+    return [
+      ...new Set([
+        ...columns,
+        ...list.actions
+          .filter(action => action.listView.actionMode === 'enabled')
+          .flatMap(action => action.graphql.fields),
+      ]),
+    ]
+      .map(fieldKey => list.fields[fieldKey])
+      .filter(Boolean)
+  }, [columns, list])
+
   const where = useMemo(
     () =>
       filters.map(filter => {
@@ -350,7 +368,7 @@ function ListPage({ listKey }: ListPageProps) {
       items: Record<string, unknown>[] | null
       count: number | null
     }> => {
-      const selectedGqlFields = shownFields
+      const selectedGqlFields = queriedFields
         .filter(field => field.key !== 'id') // id is always included
         .map(field => field.controller.graphqlSelection)
         .join('\n')
@@ -375,7 +393,7 @@ function ListPage({ listKey }: ListPageProps) {
           count: ${list.graphql.names.listQueryCountName}(where: $where)
         }
       `
-    }, [list, shownFields]),
+    }, [list, queriedFields]),
     {
       fetchPolicy: 'cache-and-network',
       errorPolicy: 'all',
@@ -431,16 +449,16 @@ function ListPage({ listKey }: ListPageProps) {
     setSort(defaultSort)
   }
 
-  const actions = list.actions.filter(action => action.listView.actionMode === 'enabled')
   const actionsForList = list.hideDelete
-    ? actions
+    ? list.actions
     : [
-        ...actions,
+        ...list.actions,
         {
           key: 'delete',
           label: 'Delete',
           icon: 'trash2Icon',
           graphql: {
+            fields: [],
             names: {
               one: list.graphql.names.deleteMutationName,
               many: list.graphql.names.deleteManyMutationName,
@@ -661,6 +679,7 @@ function ListPage({ listKey }: ListPageProps) {
               return (
                 <ActionItemsDialog
                   itemIds={selectedItemIds}
+                  items={data?.items ?? []}
                   action={action}
                   list={list}
                   onSuccess={remaining => {
@@ -788,27 +807,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 {