Merge pull request RedHatInsights#309 from apinkert/rework-tabs

Remove help panel tabs in favor of static sections

Author: apinkert

cypress/component/HelpPanel.cy.tsx

@@ -34,27 +34,33 @@ test.describe('help panel', async () => {
     await expect(helpPanelTitle).not.toBeVisible();
   });
 
-  test('displays subtabs', async ({page}) => {
+  test('displays main tabs', async ({page}) => {
     await page.getByLabel('Toggle help panel').click();
 
     // Tier 2: Wait for help panel to finish loading
-    const subtabs = page.locator('[data-ouia-component-id="help-panel-subtabs"]');
-    await expect(subtabs).toBeVisible();
+    const tabs = page.locator('[data-ouia-component-id="help-panel-tabs"]');
+    await expect(tabs).toBeVisible();
+
+    // Verify main tabs are present (Learn, APIs, Support, Feedback)
+    await expect(page.getByRole('tab', { name: 'Learn' })).toBeVisible();
+    await expect(page.getByRole('tab', { name: 'APIs' })).toBeVisible();
+    await expect(page.getByRole('tab', { name: 'Support' })).toBeVisible();
+    await expect(page.getByRole('tab', { name: 'Feedback' })).toBeVisible();
   });
 
-  test('allows switching between subtabs', async ({page}) => {
+  test('allows switching between main tabs', async ({page}) => {
     await page.getByLabel('Toggle help panel').click();
 
     // Tier 2: Wait for help panel to finish loading
     const helpPanelTitle = page.locator('[data-ouia-component-id="help-panel-title"]');
     await expect(helpPanelTitle).toBeVisible();
 
-    // Click on APIs subtab
-    const apiTab = page.locator('[data-ouia-component-id="help-panel-subtab-api"]');
+    // Click on APIs tab
+    const apiTab = page.locator('[data-ouia-component-id="help-panel-tab-api"]');
     await apiTab.click();
 
-    // Verify API documentation content is shown by checking for unique content in that tab
-    await expect(page.getByText('No API documentation found matching your criteria.')).toBeVisible();
+    // Verify API documentation content is shown by checking for the description text
+    await expect(page.getByText(/Browse the APIs for Hybrid Cloud Console services/i)).toBeVisible({ timeout: 10000 });
   });
 
   test('displays status page link in header', async ({page}) => {
@@ -70,16 +76,5 @@ test.describe('help panel', async () => {
     await expect(statusPageLink).toHaveText('Red Hat status page');
   });
 
-  test('can add a new tab', async ({page}) => {
-    await page.getByLabel('Toggle help panel').click();
-
-    // Tier 2: Wait for help panel to finish loading
-    const addTabButton = page.locator('[data-ouia-component-id="help-panel-add-tab-button"]');
-    await expect(addTabButton).toBeVisible();
-
-    await addTabButton.click();
-
-    // Verify a new tab appears
-    await expect(page.getByText('New tab')).toBeVisible();
-  });
+  // Test removed: Add tab functionality no longer exists in single-tier tab structure
 });

playwright/help-panel.spec.ts

@@ -129,6 +129,13 @@ const mockHelpPanelHandlers = [
   http.post('/api/quickstarts/v1/favorites', async () => {
     return HttpResponse.json({ success: true });
   }),
+  // Support cases API (empty state) - prevents "Failed to fetch" errors
+  http.post('https://api.access.redhat.com/support/v1/cases/filter', () =>
+    HttpResponse.json({ cases: [] })
+  ),
+  http.post('https://api.access.stage.redhat.com/support/v1/cases/filter', () =>
+    HttpResponse.json({ cases: [] })
+  ),
 ];
 
 const meta: Meta<typeof HelpPanelWrapper> = {
@@ -213,185 +220,9 @@ export const StatusPageLink: Story = {
   },
 };
 
-/**
- * Test opening and closing custom tabs
- */
-export const OpenAndCloseTabs: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for page to load and find the Help button in the header
-    const helpButton = await canvas.findByLabelText(
-      'Toggle help panel',
-      {},
-      { timeout: 5000 }
-    );
-    expect(helpButton).toBeInTheDocument();
-
-    // Click the Help button to open the panel
-    await userEvent.click(helpButton);
-
-    // Wait for the help panel drawer to open
-    await waitFor(
-      () => {
-        const drawer = document.querySelector('.pf-v6-c-drawer.pf-m-expanded');
-        expect(drawer).toBeInTheDocument();
-      },
-      { timeout: 5000 }
-    );
-
-    // Wait for the help panel to be visible
-    await waitFor(
-      () => {
-        const helpPanelTitle = document.querySelector(
-          '[data-ouia-component-id="help-panel-title"]'
-        );
-        expect(helpPanelTitle).toBeInTheDocument();
-      },
-      { timeout: 5000 }
-    );
-
-    // Find the add tab button
-    const addTabButton = document.querySelector(
-      '[data-ouia-component-id="help-panel-add-tab-button"]'
-    ) as HTMLElement;
-    expect(addTabButton).toBeInTheDocument();
-
-    // Click to add a new tab
-    await userEvent.click(addTabButton);
-
-    // Wait for the new tab to appear
-    await waitFor(
-      () => {
-        const newTab = canvas.getByText('New tab');
-        expect(newTab).toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-
-    // Verify the tab is now active by checking for the tab content
-    const newTabButton = canvas.getByRole('tab', { name: 'New tab' });
-    expect(newTabButton).toHaveAttribute('aria-selected', 'true');
-
-    // Find the close button for the new tab
-    // The close button is a sibling of the tab link
-    const tabItem = newTabButton.closest('.pf-v6-c-tabs__item');
-    const closeButton = tabItem?.querySelector(
-      '.pf-v6-c-tabs__item-action button'
-    ) as HTMLElement;
-    expect(closeButton).toBeInTheDocument();
-
-    // Click the close button
-    await userEvent.click(closeButton);
-
-    // Verify the tab is removed
-    await waitFor(
-      () => {
-        const removedTab = canvas.queryByRole('tab', { name: 'New tab' });
-        expect(removedTab).not.toBeInTheDocument();
-      },
-      { timeout: 3000 }
-    );
-  },
-};
-
-/**
- * Test opening multiple tabs and verify overflow dropdown appears
- */
-export const OpenMultipleTabs: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // Wait for page to load and find the Help button in the header
-    const helpButton = await canvas.findByLabelText(
-      'Toggle help panel',
-      {},
-      { timeout: 5000 }
-    );
-    expect(helpButton).toBeInTheDocument();
+// Story removed: Add/close tab functionality no longer exists in single-tier tab structure
 
-    // Click the Help button to open the panel
-    await userEvent.click(helpButton);
-
-    // Wait for the help panel drawer to open
-    await waitFor(
-      () => {
-        const drawer = document.querySelector('.pf-v6-c-drawer.pf-m-expanded');
-        expect(drawer).toBeInTheDocument();
-      },
-      { timeout: 5000 }
-    );
-
-    // Wait for the help panel to be visible
-    await waitFor(
-      () => {
-        const helpPanelTitle = document.querySelector(
-          '[data-ouia-component-id="help-panel-title"]'
-        );
-        expect(helpPanelTitle).toBeInTheDocument();
-      },
-      { timeout: 5000 }
-    );
-
-    // Find the add tab button
-    const addTabButton = document.querySelector(
-      '[data-ouia-component-id="help-panel-add-tab-button"]'
-    ) as HTMLElement;
-
-    // Keep adding tabs until overflow occurs (max 10 attempts to prevent infinite loop)
-    let overflowItem = null;
-    let attempts = 0;
-    const maxAttempts = 10;
-
-    while (!overflowItem && attempts < maxAttempts) {
-      await userEvent.click(addTabButton);
-      attempts++;
-
-      // Wait briefly for the tab to be added
-      await waitFor(
-        () => {
-          const tabs = canvas.queryAllByRole('tab', { name: 'New tab' });
-          expect(tabs.length).toBeGreaterThanOrEqual(attempts);
-        },
-        { timeout: 1000 }
-      ).catch(() => {
-        // Ignore timeout, we'll check overflow anyway
-      });
-
-      // Check if overflow has appeared
-      overflowItem = document.querySelector(
-        '.pf-v6-c-tabs__item.pf-m-overflow'
-      );
-    }
-
-    // Assert that overflow menu appeared
-    expect(overflowItem).toBeTruthy();
-
-    // Find and close the visible new tab(s)
-    const visibleNewTabs = canvas.queryAllByRole('tab', { name: 'New tab' });
-
-    if (visibleNewTabs.length > 0) {
-      // Close the first visible new tab
-      const firstTabItem = visibleNewTabs[0].closest('.pf-v6-c-tabs__item');
-      const closeButton = firstTabItem?.querySelector(
-        '.pf-v6-c-tabs__item-action button'
-      ) as HTMLElement;
-
-      if (closeButton) {
-        await userEvent.click(closeButton);
-
-        // Wait a bit for the tab to close
-        await waitFor(
-          () => {
-            const tabs = canvas.queryAllByRole('tab', { name: 'New tab' });
-            expect(tabs.length).toBeLessThan(visibleNewTabs.length);
-          },
-          { timeout: 3000 }
-        );
-      }
-    }
-  },
-};
+// Story removed: Tab overflow functionality testing no longer relevant with static tabs
 
 /**
  * Test that the drawer close button works

src/components/HelpPanel/HelpPanelContent.stories.tsx

@@ -38,6 +38,8 @@ const HelpPanelContent = ({
       <DrawerHead>
         <Title headingLevel="h2" data-ouia-component-id="help-panel-title">
           Help
+        </Title>
+        <DrawerActions>
           <Button
             variant="link"
             component="a"
@@ -52,8 +54,6 @@ const HelpPanelContent = ({
           >
             {intl.formatMessage(messages.statusPage)}
           </Button>
-        </Title>
-        <DrawerActions>
           <DrawerCloseButton
             onClick={toggleDrawer}
             data-ouia-component-id="help-panel-close-button"

src/components/HelpPanel/HelpPanelContent.tsx

@@ -46,10 +46,7 @@
   background-color: var(--pf-t--global--background--color--primary--default);
 }
 
-// Sub-tabs row (Learn, APIs, etc.): white background on the subtabs container.
-[data-ouia-component-id="help-panel-subtabs"] {
-  background-color: var(--pf-t--global--background--color--primary--default);
-}
+// No sub-tabs in single-tier structure
 
 // Content container (Learn, APIs, Support, etc.) has no background by default; set white
 // so the tab content area does not show the drawer's default background when scrolling.
@@ -63,37 +60,37 @@
   width: calc(100% + 2 * var(--pf-t--global--spacer--md, 1rem));
 }
 
-.lr-c-help-panel-custom-tab {
-  &.persistent-tab {
-    // the disabled close tab action does not hide the action button
-    // has to be hidden by CSS and the width has to be adjusted
-    .pf-v6-c-tabs__item-action {
-      visibility: hidden;
-      width: 0;
-    }
+.lr-c-help-panel-custom-tabs {
+  .pf-v6-c-tabs__list {
+    background-color: var(--pf-t--global--background--color--primary--default);
   }
 
-  // Add max-width to tab titles while keeping them dynamically sized
+  // Make tab titles smaller to fit all tabs without scrolling
   .pf-v6-c-tabs__item-text {
-    max-width: 120px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    font-size: 0.75rem !important;
   }
-}
 
-.lr-c-help-panel-custom-tabs.pf-v6-c-tabs {
-  .pf-v6-c-tabs__item.pf-m-overflow {
-    .pf-v6-c-tabs__link-toggle-icon {
-      // fixes strange alignment of the expand/collapse icon
-      align-self: auto;
-    }
+  // Reduce padding on tab items to fit more tabs
+  .pf-v6-c-tabs__link {
+    padding-left: 0.5rem !important;
+    padding-right: 0.5rem !important;
   }
 
-}
+  // Ensure tabs have the same background as the panel
+  .pf-v6-c-tabs__item {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
+
+  // Active tab should also use the primary background
+  .pf-v6-c-tabs__link {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
 
-.pf-v6-c-tabs__list {
-  overflow-y: hidden;
+  // Move the active tab indicator from top to bottom
+  .pf-v6-c-tabs__link::after {
+    top: auto !important;
+    bottom: 0 !important;
+  }
 }
 
 // Tab content area: flex column so the drawer child can fill height (flex: 1).
@@ -128,21 +125,31 @@
   }
 }
 
-// Status page link styling (in header next to Help title)
+// Status page link styling (in header actions, before close button)
 .lr-c-status-page-link {
   font-size: var(--pf-t--global--font--size--sm) !important;
-  font-weight: var(--pf-t--global--font--weight--normal) !important;
   text-decoration: none !important;
-  margin-left: var(--pf-t--global--spacer--md) !important;
+  margin-right: var(--pf-t--global--spacer--md) !important;
+  // Align with close button vertically
+  align-self: center !important;
+  padding-top: var(--pf-t--global--spacer--sm) !important;
 
   &:hover {
     text-decoration: none !important;
   }
 }
 
-// Prevent horizontal overflow in subtabs by hiding overflow scrollbars
-[data-ouia-component-id="help-panel-subtabs"] {
-  .pf-v6-c-tabs__scroll-button {
-    display: none !important;
-  }
+// Quickstart overlay: positioned above tabs to show quickstart content
+.lr-c-help-panel-quickstart-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--pf-t--global--background--color--primary--default);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
 }