Conditional Tabs

[ToneseekerMusical]

Issue

The ability to conditionally display tabs in a tab component would be incredibly helpful for certain implementations and provide for much cleaner and more concise code. In my implementation I have a role based user system that organizes user data into tabs to improve the readability of the data for end users. There are multiple tabs that are used across multiple user roles necessitating the use of multiple tab fields with conditional logic on each field. This works for 90% of users, however, if users have multiple roles things get convoluted when writing the conditional statements in order to prevent multiple tab rows from being displayed.

Below is a simple implementation of the tabs, with only two roles for brevity.

{
  type: 'tabs',
  admin: {
    condition: ( data, siblingData ) => {
      roleCheck( data, siblingData, 'customer' );
  },
  tabs: [
    {
      label: 'Reviews',
      fields: [ reviewInfo ],
    },
    {
      label: 'Customer Info',
      fields: [ customerInfo ],
    },
    {
      label: 'Instruments',
      fields: [ instrumentInfo ],
    },
    {
      label: 'Appointments',
      fields: [ appointmentInfo ],
    },
    {
      label: 'Orders',
      fields: [ orderInfo ],
    },
  ],
},
{
  type: 'tabs',
  admin: {
    condition: (data, siblingData) => {
      roleCheck( data, siblingData, 'employee');
  },
  tabs: [
    {
      label: 'Profile Info',
      fields: [ userInfo, profileInfo ],
    },
    {
      label: 'Employee Info',
      fields: [ employeeInfo ],
    },
    {
      label: 'Employer Info',
      fields: [ employerInfo ],
    },
    {
      label: 'Reviews',
      fields: [ reviewInfo ],
    },
    {
      label: 'Instruments',
      fields: [ instrumentInfo ],
    },
    {
      label: 'Appointments',
      fields: [ appointmentInfo ],
    },
  ],
},
{
  type: 'tabs',
  admin: {
    condition: ( data, siblingData ) => {
      roleCheck( data, siblingData, [ 'employee', 'customer' ] );
  },
  tabs: [
    {
      label: 'Profile Info',
      fields: [ userInfo, profileInfo ],
    },
    {
      label: 'Customer Info',
      fields: [ customerInfo ],
    },
    {
      label: 'Employer Info',
      fields: [ employerInfo ],
    },
    {
      label: 'Employee Info',
      fields: [ employeeInfo ],
    },
    {
      label: 'Instruments',
      fields: [ instrumentInfo ],
    },
    {
      label: 'Appointments',
      fields: [ appointmentInfo ],
    },
    {
      label: 'Reviews',
      fields: [ reviewInfo ],
    },
    {
      label: 'Orders',
      fields: [ orderInfo ],
    },
  ],
},

Proposed Change

In a role system where users can have multiple roles, a user with both the customer and employee roles will have two tab rows displayed with duplicated tabs in each unless a third tab field is created to cover the edge case where both roles are present. This only gets more complicated with each role added to the available user roles. Ideally, the tab field would accept conditional statements for each tab, consolidating the multitude of edge cases that require their own field into a single field as shown below:

{
  type: 'tabs',
  tabs: [
    {
      label: 'Profile Info',
      condition: ( data, siblingData ) => {
        roleCheck( data, siblingData, 'employee' );
      },
      fields: [ userInfo, profileInfo ],
    },
    {
      label: 'Customer Info',
      condition: ( data, siblingData ) => {
        roleCheck( data, siblingData, 'customer' );
      },
      fields: [ customerInfo ],
    },
    {
      label: 'Employer Info',
      condition: ( data, siblingData ) => {
        roleCheck( data, siblingData, 'employee' );
      },
      fields: [ employerInfo ],
    },
    {
      label: 'Employee Info',
      condition: ( data, siblingData ) => {
        roleCheck( data, siblingData, 'employee' );
      },
      fields: [ employeeInfo ],
    },
    {
      label: 'Instruments',
      fields: [ instrumentInfo ],
    },
    {
      label: 'Appointments',
      fields: [ appointmentInfo ],
    },
    {
      label: 'Reviews',
      fields: [ reviewInfo ],
    },
    {
      label: 'Orders',
      condition: ( data, siblingData ) => {
        roleCheck( data, siblingData, 'customer' );
      fields: [ orderInfo ],
    },
  ],
},

Closing Thoughts

This is only an example of a single use case, but it can be used in E-commerce implementations for products based on product types, blogs based on post categories, etc. This wouldn't affect the structure of the data, simply improve the way the data would be displayed in the browser.

[ToneseekerMusical]

Here's a screenshot of the current behavior of the field without handling of edge cases

[christian-reichart]

This would be helpful for me too, as I currently use tabs to realize a table component.

I have a max of 10 columns and each tab represents a column.

Now all of these are always visible, with a condition I could add a "numberOfColumns" select, that let's the user decide how many columns they need to make it clearer.

To my understanding this is currently not possible

[ToneseekerMusical]

While I can see how you could use this feature for that, it seems a bit "hacky". I think that nested array fields would accomplish exactly what you're looking for and be better suited for the task at hand simply because it allows you to dynamically add "columns" by adding another array object, and it structures your data for you. You are also able to set minimum and maximum number of entries allowed.

[christian-reichart]

@ToneseekerMusical I know it's a bit hacky, best way would be to write a custom component I think, but I didn't have the time. I think the benefit of the tabs approach is that the columns of a "row" are aligned horizontally which makes it easier to process visually. Nested Arrays can become pretty confusing when building a Table with 6 columns and 10 rows (which whould mean 60 cells).

[Jan-Eckerlein]

I was looking through discussion to check if someone is having this exact feature request. I think this would be a great addon

[DanRibbens]

There is another discussion around hiding tabs where the user has no access to any fields: #2620.

I think this should be considered part of this roadmap item.

[58bits]

+1 for this feature as well. It would be great if tabs responded to admin conditions. For example...

 admin: {
    condition: (_, siblingData) =>
      ['sidebarSecond', 'sidebarBoth'].includes(siblingData.layout)
  },

[ccapndave]

I've also got a use case for this; when developing layout components I want to show a tab with grid layout options only if the parent of the current block is a grid block.

[DanRibbens]

This didn't quite make it into v3. This PR is very close to being done #8720.