[v12] Web: Add back buttons and remove exit buttons (discover & integrations)

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 (
       <Box maxWidth="700px">
-        <Header prevStep={prevStep} />
+        <Heading />
         <Box maxWidth="700px">
           <Text mt={4} width="100px">
             You don’t have the required permissions for integrating.
@@ -121,7 +121,7 @@ export function ConnectAwsAccount() {
   if (attempt.status === 'processing') {
     return (
       <Box maxWidth="700px">
-        <Header prevStep={prevStep} />
+        <Heading />
         <Box textAlign="center" m={10}>
           <Indicator />
         </Box>
@@ -132,7 +132,7 @@ export function ConnectAwsAccount() {
   if (attempt.status === 'failed') {
     return (
       <Box maxWidth="700px">
-        <Header prevStep={prevStep} />
+        <Heading />
         <Alert kind="danger" children={attempt.statusText} />
         <ButtonPrimary mt={2} onClick={fetchAwsIntegrations}>
           Retry
@@ -172,7 +172,7 @@ export function ConnectAwsAccount() {
   };
   return (
     <Box maxWidth="700px">
-      <Header prevStep={prevStep} />
+      <Heading />
       <Box mb={3}>
         <Validation>
           {({ validator }) => (
@@ -212,6 +212,7 @@ export function ConnectAwsAccount() {
               )}
 
               <ActionButtons
+                onPrev={prevStep}
                 onProceed={() => proceedWithExistingIntegration(validator)}
                 disableProceed={!hasAwsIntegrations || !selectedAwsIntegration}
               />
@@ -223,11 +224,9 @@ export function ConnectAwsAccount() {
   );
 }
 
-const Header = ({ prevStep }: { prevStep(): void }) => (
+const Heading = () => (
   <>
-    <HeaderWithBackBtn onPrev={prevStep}>
-      Connect to your AWS Account
-    </HeaderWithBackBtn>
+    <Header>Connect to your AWS Account</Header>
     <HeaderSubtitle>
       Instead of storing long-lived static credentials, Teleport will request
       short-lived credentials from AWS to perform operations automatically.

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({
     <Validation>
       {({ validator }) => (
         <Box maxWidth="800px">
-          <HeaderWithBackBtn onPrev={prevStep}>
-            Register a Database
-          </HeaderWithBackBtn>
+          <Header>Register a Database</Header>
           <HeaderSubtitle>
             Create a new database resource for the database server.
           </HeaderSubtitle>
@@ -176,6 +174,7 @@ export function CreateDatabaseView({
             </>
           )}
           <ActionButtons
+            onPrev={prevStep}
             onProceed={() => handleOnProceed(validator)}
             // On failure, allow user to attempt again.
             disableProceed={

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,

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}
         />
       )}
-      <HeaderWithBackBtn onPrev={prevStep}>Test Connection</HeaderWithBackBtn>
+      <Header>Test Connection</Header>
       <HeaderSubtitle>
         Optionally verify that you can successfully connect to the Database you
         just added.
@@ -161,7 +161,7 @@ export function TestConnectionView({
           <TextSelectCopy mt="1" text={tshDbCmd} />
         </Box>
       </StyledBox>
-      <ActionButtons onProceed={nextStep} lastStep={true} />
+      <ActionButtons onProceed={nextStep} lastStep={true} onPrev={prevStep} />
     </Box>
   );
 }

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 (
     <Box>
-      <HeaderWithBackBtn onPrev={props.prevStep}>
-        Install Active Directory
-      </HeaderWithBackBtn>
+      <Header>Install Active Directory</Header>
 
       <Text mb={4}>
         If you haven't already, install Active Directory and AD Certificate
@@ -58,7 +52,10 @@ export function InstallActiveDirectory(props: State) {
 
       {getSteps(installActiveDirectorySteps)}
 
-      <ActionButtons onProceed={() => props.nextStep()} />
+      <ActionButtons
+        onProceed={() => props.nextStep()}
+        onPrev={props.prevStep}
+      />
     </Box>
   );
 }

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 => (
         <Box>
-          <Heading prevStep={props.prevStep} />
+          <Heading />
           <StepOne />
           <StepTwo
             onEdit={() => setShowHelmChart(false)}
@@ -76,14 +76,18 @@ export default function Container(props: AgentStepProps) {
             clusterName={clusterName}
             setClusterName={setClusterName}
           />
-          <ActionButtons onProceed={() => null} disableProceed={true} />
+          <ActionButtons
+            onProceed={() => null}
+            disableProceed={true}
+            onPrev={props.prevStep}
+          />
         </Box>
       )}
     >
       <Suspense
         fallback={
           <Box>
-            <Heading prevStep={props.prevStep} />
+            <Heading />
             <StepOne />
             <StepTwo
               onEdit={() => setShowHelmChart(false)}
@@ -92,13 +96,17 @@ export default function Container(props: AgentStepProps) {
               clusterName={clusterName}
               setClusterName={setClusterName}
             />
-            <ActionButtons onProceed={() => null} disableProceed={true} />
+            <ActionButtons
+              onProceed={() => null}
+              disableProceed={true}
+              onPrev={props.prevStep}
+            />
           </Box>
         }
       >
         {!showHelmChart && (
           <Box>
-            <Heading prevStep={props.prevStep} />
+            <Heading />
             <StepOne />
             <StepTwo
               onEdit={() => setShowHelmChart(false)}
@@ -108,7 +116,11 @@ export default function Container(props: AgentStepProps) {
               clusterName={clusterName}
               setClusterName={setClusterName}
             />
-            <ActionButtons onProceed={() => null} disableProceed={true} />
+            <ActionButtons
+              onProceed={() => null}
+              disableProceed={true}
+              onPrev={props.prevStep}
+            />
           </Box>
         )}
         {showHelmChart && (
@@ -141,7 +153,7 @@ export function HelmChart(
 
   return (
     <Box>
-      <Heading prevStep={props.prevStep} />
+      <Heading />
       <StepOne />
       <StepTwo
         disabled={true}
@@ -153,6 +165,7 @@ export function HelmChart(
         setClusterName={props.setClusterName}
       />
       <InstallHelmChart
+        prevStep={props.prevStep}
         namespace={props.namespace}
         clusterName={props.clusterName}
         joinToken={joinToken}
@@ -163,12 +176,10 @@ export function HelmChart(
   );
 }
 
-const Heading = ({ prevStep }: { prevStep(): void }) => {
+const Heading = () => {
   return (
     <>
-      <HeaderWithBackBtn onPrev={prevStep}>
-        Configure Resource
-      </HeaderWithBackBtn>
+      <Header>Configure Resource</Header>
       <HeaderSubtitle>
         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 = ({
         <TextSelectCopyMulti lines={[{ text: command }]} />
       </CommandBox>
       {hint}
-      <ActionButtons onProceed={handleOnProceed} disableProceed={!result} />
+      <ActionButtons
+        onProceed={handleOnProceed}
+        disableProceed={!result}
+        onPrev={prevStep}
+      />
     </>
   );
 };
@@ -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;
 `;

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,

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}
             />
           )}
-          <HeaderWithBackBtn onPrev={prevStep}>
-            Test Connection
-          </HeaderWithBackBtn>
+          <Header>Test Connection</Header>
           <HeaderSubtitle>
             Optionally verify that you can successfully connect to the
             Kubernetes cluster you just added.
@@ -196,7 +194,11 @@ export function TestConnection({
               <TextSelectCopy mt="1" text="kubectl get pods" />
             </Box>
           </StyledBox>
-          <ActionButtons onProceed={nextStep} lastStep={true} />
+          <ActionButtons
+            onProceed={nextStep}
+            lastStep={true}
+            onPrev={prevStep}
+          />
         </Box>
       )}
     </Validation>