Merge pull request #25 from payloadcms/fix/tabs

fix: improves tab handling

demo/src/collections/Pages.ts

@@ -19,6 +19,9 @@ const Pages: CollectionConfig = {
       name: 'slug',
       type: 'text',
       required: true,
+      admin: {
+        position: 'sidebar',
+      }
     },
   ],
 }

demo/src/collections/Posts.ts

@@ -0,0 +1,37 @@
+import { CollectionConfig } from 'payload/types';
+
+const Posts: CollectionConfig = {
+  slug: 'posts',
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [{
+        label: 'Content',
+        fields: [
+          {
+            name: 'title',
+            type: 'text',
+            required: true
+          },
+          {
+            name: 'excerpt',
+            type: 'text',
+          },
+          {
+            name: 'slug',
+            type: 'text',
+            required: true,
+            admin: {
+              position: 'sidebar',
+            }
+          },
+        ]
+      }]
+    }
+  ],
+}
+
+export default Posts;

demo/src/payload.config.ts

@@ -6,6 +6,7 @@ import Users from './collections/Users';
 import Pages from './collections/Pages';
 import Media from './collections/Media';
 import HomePage from './globals/Settings';
+import Posts from './collections/Posts';
 
 export default buildConfig({
   serverURL: 'http://localhost:3000',
@@ -31,6 +32,7 @@ export default buildConfig({
   collections: [
     Users,
     Pages,
+    Posts,
     Media
   ],
   globals: [
@@ -49,10 +51,12 @@ export default buildConfig({
     seo({
       collections: [
         'pages',
+        'posts'
       ],
       globals: [
         'settings',
       ],
+      tabbedUI: true,
       uploadsCollection: 'media',
       generateTitle: ({ doc }: any) => `Website.com — ${doc?.title?.value}`,
       generateDescription: ({ doc }: any) => doc?.excerpt?.value,

demo/src/seed/index.ts

@@ -19,4 +19,13 @@ export const seed = async (payload: Payload) => {
       excerpt: 'This is the home page'
     },
   })
+
+  await payload.create({
+    collection: 'posts',
+    data: {
+      title: 'Hello, world!',
+      slug: 'hello-world',
+      excerpt: 'This is a post'
+    },
+  })
 }

src/index.ts

@@ -5,10 +5,10 @@ import { getMetaTitleField } from './fields/MetaTitle';
 import { getPreviewField } from './ui/Preview';
 import { getMetaImageField } from './fields/MetaImage';
 import { PluginConfig } from './types';
-import { Field } from 'payload/dist/fields/config/types';
+import { Field, GroupField, TabsField } from 'payload/dist/fields/config/types';
 
 const seo = (pluginConfig: PluginConfig) => (config: Config): Config => {
-  const seoFields: Field[] = [
+  const seoFields: GroupField[] = [
     {
       name: 'meta',
       label: 'SEO',
@@ -78,43 +78,81 @@ const seo = (pluginConfig: PluginConfig) => (config: Config): Config => {
       const isEnabled = pluginConfig?.collections?.includes(slug);
 
       if (isEnabled) {
+        if (pluginConfig?.tabbedUI) {
+          const seoFieldsAsTabs: TabsField[]  =  [{
+            type: 'tabs',
+            tabs: [
+              // if the collection is already tab-enabled, spread them into this new tabs field
+              // otherwise create a new tab to contain this collection's fields
+              // either way, append a new tab for the SEO fields
+              ...collection?.fields?.[0].type === 'tabs'
+                ? collection?.fields?.[0]?.tabs : [{
+                  label: collection?.labels?.singular || 'Content',
+                  fields: [...(collection?.fields || [])]
+                }],
+              {
+                label: 'SEO',
+                fields: seoFields,
+              }
+            ]
+          }]
+
+          return ({
+            ...collection,
+            fields: seoFieldsAsTabs,
+          })
+        }
+
         return ({
           ...collection,
-          fields: (pluginConfig?.tabbedUI ? [
-            {
-              type: 'tabs', tabs: [
-                { label: collection?.labels?.singular || 'Content', fields: [...(collection?.fields || [])] },
-                { label: 'SEO', fields: [...seoFields] },
-              ]
-            },
-          ] : [
+          fields: [
             ...collection?.fields || [],
             ...seoFields,
-          ]),
+          ],
         })
       }
+
       return collection;
     }) || [],
     globals: config.globals?.map((global) => {
       const { slug } = global;
       const isEnabled = pluginConfig?.globals?.includes(slug);
 
       if (isEnabled) {
+        if (pluginConfig?.tabbedUI) {
+          const seoFieldsAsTabs: TabsField[]  =  [{
+            type: 'tabs',
+            tabs: [
+              // if the global is already tab-enabled, spread them into this new tabs field
+              // otherwise create a new tab to contain this global's fields
+              // either way, append a new tab for the SEO fields
+              ...global?.fields?.[0].type === 'tabs'
+                ? global?.fields?.[0]?.tabs : [{
+                  label: global?.label || 'Content',
+                  fields: [...(global?.fields || [])]
+                }],
+              {
+                label: 'SEO',
+                fields: seoFields,
+              }
+            ]
+          }]
+
+          return ({
+            ...global,
+            fields: seoFieldsAsTabs,
+          })
+        }
+
         return ({
           ...global,
-          fields: (pluginConfig?.tabbedUI ? [
-            {
-              type: 'tabs', tabs: [
-                { label: global?.label || 'Content', fields: [...(global?.fields || [])] },
-                { label: 'SEO', fields: [...seoFields] },
-              ]
-            },
-          ] : [
+          fields: [
             ...global?.fields || [],
             ...seoFields,
-          ]),
+          ],
         })
       }
+
       return global;
     }) || []
   })