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; +} + + +
+
+ + +`; 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`] = ` `; +exports[`kube connect dialogue local with requestId 1`] = ` +.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); + min-height: 400px; + max-width: 600px; + width: 100%; +} + +.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; +} + +.c7 { + box-sizing: border-box; + margin-bottom: 24px; +} + +.c11 { + box-sizing: border-box; + margin-right: 4px; +} + +.c13 { + box-sizing: border-box; + margin-bottom: 4px; +} + +.c14 { + box-sizing: border-box; + margin-bottom: 4px; + margin-top: 16px; +} + +.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; +} + +.c4 { + box-sizing: border-box; + margin-bottom: 16px; + min-height: 32px; + display: flex; + align-items: center; +} + +.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); +} + +.c6 { + box-sizing: border-box; + margin-bottom: 32px; + flex: 1; + display: flex; + flex-direction: column; +} + +.c15 { + box-sizing: border-box; +} + + +
+
+ + +`; + exports[`kube connect dialogue sso 1`] = ` .c1 { z-index: -1;