feat(ui): Make it easy to use SSO login with CLI. Resolves #4630

ui/src/app/userinfo/components/cli-help.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {useState} from 'react';
+
+export const CliHelp = () => {
+    const argoSecure = document.location.protocol === 'https';
+    const argoBaseHref = document
+        .getElementsByTagName('base')[0]
+        .href.toString()
+        .replace(document.location.protocol + '//' + document.location.host + '/', '');
+    const argoToken = decodeURIComponent(document.cookie)
+        .split(';')
+        .map(x => x.trim())
+        .find(x => x.startsWith('authorization='))
+        .replace('authorization=', '');
+
+    const text = `export ARGO_SERVER='${document.location.host}' 
+export ARGO_HTTP1=true  
+export ARGO_SECURE=${argoSecure ? 'true' : 'false'}
+export ARGO_BASE_HREF=${argoBaseHref}
+export ARGO_TOKEN='${argoToken}' 
+export ARGO_NAMESPACE=argo ;# or whatever your namespace is 
+export KUBECONFIG=/dev/null ;# recommended
+
+# check it works: 
+argo list`;
+
+    const [copied, setCopied] = useState(false);
+    return (
+        <div className='white-box'>
+            <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}}>{text.replace(argoToken, '[REDACTED]')}</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 copyText = document.getElementById('cliHelp');
+                        copyText.select();
+                        copyText.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 id='cliHelp' style={{width: 0, height: 0, opacity: 0}}>
+                {text}
+            </textarea>
+        </div>
+    );
+};

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

@@ -6,6 +6,7 @@ import {uiUrl} from '../../shared/base';
 import {BasePage} from '../../shared/components/base-page';
 import {ErrorNotice} from '../../shared/components/error-notice';
 import {services} from '../../shared/services';
+import {CliHelp} from './cli-help';
 
 interface State {
     error?: Error;
@@ -45,6 +46,7 @@ export class UserInfo extends BasePage<RouteComponentProps<any>, State> {
                             <i className='fa fa-shield-alt' /> Login / Logout
                         </a>
                     </div>
+                    <CliHelp />
                 </div>
             </Page>
         );