Upgrade unsaved Realization Filter settings actions

- Move dialog to settings panel level - Add GUI events and state in message broker for top level handling
equinor · Nov 6, 2024 · cdfafac · cdfafac
1 parent a2239ff
commit cdfafac
Show file tree

Hide file tree

Showing 5 changed files with 256 additions and 125 deletions.
diff --git a/frontend/src/framework/GuiMessageBroker.ts b/frontend/src/framework/GuiMessageBroker.ts
@@ -4,6 +4,8 @@ import { isDevMode } from "@lib/utils/devMode";
 import { Size2D } from "@lib/utils/geometry";
 import { Vec2 } from "@lib/utils/vec2";
 
+import { UnsavedChangesAction } from "./types/unsavedChangesAction";
+
 export enum LeftDrawerContent {
     ModuleSettings = "ModuleSettings",
     ModulesList = "ModulesList",
@@ -27,6 +29,7 @@ export enum GuiState {
     EditDataChannelConnections = "editDataChannelConnections",
     RightSettingsPanelWidthInPercent = "rightSettingsPanelWidthInPercent",
     AppInitialized = "appInitialized",
+    NumberOfUnsavedRealizationFilters = "numberOfUnsavedRealizationFilters",
 }
 
 export enum GuiEvent {
@@ -43,6 +46,8 @@ export enum GuiEvent {
     DataChannelConnectionsChange = "dataChannelConnectionsChange",
     DataChannelNodeHover = "dataChannelNodeHover",
     DataChannelNodeUnhover = "dataChannelNodeUnhover",
+    UnsavedRealizationFilterSettingsAction = "unsavedRealizationFilterSettingsAction",
+    RealizationFilterSettingsNotVisible = "realizationFilterSettingsNotVisible",
 }
 
 export type GuiEventPayloads = {
@@ -75,6 +80,9 @@ export type GuiEventPayloads = {
     [GuiEvent.DataChannelNodeHover]: {
         connectionAllowed: boolean;
     };
+    [GuiEvent.UnsavedRealizationFilterSettingsAction]: {
+        action: UnsavedChangesAction;
+    };
 };
 
 type GuiStateValueTypes = {
@@ -87,6 +95,7 @@ type GuiStateValueTypes = {
     [GuiState.EditDataChannelConnections]: boolean;
     [GuiState.RightSettingsPanelWidthInPercent]: number;
     [GuiState.AppInitialized]: boolean;
+    [GuiState.NumberOfUnsavedRealizationFilters]: number;
 };
 
 const defaultStates: Map<GuiState, any> = new Map();
@@ -98,12 +107,14 @@ defaultStates.set(GuiState.DataChannelConnectionLayerVisible, false);
 defaultStates.set(GuiState.DevToolsVisible, isDevMode());
 defaultStates.set(GuiState.RightSettingsPanelWidthInPercent, 0);
 defaultStates.set(GuiState.AppInitialized, false);
+defaultStates.set(GuiState.NumberOfUnsavedRealizationFilters, 0);
 
 const persistentStates: GuiState[] = [
     GuiState.LeftSettingsPanelWidthInPercent,
     GuiState.DevToolsVisible,
     GuiState.RightSettingsPanelWidthInPercent,
     GuiState.RightDrawerContent,
+    GuiState.NumberOfUnsavedRealizationFilters,
 ];
 
 export class GuiMessageBroker {

diff --git a/frontend/src/framework/internal/components/NavBar/rightNavBar.tsx b/frontend/src/framework/internal/components/NavBar/rightNavBar.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 
-import { GuiState, RightDrawerContent, useGuiState } from "@framework/GuiMessageBroker";
+import { GuiEvent, GuiState, RightDrawerContent, useGuiState } from "@framework/GuiMessageBroker";
 import { Workbench } from "@framework/Workbench";
+import { Badge } from "@lib/components/Badge";
 import { Button } from "@lib/components/Button";
 import { resolveClassNames } from "@lib/utils/resolveClassNames";
 import { FilterAlt, History } from "@mui/icons-material";
@@ -11,13 +12,14 @@ type RightNavBarProps = {
 };
 
 export const RightNavBar: React.FC<RightNavBarProps> = (props) => {
-    const [drawerContent, setDrawerContent] = useGuiState(
-        props.workbench.getGuiMessageBroker(),
-        GuiState.RightDrawerContent
+    const guiMessageBroker = props.workbench.getGuiMessageBroker();
+    const [drawerContent, setDrawerContent] = useGuiState(guiMessageBroker, GuiState.RightDrawerContent);
+    const [numberOfUnsavedRealizationFilters] = useGuiState(
+        guiMessageBroker,
+        GuiState.NumberOfUnsavedRealizationFilters
     );
-
     const [rightSettingsPanelWidth, setRightSettingsPanelWidth] = useGuiState(
-        props.workbench.getGuiMessageBroker(),
+        guiMessageBroker,
         GuiState.RightSettingsPanelWidthInPercent
     );
 
@@ -28,17 +30,21 @@ export const RightNavBar: React.FC<RightNavBarProps> = (props) => {
     }
 
     function handleRealizationFilterClick() {
-        if (rightSettingsPanelWidth > 0 && drawerContent === RightDrawerContent.RealizationFilterSettings) {
-            setRightSettingsPanelWidth(0);
-            return;
-        }
         ensureSettingsPanelIsVisible();
-        setDrawerContent(RightDrawerContent.RealizationFilterSettings);
+        handleSetDrawerContent(RightDrawerContent.RealizationFilterSettings);
     }
 
     function handleModuleInstanceLogClick() {
         ensureSettingsPanelIsVisible();
-        setDrawerContent(RightDrawerContent.ModuleInstanceLog);
+        handleSetDrawerContent(RightDrawerContent.ModuleInstanceLog);
+    }
+
+    function handleSetDrawerContent(content: RightDrawerContent) {
+        if (content !== RightDrawerContent.RealizationFilterSettings) {
+            guiMessageBroker.publishEvent(GuiEvent.RealizationFilterSettingsNotVisible);
+        }
+
+        setDrawerContent(content);
     }
 
     return (
@@ -49,17 +55,26 @@ export const RightNavBar: React.FC<RightNavBarProps> = (props) => {
         >
             <div className="flex flex-col gap-2 flex-grow">
                 <Button
-                    title="Open realization filter panel"
+                    title={`Open realization filter panel${
+                        numberOfUnsavedRealizationFilters === 0 ? "" : " (unsaved changes)"
+                    }`}
                     onClick={handleRealizationFilterClick}
                     className={resolveClassNames(
                         "w-full",
                         "h-10",
                         drawerContent === RightDrawerContent.RealizationFilterSettings && rightSettingsPanelWidth > 0
-                            ? "text-cyan-600"
+                            ? "text-blue-600"
                             : "!text-slate-800"
                     )}
-                    startIcon={<FilterAlt fontSize="small" className="w-5 h-5 mr-2" />}
-                />
+                >
+                    {numberOfUnsavedRealizationFilters !== 0 ? (
+                        <Badge badgeContent="!" color="bg-blue-400">
+                            <FilterAlt fontSize="small" className="w-5 h-5 mr-2" />
+                        </Badge>
+                    ) : (
+                        <FilterAlt fontSize="small" className="w-5 h-5 mr-2" />
+                    )}
+                </Button>
                 <Button
                     title="Open realization filter panel"
                     onClick={handleModuleInstanceLogClick}
@@ -70,8 +85,9 @@ export const RightNavBar: React.FC<RightNavBarProps> = (props) => {
                             ? "text-cyan-600"
                             : "!text-slate-800"
                     )}
-                    startIcon={<History fontSize="small" className="w-5 h-5 mr-2" />}
-                />
+                >
+                    <History fontSize="small" className="w-5 h-5 mr-2" />
+                </Button>
             </div>
         </div>
     );