Change comma by pipe to concat filters in the catalog (#2279)

* Change comma by pipe to concat filters in the catalog

* Improve comma handling by replacing by __

* Add test cases

* Extract regex outside loops

* Remove misplaced var from useEffect deps

dashboard/src/components/Catalog/Catalog.test.tsx

@@ -222,6 +222,17 @@ it("behaves like a loading wrapper", () => {
   expect(wrapper.find(LoadingWrapper)).toExist();
 });
 
+it("transforms the received '__' in query params into a ','", () => {
+  const wrapper = mountWrapper(
+    defaultStore,
+    <Catalog
+      {...populatedProps}
+      filter={{ [filterNames.OPERATOR_PROVIDER]: "Lightbend__%20Inc." }}
+    />,
+  );
+  expect(wrapper.find(".label-info").text()).toBe("Provider: Lightbend,%20Inc. ");
+});
+
 describe("filters by the searched item", () => {
   let spyOnUseDispatch: jest.SpyInstance;
   let spyOnUseEffect: jest.SpyInstance;
@@ -558,6 +569,21 @@ describe("filters by operator provider", () => {
     });
   });
 
+  it("push filter for operator provider with comma", () => {
+    const store = getStore({});
+    const wrapper = mountWrapper(store, <Catalog {...populatedProps} csvs={[csv, csv2]} />);
+    const input = wrapper.find("input").findWhere(i => i.prop("value") === "you");
+    input.simulate("change", { target: { value: "you, inc" } });
+    // It should have pushed with the filter
+    const historyAction = store
+      .getActions()
+      .find(action => action.type === "@@router/CALL_HISTORY_METHOD");
+    expect(historyAction.payload).toEqual({
+      args: ["/c/default-cluster/ns/kubeapps/catalog?Provider=you__%20inc"],
+      method: "push",
+    });
+  });
+
   it("filters by operator provider", () => {
     const wrapper = mountWrapper(
       defaultStore,

dashboard/src/components/Catalog/Catalog.tsx

@@ -65,12 +65,23 @@ export function initialFilterState() {
   return result;
 }
 
+const tmpStrRegex = /__/g;
+const tmpStr = "__";
+const commaRegex = /,/g;
+
 export function filtersToQuery(filters: any) {
   let query = "";
   const activeFilters = Object.keys(filters).filter(f => filters[f].length);
   if (activeFilters.length) {
+    // https://github.com/kubeapps/kubeapps/pull/2279
+    // get parameters from the parsed and decoded query params
+    // since some search filters could eventually have a ','
+    // we need to temporary replace it by other arbitrary string '__'.
     const filterQueries = activeFilters.map(
-      filter => `${filter}=${filters[filter].map((f: string) => encodeURIComponent(f)).join(",")}`,
+      filter =>
+        `${filter}=${filters[filter]
+          .map((f: string) => encodeURIComponent(f.replace(commaRegex, tmpStr)))
+          .join(",")}`,
     );
     query = "?" + filterQueries.join("&");
   }
@@ -110,7 +121,8 @@ function Catalog(props: ICatalogProps) {
   useEffect(() => {
     const newFilters = {};
     Object.keys(propsFilter).forEach(filter => {
-      newFilters[filter] = propsFilter[filter]?.toString().split(",");
+      const filterValue = propsFilter[filter]?.toString() || "";
+      newFilters[filter] = filterValue.split(",").map(a => a.replace(tmpStrRegex, ","));
     });
     setFilters({
       ...initialFilterState(),
@@ -119,7 +131,7 @@ function Catalog(props: ICatalogProps) {
   }, [propsFilter]);
 
   // Only one search filter can be set
-  const searchFilter = propsFilter[filterNames.SEARCH]?.toString() || "";
+  const searchFilter = propsFilter[filterNames.SEARCH]?.toString().replace(tmpStrRegex, ",") || "";
   const reposFilter = filters[filterNames.REPO]?.join(",") || "";
   useEffect(() => {
     fetchCharts(cluster, namespace, reposFilter, page, size, searchFilter);

dashboard/src/components/OperatorList/OperatorList.test.tsx

@@ -202,6 +202,16 @@ describe("filter operators", () => {
     expect(operator.prop("title")).toBe(sampleOperator.metadata.name);
   });
 
+  it("transforms the received '__' in query params into a ','", () => {
+    const wrapper = mountWrapper(
+      getStore({
+        operators: { isOLMInstalled: true, operators: [sampleOperator, sampleOperator2] },
+      }),
+      <OperatorList {...defaultProps} filter={{ [filterNames.PROVIDER]: "kubeapps__%20inc" }} />,
+    );
+    expect(wrapper.find(".label-info").text()).toBe("Provider: kubeapps,%20inc ");
+  });
+
   it("show a message if the filter doesn't match any operator", () => {
     const wrapper = mountWrapper(
       getStore({

dashboard/src/components/OperatorList/OperatorList.tsx

@@ -79,9 +79,11 @@ export default function OperatorList({
   const [filters, setFilters] = useState(initialFilterState());
 
   useEffect(() => {
+    const tmpStrRegex = /__/g;
     const newFilters = {};
     Object.keys(propsFilter).forEach(filter => {
-      newFilters[filter] = propsFilter[filter]?.toString().split(",");
+      const filterValue = propsFilter[filter]?.toString() || "";
+      newFilters[filter] = filterValue.split(",").map(a => a.replace(tmpStrRegex, ","));
     });
     setFilters({
       ...initialFilterState(),