Add copy login command modal for external oidc login command

frontend/packages/console-shared/src/hoc/index.ts

@@ -4,4 +4,3 @@ export * from './withUserSettings';
 export * from './withActivePerspective';
 export * from './withTelemetry';
 export * from './withQuickStartContext';
-export * from './withRequestTokenURL';

frontend/packages/console-shared/src/hooks/index.ts

@@ -35,4 +35,5 @@ export * from './useTelemetry';
 export * from './useForceRender';
 export * from './useUtilizationDuration';
 export * from './usePrometheusGate';
-export * from './useRequestTokenURL';
+export * from './useCopyCodeModal';
+export * from './useCopyLoginCommands';

frontend/packages/console-shared/src/hooks/useCopyCodeModal.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { useModal } from '@console/dynamic-plugin-sdk/src/lib-core';
+import { CopyToClipboard } from '@console/internal/components/utils';
+import { Modal } from '@console/shared/src/components/modal';
+import { ModalComponent } from 'packages/console-dynamic-plugin-sdk/src/app/modal-support/ModalProvider';
+
+const CopyCodeModal: CopyCodeModalComponent = ({ title, snippet, closeModal }) => (
+  <Modal isOpen onClose={closeModal} showClose title={title} variant="medium">
+    <CopyToClipboard key={snippet} value={snippet} />
+  </Modal>
+);
+
+export const useCopyCodeModal: UseCopyCodeModal = (title, snippet) => {
+  const launcher = useModal();
+  return React.useCallback(() => (snippet ? launcher(CopyCodeModal, { title, snippet }) : null), [
+    launcher,
+    snippet,
+    title,
+  ]);
+};
+
+type CopyCodeModalProps = { title: string; snippet: string };
+type CopyCodeModalComponent = ModalComponent<CopyCodeModalProps>;
+type UseCopyCodeModal = (title: string, snippet: string) => () => void;

frontend/packages/console-shared/src/hooks/useCopyLoginCommands.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { consoleFetchJSON as coFetchJSON } from '@console/dynamic-plugin-sdk/src/utils/fetch';
+import { FLAGS } from '../constants';
+import { useFlag } from './flag';
+
+const COPY_LOGIN_COMMANDS_ENDPOINT = '/api/copy-login-commands';
+
+export const useCopyLoginCommands = (): [string, string] => {
+  const [requestTokenURL, setRequestTokenURL] = React.useState<string>();
+  const [externalLoginCommand, setExternalLoginCommand] = React.useState<string>();
+  const authEnabled = useFlag(FLAGS.AUTH_ENABLED);
+  React.useEffect(() => {
+    if (authEnabled) {
+      coFetchJSON(COPY_LOGIN_COMMANDS_ENDPOINT, 'GET', {}, 5000)
+        .then((resp) => {
+          const newRequestTokenURL = resp?.requestTokenURL ?? '';
+          const newExternalLoginCommand = resp?.externalLoginCommands ?? '';
+          if (newRequestTokenURL) {
+            setRequestTokenURL(newRequestTokenURL);
+            setExternalLoginCommand('');
+          } else if (newExternalLoginCommand) {
+            setExternalLoginCommand(newExternalLoginCommand);
+            setRequestTokenURL('');
+          }
+        })
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.warn(`Could not get request token URL: ${err}`);
+          setRequestTokenURL('');
+          setExternalLoginCommand('');
+        });
+    }
+  }, [authEnabled]);
+
+  return [requestTokenURL, externalLoginCommand];
+};

frontend/public/components/command-line-tools.tsx

@@ -2,19 +2,24 @@ import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
-import { Divider } from '@patternfly/react-core';
+import { Button, Divider } from '@patternfly/react-core';
 
-import { FLAGS } from '@console/shared';
+import { FLAGS, useCopyLoginCommands } from '@console/shared';
 import { ExternalLink, Firehose, FirehoseResult } from './utils';
 import { connectToFlags } from '../reducers/connectToFlags';
 import { ConsoleCLIDownloadModel } from '../models';
 import { referenceForModel } from '../module/k8s';
 import { SyncMarkdownView } from './markdown-view';
-import { useRequestTokenURL } from '@console/shared/src/hooks/useRequestTokenURL';
+import { useCopyCodeModal } from '@console/shared/src/hooks/useCopyCodeModal';
 
 export const CommandLineTools: React.FC<CommandLineToolsProps> = ({ obj }) => {
   const { t } = useTranslation();
-  const [requestTokenURL] = useRequestTokenURL();
+  const [requestTokenURL, externalLoginCommand] = useCopyLoginCommands();
+  const launchCopyLoginCommandModal = useCopyCodeModal(
+    t('public~Login with this command'),
+    externalLoginCommand,
+  );
+  const showCopyLoginCommand = requestTokenURL || externalLoginCommand;
   const data = _.sortBy(_.get(obj, 'data'), 'spec.displayName');
   const cliData = _.remove(data, (item) => item.metadata.name === 'oc-cli-downloads');
 
@@ -58,10 +63,16 @@ export const CommandLineTools: React.FC<CommandLineToolsProps> = ({ obj }) => {
         <h1 className="co-m-pane__heading">
           <div className="co-m-pane__name">{t('public~Command Line Tools')}</div>
         </h1>
-        {requestTokenURL && (
+        {showCopyLoginCommand && (
           <>
             <Divider className="co-divider" />
-            <ExternalLink href={requestTokenURL} text={t('public~Copy login command')} />
+            {requestTokenURL ? (
+              <ExternalLink href={requestTokenURL} text={t('public~Copy login command')} />
+            ) : (
+              <Button variant="link" onClick={launchCopyLoginCommandModal}>
+                {t('public~Copy login command')}
+              </Button>
+            )}
           </>
         )}
         {additionalCommandLineTools}

frontend/public/components/masthead-toolbar.jsx

@@ -8,6 +8,7 @@ import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-v
 import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { QuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import {
+  Button,
   NotificationBadge,
   Toolbar,
   ToolbarContent,
@@ -25,6 +26,8 @@ import {
   ACM_LINK_ID,
   FLAGS,
   useActiveNamespace,
+  useCopyCodeModal,
+  useCopyLoginCommands,
   useFlag,
   usePerspectiveExtension,
   useTelemetry,
@@ -49,7 +52,6 @@ import ClusterMenu from '@console/app/src/components/nav/ClusterMenu';
 import { ACM_PERSPECTIVE_ID } from '@console/app/src/consts';
 import { FeedbackModal } from '@patternfly/react-user-feedback';
 import { useFeedbackLocal } from './feedback-local';
-import { useRequestTokenURL } from '@console/shared/src/hooks/useRequestTokenURL';
 import feedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_feedback.svg';
 
 const defaultHelpLinks = [
@@ -117,7 +119,11 @@ const MastheadToolbarContents = ({ consoleLinks, cv, isMastheadStacked }) => {
   const openshiftFlag = useFlag(FLAGS.OPENSHIFT);
   const dispatch = useDispatch();
   const [activeNamespace] = useActiveNamespace();
-  const [requestTokenURL] = useRequestTokenURL();
+  const [requestTokenURL, externalLoginCommand] = useCopyLoginCommands();
+  const launchCopyLoginCommandModal = useCopyCodeModal(
+    t('public~Login with this command'),
+    externalLoginCommand,
+  );
   const { clusterID, user, alertCount, canAccessNS } = useSelector((state) => ({
     clusterID: state.UI.get('clusterID'),
     user: getUser(state),
@@ -447,14 +453,25 @@ const MastheadToolbarContents = ({ consoleLinks, cv, isMastheadStacked }) => {
           authSvc.logout();
         }
       };
-
       if (requestTokenURL) {
         userActions.unshift({
           label: t('public~Copy login command'),
           href: requestTokenURL,
           externalLink: true,
           dataTest: 'copy-login-command',
         });
+      } else if (externalLoginCommand) {
+        userActions.unshift({
+          component: (
+            <Button
+              variant="plain"
+              onClick={launchCopyLoginCommandModal}
+              dataTest="copy-login-command"
+            >
+              {t('public~Copy login command')}
+            </Button>
+          ),
+        });
       }
 
       userActions.push({

frontend/public/locales/en/public.json

@@ -288,6 +288,7 @@
   "The set of headers to check for the display name.": "The set of headers to check for the display name.",
   "Email headers": "Email headers",
   "The set of headers to check for the email address.": "The set of headers to check for the email address.",
+  "Login with this command": "Login with this command",
   "Download {{displayName}}": "Download {{displayName}}",
   "Command Line Tools": "Command Line Tools",
   "Copy login command": "Copy login command",