feat(ui): add label filter sync with URL query params

Signed-off-by: puretension <[email protected]>

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

@@ -44,7 +44,13 @@ export function WorkflowTemplateList({match, location, history}: RouteComponentP
     const [namespace, setNamespace] = useState(nsUtils.getNamespace(match.params.namespace) || '');
     const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
     const [namePattern, setNamePattern] = useState('');
-    const [labels, setLabels] = useState([]);
+    const [labels, setLabels] = useState<string[]>(() => {
+        const savedOptions = storage.getItem('options', {});
+        const savedLabels = savedOptions.labels || [];
+        const labelQueryParam = queryParams.getAll('label');
+        return labelQueryParam.length > 0 ? labelQueryParam : savedLabels;
+    });
+
     const [pagination, setPagination] = useState<Pagination>({
         offset: queryParams.get('offset'),
         limit: parseLimit(queryParams.get('limit')) || savedOptions.paginationLimit || 500
@@ -62,14 +68,19 @@ export function WorkflowTemplateList({match, location, history}: RouteComponentP
             isFirstRender.current = false;
             return;
         }
+        storage.setItem('options', {labels}, {});
+        const params = new URLSearchParams();
+        labels?.forEach(label => params.append('label', label));
+        if (sidePanel) {
+            params.append('sidePanel', 'true');
+        }
         history.push(
             historyUrl('workflow-templates' + (nsUtils.getManagedNamespace() ? '' : '/{namespace}'), {
                 namespace,
-                sidePanel
+                extraSearchParams: params
             })
         );
-    }, [namespace, sidePanel]);
-
+    }, [namespace, sidePanel, labels.toString()]);
     // internal state
     const [error, setError] = useState<Error>();
     const [templates, setTemplates] = useState<WorkflowTemplate[]>();