Move EKS Discover joinToken generation to the ManualHelm dialog.

web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/Dialogs.story.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { MemoryRouter } from 'react-router';
 import { rest } from 'msw';
 import { mswLoader } from 'msw-storybook-addon';
@@ -27,11 +27,23 @@ import { ResourceKind } from 'teleport/Discover/Shared';
 import { PingTeleportProvider } from 'teleport/Discover/Shared/PingTeleportContext';
 import { ContextProvider } from 'teleport';
 
+import { INTERNAL_RESOURCE_ID_LABEL_KEY } from 'teleport/services/joinToken';
+import { clearCachedJoinTokenResult } from 'teleport/Discover/Shared/useJoinTokenSuspender';
+import {
+  DiscoverContextState,
+  DiscoverProvider,
+} from 'teleport/Discover/useDiscover';
+import {
+  IntegrationKind,
+  IntegrationStatusCode,
+} from 'teleport/services/integrations';
+import { DiscoverEventResource } from 'teleport/services/userEvent';
+
 import { generateCmd } from 'teleport/Discover/Kubernetes/HelmChart/HelmChart';
 
-import { ManualHelmDialog } from './ManualHelmDialog';
-import { AgentWaitingDialog } from './AgentWaitingDialog';
 import { EnrollmentDialog } from './EnrollmentDialog';
+import { AgentWaitingDialog } from './AgentWaitingDialog';
+import { ManualHelmDialog } from './ManualHelmDialog';
 
 export default {
   title: 'Teleport/Discover/Kube/EnrollEksClusters/Dialogs',
@@ -110,7 +122,7 @@ AgentWaitingDialogSuccess.parameters = {
   },
 };
 
-const helmCommand = generateCmd({
+const helmCommandProps = {
   namespace: 'teleport-agent',
   clusterName: 'EKS1',
   proxyAddr: 'teleport-proxy.example.com:1234',
@@ -126,15 +138,91 @@ const helmCommand = generateCmd({
     { name: 'region', value: 'us-east-1' },
     { name: 'account-id', value: '1234567789012' },
   ],
-});
+};
 
-export const ManualHelmDialogStory = () => (
-  <MemoryRouter initialEntries={[{ state: { discover: {} } }]}>
-    <ManualHelmDialog
-      command={helmCommand}
-      confirmedCommands={() => {}}
-      cancel={() => {}}
-    />
-  </MemoryRouter>
-);
+export const ManualHelmDialogStory = () => {
+  const discoverCtx: DiscoverContextState = {
+    agentMeta: {
+      resourceName: 'kube-name',
+      agentMatcherLabels: [],
+      kube: {
+        kind: 'kube_cluster',
+        name: '',
+        labels: [],
+      },
+      awsIntegration: {
+        kind: IntegrationKind.AwsOidc,
+        name: 'test-oidc',
+        resourceType: 'integration',
+        spec: {
+          roleArn: 'arn:aws:iam::123456789012:role/test-role-arn',
+        },
+        statusCode: IntegrationStatusCode.Running,
+      },
+    },
+    currentStep: 0,
+    nextStep: () => null,
+    prevStep: () => null,
+    onSelectResource: () => null,
+    resourceSpec: {
+      name: 'Eks',
+      kind: ResourceKind.Kubernetes,
+      icon: 'Eks',
+      keywords: '',
+      event: DiscoverEventResource.KubernetesEks,
+    },
+    exitFlow: () => null,
+    viewConfig: null,
+    indexedViews: [],
+    setResourceSpec: () => null,
+    updateAgentMeta: () => null,
+    emitErrorEvent: () => null,
+    emitEvent: () => null,
+    eventState: null,
+  };
+
+  useEffect(() => {
+    return () => {
+      clearCachedJoinTokenResult([
+        ResourceKind.Kubernetes,
+        ResourceKind.Application,
+        ResourceKind.Discovery,
+      ]);
+    };
+  }, []);
+
+  return (
+    <MemoryRouter
+      initialEntries={[
+        { pathname: cfg.routes.discover, state: { entity: 'eks' } },
+      ]}
+    >
+      <ContextProvider ctx={createTeleportContext()}>
+        <DiscoverProvider mockCtx={discoverCtx}>
+          <ManualHelmDialog
+            setJoinTokenAndGetCommand={() => generateCmd(helmCommandProps)}
+            confirmedCommands={() => {}}
+            cancel={() => {}}
+          />
+        </DiscoverProvider>
+      </ContextProvider>
+    </MemoryRouter>
+  );
+};
 ManualHelmDialogStory.storyName = 'ManualHelmDialog';
+ManualHelmDialogStory.parameters = {
+  msw: {
+    handlers: [
+      rest.post(cfg.api.joinTokenPath, (req, res, ctx) => {
+        return res(
+          ctx.json({
+            id: 'token-id',
+            suggestedLabels: [
+              { name: INTERNAL_RESOURCE_ID_LABEL_KEY, value: 'resource-id' },
+            ],
+          })
+        );
+      }),
+    ],
+  },
+};

web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/EnrollEksCluster.tsx

@@ -39,14 +39,15 @@ import { isIamPermError } from 'teleport/Discover/Shared/Aws/error';
 import { AgentStepProps } from 'teleport/Discover/types';
 import useTeleport from 'teleport/useTeleport';
 
-import { useJoinTokenSuspender } from 'teleport/Discover/Shared/useJoinTokenSuspender';
 import { generateCmd } from 'teleport/Discover/Kubernetes/HelmChart/HelmChart';
 import { Kube } from 'teleport/services/kube';
 
-import { Header, ResourceKind } from '../../Shared';
+import { JoinToken } from 'teleport/services/joinToken';
+
+import { Header } from '../../Shared';
 
 import { ClustersList } from './EksClustersList';
-import { ManualHelmDialog } from './ManualHelmDialog';
+import ManualHelmDialog from './ManualHelmDialog';
 import { EnrollmentDialog } from './EnrollmentDialog';
 import { AgentWaitingDialog } from './AgentWaitingDialog';
 
@@ -97,14 +98,11 @@ export function EnrollEksCluster(props: AgentStepProps) {
     useState(false);
   const [isManualHelmDialogShown, setIsManualHelmDialogShown] = useState(false);
   const [waitingResourceId, setWaitingResourceId] = useState('');
+  // join token will be set only if user opens ManualHelmDialog,
+  // we delay it to avoid premature admin action MFA confirmation request.
+  const [joinToken, setJoinToken] = useState<JoinToken>(null);
   const ctx = useTeleport();
 
-  const { joinToken } = useJoinTokenSuspender([
-    ResourceKind.Kubernetes,
-    ResourceKind.Application,
-    ResourceKind.Discovery,
-  ]);
-
   function fetchClustersWithNewRegion(region: Regions) {
     setSelectedRegion(region);
     // Clear table when fetching with new region.
@@ -205,8 +203,6 @@ export function EnrollEksCluster(props: AgentStepProps) {
         {
           region: selectedRegion,
           enableAppDiscovery: isAppDiscoveryEnabled,
-          joinToken: joinToken.id,
-          resourceId: joinToken.internalResourceId,
           clusterNames: [selectedCluster.name],
         }
       );
@@ -262,23 +258,23 @@ export function EnrollEksCluster(props: AgentStepProps) {
     !selectedCluster ||
     enrollmentState.status !== 'notStarted';
 
-  let command = '';
-  if (selectedCluster) {
-    command = generateCmd({
+  const setJoinTokenAndGetCommand = (token: JoinToken) => {
+    setJoinToken(token);
+    return generateCmd({
       namespace: 'teleport-agent',
       clusterName: selectedCluster.name,
       proxyAddr: ctx.storeUser.state.cluster.publicURL,
-      tokenId: joinToken.id,
       clusterVersion: ctx.storeUser.state.cluster.authVersion,
-      resourceId: joinToken.internalResourceId,
+      tokenId: token.id,
+      resourceId: token.internalResourceId,
       isEnterprise: ctx.isEnterprise,
       isCloud: ctx.isCloud,
       automaticUpgradesEnabled: ctx.automaticUpgradesEnabled,
       automaticUpgradesTargetVersion: ctx.automaticUpgradesTargetVersion,
       joinLabels: [...selectedCluster.labels, ...selectedCluster.joinLabels],
       disableAppDiscovery: !isAppDiscoveryEnabled,
     });
-  }
+  };
 
   return (
     <Box maxWidth="1000px">
@@ -366,7 +362,7 @@ export function EnrollEksCluster(props: AgentStepProps) {
       )}
       {isManualHelmDialogShown && (
         <ManualHelmDialog
-          command={command}
+          setJoinTokenAndGetCommand={setJoinTokenAndGetCommand}
           cancel={() => setIsManualHelmDialogShown(false)}
           confirmedCommands={() => {
             setEnrollmentState({ status: 'awaitingAgent' });
@@ -377,7 +373,7 @@ export function EnrollEksCluster(props: AgentStepProps) {
       )}
       {isAgentWaitingDialogShown && (
         <AgentWaitingDialog
-          joinResourceId={waitingResourceId || joinToken.internalResourceId}
+          joinResourceId={waitingResourceId || joinToken?.internalResourceId}
           status={enrollmentState.status}
           clusterName={selectedCluster.name}
           updateWaitingResult={(result: Kube) => {

web/packages/teleport/src/Discover/Kubernetes/EnrollEKSCluster/ManualHelmDialog.tsx

@@ -19,24 +19,98 @@
 import Dialog, { DialogContent, DialogFooter } from 'design/DialogConfirmation';
 import { Box, Flex, ButtonPrimary, ButtonSecondary, Text } from 'design';
 
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import styled from 'styled-components';
 
+import { Spinner } from 'design/Icon';
+
+import * as Icons from 'design/Icon';
+
 import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy';
 import { CommandBox } from 'teleport/Discover/Shared/CommandBox';
 
+import { useJoinTokenSuspender } from 'teleport/Discover/Shared/useJoinTokenSuspender';
+import { ResourceKind, TextIcon } from 'teleport/Discover/Shared';
+import { JoinToken } from 'teleport/services/joinToken';
+import { CatchError } from 'teleport/components/CatchError';
+
 type ManualHelmDialogProps = {
-  command: string;
+  setJoinTokenAndGetCommand(token: JoinToken): string;
   confirmedCommands(): void;
   cancel(): void;
 };
 
+export default function Container(props: ManualHelmDialogProps) {
+  return (
+    <CatchError
+      fallbackFn={fallbackProps => (
+        <DummyDialog error={fallbackProps.error} cancel={props.cancel} />
+      )}
+    >
+      <Suspense
+        fallback={<DummyDialog showSpinner={true} cancel={props.cancel} />}
+      >
+        <ManualHelmDialog {...props} />
+      </Suspense>
+    </CatchError>
+  );
+}
+
+type DummyDialogProps = {
+  cancel: () => void;
+  error?: Error;
+  showSpinner?: boolean;
+};
+
+const DummyDialog = ({ error, cancel, showSpinner }: DummyDialogProps) => {
+  return (
+    <Dialog onClose={cancel} open={true}>
+      <DialogContent width="850px" mb={0}>
+        <Text bold caps mb={4}>
+          Manual EKS Cluster Enrollment
+        </Text>
+        {showSpinner && (
+          <Flex mb={4} justifyContent="center">
+            <Spin>
+              <Spinner />
+            </Spin>
+          </Flex>
+        )}
+        {error && (
+          <Box mb={4}>
+            <TextIcon mt={3}>
+              <Icons.Warning size="medium" ml={1} mr={2} color="error.main" />
+              Encountered an error: {error.message}
+            </TextIcon>
+          </Box>
+        )}
+      </DialogContent>
+      <DialogFooter alignItems="center" as={Flex} gap={4}>
+        <ButtonPrimary width="50%" onClick={() => {}} disabled>
+          I ran these commands
+        </ButtonPrimary>
+        <ButtonSecondary width="50%" onClick={cancel}>
+          Cancel
+        </ButtonSecondary>
+      </DialogFooter>
+    </Dialog>
+  );
+};
+
 export function ManualHelmDialog({
-  command,
+  setJoinTokenAndGetCommand,
   cancel,
   confirmedCommands,
 }: ManualHelmDialogProps) {
+  const { joinToken } = useJoinTokenSuspender([
+    ResourceKind.Kubernetes,
+    ResourceKind.Application,
+    ResourceKind.Discovery,
+  ]);
+
+  const command = setJoinTokenAndGetCommand(joinToken);
+
   return (
     <Dialog onClose={cancel} open={true}>
       <DialogContent width="850px" mb={0}>
@@ -89,3 +163,17 @@ const StyledBox = styled(Box)`
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
 `;
+
+const Spin = styled(Box)`
+  line-height: 12px;
+  font-size: 24px;
+  animation: spin 1s linear infinite;
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;

web/packages/teleport/src/services/integrations/types.ts

@@ -317,8 +317,6 @@ export type AwsEksCluster = {
 export type EnrollEksClustersRequest = {
   region: string;
   enableAppDiscovery: boolean;
-  joinToken: string;
-  resourceId: string;
   clusterNames: string[];
 };