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>

docs/access-control/fields.mdx

@@ -23,7 +23,6 @@ export default {
   fields: [
     {
       name: 'title',
-      label: 'Title',
       type: 'text',
       // highlight-start
       access: {

docs/configuration/collections.mdx

@@ -16,8 +16,8 @@ It's often best practice to write your Collections in separate files and then im
 | ---------------- | -------------|
 | **`slug`** *     | Unique, URL-friendly string that will act as an identifier for this Collection. |
 | **`fields`** *   | Array of field types that will determine the structure and functionality of the data stored within this Collection. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. |
-| **`labels`**     | Singular and plural labels for use in identifying this Collection throughout Payload. |
-| **`admin`**      | Admin-specific configuration. See below for [more detail](/docs/admin/overview#admin-options). |
+| **`labels`**     | Singular and plural labels for use in identifying this Collection throughout Payload. Auto-generated from slug if not defined. |
+| **`admin`**      | Admin-specific configuration. See below for [more detail](/docs/collections#admin). |
 | **`hooks`**      | Entry points to "tie in" to Collection actions at specific points. [More](/docs/hooks/overview#collection-hooks) |
 | **`access`**     | Provide access control functions to define exactly who should be able to do what with Documents in this Collection. [More](/docs/access-control/overview/#collections) |
 | **`auth`**       | Specify options if you would like this Collection to feature authentication. For more, consult the [Authentication](/docs/authentication/config) documentation. |
@@ -29,12 +29,8 @@ It's often best practice to write your Collections in separate files and then im
 #### Simple collection example
 
 ```js
-const Order = {
+const Orders = {
 	slug: 'orders',
-	labels: {
-		singular: 'Order',
-		plural: 'Orders',
-	},
 	fields: [
 		{
 			name: 'total',

docs/configuration/globals.mdx

@@ -16,7 +16,7 @@ As with Collection configs, it's often best practice to write your Globals in se
 | ---------------- | -------------|
 | **`slug`** *     | Unique, URL-friendly string that will act as an identifier for this Global. |
 | **`fields`** *   | Array of field types that will determine the structure and functionality of the data stored within this Global. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. |
-| **`label`**      | Singular label for use in identifying this Global throughout Payload. |
+| **`label`**      | Singular label for use in identifying this Global throughout Payload. Auto-generated from slug if not defined. |
 | **`admin`**      | Admin-specific configuration. See below for [more detail](/docs/configuration/globals#admin-options). |
 | **`hooks`**      | Entry points to "tie in" to collection actions at specific points. [More](/docs/hooks/overview#global-hooks) |
 | **`access`**     | Provide access control functions to define exactly who should be able to do what with this Global. [More](/docs/access-control/overview/#globals) |
@@ -28,7 +28,6 @@ As with Collection configs, it's often best practice to write your Globals in se
 ```js
 const Nav = {
 	slug: 'nav',
-	label: 'Nav',
 	fields: [
 		{
 			name: 'items',
@@ -38,7 +37,6 @@ const Nav = {
 			fields: [
 				{
 					name: 'page',
-					label: 'Page',
 					type: 'relationship',
 					relationTo: 'pages', // "pages" is the slug of an existing collection
 					required: true,

docs/configuration/localization.mdx

@@ -55,7 +55,6 @@ Payload localization works on a **field** level—not a document level. In addit
 ```js
 {
 	name: 'title',
-	label: 'Page Title',
 	type: 'text',
 	// highlight-start
 	localized: true,

docs/configuration/overview.mdx

@@ -50,13 +50,11 @@ const config = buildConfig({
 			fields: [
 				{
 					name: 'title',
-					label: 'Title',
 					type: 'text',
 					required: true,
 				},
 				{
 					name: 'content',
-					label: 'Content',
 					type: 'richText',
 					required: true,
 				}
@@ -66,16 +64,13 @@ const config = buildConfig({
 	globals: [
 		{
 			slug: 'header',
-			label: 'Header',
 			fields: [
 				{
 					name: 'nav',
-					label: 'Nav',
 					type: 'array',
 					fields: [
 						{
 							name: 'page',
-							label: 'Page',
 							type: 'relationship',
 							relationTo: 'pages',
 						},

docs/fields/array.mdx

@@ -24,7 +24,7 @@ keywords: array, fields, config, configuration, documentation, Content Managemen
 | Option           | Description |
 | ---------------- | ----------- |
 | **`name`** *         | To be used as the property name when stored and retrieved from the database.  |
-| **`label`**          | Used as a heading in the Admin panel and to name the generated GraphQL type. |
+| **`label`**          | Used as a heading in the Admin panel and to name the generated GraphQL type. Auto-generated from name if not defined. |
 | **`fields`** *       | Array of field types to correspond to each row of the Array. |
 | **`validate`**       | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation) |
 | **`saveToJWT`**      | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT. |
@@ -59,14 +59,12 @@ keywords: array, fields, config, configuration, documentation, Content Managemen
       fields: [ // required
         {
           name: 'image',
-          label: 'Image',
           type: 'upload',
           relationTo: 'media',
           required: true,
         },
         {
           name: 'caption',
-          label: 'Caption',
           type: 'text',
         }
       ]

docs/fields/blocks.mdx

@@ -53,7 +53,7 @@ Blocks are defined as separate configs of their own.
 | ---------------- | ----------- |
 | **`slug`** *         | Identifier for this block type. Will be saved on each block as the `blockType` property. |
 | **`fields`** *       | Array of fields to be stored in this block. |
-| **`labels`**         | Customize the block labels that appear in the Admin dashboard. Also used to name corresponding GraphQL schema types. |
+| **`labels`**         | Customize the block labels that appear in the Admin dashboard. Also used to name corresponding GraphQL schema types. Auto-generated from slug if not defined. |
 | **`imageURL`**       | Provide a custom image thumbnail to help editors identify this block in the Admin UI. |
 | **`imageAltText`**   | Customize this block's image thumbnail alt text. |
 
@@ -79,14 +79,12 @@ const QuoteBlock = {
   imageAltText: 'A nice thumbnail image to show what this block looks like',
   fields: [ // required
     {
-      name: 'text',
-      label: 'Quote Text',
+      name: 'quoteHeader',
       type: 'text',
       required: true,
     },
     {
-      name: 'text',
-      label: 'Quotee',
+      name: 'quoteText',
       type: 'text',
     },
   ]
@@ -98,13 +96,8 @@ const ExampleCollection = {
     {
       name: 'layout', // required
       type: 'blocks', // required
-      label: 'layout',
       minRows: 1,
       maxRows: 20,
-      labels: {
-        singular: 'Layout',
-        plural: 'Layouts',
-      },
       blocks: [ // required
        QuoteBlock
       ]

docs/fields/code.mdx

@@ -51,7 +51,6 @@ Currently, the `language` property only supports JavaScript syntax but more supp
     {
       name: 'trackingCode', // required
       type: 'code', // required
-      label: 'Tracking Code',
       required: true,
       admin: {
         language: 'js'

docs/fields/group.mdx

@@ -37,9 +37,8 @@ keywords: group, fields, config, configuration, documentation, Content Managemen
   slug: 'example-collection',
   fields: [
     {
-      name: 'meta', // required
+      name: 'pageMeta', // required
       type: 'group', // required
-      label: 'Page Meta',
       fields: [ // required
         {
           name: 'title',

docs/fields/number.mdx

@@ -58,7 +58,6 @@ Set this property to a string that will be used for browser autocomplete.
     {
       name: 'age', // required
       type: 'number', // required
-      label: 'Age',
       required: true,
       admin: {
         step: 1,

docs/fields/overview.mdx

@@ -20,14 +20,12 @@ const Pages = {
 	slug: 'pages',
 	fields: [
 		{
-			name: 'my-field',
+			name: 'myField',
 			type: 'text', // highlight-line
-			label: 'My Field',
 		},
 		{
-			name: 'other-field',
+			name: 'otherField',
 			type: 'checkbox', // highlight-line
-			label: 'Other Field'
 		},
 	],
 }

docs/fields/radio.mdx

@@ -53,7 +53,6 @@ The `layout` property allows for the radio group to be styled as a horizonally o
     {
       name: 'color', // required
       type: 'radio', // required
-      label: 'color',
       options: [ // required
         {
           label: 'Mint',

docs/fields/relationship.mdx

@@ -54,7 +54,6 @@ keywords: relationship, fields, config, configuration, documentation, Content Ma
       name: 'placedBy', // required
       type: 'relationship', // required
       relationTo: ['organizations', 'users'], // required
-      label: 'Placed By',
       hasMany: false,
       required: true,
     }

docs/fields/text.mdx

@@ -52,9 +52,8 @@ Set this property to a string that will be used for browser autocomplete.
   slug: 'example-collection',
   fields: [
     {
-      name: 'title', // required
+      name: 'pageTitle', // required
       type: 'text', // required
-      label: 'Page Title',
       required: true,
     }
   ]

docs/fields/textarea.mdx

@@ -54,7 +54,6 @@ Set this property to a string that will be used for browser autocomplete.
     {
       name: 'metaDescription', // required
       type: 'textarea', // required
-      label: 'Page Meta Description',
       required: true,
     }
   ]

docs/fields/upload.mdx

@@ -50,10 +50,9 @@ keywords: upload, images media, fields, config, configuration, documentation, Co
   slug: 'example-collection',
   fields: [
     {
-      name: 'background', // required
+      name: 'backgroundImage', // required
       type: 'upload', // required
       relationTo: 'media', // required
-      label: 'Background Image',
       required: true,
     }
   ]

docs/getting-started/concepts.mdx

@@ -80,7 +80,6 @@ You can specify population `depth` via query parameter in the REST API and by an
 	fields: [
 		{
 			name: 'title',
-			label: 'Title',
 			type: 'text',
 		},
 		{
@@ -97,12 +96,10 @@ You can specify population `depth` via query parameter in the REST API and by an
 	fields: [
 		{
 			name: 'email',
-			label: 'Email',
 			type: 'email',
 		},
 		{
 			name: 'department'
-			label: 'Department',
 			type: 'relationship',
 			relationTo: 'departments'
 		}
@@ -114,7 +111,6 @@ You can specify population `depth` via query parameter in the REST API and by an
 	fields: [
 		{
 			name: 'name'
-			label: 'Name',
 			type: 'text',
 		}
 	]

docs/graphql/overview.mdx

@@ -60,7 +60,6 @@ Globals are also fully supported. For example:
 ```js
 const Header = {
   slug: 'header',
-  label: 'Header',
   fields: [
     ...
   ],

docs/hooks/collections.mdx

@@ -32,7 +32,7 @@ All collection Hook properties accept arrays of synchronous or asynchronous func
 module.exports = {
   slug: 'example-hooks',
   fields: [
-    { name: 'name', label: 'Name', type: 'text'},
+    { name: 'name', type: 'text'},
   ]
   hooks: {
     beforeOperation: [(args) => {...}],

docs/hooks/fields.mdx

@@ -29,7 +29,6 @@ Example field configuration:
 ```js
 {
   name: 'name',
-  label: 'Name',
   type: 'text',
   // highlight-start
   hooks: {

docs/hooks/globals.mdx

@@ -24,7 +24,7 @@ All Global Hook properties accept arrays of synchronous or asynchronous function
 module.exports = {
   slug: 'header',
   fields: [
-    { name: 'title', label: 'Title', type: 'text'},
+    { name: 'title', type: 'text'},
   ]
   hooks: {
     beforeValidate: [(args) => {...}],
@@ -38,43 +38,40 @@ module.exports = {
 
 ### beforeValidate
 
-Runs before the `create` and `update` operations. This hook allows you to add or format data before the incoming data is validated.
+Runs before the `update` operation. This hook allows you to add or format data before the incoming data is validated.
 
 ```js
 const beforeValidateHook = async ({
   data, // incoming data to update or create with
   req, // full express request
-  operation, // name of the operation ie. 'create', 'update'
   originalDoc, // original document
 }) => {
-  return data; // Return data to either create or update a document with
+  return data; // Return data to update the document with
 }
 ```
 
 ### beforeChange
 
-Immediately following validation, `beforeChange` hooks will run within `create` and `update` operations. At this stage, you can be confident that the data that will be saved to the document is valid in accordance to your field validations. You can optionally modify the shape of data to be saved.
+Immediately following validation, `beforeChange` hooks will run within the `update` operation. At this stage, you can be confident that the data that will be saved to the document is valid in accordance to your field validations. You can optionally modify the shape of data to be saved.
 
 ```js
 const beforeChangeHook = async ({
   data, // incoming data to update or create with
   req, // full express request
-  operation, // name of the operation ie. 'create', 'update'
   originalDoc, // original document
 }) => {
-  return data; // Return data to either create or update a document with
+  return data; // Return data to update the document with
 }
 ```
 
 ### afterChange
 
-After a global is created or updated, the `afterChange` hook runs. Use this hook to purge caches of your applications, sync site data to CRMs, and more.
+After a global is updated, the `afterChange` hook runs. Use this hook to purge caches of your applications, sync site data to CRMs, and more.
 
 ```js
 const afterChangeHook = async ({
   doc, // full document data
   req, // full express request
-  operation, // name of the operation ie. 'create', 'update'
 }) => {
   return data;
 }