Merge pull request RedHatInsights#308 from platex-rehor-bot/bot/RHCLOUD-47391

fix(help-panel): guard rendering with environment feature flag

Author: platex-rehor-bot

cypress/component/HelpPanel.cy.tsx

@@ -22,6 +22,11 @@ const defaultFlags: IConfig['bootstrap'] = [{
       enabled: true,
       impressionData: false,
       variant: {name: 'disabled', enabled: false},
+    }, {
+      name: 'platform.va.environment.enabled',
+      enabled: true,
+      impressionData: false,
+      variant: {name: 'disabled', enabled: false},
     }]
 
 // Helper function to get message text for testing

src/components/HelpPanel/HelpPanelContent.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import HelpPanelContent from './HelpPanelContent';
+
+jest.mock('@unleash/proxy-client-react', () => ({
+  useFlag: () => true,
+  useFlags: () => [
+    { name: 'platform.chrome.help-panel_search', enabled: true },
+    { name: 'platform.chrome.help-panel_knowledge-base', enabled: true },
+    { name: 'platform.chrome.help-panel_chatbot', enabled: true },
+  ],
+}));
+
+jest.mock('./HelpPanelCustomTabs', () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const MockTabs = React.forwardRef((_props: unknown, _ref: unknown) => (
+    <div data-testid="help-panel-custom-tabs">Help Panel Tabs</div>
+  ));
+  MockTabs.displayName = 'MockHelpPanelCustomTabs';
+  return {
+    __esModule: true,
+    default: MockTabs,
+  };
+});
+
+jest.mock('./HelpPanelCustomTabs.scss', () => ({}));
+
+const renderWithIntl = (ui: React.ReactElement) => {
+  return render(
+    <IntlProvider locale="en" defaultLocale="en" messages={{}}>
+      {ui}
+    </IntlProvider>
+  );
+};
+
+describe('HelpPanelContent', () => {
+  const mockToggleDrawer = jest.fn();
+
+  beforeEach(() => {
+    mockToggleDrawer.mockClear();
+  });
+
+  it('renders the full help panel with tabs', () => {
+    renderWithIntl(<HelpPanelContent toggleDrawer={mockToggleDrawer} />);
+
+    expect(screen.getByTestId('help-panel-custom-tabs')).toBeInTheDocument();
+    expect(screen.getByText('Help')).toBeInTheDocument();
+  });
+
+  it('renders the status page link in header', () => {
+    renderWithIntl(<HelpPanelContent toggleDrawer={mockToggleDrawer} />);
+
+    const statusLink = screen.getByText('Red Hat status page');
+    expect(statusLink).toBeInTheDocument();
+    expect(statusLink.closest('a')).toHaveAttribute(
+      'href',
+      'https://status.redhat.com/'
+    );
+  });
+
+  it('renders close button that calls toggleDrawer', () => {
+    renderWithIntl(<HelpPanelContent toggleDrawer={mockToggleDrawer} />);
+
+    const closeButton = document.querySelector(
+      '[data-ouia-component-id="help-panel-close-button"]'
+    );
+    expect(closeButton).toBeInTheDocument();
+    fireEvent.click(closeButton!);
+    expect(mockToggleDrawer).toHaveBeenCalledTimes(1);
+  });
+});

src/components/HelpPanel/HelpPanelCustomTabs.test.tsx

@@ -148,7 +148,7 @@ describe('HelpPanelCustomTabs styling hooks', () => {
     expect(findHelpTab).toHaveAttribute('aria-selected', 'true');
   });
 
-  it('hides Virtual Assistant tab when feature flag is disabled', () => {
+  it('hides Virtual Assistant tab when chatbot feature flag is disabled', () => {
     // Override the mock to return false for VA flag
     mockUseFlag.mockImplementation((flagName: string) => {
       if (flagName === 'platform.chrome.help-panel_chatbot') return false;
@@ -170,6 +170,26 @@ describe('HelpPanelCustomTabs styling hooks', () => {
       return true;
     });
   });
+
+  it('hides Virtual Assistant tab when VA environment flag is disabled', () => {
+    mockUseFlag.mockImplementation((flagName: string) => {
+      if (flagName === 'platform.va.environment.enabled') return false;
+      if (flagName === 'platform.chrome.help-panel_chatbot') return true;
+      return true;
+    });
+
+    renderWithIntl(<HelpPanelCustomTabs />);
+
+    const vaTab = screen.queryByRole('tab', { name: /virtual assistant/i });
+    expect(vaTab).not.toBeInTheDocument();
+
+    expect(screen.getByText('Find help')).toBeInTheDocument();
+
+    mockUseFlag.mockImplementation((flagName: string) => {
+      if (flagName === 'platform.chrome.help-panel_chatbot') return true;
+      return true;
+    });
+  });
 });
 
 describe('HelpPanelCustomTabs UI interactions', () => {

src/components/HelpPanel/HelpPanelCustomTabs.tsx

@@ -266,9 +266,11 @@ const HelpPanelCustomTabs = React.forwardRef<HelpPanelCustomTabsRef>(
     const intl = useIntl();
     const chrome = useChrome();
     const vaFlag = useFlag('platform.chrome.help-panel_chatbot');
+    const vaEnvFlag = useFlag('platform.va.environment.enabled');
     const searchFlag = useFlag('platform.chrome.help-panel_search');
+    const showVA = vaFlag && vaEnvFlag;
 
-    const baseTabs = useMemo(() => createBaseTabs(vaFlag), [vaFlag]);
+    const baseTabs = useMemo(() => createBaseTabs(showVA), [showVA]);
     // Initialize store with find-help tab already having the correct sub-tab (Search when flag on, else Learn)
     // so content is correct on first paint and tests don't depend on a follow-up effect.
     const initialTabs = useMemo(