expose closeDrawer func to ApplicationDrawer

Author: debsmita1

workspaces/lightspeed/packages/app/src/components/Root/ApplicationDrawer.tsx

@@ -20,6 +20,7 @@ import {
   useCallback,
   useMemo,
   useEffect,
+  useRef,
 } from 'react';
 import { CustomDrawer } from './CustomDrawer';
 
@@ -33,6 +34,7 @@ export interface DrawerPartialState {
   isDrawerOpen: boolean;
   drawerWidth: number;
   setDrawerWidth: (width: number) => void;
+  closeDrawer: () => void;
 }
 
 /**
@@ -69,12 +71,12 @@ export interface ApplicationDrawerProps {
   drawerContents: DrawerContentType[];
   /**
    * Array of state exposer components from drawer plugins
-   * These are typically mounted via `application/drawer-state` mount point
+   * These are typically mounted via `application/internal/drawer-state` mount point
    *
    * In RHDH dynamic plugins, this would come from:
    * ```yaml
    * mountPoints:
-   *   - mountPoint: application/drawer-state
+   *   - mountPoint: application/internal/drawer-state
    *     importName: TestDrawerStateExposer
    * ```
    */
@@ -85,55 +87,85 @@ export const ApplicationDrawer = ({
   drawerContents,
   stateExposers = [],
 }: ApplicationDrawerProps) => {
-  // Collect drawer states from all state exposers
-  const [drawerStates, setDrawerStates] = useState<
-    Record<string, DrawerPartialState>
-  >({});
-
-  // Callback for state exposers to report their state
-  const handleStateChange = useCallback((state: DrawerPartialState) => {
-    setDrawerStates(prev => {
-      // Only update if something actually changed
-      const existing = prev[state.id];
-      if (
-        existing &&
-        existing.isDrawerOpen === state.isDrawerOpen &&
-        existing.drawerWidth === state.drawerWidth &&
-        existing.setDrawerWidth === state.setDrawerWidth
+  const drawerStatesRef = useRef<Map<string, DrawerPartialState>>(new Map());
+  const [, forceUpdate] = useState({});
+  const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
+
+  const handleStateChange = useCallback(
+    (state: DrawerPartialState) => {
+      const prev = drawerStatesRef.current.get(state.id);
+      const hasChanged =
+        !prev ||
+        prev.isDrawerOpen !== state.isDrawerOpen ||
+        prev.drawerWidth !== state.drawerWidth ||
+        prev.setDrawerWidth !== state.setDrawerWidth;
+
+      // If drawer just opened then make it the active drawer
+      if (!prev?.isDrawerOpen && state.isDrawerOpen) {
+        setActiveDrawerId(state.id);
+      }
+      // If drawer just closed and it was the active one, clear active drawer
+      else if (
+        prev?.isDrawerOpen &&
+        !state.isDrawerOpen &&
+        state.id === activeDrawerId
       ) {
-        return prev;
+        setActiveDrawerId(null);
+      }
+
+      drawerStatesRef.current.set(state.id, state);
+
+      if (hasChanged) {
+        forceUpdate({});
       }
-      return { ...prev, [state.id]: state };
-    });
-  }, []);
-
-  // Convert states record to array
-  const statesArray = useMemo(
-    () => Object.values(drawerStates),
-    [drawerStates],
+    },
+    [activeDrawerId],
+  );
+
+  const drawerStates = Array.from(drawerStatesRef.current.values());
+
+  const allDrawers = useMemo(
+    () =>
+      drawerStates
+        .map(state => {
+          const content = drawerContents.find(c => c.id === state.id);
+          if (!content) return null;
+
+          return {
+            state,
+            Component: content.Component,
+            priority: content.priority,
+          };
+        })
+        .filter(Boolean),
+    [drawerStates, drawerContents],
   );
 
-  // Get active drawer - find the open drawer with highest priority
-  const activeDrawer = useMemo(() => {
-    return statesArray
-      .filter(state => state.isDrawerOpen)
-      .map(state => {
-        const content = drawerContents.find(c => c.id === state.id);
-        if (!content) return null;
-        return { ...state, ...content };
-      })
-      .filter(Boolean)
-      .sort((a, b) => (b?.priority ?? -1) - (a?.priority ?? -1))[0];
-  }, [statesArray, drawerContents]);
+  const activeDrawer =
+    allDrawers.find(d => d?.state.id === activeDrawerId) || null;
+
+  // Close all other drawers when one becomes active
+  useEffect(() => {
+    if (activeDrawerId) {
+      drawerStates.forEach(state => {
+        if (state.id !== activeDrawerId && state.isDrawerOpen) {
+          state.closeDrawer();
+        }
+      });
+    }
+  }, [activeDrawerId, drawerStates]);
 
   // Manage CSS classes and variables for layout adjustments
   useEffect(() => {
     if (activeDrawer) {
-      const className = `docked-drawer-open`;
-      const cssVar = `--docked-drawer-width`;
+      const className = 'docked-drawer-open';
+      const cssVar = '--docked-drawer-width';
 
       document.body.classList.add(className);
-      document.body.style.setProperty(cssVar, `${activeDrawer.drawerWidth}px`);
+      document.body.style.setProperty(
+        cssVar,
+        `${activeDrawer.state.drawerWidth}px`,
+      );
 
       return () => {
         document.body.classList.remove(className);
@@ -142,32 +174,24 @@ export const ApplicationDrawer = ({
     }
     return undefined;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeDrawer?.id, activeDrawer?.drawerWidth]);
-
-  // Wrapper to handle the width change callback type
-  const handleWidthChange = useCallback(
-    (width: number) => {
-      activeDrawer?.setDrawerWidth(width);
-    },
-    [activeDrawer],
-  );
+  }, [activeDrawer?.state.id, activeDrawer?.state.drawerWidth]);
 
   return (
     <>
       {/* Render all state exposers - they return null but report their state */}
       {stateExposers.map(({ Component }, index) => (
         <Component
-          key={`${index}-${Component.displayName}`}
+          key={`drawer-${Component.displayName || index}`}
           onStateChange={handleStateChange}
         />
       ))}
 
       {/* Render the active drawer */}
       {activeDrawer && (
         <CustomDrawer
-          isDrawerOpen
-          drawerWidth={activeDrawer.drawerWidth}
-          onWidthChange={handleWidthChange}
+          isDrawerOpen={activeDrawer.state.isDrawerOpen}
+          drawerWidth={activeDrawer.state.drawerWidth}
+          onWidthChange={activeDrawer.state.setDrawerWidth}
         >
           <activeDrawer.Component />
         </CustomDrawer>

workspaces/lightspeed/plugins/lightspeed/report.api.md

@@ -71,6 +71,7 @@ export type DrawerState = {
     isDrawerOpen: boolean;
     drawerWidth: number;
     setDrawerWidth: (width: number) => void;
+    closeDrawer: () => void;
 };
 
 // @public

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedDrawerProvider.tsx

@@ -66,12 +66,24 @@ export const LightspeedDrawerProvider = ({ children }: PropsWithChildren) => {
       } else {
         setCurrentConversationIdState(undefined);
       }
-      setDisplayModeState(ChatbotDisplayMode.embedded);
+      // Update this to fullscreen only when it is not already in the docked mode
+      setDisplayModeState(prev => {
+        if (prev === ChatbotDisplayMode.docked) {
+          return prev; // Don't override docked mode
+        }
+        return ChatbotDisplayMode.embedded;
+      });
       setIsOpen(true);
-    } else if (displayModeState === ChatbotDisplayMode.embedded) {
-      setDisplayModeState(ChatbotDisplayMode.default);
+    } else {
+      // When leaving lightspeed route, update this only when the current mode is fullscreen
+      setDisplayModeState(prev => {
+        if (prev === ChatbotDisplayMode.embedded) {
+          return ChatbotDisplayMode.default;
+        }
+        return prev;
+      });
     }
-  }, [isLightspeedRoute, location.pathname, displayModeState]);
+  }, [isLightspeedRoute, location.pathname]);
 
   // Open chatbot in overlay mode
   const openChatbot = useCallback(() => {

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedDrawerStateExposer.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useEffect } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { ChatbotDisplayMode } from '@patternfly/chatbot';
 
@@ -29,6 +29,7 @@ export type DrawerState = {
   isDrawerOpen: boolean;
   drawerWidth: number;
   setDrawerWidth: (width: number) => void;
+  closeDrawer: () => void;
 };
 
 /**
@@ -53,15 +54,27 @@ export type DrawerStateExposerProps = {
 export const LightspeedDrawerStateExposer = ({
   onStateChange,
 }: DrawerStateExposerProps) => {
-  const { displayMode, drawerWidth, setDrawerWidth } =
+  const { displayMode, drawerWidth, setDrawerWidth, toggleChatbot } =
     useLightspeedDrawerContext();
+
+  const isDrawerOpen = displayMode === ChatbotDisplayMode.docked;
+
+  const toggleChatbotRef = useRef(toggleChatbot);
+  toggleChatbotRef.current = toggleChatbot;
+
+  const closeDrawer = useCallback(() => {
+    toggleChatbotRef.current();
+  }, []);
+
   useEffect(() => {
     onStateChange({
       id: 'lightspeed',
-      isDrawerOpen: displayMode === ChatbotDisplayMode.docked,
+      isDrawerOpen,
       drawerWidth,
       setDrawerWidth,
+      closeDrawer,
     });
-  }, [displayMode, drawerWidth, onStateChange, setDrawerWidth]);
+  }, [isDrawerOpen, drawerWidth, setDrawerWidth, closeDrawer, onStateChange]);
+
   return null;
 };

workspaces/lightspeed/plugins/lightspeed/src/components/__tests__/LightspeedDrawerStateExposer.test.tsx

@@ -26,10 +26,11 @@ import {
 describe('LightspeedDrawerStateExposer', () => {
   const mockSetDrawerWidth = jest.fn();
   const mockOnStateChange = jest.fn();
+  const mockToggleChatbot = jest.fn();
 
   const createContextValue = (overrides = {}) => ({
     isChatbotActive: false,
-    toggleChatbot: jest.fn(),
+    toggleChatbot: mockToggleChatbot,
     displayMode: ChatbotDisplayMode.default,
     setDisplayMode: jest.fn(),
     drawerWidth: 500,
@@ -62,6 +63,7 @@ describe('LightspeedDrawerStateExposer', () => {
         isDrawerOpen: false,
         drawerWidth: 500,
         setDrawerWidth: mockSetDrawerWidth,
+        closeDrawer: expect.any(Function),
       });
     });
   });
@@ -216,4 +218,14 @@ describe('LightspeedDrawerStateExposer', () => {
       expect(callArg.setDrawerWidth).toBe(mockSetDrawerWidth);
     });
   });
+
+  it('should call toggleChatbot when closeDrawer is invoked', async () => {
+    renderWithContext(createContextValue());
+
+    await waitFor(() => {
+      const callArg = mockOnStateChange.mock.calls[0][0] as DrawerState;
+      callArg.closeDrawer();
+      expect(mockToggleChatbot).toHaveBeenCalledTimes(1);
+    });
+  });
 });