diff --git a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.test.tsx b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.test.tsx
index cf72a9f522101..207fbead9b50c 100644
--- a/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.test.tsx
+++ b/web/packages/teleport/src/Databases/ConnectDialog/ConnectDialog.test.tsx
@@ -18,6 +18,7 @@ import React from 'react';
import { render, screen } from 'design/utils/testing';
import ConnectDialog, { Props } from './ConnectDialog';
+import { ConnectWithRequestId } from './ConnectDialog.story';
test('correct connect command generated for postgres db', () => {
render( );
@@ -66,6 +67,12 @@ test('render dialog with instructions to connect to database', () => {
expect(screen.getByTestId('Modal')).toMatchSnapshot();
});
+test('render dialog with instructions to connect to database with requestId', () => {
+ const { baseElement } = render( );
+
+ expect(baseElement).toMatchSnapshot();
+});
+
const props: Props = {
username: 'yassine',
dbName: 'aurora',
diff --git a/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap b/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
index 49ff191398d0e..2c6ee897109f5 100644
--- a/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
+++ b/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
@@ -375,3 +375,417 @@ exports[`render dialog with instructions to connect to database 1`] = `
`;
+
+exports[`render dialog with instructions to connect to database with requestId 1`] = `
+.c7 {
+ box-sizing: border-box;
+ margin-bottom: 24px;
+}
+
+.c11 {
+ box-sizing: border-box;
+ margin-right: 4px;
+}
+
+.c13 {
+ box-sizing: border-box;
+}
+
+.c12 {
+ line-height: 1.5;
+ margin: 0;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-family: inherit;
+ font-weight: 600;
+ outline: none;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition: all 0.3s;
+ -webkit-font-smoothing: antialiased;
+ background: #512FC9;
+ color: rgba(255,255,255,0.87);
+ min-height: 32px;
+ font-size: 12px;
+ padding: 0px 24px;
+}
+
+.c12:active {
+ opacity: 0.56;
+}
+
+.c12:hover,
+.c12:focus {
+ background: #651FFF;
+}
+
+.c12:active {
+ background: #354AA4;
+}
+
+.c12:disabled {
+ background: rgba(255,255,255,0.12);
+ color: rgba(255,255,255,0.3);
+}
+
+.c16 {
+ line-height: 1.5;
+ margin: 0;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-family: inherit;
+ font-weight: 600;
+ outline: none;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition: all 0.3s;
+ -webkit-font-smoothing: antialiased;
+ background: #222C59;
+ color: rgba(255,255,255,0.87);
+ min-height: 32px;
+ font-size: 12px;
+ padding: 0px 24px;
+}
+
+.c16:active {
+ opacity: 0.56;
+}
+
+.c16:hover,
+.c16:focus {
+ background: #2C3A73;
+}
+
+.c16:disabled {
+ background: rgba(255,255,255,0.12);
+ color: rgba(255,255,255,0.3);
+}
+
+.c14 {
+ color: #03a9f4;
+ font-weight: normal;
+ background: none;
+ text-decoration: underline;
+ text-transform: none;
+}
+
+.c5 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 300;
+ font-size: 22px;
+ line-height: 32px;
+ text-transform: uppercase;
+ margin: 0px;
+ color: rgba(255,255,255,0.87);
+}
+
+.c8 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 600;
+ margin: 0px;
+}
+
+.c9 {
+ box-sizing: border-box;
+ margin-top: 8px;
+ padding: 8px;
+ background-color: #010B1C;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.c10 {
+ box-sizing: border-box;
+ margin-right: 8px;
+ display: flex;
+}
+
+.c1 {
+ z-index: -1;
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ left: 0;
+ background-color: rgba(0,0,0,0.5);
+ opacity: 1;
+ touch-action: none;
+}
+
+.c0 {
+ position: fixed;
+ z-index: 1200;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ left: 0;
+}
+
+.c2 {
+ height: 100%;
+ outline: none;
+ color: black;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 1;
+ will-change: opacity;
+ transition: opacity 225ms cubic-bezier(0.4,0,0.2,1) 0ms;
+}
+
+.c3 {
+ padding: 32px;
+ padding-top: 24px;
+ background: #1C254D;
+ color: rgba(255,255,255,0.87);
+ border-radius: 8px;
+ box-shadow: 0 8px 32px rgba(0,0,0,0.24);
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ overflow-y: auto;
+ max-height: calc(100% - 96px);
+ max-width: 600px;
+ width: 100%;
+}
+
+.c4 {
+ box-sizing: border-box;
+ margin-bottom: 24px;
+ min-height: 32px;
+ display: flex;
+ align-items: center;
+}
+
+.c6 {
+ box-sizing: border-box;
+ margin-bottom: 32px;
+ min-height: 240px;
+ flex: 0 0 auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.c15 {
+ box-sizing: border-box;
+}
+
+
+
+
+
+
+
+
+
+ Connect To Database
+
+
+
+
+
+ Step 1
+
+ - Login to Teleport
+
+
+
+ $
+
+
+ tsh login --proxy=localhost:443 --auth=local --user=yassine im-a-cluster --request-id=e1e8072c-1eb8-5df4-a7bd-b6863b19271c
+
+
+
+ Copy
+
+
+
+
+
+ Step 2
+
+ - Retrieve credentials for the database
+
+
+
+ $
+
+
+ tsh db login [--db-user=<user>] [--db-name=<name>] aurora
+
+
+
+ Copy
+
+
+
+
+
+ Step 3
+
+ - Connect to the database
+
+
+
+ $
+
+
+ tsh db connect [--db-user=<user>] [--db-name=<name>] aurora
+
+
+
+ Copy
+
+
+
+
+
+ Step 4 (Optional)
+
+ - When finished, drop the assumed role
+
+
+
+ $
+
+
+ tsh request drop
+
+
+
+ Copy
+
+
+
+
+ * Note: To connect with a GUI database client, see our
+
+ documentation
+
+ for instructions.
+
+
+
+
+ Close
+
+
+
+
+
+
+`;
diff --git a/web/packages/teleport/src/Discover/Discover.tsx b/web/packages/teleport/src/Discover/Discover.tsx
index 22d6d12c21e30..2dcb19979287f 100644
--- a/web/packages/teleport/src/Discover/Discover.tsx
+++ b/web/packages/teleport/src/Discover/Discover.tsx
@@ -68,7 +68,7 @@ function DiscoverContent() {
selectedResource={selectedResource}
views={views}
/>
- {content}
+ {content}
{
const { baseElement } = render( );
@@ -28,3 +28,8 @@ test('kube connect dialogue sso', () => {
const { baseElement } = render( );
expect(baseElement).toMatchSnapshot();
});
+
+test('kube connect dialogue local with requestId', () => {
+ const { baseElement } = render( );
+ expect(baseElement).toMatchSnapshot();
+});
diff --git a/web/packages/teleport/src/Kubes/ConnectDialog/ConnectDialog.tsx b/web/packages/teleport/src/Kubes/ConnectDialog/ConnectDialog.tsx
index c50ac867d29ae..5b499391cd2db 100644
--- a/web/packages/teleport/src/Kubes/ConnectDialog/ConnectDialog.tsx
+++ b/web/packages/teleport/src/Kubes/ConnectDialog/ConnectDialog.tsx
@@ -55,7 +55,12 @@ function ConnectDialog(props: Props) {
{' - Login to Teleport'}
diff --git a/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap b/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
index b4a75a71b3e75..f6143f870541f 100644
--- a/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
+++ b/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
@@ -394,6 +394,441 @@ exports[`kube connect dialogue local 1`] = `
+
+
+
+
+
+
+
+ connect to kubernetes cluster
+
+
+
+
+
+ Step 1
+
+ - Login to Teleport
+
+
+
+ $
+
+
+ tsh login --proxy=localhost:443 --auth=local --user=sam some-cluster-name --request-id=8289cdb1-385c-5b02-85f1-fa2a934b749f
+
+
+
+ Copy
+
+
+
+
+
+ Optional
+
+
+ - To write kubectl configuration to a separate file instead of having your global kubectl configuration modified, run the following command:
+
+
+
+ $
+
+
+ export KUBECONFIG=\${HOME?}/teleport-kubeconfig.yaml
+
+
+
+ Copy
+
+
+
+
+
+ Step 2
+
+ - Select the Kubernetes cluster
+
+
+
+ $
+
+
+ tsh kube login tele.logicoma.dev-prod
+
+
+
+ Copy
+
+
+
+
+
+ Step 3
+
+ - Connect to the Kubernetes cluster
+
+
+
+ $
+
+
+ kubectl get pods
+
+
+
+ Copy
+
+
+
+
+
+ Step 4 (Optional)
+
+ - When finished, drop the assumed role
+
+
+
+ $
+
+
+ tsh request drop
+
+
+
+ Copy
+
+
+
+
+
+
+ Close
+
+
+
+
+
+