feat: Specify conditions in query parameters

ui/src/cluster-workflow-templates/cluster-workflow-template-list.tsx

@@ -1,7 +1,7 @@
 import {Page} from 'argo-ui/src/components/page/page';
 import {SlidingPanel} from 'argo-ui/src/components/sliding-panel/sliding-panel';
 import * as React from 'react';
-import {useContext, useEffect, useState} from 'react';
+import {useContext, useEffect, useRef, useState} from 'react';
 import {Link, RouteComponentProps} from 'react-router-dom';
 
 import {uiUrl} from '../shared/base';
@@ -26,9 +26,10 @@ import './cluster-workflow-template-list.scss';
 export function ClusterWorkflowTemplateList({history, location}: RouteComponentProps<any>) {
     const {navigation} = useContext(Context);
     const queryParams = new URLSearchParams(location.search);
+    const isFirstRender = useRef(true);
     const [templates, setTemplates] = useState<models.ClusterWorkflowTemplate[]>();
     const [error, setError] = useState<Error>();
-    const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel'));
+    const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
 
     async function fetchClusterWorkflowTemplates() {
         try {
@@ -42,11 +43,27 @@ export function ClusterWorkflowTemplateList({history, location}: RouteComponentP
 
     useEffect(
         useQueryParams(history, p => {
-            setSidePanel(p.get('sidePanel'));
+            setSidePanel(p.get('sidePanel') === 'true');
         }),
         [history]
     );
 
+    useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+        const params = new URLSearchParams();
+        if (sidePanel) {
+            params.set('sidePanel', 'true');
+        }
+
+        history.push({
+            pathname: uiUrl('cluster-workflow-templates'),
+            search: params.toString()
+        });
+    }, [history, sidePanel]);
+
     useEffect(() => {
         fetchClusterWorkflowTemplates();
     }, []);
@@ -116,7 +133,7 @@ export function ClusterWorkflowTemplateList({history, location}: RouteComponentP
                         {
                             title: 'Create New Cluster Workflow Template',
                             iconClassName: 'fa fa-plus',
-                            action: () => setSidePanel('new')
+                            action: () => setSidePanel(true)
                         }
                     ]
                 }

ui/src/cron-workflows/cron-workflow-list.tsx

@@ -55,13 +55,23 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
             isFirstRender.current = false;
             return;
         }
-        history.push(
-            historyUrl('cron-workflows' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
-                namespace,
-                sidePanel
-            })
-        );
-    }, [namespace, sidePanel]);
+        const params = new URLSearchParams();
+        if (sidePanel) {
+            params.set('sidePanel', 'true');
+        }
+        if (labels.length > 0) {
+            params.set('labels', labels.join(','));
+        }
+        if (states.length > 0) {
+            params.set('states', states.join(','));
+        }
+        history.push({
+            pathname: historyUrl('cron-workflows' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
+                namespace
+            }),
+            search: params.toString()
+        });
+    }, [namespace, sidePanel, labels, states]);
 
     // internal state
     const [error, setError] = useState<Error>();

ui/src/workflow-templates/workflow-template-list.tsx

@@ -62,13 +62,29 @@ export function WorkflowTemplateList({match, location, history}: RouteComponentP
             isFirstRender.current = false;
             return;
         }
-        history.push(
-            historyUrl('workflow-templates' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
-                namespace,
-                sidePanel
-            })
-        );
-    }, [namespace, sidePanel]);
+        const params = new URLSearchParams();
+        if (sidePanel) {
+            params.set('sidePanel', 'true');
+        }
+        if (namePattern) {
+            params.set('namePattern', namePattern);
+        }
+        if (labels.length > 0) {
+            params.set('labels', labels.join(','));
+        }
+        if (pagination.offset) {
+            params.set('offset', pagination.offset);
+        }
+        if (pagination.limit !== 500) {
+            params.set('limit', pagination.limit.toString());
+        }
+        history.push({
+            pathname: historyUrl('workflow-templates' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
+                namespace
+            }),
+            search: params.toString()
+        });
+    }, [namespace, sidePanel, namePattern, labels, pagination.offset, pagination.limit]);
 
     // internal state
     const [error, setError] = useState<Error>();