Merge pull request RedHatInsights#265 from aferd/RHCLOUD-45776

feat(helppanel): release search in stage preview and set as default sub-tab

Author: aferd

cypress/component/HelpPanel.cy.tsx

@@ -94,8 +94,8 @@ describe('HelpPanel', () => {
 
     cy.contains('Help').should('be.visible');
     cy.contains('Find help').should('be.visible');
-    // Should default to Learn tab
-    cy.contains(getMessageText('learnPanelDescription'), { timeout: 10000 }).should('be.visible');
+    // Should default to Search tab when search flag is enabled
+    cy.contains(getMessageText('searchPanelRecentSearch'), { timeout: 10000 }).should('be.visible');
   })
 
   it('should not display sub tabs hidden by FF', () => {
@@ -279,8 +279,8 @@ describe('HelpPanel', () => {
       cy.get('.pf-v6-c-tabs__item').should('have.length', 2) // Back to VA + Find help tabs
     });
 
-    // Should show Learn panel content after closing the extra tab
-    cy.contains(getMessageText('learnPanelDescription')).should('be.visible');
+    // Find help defaults to Search when search flag is enabled; expect Search panel content
+    cy.contains(getMessageText('searchPanelRecentSearch')).should('be.visible');
   })
 
   it('should change tab title when switching sub-tabs', () => {

src/components/HelpPanel/HelpPanelCustomTabs.tsx

@@ -184,10 +184,12 @@ const useTabs = (apiStoreMock: ReturnType<typeof createTabsStore>) => {
 
   useEffect(() => {
     const unsubscribe = subscribe(dispatch);
+    // Sync state from current store (needed when store instance changed, e.g. flags)
+    dispatch();
     return () => {
       unsubscribe();
     };
-  }, []);
+  }, [apiStoreMock]);
 
   return {
     tabs,
@@ -253,17 +255,30 @@ const HelpPanelCustomTabs = React.forwardRef<HelpPanelCustomTabsRef>(
     const intl = useIntl();
     const chrome = useChrome();
     const vaFlag = useFlag('platform.chrome.help-panel_chatbot');
+    const searchFlag = useFlag('platform.chrome.help-panel_search');
 
     const baseTabs = useMemo(() => createBaseTabs(vaFlag), [vaFlag]);
-    const apiStoreMock = useMemo(() => createTabsStore(baseTabs), [baseTabs]);
-
-    // Find the Learn tab index (it might be 0 or 1 depending on VA flag)
-    const learnTabIndex = baseTabs.findIndex(
-      (tab) => tab.tabType === TabType.learn
+    // 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(
+      () =>
+        baseTabs.map((tab) =>
+          tab.id === 'find-help' && searchFlag
+            ? { ...tab, tabType: TabType.search }
+            : tab
+        ),
+      [baseTabs, searchFlag]
+    );
+    const apiStoreMock = useMemo(
+      () => createTabsStore(initialTabs),
+      [initialTabs]
     );
-    const [activeTab, setActiveTab] = useState<TabDefinition>(
-      baseTabs[learnTabIndex]
-    ); // Default to 'Find help' tab (Learn)
+
+    // Default to 'Find help' tab; default sub-tab is Search when search flag is enabled, otherwise Learn
+    const defaultFindHelpTab =
+      initialTabs.find((t) => t.id === 'find-help') ?? initialTabs[0];
+    const [activeTab, setActiveTab] =
+      useState<TabDefinition>(defaultFindHelpTab);
 
     const [newActionTitle, setNewActionTitle] = useState<string | undefined>(
       undefined
@@ -524,13 +539,20 @@ const HelpPanelCustomTabs = React.forwardRef<HelpPanelCustomTabsRef>(
         !activeTab.closeable &&
         !baseTabs.find((tab) => tab.id === activeTab.id)
       ) {
-        // Current active tab is no longer available, default to Learn tab
-        const learnTab = baseTabs.find((tab) => tab.tabType === TabType.learn);
-        if (learnTab) {
-          setActiveTab(learnTab);
+        // Current active tab is no longer available, default to Search tab when available, otherwise Learn tab
+        const findHelpTabFallback = baseTabs.find(
+          (tab) => tab.tabType === TabType.learn
+        );
+        if (findHelpTabFallback) {
+          const fallbackTab = {
+            ...findHelpTabFallback,
+            tabType: searchFlag ? TabType.search : TabType.learn,
+          };
+          updateTab(fallbackTab);
+          setActiveTab(fallbackTab);
         }
       }
-    }, [baseTabs, activeTab.id, activeTab.closeable]);
+    }, [baseTabs, activeTab.id, activeTab.closeable, searchFlag, updateTab]);
 
     useEffect(() => {
       // Ensure the Add tab button has a stable OUIA id

src/components/HelpPanel/HelpPanelTabs/SearchPanel/SearchPanel.tsx

@@ -380,9 +380,14 @@ const SearchPanel = ({
     });
   };
 
-  // Load quickstarts data once on mount
+  // Load quickstarts data once on mount (skip when chrome auth is unavailable, e.g. in tests)
   useEffect(() => {
     let cancelled = false;
+    if (!chrome?.auth?.getUser) {
+      return () => {
+        cancelled = true;
+      };
+    }
     fetchAllData(chrome.auth.getUser, {})
       .then(([, quickStarts]) => {
         if (!cancelled) {