refactor(ui): convert WorkflowsList + WorkflowsFilter to function…

…al components (#11891)

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

@@ -33,7 +33,7 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
  // state for URL, query, and label parameters
  const [namespace, setNamespace] = useState<string>(Utils.getNamespace(match.params.namespace) || '');
  const [sidePanel, setSidePanel] = useState(queryParams.get('sidePanel') === 'true');
- const [labels, setLabels] = useState([]);
+ const [labels, setLabels] = useState<string[]>([]);
  const [states, setStates] = useState(['Running', 'Suspended']); // check all by default
 
  useEffect(
@@ -77,7 +77,7 @@ export function CronWorkflowList({match, location, history}: RouteComponentProps
  setError(newError);
  }
  })();
- }, [namespace, labels, states]);
+ }, [namespace, labels.toString(), states.toString()]); // referential equality, so use values, not refs
 
  useCollectEvent('openedCronWorkflowList');
 

ui/src/app/reports/components/reports.tsx

@@ -69,7 +69,7 @@ export function Reports({match, location, history}: RouteComponentProps<any>) {
  setError(newError);
  }
  })();
- }, [namespace, labels]);
+ }, [namespace, labels.toString()]); // referential equality, so use values, not refs
 
  useCollectEvent('openedReports');
 

ui/src/app/shared/components/tags-input/tags-input.tsx

@@ -1,14 +1,14 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import {useEffect, useRef, useState} from 'react';
+import {useRef, useState} from 'react';
 
 import {Autocomplete, AutocompleteApi, AutocompleteOption} from 'argo-ui';
 
 interface TagsInputProps {
  tags: string[];
  autocomplete?: (AutocompleteOption | string)[];
  sublistQuery?: (key: string) => Promise<any>;
- onChange?: (tags: string[]) => void;
+ onChange: (tags: string[]) => void;
  placeholder?: string;
 }
 
@@ -18,18 +18,15 @@ export function TagsInput(props: TagsInputProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const autoCompleteRef = useRef<AutocompleteApi>(null);
 
- const [tags, setTags] = useState(props.tags || []);
  const [input, setInput] = useState('');
  const [focused, setFocused] = useState(false);
  const [subTags, setSubTags] = useState<string[]>([]);
  const [subTagsActive, setSubTagsActive] = useState(false);
 
- useEffect(() => {
- if (props.onChange) {
- props.onChange(tags);
- setTimeout(() => autoCompleteRef.current?.refresh());
- }
- }, [tags]);
+ function setTags(tags: string[]) {
+ props.onChange(tags);
+ setTimeout(() => autoCompleteRef.current?.refresh());
+ }
 
  return (
  <div className={classNames('tags-input argo-field', {'tags-input--focused': focused || !!input})} onClick={() => inputRef.current?.focus()}>
@@ -40,8 +37,7 @@ export function TagsInput(props: TagsInputProps) {
  <i
  className='fa fa-times'
  onClick={e => {
- const newTags = [...tags.slice(0, i), ...tags.slice(i + 1)];
- setTags(newTags);
+ setTags([...props.tags.slice(0, i), ...props.tags.slice(i + 1)]);
  e.stopPropagation();
  }}
  />
@@ -62,11 +58,10 @@ export function TagsInput(props: TagsInputProps) {
  const newSubTags = await props.sublistQuery(value);
  setSubTags(newSubTags || []);
  } else {
- if (tags.indexOf(value) === -1) {
- const newTags = tags.concat(value);
- setTags(newTags);
+ if (props.tags.indexOf(value) === -1) {
  setInput('');
  setSubTags([]);
+ setTags(props.tags.concat(value));
  }
  setSubTagsActive(false);
  }
@@ -90,17 +85,15 @@ export function TagsInput(props: TagsInputProps) {
  setFocused(false);
  }}
  onKeyDown={e => {
- if (e.keyCode === 8 && tags.length > 0 && input === '') {
- const newTags = tags.slice(0, tags.length - 1);
- setTags(newTags);
+ if (e.keyCode === 8 && props.tags.length > 0 && input === '') {
+ setTags(props.tags.slice(0, props.tags.length - 1));
  }
  inputProps.onKeyDown?.(e);
  }}
  onKeyUp={e => {
- if (e.keyCode === 13 && input && tags.indexOf(input) === -1) {
- const newTags = tags.concat(input);
- setTags(newTags);
+ if (e.keyCode === 13 && input && props.tags.indexOf(input) === -1) {
  setInput('');
+ setTags(props.tags.concat(input));
  }
  inputProps.onKeyUp?.(e);
  }}

ui/src/app/shared/history.ts

@@ -5,20 +5,24 @@ import {Utils} from './utils';
  * Return a URL suitable to use with `history.push(..)`. Optionally saving the "namespace" parameter as the current namespace.
  * Only "truthy" values are put into the query parameters. I.e. "falsey" values include null, undefined, false, "", 0.
  */
-export const historyUrl = (path: string, params: {[key: string]: any}) => {
+export function historyUrl(path: string, params: {[key: string]: any}) {
  const queryParams: string[] = [];
+ let extraSearchParams: URLSearchParams;
  Object.entries(params)
  .filter(([, v]) => v !== null)
  .forEach(([k, v]) => {
  const searchValue = '{' + k + '}';
  if (path.includes(searchValue)) {
  path = path.replace(searchValue, v != null ? v : '');
+ } else if (k === 'extraSearchParams') {
+ extraSearchParams = v;
  } else if (v) {
  queryParams.push(k + '=' + v);
  }
  if (k === 'namespace') {
  Utils.currentNamespace = v;
  }
  });
- return uiUrl(path.replace(/{[^}]*}/g, '')) + '?' + queryParams.join('&');
-};
+ const extraString = extraSearchParams ? '&' + extraSearchParams.toString() : '';
+ return uiUrl(path.replace(/{[^}]*}/g, '')) + '?' + queryParams.join('&') + extraString;
+}

ui/src/app/userinfo/components/user-info.tsx

@@ -22,7 +22,7 @@ export function UserInfo() {
  setError(newError);
  }
  })();
- });
+ }, []);
 
  return (
  <Page title='User Info' toolbar={{breadcrumbs: [{title: 'User Info'}]}}>

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

@@ -75,10 +75,10 @@ export function WorkflowTemplateList({match, location, history}: RouteComponentP
  })
  .then(() => setError(null))
  .catch(setError);
- }, [namespace, namePattern, labels, pagination.offset, pagination.limit]);
+ }, [namespace, namePattern, labels.toString(), pagination.offset, pagination.limit]); // referential equality, so use values, not refs
  useEffect(() => {
  storage.setItem('paginationLimit', pagination.limit, 0);
- }, [pagination.limit, labels]);
+ }, [pagination.limit]);
 
  useCollectEvent('openedWorkflowTemplateList');