Support navigation back to feature list page by link

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,
@@ -14,7 +14,12 @@ import {
 import { Feature } from "../models/model";
 import { fetchProjects, fetchFeatures } from "../api";
 
-const FeatureList = () => {
+type Props = {
+  projectProp: string;
+  keywordProp: string;
+};
+
+const FeatureList = ({ projectProp, keywordProp }: Props) => {
   const navigate = useNavigate();
   const columns = [
     {
@@ -171,9 +176,10 @@ const FeatureList = () => {
   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>(keywordProp);
   const [projects, setProjects] = useState<any>([]);
-  const [project, setProject] = useState<string>("");
+  const [project, setProject] = useState<string>(projectProp);
+  const [, setURLSearchParams] = useSearchParams();
 
   const fetchData = useCallback(
     async (project) => {
@@ -182,8 +188,12 @@ const FeatureList = () => {
       setPage(page);
       setTableData(result);
       setLoading(false);
+      setURLSearchParams({
+        project: project,
+        keyword: query,
+      });
     },
-    [page, query]
+    [page, query, setURLSearchParams]
   );
 
   const loadProjects = useCallback(async () => {
@@ -196,6 +206,12 @@ const FeatureList = () => {
     loadProjects();
   }, [loadProjects]);
 
+  useEffect(() => {
+    if (projectProp) {
+      fetchData(projectProp);
+    }
+  }, [projectProp, fetchData]);
+
   const onProjectChange = async (value: string) => {
     setProject(value);
     fetchData(value);
@@ -233,6 +249,7 @@ const FeatureList = () => {
         ></Select>
       </Form.Item>
       <Input
+        value={query}
         placeholder="keyword"
         style={{ width: "10%", marginLeft: "5px" }}
         onChange={(e) => onKeywordChange(e.target.value)}

ui/src/pages/feature/featureDetails.tsx

@@ -275,6 +275,9 @@ const FeatureDetails = () => {
         } else {
           return (
             <>
+              <Button type="link" onClick={() => navigate(-1)}>
+                feature list {">"}
+              </Button>
               <Card>
                 <Title level={3}>{data.attributes.name}</Title>
                 <div>

ui/src/pages/feature/features.tsx

@@ -1,6 +1,5 @@
-import React from "react";
 import { Button, Card, Space, Typography } from "antd";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import FeatureList from "../../components/featureList";
 
 const { Title } = Typography;
@@ -10,6 +9,9 @@ const Features = () => {
   const onCreateFeatureClick = () => {
     navigate("/new-feature");
   };
+  const [searchParams] = useSearchParams();
+  const project = (searchParams.get("project") as string) ?? "";
+  const keyword = (searchParams.get("keyword") as string) ?? "";
 
   return (
     <div className="page">
@@ -28,7 +30,7 @@ const Features = () => {
             + Create Feature
           </Button>
         </Space>
-        <FeatureList />
+        <FeatureList projectProp={project} keywordProp={keyword} />
       </Card>
     </div>
   );