Merge branch 'main' into next

StaticJsCMS · Oct 4, 2023 · 79b6996 · 79b6996
2 parents 6f129d4 + 9876bd4
commit 79b6996
Show file tree

Hide file tree

Showing 55 changed files with 3,178 additions and 191 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useWorkspaces": true,
-  "version": "3.3.3"
+  "version": "3.3.4"
 }
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@staticcms/app",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "license": "MIT",
   "description": "Static CMS application.",
   "repository": "https://github.com/StaticJsCMS/static-cms",
@@ -40,7 +40,7 @@
     "@babel/eslint-parser": "7.21.3",
     "@babel/runtime": "7.21.0",
     "@emotion/babel-preset-css-prop": "11.10.0",
-    "@staticcms/core": "^3.3.3",
+    "@staticcms/core": "^3.3.4",
     "buffer": "6.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@staticcms/core",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "license": "MIT",
   "description": "Static CMS core application.",
   "repository": "https://github.com/StaticJsCMS/static-cms",

diff --git a/packages/core/src/components/collections/entries/EntryListing.tsx b/packages/core/src/components/collections/entries/EntryListing.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { VIEW_STYLE_TABLE } from '@staticcms/core/constants/views';
+import useTranslate from '@staticcms/core/lib/hooks/useTranslate';
 import { getInferredFields, selectFields } from '@staticcms/core/lib/util/collection.util';
+import { isNullish } from '@staticcms/core/lib/util/null.util';
 import { toTitleCaseFromKey } from '@staticcms/core/lib/util/string.util';
 import { getDatetimeFormats } from '@staticcms/datetime/datetime.util';
 import entriesClasses from './Entries.classes';
@@ -51,6 +53,8 @@ const EntryListing: FC<EntryListingProps> = ({
   handleCursorActions,
   ...otherProps
 }) => {
+  const t = useTranslate();
+
   const hasMore = useMemo(() => cursor?.actions?.has('append_next'), [cursor?.actions]);
 
   const handleLoadMore = useCallback(() => {
@@ -61,20 +65,47 @@ const EntryListing: FC<EntryListingProps> = ({
 
   const inferFields = useCallback((collection?: Collection) => getInferredFields(collection), []);
 
-  const summaryFields = useMemo(() => {
-    let fields: string[] | undefined;
-    if ('collection' in otherProps) {
-      fields = otherProps.collection.summary_fields;
-    }
-
-    return fields ?? ['summary'];
-  }, [otherProps]);
-
   const isSingleCollectionInList = useMemo(
     () => !('collections' in otherProps) || Object.keys(otherProps.collections).length === 1,
     [otherProps],
   );
 
+  const summaryFields: {
+    name: string;
+    label: string;
+  }[] = useMemo(() => {
+    const summaryField = [
+      {
+        name: 'summary',
+        label: t('collection.table.summary'),
+      },
+    ];
+
+    if (!isSingleCollectionInList) {
+      return summaryField;
+    }
+
+    if (!('collection' in otherProps) || isNullish(otherProps.collection.summary_fields)) {
+      return summaryField;
+    }
+
+    const fieldNames = otherProps.collection.summary_fields;
+    const collectionFields = selectFields(otherProps.collection).reduce((acc, f) => {
+      acc[f.name] = f;
+      return acc;
+    }, {} as Record<string, Field>);
+
+    return fieldNames.map(summaryField => {
+      const field = collectionFields[summaryField];
+      return {
+        name: summaryField,
+        label: !field
+          ? toTitleCaseFromKey(summaryField)
+          : field.label ?? toTitleCaseFromKey(field.name),
+      };
+    });
+  }, [isSingleCollectionInList, otherProps, t]);
+
   const entryData: CollectionEntryData[] = useMemo(() => {
     if ('collection' in otherProps) {
       const inferredFields = inferFields(otherProps.collection);
@@ -97,7 +128,6 @@ const EntryListing: FC<EntryListingProps> = ({
         viewStyle,
         entry,
         key: entry.slug,
-        summaryFields,
       }));
     }
 
@@ -131,29 +161,11 @@ const EntryListing: FC<EntryListingProps> = ({
               viewStyle,
               collectionLabel,
               key: entry.slug,
-              summaryFields,
             }
           : null;
       })
       .filter(e => e) as CollectionEntryData[];
-  }, [entries, inferFields, isSingleCollectionInList, otherProps, summaryFields, viewStyle]);
-
-  const summaryFieldHeaders = useMemo(() => {
-    if ('collection' in otherProps) {
-      const collectionFields = selectFields(otherProps.collection).reduce((acc, f) => {
-        acc[f.name] = f;
-        return acc;
-      }, {} as Record<string, Field>);
-      return summaryFields.map(summaryField => {
-        const field = collectionFields[summaryField];
-        return !field
-          ? toTitleCaseFromKey(summaryField)
-          : field.label ?? toTitleCaseFromKey(field.name);
-      });
-    }
-
-    return [];
-  }, [otherProps, summaryFields]);
+  }, [entries, inferFields, isSingleCollectionInList, otherProps, viewStyle]);
 
   if (viewStyle === VIEW_STYLE_TABLE) {
     return (
@@ -162,7 +174,7 @@ const EntryListing: FC<EntryListingProps> = ({
           key="table"
           entryData={entryData}
           isSingleCollectionInList={isSingleCollectionInList}
-          summaryFieldHeaders={summaryFieldHeaders}
+          summaryFields={summaryFields}
           loadNext={handleLoadMore}
           canLoadMore={Boolean(hasMore && handleLoadMore)}
           isLoadingEntries={isLoadingEntries}

diff --git a/packages/core/src/components/collections/entries/EntryListingTable.tsx b/packages/core/src/components/collections/entries/EntryListingTable.tsx
@@ -17,7 +17,10 @@ import type { FC } from 'react';
 export interface EntryListingTableProps {
   isSingleCollectionInList: boolean;
   entryData: CollectionEntryData[];
-  summaryFieldHeaders: string[];
+  summaryFields: {
+    name: string;
+    label: string;
+  }[];
   canLoadMore: boolean;
   isLoadingEntries: boolean;
   loadNext: () => void;
@@ -26,7 +29,7 @@ export interface EntryListingTableProps {
 const EntryListingTable: FC<EntryListingTableProps> = ({
   isSingleCollectionInList,
   entryData,
-  summaryFieldHeaders,
+  summaryFields,
   canLoadMore,
   isLoadingEntries,
   loadNext,
@@ -72,15 +75,22 @@ const EntryListingTable: FC<EntryListingTableProps> = ({
   }, [clientHeight, fetchMoreOnBottomReached, scrollHeight, scrollTop]);
 
   const useWorkflow = useAppSelector(selectUseWorkflow);
-  const baseColumns = useMemo(() => {
-    const cols = [...summaryFieldHeaders, ''];
+
+  const baseColumnHeaders = useMemo(() => {
+    const cols = [...summaryFields.map(f => f.label), ''];
+
+    if (!isSingleCollectionInList) {
+      cols.unshift(t('collection.table.collection'));
+    }
 
     if (useWorkflow) {
       cols.push('');
     }
 
     return cols;
-  }, [summaryFieldHeaders, useWorkflow]);
+  }, [isSingleCollectionInList, summaryFields, t, useWorkflow]);
+
+  const columnFields = useMemo(() => [...summaryFields.map(f => f.name)], [summaryFields]);
 
   return (
     <div className={entriesClasses['entry-listing-table']}>
@@ -92,7 +102,7 @@ const EntryListingTable: FC<EntryListingTableProps> = ({
           'CMS_Scrollbar_secondary',
         )}
       >
-        <Table columns={!isSingleCollectionInList ? ['Collection', ...baseColumns] : baseColumns}>
+        <Table columns={baseColumnHeaders}>
           {paddingTop > 0 && (
             <tr>
               <td style={{ height: `${paddingTop}px` }} />
@@ -104,8 +114,10 @@ const EntryListingTable: FC<EntryListingTableProps> = ({
               <EntryRow
                 key={virtualRow.index}
                 collection={data.collection}
+                collectionLabel={data.collectionLabel}
                 entry={data.entry}
-                summaryFields={data.summaryFields}
+                columnFields={columnFields}
+                t={t}
               />
             );
           })}

diff --git a/packages/core/src/components/collections/entries/EntryRow.tsx b/packages/core/src/components/collections/entries/EntryRow.tsx
@@ -2,7 +2,6 @@ import { Info as InfoIcon } from '@styled-icons/material-outlined/Info';
 import get from 'lodash/get';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import useTranslate from '@staticcms/core/lib/hooks/useTranslate';
 import { getFieldPreview } from '@staticcms/core/lib/registry';
 import { getEntryBackupKey } from '@staticcms/core/lib/util/backup.util';
 import {
@@ -16,22 +15,26 @@ import { selectConfig, selectUseWorkflow } from '@staticcms/core/reducers/select
 import { useAppSelector } from '@staticcms/core/store/hooks';
 import TableCell from '../../common/table/TableCell';
 import TableRow from '../../common/table/TableRow';
-import entriesClasses from './Entries.classes';
 import WorkflowStatusPill from '../../workflow/WorkflowStatusPill';
+import entriesClasses from './Entries.classes';
 
-import type { BackupEntry, Collection, Entry } from '@staticcms/core/interface';
+import type { BackupEntry, Collection, Entry, TranslatedProps } from '@staticcms/core/interface';
 import type { FC } from 'react';
 
 export interface EntryRowProps {
   entry: Entry;
   collection: Collection;
   collectionLabel?: string;
-  summaryFields: string[];
+  columnFields: string[];
 }
 
-const EntryRow: FC<EntryRowProps> = ({ collection, entry, collectionLabel, summaryFields }) => {
-  const t = useTranslate();
-
+const EntryRow: FC<TranslatedProps<EntryRowProps>> = ({
+  collection,
+  entry,
+  collectionLabel,
+  columnFields,
+  t,
+}) => {
   const path = useMemo(
     () => `/collections/${collection.name}/entries/${entry.slug}`,
     [collection.name, entry.slug],
@@ -85,7 +88,7 @@ const EntryRow: FC<EntryRowProps> = ({ collection, entry, collectionLabel, summa
           {collectionLabel}
         </TableCell>
       ) : null}
-      {summaryFields.map(fieldName => {
+      {columnFields.map(fieldName => {
         if (fieldName === 'summary') {
           return (
             <TableCell key={fieldName} to={path}>

diff --git a/packages/core/src/components/common/autocomplete/Autocomplete.css b/packages/core/src/components/common/autocomplete/Autocomplete.css
@@ -1,6 +1,10 @@
 .CMS_Autocomplete_root {
   @apply relative
-    w-full;
+    w-full
+    flex
+    items-center
+    gap-2
+    pr-2;
 
   &.CMS_Autocomplete_disabled {
     & .CMS_Autocomplete_input {
@@ -13,6 +17,13 @@
   }
 }
 
+.CMS_Autocomplete_input-wrapper {
+  @apply flex-grow
+    flex
+    flex-wrap
+    min-w-0;
+}
+
 .CMS_Autocomplete_input {
   color: var(--text-primary);
 
@@ -21,7 +32,6 @@
     border-none
     py-2
     pl-3
-    pr-10
     text-sm
     leading-5
     focus:ring-0
@@ -31,13 +41,10 @@
 }
 
 .CMS_Autocomplete_button-wrapper {
-  @apply absolute
-    inset-y-0
-    right-0
-    flex
+  @apply flex
     items-center
-    pr-2
-    gap-1;
+    gap-1
+    flex-shrink-0;
 }
 
 .CMS_Autocomplete_button {

diff --git a/packages/core/src/components/common/autocomplete/Autocomplete.tsx b/packages/core/src/components/common/autocomplete/Autocomplete.tsx
@@ -20,6 +20,7 @@ export const classes = generateClassNames('Autocomplete', [
   'root',
   'focused',
   'disabled',
+  'input-wrapper',
   'input',
   'button-wrapper',
   'button',
@@ -56,6 +57,7 @@ export interface AutocompleteProps {
   disabled?: boolean;
   required?: boolean;
   inputRef?: Ref<HTMLInputElement>;
+  endAdornment?: ReactNode;
   displayValue: (item: string | string[] | null) => string;
   onQuery: (query: string) => void;
   onChange: (value: string | string[] | undefined) => void;
@@ -65,9 +67,10 @@ const Autocomplete: FC<AutocompleteProps> = ({
   label,
   value,
   options,
-  inputRef,
   disabled,
   required,
+  inputRef,
+  endAdornment,
   onChange,
   onQuery,
 }) => {
@@ -188,14 +191,17 @@ const Autocomplete: FC<AutocompleteProps> = ({
         )}
         data-testid="autocomplete"
       >
-        {label}
-        <input
-          {...getInputProps()}
-          ref={finalInputRef}
-          className={classes.input}
-          data-testid="autocomplete-input"
-        />
+        <div className={classes['input-wrapper']}>
+          {label}
+          <input
+            {...getInputProps()}
+            ref={finalInputRef}
+            className={classes.input}
+            data-testid="autocomplete-input"
+          />
+        </div>
         <div className={classes['button-wrapper']}>
+          {endAdornment}
           <IconButton
             icon={KeyboardArrowDownIcon}
             variant="text"

diff --git a/packages/core/src/components/common/progress/CircularProgress.css b/packages/core/src/components/common/progress/CircularProgress.css
@@ -2,8 +2,7 @@
   color: var(--text-secondary);
   fill: var(--primary-main);
 
-  @apply mr-2
-    animate-spin;
+  @apply animate-spin;
 
   &.CMS_CircularProgress_md {
     @apply w-8