fix(ui): ensure each grid has a correct zIndex

Fixes #3586

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx

@@ -154,14 +154,9 @@ const AlertMenu: FC<{
     const [isHidden, setIsHidden] = useState<boolean>(true);
 
     const toggle = useCallback(() => {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: isHidden, labelValue: grid.labelValue },
-        })
-      );
       setIsMenuOpen(isHidden);
       setIsHidden(!isHidden);
-    }, [grid.labelValue, isHidden, setIsMenuOpen]);
+    }, [isHidden, setIsMenuOpen]);
 
     const hide = useCallback(() => {
       setIsHidden(true);

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx

@@ -153,14 +153,9 @@ const GroupMenu: FC<{
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
   const toggle = useCallback(() => {
-    window.dispatchEvent(
-      new CustomEvent("gridMenuOpen", {
-        detail: { isOpen: isHidden, labelValue: grid.labelValue },
-      })
-    );
     setIsMenuOpen(isHidden);
     setIsHidden(!isHidden);
-  }, [setIsMenuOpen, isHidden, grid.labelValue]);
+  }, [setIsMenuOpen, isHidden]);
 
   const hide = useCallback(() => {
     setIsHidden(true);

ui/src/Components/Grid/AlertGrid/Grid.tsx

@@ -40,6 +40,7 @@ const Grid: FC<{
   grid: APIGridT;
   outerPadding: number;
   paddingTop: number;
+  zIndex: number;
 }> = ({
   alertStore,
   settingsStore,
@@ -49,6 +50,7 @@ const Grid: FC<{
   grid,
   outerPadding,
   paddingTop,
+  zIndex,
 }) => {
   const context = React.useContext(ThemeContext);
   const { ref, repack } = useGrid(gridSizesConfig);
@@ -109,27 +111,11 @@ const Grid: FC<{
     repack();
   });
 
-  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
-  const onMenuOpen = useCallback(
-    (event) => {
-      if (event.detail.labelValue === grid.labelValue) {
-        setIsMenuOpen(event.detail.isOpen);
-      }
-    },
-    [grid.labelValue]
-  );
-  useEffect(() => {
-    window.addEventListener("gridMenuOpen", onMenuOpen);
-    return () => {
-      window.removeEventListener("gridMenuOpen", onMenuOpen);
-    };
-  }, [onMenuOpen]);
-
   return (
     <div
       style={{
-        position: isMenuOpen ? "relative" : undefined,
-        zIndex: isMenuOpen ? 102 : undefined,
+        position: "relative",
+        zIndex: zIndex,
       }}
     >
       <CSSTransition

ui/src/Components/Grid/AlertGrid/GridLabelSelect.test.tsx

@@ -176,7 +176,7 @@ describe("<GridLabelSelect />", () => {
 
     tree.find("span.components-grid-label-select-dropdown").simulate("click");
     expect(tree.find("div.components-grid-label-select-menu")).toHaveLength(1);
-    expect(tree.find("div").at(1).props().style?.zIndex).toBe(102);
+    expect(tree.find("div").at(1).props().style?.zIndex).toBe(101);
 
     tree.find("span.components-grid-label-select-dropdown").simulate("click");
     act(() => {
@@ -184,82 +184,8 @@ describe("<GridLabelSelect />", () => {
     });
     tree.update();
     expect(tree.find("div.components-grid-label-select-menu")).toHaveLength(0);
-    expect(tree.find("div").at(1).props().style?.zIndex).toBeUndefined();
+    expect(tree.find("div").at(1).props().style?.zIndex).toBe(101);
 
     await act(() => promise);
   });
-
-  it("sending event from current grid sets z-index", () => {
-    alertStore.data.setGrids([
-      {
-        labelName: "foo",
-        labelValue: "baz",
-        alertGroups: [],
-        totalGroups: 0,
-        stateCount: {
-          unprocessed: 1,
-          suppressed: 2,
-          active: 3,
-        },
-      },
-    ]);
-    const tree = mount(
-      <AlertGrid
-        alertStore={alertStore}
-        settingsStore={settingsStore}
-        silenceFormStore={silenceFormStore}
-      />,
-      {
-        wrappingComponent: ThemeContext.Provider,
-        wrappingComponentProps: { value: MockThemeContextWithoutAnimations },
-      }
-    );
-
-    act(() => {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: true, labelValue: "baz" },
-        })
-      );
-    });
-    tree.update();
-    expect(tree.find("div").at(1).props().style?.zIndex).toBe(102);
-  });
-
-  it("sending event from a different grid is ignored", () => {
-    alertStore.data.setGrids([
-      {
-        labelName: "foo",
-        labelValue: "baz",
-        alertGroups: [],
-        totalGroups: 0,
-        stateCount: {
-          unprocessed: 1,
-          suppressed: 2,
-          active: 3,
-        },
-      },
-    ]);
-    const tree = mount(
-      <AlertGrid
-        alertStore={alertStore}
-        settingsStore={settingsStore}
-        silenceFormStore={silenceFormStore}
-      />,
-      {
-        wrappingComponent: ThemeContext.Provider,
-        wrappingComponentProps: { value: MockThemeContextWithoutAnimations },
-      }
-    );
-
-    act(() => {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: true, labelValue: "fake" },
-        })
-      );
-    });
-    tree.update();
-    expect(tree.find("div").at(1).props().style?.zIndex).toBeUndefined();
-  });
 });

ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx

@@ -135,21 +135,8 @@ const GridLabelSelect: FC<{
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const hide = useCallback(() => setIsVisible(false), []);
   const toggle = useCallback(() => {
-    if (isVisible) {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: false, labelValue: grid.labelValue },
-        })
-      );
-    } else {
-      window.dispatchEvent(
-        new CustomEvent("gridMenuOpen", {
-          detail: { isOpen: true, labelValue: grid.labelValue },
-        })
-      );
-    }
     setIsVisible(!isVisible);
-  }, [isVisible, grid.labelValue]);
+  }, [isVisible]);
   const ref = useRef<HTMLDivElement | null>(null);
   useOnClickOutside(ref, hide, isVisible);
 

ui/src/Components/Grid/AlertGrid/index.test.tsx

@@ -115,6 +115,7 @@ const ShallowGrid = () => {
       grid={MockGrid()}
       outerPadding={0}
       paddingTop={0}
+      zIndex={101}
     />
   );
 };
@@ -130,6 +131,7 @@ const MountedGrid = (theme?: ThemeCtx) => {
       grid={MockGrid()}
       outerPadding={0}
       paddingTop={0}
+      zIndex={101}
     />,
     {
       wrappingComponent: ThemeContext.Provider,
@@ -237,6 +239,7 @@ describe("<Grid />", () => {
         grid={alertStore.data.grids[0]}
         outerPadding={0}
         paddingTop={0}
+        zIndex={101}
       />,
       {
         wrappingComponent: ThemeContext.Provider,
@@ -273,6 +276,7 @@ describe("<Grid />", () => {
         grid={alertStore.data.grids[0]}
         outerPadding={0}
         paddingTop={0}
+        zIndex={101}
       />,
       {
         wrappingComponent: ThemeContext.Provider,

ui/src/Components/Grid/AlertGrid/index.tsx

@@ -76,7 +76,7 @@ const AlertGrid: FC<{
           ref.current = el as HTMLDivElement;
         }}
       />
-      {alertStore.data.grids.map((grid) => (
+      {alertStore.data.grids.map((grid, index) => (
         <Grid
           key={`${grid.labelName}/${grid.labelValue}`}
           alertStore={alertStore}
@@ -87,6 +87,7 @@ const AlertGrid: FC<{
           grid={grid}
           outerPadding={alertStore.data.gridPadding}
           paddingTop={paddingTop}
+          zIndex={100 + alertStore.data.grids.length - index}
         />
       ))}
     </>