Re-order kube resource connection instructions for clarity (#880)

gravitational · Jun 14, 2022 · a2e7c1f · a2e7c1f
1 parent 237b1f6
commit a2e7c1f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 27 deletions.
diff --git a/packages/teleport/src/Kubes/ConnectDialog/ConnectDialog.tsx b/packages/teleport/src/Kubes/ConnectDialog/ConnectDialog.tsx
@@ -53,27 +53,29 @@ function ConnectDialog(props: Props) {
         </Box>
         <Box mb={4}>
           <Text bold as="span">
-            *Step 2
+            Optional
+          </Text>{' '}
+          - To write kubectl configuration to a separate file instead of having
+          your global kubectl configuration modified, run the following command:
+          <TextSelectCopy
+            mt="2"
+            text="export KUBECONFIG=${HOME?}/teleport-kubeconfig.yaml"
+          />
+        </Box>
+        <Box mb={4}>
+          <Text bold as="span">
+            Step 2
           </Text>
           {' - Select the Kubernetes cluster'}
           <TextSelectCopy mt="2" text={`tsh kube login ${kubeConnectName}`} />
         </Box>
-        <Box mb={4}>
+        <Box mb={1}>
           <Text bold as="span">
             Step 3
           </Text>
           {' - Connect to the Kubernetes cluster'}
           <TextSelectCopy mt="2" text={`kubectl get pods`} />
         </Box>
-        <Box>
-          * Note: To write kubectl configuration to a separate file instead of
-          having your global kubectl configuration modified, run the following
-          command, before running Step 2:
-          <TextSelectCopy
-            mt="2"
-            text="export KUBECONFIG=${HOME?}/teleport-kubeconfig.yaml"
-          />
-        </Box>
       </DialogContent>
       <DialogFooter>
         <ButtonSecondary onClick={onClose}>Close</ButtonSecondary>

diff --git a/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap b/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
@@ -81,6 +81,7 @@ exports[`kube connect dialogue local 1`] = `
 
 .c13 {
   box-sizing: border-box;
+  margin-bottom: 4px;
 }
 
 .c9 {
@@ -275,9 +276,10 @@ exports[`kube connect dialogue local 1`] = `
             <span
               class="c8"
             >
-              *Step 2
+              Optional
             </span>
-             - Select the Kubernetes cluster
+             
+            - To write kubectl configuration to a separate file instead of having your global kubectl configuration modified, run the following command:
             <div
               class="c9"
             >
@@ -291,7 +293,7 @@ exports[`kube connect dialogue local 1`] = `
                   $
                 </div>
                 <div>
-                  tsh kube login tele.logicoma.dev-prod
+                  export KUBECONFIG=\${HOME?}/teleport-kubeconfig.yaml
                 </div>
               </div>
               <button
@@ -309,9 +311,9 @@ exports[`kube connect dialogue local 1`] = `
             <span
               class="c8"
             >
-              Step 3
+              Step 2
             </span>
-             - Connect to the Kubernetes cluster
+             - Select the Kubernetes cluster
             <div
               class="c9"
             >
@@ -325,7 +327,7 @@ exports[`kube connect dialogue local 1`] = `
                   $
                 </div>
                 <div>
-                  kubectl get pods
+                  tsh kube login tele.logicoma.dev-prod
                 </div>
               </div>
               <button
@@ -340,7 +342,12 @@ exports[`kube connect dialogue local 1`] = `
           <div
             class="c13"
           >
-            * Note: To write kubectl configuration to a separate file instead of having your global kubectl configuration modified, run the following command, before running Step 2:
+            <span
+              class="c8"
+            >
+              Step 3
+            </span>
+             - Connect to the Kubernetes cluster
             <div
               class="c9"
             >
@@ -354,7 +361,7 @@ exports[`kube connect dialogue local 1`] = `
                   $
                 </div>
                 <div>
-                  export KUBECONFIG=\${HOME?}/teleport-kubeconfig.yaml
+                  kubectl get pods
                 </div>
               </div>
               <button
@@ -464,6 +471,7 @@ exports[`kube connect dialogue sso 1`] = `
 
 .c13 {
   box-sizing: border-box;
+  margin-bottom: 4px;
 }
 
 .c9 {
@@ -658,9 +666,10 @@ exports[`kube connect dialogue sso 1`] = `
             <span
               class="c8"
             >
-              *Step 2
+              Optional
             </span>
-             - Select the Kubernetes cluster
+             
+            - To write kubectl configuration to a separate file instead of having your global kubectl configuration modified, run the following command:
             <div
               class="c9"
             >
@@ -674,7 +683,7 @@ exports[`kube connect dialogue sso 1`] = `
                   $
                 </div>
                 <div>
-                  tsh kube login tele.logicoma.dev-prod
+                  export KUBECONFIG=\${HOME?}/teleport-kubeconfig.yaml
                 </div>
               </div>
               <button
@@ -692,9 +701,9 @@ exports[`kube connect dialogue sso 1`] = `
             <span
               class="c8"
             >
-              Step 3
+              Step 2
             </span>
-             - Connect to the Kubernetes cluster
+             - Select the Kubernetes cluster
             <div
               class="c9"
             >
@@ -708,7 +717,7 @@ exports[`kube connect dialogue sso 1`] = `
                   $
                 </div>
                 <div>
-                  kubectl get pods
+                  tsh kube login tele.logicoma.dev-prod
                 </div>
               </div>
               <button
@@ -723,7 +732,12 @@ exports[`kube connect dialogue sso 1`] = `
           <div
             class="c13"
           >
-            * Note: To write kubectl configuration to a separate file instead of having your global kubectl configuration modified, run the following command, before running Step 2:
+            <span
+              class="c8"
+            >
+              Step 3
+            </span>
+             - Connect to the Kubernetes cluster
             <div
               class="c9"
             >
@@ -737,7 +751,7 @@ exports[`kube connect dialogue sso 1`] = `
                   $
                 </div>
                 <div>
-                  export KUBECONFIG=\${HOME?}/teleport-kubeconfig.yaml
+                  kubectl get pods
                 </div>
               </div>
               <button