WIP: New API for products

[nwmac]

Summary

Fixes #

Occurred changes and/or fixed issues

This is a WIP PR to illustrate a different API for extensions to create products and configure types.

Note, the focus is on products. I have only added the table header support for types, but you get the idea.

The goal is to remove the DSL stuff and the function to add products and replace with an easier to use API.

The goal is also to prevent mistakes and make it easier to be succesful - in doing this, I found the existing API awkward and I had to try several times just to get the basic use cases working.

I have not added any examples in the code, but here are some for products:

  plugin.extendProduct('manager', [
    {
      name: 'certs',
      label: 'Cert Manager',
      default: 'acme.cert-manager.io.challenge',
      children: [
        'cert-manager.io.certificate',
        // 'acme.cert-manager.io.challenge',
        plugin.resourceNameFor('acme.cert-manager.io', 'challenge'),
        {
          name: 'custom1',
          label: 'Custom',
          component: () => import ('./components/Test.vue')
        }        
      ],
      weight: -10,
    },
    {
      name: 'neil12',
      //weight: 10000,
      label: 'My Empty Test Product',
      component: () => import ('./components/Test.vue')
    },
    {
      type: 'upgrade.cattle.io.plan',
      weight: 300,
    }
    // 'cert-manager.io.certificate',
    // 'acme.cert-manager.io.challenge',
  ]);

  plugin.addProduct({
    name: 'neil1',
    weight: -100,
    label: 'No child nav',
  }, []);

  plugin.addProduct({
    name: 'neil2',
    weight: -100,
    label: 'My Empty Test Product',
    component: () => import ('./components/Test.vue')
  });

  plugin.addProduct({
    name: 'neil',
    weight: -100,
    label: 'My Test Product',
  },
  [
    {
      name: 'hello',
      label: 'Testing',
      labelKey: 'aks.label',
      component: () => import ('./components/Test.vue')
    },
    'upgrade.cattle.io.plan',
    {
      name: 'group',
      label: 'Group',
      overview: () => import ('./components/Test.vue'),
      children: [
        {
          label: 'Testing 12',
          labelKey: 'aks.label',
          component: () => import ('./components/Test.vue')
        } as any,
        {
          name: 'hello',
          label: 'Testing 1',
          labelKey: 'aks.label',
          component: () => import ('./components/Test.vue')
        },
        {
          name: 'hello2',
          label: 'Testing 2',
          // labelKey: 'aks.label',
          component: () => import ('./components/Test.vue')
        },
        {
          name: 'hello3',
          label: 'Testing 3',
          labelKey: 'aks.label',
          component: () => import ('./components/Test.vue')
        },
      ]
    }
  ]);

  plugin.extendProduct(StandardProductName.SETTINGS, [
    {
      name: 'mysettings',
      label: 'Custom',
      component: () => import ('./components/Test.vue')
    }
  ])

Basically I want to get rid of the products in products and have 2 APIs:

addProduct and extendProduct

For type configuration, we'd also add a new API:

 plugin.configureResourceType('asdasd', {
    listColumns: [],
    listOptions: {
      showListMasthead: false,
      showAge:                  true,
      showState:                true,
      hideBulkActions: false,
    },
    options: {
      isCreatable: false,
      isEditable: false,
      isRemovable:              true,
      canYaml:                  true,
      localOnly: true  
    },
    ignored: false,
    model: null,
    components: {
      edit: null,
      list: null,
      detail: null
    },
    advanced: {
      // TODO: Better naming
      componentName: 'workload',
      depaginate: '??',
      weight: 1, // Should be set when using add or extend product
    }
  });
}

I have not implemented this, just the headers, but it is simpler than the products.

With this, we would not need virtual types.

I would aim to fold spoofed types into the new single configureResourceType method.

This PR is a bit rough around the edges, but hopefully illustrates the general idea.

There are a few changes to allow products to correctly set the product label without assuming any naming convention.

I also started to explore making sure these APIs would support everything we do via the existing product configurations that are currently in the shall/config/product folder.

As an example, the apps product would look like this:

  plugin.extendProduct(StandardProductName.EXPLORER, {
    name: 'apps',
    label: 'Apps',
    weight: 97,
    children: [
      {
        label:    'Charts',
        name:     'charts',
        component: () => import('@shell/pages/c/_cluster/apps/charts/index.vue'),
        path: '/c/:cluster/apps/charts',
        extraRoutes: [
          {
            name:      'chart',
            component: () => import('@shell/pages/c/_cluster/apps/charts/chart.vue')
          },
          {
            name:      'install',
            component: () => import('@shell/pages/c/_cluster/apps/charts/install.vue')
          }
        ]
      },
      CATALOG.APP,
      CATALOG.OPERATION,
      CATALOG.CLUSTER_REPO,
      CATALOG.REPO,
    ]
  });

.. the routes are auto-generated based on this configuration.

Areas or cases that should be tested

Areas which could experience regressions

Screenshot/Video

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility
• The PR has considered, and if applicable tested with, the three Global Roles Admin, Standard User and User Base