feat: bulk-operations (#2346)

Co-authored-by: PatrikKozak <patrik@trbl.design>

src/admin/components/elements/ColumnSelector/index.tsx

@@ -1,4 +1,4 @@
-import React, { useId } from 'react';
+import React, { useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Pill from '../Pill';
 import Plus from '../../icons/Plus';
@@ -49,6 +49,8 @@ const ColumnSelector: React.FC<Props> = (props) => {
           name,
         } = col;
 
+        if (col.accessor === '_select') return null;
+
         return (
           <Pill
             draggable

src/admin/components/elements/DeleteMany/index.scss

@@ -0,0 +1,17 @@
+@import '../../../scss/styles.scss';
+
+.delete-documents {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &__template {
+    z-index: 1;
+    position: relative;
+  }
+
+  .btn {
+    margin-right: $baseline;
+  }
+}

src/admin/components/elements/DeleteMany/index.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '../../utilities/Config';
+import Button from '../Button';
+import MinimalTemplate from '../../templates/Minimal';
+import { requests } from '../../../api';
+import { Props } from './types';
+import { SelectAllStatus, useSelection } from '../../views/collections/List/SelectionProvider';
+import { getTranslation } from '../../../../utilities/getTranslation';
+import Pill from '../Pill';
+import { useAuth } from '../../utilities/Auth';
+
+import './index.scss';
+
+const baseClass = 'delete-documents';
+
+const DeleteMany: React.FC<Props> = (props) => {
+  const {
+    resetParams,
+    collection: {
+      slug,
+      labels: {
+        plural,
+      },
+    } = {},
+  } = props;
+
+  const { permissions } = useAuth();
+  const { serverURL, routes: { api } } = useConfig();
+  const { toggleModal } = useModal();
+  const { selectAll, count, getQueryParams, toggleAll } = useSelection();
+  const { t, i18n } = useTranslation('general');
+  const [deleting, setDeleting] = useState(false);
+
+  const collectionPermissions = permissions?.collections?.[slug];
+  const hasDeletePermission = collectionPermissions?.delete?.permission;
+
+  const modalSlug = `delete-${slug}`;
+
+  const addDefaultError = useCallback(() => {
+    toast.error(t('error:unknown'));
+  }, [t]);
+
+  const handleDelete = useCallback(() => {
+    setDeleting(true);
+    requests.delete(`${serverURL}${api}/${slug}${getQueryParams()}`, {
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept-Language': i18n.language,
+      },
+    }).then(async (res) => {
+      try {
+        const json = await res.json();
+        toggleModal(modalSlug);
+        if (res.status < 400) {
+          toast.success(json.message || t('deletedSuccessfully'), { autoClose: 3000 });
+          toggleAll();
+          resetParams({ page: selectAll ? 1 : undefined });
+          return null;
+        }
+
+        if (json.errors) {
+          toast.error(json.message);
+        } else {
+          addDefaultError();
+        }
+        return false;
+      } catch (e) {
+        return addDefaultError();
+      }
+    });
+  }, [addDefaultError, api, getQueryParams, i18n.language, modalSlug, resetParams, selectAll, serverURL, slug, t, toggleAll, toggleModal]);
+
+  if (selectAll === SelectAllStatus.None || !hasDeletePermission) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <Pill
+        className={`${baseClass}__toggle`}
+        onClick={() => {
+          setDeleting(false);
+          toggleModal(modalSlug);
+        }}
+      >
+        {t('delete')}
+      </Pill>
+      <Modal
+        slug={modalSlug}
+        className={baseClass}
+      >
+        <MinimalTemplate className={`${baseClass}__template`}>
+          <h1>{t('confirmDeletion')}</h1>
+          <p>
+            {t('aboutToDeleteCount', { label: getTranslation(plural, i18n), count })}
+          </p>
+          <Button
+            id="confirm-cancel"
+            buttonStyle="secondary"
+            type="button"
+            onClick={deleting ? undefined : () => toggleModal(modalSlug)}
+          >
+            {t('cancel')}
+          </Button>
+          <Button
+            onClick={deleting ? undefined : handleDelete}
+            id="confirm-delete"
+          >
+            {deleting ? t('deleting') : t('confirm')}
+          </Button>
+        </MinimalTemplate>
+      </Modal>
+    </React.Fragment>
+  );
+};
+
+export default DeleteMany;

src/admin/components/elements/DeleteMany/types.ts

@@ -0,0 +1,8 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import type { Props as ListProps } from '../../views/collections/List/types';
+
+export type Props = {
+  collection: SanitizedCollectionConfig,
+  title?: string,
+  resetParams: ListProps['resetParams'],
+}

src/admin/components/elements/EditMany/index.scss

@@ -0,0 +1,190 @@
+@import '../../../scss/styles.scss';
+
+.edit-many {
+
+  &__toggle {
+    font-size: 1rem;
+    line-height: base(1);
+    display: inline-flex;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-s;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border: 0;
+    padding: 0 base(.25);
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      background: var(--theme-elevation-100);
+    }
+
+    &:active {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  &__form {
+    height: 100%;
+  }
+
+  &__main {
+    width: calc(100% - #{base(15)});
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  &__header {
+    display: flex;
+    margin-top: base(2.5);
+    margin-bottom: base(1);
+    width: 100%;
+
+    &__title {
+      margin: 0;
+      flex-grow: 1;
+    }
+
+    &__close {
+      border: 0;
+      background-color: transparent;
+      padding: 0;
+      cursor: pointer;
+      overflow: hidden;
+      width: base(1);
+      height: base(1);
+
+      svg {
+        width: base(2.75);
+        height: base(2.75);
+        position: relative;
+        left: base(-.825);
+        top: base(-.825);
+
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
+      }
+    }
+  }
+
+  &__edit {
+    padding-top: base(1);
+    padding-bottom: base(2);
+    flex-grow: 1;
+  }
+
+  &__sidebar-wrap {
+    position: fixed;
+    width: base(15);
+    height: 100%;
+    top: 0;
+    right: 0;
+    overflow: visible;
+    border-left: 1px solid var(--theme-elevation-100);
+  }
+
+  &__sidebar {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  &__sidebar-sticky-wrap {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  &__collection-actions,
+  &__meta,
+  &__sidebar-fields {
+    padding-left: base(1.5);
+  }
+
+  &__document-actions {
+    padding-right: $baseline;
+    position: sticky;
+    top: 0;
+    z-index: var(--z-nav);
+
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    @include mid-break {
+      @include blur-bg;
+    }
+  }
+
+  &__document-actions {
+    display: flex;
+    flex-wrap: wrap;
+    padding: base(1);
+    gap: base(.5);
+
+    .form-submit {
+      width: calc(50% - #{base(1)});
+
+      @include mid-break {
+        width: auto;
+        flex-grow: 1;
+      }
+
+      .btn {
+        width: 100%;
+        padding-left: base(.5);
+        padding-right: base(.5);
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  @include mid-break {
+    &__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    &__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+    }
+
+    &__form {
+      display: block;
+    }
+
+    &__edit {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &__document-actions {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      top: auto;
+      z-index: var(--z-nav);
+    }
+
+    &__document-actions,
+    &__sidebar-fields {
+      padding-left: var(--gutter-h);
+      padding-right: var(--gutter-h);
+    }
+  }
+}

src/admin/components/elements/EditMany/index.tsx

@@ -0,0 +1,204 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useModal } from '@faceless-ui/modal';
+import { useConfig } from '../../utilities/Config';
+import { Drawer, DrawerToggler } from '../Drawer';
+import { Props } from './types';
+import { SelectAllStatus, useSelection } from '../../views/collections/List/SelectionProvider';
+import { getTranslation } from '../../../../utilities/getTranslation';
+import { useAuth } from '../../utilities/Auth';
+import { FieldSelect } from '../FieldSelect';
+import FormSubmit from '../../forms/Submit';
+import Form from '../../forms/Form';
+import { useForm } from '../../forms/Form/context';
+import RenderFields from '../../forms/RenderFields';
+import { OperationContext } from '../../utilities/OperationProvider';
+import fieldTypes from '../../forms/field-types';
+import X from '../../icons/X';
+
+import './index.scss';
+
+const baseClass = 'edit-many';
+
+const Submit: React.FC<{disabled: boolean, action: string}> = ({ action, disabled }) => {
+  const { submit } = useForm();
+  const { t } = useTranslation('general');
+
+  const save = useCallback(() => {
+    submit({
+      skipValidation: true,
+      method: 'PATCH',
+      action,
+    });
+  }, [action, submit]);
+
+  return (
+    <FormSubmit
+      className={`${baseClass}__save`}
+      onClick={save}
+      disabled={disabled}
+    >
+      {t('save')}
+    </FormSubmit>
+  );
+};
+const Publish: React.FC<{disabled: boolean, action: string}> = ({ action, disabled }) => {
+  const { submit } = useForm();
+  const { t } = useTranslation('version');
+
+  const save = useCallback(() => {
+    submit({
+      skipValidation: true,
+      method: 'PATCH',
+      overrides: {
+        _status: 'published',
+      },
+      action,
+    });
+  }, [action, submit]);
+
+  return (
+    <FormSubmit
+      className={`${baseClass}__publish`}
+      onClick={save}
+      disabled={disabled}
+    >
+      {t('publishChanges')}
+    </FormSubmit>
+  );
+};
+const SaveDraft: React.FC<{disabled: boolean, action: string}> = ({ action, disabled }) => {
+  const { submit } = useForm();
+  const { t } = useTranslation('version');
+
+  const save = useCallback(() => {
+    submit({
+      skipValidation: true,
+      method: 'PATCH',
+      overrides: {
+        _status: 'draft',
+      },
+      action,
+    });
+  }, [action, submit]);
+
+  return (
+    <FormSubmit
+      className={`${baseClass}__draft`}
+      onClick={save}
+      disabled={disabled}
+    >
+      {t('saveDraft')}
+    </FormSubmit>
+  );
+};
+const EditMany: React.FC<Props> = (props) => {
+  const {
+    resetParams,
+    collection,
+    collection: {
+      slug,
+      labels: {
+        plural,
+      },
+      fields,
+    } = {},
+  } = props;
+
+  const { permissions } = useAuth();
+  const { closeModal } = useModal();
+  const { serverURL, routes: { api } } = useConfig();
+  const { selectAll, count, getQueryParams } = useSelection();
+  const { t, i18n } = useTranslation('general');
+  const [selected, setSelected] = useState([]);
+
+  const collectionPermissions = permissions?.collections?.[slug];
+  const hasUpdatePermission = collectionPermissions?.update?.permission;
+
+  const drawerSlug = `edit-${slug}`;
+
+  if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {
+    return null;
+  }
+
+  const onSuccess = () => {
+    resetParams({ page: selectAll === SelectAllStatus.AllAvailable ? 1 : undefined });
+  };
+
+  return (
+    <div className={baseClass}>
+      <DrawerToggler
+        slug={drawerSlug}
+        className={`${baseClass}__toggle`}
+        aria-label={t('edit')}
+        onClick={() => {
+          setSelected([]);
+        }}
+      >
+        {t('edit')}
+      </DrawerToggler>
+      <Drawer
+        slug={drawerSlug}
+        header={null}
+      >
+        <OperationContext.Provider value="update">
+          <Form
+            className={`${baseClass}__form`}
+            onSuccess={onSuccess}
+          >
+            <div className={`${baseClass}__main`}>
+              <div className={`${baseClass}__header`}>
+                <h2 className={`${baseClass}__header__title`}>
+                  {t('editingLabel', { label: getTranslation(plural, i18n), count })}
+                </h2>
+                <button
+                  className={`${baseClass}__header__close`}
+                  id={`close-drawer__${drawerSlug}`}
+                  type="button"
+                  onClick={() => closeModal(drawerSlug)}
+                  aria-label={t('close')}
+                >
+                  <X />
+                </button>
+              </div>
+              <FieldSelect
+                fields={fields}
+                setSelected={setSelected}
+              />
+              <RenderFields
+                fieldTypes={fieldTypes}
+                fieldSchema={selected}
+              />
+              <div className={`${baseClass}__sidebar-wrap`}>
+                <div className={`${baseClass}__sidebar`}>
+                  <div className={`${baseClass}__sidebar-sticky-wrap`}>
+                    <div className={`${baseClass}__document-actions`}>
+                      <Submit
+                        action={`${serverURL}${api}/${slug}${getQueryParams()}`}
+                        disabled={selected.length === 0}
+                      />
+                      { collection.versions && (
+                        <React.Fragment>
+                          <Publish
+                            action={`${serverURL}${api}/${slug}${getQueryParams()}`}
+                            disabled={selected.length === 0}
+                          />
+                          <SaveDraft
+                            action={`${serverURL}${api}/${slug}${getQueryParams()}`}
+                            disabled={selected.length === 0}
+                          />
+                        </React.Fragment>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Form>
+        </OperationContext.Provider>
+      </Drawer>
+    </div>
+  );
+};
+
+export default EditMany;

src/admin/components/elements/EditMany/types.ts

@@ -0,0 +1,7 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import type { Props as ListProps } from '../../views/collections/List/types';
+
+export type Props = {
+  collection: SanitizedCollectionConfig,
+  resetParams: ListProps['resetParams'],
+}

src/admin/components/elements/FieldSelect/index.scss

@@ -0,0 +1,5 @@
+@import '../../../scss/styles.scss';
+
+.field-select {
+  margin-bottom: base(1);
+}

src/admin/components/elements/FieldSelect/index.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Field, fieldAffectsData,
+  fieldHasSubFields, FieldWithPath,
+  tabHasName,
+} from '../../../../fields/config/types';
+import ReactSelect from '../ReactSelect';
+import { getTranslation } from '../../../../utilities/getTranslation';
+import Label from '../../forms/Label';
+import { useForm } from '../../forms/Form/context';
+import { createNestedFieldPath } from '../../forms/Form/createNestedFieldPath';
+
+import './index.scss';
+
+const baseClass = 'field-select';
+
+type Props = {
+  fields: Field[];
+  setSelected: (fields: FieldWithPath[]) => void
+}
+
+const combineLabel = (prefix, field, i18n): string => (
+  `${prefix === '' ? '' : `${prefix} > `}${getTranslation(field.label || field.name, i18n) || ''}`
+);
+const reduceFields = (fields: Field[], i18n, path = '', labelPrefix = ''): {label: string, value: FieldWithPath}[] => (
+  fields.reduce((fieldsToUse, field) => {
+    // escape for a variety of reasons
+    if (fieldAffectsData(field) && (field.admin?.disableBulkEdit || field.unique || field.hidden || field.admin?.hidden || field.admin?.readOnly)) {
+      return fieldsToUse;
+    }
+    if (!(field.type === 'array' || field.type === 'blocks') && fieldHasSubFields(field)) {
+      return [
+        ...fieldsToUse,
+        ...reduceFields(field.fields, i18n, createNestedFieldPath(path, field), combineLabel(labelPrefix, field, i18n)),
+      ];
+    }
+    if (field.type === 'tabs') {
+      return [
+        ...fieldsToUse,
+        ...field.tabs.reduce((tabFields, tab) => {
+          return [
+            ...tabFields,
+            ...(reduceFields(tab.fields, i18n, tabHasName(tab) ? createNestedFieldPath(path, field) : path, combineLabel(labelPrefix, field, i18n))),
+          ];
+        }, []),
+      ];
+    }
+    const formattedField = {
+      label: combineLabel(labelPrefix, field, i18n),
+      value: {
+        ...field,
+        path: createNestedFieldPath(path, field),
+      },
+    };
+
+    return [
+      ...fieldsToUse,
+      formattedField,
+    ];
+  }, []));
+export const FieldSelect: React.FC<Props> = ({
+  fields,
+  setSelected,
+}) => {
+  const { t, i18n } = useTranslation('general');
+  const [options] = useState(() => reduceFields(fields, i18n));
+  const { getFields, dispatchFields } = useForm();
+  const handleChange = (selected) => {
+    const activeFields = getFields();
+    if (selected === null) {
+      setSelected([]);
+    } else {
+      setSelected(selected.map(({ value }) => value));
+    }
+    // remove deselected values from form state
+    if (selected === null || Object.keys(activeFields).length > selected.length) {
+      Object.keys(activeFields).forEach((path) => {
+        if (selected === null || !selected.find((field) => {
+          return field.value.path === path;
+        })) {
+          dispatchFields({
+            type: 'REMOVE',
+            path,
+          });
+        }
+      });
+    }
+  };
+
+  return (
+    <div className={baseClass}>
+      <Label label={t('fields:selectFieldsToEdit')} />
+      <ReactSelect
+        options={options}
+        isMulti
+        onChange={handleChange}
+      />
+    </div>
+  );
+};

src/admin/components/elements/ListControls/index.scss

@@ -5,6 +5,8 @@
 
   &__wrap {
     display: flex;
+    align-items: center;
+    background-color: var(--theme-elevation-50);
   }
 
   .search-filter {
@@ -21,24 +23,28 @@
 
   &__buttons-wrap {
     display: flex;
-    margin-left: - base(.5);
-    margin-right: - base(.5);
-    width: calc(100% + #{base(1)});
+    align-items: center;
+    margin-right: base(.5);
+
+    .btn, .pill {
+      margin: 0 0 0 base(.5);
+    }
 
     .btn {
-      margin: 0 base(.5);
+      background-color: var(--theme-elevation-100);
+      cursor: pointer;
+      padding: 0 base(.25);
+      border-radius: $style-radius-s;
+
+      &:hover {
+        background-color: var(--theme-elevation-200);
+      }
     }
   }
 
-  &__toggle-columns,
-  &__toggle-where,
-  &__toggle-sort {
-    min-width: 140px;
-
-    &.btn--style-primary {
-      svg {
-        transform: rotate(180deg);
-      }
+  &__buttons-active {
+    svg {
+      transform: rotate(180deg);
     }
   }
 
@@ -48,25 +54,10 @@
     margin-top: base(1);
   }
 
-  @include mid-break {
-    &__buttons {
-      margin-left: base(.5);
-    }
-
-    &__buttons-wrap {
-      margin-left: - base(.25);
-      margin-right: - base(.25);
-      width: calc(100% + #{base(0.5)});
-
-      .btn {
-        margin: 0 base(.25);
-      }
-    }
-  }
-
   @include small-break {
     &__wrap {
       flex-wrap: wrap;
+      background-color: unset;
     }
 
     .search-filter {
@@ -74,11 +65,23 @@
       width: 100%;
     }
 
-    &__buttons {
-      margin: 0;
+    &__buttons-wrap {
+      margin-left: - base(.25);
+      margin-right: - base(.25);
+      width: calc(100% + #{base(0.5)});
+
+      .pill {
+        margin: 0 base(.25);
+        padding: base(.5) base(1);
+
+        svg {
+          margin-left: auto;
+        }
+      }
     }
 
     &__buttons {
+      margin: 0;
       width: 100%;
     }
 

src/admin/components/elements/ListControls/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 import { useTranslation } from 'react-i18next';
+import { useWindowInfo } from '@faceless-ui/window-info';
 import { fieldAffectsData } from '../../../../fields/config/types';
 import SearchFilter from '../SearchFilter';
 import ColumnSelector from '../ColumnSelector';
@@ -13,6 +14,12 @@ import validateWhereQuery from '../WhereBuilder/validateWhereQuery';
 import flattenFields from '../../../../utilities/flattenTopLevelFields';
 import { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched';
 import { getTranslation } from '../../../../utilities/getTranslation';
+import Pill from '../Pill';
+import Chevron from '../../icons/Chevron';
+import EditMany from '../EditMany';
+import DeleteMany from '../DeleteMany';
+import PublishMany from '../PublishMany';
+import UnpublishMany from '../UnpublishMany';
 
 import './index.scss';
 
@@ -26,6 +33,7 @@ const ListControls: React.FC<Props> = (props) => {
     handleSortChange,
     handleWhereChange,
     modifySearchQuery = true,
+    resetParams,
     collection: {
       fields,
       admin: {
@@ -45,6 +53,7 @@ const ListControls: React.FC<Props> = (props) => {
   const [textFieldsToBeSearched] = useState(getTextFieldsToBeSearched(listSearchableFields, fields));
   const [visibleDrawer, setVisibleDrawer] = useState<'where' | 'sort' | 'columns'>(shouldInitializeWhereOpened ? 'where' : undefined);
   const { t, i18n } = useTranslation('general');
+  const { breakpoints: { s: smallBreak } } = useWindowInfo();
 
   return (
     <div className={baseClass}>
@@ -58,26 +67,44 @@ const ListControls: React.FC<Props> = (props) => {
         />
         <div className={`${baseClass}__buttons`}>
           <div className={`${baseClass}__buttons-wrap`}>
+            { !smallBreak && (
+              <React.Fragment>
+                <EditMany
+                  collection={collection}
+                  resetParams={resetParams}
+                />
+                <PublishMany
+                  collection={collection}
+                  resetParams={resetParams}
+                />
+                <UnpublishMany
+                  collection={collection}
+                  resetParams={resetParams}
+                />
+                <DeleteMany
+                  collection={collection}
+                  resetParams={resetParams}
+                />
+              </React.Fragment>
+            )}
             {enableColumns && (
-              <Button
-                className={`${baseClass}__toggle-columns`}
-                buttonStyle={visibleDrawer === 'columns' ? undefined : 'secondary'}
+              <Pill
+                pillStyle="dark"
+                className={`${baseClass}__toggle-columns ${visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''}`}
                 onClick={() => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)}
-                icon="chevron"
-                iconStyle="none"
+                icon={<Chevron />}
               >
                 {t('columns')}
-              </Button>
+              </Pill>
             )}
-            <Button
-              className={`${baseClass}__toggle-where`}
-              buttonStyle={visibleDrawer === 'where' ? undefined : 'secondary'}
+            <Pill
+              pillStyle="dark"
+              className={`${baseClass}__toggle-where ${visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''}`}
               onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}
-              icon="chevron"
-              iconStyle="none"
+              icon={<Chevron />}
             >
               {t('filters')}
-            </Button>
+            </Pill>
             {enableSort && (
               <Button
                 className={`${baseClass}__toggle-sort`}

src/admin/components/elements/ListControls/types.ts

@@ -1,6 +1,7 @@
 import { Where } from '../../../../types';
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
 import { Column } from '../Table/types';
+import type { Props as ListProps } from '../../views/collections/List/types';
 
 export type Props = {
   enableColumns?: boolean
@@ -9,6 +10,7 @@ export type Props = {
   handleSortChange?: (sort: string) => void
   handleWhereChange?: (where: Where) => void
   collection: SanitizedCollectionConfig
+  resetParams?: ListProps['resetParams']
 }
 
 export type ListControls = {

src/admin/components/elements/ListDrawer/DrawerContent.tsx

@@ -222,16 +222,6 @@ export const ListDrawerContent: React.FC<ListDrawerProps> = ({
             hasCreatePermission,
             disableEyebrow: true,
             modifySearchParams: false,
-            onCardClick: (doc) => {
-              if (typeof onSelect === 'function') {
-                onSelect({
-                  docID: doc.id,
-                  collectionConfig: selectedCollectionConfig,
-                });
-              }
-              closeModal(drawerSlug);
-            },
-            disableCardLink: true,
             handleSortChange: setSort,
             handleWhereChange: setWhere,
             handlePageChange: setPage,

src/admin/components/elements/ListSelection/index.scss

@@ -0,0 +1,19 @@
+@import '../../../scss/styles.scss';
+
+.list-selection {
+  margin-left: auto;
+  color: var(--theme-elevation-500);
+
+  &__button {
+    color: var(--theme-elevation-500);
+    background: unset;
+    border: none;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+
+  @include small-break {
+    margin-bottom: base(.5);
+  }
+}

src/admin/components/elements/ListSelection/index.tsx

@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SelectAllStatus, useSelection } from '../../views/collections/List/SelectionProvider';
+
+import './index.scss';
+
+const baseClass = 'list-selection';
+
+type Props = {
+  label: string
+}
+const ListSelection: React.FC<Props> = ({ label }) => {
+  const { toggleAll, count, totalDocs, selectAll } = useSelection();
+  const { t } = useTranslation('general');
+
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <div className={baseClass}>
+      <span>{t('selectedCount', { label, count })}</span>
+      { selectAll !== SelectAllStatus.AllAvailable && (
+        <Fragment>
+          {' '}
+          &mdash;
+          <button
+            className={`${baseClass}__button`}
+            type="button"
+            onClick={() => toggleAll(true)}
+            aria-label={t('selectAll', { label, count })}
+          >
+            {t('selectAll', { label, count: totalDocs })}
+          </button>
+        </Fragment>
+      ) }
+    </div>
+  );
+};
+
+export default ListSelection;

src/admin/components/elements/PublishMany/index.scss

@@ -0,0 +1,17 @@
+@import '../../../scss/styles.scss';
+
+.publish-many {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &__template {
+    z-index: 1;
+    position: relative;
+  }
+
+  .btn {
+    margin-right: $baseline;
+  }
+}

src/admin/components/elements/PublishMany/index.tsx

@@ -0,0 +1,123 @@
+import React, { useState, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '../../utilities/Config';
+import Button from '../Button';
+import MinimalTemplate from '../../templates/Minimal';
+import { requests } from '../../../api';
+import { Props } from './types';
+import { SelectAllStatus, useSelection } from '../../views/collections/List/SelectionProvider';
+import { getTranslation } from '../../../../utilities/getTranslation';
+import Pill from '../Pill';
+import { useAuth } from '../../utilities/Auth';
+
+import './index.scss';
+
+const baseClass = 'publish-many';
+
+const PublishMany: React.FC<Props> = (props) => {
+  const {
+    resetParams,
+    collection: {
+      slug,
+      labels: {
+        plural,
+      },
+      versions,
+    } = {},
+  } = props;
+
+  const { serverURL, routes: { api } } = useConfig();
+  const { permissions } = useAuth();
+  const { toggleModal } = useModal();
+  const { t, i18n } = useTranslation('version');
+  const { selectAll, count, getQueryParams } = useSelection();
+  const [submitted, setSubmitted] = useState(false);
+
+  const collectionPermissions = permissions?.collections?.[slug];
+  const hasPermission = collectionPermissions?.update?.permission;
+
+  const modalSlug = `publish-${slug}`;
+
+  const addDefaultError = useCallback(() => {
+    toast.error(t('error:unknown'));
+  }, [t]);
+
+  const handlePublish = useCallback(() => {
+    setSubmitted(true);
+    requests.patch(`${serverURL}${api}/${slug}${getQueryParams({ _status: { not_equals: 'published' } })}`, {
+      body: JSON.stringify({
+        _status: 'published',
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept-Language': i18n.language,
+      },
+    }).then(async (res) => {
+      try {
+        const json = await res.json();
+        toggleModal(modalSlug);
+        if (res.status < 400) {
+          toast.success(t('general:updatedSuccessfully'));
+          resetParams({ page: selectAll ? 1 : undefined });
+          return null;
+        }
+
+        if (json.errors) {
+          json.errors.forEach((error) => toast.error(error.message));
+        } else {
+          addDefaultError();
+        }
+        return false;
+      } catch (e) {
+        return addDefaultError();
+      }
+    });
+  }, [addDefaultError, api, getQueryParams, i18n.language, modalSlug, resetParams, selectAll, serverURL, slug, t, toggleModal]);
+
+  if (!(versions?.drafts) || (selectAll === SelectAllStatus.None || !hasPermission)) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <Pill
+        className={`${baseClass}__toggle`}
+        onClick={() => {
+          setSubmitted(false);
+          toggleModal(modalSlug);
+        }}
+      >
+        {t('publish')}
+      </Pill>
+      <Modal
+        slug={modalSlug}
+        className={baseClass}
+      >
+        <MinimalTemplate className={`${baseClass}__template`}>
+          <h1>{t('confirmPublish')}</h1>
+          <p>
+            {t('aboutToPublishSelection', { label: getTranslation(plural, i18n) })}
+          </p>
+          <Button
+            id="confirm-cancel"
+            buttonStyle="secondary"
+            type="button"
+            onClick={submitted ? undefined : () => toggleModal(modalSlug)}
+          >
+            {t('general:cancel')}
+          </Button>
+          <Button
+            onClick={submitted ? undefined : handlePublish}
+            id="confirm-publish"
+          >
+            {submitted ? t('publishing') : t('general:confirm')}
+          </Button>
+        </MinimalTemplate>
+      </Modal>
+    </React.Fragment>
+  );
+};
+
+export default PublishMany;

src/admin/components/elements/PublishMany/types.ts

@@ -0,0 +1,7 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import type { Props as ListProps } from '../../views/collections/List/types';
+
+export type Props = {
+  collection: SanitizedCollectionConfig,
+  resetParams: ListProps['resetParams'],
+}

src/admin/components/elements/SearchFilter/index.scss

@@ -7,10 +7,20 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: base(.5);
+    left: base(.5);
   }
 
   &__input {
     @include formInput;
+    box-shadow: none;
+    padding-left: base(2);
+    background-color: var(--theme-elevation-50);
+    border: none;
+
+    &:not(:disabled) {
+        &:hover, &:focus {
+        box-shadow: none;
+      }
+    }
   }
 }

src/admin/components/elements/TableColumns/buildColumns.tsx

@@ -1,53 +1,25 @@
 import React from 'react';
-import type { TFunction } from 'react-i18next';
 import Cell from '../../views/collections/List/Cell';
 import SortColumn from '../SortColumn';
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
 import { Column } from '../Table/types';
-import { Field, fieldIsPresentationalOnly } from '../../../../fields/config/types';
+import { fieldIsPresentationalOnly } from '../../../../fields/config/types';
 import flattenFields from '../../../../utilities/flattenTopLevelFields';
 import { Props as CellProps } from '../../views/collections/List/Cell/types';
+import SelectAll from '../../views/collections/List/SelectAll';
+import SelectRow from '../../views/collections/List/SelectRow';
 
 const buildColumns = ({
   collection,
   columns,
-  t,
   cellProps,
 }: {
   collection: SanitizedCollectionConfig,
   columns: Pick<Column, 'accessor' | 'active'>[],
-  t: TFunction,
   cellProps: Partial<CellProps>[]
 }): Column[] => {
-  // only insert each base field if it doesn't already exist in the collection
-  const baseFields: Field[] = [
-    {
-      name: 'id',
-      type: 'text',
-      label: 'ID',
-    },
-    {
-      name: 'updatedAt',
-      type: 'date',
-      label: t('updatedAt'),
-    },
-    {
-      name: 'createdAt',
-      type: 'date',
-      label: t('createdAt'),
-    },
-  ];
-
-  const combinedFields = baseFields.reduce((acc, field) => {
-    // if the field already exists in the collection, don't add it
-    if (acc.find((f) => 'name' in f && 'name' in field && f.name === field.name)) return acc;
-    return [...acc, field];
-  }, collection.fields);
-
-  const flattenedFields = flattenFields(combinedFields, true);
-
   // sort the fields to the order of activeColumns
-  const sortedFields = flattenedFields.sort((a, b) => {
+  const sortedFields = flattenFields(collection.fields, true).sort((a, b) => {
     const aIndex = columns.findIndex((column) => column.accessor === a.name);
     const bIndex = columns.findIndex((column) => column.accessor === b.name);
     if (aIndex === -1 && bIndex === -1) return 0;
@@ -97,6 +69,23 @@ const buildColumns = ({
     };
   });
 
+  cols.unshift({
+    active: true,
+    label: null,
+    name: '',
+    accessor: '_select',
+    components: {
+      Heading: (
+        <SelectAll />
+      ),
+      renderCell: (rowData) => (
+        <SelectRow
+          id={rowData.id}
+        />
+      ),
+    },
+  });
+
   return cols;
 };
 

src/admin/components/elements/TableColumns/columnReducer.ts

@@ -1,4 +1,3 @@
-import { TFunction } from 'react-i18next';
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
 import { Column } from '../Table/types';
 import buildColumns from './buildColumns';
@@ -9,7 +8,6 @@ type TOGGLE = {
   type: 'toggle',
   payload: {
     column: string
-    t: TFunction
     collection: SanitizedCollectionConfig
     cellProps: Partial<CellProps>[]
   }
@@ -19,7 +17,6 @@ type SET = {
   type: 'set',
   payload: {
     columns: Pick<Column, 'accessor' | 'active'>[]
-    t: TFunction
     collection: SanitizedCollectionConfig
     cellProps: Partial<CellProps>[]
   }
@@ -30,7 +27,6 @@ type MOVE = {
   payload: {
     fromIndex: number
     toIndex: number
-    t: TFunction
     collection: SanitizedCollectionConfig
     cellProps: Partial<CellProps>[]
   }
@@ -43,7 +39,6 @@ export const columnReducer = (state: Column[], action: Action): Column[] => {
     case 'toggle': {
       const {
         column,
-        t,
         collection,
         cellProps,
       } = action.payload;
@@ -62,7 +57,6 @@ export const columnReducer = (state: Column[], action: Action): Column[] => {
       return buildColumns({
         columns: withToggledColumn,
         collection,
-        t,
         cellProps,
       });
     }
@@ -70,7 +64,6 @@ export const columnReducer = (state: Column[], action: Action): Column[] => {
       const {
         fromIndex,
         toIndex,
-        t,
         collection,
         cellProps,
       } = action.payload;
@@ -82,14 +75,12 @@ export const columnReducer = (state: Column[], action: Action): Column[] => {
       return buildColumns({
         columns: withMovedColumn,
         collection,
-        t,
         cellProps,
       });
     }
     case 'set': {
       const {
         columns,
-        t,
         collection,
         cellProps,
       } = action.payload;
@@ -97,7 +88,6 @@ export const columnReducer = (state: Column[], action: Action): Column[] => {
       return buildColumns({
         columns,
         collection,
-        t,
         cellProps,
       });
     }

src/admin/components/elements/TableColumns/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useReducer, createContext, useContext, useRef } from 'react';
+import React, { useCallback, useEffect, useReducer, createContext, useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
 import { usePreferences } from '../../utilities/Preferences';
@@ -8,6 +8,8 @@ import buildColumns from './buildColumns';
 import { Action, columnReducer } from './columnReducer';
 import getInitialColumnState from './getInitialColumns';
 import { Props as CellProps } from '../../views/collections/List/Cell/types';
+import formatFields from '../../views/collections/List/formatFields';
+import { Field } from '../../../../fields/config/types';
 
 export interface ITableColumns {
   columns: Column[]
@@ -33,21 +35,22 @@ export const TableColumnsProvider: React.FC<{
   cellProps,
   collection,
   collection: {
-    fields,
     admin: {
       useAsTitle,
       defaultColumns,
     },
   },
 }) => {
-  const { t } = useTranslation('general');
   const preferenceKey = `${collection.slug}-list`;
   const prevCollection = useRef<SanitizedCollectionConfig['slug']>();
   const hasInitialized = useRef(false);
   const { getPreference, setPreference } = usePreferences();
+  const { t } = useTranslation();
+  const [formattedFields] = useState<Field[]>(() => formatFields(collection, t));
 
   const [tableColumns, dispatchTableColumns] = useReducer(columnReducer, {}, () => {
-    const initialColumns = getInitialColumnState(fields, useAsTitle, defaultColumns);
+    const initialColumns = getInitialColumnState(formattedFields, useAsTitle, defaultColumns);
+
     return buildColumns({
       collection,
       columns: initialColumns.map((column) => ({
@@ -55,7 +58,6 @@ export const TableColumnsProvider: React.FC<{
         active: true,
       })),
       cellProps,
-      t,
     });
   });
 
@@ -72,7 +74,7 @@ export const TableColumnsProvider: React.FC<{
 
         const currentPreferences = await getPreference<ListPreferences>(preferenceKey);
         prevCollection.current = collection.slug;
-        const initialColumns = getInitialColumnState(fields, useAsTitle, defaultColumns);
+        const initialColumns = getInitialColumnState(formattedFields, useAsTitle, defaultColumns);
         const newCols = currentPreferences?.columns || initialColumns;
 
         dispatchTableColumns({
@@ -89,8 +91,7 @@ export const TableColumnsProvider: React.FC<{
               }
               return column;
             }),
-            t,
-            collection,
+            collection: { ...collection, fields: formatFields(collection, t) },
             cellProps,
           },
         });
@@ -100,7 +101,7 @@ export const TableColumnsProvider: React.FC<{
     };
 
     sync();
-  }, [preferenceKey, setPreference, fields, tableColumns, getPreference, useAsTitle, defaultColumns, t, collection, cellProps]);
+  }, [preferenceKey, setPreference, tableColumns, getPreference, useAsTitle, defaultColumns, collection, cellProps, formattedFields, t]);
 
   // /////////////////////////////////////
   // Set preferences on column change
@@ -130,12 +131,11 @@ export const TableColumnsProvider: React.FC<{
     dispatchTableColumns({
       type: 'set',
       payload: {
-        collection,
+        collection: { ...collection, fields: formatFields(collection, t) },
         columns: columns.map((column) => ({
           accessor: column,
           active: true,
         })),
-        t,
         // onSelect,
         cellProps,
       },
@@ -153,8 +153,7 @@ export const TableColumnsProvider: React.FC<{
       payload: {
         fromIndex,
         toIndex,
-        collection,
-        t,
+        collection: { ...collection, fields: formatFields(collection, t) },
         cellProps,
       },
     });
@@ -165,8 +164,7 @@ export const TableColumnsProvider: React.FC<{
       type: 'toggle',
       payload: {
         column,
-        collection,
-        t,
+        collection: { ...collection, fields: formatFields(collection, t) },
         cellProps,
       },
     });

src/admin/components/elements/UnpublishMany/index.scss

@@ -0,0 +1,17 @@
+@import '../../../scss/styles.scss';
+
+.unpublish-many {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &__template {
+    z-index: 1;
+    position: relative;
+  }
+
+  .btn {
+    margin-right: $baseline;
+  }
+}

src/admin/components/elements/UnpublishMany/index.tsx

@@ -0,0 +1,123 @@
+import React, { useState, useCallback } from 'react';
+import { toast } from 'react-toastify';
+import { Modal, useModal } from '@faceless-ui/modal';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '../../utilities/Config';
+import Button from '../Button';
+import MinimalTemplate from '../../templates/Minimal';
+import { requests } from '../../../api';
+import { Props } from './types';
+import { SelectAllStatus, useSelection } from '../../views/collections/List/SelectionProvider';
+import { getTranslation } from '../../../../utilities/getTranslation';
+import Pill from '../Pill';
+import { useAuth } from '../../utilities/Auth';
+
+import './index.scss';
+
+const baseClass = 'unpublish-many';
+
+const UnpublishMany: React.FC<Props> = (props) => {
+  const {
+    resetParams,
+    collection: {
+      slug,
+      labels: {
+        plural,
+      },
+      versions,
+    } = {},
+  } = props;
+
+  const { serverURL, routes: { api } } = useConfig();
+  const { permissions } = useAuth();
+  const { toggleModal } = useModal();
+  const { t, i18n } = useTranslation('version');
+  const { selectAll, count, getQueryParams } = useSelection();
+  const [submitted, setSubmitted] = useState(false);
+
+  const collectionPermissions = permissions?.collections?.[slug];
+  const hasPermission = collectionPermissions?.update?.permission;
+
+  const modalSlug = `unpublish-${slug}`;
+
+  const addDefaultError = useCallback(() => {
+    toast.error(t('error:unknown'));
+  }, [t]);
+
+  const handleUnpublish = useCallback(() => {
+    setSubmitted(true);
+    requests.patch(`${serverURL}${api}/${slug}${getQueryParams({ _status: { not_equals: 'draft' } })}`, {
+      body: JSON.stringify({
+        _status: 'draft',
+      }),
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept-Language': i18n.language,
+      },
+    }).then(async (res) => {
+      try {
+        const json = await res.json();
+        toggleModal(modalSlug);
+        if (res.status < 400) {
+          toast.success(t('general:updatedSuccessfully'));
+          resetParams({ page: selectAll ? 1 : undefined });
+          return null;
+        }
+
+        if (json.errors) {
+          json.errors.forEach((error) => toast.error(error.message));
+        } else {
+          addDefaultError();
+        }
+        return false;
+      } catch (e) {
+        return addDefaultError();
+      }
+    });
+  }, [addDefaultError, api, getQueryParams, i18n.language, modalSlug, resetParams, selectAll, serverURL, slug, t, toggleModal]);
+
+  if (!(versions?.drafts) || (selectAll === SelectAllStatus.None || !hasPermission)) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      <Pill
+        className={`${baseClass}__toggle`}
+        onClick={() => {
+          setSubmitted(false);
+          toggleModal(modalSlug);
+        }}
+      >
+        {t('unpublish')}
+      </Pill>
+      <Modal
+        slug={modalSlug}
+        className={baseClass}
+      >
+        <MinimalTemplate className={`${baseClass}__template`}>
+          <h1>{t('confirmUnpublish')}</h1>
+          <p>
+            {t('aboutToUnpublishSelection', { label: getTranslation(plural, i18n) })}
+          </p>
+          <Button
+            id="confirm-cancel"
+            buttonStyle="secondary"
+            type="button"
+            onClick={submitted ? undefined : () => toggleModal(modalSlug)}
+          >
+            {t('general:cancel')}
+          </Button>
+          <Button
+            onClick={submitted ? undefined : handleUnpublish}
+            id="confirm-unpublish"
+          >
+            {submitted ? t('unpublishing') : t('general:confirm')}
+          </Button>
+        </MinimalTemplate>
+      </Modal>
+    </React.Fragment>
+  );
+};
+
+export default UnpublishMany;

src/admin/components/elements/UnpublishMany/types.ts

@@ -0,0 +1,7 @@
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import type { Props as ListProps } from '../../views/collections/List/types';
+
+export type Props = {
+  collection: SanitizedCollectionConfig,
+  resetParams: ListProps['resetParams'],
+}

src/admin/components/elements/UploadGallery/index.scss

@@ -1,32 +0,0 @@
-@import '../../../scss/styles.scss';
-
-.upload-gallery {
-  list-style: none;
-  padding: 0;
-  margin: base(2) -#{base(.5)};
-  width: calc(100% + #{$baseline});
-  display: flex;
-  flex-wrap: wrap;
-
-  li {
-    min-width: 0;
-    width: 16.66%;
-  }
-
-  .thumbnail-card {
-    margin: base(.5);
-    max-width: initial;
-  }
-
-  @include mid-break {
-    li {
-      width: 33.33%;
-    }
-  }
-
-  @include small-break {
-    li {
-      width: 50%;
-    }
-  }
-}

src/admin/components/elements/UploadGallery/index.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Props } from './types';
-import { ThumbnailCard } from '../ThumbnailCard';
-
-import './index.scss';
-
-const baseClass = 'upload-gallery';
-
-const UploadGallery: React.FC<Props> = (props) => {
-  const { docs, onCardClick, collection } = props;
-
-  if (docs && docs.length > 0) {
-    return (
-      <ul className={baseClass}>
-        {docs.map((doc) => (
-          <li key={String(doc.id)}>
-            <ThumbnailCard
-              doc={doc}
-              collection={collection}
-              onClick={() => onCardClick(doc)}
-            />
-          </li>
-        ))}
-      </ul>
-    );
-  }
-
-  return null;
-};
-
-export default UploadGallery;

src/admin/components/elements/UploadGallery/types.ts

@@ -1,7 +0,0 @@
-import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-
-export type Props = {
-    docs?: Record<string, unknown>[],
-    collection: SanitizedCollectionConfig,
-    onCardClick: (doc) => void,
-}