From f087773939b8155ab2b90f76baf0137f4335d815 Mon Sep 17 00:00:00 2001
From: Enya-Yx <enya@appashaa.redmond.corp.microsoft.com>
Date: Thu, 11 Aug 2022 19:21:53 +0800
Subject: [PATCH 1/6] Support navigation back to feature list by back link

---
 ui/src/app.tsx                          |  9 ++++++++-
 ui/src/components/featureList.tsx       | 21 ++++++++++++++++++---
 ui/src/pages/feature/featureDetails.tsx | 11 +++++++++++
 ui/src/pages/feature/features.tsx       |  5 +++--
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/ui/src/app.tsx b/ui/src/app.tsx
index 66a09574a..53d817c4c 100644
--- a/ui/src/app.tsx
+++ b/ui/src/app.tsx
@@ -34,11 +34,18 @@ const App: React.FC = () => {
                 <Routes>
                   <Route path="/dataSources" element={<DataSources />} />
                   <Route path="/features" element={<Features />} />
-                  <Route path="/new-feature" element={<NewFeature />} />
+                  <Route path="/features/:project" element={<Features />} />
+                  <Route
+                    path="/features/:project/:keyword"
+                    element={<Features />}
+                  />
+                  #TODO: better Expression to combine multiple path to same
+                  component?
                   <Route
                     path="/projects/:project/features/:featureId"
                     element={<FeatureDetails />}
                   />
+                  <Route path="/new-feature" element={<NewFeature />} />
                   <Route
                     path="/projects/:project/lineage"
                     element={<LineageGraph />}
diff --git a/ui/src/components/featureList.tsx b/ui/src/components/featureList.tsx
index 82ab0cbe5..1f8cf6564 100644
--- a/ui/src/components/featureList.tsx
+++ b/ui/src/components/featureList.tsx
@@ -14,7 +14,12 @@ import {
 import { Feature } from "../models/model";
 import { fetchProjects, fetchFeatures } from "../api";
 
-const FeatureList: React.FC = () => {
+type Props = {
+  preProject: string;
+  preKeyword: string;
+};
+
+const FeatureList: React.FC<Props> = ({ preProject, preKeyword }) => {
   const navigate = useNavigate();
   const columns = [
     {
@@ -153,9 +158,9 @@ const FeatureList: React.FC = () => {
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(false);
   const [tableData, setTableData] = useState<Feature[]>();
-  const [query, setQuery] = useState<string>("");
+  const [query, setQuery] = useState<string>(preKeyword ?? "");
   const [projects, setProjects] = useState<any>([]);
-  const [project, setProject] = useState<string>("");
+  const [project, setProject] = useState<string>(preProject ?? "");
 
   const fetchData = useCallback(
     async (project) => {
@@ -164,6 +169,8 @@ const FeatureList: React.FC = () => {
       setPage(page);
       setTableData(result);
       setLoading(false);
+      localStorage.setItem("project", project);
+      localStorage.setItem("keyword", query);
     },
     [page, query]
   );
@@ -178,6 +185,13 @@ const FeatureList: React.FC = () => {
     loadProjects();
   }, [loadProjects]);
 
+  useEffect(() => {
+    if (preProject !== "") {
+      console.log("fetch data onload");
+      fetchData(preProject);
+    }
+  }, []);
+
   const onProjectChange = async (value: string) => {
     setProject(value);
     fetchData(value);
@@ -215,6 +229,7 @@ const FeatureList: React.FC = () => {
         ></Select>
       </Form.Item>
       <Input
+        value={query}
         placeholder="keyword"
         style={{ width: "10%", marginLeft: "5px" }}
         onChange={(e) => onKeywordChange(e.target.value)}
diff --git a/ui/src/pages/feature/featureDetails.tsx b/ui/src/pages/feature/featureDetails.tsx
index 1e44fc0ce..583d79bd2 100644
--- a/ui/src/pages/feature/featureDetails.tsx
+++ b/ui/src/pages/feature/featureDetails.tsx
@@ -225,6 +225,9 @@ const FeatureDetails: React.FC = () => {
     navigate(lineageUrl);
   };
 
+  const preProject = localStorage.getItem("project") ?? "";
+  const preKeyword = localStorage.getItem("keyword") ?? "";
+
   const render = (status: QueryStatus): JSX.Element => {
     switch (status) {
       case "error":
@@ -265,6 +268,14 @@ const FeatureDetails: React.FC = () => {
         } else {
           return (
             <>
+              <Button
+                type="link"
+                onClick={() =>
+                  navigate("/features/" + preProject + "/" + preKeyword)
+                }
+              >
+                feature list {">"}
+              </Button>
               <Card>
                 <Title level={3}>{data.attributes.name}</Title>
                 <div>
diff --git a/ui/src/pages/feature/features.tsx b/ui/src/pages/feature/features.tsx
index 0a463eb34..6aeb9242e 100644
--- a/ui/src/pages/feature/features.tsx
+++ b/ui/src/pages/feature/features.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 import { Button, Card, Space, Typography } from "antd";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import FeatureList from "../../components/featureList";
 
 const { Title } = Typography;
 
 const Features: React.FC = () => {
+  const { project, keyword } = useParams();
   const navigate = useNavigate();
   const onCreateFeatureClick = () => {
     navigate("/new-feature");
@@ -28,7 +29,7 @@ const Features: React.FC = () => {
             + Create Feature
           </Button>
         </Space>
-        <FeatureList />
+        <FeatureList preProject={project ?? ""} preKeyword={keyword ?? ""} />
       </Card>
     </div>
   );

From b80a529b4ca817ea33297dae91807a83e79ce35a Mon Sep 17 00:00:00 2001
From: Enya-Yx <enya@Enyas-MacBook-Pro.local>
Date: Thu, 18 Aug 2022 16:01:25 +0800
Subject: [PATCH 2/6] replace params by checking navigation type

---
 ui/src/app.tsx                          |  7 -------
 ui/src/pages/feature/featureDetails.tsx | 10 +---------
 ui/src/utils/utils.tsx                  | 14 ++++++++++++++
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/ui/src/app.tsx b/ui/src/app.tsx
index 45eeb6067..1177a08b0 100644
--- a/ui/src/app.tsx
+++ b/ui/src/app.tsx
@@ -34,13 +34,6 @@ const App = () => {
                 <Routes>
                   <Route path="/dataSources" element={<DataSources />} />
                   <Route path="/features" element={<Features />} />
-                  <Route path="/features/:project" element={<Features />} />
-                  <Route
-                    path="/features/:project/:keyword"
-                    element={<Features />}
-                  />
-                  #TODO: better Expression to combine multiple path to same
-                  component?
                   <Route
                     path="/projects/:project/features/:featureId"
                     element={<FeatureDetails />}
diff --git a/ui/src/pages/feature/featureDetails.tsx b/ui/src/pages/feature/featureDetails.tsx
index c72a5df01..357a35944 100644
--- a/ui/src/pages/feature/featureDetails.tsx
+++ b/ui/src/pages/feature/featureDetails.tsx
@@ -235,9 +235,6 @@ const FeatureDetails = () => {
     navigate(lineageUrl);
   };
 
-  const preProject = localStorage.getItem("project") ?? "";
-  const preKeyword = localStorage.getItem("keyword") ?? "";
-
   const render = (status: QueryStatus): JSX.Element => {
     switch (status) {
       case "error":
@@ -278,12 +275,7 @@ const FeatureDetails = () => {
         } else {
           return (
             <>
-              <Button
-                type="link"
-                onClick={() =>
-                  navigate("/features/" + preProject + "/" + preKeyword)
-                }
-              >
+              <Button type="link" onClick={() => navigate(-1)}>
                 feature list {">"}
               </Button>
               <Card>
diff --git a/ui/src/utils/utils.tsx b/ui/src/utils/utils.tsx
index 85bfd8f42..c123f7ff0 100644
--- a/ui/src/utils/utils.tsx
+++ b/ui/src/utils/utils.tsx
@@ -36,3 +36,17 @@ export const isFeature = (featureType: string) => {
     featureType === FeatureType.DerivedFeature
   );
 };
+
+export const enum LocalVariables {
+  PreKeyword = "preKeyword",
+  PreProject = "preProject",
+}
+
+export const setLocalVariables = (preProject = "", preKeyword = "") => {
+  localStorage.setItem(LocalVariables.PreKeyword, preKeyword);
+  localStorage.setItem(LocalVariables.PreProject, preProject);
+};
+
+export const getLocalVariable = (key: LocalVariables) => {
+  return localStorage.getItem(key) ?? "";
+};

From 5d311f90dd85592e6be6ef517e82941d921975e0 Mon Sep 17 00:00:00 2001
From: Enya-Yx <enya@Enyas-MacBook-Pro.local>
Date: Thu, 18 Aug 2022 16:10:18 +0800
Subject: [PATCH 3/6] minor change on useEffect

---
 ui/src/components/featureList.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/ui/src/components/featureList.tsx b/ui/src/components/featureList.tsx
index 96b79897b..34511bc48 100644
--- a/ui/src/components/featureList.tsx
+++ b/ui/src/components/featureList.tsx
@@ -205,10 +205,9 @@ const FeatureList: React.FC<Props> = ({ preProject, preKeyword }) => {
 
   useEffect(() => {
     if (preProject !== "") {
-      console.log("fetch data onload");
       fetchData(preProject);
     }
-  }, []);
+  }, [preProject, fetchData]);
 
   const onProjectChange = async (value: string) => {
     setProject(value);

From 8e2782489053f0e65257cf01f737241d6197434b Mon Sep 17 00:00:00 2001
From: Enya-Yx <enya@QTM-RASHAFIP-01.redmond.corp.microsoft.com>
Date: Tue, 23 Aug 2022 11:55:32 +0800
Subject: [PATCH 4/6] improved solution

---
 ui/src/components/featureList.tsx | 15 +++++++++------
 ui/src/pages/feature/features.tsx | 14 ++++----------
 ui/src/utils/utils.tsx            | 14 --------------
 3 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/ui/src/components/featureList.tsx b/ui/src/components/featureList.tsx
index 34511bc48..2a7158c0b 100644
--- a/ui/src/components/featureList.tsx
+++ b/ui/src/components/featureList.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { DownOutlined } from "@ant-design/icons";
 import {
   Button,
@@ -13,14 +13,13 @@ import {
 } from "antd";
 import { Feature } from "../models/model";
 import { fetchProjects, fetchFeatures } from "../api";
-import { setLocalVariables } from "../utils/utils";
 
 type Props = {
   preProject: string;
   preKeyword: string;
 };
 
-const FeatureList: React.FC<Props> = ({ preProject, preKeyword }) => {
+const FeatureList = ({ preProject, preKeyword }: Props) => {
   const navigate = useNavigate();
   const columns = [
     {
@@ -180,6 +179,7 @@ const FeatureList: React.FC<Props> = ({ preProject, preKeyword }) => {
   const [query, setQuery] = useState<string>(preKeyword);
   const [projects, setProjects] = useState<any>([]);
   const [project, setProject] = useState<string>(preProject);
+  const [, setURLSearchParams] = useSearchParams();
 
   const fetchData = useCallback(
     async (project) => {
@@ -188,9 +188,12 @@ const FeatureList: React.FC<Props> = ({ preProject, preKeyword }) => {
       setPage(page);
       setTableData(result);
       setLoading(false);
-      setLocalVariables((preProject = project), (preKeyword = query));
+      setURLSearchParams({
+        project: project,
+        keyword: query,
+      });
     },
-    [page, query]
+    [page, query, setURLSearchParams]
   );
 
   const loadProjects = useCallback(async () => {
@@ -204,7 +207,7 @@ const FeatureList: React.FC<Props> = ({ preProject, preKeyword }) => {
   }, [loadProjects]);
 
   useEffect(() => {
-    if (preProject !== "") {
+    if (preProject) {
       fetchData(preProject);
     }
   }, [preProject, fetchData]);
diff --git a/ui/src/pages/feature/features.tsx b/ui/src/pages/feature/features.tsx
index d3e95008f..cd733d660 100644
--- a/ui/src/pages/feature/features.tsx
+++ b/ui/src/pages/feature/features.tsx
@@ -1,23 +1,17 @@
-import React, { useState } from "react";
 import { Button, Card, Space, Typography } from "antd";
-import { useNavigate, useNavigationType } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import FeatureList from "../../components/featureList";
-import { LocalVariables, getLocalVariable } from "../../utils/utils";
 
 const { Title } = Typography;
 
 const Features: React.FC = () => {
-  const navigationType = useNavigationType();
   const navigate = useNavigate();
   const onCreateFeatureClick = () => {
     navigate("/new-feature");
   };
-  const [preProject] = useState(
-    navigationType === "POP" ? getLocalVariable(LocalVariables.PreProject) : ""
-  );
-  const [preKeyword] = useState(
-    navigationType === "POP" ? getLocalVariable(LocalVariables.PreKeyword) : ""
-  );
+  const [searchParams] = useSearchParams();
+  const preProject = (searchParams.get("project") as string) ?? "";
+  const preKeyword = (searchParams.get("keyword") as string) ?? "";
 
   return (
     <div className="page">
diff --git a/ui/src/utils/utils.tsx b/ui/src/utils/utils.tsx
index c123f7ff0..85bfd8f42 100644
--- a/ui/src/utils/utils.tsx
+++ b/ui/src/utils/utils.tsx
@@ -36,17 +36,3 @@ export const isFeature = (featureType: string) => {
     featureType === FeatureType.DerivedFeature
   );
 };
-
-export const enum LocalVariables {
-  PreKeyword = "preKeyword",
-  PreProject = "preProject",
-}
-
-export const setLocalVariables = (preProject = "", preKeyword = "") => {
-  localStorage.setItem(LocalVariables.PreKeyword, preKeyword);
-  localStorage.setItem(LocalVariables.PreProject, preProject);
-};
-
-export const getLocalVariable = (key: LocalVariables) => {
-  return localStorage.getItem(key) ?? "";
-};

From cf0443793e6da078e02d343d136c3035ed5064db Mon Sep 17 00:00:00 2001
From: Enya-Yx <enya@QTM-RASHAFIP-01.redmond.corp.microsoft.com>
Date: Tue, 23 Aug 2022 12:00:18 +0800
Subject: [PATCH 5/6] minor changes

---
 ui/src/app.tsx                    | 2 +-
 ui/src/pages/feature/features.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/app.tsx b/ui/src/app.tsx
index 1177a08b0..5e0a9a927 100644
--- a/ui/src/app.tsx
+++ b/ui/src/app.tsx
@@ -34,11 +34,11 @@ const App = () => {
                 <Routes>
                   <Route path="/dataSources" element={<DataSources />} />
                   <Route path="/features" element={<Features />} />
+                  <Route path="/new-feature" element={<NewFeature />} />
                   <Route
                     path="/projects/:project/features/:featureId"
                     element={<FeatureDetails />}
                   />
-                  <Route path="/new-feature" element={<NewFeature />} />
                   <Route
                     path="/projects/:project/lineage"
                     element={<LineageGraph />}
diff --git a/ui/src/pages/feature/features.tsx b/ui/src/pages/feature/features.tsx
index cd733d660..cb8b49f40 100644
--- a/ui/src/pages/feature/features.tsx
+++ b/ui/src/pages/feature/features.tsx
@@ -4,7 +4,7 @@ import FeatureList from "../../components/featureList";
 
 const { Title } = Typography;
 
-const Features: React.FC = () => {
+const Features = () => {
   const navigate = useNavigate();
   const onCreateFeatureClick = () => {
     navigate("/new-feature");

From ac61c1117fa8cfe2431cf2730e35f63d2260a4f3 Mon Sep 17 00:00:00 2001
From: Enya-Yx <enya@QTM-RASHAFIP-01.redmond.corp.microsoft.com>
Date: Tue, 23 Aug 2022 14:11:51 +0800
Subject: [PATCH 6/6] quick change

---
 ui/src/components/featureList.tsx | 16 ++++++++--------
 ui/src/pages/feature/features.tsx |  6 +++---
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/featureList.tsx b/ui/src/components/featureList.tsx
index 2a7158c0b..511fc48ba 100644
--- a/ui/src/components/featureList.tsx
+++ b/ui/src/components/featureList.tsx
@@ -15,11 +15,11 @@ import { Feature } from "../models/model";
 import { fetchProjects, fetchFeatures } from "../api";
 
 type Props = {
-  preProject: string;
-  preKeyword: string;
+  projectProp: string;
+  keywordProp: string;
 };
 
-const FeatureList = ({ preProject, preKeyword }: Props) => {
+const FeatureList = ({ projectProp, keywordProp }: Props) => {
   const navigate = useNavigate();
   const columns = [
     {
@@ -176,9 +176,9 @@ const FeatureList = ({ preProject, preKeyword }: Props) => {
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(false);
   const [tableData, setTableData] = useState<Feature[]>();
-  const [query, setQuery] = useState<string>(preKeyword);
+  const [query, setQuery] = useState<string>(keywordProp);
   const [projects, setProjects] = useState<any>([]);
-  const [project, setProject] = useState<string>(preProject);
+  const [project, setProject] = useState<string>(projectProp);
   const [, setURLSearchParams] = useSearchParams();
 
   const fetchData = useCallback(
@@ -207,10 +207,10 @@ const FeatureList = ({ preProject, preKeyword }: Props) => {
   }, [loadProjects]);
 
   useEffect(() => {
-    if (preProject) {
-      fetchData(preProject);
+    if (projectProp) {
+      fetchData(projectProp);
     }
-  }, [preProject, fetchData]);
+  }, [projectProp, fetchData]);
 
   const onProjectChange = async (value: string) => {
     setProject(value);
diff --git a/ui/src/pages/feature/features.tsx b/ui/src/pages/feature/features.tsx
index cb8b49f40..69ca76af9 100644
--- a/ui/src/pages/feature/features.tsx
+++ b/ui/src/pages/feature/features.tsx
@@ -10,8 +10,8 @@ const Features = () => {
     navigate("/new-feature");
   };
   const [searchParams] = useSearchParams();
-  const preProject = (searchParams.get("project") as string) ?? "";
-  const preKeyword = (searchParams.get("keyword") as string) ?? "";
+  const project = (searchParams.get("project") as string) ?? "";
+  const keyword = (searchParams.get("keyword") as string) ?? "";
 
   return (
     <div className="page">
@@ -30,7 +30,7 @@ const Features = () => {
             + Create Feature
           </Button>
         </Space>
-        <FeatureList preProject={preProject} preKeyword={preKeyword} />
+        <FeatureList projectProp={project} keywordProp={keyword} />
       </Card>
     </div>
   );