2.12 ::: backport PRs 16203, 16225 and 16208

[aalves08]

Summary

Fixes #16263

Backport PR #16203
Backport PR #16225
Backport PR #16208

Occurred changes and/or fixed issues

• Make it so we can now differentiate between detail pages and show configuration when adding tabs via extensions.

• add new locations for Tab extension point:
  TabLocation. RESOURCE_SHOW_CONFIGURATION
  TabLocation.RESOURCE_DETAIL_PAGE
  TabLocation.RESOURCE_CREATE_PAGE
  TabLocation.RESOURCE_EDIT_PAGE
  TabLocation.ALL

• fix bug with adding tabs from extensions on workloads edit/create views

Technical notes summary

• Differenciation between detail and show configuration pages is done by using provide/inject to indicate to all ancestors that they're inside a resourcedetailpage. It's not the most elegant but it seems preferable over prop drilling especially when we don't control all detail pages that are rendered.

Areas or cases that should be tested

• Fix the imports in pkg/kubectl-explain/index.ts:

import {
  ActionLocation, IPlugin, IInternal, TabLocation
} from '@shell/core/types';

• Create MyTabComponent in the root folder of the pkg/kubectl-explain builtin extension

• add the following bits of code to the same file:

SHOW CONFIGURATION

plugin.addTab(
    TabLocation.RESOURCE_SHOW_CONFIGURATION,
    { resource: ['service'] },
    {
      name:       'some-name',
      label:      'show-config-page-label',
      weight:     -5,
      showHeader: true,
      tooltip:    'this is a tooltip message',
      component:  () => import('./MyTabComponent.vue')
    }
  );

DETAIL PAGE

plugin.addTab(
    TabLocation.RESOURCE_DETAIL_PAGE,
    { resource: ['service'] },
    {
      name:       'some-name',
      label:      'detail-page-label',
      weight:     -5,
      showHeader: true,
      tooltip:    'this is a tooltip message',
      component:  () => import('./MyTabComponent.vue')
    }
  );

CREATE PAGE

plugin.addTab(
    TabLocation.RESOURCE_CREATE_PAGE,
    { resource: ['service'] },
    {
      name:       'some-name',
      label:      'create-page-label',
      weight:     -5,
      showHeader: true,
      tooltip:    'this is a tooltip message',
      component:  () => import('./MyTabComponent.vue')
    }
  );

EDIT PAGE

plugin.addTab(
    TabLocation.RESOURCE_EDIT_PAGE,
    { resource: ['service'] },
    {
      name:       'some-name',
      label:      'edit-page-label',
      weight:     -5,
      showHeader: true,
      tooltip:    'this is a tooltip message',
      component:  () => import('./MyTabComponent.vue')
    }
  );

ALL PAGES

plugin.addTab(
    TabLocation.ALL,
    { resource: ['pod', 'service'] },
    {
      name:       'some-name',
      label:      'all-pages-label',
      weight:     -5,
      showHeader: true,
      tooltip:    'this is a tooltip message',
      component:  () => import('./MyTabComponent.vue')
    }
  );

• Check that the tabs appear fine in the mentioned areas

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

[eva-vashkevich]

lgtm

[richard-cox]

release-2.12 currently tracks 2.12.6. Was there a reason why we targeted 2.12.7? Need to either revert the merge commit or update milestones