fix(ui): UI bug fixes (#4895)

Signed-off-by: Alex Collins <alex_collins@intuit.com>
argoproj · Jan 18, 2021 · c1f9280 · c1f9280
1 parent 25abd1a
commit c1f9280
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 45 deletions.
diff --git a/ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx b/ui/src/app/event-flow/components/event-flow-details/event-flow-page.tsx
@@ -38,7 +38,7 @@ export const EventFlowPage = ({history, location, match}: RouteComponentProps<an
     // state for URL and query parameters
     const [namespace, setNamespace] = useState(match.params.namespace || '');
     const [showFlow, setShowFlow] = useState(queryParams.get('showFlow') === 'true');
-    const [showWorkflows, setShowWorkflows] = useState(queryParams.get('showWorkflows') === 'true');
+    const [showWorkflows, setShowWorkflows] = useState(queryParams.get('showWorkflows') !== 'false');
     const [expanded, setExpanded] = useState(queryParams.get('expanded') === 'true');
     const [selectedNode, setSelectedNode] = useState<Node>(queryParams.get('selectedNode'));
     const [tab, setTab] = useState<Node>(queryParams.get('tab'));

diff --git a/ui/src/app/shared/list-watch.ts b/ui/src/app/shared/list-watch.ts
@@ -55,6 +55,7 @@ export class ListWatch<T extends Resource> {
     // Start watching
     // Idempotent.
     public start() {
+        this.stop();
         this.list()
             .then(x => {
                 this.items = (x.items || []).sort(this.sorter);
@@ -63,7 +64,7 @@ export class ListWatch<T extends Resource> {
                 this.retryWatch.start(x.metadata.resourceVersion);
             })
             .catch(e => {
-                clearTimeout(this.timeout);
+                this.stop();
                 this.onError(e);
                 this.timeout = setTimeout(() => this.start(), reconnectAfterMs);
             });

diff --git a/ui/src/app/shared/retry-observable.ts b/ui/src/app/shared/retry-observable.ts
@@ -36,7 +36,7 @@ export class RetryObservable<E, V> {
                 }
             },
             e => {
-                clearTimeout(this.timeout);
+                this.stop();
                 this.onError(e);
                 this.timeout = setTimeout(() => this.start(null), reconnectAfterMs);
             }

diff --git a/ui/src/app/shared/retry-watch.ts b/ui/src/app/shared/retry-watch.ts
@@ -20,6 +20,7 @@ export class RetryWatch<T extends Resource> {
     }
 
     public start(resourceVersion?: string) {
+        this.stop();
         this.ro.start(resourceVersion);
     }
 

diff --git a/ui/src/app/shared/services/info-service.ts b/ui/src/app/shared/services/info-service.ts
@@ -2,9 +2,15 @@ import {GetUserInfoResponse, Info, Version} from '../../../models';
 
 import requests from './requests';
 
+let info: Promise<Info>; // we cache this globally rather than in localStorage so it is request once per page refresh
+
 export class InfoService {
     public getInfo() {
-        return requests.get(`api/v1/info`).then(res => res.body as Info);
+        if (info) {
+            return info;
+        }
+        info = requests.get(`api/v1/info`).then(res => res.body as Info);
+        return info;
     }
 
     public getVersion() {

diff --git a/ui/src/app/userinfo/components/cli-help.tsx b/ui/src/app/userinfo/components/cli-help.tsx
@@ -29,36 +29,36 @@ argo list`;
     const [copied, setCopied] = useState(false);
     const hiddenText = createRef<HTMLTextAreaElement>();
     return (
-        <Notice>
-            <h4>Using Your Login With The CLI</h4>
-            <p>Download the latest CLI before you start.</p>
-            <div style={{fontFamily: 'monospace', whiteSpace: 'pre', margin: 20}}>{argoToken ? text.replace(argoToken, '[REDACTED]') : text}</div>
-            <p>For help with options such as ARGO_INSECURE_SKIP_VERIFY, ARGO_NAMESPACE and ARGO_INSTANCEID, run: `argo --help`.</p>
-            <div>
-                <button
-                    className='argo-button argo-button--base-o'
-                    disabled={copied}
-                    onClick={() => {
-                        const x = hiddenText.current;
-                        x.select();
-                        x.setSelectionRange(0, 99999);
-                        document.execCommand('copy');
-                        setCopied(true);
-                    }}>
-                    {copied ? (
-                        <>
-                            <i className='fa fa-check' /> Copied to clipboard
-                        </>
-                    ) : (
-                        <>
-                            <i className='fa fa-copy' /> Copy to clipboard
-                        </>
-                    )}
-                </button>
-            </div>
-            <textarea ref={hiddenText} style={{width: 0, height: 0, opacity: 0}}>
-                {text}
-            </textarea>
-        </Notice>
+        <>
+            <Notice>
+                <h4>Using Your Login With The CLI</h4>
+                <p>Download the latest CLI before you start.</p>
+                <div style={{fontFamily: 'monospace', whiteSpace: 'pre', margin: 20}}>{argoToken ? text.replace(argoToken, '[REDACTED]') : text}</div>
+                <p>For help with options such as ARGO_INSECURE_SKIP_VERIFY, ARGO_NAMESPACE and ARGO_INSTANCEID, run: `argo --help`.</p>
+                <div>
+                    <button
+                        className='argo-button argo-button--base-o'
+                        disabled={copied}
+                        onClick={() => {
+                            const x = hiddenText.current;
+                            x.select();
+                            x.setSelectionRange(0, 99999);
+                            document.execCommand('copy');
+                            setCopied(true);
+                        }}>
+                        {copied ? (
+                            <>
+                                <i className='fa fa-check' /> Copied to clipboard
+                            </>
+                        ) : (
+                            <>
+                                <i className='fa fa-copy' /> Copy to clipboard
+                            </>
+                        )}
+                    </button>
+                </div>
+            </Notice>
+            <textarea ref={hiddenText} style={{width: 0, height: 0, opacity: 0}} defaultValue={text} />
+        </>
     );
 };
diff --git a/ui/src/app/widgets/widget-gallery.tsx b/ui/src/app/widgets/widget-gallery.tsx
@@ -47,7 +47,7 @@ export const WidgetGallery = ({namespace, name, label}: {namespace: string; name
                 </div>
                 <ul>
                     {parameters.map(p => (
-                        <li>
+                        <li key={p.name}>
                             {p.name}: {p.description} {!!p.defaultValue && '(default "' + p.defaultValue + '")'}
                         </li>
                     ))}

diff --git a/ui/src/app/workflows/components/workflow-creator.tsx b/ui/src/app/workflows/components/workflow-creator.tsx
@@ -26,7 +26,7 @@ export const WorkflowCreator = ({namespace, onCreate}: {namespace: string; onCre
             .list(namespace)
             .then(setWorkflowTemplates)
             .catch(setError);
-    }, []);
+    }, [namespace]);
 
     useEffect(() => {
         switch (stage) {
@@ -68,14 +68,14 @@ export const WorkflowCreator = ({namespace, onCreate}: {namespace: string; onCre
                     <h4>Submit new workflow</h4>
                     <p>Either:</p>
                     <div style={{margin: 10, marginLeft: 20}}>
-                        <label>Choose a workflow template</label>
                         <Select
+                            placeholder='Select a workflow template...'
                             options={workflowTemplates && workflowTemplates.length > 0 ? workflowTemplates.map(tmpl => tmpl.metadata.name) : []}
                             value={workflowTemplate && workflowTemplate.metadata.name}
                             onChange={templateName => setWorkflowTemplate((workflowTemplates || []).find(template => template.metadata.name === templateName.title))}
                         />
                     </div>
-                    <p>or</p>
+                    <p>Or:</p>
                     <div style={{margin: 10, marginLeft: 20}}>
                         <a onClick={() => setStage('full-editor')}>
                             Edit using full workflow options <i className='fa fa-caret-right' />

diff --git a/ui/src/app/workflows/components/workflow-details/workflow-details.tsx b/ui/src/app/workflows/components/workflow-details/workflow-details.tsx
@@ -81,7 +81,8 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
                                         if (workflowOperation.title === 'DELETE') {
                                             navigation.goto(uiUrl(`workflows/${workflow.metadata.namespace}`));
                                         } else {
-                                            navigation.goto(uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`));
+                                            // navigation.goto does not seem to work here
+                                            document.location.href = uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`);
                                         }
                                     })
                                     .catch(setError);
@@ -195,7 +196,7 @@ export const WorkflowDetails = ({history, location, match}: RouteComponentProps<
         );
         retryWatch.start(workflow.metadata.resourceVersion);
         return () => retryWatch.stop();
-    }, [workflow]);
+    }, [namespace, name]);
 
     const openLink = (link: Link) => {
         const url = link.url

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -868,9 +868,9 @@
   integrity sha512-vKDJUuE2GAdBERaQWmmtsciAMzjwNrROXA5KTGSZvayAsmuTGjam5z6QNqNPCwDfVljLWuov1nEC3mEQf/n6fQ==
 
 "@fortawesome/fontawesome-free@^5.8.1":
-  version "5.15.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
-  integrity sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz#218cd7276ab4f9ab57cc3d2efa2697e6a579f25d"
+  integrity sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA==
 
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
@@ -1746,7 +1746,7 @@ are-we-there-yet@~1.1.2:
 
 "argo-ui@https://github.com/argoproj/argo-ui.git":
   version "1.0.0"
-  resolved "https://github.com/argoproj/argo-ui.git#77c48363eb37b7a56288a7c40c15a33d3a0c4d70"
+  resolved "https://github.com/argoproj/argo-ui.git#d4cf87d94adba8a54bd85dd398fdd11f2689c268"
   dependencies:
     "@fortawesome/fontawesome-free" "^5.8.1"
     "@tippy.js/react" "^2.1.2"