Moved tag filter to separate component to avoid re fetching issues

dashboard/src/main/home/cluster-dashboard/ClusterDashboard.tsx

@@ -32,6 +32,7 @@ import JobRunTable from "./chart/JobRunTable";
 import SwitchBase from "@material-ui/core/internal/SwitchBase";
 import Selector from "components/Selector";
 import TabSelector from "components/TabSelector";
+import TagFilter from "./TagFilter";
 
 // @ts-ignore
 const LazyDatabasesRoutes = loadable(() => import("./databases/routes.tsx"), {
@@ -60,8 +61,7 @@ type StateType = {
   currentChart: ChartType | null;
   isMetricsInstalled: boolean;
   showRuns: boolean;
-  tags: any[];
-  selectedTag: string;
+  selectedTag: any;
 };
 
 // TODO: should try to maintain single source of truth b/w router and context/state (ex: namespace -> being managed in parallel right now so highly inextensible and routing is fragile)
@@ -75,22 +75,9 @@ class ClusterDashboard extends Component<PropsType, StateType> {
     currentChart: null as ChartType | null,
     isMetricsInstalled: false,
     showRuns: false,
-    tags: [] as any[],
     selectedTag: "none",
   };
 
-  getTags() {
-    const { currentProject } = this.context;
-
-    api
-      .getTagsByProjectId("<token>", {}, { project_id: currentProject.id })
-      .then((res) => {
-        const tags = res.data;
-
-        this.setState({ tags });
-      });
-  }
-
   componentDidMount() {
     let { currentCluster, currentProject } = this.context;
     let params = this.props.match.params as any;
@@ -114,8 +101,6 @@ class ClusterDashboard extends Component<PropsType, StateType> {
       .catch(() => {
         this.setState({ isMetricsInstalled: false });
       });
-
-    this.getTags();
   }
 
   componentDidUpdate(prevProps: PropsType) {
@@ -150,8 +135,6 @@ class ClusterDashboard extends Component<PropsType, StateType> {
               this.state.namespace === null ? "default" : this.state.namespace,
           })
       );
-
-      this.getTags();
     }
   }
 
@@ -160,25 +143,11 @@ class ClusterDashboard extends Component<PropsType, StateType> {
 
     return (
       <>
-        <StyledTagSelector>
-          <Label>
-            <i className="material-icons">filter_alt</i>
-            Tag
-          </Label>
-          <Selector
-            activeValue={this.state.selectedTag}
-            options={[{ label: "No tag selected", value: "none" }].concat(
-              this.state.tags.map((tag) => ({
-                value: tag.name,
-                label: tag.name,
-              }))
-            )}
-            setActiveValue={(newVal) => this.setState({ selectedTag: newVal })}
-            width={"150px"}
-            dropdownWidth="fit-content"
-          />
-        </StyledTagSelector>
-
+        <TagFilter
+          onSelect={(newSelectedTag) =>
+            this.setState({ selectedTag: newSelectedTag })
+          }
+        />
         <NamespaceSelector
           setNamespace={(namespace) =>
             this.setState({ namespace }, () => {
@@ -207,10 +176,6 @@ class ClusterDashboard extends Component<PropsType, StateType> {
       ["get", "create"]
     );
 
-    const currentTag = this.state.tags.find(
-      (tag) => tag.name === this.state.selectedTag
-    );
-
     return (
       <>
         <ControlRow>
@@ -232,7 +197,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
           lastRunStatus={this.state.lastRunStatus}
           namespace={this.state.namespace}
           sortType={this.state.sortType}
-          selectedTag={currentTag}
+          selectedTag={this.state.selectedTag}
         />
       </>
     );
@@ -246,10 +211,6 @@ class ClusterDashboard extends Component<PropsType, StateType> {
       ["get", "create"]
     );
 
-    const currentTag = this.state.tags.find(
-      (tag) => tag.name === this.state.selectedTag
-    );
-
     return (
       <>
         <TabSelector
@@ -300,7 +261,7 @@ class ClusterDashboard extends Component<PropsType, StateType> {
             lastRunStatus={this.state.lastRunStatus}
             namespace={this.state.namespace}
             sortType={this.state.sortType}
-            selectedTag={currentTag}
+            selectedTag={this.state.selectedTag}
           />
         </HidableElement>
       </>
@@ -536,20 +497,3 @@ const SortFilterWrapper = styled.div`
     margin-left: 30px;
   }
 `;
-
-const Label = styled.div`
-  display: flex;
-  align-items: center;
-  margin-right: 12px;
-
-  > i {
-    margin-right: 8px;
-    font-size: 18px;
-  }
-`;
-
-const StyledTagSelector = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-`;

dashboard/src/main/home/cluster-dashboard/TagFilter.tsx

@@ -0,0 +1,71 @@
+import Selector from "components/Selector";
+import React, { useContext, useEffect, useState } from "react";
+import api from "shared/api";
+import { Context } from "shared/Context";
+import styled from "styled-components";
+
+const TagFilter = ({ onSelect }: { onSelect: (tag: any) => void }) => {
+  const { currentProject } = useContext(Context);
+  const [selectedTag, setSelectedTag] = useState("none");
+  const [tags, setTags] = useState([]);
+
+  useEffect(() => {
+    let isSubscribed = true;
+    api
+      .getTagsByProjectId("<token>", {}, { project_id: currentProject.id })
+      .then((res) => {
+        const newTags = res.data;
+
+        setTags(newTags);
+      });
+
+    return () => {
+      isSubscribed = false;
+    };
+  }, [currentProject]);
+
+  useEffect(() => {
+    const currentTag = tags.find((tag) => tag.name === selectedTag);
+    onSelect(currentTag);
+  }, [selectedTag]);
+
+  return (
+    <StyledTagSelector>
+      <Label>
+        <i className="material-icons">filter_alt</i>
+        Tag
+      </Label>
+      <Selector
+        activeValue={selectedTag}
+        options={[{ label: "No tag selected", value: "none" }].concat(
+          tags.map((tag) => ({
+            value: tag.name,
+            label: tag.name,
+          }))
+        )}
+        setActiveValue={(newVal) => setSelectedTag(newVal)}
+        width={"150px"}
+        dropdownWidth="fit-content"
+      />
+    </StyledTagSelector>
+  );
+};
+
+export default TagFilter;
+
+const Label = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+
+  > i {
+    margin-right: 8px;
+    font-size: 18px;
+  }
+`;
+
+const StyledTagSelector = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+`;