Catalog refactor (#2013)

vmware-tanzu · Sep 8, 2020 · 5d7d899 · 5d7d899
1 parent 50fa2db
commit 5d7d899
Show file tree

Hide file tree

Showing 19 changed files with 517 additions and 251 deletions.
diff --git a/dashboard/src/components/AppList/AppList.v2.tsx b/dashboard/src/components/AppList/AppList.v2.tsx
@@ -45,6 +45,7 @@ function AppList(props: IAppListProps) {
     appVersion,
     csvs,
   } = props;
+  const submitFilters = () => pushSearchFilter(filter);
 
   useEffect(() => {
     fetchAppsWithUpdateInfo(cluster, namespace, true);
@@ -65,7 +66,7 @@ function AppList(props: IAppListProps) {
             placeholder="search apps..."
             onChange={setFilter}
             value={filter}
-            onSubmit={pushSearchFilter}
+            submitFilters={submitFilters}
           />
         }
         buttons={[

diff --git a/dashboard/src/components/AppList/__snapshots__/AppList.v2.test.tsx.snap b/dashboard/src/components/AppList/__snapshots__/AppList.v2.test.tsx.snap
@@ -23,8 +23,8 @@ exports[`when an error is present matches the snapshot 1`] = `
     filter={
       <SearchFilter
         onChange={[Function]}
-        onSubmit={[MockFunction]}
         placeholder="search apps..."
+        submitFilters={[Function]}
         value=""
       />
     }
@@ -68,8 +68,8 @@ exports[`when an error is present renders a generic error message 1`] = `
     filter={
       <SearchFilter
         onChange={[Function]}
-        onSubmit={[MockFunction]}
         placeholder="search apps..."
+        submitFilters={[Function]}
         value=""
       />
     }
@@ -113,8 +113,8 @@ exports[`when apps available matches the snapshot 1`] = `
     filter={
       <SearchFilter
         onChange={[Function]}
-        onSubmit={[MockFunction]}
         placeholder="search apps..."
+        submitFilters={[Function]}
         value=""
       />
     }
@@ -171,8 +171,8 @@ exports[`when custom resources available matches the snapshot 1`] = `
     filter={
       <SearchFilter
         onChange={[Function]}
-        onSubmit={[MockFunction]}
         placeholder="search apps..."
+        submitFilters={[Function]}
         value=""
       />
     }
@@ -242,8 +242,8 @@ exports[`when fetched but not apps available matches the snapshot 1`] = `
     filter={
       <SearchFilter
         onChange={[Function]}
-        onSubmit={[MockFunction]}
         placeholder="search apps..."
+        submitFilters={[Function]}
         value=""
       />
     }
@@ -288,8 +288,8 @@ exports[`while fetching apps loading spinner matches the snapshot 1`] = `
     filter={
       <SearchFilter
         onChange={[Function]}
-        onSubmit={[MockFunction]}
         placeholder="search apps..."
+        submitFilters={[Function]}
         value=""
       />
     }
@@ -333,8 +333,8 @@ exports[`while fetching apps loading spinner matches the snapshot 2`] = `
     filter={
       <SearchFilter
         onChange={[Function]}
-        onSubmit={[MockFunction]}
         placeholder="search apps..."
+        submitFilters={[Function]}
         value=""
       />
     }

diff --git a/dashboard/src/components/Catalog/Catalog.test.tsx b/dashboard/src/components/Catalog/Catalog.test.tsx
@@ -21,7 +21,7 @@ const defaultChartState = {
 const defaultProps = {
   charts: defaultChartState,
   repo: "",
-  filter: "",
+  filter: {},
   fetchCharts: jest.fn(),
   pushSearchFilter: jest.fn(),
   cluster: "default",
@@ -33,7 +33,7 @@ const defaultProps = {
 };
 
 it("propagates the filter from the props", () => {
-  const wrapper = shallow(<Catalog {...defaultProps} filter="foo" />);
+  const wrapper = shallow(<Catalog {...defaultProps} filter={{ q: "foo" }} />);
   expect(wrapper.state("filter")).toBe("foo");
 });
 
@@ -47,7 +47,7 @@ it("reloads charts when the repo changes", () => {
 
 it("updates the filter from props", () => {
   const wrapper = shallow(<Catalog {...defaultProps} />);
-  wrapper.setProps({ filter: "foo" });
+  wrapper.setProps({ filter: { q: "foo" } });
   expect(wrapper.state("filter")).toBe("foo");
 });
 
@@ -239,7 +239,9 @@ describe("renderization", () => {
 
     it("should filter apps", () => {
       // Filter "foo" app
-      const wrapper = shallow(<Catalog {...defaultProps} charts={chartState} filter="foo" />);
+      const wrapper = shallow(
+        <Catalog {...defaultProps} charts={chartState} filter={{ q: "foo" }} />,
+      );
 
       const cardGrid = wrapper.find(CardGrid);
       expect(cardGrid).toExist();

diff --git a/dashboard/src/components/Catalog/Catalog.tsx b/dashboard/src/components/Catalog/Catalog.tsx
@@ -20,7 +20,7 @@ import CatalogItem, {
 export interface ICatalogProps {
   charts: IChartState;
   repo: string;
-  filter: string;
+  filter: { [name: string]: string };
   fetchCharts: (namespace: string, repo: string) => void;
   pushSearchFilter: (filter: string) => RouterAction;
   cluster: string;
@@ -46,7 +46,7 @@ class Catalog extends React.Component<ICatalogProps, ICatalogState> {
 
   public componentDidMount() {
     const { repo, fetchCharts, filter, cluster, namespace, getCSVs, featureFlags } = this.props;
-    this.setState({ filter });
+    this.setState({ filter: filter.q || "" });
     fetchCharts(namespace, repo);
     if (featureFlags.operators) {
       getCSVs(cluster, namespace);
@@ -55,7 +55,7 @@ class Catalog extends React.Component<ICatalogProps, ICatalogState> {
 
   public componentDidUpdate(prevProps: ICatalogProps) {
     if (this.props.filter !== prevProps.filter) {
-      this.setState({ filter: this.props.filter });
+      this.setState({ filter: this.props.filter.q || "" });
     }
     if (this.props.repo !== prevProps.repo || this.props.namespace !== prevProps.namespace) {
       this.props.fetchCharts(this.props.namespace, this.props.repo);