diff --git a/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/ConnectAwsAccount.tsx b/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/ConnectAwsAccount.tsx index 21873c62500fb..f89f47eecb9bd 100644 --- a/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/ConnectAwsAccount.tsx +++ b/web/packages/teleport/src/Discover/Database/ConnectAwsAccount/ConnectAwsAccount.tsx @@ -40,7 +40,7 @@ import { import { integrationRWEAndDbCU } from 'teleport/Discover/yamlTemplates'; import useTeleport from 'teleport/useTeleport'; -import { ActionButtons, HeaderSubtitle, HeaderWithBackBtn } from '../../Shared'; +import { ActionButtons, HeaderSubtitle, Header } from '../../Shared'; import { DbMeta, @@ -99,7 +99,7 @@ export function ConnectAwsAccount() { if (!hasAccess) { return ( -
+ You don’t have the required permissions for integrating. @@ -121,7 +121,7 @@ export function ConnectAwsAccount() { if (attempt.status === 'processing') { return ( -
+ @@ -132,7 +132,7 @@ export function ConnectAwsAccount() { if (attempt.status === 'failed') { return ( -
+ Retry @@ -172,7 +172,7 @@ export function ConnectAwsAccount() { }; return ( -
+ {({ validator }) => ( @@ -212,6 +212,7 @@ export function ConnectAwsAccount() { )} proceedWithExistingIntegration(validator)} disableProceed={!hasAwsIntegrations || !selectedAwsIntegration} /> @@ -223,11 +224,9 @@ export function ConnectAwsAccount() { ); } -const Header = ({ prevStep }: { prevStep(): void }) => ( +const Heading = () => ( <> - - Connect to your AWS Account - +
Connect to your AWS Account
Instead of storing long-lived static credentials, Teleport will request short-lived credentials from AWS to perform operations automatically. diff --git a/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx b/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx index 9057c01c60451..983003f08164b 100644 --- a/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx +++ b/web/packages/teleport/src/Discover/Database/CreateDatabase/CreateDatabase.tsx @@ -27,7 +27,7 @@ import { HeaderSubtitle, LabelsCreater, Mark, - HeaderWithBackBtn, + Header, } from '../../Shared'; import { dbCU } from '../../yamlTemplates'; import { @@ -95,9 +95,7 @@ export function CreateDatabaseView({ {({ validator }) => ( - - Register a Database - +
Register a Database
Create a new database resource for the database server. @@ -176,6 +174,7 @@ export function CreateDatabaseView({ )} handleOnProceed(validator)} // On failure, allow user to attempt again. disableProceed={ diff --git a/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.story.tsx b/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.story.tsx index 1e8e161cd6e9c..16e54dd4e87e1 100644 --- a/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.story.tsx +++ b/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.story.tsx @@ -89,6 +89,7 @@ const props: State = { statusText: '', }, onProceed: () => null, + onPrev: () => null, fetchUserTraits: () => null, isSsoUser: false, canEditUser: true, diff --git a/web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx b/web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx index bc2faa02957e9..83a1acd03d0bb 100644 --- a/web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx +++ b/web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx @@ -27,7 +27,7 @@ import ReAuthenticate from 'teleport/components/ReAuthenticate'; import { ActionButtons, HeaderSubtitle, - HeaderWithBackBtn, + Header, ConnectionDiagnosticResult, } from '../../Shared'; import { DatabaseEngine } from '../../SelectResource'; @@ -85,7 +85,7 @@ export function TestConnectionView({ onClose={cancelMfaDialog} /> )} - Test Connection +
Test Connection
Optionally verify that you can successfully connect to the Database you just added. @@ -161,7 +161,7 @@ export function TestConnectionView({ - + ); } diff --git a/web/packages/teleport/src/Discover/Desktop/InstallActiveDirectory/InstallActiveDirectory.tsx b/web/packages/teleport/src/Discover/Desktop/InstallActiveDirectory/InstallActiveDirectory.tsx index 896b0e1d89c7e..21e2d016eceac 100644 --- a/web/packages/teleport/src/Discover/Desktop/InstallActiveDirectory/InstallActiveDirectory.tsx +++ b/web/packages/teleport/src/Discover/Desktop/InstallActiveDirectory/InstallActiveDirectory.tsx @@ -20,11 +20,7 @@ import { Text, Box } from 'design'; import cfg from 'teleport/config'; -import { - ActionButtons, - Step, - HeaderWithBackBtn, -} from 'teleport/Discover/Shared'; +import { ActionButtons, Step, Header } from 'teleport/Discover/Shared'; import { State } from 'teleport/Discover/useDiscover'; import { generateCommand } from 'teleport/Discover/Shared/generateCommand'; @@ -47,9 +43,7 @@ const installActiveDirectorySteps: Step[] = [ export function InstallActiveDirectory(props: State) { return ( - - Install Active Directory - +
Install Active Directory
If you haven't already, install Active Directory and AD Certificate @@ -58,7 +52,10 @@ export function InstallActiveDirectory(props: State) { {getSteps(installActiveDirectorySteps)} - props.nextStep()} /> + props.nextStep()} + onPrev={props.prevStep} + /> ); } diff --git a/web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx b/web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx index dba38e2801101..8ab30f3092e85 100644 --- a/web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx +++ b/web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx @@ -46,7 +46,7 @@ import { ResourceKind, TextIcon, useShowHint, - HeaderWithBackBtn, + Header, } from '../../Shared'; import type { AgentStepProps } from '../../types'; @@ -66,7 +66,7 @@ export default function Container(props: AgentStepProps) { onRetry={() => clearCachedJoinTokenResult(ResourceKind.Kubernetes)} fallbackFn={fallbackProps => ( - + setShowHelmChart(false)} @@ -76,14 +76,18 @@ export default function Container(props: AgentStepProps) { clusterName={clusterName} setClusterName={setClusterName} /> - null} disableProceed={true} /> + null} + disableProceed={true} + onPrev={props.prevStep} + /> )} > - + setShowHelmChart(false)} @@ -92,13 +96,17 @@ export default function Container(props: AgentStepProps) { clusterName={clusterName} setClusterName={setClusterName} /> - null} disableProceed={true} /> + null} + disableProceed={true} + onPrev={props.prevStep} + /> } > {!showHelmChart && ( - + setShowHelmChart(false)} @@ -108,7 +116,11 @@ export default function Container(props: AgentStepProps) { clusterName={clusterName} setClusterName={setClusterName} /> - null} disableProceed={true} /> + null} + disableProceed={true} + onPrev={props.prevStep} + /> )} {showHelmChart && ( @@ -141,7 +153,7 @@ export function HelmChart( return ( - + { +const Heading = () => { return ( <> - - Configure Resource - +
Configure Resource
Install Teleport Service in your cluster via Helm to easily connect your Kubernetes cluster with Teleport. @@ -342,12 +353,14 @@ const InstallHelmChart = ({ clusterName, joinToken, nextStep, + prevStep, updateAgentMeta, }: { namespace: string; clusterName: string; joinToken: JoinToken; nextStep(): void; + prevStep(): void; updateAgentMeta(a: AgentMeta): void; }) => { const ctx = useTeleport(); @@ -446,7 +459,11 @@ const InstallHelmChart = ({ {hint} - + ); }; @@ -456,5 +473,4 @@ const StyledBox = styled(Box)` background-color: ${props => props.theme.colors.spotBackground[0]}; padding: ${props => `${props.theme.space[3]}px`}; border-radius: ${props => `${props.theme.space[2]}px`}; - border: 2px solid #2f3659; `; diff --git a/web/packages/teleport/src/Discover/Kubernetes/SetupAccess/SetupAccess.story.tsx b/web/packages/teleport/src/Discover/Kubernetes/SetupAccess/SetupAccess.story.tsx index faf58d3f41131..8eb8b0446a77a 100644 --- a/web/packages/teleport/src/Discover/Kubernetes/SetupAccess/SetupAccess.story.tsx +++ b/web/packages/teleport/src/Discover/Kubernetes/SetupAccess/SetupAccess.story.tsx @@ -57,6 +57,7 @@ const props: State = { statusText: '', }, onProceed: () => null, + onPrev: () => null, fetchUserTraits: () => null, isSsoUser: false, canEditUser: true, diff --git a/web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx b/web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx index 7a21b92268d27..0b0cc5cdea042 100644 --- a/web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx +++ b/web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx @@ -30,7 +30,7 @@ import ReAuthenticate from 'teleport/components/ReAuthenticate'; import { ActionButtons, HeaderSubtitle, - HeaderWithBackBtn, + Header, ConnectionDiagnosticResult, } from '../../Shared'; @@ -97,9 +97,7 @@ export function TestConnection({ onClose={cancelMfaDialog} /> )} - - Test Connection - +
Test Connection
Optionally verify that you can successfully connect to the Kubernetes cluster you just added. @@ -196,7 +194,11 @@ export function TestConnection({ - + )} diff --git a/web/packages/teleport/src/Discover/Server/DownloadScript/DownloadScript.tsx b/web/packages/teleport/src/Discover/Server/DownloadScript/DownloadScript.tsx index 7051d45bee5b0..7c28877be6924 100644 --- a/web/packages/teleport/src/Discover/Server/DownloadScript/DownloadScript.tsx +++ b/web/packages/teleport/src/Discover/Server/DownloadScript/DownloadScript.tsx @@ -43,7 +43,7 @@ import { AgentStepProps } from '../../types'; import { ActionButtons, HeaderSubtitle, - HeaderWithBackBtn, + Header, Mark, ResourceKind, TextIcon, @@ -156,9 +156,7 @@ export function DownloadScript(props: AgentStepProps) { return ( <> - - Configure Resource - +
Configure Resource
Install and configure the Teleport SSH Service.
@@ -170,7 +168,11 @@ export function DownloadScript(props: AgentStepProps) { /> {hint} - + ); } @@ -186,16 +188,18 @@ const Template = ({ }) => { return ( <> - - Configure Resource - +
Configure Resource
Install and configure the Teleport SSH Service.
Run the following command on the server you want to add. {children} - + ); }; diff --git a/web/packages/teleport/src/Discover/Server/SetupAccess/SetupAccess.story.tsx b/web/packages/teleport/src/Discover/Server/SetupAccess/SetupAccess.story.tsx index 9962fda590e97..2c5424daedbaa 100644 --- a/web/packages/teleport/src/Discover/Server/SetupAccess/SetupAccess.story.tsx +++ b/web/packages/teleport/src/Discover/Server/SetupAccess/SetupAccess.story.tsx @@ -57,6 +57,7 @@ const props: State = { statusText: '', }, onProceed: () => null, + onPrev: () => null, fetchUserTraits: () => null, isSsoUser: false, canEditUser: true, diff --git a/web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx b/web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx index 633cb950ae543..8fa4ab05a1998 100644 --- a/web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx +++ b/web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx @@ -22,7 +22,7 @@ import Select from 'shared/components/Select'; import ReAuthenticate from 'teleport/components/ReAuthenticate'; import { - HeaderWithBackBtn, + Header, ActionButtons, HeaderSubtitle, ConnectionDiagnosticResult, @@ -66,7 +66,7 @@ export function TestConnection({ onClose={cancelMfaDialog} /> )} - Test Connection +
Test Connection
Optionally verify that you can successfully connect to the server you just added. @@ -106,7 +106,7 @@ export function TestConnection({ Start Session - + ); } diff --git a/web/packages/teleport/src/Discover/Shared/ActionButtons.tsx b/web/packages/teleport/src/Discover/Shared/ActionButtons.tsx index 61324b20c7893..13df44be5fbd9 100644 --- a/web/packages/teleport/src/Discover/Shared/ActionButtons.tsx +++ b/web/packages/teleport/src/Discover/Shared/ActionButtons.tsx @@ -15,13 +15,7 @@ */ import React from 'react'; - -import { NavLink } from 'react-router-dom'; - -import { Box, ButtonPrimary } from 'design'; -import { ButtonSecondary } from 'design/Button'; - -import cfg from 'teleport/config'; +import { Box, ButtonPrimary, ButtonSecondary } from 'design'; export const ActionButtons = ({ onProceed = null, @@ -29,7 +23,7 @@ export const ActionButtons = ({ proceedHref = '', disableProceed = false, lastStep = false, - hideExit = false, + onPrev = null, }: { onProceed?(): void; onSkip?(): void; @@ -37,7 +31,7 @@ export const ActionButtons = ({ disableProceed?: boolean; lastStep?: boolean; allowSkip?: boolean; - hideExit?: boolean; + onPrev?(): void; }) => { const allowSkip = !!onSkip; @@ -71,9 +65,9 @@ export const ActionButtons = ({ Skip )} - {!hideExit && ( - - Exit + {onPrev && ( + + Back )} diff --git a/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.story.tsx b/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.story.tsx index a3ad065d70507..d4a9cc858981e 100644 --- a/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.story.tsx +++ b/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.story.tsx @@ -94,5 +94,6 @@ const props: Props = { traitDescription: 'users and groups', hasTraits: true, onProceed: () => null, + onPrev: () => null, children:
This is where trait selection children renders
, }; diff --git a/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx b/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx index 84ae0a626d14c..6db67527c09f5 100644 --- a/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx +++ b/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx @@ -41,6 +41,7 @@ export type Props = { traitDescription: string; hasTraits: boolean; onProceed(): void; + onPrev(): void; children: React.ReactNode; infoContent?: React.ReactNode; }; @@ -55,6 +56,7 @@ export function SetupAccessWrapper({ traitDescription, headerSubtitle, onProceed, + onPrev, children, infoContent, }: Props) { @@ -134,6 +136,7 @@ export function SetupAccessWrapper({ {infoContent} ('next'); + const [stage, setStage] = useState(Stage.Initial); const [showRestartAnimation, setShowRestartAnimation] = useState(false); + const [awsOidc, setAwsOidc] = useState({ + thumbprint: '', + roleArn: '', + integrationName: '', + }); const currentStageIndex = STAGES.findIndex(s => s.kind === stage); const currentStage = STAGES[currentStageIndex]; @@ -143,6 +161,23 @@ export function AwsOidc() { } }, [currentStage, currentStageIndex, showRestartAnimation]); + function updateState(nextStage: Stage, awsOidc?: AwsOidc) { + if (nextStage > stage) { + transitionRef.current = 'next'; + } else { + transitionRef.current = 'prev'; + } + if (awsOidc) { + setAwsOidc(awsOidc); + } + setStage(nextStage); + } + + const transitionStyle = + transitionRef.current === 'next' + ? horizontalNextTransitionStyles + : horizontalPrevTransitionStyles; + return (
Set up your AWS account
@@ -155,33 +190,41 @@ export function AwsOidc() { - key={currentStageConfig.instructionStep} timeout={250} mountOnEnter unmountOnExit + onExiting={(n: HTMLElement) => { + n.style.transform = `translateX(${ + transitionRef.current === 'prev' ? '50px' : '-50px' + })`; + }} > {state => (
{currentStageConfig.instructionStep === InstructionStep.First && ( { - setStage(Stage.NewProviderFullScreen); - }} + onNext={() => updateState(Stage.NewProviderFullScreen)} + onPrev={null} clusterPublicUri={clusterPublicUri} /> )} {currentStageConfig.instructionStep === InstructionStep.Second && ( { - setStage(Stage.AddProvider); + awsOidc={awsOidc} + onNext={updatedAwsOidc => { + updateState(Stage.AddProvider, updatedAwsOidc); + }} + onPrev={updatedAwsOidc => { + updateState(Stage.Initial, updatedAwsOidc); }} clusterPublicUri={clusterPublicUri} /> @@ -189,41 +232,44 @@ export function AwsOidc() { {currentStageConfig.instructionStep === InstructionStep.Third && ( { - setStage(Stage.CreateNewRole); - }} + onNext={() => updateState(Stage.CreateNewRole)} + onPrev={() => updateState(Stage.NewProviderFullScreen)} clusterPublicUri={clusterPublicUri} /> )} {currentStageConfig.instructionStep === InstructionStep.Fourth && ( { - setStage(Stage.CreatePolicy); - }} + onNext={() => updateState(Stage.CreatePolicy)} + onPrev={() => updateState(Stage.AddProvider)} clusterPublicUri={clusterPublicUri} /> )} {currentStageConfig.instructionStep === InstructionStep.Fifth && ( { - setStage(Stage.AssignPolicyToRole); - }} + onNext={() => updateState(Stage.AssignPolicyToRole)} + onPrev={() => updateState(Stage.CreateNewRole)} clusterPublicUri={clusterPublicUri} /> )} {currentStageConfig.instructionStep === InstructionStep.Sixth && ( { - setStage(Stage.ListRoles); - }} + onNext={() => updateState(Stage.ListRoles)} + onPrev={() => updateState(Stage.CreatePolicy)} clusterPublicUri={clusterPublicUri} /> )} {currentStageConfig.instructionStep === - InstructionStep.Seventh && } + InstructionStep.Seventh && ( + + updateState(Stage.AssignPolicyToRole, updatedAwsOidc) + } + /> + )}
)} diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/SharedComponents.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/SharedComponents.tsx index 14551a14145ce..d2bc586ea08a9 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/SharedComponents.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/IAM/SharedComponents.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; import { AWSIcon, ChevronRightIcon } from 'design/SVGIcon'; @@ -59,12 +59,13 @@ export function BreadcrumbArrow() { export function AWSWrapper(props: React.PropsWithChildren) { const ctx = useTeleport(); + const theme = useTheme(); return (
- + {ctx.storeUser.state.username} diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FifthStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FifthStageInstructions.tsx index 23f13b8cfd161..15d469ec94180 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FifthStageInstructions.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FifthStageInstructions.tsx @@ -17,7 +17,7 @@ import React from 'react'; import Text from 'design/Text'; -import { ButtonPrimary } from 'design'; +import { ButtonPrimary, ButtonSecondary } from 'design'; import Box from 'design/Box'; import { TextSelectCopyMulti } from 'teleport/components/TextSelectCopy'; @@ -62,6 +62,9 @@ export function FifthStageInstructions(props: CommonInstructionsProps) { props.onNext()}>Next + props.onPrev()}> + Back + ); diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FourthStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FourthStageInstructions.tsx index 5846e1f8b2e3d..033dadc3f189d 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FourthStageInstructions.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/FourthStageInstructions.tsx @@ -19,7 +19,7 @@ import React from 'react'; import Text from 'design/Text'; import Box from 'design/Box'; -import { ButtonPrimary } from 'design'; +import { ButtonPrimary, ButtonSecondary } from 'design'; import { InstructionsContainer } from './common'; @@ -42,6 +42,9 @@ export function FourthStageInstructions(props: CommonInstructionsProps) { props.onNext()}>Next + props.onPrev()}> + Back + ); diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/Instructions.story.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/Instructions.story.tsx index 2aab67528b761..83fcaaaaf7017 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/Instructions.story.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/Instructions.story.tsx @@ -29,6 +29,7 @@ import { } from './SeventhStageInstructions'; import type { DiscoverUrlLocationState } from 'teleport/Discover/useDiscover'; +import type { CommonInstructionsProps } from './common'; export default { title: 'Teleport/Integrations/Enroll/AwsOidc/Instructions', @@ -42,7 +43,7 @@ export const Step5 = () => ; export const Step6 = () => ; export const Step7 = () => ( - + ); @@ -60,7 +61,13 @@ export const ConfirmDialogFromDiscover = () => ( ); -const props = { +const props: CommonInstructionsProps = { onNext: () => null, + onPrev: () => null, + awsOidc: { + thumbprint: 'thumbprint', + roleArn: 'arn', + integrationName: 'name', + }, clusterPublicUri: 'gravitationalwashington.cloud.gravitional.io:4444', }; diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SecondStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SecondStageInstructions.tsx index 4e907ab91ce67..b966384ed88b3 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SecondStageInstructions.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SecondStageInstructions.tsx @@ -18,7 +18,7 @@ import React, { useState } from 'react'; import Text from 'design/Text'; import Box from 'design/Box'; -import { ButtonPrimary } from 'design'; +import { ButtonPrimary, ButtonSecondary } from 'design'; import * as Icons from 'design/Icon'; import FieldInput from 'shared/components/FieldInput'; @@ -31,10 +31,12 @@ import { integrationService } from 'teleport/services/integrations'; import { InstructionsContainer } from './common'; -import type { CommonInstructionsProps } from './common'; +import type { CommonInstructionsProps, PreviousStepProps } from './common'; -export function SecondStageInstructions(props: CommonInstructionsProps) { - const [thumbprint, setThumbprint] = useState(''); +export function SecondStageInstructions( + props: CommonInstructionsProps & PreviousStepProps +) { + const [thumbprint, setThumbprint] = useState(props.awsOidc.thumbprint); const { attempt, run } = useAttempt(); function handleSubmit(validator: Validator) { @@ -45,7 +47,7 @@ export function SecondStageInstructions(props: CommonInstructionsProps) { run(() => integrationService.fetchThumbprint().then(fetchedThumbprint => { if (thumbprint === fetchedThumbprint) { - props.onNext(); + props.onNext({ ...props.awsOidc, thumbprint }); return; } @@ -129,6 +131,13 @@ export function SecondStageInstructions(props: CommonInstructionsProps) { > Next + props.onPrev({ ...props.awsOidc, thumbprint })} + disabled={attempt.status === 'processing'} + > + Back + )} diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SeventhStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SeventhStageInstructions.tsx index 651db0b5fadea..9da18e6f7ec48 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SeventhStageInstructions.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SeventhStageInstructions.tsx @@ -42,13 +42,13 @@ import { import cfg from 'teleport/config'; import { DiscoverUrlLocationState } from 'teleport/Discover/useDiscover'; -import { InstructionsContainer } from './common'; +import { InstructionsContainer, PreviousStepProps } from './common'; -export function SeventhStageInstructions() { +export function SeventhStageInstructions(props: PreviousStepProps) { const { attempt, setAttempt } = useAttempt(''); const [showConfirmBox, setShowConfirmBox] = useState(false); - const [roleArn, setRoleArn] = useState(''); - const [name, setName] = useState(''); + const [roleArn, setRoleArn] = useState(props.awsOidc.roleArn); + const [name, setName] = useState(props.awsOidc.integrationName); function handleSubmit(validator: Validator) { if (!validator.validate()) { @@ -112,6 +112,19 @@ export function SeventhStageInstructions() { > Next + + props.onPrev({ + ...props.awsOidc, + roleArn, + integrationName: name, + }) + } + disabled={attempt.status === 'processing'} + > + Back + )} diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SixthStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SixthStageInstructions.tsx index 1b81159d2102b..321caffbe2489 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SixthStageInstructions.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/SixthStageInstructions.tsx @@ -19,7 +19,7 @@ import React from 'react'; import Box from 'design/Box'; import Text from 'design/Text'; -import { ButtonPrimary } from 'design'; +import { ButtonPrimary, ButtonSecondary } from 'design'; import { InstructionsContainer } from './common'; @@ -47,6 +47,9 @@ export function SixthStageInstructions(props: CommonInstructionsProps) { props.onNext()}>Next + props.onPrev()}> + Back + ); diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/ThirdStageInstructions.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/ThirdStageInstructions.tsx index 2d3b3033c209d..02e6329b95d0d 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/ThirdStageInstructions.tsx +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/ThirdStageInstructions.tsx @@ -19,7 +19,7 @@ import React from 'react'; import Text from 'design/Text'; import Box from 'design/Box'; -import { ButtonPrimary } from 'design'; +import { ButtonPrimary, ButtonSecondary } from 'design'; import { InstructionsContainer } from './common'; @@ -44,6 +44,9 @@ export function ThirdStageInstructions(props: CommonInstructionsProps) { props.onNext()}>Next + props.onPrev()}> + Back + ); diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/common.ts b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/common.ts index 007672122aa1d..e794c9439865c 100644 --- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/common.ts +++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/instructions/common.ts @@ -16,11 +16,18 @@ import styled from 'styled-components'; -export interface CommonInstructionsProps { - onNext: () => void; +import { AwsOidc } from '../AwsOidc'; + +export interface CommonInstructionsProps extends PreviousStepProps { + onNext: (updatedAwsOidc?: AwsOidc) => void; clusterPublicUri: string; } +export interface PreviousStepProps { + onPrev: (updatedAwsOidc?: AwsOidc) => void; + awsOidc?: AwsOidc; +} + export const InstructionsContainer = styled.div` flex: 0 0 600px; padding-right: 100px; diff --git a/web/packages/teleport/src/mocks/handlers.ts b/web/packages/teleport/src/mocks/handlers.ts index 2ac3b29a136d9..430c7b114b357 100644 --- a/web/packages/teleport/src/mocks/handlers.ts +++ b/web/packages/teleport/src/mocks/handlers.ts @@ -34,4 +34,10 @@ export const handlersTeleport = [ rest.post(cfg.api.captureUserEventPath, (req, res, ctx) => { return res(ctx.status(200)); }), + rest.get(cfg.api.thumbprintPath, (req, res, ctx) => { + return res(ctx.json('examplevaluehere')); + }), + rest.post(cfg.getIntegrationsUrl(), (req, res, ctx) => { + return res(ctx.json({})); + }), ];