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 = {
+ preProject: string;
+ preKeyword: string;
+};
+
+const FeatureList = ({ preProject, preKeyword }: 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>(preKeyword);
  const [projects, setProjects] = useState<any>([]);
- const [project, setProject] = useState<string>("");
+ const [project, setProject] = useState<string>(preProject);
+ 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 (preProject) {
+ fetchData(preProject);
+ }
+ }, [preProject, 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 preProject = (searchParams.get("project") as string) ?? "";
+ const preKeyword = (searchParams.get("keyword") as string) ?? "";
 
  return (
  <div className="page">
@@ -28,7 +30,7 @@ const Features = () => {
  + Create Feature
  </Button>
  </Space>
- <FeatureList />
+ <FeatureList preProject={preProject} preKeyword={preKeyword} />
  </Card>
  </div>
  );