fix(ui): don't show current grid label in select dropdown

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

@@ -7,10 +7,12 @@ import fetchMock from "fetch-mock";
 import { MockGrid } from "__fixtures__/Stories";
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
+import { APIGridT } from "Models/APITypes";
 import { GridLabelSelect } from "./GridLabelSelect";
 
 let alertStore: AlertStore;
 let settingsStore: Settings;
+let grid: APIGridT;
 
 beforeEach(() => {
   fetchMock.reset();
@@ -20,13 +22,27 @@ beforeEach(() => {
 
   alertStore = new AlertStore([]);
   settingsStore = new Settings(null);
+  grid = {
+    labelName: "foo",
+    labelValue: "bar",
+    alertGroups: [],
+    stateCount: {
+      active: 0,
+      suppressed: 0,
+      unprocessed: 0,
+    },
+  };
 
   jest.useFakeTimers();
 });
 
 const MountedGridLabelSelect = () => {
   return mount(
-    <GridLabelSelect alertStore={alertStore} settingsStore={settingsStore} />
+    <GridLabelSelect
+      alertStore={alertStore}
+      settingsStore={settingsStore}
+      grid={grid}
+    />
   );
 };
 

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

@@ -18,6 +18,7 @@ import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
+import { APIGridT } from "Models/APITypes";
 import { CommonPopperModifiers } from "Common/Popper";
 import { NewLabelName, StringToOption, OptionT } from "Common/Select";
 import { DropdownSlide } from "Components/Animations/DropdownSlide";
@@ -29,7 +30,8 @@ const NullContainer: FC = () => null;
 const GridLabelNameSelect: FC<{
   alertStore: AlertStore;
   settingsStore: Settings;
-}> = ({ alertStore, settingsStore }) => {
+  grid: APIGridT;
+}> = ({ alertStore, settingsStore, grid }) => {
   const loadOptions = (
     inputValue: string,
     callback: (options: OptionT[]) => void
@@ -59,6 +61,7 @@ const GridLabelNameSelect: FC<{
 
     callback(
       Object.keys(labelNames)
+        .filter((labelName) => labelName !== grid.labelName)
         .sort()
         .map((key) => StringToOption(key))
     );
@@ -94,12 +97,14 @@ const Dropdown: FC<{
   popperStyle?: CSSProperties;
   alertStore: AlertStore;
   settingsStore: Settings;
+  grid: APIGridT;
 }> = ({
   popperPlacement,
   popperRef,
   popperStyle,
   alertStore,
   settingsStore,
+  grid,
 }) => {
   return (
     <div
@@ -115,6 +120,7 @@ const Dropdown: FC<{
       <GridLabelNameSelect
         alertStore={alertStore}
         settingsStore={settingsStore}
+        grid={grid}
       />
     </div>
   );
@@ -123,7 +129,8 @@ const Dropdown: FC<{
 const GridLabelSelect: FC<{
   alertStore: AlertStore;
   settingsStore: Settings;
-}> = observer(({ alertStore, settingsStore }) => {
+  grid: APIGridT;
+}> = observer(({ alertStore, settingsStore, grid }) => {
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const hide = useCallback(() => setIsVisible(false), []);
   const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]);
@@ -155,6 +162,7 @@ const GridLabelSelect: FC<{
                 popperStyle={style}
                 alertStore={alertStore}
                 settingsStore={settingsStore}
+                grid={grid}
               />
             )}
           </Popper>

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

@@ -44,6 +44,7 @@ const Swimlane: FC<{
           <GridLabelSelect
             alertStore={alertStore}
             settingsStore={settingsStore}
+            grid={grid}
           />
         </span>
       )}