feat: autolabel fields when label is omitted (#42)

* feat: autolabel fields when omitted

* feat: handle autolabel in graphql mutation build

* feat: autolabel blocks

* test: add required slug field to blocks

* feat: handle graphql names when label is false

* feat: adds relationship field to test searchable input

* feat: handle block cell type labeling pluralization

* docs: remove all explicit labeling, no longer needed

* fix: falsey column labels, allows false array labels

* fix: client tests

* fix: auto-labels globals

* docs: globals auto-labeling and hooks clarification

* fix; proper object type naming

Co-authored-by: James <james@trbl.design>

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

@@ -69,7 +69,7 @@ const ColumnSelector: React.FC<Props> = (props) => {
             pillStyle={isEnabled ? 'dark' : undefined}
             className={`${baseClass}__active-column`}
           >
-            {field.label}
+            {field.label || field.name}
           </Pill>
         );
       })}

src/admin/components/forms/Label/types.ts

@@ -1,5 +1,5 @@
 export type Props = {
-  label?: string | JSX.Element
+  label?: string | false | JSX.Element
   required?: boolean
   htmlFor?: string
 }

src/admin/components/forms/field-types/Array/Array.tsx

@@ -184,7 +184,7 @@ const RenderArray = React.memo((props: RenderArrayProps) => {
                   key={row.key}
                   id={row.key}
                   blockType="array"
-                  label={label}
+                  label={labels.singular}
                   isOpen={row.open}
                   rowCount={rows.length}
                   rowIndex={i}

src/admin/components/forms/field-types/Array/types.ts

@@ -7,6 +7,7 @@ export type Props = Omit<ArrayField, 'type'> & {
   path?: string
   fieldTypes: FieldTypes
   permissions: FieldPermissions
+  label: string | false
 }
 
 export type RenderArrayProps = {
@@ -16,7 +17,7 @@ export type RenderArrayProps = {
   fields: Field[]
   permissions: FieldPermissions
   onDragEnd: (result: any) => void
-  label: string
+  label: string | false
   value: number
   readOnly: boolean
   minRows: number

src/admin/components/forms/field-types/Blocks/types.ts

@@ -15,7 +15,7 @@ export type RenderBlockProps = {
   fieldTypes: FieldTypes
   permissions: FieldPermissions
   onDragEnd: (result: any) => void
-  label: string
+  label: string | false
   value: number
   readOnly: boolean
   minRows: number

src/admin/components/views/collections/List/Cell/cellTypes.spec.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-max-props-per-line */
 import React from 'react';
 import { render } from '@testing-library/react';
 import BlocksCell from './field-types/Blocks';
@@ -13,6 +12,7 @@ describe('Cell Types', () => {
       name: 'blocks',
       labels: {
         singular: 'Block',
+        plural: 'Blocks Content',
       },
       type: 'blocks',
       blocks: [
@@ -30,14 +30,20 @@ describe('Cell Types', () => {
         { blockType: 'number' },
         { blockType: 'number' },
       ];
-      const { container } = render(<BlocksCell data={data} field={field} />);
+      const { container } = render(<BlocksCell
+        data={data}
+        field={field}
+      />);
       const el = container.querySelector('span');
       expect(el).toHaveTextContent('2 Blocks Content - Number, Number');
     });
 
     it('renders zero', () => {
       const data = [];
-      const { container } = render(<BlocksCell data={data} field={field} />);
+      const { container } = render(<BlocksCell
+        data={data}
+        field={field}
+      />);
       const el = container.querySelector('span');
       expect(el).toHaveTextContent('0 Blocks Content');
     });
@@ -52,7 +58,10 @@ describe('Cell Types', () => {
         { blockType: 'number' },
       ];
 
-      const { container } = render(<BlocksCell data={data} field={field} />);
+      const { container } = render(<BlocksCell
+        data={data}
+        field={field}
+      />);
       const el = container.querySelector('span');
       expect(el).toHaveTextContent('6 Blocks Content - Number, Number, Number, Number, Number and 1 more');
     });

src/admin/components/views/collections/List/Cell/field-types/Array/index.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
+import { ArrayField } from '../../../../../../../../fields/config/types';
 
-const ArrayCell = ({ data, field }) => {
+type Props = {
+  data: Record<string, unknown>
+  field: ArrayField
+}
+
+const ArrayCell: React.FC<Props> = ({ data, field }) => {
   const arrayFields = data ?? [];
-  const label = `${arrayFields.length} ${field.label} rows`;
+  const label = `${arrayFields.length} ${field?.labels?.plural || 'Rows'}`;
 
   return (
     <span>{label}</span>

src/admin/components/views/collections/List/Cell/field-types/Blocks/index.tsx

@@ -4,7 +4,7 @@ const BlocksCell = ({ data, field }) => {
   const selectedBlocks = data ? data.map(({ blockType }) => blockType) : [];
   const blockLabels = field.blocks.map((s) => ({ slug: s.slug, label: s.labels.singular }));
 
-  let label = `0 ${field.label}`;
+  let label = `0 ${field.labels.plural}`;
 
   const formatBlockList = (blocks) => blocks.map((b) => {
     const filtered = blockLabels.filter((f) => f.slug === b)?.[0];
@@ -14,9 +14,9 @@ const BlocksCell = ({ data, field }) => {
   const itemsToShow = 5;
   if (selectedBlocks.length > itemsToShow) {
     const more = selectedBlocks.length - itemsToShow;
-    label = `${selectedBlocks.length} ${field.label} - ${formatBlockList(selectedBlocks.slice(0, itemsToShow))} and ${more} more`;
+    label = `${selectedBlocks.length} ${field.labels.plural} - ${formatBlockList(selectedBlocks.slice(0, itemsToShow))} and ${more} more`;
   } else if (selectedBlocks.length > 0) {
-    label = `${selectedBlocks.length} ${field.label} - ${formatBlockList(selectedBlocks)}`;
+    label = `${selectedBlocks.length} ${selectedBlocks.length === 1 ? field.labels.singular : field.labels.plural} - ${formatBlockList(selectedBlocks)}`;
   }
 
   return (

src/admin/components/views/collections/List/Cell/index.tsx

@@ -36,7 +36,7 @@ const DefaultCell: React.FC<Props> = (props) => {
   if (!CellComponent) {
     return (
       <WrapElement {...wrapElementProps}>
-        {(cellData === '' || typeof cellData === 'undefined') && `<No ${field.label ?? 'data'}>`}
+        {(cellData === '' || typeof cellData === 'undefined') && `<No ${typeof field.label === 'string' ? field.label : 'data'}>`}
         {typeof cellData === 'string' && cellData}
         {typeof cellData === 'number' && cellData}
         {typeof cellData === 'object' && JSON.stringify(cellData)}

src/admin/components/views/collections/List/buildColumns.tsx

@@ -51,7 +51,7 @@ const buildColumns = (collection: CollectionConfig, columns: string[], setSort:
         components: {
           Heading: (
             <SortColumn
-              label={field.label}
+              label={field.label || field.name}
               name={field.name}
               handleChange={setSort}
               disable={field.disableSort || undefined}