Fix compare and explorer modal interaction.

TerriaJS · Nov 9, 2021 · 3d1e55a · 3d1e55a
1 parent c95cdbe
commit 3d1e55a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 12 deletions.
diff --git a/lib/ReactViews/Compare/Compare.tsx b/lib/ReactViews/Compare/Compare.tsx
@@ -31,6 +31,7 @@ import ItemList from "./ItemList";
 import ItemSelector from "./ItemSelector";
 import LocationDateFilter from "./LocationDateFilter";
 import { Panel, PanelMenu } from "./Panel";
+import { ExplorerWindowElementName } from "../ExplorerWindow/ExplorerWindow";
 
 export type PropsType = {
   viewState: ViewState;
@@ -229,9 +230,18 @@ const Compare: React.FC<PropsType> = observer(props => {
       show ? showItem(item, ImagerySplitDirection.NONE) : hideItem(item)
   );
 
-  const openCatalogExplorer = action(() => {
-    viewState.explorerPanelIsVisible = true;
-  });
+  const openCatalogExplorer = action(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      viewState.explorerPanelIsVisible = true;
+      viewState.setTopElement(ExplorerWindowElementName);
+      // Call to stopPropagation is required to prevent the parent
+      // WorkflowPanel from capturing the click and setting itself as the top
+      // element. If that happens the ExplorerWindow modal will no longer be
+      // the top element and will not hide itself when clicking the workflow
+      // panel.
+      event.stopPropagation();
+    }
+  );
 
   const hideAllContextItems = () => {
     contextItems.forEach(hideItem);

diff --git a/lib/ReactViews/Compare/Panel.tsx b/lib/ReactViews/Compare/Panel.tsx
@@ -65,7 +65,11 @@ const Content = styled.div`
 `;
 
 type PanelMenuProps = {
-  options: { text: string; onSelect: () => void; disabled?: boolean }[];
+  options: {
+    text: string;
+    onSelect: React.MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+  }[];
 };
 
 /**
@@ -85,6 +89,17 @@ export const PanelMenu: React.FC<PanelMenuProps> = ({ options }) => {
     [isOpen]
   );
 
+  const handleClick = (
+    onSelect: React.MouseEventHandler<HTMLButtonElement>,
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => {
+    // If onSelect decides to stop event propogation,
+    // clickAnywhereToCloseMenu() will not work. So we close the menu before
+    // calling onSelect.
+    setIsOpen(false);
+    onSelect(event);
+  };
+
   return (
     <PanelMenuContainer>
       <PanelMenuButton isOpen={isOpen} onClick={() => setIsOpen(true)}>
@@ -93,8 +108,11 @@ export const PanelMenu: React.FC<PanelMenuProps> = ({ options }) => {
       {isOpen && (
         <ul>
           {options.map(({ text, onSelect, disabled }) => (
-            <li>
-              <PanelMenuItem key={text} onClick={onSelect} disabled={disabled}>
+            <li key={text}>
+              <PanelMenuItem
+                onClick={e => handleClick(onSelect, e)}
+                disabled={disabled}
+              >
                 <Text noWrap medium textLight>
                   {text}
                 </Text>

diff --git a/lib/ReactViews/ExplorerWindow/ExplorerWindow.jsx b/lib/ReactViews/ExplorerWindow/ExplorerWindow.jsx
@@ -7,6 +7,8 @@ import ModalPopup from "./ModalPopup";
 import Tabs from "./Tabs";
 import { runInAction } from "mobx";
 
+export const ExplorerWindowElementName = "AddData";
+
 const ExplorerWindow = observer(
   createReactClass({
     displayName: "ExplorerWindow",
@@ -46,7 +48,9 @@ const ExplorerWindow = observer(
         <ModalPopup
           viewState={this.props.viewState}
           isVisible={this.isVisible()}
-          isTopElement={this.props.viewState.topElement === "AddData"}
+          isTopElement={
+            this.props.viewState.topElement === ExplorerWindowElementName
+          }
           onClose={this.onClose}
           onStartAnimatingIn={this.onStartAnimatingIn}
           onDoneAnimatingIn={this.onDoneAnimatingIn}

diff --git a/lib/ReactViews/SidePanel/SidePanel.jsx b/lib/ReactViews/SidePanel/SidePanel.jsx
@@ -8,13 +8,12 @@ import Icon, { StyledIcon } from "../../Styled/Icon";
 import SearchBoxAndResults from "../Search/SearchBoxAndResults";
 import Workbench from "../Workbench/Workbench";
 import FullScreenButton from "./FullScreenButton";
-
 import { useRefForTerria } from "../Hooks/useRefForTerria";
-
 import Box from "../../Styled/Box";
 import Spacing from "../../Styled/Spacing";
 import Text from "../../Styled/Text";
 import Button from "../../Styled/Button";
+import { ExplorerWindowElementName } from "../ExplorerWindow/ExplorerWindow";
 
 const BoxHelpfulHints = styled(Box)``;
 
@@ -140,13 +139,13 @@ const SidePanel = observer(
 
     onAddDataClicked(e) {
       e.stopPropagation();
-      this.props.viewState.setTopElement("AddData");
+      this.props.viewState.setTopElement(ExplorerWindowElementName);
       this.props.viewState.openAddData();
     },
 
     onAddLocalDataClicked(e) {
       e.stopPropagation();
-      this.props.viewState.setTopElement("AddData");
+      this.props.viewState.setTopElement(ExplorerWindowElementName);
       this.props.viewState.openUserData();
     },
     render() {

diff --git a/lib/ReactViews/WelcomeMessage/WelcomeMessage.jsx b/lib/ReactViews/WelcomeMessage/WelcomeMessage.jsx
@@ -14,6 +14,7 @@ import VideoGuide from "../Map/Panels/HelpPanel/VideoGuide";
 import { TourPortalDisplayName } from "../Tour/TourPortal";
 import FadeIn from "../Transitions/FadeIn/FadeIn";
 import SlideUpFadeIn from "../Transitions/SlideUpFadeIn/SlideUpFadeIn";
+import { ExplorerWindowElementName } from "../ExplorerWindow/ExplorerWindow";
 
 export const WELCOME_MESSAGE_NAME = "welcomeMessage";
 export const LOCAL_PROPERTY_KEY = `${WELCOME_MESSAGE_NAME}Prompted`;
@@ -128,7 +129,7 @@ export const WelcomeMessagePure = props => {
           if (shouldExploreData) {
             setShouldExploreData(false);
             viewState.openAddData();
-            viewState.setTopElement("AddData");
+            viewState.setTopElement(ExplorerWindowElementName);
           }
           if (shouldOpenHelp) {
             setShouldOpenHelp(false);