fix(ui): DataLoaderDropdown fix input type from promise to function t…

…hat (#4655) Signed-off-by: Tianchu Zhao <evantczhao@gmail.com>
argoproj · Dec 7, 2020 · 7afa14a · 7afa14a
1 parent a3ed224
commit 7afa14a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 24 deletions.
diff --git a/ui/src/app/reports/components/reports.tsx b/ui/src/app/reports/components/reports.tsx
@@ -275,14 +275,14 @@ export class Reports extends BasePage<RouteComponentProps<any>, State> {
                     <div className='columns small-4 xlarge-12'>
                         <p className='wf-filters-container__title'>Workflow Template</p>
                         <DataLoaderDropdown
-                            load={services.workflowTemplate.list(this.state.namespace).then(list => list.map(x => x.metadata.name))}
+                            load={() => services.workflowTemplate.list(this.state.namespace).then(list => list.map(x => x.metadata.name))}
                             onChange={value => (this.workflowTemplate = value)}
                         />
                     </div>
                     <div className='columns small-4 xlarge-12'>
                         <p className='wf-filters-container__title'>Cron Workflow</p>
                         <DataLoaderDropdown
-                            load={services.cronWorkflows.list(this.state.namespace).then(list => list.map(x => x.metadata.name))}
+                            load={() => services.cronWorkflows.list(this.state.namespace).then(list => list.map(x => x.metadata.name))}
                             onChange={value => (this.cronWorkflow = value)}
                         />
                     </div>

diff --git a/ui/src/app/shared/components/data-loader-dropdown.tsx b/ui/src/app/shared/components/data-loader-dropdown.tsx
@@ -1,26 +1,21 @@
-import {Select} from 'argo-ui';
+import {DataLoader, Select, SelectOption} from 'argo-ui';
 import * as React from 'react';
-import {useState} from 'react';
 
-export const DataLoaderDropdown = ({onChange, load}: {load: Promise<string[]>; onChange: (value: string) => void}) => {
-    const [list, setList] = useState<string[]>();
-    const [error, setError] = useState<Error>();
-    const [selected, setSelected] = useState('');
-
-    useState(() => {
-        load.then(setList)
-            .then(() => setError(null))
-            .catch(setError);
-    });
+export const DataLoaderDropdown = (props: {load: () => Promise<(string | SelectOption)[]>; onChange: (value: string) => void}) => {
+    const [selected, setSelected] = React.useState('');
 
     return (
-        <Select
-            options={list || (error ? [error.message] : [])}
-            value={selected}
-            onChange={x => {
-                setSelected(x.value);
-                onChange(x.value);
-            }}
-        />
+        <DataLoader load={props.load}>
+            {list => (
+                <Select
+                    options={list}
+                    value={selected}
+                    onChange={x => {
+                        setSelected(x.value);
+                        props.onChange(x.value);
+                    }}
+                />
+            )}
+        </DataLoader>
     );
 };
diff --git a/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx b/ui/src/app/workflows/components/workflow-filters/workflow-filters.tsx
@@ -57,14 +57,14 @@ export class WorkflowFilters extends React.Component<WorkflowFilterProps, {}> {
                     <div className='columns small-3 xlarge-12'>
                         <p className='wf-filters-container__title'>Workflow Template</p>
                         <DataLoaderDropdown
-                            load={services.workflowTemplate.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}
+                            load={() => services.workflowTemplate.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}
                             onChange={value => (this.workflowTemplate = value)}
                         />
                     </div>
                     <div className='columns small-3 xlarge-12'>
                         <p className='wf-filters-container__title'>Cron Workflow</p>
                         <DataLoaderDropdown
-                            load={services.cronWorkflows.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}
+                            load={() => services.cronWorkflows.list(this.props.namespace).then(list => list.map(x => x.metadata.name))}
                             onChange={value => (this.cronWorkflow = value)}
                         />
                     </div>