@nixxie-cms/core 1.0.0

package/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/index.tsx

@@ -0,0 +1,483 @@
+import router, { useRouter } from 'next/router'
+import {
+  type FormEvent,
+  Fragment,
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { Button } from '@keystar/ui/button'
+import { AlertDialog, DialogContainer, DialogTrigger } from '@keystar/ui/dialog'
+import { Icon } from '@keystar/ui/icon'
+import { fileWarningIcon } from '@keystar/ui/icon/icons/fileWarningIcon'
+import { Box, VStack } from '@keystar/ui/layout'
+import { ProgressCircle } from '@keystar/ui/progress'
+import { SlotProvider } from '@keystar/ui/slots'
+import { toastQueue } from '@keystar/ui/toast'
+import { Heading, Text } from '@keystar/ui/typography'
+
+import { CombinedGraphQLErrors, gql, useMutation } from '../../../../admin-ui/apollo'
+import { CreateButtonLink } from '../../../../admin-ui/components/CreateButtonLink'
+import { ErrorDetailsDialog } from '../../../../admin-ui/components/Errors'
+import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
+import { useList, useListItem } from '../../../../admin-ui/context'
+import {
+  deserializeItemToValue,
+  Fields,
+  getConditionalFilterFieldKeys,
+  isActionAvailable,
+  resolveActionMode,
+  serializeItemForConditionalFilters,
+  serializeValueToOperationItem,
+  useHasChanges,
+  useInvalidFields,
+} from '../../../../admin-ui/utils'
+import { pick } from '../../../../admin-ui/utils/pick'
+import type {
+  ActionMeta,
+  BaseListTypeInfo,
+  ConditionalFilter,
+  ConditionalFilterCase,
+  ListMeta,
+} from '../../../../types'
+import { BaseToolbar, ColumnLayout, ItemPageHeader, StickySidebar } from './common'
+
+type ItemPageProps = {
+  listKey: string
+}
+
+function useEventCallback<Func extends (...args: any[]) => unknown>(callback: Func): Func {
+  const callbackRef = useRef(callback)
+  const cb = useCallback((...args: any[]) => {
+    return callbackRef.current(...args)
+  }, [])
+  useEffect(() => {
+    callbackRef.current = callback
+  })
+  return cb as any
+}
+
+function DeleteButton({
+  list,
+  itemId,
+  itemLabel,
+}: {
+  list: ListMeta
+  itemId: string
+  itemLabel: string
+}) {
+  const [errorDialogValue, setErrorDialogValue] = useState<Error | null>(null)
+  const router = useRouter()
+  const [deleteItem] = useMutation(
+    gql`mutation ($id: ID!) {
+      ${list.graphql.names.deleteMutationName}(where: { id: $id }) {
+        id
+      }
+    }`,
+    { variables: { id: itemId } }
+  )
+
+  return (
+    <Fragment>
+      <DialogTrigger>
+        <Button tone="critical">Delete</Button>
+        <AlertDialog
+          tone="critical"
+          title="Delete item"
+          cancelLabel="Cancel"
+          primaryActionLabel="Yes, delete"
+          onPrimaryAction={async () => {
+            try {
+              await deleteItem()
+            } catch (err: any) {
+              toastQueue.critical('Unable to delete item', {
+                actionLabel: 'Details',
+                onAction: () => setErrorDialogValue(err),
+                shouldCloseOnAction: true,
+              })
+              return
+            }
+
+            toastQueue.neutral(`${list.singular} deleted.`, {
+              timeout: 5000,
+            })
+            router.push(list.isSingleton ? '/' : `/${list.path}`)
+          }}
+        >
+          <Text>
+            Are you sure you want to delete <strong style={{ fontWeight: 600 }}>{itemLabel}</strong>
+            ? This action cannot be undone.
+          </Text>
+        </AlertDialog>
+      </DialogTrigger>
+
+      <DialogContainer onDismiss={() => setErrorDialogValue(null)} isDismissable>
+        {errorDialogValue && (
+          <ErrorDetailsDialog title="Unable to delete item" error={errorDialogValue} />
+        )}
+      </DialogContainer>
+    </Fragment>
+  )
+}
+
+function ItemNotFound(props: PropsWithChildren) {
+  return (
+    <VStack
+      alignItems="center"
+      backgroundColor="surface"
+      borderRadius="medium"
+      gap="large"
+      justifyContent="center"
+      minHeight="scale.3000"
+      padding="xlarge"
+    >
+      <Icon src={fileWarningIcon} color="neutralEmphasis" size="large" />
+      <Heading align="center">Not found</Heading>
+      <SlotProvider slots={{ text: { align: 'center', maxWidth: 'scale.5000' } }}>
+        {props.children}
+      </SlotProvider>
+    </VStack>
+  )
+}
+
+function ResetButton(props: { onReset: () => void; hasChanges?: boolean }) {
+  return (
+    <DialogTrigger>
+      <Button tone="accent" isDisabled={!props.hasChanges}>
+        Reset
+      </Button>
+      <AlertDialog
+        title="Reset changes"
+        cancelLabel="Cancel"
+        primaryActionLabel="Yes, reset"
+        autoFocusButton="primary"
+        onPrimaryAction={props.onReset}
+      >
+        Are you sure? Any unsaved changes will be lost and cannot be recovered.
+      </AlertDialog>
+    </DialogTrigger>
+  )
+}
+
+function ItemForm({
+  listKey,
+  initialValue,
+  value,
+  onChange,
+  itemLabel,
+  onSaveSuccess,
+  fieldModes,
+  fieldPositions,
+  isRequireds,
+}: {
+  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', 'read' | 'hidden', BaseListTypeInfo>
+  >
+  isRequireds: Record<string, ConditionalFilterCase<BaseListTypeInfo>>
+  fieldPositions: Record<string, 'form' | 'sidebar'>
+}) {
+  const list = useList(listKey)
+  const itemId = initialValue.id as string
+  const [updateError, setUpdateError] = useState<Error | null>(null)
+  const [update, { loading, error }] = useMutation(
+    gql`mutation ($id: ID!, $data: ${list.graphql.names.updateInputName}!) {
+      item: ${list.graphql.names.updateMutationName}(where: { id: $id }, data: $data) {
+        id
+      }
+    }`,
+    { errorPolicy: 'all' }
+  )
+
+  function resetValueState() {
+    onChange(initialValue)
+  }
+
+  const invalidFields = useInvalidFields(list.fields, value, isRequireds)
+  const [forceValidation, setForceValidation] = useState(false)
+  const onSave = useEventCallback(async (e: FormEvent<HTMLFormElement>) => {
+    if (e.target !== e.currentTarget) return
+    e.preventDefault()
+    const newForceValidation = invalidFields.size !== 0
+    setForceValidation(newForceValidation)
+    if (newForceValidation) return
+
+    const { error: _error } = await update({
+      variables: {
+        id: itemId,
+        data: serializeValueToOperationItem('update', list.fields, value, initialValue),
+      },
+    })
+
+    const error = CombinedGraphQLErrors.is(_error)
+      ? _error.errors.find(x => x.path === undefined || x.path?.length === 1)
+      : _error
+    if (error) {
+      toastQueue.critical('Unable to save item', {
+        actionLabel: 'Details',
+        onAction: () => setUpdateError(new Error(error.message)),
+        shouldCloseOnAction: true,
+      })
+      return
+    }
+
+    toastQueue.positive(`Saved changes to ${list.singular.toLocaleLowerCase()}.`, {
+      timeout: 5000,
+    })
+
+    onSaveSuccess()
+  })
+
+  const hasChangedFields = useHasChanges('update', list.fields, value, initialValue)
+
+  return (
+    <Fragment>
+      <form onSubmit={onSave} style={{ display: 'contents' }}>
+        {/*
+          Workaround for react-aria "bug" where pressing enter in a form field
+          moves focus to the submit button.
+          See: https://github.com/adobe/react-spectrum/issues/5940
+        */}
+        <button type="submit" style={{ display: 'none' }} />
+        <VStack gap="large" gridArea="main" marginTop="xlarge" minWidth={0}>
+          <GraphQLErrorNotice
+            errors={
+              CombinedGraphQLErrors.is(error)
+                ? error.errors.filter(x => x.path === undefined || x.path?.length === 1)
+                : [error]
+            }
+          />
+          <Fields
+            view="itemView"
+            position="form"
+            fields={list.fields}
+            groups={list.groups}
+            forceValidation={forceValidation}
+            invalidFields={invalidFields}
+            fieldModes={fieldModes}
+            fieldPositions={fieldPositions}
+            onChange={onChange}
+            value={value}
+            isRequireds={isRequireds}
+          />
+        </VStack>
+
+        <StickySidebar>
+          <Fields
+            view="itemView"
+            position="sidebar"
+            fields={list.fields}
+            groups={list.groups}
+            forceValidation={forceValidation}
+            invalidFields={invalidFields}
+            onChange={onChange}
+            value={value}
+            fieldModes={fieldModes}
+            fieldPositions={fieldPositions}
+            isRequireds={isRequireds}
+          />
+        </StickySidebar>
+
+        <BaseToolbar>
+          <Button
+            isDisabled={!hasChangedFields}
+            isPending={loading}
+            prominence="high"
+            type="submit"
+          >
+            Save
+          </Button>
+          <ResetButton hasChanges={hasChangedFields} onReset={resetValueState} />
+          <Box flex />
+          {!list.hideDelete ? (
+            <DeleteButton list={list} itemId={itemId} itemLabel={itemLabel} />
+          ) : null}
+        </BaseToolbar>
+      </form>
+
+      <DialogContainer onDismiss={() => setUpdateError(null)} isDismissable>
+        {updateError && <ErrorDetailsDialog title="Unable to save item" error={updateError} />}
+      </DialogContainer>
+    </Fragment>
+  )
+}
+
+export const getItemPage = (props: ItemPageProps) => () => <ItemPage {...props} />
+
+function ItemPage({ listKey }: ItemPageProps) {
+  const list = useList(listKey)
+  const id_ = useRouter().query.id
+  const [itemId] = Array.isArray(id_) ? id_ : [id_]
+  const { data, error, loading, refetch } = useListItem(listKey, itemId ?? null)
+  const item = data?.item
+  const itemLabel_ = item?.[list.labelField] ?? item?.id
+  const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : (itemId ?? '')
+
+  const pageLoading = loading || itemId === undefined
+  const pageLabel = itemLabel || itemId
+  const pageTitle = list.isSingleton || typeof pageLabel !== 'string' ? list.label : pageLabel
+  const initialValue = useMemo(() => {
+    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 { actionModes, fieldModes, fieldPositions, isRequireds } = useMemo(() => {
+    type ActionMode = (typeof list.actions)[number]['itemView']['actionMode']
+    type ListField = (typeof list.fields)[keyof typeof list.fields]
+    type FieldMode = ListField['itemView']['fieldMode']
+    type FieldPosition = ListField['itemView']['fieldPosition']
+    type IsRequired = ListField['itemView']['isRequired']
+
+    const actionModes: Record<string, ActionMode> = {}
+    for (const action of list.actions) {
+      actionModes[action.key] = action.itemView.actionMode
+    }
+    const fieldModes: Record<string, FieldMode> = {}
+    const fieldPositions: Record<string, FieldPosition> = {}
+    const isRequireds: Record<string, IsRequired> = {}
+    for (const [fieldKey, field] of Object.entries(list.fields)) {
+      fieldModes[fieldKey] = field.itemView.fieldMode
+      fieldPositions[fieldKey] = field.itemView.fieldPosition
+      isRequireds[fieldKey] = field.itemView.isRequired
+    }
+    for (const field of data?.nixxie?.adminMeta?.list?.fields ?? []) {
+      if (
+        !field?.itemView ||
+        !field.key ||
+        !field.itemView.fieldMode ||
+        !field.itemView.fieldPosition ||
+        field.itemView.isRequired == null
+      )
+        continue
+      fieldModes[field.key] = field.itemView.fieldMode
+      fieldPositions[field.key] = field.itemView.fieldPosition
+      isRequireds[field.key] = field.itemView.isRequired
+    }
+    for (const action of data?.nixxie?.adminMeta?.list?.actions ?? []) {
+      if (!action?.itemView?.actionMode || !action.key) continue
+      actionModes[action.key] = action.itemView.actionMode
+    }
+
+    return {
+      actionModes,
+      fieldModes,
+      fieldPositions,
+      isRequireds,
+    }
+  }, [
+    data?.nixxie?.adminMeta?.list?.actions,
+    data?.nixxie?.adminMeta?.list?.fields,
+    list.actions,
+    list.fields,
+  ])
+
+  const actionsInContext = useMemo(() => {
+    if (!value) return []
+    return list.actions
+      .map(action => {
+        const fieldKeys = getConditionalFilterFieldKeys(actionModes[action.key])
+        const fields = pick(list.fields, fieldKeys)
+        const serializedValue = serializeItemForConditionalFilters(fields, value)
+        return {
+          ...action,
+          itemView: {
+            ...action.itemView,
+            actionMode: resolveActionMode(actionModes[action.key], serializedValue),
+          },
+        }
+      })
+      .filter(action => isActionAvailable(action, action.itemView))
+  }, [actionModes, list.actions, list.fields, value])
+
+  function onAction(action: ActionMeta, resultId: string | null) {
+    const { navigation } = action.itemView
+
+    if ((navigation === 'follow' && resultId === itemId) || navigation === 'refetch') {
+      refetch()
+    } else if (navigation === 'follow' && resultId) {
+      router.push(`/${list.path}/${resultId}`)
+    } else {
+      router.push(list.isSingleton ? '/' : `/${list.path}`)
+    }
+  }
+
+  return (
+    <PageContainer
+      title={pageTitle}
+      header={
+        <ItemPageHeader
+          list={list}
+          actions={actionsInContext}
+          label={typeof pageLabel !== 'string' ? 'Loading...' : pageLabel}
+          title={pageTitle}
+          item={item ?? null}
+          value={value ?? initialValue}
+          initialValue={initialValue}
+          onAction={onAction}
+        />
+      }
+    >
+      {pageLoading ? (
+        <VStack height="100%" alignItems="center" justifyContent="center">
+          <ProgressCircle aria-label="loading item data" size="large" isIndeterminate />
+        </VStack>
+      ) : (
+        <ColumnLayout>
+          <Box marginY="xlarge">
+            <GraphQLErrorNotice errors={[error]} />
+            {item == null &&
+              (list.isSingleton ? (
+                itemId === '1' ? (
+                  <ItemNotFound>
+                    <Text>“{list.label}” doesn’t exist, or you don’t have access to it.</Text>
+                    {!list.hideCreate && <CreateButtonLink list={list} />}
+                  </ItemNotFound>
+                ) : (
+                  <ItemNotFound>
+                    <Text>
+                      An item with ID <strong>“{itemId}”</strong> does not exist.
+                    </Text>
+                  </ItemNotFound>
+                )
+              ) : (
+                <ItemNotFound>
+                  <Text>
+                    The item with ID <strong>“{itemId}”</strong> doesn’t exist, or you don’t have
+                    access to it.
+                  </Text>
+                </ItemNotFound>
+              ))}
+          </Box>
+          {initialValue && value && (
+            <ItemForm
+              fieldModes={fieldModes}
+              fieldPositions={fieldPositions}
+              isRequireds={isRequireds}
+              listKey={listKey}
+              itemLabel={itemLabel}
+              initialValue={initialValue}
+              value={value}
+              onChange={setValue}
+              onSaveSuccess={refetch}
+            />
+          )}
+        </ColumnLayout>
+      )}
+    </PageContainer>
+  )
+}

package/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterAdd.tsx

@@ -0,0 +1,221 @@
+import { type FormEvent, Fragment, useId, useMemo, useRef, useState } from 'react'
+
+import { ActionButton, Button, ButtonGroup } from '@keystar/ui/button'
+import { Dialog, DialogTrigger } from '@keystar/ui/dialog'
+import { Icon } from '@keystar/ui/icon'
+import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon'
+import { Grid } from '@keystar/ui/layout'
+import { Item, Menu, MenuTrigger } from '@keystar/ui/menu'
+import { Picker } from '@keystar/ui/picker'
+import { Content } from '@keystar/ui/slots'
+import { Heading, Text } from '@keystar/ui/typography'
+
+import type { Filter } from '.'
+import { useList } from '../../../../admin-ui/context'
+import type { FieldMeta, JSONValue } from '../../../../types'
+
+type State =
+  | { kind: 'selecting-field' }
+  | { kind: 'filter-value'; fieldPath: string; filterType: string; filterValue: JSONValue }
+
+export function FilterAdd({
+  listKey,
+  onAdd,
+  isDisabled,
+}: {
+  listKey: string
+  onAdd: (filter: Filter) => void
+  isDisabled?: boolean
+}) {
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const [state, setState] = useState<State>({ kind: 'selecting-field' })
+  const [forceValidation, setForceValidation] = useState(false)
+  const formId = useId()
+
+  const { fieldsWithFilters, filtersByFieldThenType, list } = useFilterFields(listKey)
+  const resetState = () => {
+    setState({ kind: 'selecting-field' })
+    setForceValidation(false)
+    // This is a bit of a hack to ensure the trigger button is focused after the
+    // dialog closes, since we're forking the render
+    setTimeout(() => {
+      triggerRef?.current?.focus()
+    }, 200)
+  }
+  const onSubmit = (event: FormEvent) => {
+    if (event.target !== event.currentTarget) return
+    event.preventDefault()
+    setForceValidation(true)
+
+    if (state.kind !== 'filter-value') return
+
+    // TODO: Special "empty" types need to be documented somewhere. Filters that
+    // have no editable value, basically `null` or `!null`. Which offers:
+    // * better DX — we can avoid weird nullable types and UIs that don't make sense
+    // * better UX — users don't have to jump through mental hoops, like "is not exactly" + submit empty field
+    if (
+      state.filterType !== 'empty' &&
+      state.filterType !== 'not_empty' &&
+      state.filterValue == null
+    ) {
+      return
+    }
+
+    onAdd({
+      field: state.fieldPath,
+      type: state.filterType,
+      value: state.filterValue,
+    })
+    resetState()
+  }
+
+  if (state.kind === 'filter-value') {
+    const { Filter } = fieldsWithFilters[state.fieldPath].controller.filter
+    const fieldLabel = list.fields[state.fieldPath].label
+    const filterTypes = filtersByFieldThenType[state.fieldPath]
+    const typeLabel = filterTypes[state.filterType]
+    return (
+      <DialogTrigger
+        type="popover"
+        mobileType="tray"
+        defaultOpen
+        onOpenChange={isOpen => !isOpen && resetState()}
+      >
+        <ActionButton>
+          <Text>Filter</Text>
+          <Icon src={chevronDownIcon} />
+        </ActionButton>
+        <Dialog>
+          <Heading>Filter by {fieldLabel.toLocaleLowerCase()}</Heading>
+          <Content>
+            <form onSubmit={onSubmit} id={formId}>
+              {/*
+                Workaround for react-aria "bug" where pressing enter in a form field
+                moves focus to the submit button.
+                See: https://github.com/adobe/react-spectrum/issues/5940
+              */}
+              <button type="submit" form={formId} style={{ display: 'none' }} />
+              <Grid gap="large" rows="auto minmax(0, 1fr)" height="100%">
+                <Picker
+                  width="100%"
+                  aria-label="filter type"
+                  isRequired
+                  items={Object.keys(filterTypes).map(filterType => ({
+                    label: filterTypes[filterType],
+                    value: filterType,
+                  }))}
+                  selectedKey={state.filterType}
+                  onSelectionChange={key => {
+                    if (key) {
+                      setState({
+                        kind: 'filter-value',
+                        fieldPath: state.fieldPath,
+                        filterValue:
+                          fieldsWithFilters[state.fieldPath].controller.filter.types[key]
+                            .initialValue,
+                        filterType: key as string,
+                      })
+                    }
+                  }}
+                >
+                  {item => <Item key={item.value}>{item.label}</Item>}
+                </Picker>
+
+                {/*
+                  TODO: support validation, default to field controller's validate function?
+                  validate?: (value: JSONValue) => string | undefined
+                */}
+                <Filter
+                  autoFocus
+                  context="add"
+                  forceValidation={forceValidation}
+                  typeLabel={typeLabel}
+                  type={state.filterType}
+                  value={state.filterValue}
+                  onChange={value => {
+                    setState(state => ({
+                      ...state,
+                      filterValue: value,
+                    }))
+                  }}
+                />
+              </Grid>
+            </form>
+          </Content>
+          <ButtonGroup>
+            <Button onPress={resetState}>Cancel</Button>
+            <Button prominence="high" type="submit" form={formId}>
+              Add
+            </Button>
+          </ButtonGroup>
+        </Dialog>
+      </DialogTrigger>
+    )
+  }
+
+  return (
+    <Fragment>
+      <MenuTrigger>
+        <ActionButton ref={triggerRef} isDisabled={isDisabled}>
+          <Text>Filter</Text>
+          <Icon src={chevronDownIcon} />
+        </ActionButton>
+        <Menu
+          items={Object.keys(filtersByFieldThenType).map(fieldPath => ({
+            label: fieldsWithFilters[fieldPath].label,
+            value: fieldPath,
+          }))}
+          onAction={fieldPath => {
+            const filterType = Object.keys(filtersByFieldThenType[fieldPath])[0]
+            setState({
+              kind: 'filter-value',
+              fieldPath: fieldPath as string,
+              filterType,
+              filterValue:
+                fieldsWithFilters[fieldPath].controller.filter.types[filterType].initialValue,
+            })
+          }}
+        >
+          {item => <Item key={item.value}>{item.label}</Item>}
+        </Menu>
+      </MenuTrigger>
+    </Fragment>
+  )
+}
+
+// TODO: broken if user uses the same filter twice
+function useFilterFields(listKey: string) {
+  const list = useList(listKey)
+  const fieldsWithFilters = useMemo(() => {
+    const fieldsWithFilters: Record<
+      string,
+      FieldMeta & { controller: { filter: NonNullable<FieldMeta['controller']['filter']> } }
+    > = {}
+    for (const fieldPath in list.fields) {
+      const field = list.fields[fieldPath]
+      if (field.isFilterable && field.controller.filter) {
+        fieldsWithFilters[fieldPath] = field as any
+      }
+    }
+    return fieldsWithFilters
+  }, [list.fields])
+
+  const filtersByFieldThenType = useMemo(() => {
+    const filtersByFieldThenType: Record<string, Record<string, string>> = {}
+    for (const fieldPath in fieldsWithFilters) {
+      const field = fieldsWithFilters[fieldPath]
+      const filters: Record<string, string> = {}
+      for (const filterType in field.controller.filter.types) {
+        filters[filterType] = field.controller.filter.types[filterType].label
+      }
+      filtersByFieldThenType[fieldPath] = filters
+    }
+    return filtersByFieldThenType
+  }, [fieldsWithFilters])
+
+  return {
+    fieldsWithFilters,
+    filtersByFieldThenType,
+    list,
+  }
+}