CONSOLE-4484: Replace custom tabs with PF6 Tabs component

frontend/packages/console-dynamic-plugin-sdk/README.md

@@ -172,6 +172,8 @@ This section documents notable changes in the Console provided shared modules ac
   removed in the future. Plugins should provide their own CSS to spin icons if needed.
 - Removed styling for generic HTML heading elements (e.g., `<h1>`). Use PatternFly components to achieve
   correct styling.
+- Removed `co-m-horizontal-nav` styling. Use [PatternFly Tabs](https://www.patternfly.org/components/tabs/)
+  instead.
 
 ### PatternFly 5+ dynamic modules
 

frontend/packages/dev-console/integration-tests/support/step-definitions/monitoring/dashboard-display.ts

@@ -272,7 +272,7 @@ When('user clicks on Inspect on {string} chart', (chartTitle: string) => {
 });
 
 Then('user will see Metrics tab in Observe page', () => {
-  cy.get('.co-m-horizontal-nav-item--active').find(monitoringPO.tabs.metrics).should('be.visible');
+  cy.get('.pf-v6-c-tabs__item.pf-m-current').find(monitoringPO.tabs.metrics).should('be.visible');
 });
 
 Then('{string} option selected by default', (metric) => {

frontend/packages/dev-console/integration-tests/support/step-definitions/monitoring/topology-sidebar-actions.ts

@@ -46,7 +46,7 @@ When('user clicks on Memory usage chart', () => {
 
 Then('page redirected to the Observe Metrics page for the chart', () => {
   detailsPage.titleShouldContain('Observe');
-  cy.get('.co-m-horizontal-nav-item--active').find(monitoringPO.tabs.metrics).should('be.visible');
+  cy.get('.pf-v6-c-tabs__item.pf-m-current').find(monitoringPO.tabs.metrics).should('be.visible');
 });
 
 When('user selects {string} from Context Menu', (menuOption: string) => {
@@ -84,9 +84,7 @@ Then('page redirected to the Observe page', () => {
 
 Then('page redirected to the Dashboard tab of Observe page', () => {
   detailsPage.titleShouldContain('Observe');
-  cy.get('.co-m-horizontal-nav-item--active')
-    .find(monitoringPO.tabs.dashboard)
-    .should('be.visible');
+  cy.get('.pf-v6-c-tabs__item.pf-m-current').find(monitoringPO.tabs.dashboard).should('be.visible');
 });
 
 Then('user will see the {string} selected in the Dashboard dropdown', (dashboardName: string) => {

frontend/packages/helm-plugin/integration-tests/support/pages/helm/helm-details-page.ts

@@ -46,8 +46,8 @@ export const helmDetailsPage = {
   selectedHelmTab: (name: string) => {
     cy.byLegacyTestID(`horizontal-link-${name}`)
       .should('exist')
-      .parent('li')
-      .should('have.class', 'co-m-horizontal-nav-item--active');
+      .parent('.pf-v6-c-tabs__item')
+      .should('have.class', 'pf-m-current');
   },
   verifyHelmActionsDropdown: () => cy.byLegacyTestID('dropdown-button').should('be.visible'),
   clickHelmActionButton: () => cy.byLegacyTestID('dropdown-button').click(),

frontend/packages/integration-tests-cypress/tests/cluster-settings/alertmanager/alertmanager.cy.ts

@@ -53,7 +53,7 @@ describe('Alertmanager', () => {
 
   it('displays the Alertmanager YAML page and saves Alertmanager YAML', () => {
     alertmanager.visitAlertmanagerPage();
-    detailsPage.selectTab('yaml');
+    detailsPage.selectTab('YAML');
     yamlEditor.isLoaded();
     cy.byTestID('alert-success').should('not.exist');
     yamlEditor.clickSaveCreateButton();
@@ -98,7 +98,7 @@ receivers:
     yamlEditor.setEditorContent(yaml);
     yamlEditor.clickSaveCreateButton();
     cy.byTestID('alert-success').should('exist');
-    detailsPage.selectTab('details');
+    detailsPage.selectTab('Details');
     cy.get('[data-test-rows="resource-row"]')
       .contains('team-X-pager')
       .parents('tr')
@@ -178,7 +178,7 @@ route:
     yamlEditor.setEditorContent(yaml);
     yamlEditor.clickSaveCreateButton();
     cy.get('.yaml-editor__buttons .pf-m-success').should('exist');
-    detailsPage.selectTab('details');
+    detailsPage.selectTab('Details');
     listPage.rows.shouldExist(receiverName);
     alertmanager.visitEditPage(receiverName);
     cy.byLegacyTestID('label-0').should('have.value', matcher1);

frontend/packages/integration-tests-cypress/views/alertmanager.ts

@@ -84,7 +84,7 @@ export const alertmanager = {
     cy.visit(`/monitoring/alertmanagerconfig/receivers/${receiverName}/edit`);
   },
   visitYAMLPage: () => {
-    detailsPage.selectTab('yaml');
+    detailsPage.selectTab('YAML');
     yamlEditor.isLoaded();
   },
 };

frontend/packages/integration-tests-cypress/views/details-page.ts

@@ -22,5 +22,5 @@ export namespace DetailsPageSelector {
   export const namespace = 'dd[data-test-selector="details-item-value__Namespace"] a';
   export const sectionHeadings = '[data-test-section-heading]';
   export const itemLabels = 'dt';
-  export const horizontalNavTabs = '.co-m-horizontal-nav__menu-item';
+  export const horizontalNavTabs = '.pf-v6-c-tabs__item';
 }

frontend/packages/integration-tests-cypress/views/resource-sidebar.ts

@@ -2,7 +2,7 @@ export const isLoaded = () => cy.get(`[data-test=resource-sidebar]`).should('exi
 export const isSampleListLoaded = () => cy.get(`[data-test=resource-samples-list]`).should('exist');
 
 export const selectTab = (name: string) => {
-  cy.get(`[data-test-id="horizontal-link-${name}"]`).should('exist').click();
+  cy.get(`[data-test="horizontal-link-${name}"]`).should('exist').click();
 };
 
 export const loadFirstSample = () => {

frontend/packages/knative-plugin/integration-tests/support/pageObjects/global-po.ts

@@ -108,7 +108,7 @@ export const eventingPO = {
     editAnnotations: '[data-test="edit-annotations"]',
     keyAnnotations: '[placeholder="Key"]',
     valueAnnotations: '[placeholder="Value"]',
-    sidebarTab: '.co-m-horizontal-nav__menu-item',
+    sidebarTab: '.pf-v6-c-tabs__item',
     sidebarClose: '[data-test-id="sidebar-close-button"]',
     applicationItem: '[data-test=dropdown-menu-item-link]',
     subscriberInput: '[id="form-ns-dropdown-spec-subscriber-ref-name-field"]',
@@ -151,7 +151,7 @@ export const eventingPO = {
       labels: '[data-test="Labels"]',
       annotations: '[data-test="Annotations"]',
       heading: '.sidebar__section-heading',
-      navBar: '.co-m-horizontal-nav__menu-item',
+      navBar: '.pf-v6-c-tabs__item',
       dropdownMenu: '.pf-v6-c-dropdown__menu-item',
       resource: '.co-resource-item__resource-name',
       close: '[data-test-id="sidebar-close-button"]',

frontend/packages/pipelines-plugin/integration-tests/support/pages/pipelines/pipelines-page.ts

@@ -51,7 +51,7 @@ export const pipelinesPage = {
   },
 
   verifySelectedTab: (tabName: pipelineTabs) => {
-    cy.get('.co-m-horizontal-nav__menu-item.co-m-horizontal-nav-item--active > a').should(
+    cy.get('.pf-v6-c-tabs__item.pf-m-current .pf-v6-c-tabs__item-text').should(
       'have.text',
       tabName,
     );

frontend/packages/pipelines-plugin/integration-tests/support/step-definitions/pipelines/pipeline-navigation.ts

@@ -19,7 +19,7 @@ When('user enters git access token as {string}', (token: string) => {
 });
 
 Then('user will be redirected to the repositories page', () => {
-  cy.get('.co-m-horizontal-nav__menu-item.co-m-horizontal-nav-item--active > a').should(
+  cy.get('.pf-v6-c-tabs__item.pf-m-current .pf-v6-c-tabs__item-text').should(
     'have.text',
     'Repositories',
   );
@@ -54,7 +54,7 @@ Then('user clicks on close button', () => {
 });
 
 Then('user will be redirected to PipelineRuns tab', () => {
-  cy.get('.co-m-horizontal-nav__menu-item.co-m-horizontal-nav-item--active > a').should(
+  cy.get('.pf-v6-c-tabs__item.pf-m-current .pf-v6-c-tabs__item-text').should(
     'have.text',
     'PipelineRuns',
   );

frontend/packages/topology/integration-tests/support/page-objects/topology-po.ts

@@ -93,7 +93,7 @@ export const topologyPO = {
     podText: 'text.pod-ring__center-text',
     applicationGroupingsTitle: '.overview__sidebar-pane-head.resource-overview__heading',
     applicationGroupingsSidepane: 'overview__sidebar-pane resource-overview',
-    resourcesTabApplicationGroupings: '.co-m-horizontal-nav__menu-item',
+    resourcesTabApplicationGroupings: '.pf-v6-c-tabs__item',
     pipelineRunsDetails: '.sidebar__section-heading',
     pipelineRunsLogSnippet: '.ocs-log-snippet__log-snippet',
     pipelineRunsStatus: '.ocs-log-snippet__status-message',

frontend/packages/topology/integration-tests/support/pages/topology/topology-side-pane-page.ts

@@ -10,8 +10,8 @@ export const topologySidePane = {
     cy
       .get(topologyPO.sidePane.tabName)
       .contains(tabName)
-      .parent('li')
-      .should('have.class', 'co-m-horizontal-nav-item--active'),
+      .parent('.pf-v6-c-tabs__item')
+      .should('have.class', 'pf-m-current'),
   verifyTab: (tabName: string) =>
     cy.get(topologyPO.sidePane.tabName).contains(tabName).should('be.visible'),
   verifyTabNotVisible: (tabName: string) =>

frontend/packages/topology/src/components/side-bar/TopologyEdgePanel.tsx

@@ -3,9 +3,8 @@
  */
 import * as React from 'react';
 import { Edge, isNode, Node } from '@patternfly/react-topology';
-import * as classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { ActionsMenu } from '@console/internal/components/utils';
+import { ActionsMenu, SimpleTabNav } from '@console/internal/components/utils';
 import PrimaryHeading from '@console/shared/src/components/heading/PrimaryHeading';
 import { edgeActions } from '../../actions/edgeActions';
 import { TYPE_TRAFFIC_CONNECTOR } from '../../const';
@@ -44,19 +43,14 @@ const TopologyEdgePanel: React.FC<TopologyEdgePanelProps> = ({ edge }) => {
           </div>
         </PrimaryHeading>
       </div>
-      <ul
-        className={classNames(
-          'co-m-horizontal-nav__menu',
-          'co-m-horizontal-nav__menu--within-sidebar',
-          'co-m-horizontal-nav__menu--within-overview-sidebar',
-          'odc-application-resource-tab',
-        )}
-      >
-        <li className="co-m-horizontal-nav__menu-item">
-          <button type="button">{t('topology~Resources')}</button>
-        </li>
-      </ul>
-      <TopologyEdgeResourcesPanel edge={edge} />
+      <SimpleTabNav
+        tabs={[
+          {
+            name: t('topology~Resources'),
+            component: <TopologyEdgeResourcesPanel edge={edge} />,
+          },
+        ]}
+      />
     </div>
   );
 };

frontend/packages/topology/src/components/side-bar/components/SideBarBody.tsx

@@ -25,9 +25,7 @@ const SimpleTabNavWrapper: React.FC<{ tabs: Tab[] }> = ({ tabs }) => {
     <SimpleTabNav
       selectedTab={selectTabParam || selectedTab || t('topology~Details')}
       tabs={tabs}
-      tabProps={null}
       onClickTab={handleClickTab}
-      additionalClassNames="co-m-horizontal-nav__menu--within-sidebar co-m-horizontal-nav__menu--within-overview-sidebar"
     />
   );
 };

frontend/public/components/app-contents.tsx

@@ -815,7 +815,7 @@ const AppContents: React.FC<{}> = () => {
   const matches = matchRoutes(namespacedRoutes, location);
 
   return (
-    <div id="content">
+    <>
       <PageSection
         hasBodyWrapper={false}
         padding={{ default: 'noPadding' }}
@@ -824,25 +824,19 @@ const AppContents: React.FC<{}> = () => {
         <GlobalNotifications />
         {matches && <NamespaceBar />}
       </PageSection>
-      <div id="content-scrollable">
-        <PageSection
-          hasBodyWrapper={false}
-          className="pf-v6-c-page__main-section--expanded pf-v6-c-page__main-section--no-gap"
-          padding={{ default: 'noPadding' }}
-        >
-          <ErrorBoundaryPage>
-            <React.Suspense fallback={<LoadingBox />}>{contentRouter}</React.Suspense>
-          </ErrorBoundaryPage>
-        </PageSection>
-      </div>
       <PageSection
+        isFilled={true}
         hasBodyWrapper={false}
         padding={{ default: 'noPadding' }}
-        className="pf-v6-c-page__main-section--no-gap"
+        className="pf-v6-c-page__main-section--no-gap pf-v6-u-flex-shrink-1"
+        id="content-scrollable"
       >
-        <TelemetryNotifier />
+        <ErrorBoundaryPage>
+          <React.Suspense fallback={<LoadingBox />}>{contentRouter}</React.Suspense>
+        </ErrorBoundaryPage>
       </PageSection>
-    </div>
+      <TelemetryNotifier />
+    </>
   );
 };
 

frontend/public/components/app.jsx

@@ -224,6 +224,8 @@ const App = (props) => {
       <QuickStartDrawer>
         <div id="app-content" className="co-m-app__content">
           <Page
+            isContentFilled
+            id="content"
             // Need to pass mainTabIndex=null to enable keyboard scrolling as default tabIndex is set to -1 by patternfly
             mainTabIndex={null}
             masthead={