fix(seg): should be able to navigate outside toolbox and come back later (#4196)

platform/ui/src/components/Toolbox/Toolbox.tsx

@@ -26,8 +26,8 @@ function Toolbox({
     buttonSection: buttonSectionId,
   });
 
-  const prevButtonIdsRef = useRef();
-  const prevToolboxStateRef = useRef();
+  const prevButtonIdsRef = useRef('');
+  const prevToolboxStateRef = useRef('');
 
   useEffect(() => {
     const currentButtonIdsStr = JSON.stringify(
@@ -130,7 +130,7 @@ function Toolbox({
     );
 
     api.initializeToolOptions(initializeOptionsWithEnhancements);
-  }, [toolbarButtons, api, toolboxState]);
+  }, [toolbarButtons, api, toolboxState, commandsManager, servicesManager]);
 
   const handleToolOptionChange = (toolName, optionName, newValue) => {
     api.handleToolOptionChange(toolName, optionName, newValue);
@@ -147,7 +147,7 @@ function Toolbox({
       {...props}
       title={title}
       toolbarButtons={toolbarButtons}
-      activeToolOptions={toolboxState.toolOptions?.[toolboxState.activeTool]}
+      toolboxState={toolboxState}
       handleToolSelect={id => api.handleToolSelect(id)}
       handleToolOptionChange={handleToolOptionChange}
       onInteraction={onInteraction}

platform/ui/src/components/Toolbox/ToolboxUI.tsx

@@ -19,13 +19,16 @@ function ToolboxUI(props: withAppTypes) {
   const {
     toolbarButtons,
     handleToolSelect,
-    activeToolOptions,
+    toolboxState,
     numRows,
     servicesManager,
     title,
     useCollapsedPanel = true,
   } = props;
 
+  const { activeTool, toolOptions, selectedEvent } = toolboxState;
+  const activeToolOptions = toolOptions?.[activeTool];
+
   const prevToolOptions = usePrevious(activeToolOptions);
 
   useEffect(() => {
@@ -35,7 +38,7 @@ function ToolboxUI(props: withAppTypes) {
 
     activeToolOptions.forEach((option, index) => {
       const prevOption = prevToolOptions ? prevToolOptions[index] : undefined;
-      if (!prevOption || option.value !== prevOption.value) {
+      if (!prevOption || option.value !== prevOption.value || selectedEvent) {
         const isOptionValid = option.condition
           ? option.condition({ options: activeToolOptions })
           : true;
@@ -45,7 +48,7 @@ function ToolboxUI(props: withAppTypes) {
         }
       }
     });
-  }, [activeToolOptions]);
+  }, [activeToolOptions, selectedEvent]);
 
   const render = () => {
     return (

platform/ui/src/contextProviders/Toolbox/ToolboxContext.tsx

@@ -6,7 +6,7 @@ export const toolboxReducer = (state, action) => {
   const { toolbarSectionId } = action.payload;
 
   if (!state[toolbarSectionId]) {
-    state[toolbarSectionId] = { activeTool: null, toolOptions: {} };
+    state[toolbarSectionId] = { activeTool: null, toolOptions: {}, selectedEvent: false };
   }
 
   switch (action.type) {
@@ -16,6 +16,7 @@ export const toolboxReducer = (state, action) => {
         [toolbarSectionId]: {
           ...state[toolbarSectionId],
           activeTool: action.payload.activeTool,
+          selectedEvent: true,
         },
       };
     case 'UPDATE_TOOL_OPTION':
@@ -24,6 +25,7 @@ export const toolboxReducer = (state, action) => {
         ...state,
         [toolbarSectionId]: {
           ...state[toolbarSectionId],
+          selectedEvent: false,
           toolOptions: {
             ...state[toolbarSectionId].toolOptions,
             [toolName]: state[toolbarSectionId].toolOptions[toolName].map(option =>
@@ -36,6 +38,7 @@ export const toolboxReducer = (state, action) => {
       // Initialize tool options for each toolbarSectionId
       return {
         ...state,
+        selectedEvent: false,
         [action.toolbarSectionId]: {
           ...state[action.toolbarSectionId],
           toolOptions: action.payload,