diff --git a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/__snapshots__/ResourceList.story.test.tsx.snap b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/__snapshots__/ResourceList.story.test.tsx.snap
index 1a1ba1b322f9..7b98223ad77e 100644
--- a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/__snapshots__/ResourceList.story.test.tsx.snap
+++ b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/__snapshots__/ResourceList.story.test.tsx.snap
@@ -1750,11 +1750,12 @@ exports[`render Roles 1`] = `
-
@@ -1765,7 +1766,7 @@ exports[`render Roles 1`] = `
class="c7"
/>
-
+
{
const { container } = render(
);
- await screen.findByText(/Audit Log/);
- expect(container.firstChild).toMatchSnapshot();
+ await screen.findAllByText(/Showing/);
+ expect(container).toMatchSnapshot();
});
test('list of all events', async () => {
diff --git a/web/packages/teleport/src/Audit/Audit.story.tsx b/web/packages/teleport/src/Audit/Audit.story.tsx
index 42b40b1d1c4b..9cc666a02cf6 100644
--- a/web/packages/teleport/src/Audit/Audit.story.tsx
+++ b/web/packages/teleport/src/Audit/Audit.story.tsx
@@ -32,6 +32,7 @@ export default {
export const LoadedSample = () => {
const ctx = new Context();
+ ctx.clusterService.fetchClusters = () => Promise.resolve([]);
ctx.auditService.fetchEvents = () =>
Promise.resolve({ events: eventsSample, startKey: '' });
@@ -40,6 +41,7 @@ export const LoadedSample = () => {
export const LoadedFetchMore = () => {
const ctx = new Context();
+ ctx.clusterService.fetchClusters = () => Promise.resolve([]);
ctx.auditService.fetchEvents = () =>
Promise.resolve({ events, startKey: 'any-text' });
@@ -48,12 +50,14 @@ export const LoadedFetchMore = () => {
export const Processing = () => {
const ctx = new Context();
+ ctx.clusterService.fetchClusters = () => Promise.resolve([]);
ctx.auditService.fetchEvents = () => new Promise(() => null);
return render(ctx);
};
export const Failed = () => {
const ctx = new Context();
+ ctx.clusterService.fetchClusters = () => Promise.resolve([]);
ctx.auditService.fetchEvents = () =>
Promise.reject(new Error('server error'));
return render(ctx);
diff --git a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
index e74cd3c6c96c..00469aa3aed8 100644
--- a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
+++ b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
@@ -1,6 +1,10 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`list of all events 1`] = `
+.c12 {
+ box-sizing: border-box;
+}
+
.c6 {
box-sizing: border-box;
margin-bottom: 4px;
@@ -12,10 +16,6 @@ exports[`list of all events 1`] = `
margin-right: 8px;
}
-.c12 {
- box-sizing: border-box;
-}
-
.c20 {
line-height: 1.5;
margin: 0;
@@ -364,11 +364,12 @@ exports[`list of all events 1`] = `
-
@@ -379,7 +380,7 @@ exports[`list of all events 1`] = `
class="c5"
/>
-
+
thead > tr > th,
-.c16 > tbody > tr > th,
-.c16 > tfoot > tr > th,
-.c16 > thead > tr > td,
-.c16 > tbody > tr > td,
-.c16 > tfoot > tr > td {
+.c25 > thead > tr > th,
+.c25 > tbody > tr > th,
+.c25 > tfoot > tr > th,
+.c25 > thead > tr > td,
+.c25 > tbody > tr > td,
+.c25 > tfoot > tr > td {
padding: 8px 8px;
vertical-align: middle;
}
-.c16 > thead > tr > th:first-child,
-.c16 > tbody > tr > th:first-child,
-.c16 > tfoot > tr > th:first-child,
-.c16 > thead > tr > td:first-child,
-.c16 > tbody > tr > td:first-child,
-.c16 > tfoot > tr > td:first-child {
+.c25 > thead > tr > th:first-child,
+.c25 > tbody > tr > th:first-child,
+.c25 > tfoot > tr > th:first-child,
+.c25 > thead > tr > td:first-child,
+.c25 > tbody > tr > td:first-child,
+.c25 > tfoot > tr > td:first-child {
padding-left: 24px;
}
-.c16 > thead > tr > th:last-child,
-.c16 > tbody > tr > th:last-child,
-.c16 > tfoot > tr > th:last-child,
-.c16 > thead > tr > td:last-child,
-.c16 > tbody > tr > td:last-child,
-.c16 > tfoot > tr > td:last-child {
+.c25 > thead > tr > th:last-child,
+.c25 > tbody > tr > th:last-child,
+.c25 > tfoot > tr > th:last-child,
+.c25 > thead > tr > td:last-child,
+.c25 > tbody > tr > td:last-child,
+.c25 > tfoot > tr > td:last-child {
padding-right: 24px;
}
-.c16 > tbody > tr > td {
+.c25 > tbody > tr > td {
vertical-align: middle;
}
-.c16 > thead > tr > th {
+.c25 > thead > tr > th {
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
@@ -13892,11 +13996,11 @@ exports[`loaded audit log screen 1`] = `
white-space: nowrap;
}
-.c16 > thead > tr > th svg {
+.c25 > thead > tr > th svg {
height: 12px;
}
-.c16 > tbody > tr > td {
+.c25 > tbody > tr > td {
color: #FFFFFF;
font-weight: 300;
font-size: 14px;
@@ -13904,18 +14008,18 @@ exports[`loaded audit log screen 1`] = `
letter-spacing: 0.035px;
}
-.c16 tbody tr {
+.c25 tbody tr {
transition: all 150ms;
position: relative;
border-top: 2px solid rgba(255,255,255,0.07);
}
-.c16 tbody tr:hover {
+.c25 tbody tr:hover {
border-top: 2px solid rgba(0,0,0,0);
background-color: #222C59;
}
-.c16 tbody tr:hover:after {
+.c25 tbody tr:hover:after {
box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
content: '';
position: absolute;
@@ -13926,7 +14030,7 @@ exports[`loaded audit log screen 1`] = `
height: 100%;
}
-.c16 tbody tr:hover + tr {
+.c25 tbody tr:hover + tr {
border-top: 2px solid rgba(0,0,0,0);
}
@@ -13940,6 +14044,14 @@ exports[`loaded audit log screen 1`] = `
margin-top: 4px;
}
+.c22 svg {
+ font-size: 20px;
+}
+
+.c22 svg:before {
+ padding-left: 1px;
+}
+
.c15 {
position: relative;
height: 100%;
@@ -13992,7 +14104,7 @@ exports[`loaded audit log screen 1`] = `
padding-left: 24px;
}
-.c18 {
+.c26 {
display: flex;
align-items: center;
min-width: 130px;
@@ -14002,113 +14114,138 @@ exports[`loaded audit log screen 1`] = `
white-space: nowrap;
}
-
+
-
+
+
`;
diff --git a/web/packages/teleport/src/Clusters/Clusters.story.test.tsx b/web/packages/teleport/src/Clusters/Clusters.story.test.tsx
index fa5300ad86e8..9ea9964075df 100644
--- a/web/packages/teleport/src/Clusters/Clusters.story.test.tsx
+++ b/web/packages/teleport/src/Clusters/Clusters.story.test.tsx
@@ -18,13 +18,13 @@
import React from 'react';
-import { render, waitFor } from 'design/utils/testing';
+import { render, screen } from 'design/utils/testing';
import { Story, createContext } from './Clusters.story';
test('render clusters', async () => {
const ctx = createContext();
const { container } = render();
- await waitFor(() => document.querySelector('table'));
- expect(container.firstChild).toMatchSnapshot();
+ await screen.findByText(/ROOT/);
+ expect(container).toMatchSnapshot();
});
diff --git a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
index 7f6c6f23c769..6be2c7731bf6 100644
--- a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
+++ b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
@@ -13,6 +13,21 @@ exports[`render clusters 1`] = `
}
.c18 {
+ box-sizing: border-box;
+}
+
+.c14 {
+ box-sizing: border-box;
+ margin-bottom: 4px;
+ width: 100%;
+}
+
+.c16 {
+ box-sizing: border-box;
+ margin-right: 8px;
+}
+
+.c26 {
line-height: 1.5;
margin: 0;
display: inline-flex;
@@ -40,28 +55,99 @@ exports[`render clusters 1`] = `
height: 24px;
}
-.c18:hover,
-.c18:focus {
+.c26:hover,
+.c26:focus {
background: rgba(255,255,255,0.07);
}
-.c18:active {
+.c26:active {
background: rgba(255,255,255,0.13);
}
-.c18:disabled {
+.c26:disabled {
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.3);
cursor: auto;
}
-.c16 {
+.c19 {
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ outline: none;
+ border-radius: 50%;
+ overflow: visible;
+ justify-content: center;
+ text-align: center;
+ flex: 0 0 auto;
+ background: transparent;
+ color: inherit;
+ transition: all 0.3s;
+ -webkit-font-smoothing: antialiased;
+ font-size: 16px;
+ height: 32px;
+ width: 32px;
+ margin-left: 0px;
+ margin-right: 0px;
+}
+
+.c19:disabled {
+ color: rgba(255,255,255,0.36);
+ cursor: default;
+}
+
+.c19:not(:disabled):hover,
+.c19:not(:disabled):focus {
+ background: rgba(255,255,255,0.13);
+}
+
+.c19:not(:disabled):active {
+ background: rgba(255,255,255,0.18);
+}
+
+.c22 {
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ outline: none;
+ border-radius: 50%;
+ overflow: visible;
+ justify-content: center;
+ text-align: center;
+ flex: 0 0 auto;
+ background: transparent;
+ color: inherit;
+ transition: all 0.3s;
+ -webkit-font-smoothing: antialiased;
+ font-size: 16px;
+ height: 32px;
+ width: 32px;
+ margin-left: 0px;
+}
+
+.c22:disabled {
+ color: rgba(255,255,255,0.36);
+ cursor: default;
+}
+
+.c22:not(:disabled):hover,
+.c22:not(:disabled):focus {
+ background: rgba(255,255,255,0.13);
+}
+
+.c22:not(:disabled):active {
+ background: rgba(255,255,255,0.18);
+}
+
+.c21 {
display: inline-flex;
align-items: center;
justify-content: center;
}
-.c19 {
+.c27 {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -80,6 +166,17 @@ exports[`render clusters 1`] = `
}
.c17 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ margin: 0px;
+ margin-right: 4px;
+ font-weight: 500;
+}
+
+.c25 {
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
@@ -92,7 +189,7 @@ exports[`render clusters 1`] = `
color: #000000;
}
-.c20 {
+.c28 {
box-sizing: border-box;
border-radius: 10px;
display: inline-block;
@@ -115,6 +212,12 @@ exports[`render clusters 1`] = `
align-items: center;
}
+.c15 {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
.c5 {
flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
@@ -140,7 +243,7 @@ exports[`render clusters 1`] = `
padding-bottom: 24px;
}
-.c14 {
+.c23 {
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
@@ -148,39 +251,39 @@ exports[`render clusters 1`] = `
width: 100%;
}
-.c14 > thead > tr > th,
-.c14 > tbody > tr > th,
-.c14 > tfoot > tr > th,
-.c14 > thead > tr > td,
-.c14 > tbody > tr > td,
-.c14 > tfoot > tr > td {
+.c23 > thead > tr > th,
+.c23 > tbody > tr > th,
+.c23 > tfoot > tr > th,
+.c23 > thead > tr > td,
+.c23 > tbody > tr > td,
+.c23 > tfoot > tr > td {
padding: 8px 8px;
vertical-align: middle;
}
-.c14 > thead > tr > th:first-child,
-.c14 > tbody > tr > th:first-child,
-.c14 > tfoot > tr > th:first-child,
-.c14 > thead > tr > td:first-child,
-.c14 > tbody > tr > td:first-child,
-.c14 > tfoot > tr > td:first-child {
+.c23 > thead > tr > th:first-child,
+.c23 > tbody > tr > th:first-child,
+.c23 > tfoot > tr > th:first-child,
+.c23 > thead > tr > td:first-child,
+.c23 > tbody > tr > td:first-child,
+.c23 > tfoot > tr > td:first-child {
padding-left: 24px;
}
-.c14 > thead > tr > th:last-child,
-.c14 > tbody > tr > th:last-child,
-.c14 > tfoot > tr > th:last-child,
-.c14 > thead > tr > td:last-child,
-.c14 > tbody > tr > td:last-child,
-.c14 > tfoot > tr > td:last-child {
+.c23 > thead > tr > th:last-child,
+.c23 > tbody > tr > th:last-child,
+.c23 > tfoot > tr > th:last-child,
+.c23 > thead > tr > td:last-child,
+.c23 > tbody > tr > td:last-child,
+.c23 > tfoot > tr > td:last-child {
padding-right: 24px;
}
-.c14 > tbody > tr > td {
+.c23 > tbody > tr > td {
vertical-align: middle;
}
-.c14 > thead > tr > th {
+.c23 > thead > tr > th {
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
@@ -192,11 +295,11 @@ exports[`render clusters 1`] = `
white-space: nowrap;
}
-.c14 > thead > tr > th svg {
+.c23 > thead > tr > th svg {
height: 12px;
}
-.c14 > tbody > tr > td {
+.c23 > tbody > tr > td {
color: #FFFFFF;
font-weight: 300;
font-size: 14px;
@@ -204,18 +307,18 @@ exports[`render clusters 1`] = `
letter-spacing: 0.035px;
}
-.c14 tbody tr {
+.c23 tbody tr {
transition: all 150ms;
position: relative;
border-top: 2px solid rgba(255,255,255,0.07);
}
-.c14 tbody tr:hover {
+.c23 tbody tr:hover {
border-top: 2px solid rgba(0,0,0,0);
background-color: #222C59;
}
-.c14 tbody tr:hover:after {
+.c23 tbody tr:hover:after {
box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
content: '';
position: absolute;
@@ -226,7 +329,7 @@ exports[`render clusters 1`] = `
height: 100%;
}
-.c14 tbody tr:hover + tr {
+.c23 tbody tr:hover + tr {
border-top: 2px solid rgba(0,0,0,0);
}
@@ -240,6 +343,14 @@ exports[`render clusters 1`] = `
margin-top: 4px;
}
+.c20 svg {
+ font-size: 20px;
+}
+
+.c20 svg:before {
+ padding-left: 1px;
+}
+
.c13 {
position: relative;
height: 100%;
@@ -292,1679 +403,1841 @@ exports[`render clusters 1`] = `
padding-left: 24px;
}
-.c15 td {
+.c24 td {
height: 22px;
}
-
+
- Manage Clusters
+
+ Manage Clusters
+
-
-
-
-
-
-
-
- |
-
-
- Name
-
-
-
-
- |
- |
-
-
-
-
-
+
- ROOT
+ font-weight="500"
+ style="white-space: nowrap; letter-spacing: 0.15px;"
+ >
+ Showing
+
+ 1
+
+ -
+
+ 37
+
+ of
+
+
+ 37
+
- |
-
- localhost
- |
-
+ |
-
-
-
-
- LEAF
-
- |
-
- nidvojik
- |
-
- |
-
-
-
+
+
+
+
+
+ |
+
+
+ Name
+
+
+
+
+ |
+ |
+
+
+
+
+
+
+ ROOT
+
+ |
+
+ localhost
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ albertowens200
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ barrynelson110
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ beatricecarson171
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ besscarroll152
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ bessiecohen207
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ connorsharp137
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ dashawic
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ dashawic
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ dashawic
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ farovluv
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ francismoran134
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ hannahsutton232
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ hattiestanley34
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ henriettarios78
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ isabellekim81
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ jaysandoval137
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ jesushenry58
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ jordansimpson35
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ josephinewolfe55
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ leonamann249
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ lidtabih
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ nellwheeler72
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ nidvojik
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ philipjohnson10
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ ricardosingleton242
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ rozpaari
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ rozpaari
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ rozpaari
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ samlewis176
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ teresastone14
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ theodorefrazier78
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ tommybrooks146
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ wetjolune
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ wetjolune
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ wetjolune
+ |
+
+
+ |
+
+
+
+
+ LEAF
+
+ |
+
+ williepayne223
+ |
+
+
+ |
+
+
+
+
+
+
- LEAF
+ class="c17"
+ font-weight="500"
+ style="white-space: nowrap; letter-spacing: 0.15px;"
+ >
+ Showing
+
+ 1
+
+ -
+
+ 37
+
+ of
+
+
+ 37
+
- |
-
- lidtabih
- |
-
+ |
-
-
-
-
- LEAF
-
- |
-
- farovluv
- |
-
- |
-
-
-
-
- LEAF
-
- |
-
- rozpaari
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- wetjolune
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- dashawic
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- jesushenry58
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- jordansimpson35
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- leonamann249
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- bessiecohen207
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- philipjohnson10
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- teresastone14
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- connorsharp137
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- ricardosingleton242
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- rozpaari
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- wetjolune
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- dashawic
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- williepayne223
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- samlewis176
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- nellwheeler72
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- albertowens200
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- beatricecarson171
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- besscarroll152
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- hannahsutton232
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- barrynelson110
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- rozpaari
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- wetjolune
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- dashawic
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- henriettarios78
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- josephinewolfe55
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- jaysandoval137
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- isabellekim81
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- francismoran134
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- theodorefrazier78
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- hattiestanley34
- |
-
-
- |
-
-
-
-
- LEAF
-
- |
-
- tommybrooks146
- |
-
-
- |
-
-
-
-
+
+
+
+
`;
diff --git a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
index 779b63afea88..a8e0dc0c6488 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
@@ -279,6 +279,7 @@ exports[`render DocumentNodes 1`] = `
display: flex;
align-items: center;
justify-content: space-between;
+ gap: 16px;
}
.c20 {
@@ -542,13 +543,14 @@ exports[`render DocumentNodes 1`] = `
position: relative;
display: flex;
overflow: hidden;
+ width: 100%;
border-radius: 200px;
height: 100%;
background: transparent;
- max-width: 725px;
}
.c14 {
+ background: #0C143D;
border-radius: 200px;
width: 100%;
height: 48px;
@@ -566,7 +568,7 @@ exports[`render DocumentNodes 1`] = `
color: #FFFFFF;
background: rgba(255,255,255,0.07);
padding-right: 184px;
- padding-left: 24px;
+ padding-left: 32px;
}
.c4 {
@@ -630,79 +632,83 @@ exports[`render DocumentNodes 1`] = `
-
@@ -726,7 +732,7 @@ exports[`render DocumentNodes 1`] = `
-
+
.
- */
-
-import React from 'react';
-import { render } from 'design/utils/testing';
-
-import { Loaded, Failed, Empty, EmptyReadOnly } from './Nodes.story';
-
-test('loaded', () => {
- const { container } = render();
- expect(container.firstChild).toMatchSnapshot();
-});
-
-test('failed', () => {
- const { container } = render();
- expect(container.firstChild).toMatchSnapshot();
-});
-
-test('empty state', () => {
- const { container } = render();
- expect(container).toMatchSnapshot();
-});
-
-test('readonly empty state', () => {
- const { container } = render();
- expect(container).toMatchSnapshot();
-});
diff --git a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
deleted file mode 100644
index b6a8c5e507e8..000000000000
--- a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
+++ /dev/null
@@ -1,2884 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`empty state 1`] = `
-.c0 {
- box-sizing: border-box;
- padding-left: 40px;
- padding-right: 40px;
-}
-
-.c3 {
- box-sizing: border-box;
- margin-bottom: 24px;
-}
-
-.c8 {
- box-sizing: border-box;
- margin-left: auto;
- margin-right: auto;
- padding: 56px;
- padding-top: 32px;
- width: 100%;
-}
-
-.c10 {
- box-sizing: border-box;
- max-width: 600px;
-}
-
-.c11 {
- box-sizing: border-box;
- margin-bottom: 24px;
- text-align: center;
-}
-
-.c15 {
- box-sizing: border-box;
- text-align: center;
-}
-
-.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;
- color: #000000;
- background: #9F85FF;
- min-height: 32px;
- font-size: 12px;
- padding: 0px 24px;
- width: 224px;
- text-transform: none;
-}
-
-.c16:hover,
-.c16:focus {
- background: #B29DFF;
-}
-
-.c16:active {
- background: #C5B6FF;
-}
-
-.c16:disabled {
- background: rgba(255,255,255,0.12);
- color: rgba(255,255,255,0.3);
- cursor: auto;
-}
-
-.c17 {
- 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;
- color: #FFFFFF;
- background: rgba(255,255,255,0);
- border: 1px solid rgba(255,255,255,0.36);
- min-height: 32px;
- font-size: 12px;
- padding: 0px 24px;
- margin-left: 24px;
- width: 224px;
- text-transform: none;
-}
-
-.c17:hover,
-.c17:focus {
- background: rgba(255,255,255,0.07);
-}
-
-.c17:active {
- background: rgba(255,255,255,0.13);
-}
-
-.c17:disabled {
- background: rgba(255,255,255,0.12);
- color: rgba(255,255,255,0.3);
- cursor: auto;
-}
-
-.c6 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 300;
- font-size: 22px;
- line-height: 32px;
- margin: 0px;
-}
-
-.c13 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 400;
- font-size: 16px;
- line-height: 24px;
- font-size: 24px;
- margin: 0px;
- margin-bottom: 8px;
- font-weight: 700;
-}
-
-.c14 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-size: 14px;
- margin: 0px;
- font-weight: 400;
-}
-
-.c12 {
- display: block;
- outline: none;
- margin-bottom: 24px;
- margin-left: auto;
- margin-right: auto;
- height: 160px;
-}
-
-.c1 {
- display: flex;
-}
-
-.c4 {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.c9 {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.c5 {
- flex-shrink: 0;
- border-bottom: 1px solid rgba(255,255,255,0.07);
- height: 56px;
- margin-left: -40px;
- margin-right: -40px;
- padding-left: 40px;
- padding-right: 40px;
-}
-
-.c7 {
- white-space: nowrap;
-}
-
-.c2 {
- width: 100%;
- height: 100%;
- flex-direction: column;
-}
-
-.c2::after {
- content: ' ';
- padding-bottom: 24px;
-}
-
-
-
-
-
-
-
-
-
- Add your first server to Teleport
-
-
- Teleport Server Access consolidates SSH access across all environments.
-
-
-
-
-
-
-
-`;
-
-exports[`failed 1`] = `
-.c8 {
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 2px;
- box-sizing: border-box;
- box-shadow: 0 1px 4px rgba(0,0,0,0.24);
- margin: 0 0 24px 0;
- min-height: 40px;
- padding: 8px 16px;
- overflow: auto;
- word-break: break-word;
- line-height: 1.5;
- background: #FF6257;
- color: #000000;
-}
-
-.c8 a {
- color: #FFFFFF;
-}
-
-.c0 {
- box-sizing: border-box;
- padding-left: 40px;
- padding-right: 40px;
-}
-
-.c3 {
- box-sizing: border-box;
- margin-bottom: 24px;
-}
-
-.c10 {
- box-sizing: border-box;
- width: 100%;
-}
-
-.c16 {
- box-sizing: border-box;
- padding-left: 24px;
- padding-right: 24px;
-}
-
-.c26 {
- box-sizing: border-box;
- margin-bottom: 4px;
- margin-right: 8px;
- margin-top: 8px;
-}
-
-.c30 {
- box-sizing: border-box;
-}
-
-.c40 {
- box-sizing: border-box;
- margin-top: 8px;
-}
-
-.c38 {
- 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;
- color: #FFFFFF;
- background: rgba(255,255,255,0);
- border: 1px solid rgba(255,255,255,0.36);
- font-size: 10px;
- min-height: 24px;
- padding: 0px 16px;
- height: 24px;
-}
-
-.c38:hover,
-.c38:focus {
- background: rgba(255,255,255,0.07);
-}
-
-.c38:active {
- background: rgba(255,255,255,0.13);
-}
-
-.c38:disabled {
- background: rgba(255,255,255,0.12);
- color: rgba(255,255,255,0.3);
- cursor: auto;
-}
-
-.c31 {
- align-items: center;
- border: none;
- cursor: pointer;
- display: flex;
- outline: none;
- border-radius: 50%;
- overflow: visible;
- justify-content: center;
- text-align: center;
- flex: 0 0 auto;
- background: transparent;
- color: inherit;
- transition: all 0.3s;
- -webkit-font-smoothing: antialiased;
- font-size: 16px;
- height: 32px;
- width: 32px;
- margin-left: 0px;
- margin-right: 0px;
-}
-
-.c31:disabled {
- color: rgba(255,255,255,0.36);
- cursor: default;
-}
-
-.c31:not(:disabled):hover,
-.c31:not(:disabled):focus {
- background: rgba(255,255,255,0.13);
-}
-
-.c31:not(:disabled):active {
- background: rgba(255,255,255,0.18);
-}
-
-.c33 {
- align-items: center;
- border: none;
- cursor: pointer;
- display: flex;
- outline: none;
- border-radius: 50%;
- overflow: visible;
- justify-content: center;
- text-align: center;
- flex: 0 0 auto;
- background: transparent;
- color: inherit;
- transition: all 0.3s;
- -webkit-font-smoothing: antialiased;
- font-size: 16px;
- height: 32px;
- width: 32px;
- margin-left: 0px;
-}
-
-.c33:disabled {
- color: rgba(255,255,255,0.36);
- cursor: default;
-}
-
-.c33:not(:disabled):hover,
-.c33:not(:disabled):focus {
- background: rgba(255,255,255,0.13);
-}
-
-.c33:not(:disabled):active {
- background: rgba(255,255,255,0.18);
-}
-
-.c24 {
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-
-.c39 {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- color: rgba(255,255,255,0.72);
- margin-left: 4px;
- margin-right: -8px;
-}
-
-.c6 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 300;
- font-size: 22px;
- line-height: 32px;
- margin: 0px;
-}
-
-.c22 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 400;
- font-size: 12px;
- line-height: 16px;
- margin: 0px;
-}
-
-.c28 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 400;
- font-size: 12px;
- line-height: 16px;
- margin: 0px;
- margin-right: 4px;
- font-weight: 500;
-}
-
-.c36 {
- box-sizing: border-box;
- border-radius: 10px;
- display: inline-block;
- font-size: 10px;
- font-weight: 500;
- padding: 0 8px;
- margin: 1px 0;
- vertical-align: middle;
- background-color: rgba(255,255,255,0.07);
- color: #FFFFFF;
- font-weight: 400;
- margin-right: 4px;
-}
-
-.c1 {
- display: flex;
-}
-
-.c4 {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.c17 {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.c27 {
- display: flex;
- justify-content: flex-end;
-}
-
-.c35 {
- display: flex;
- flex-wrap: wrap;
-}
-
-.c18 {
- position: relative;
- display: flex;
- align-items: center;
- cursor: pointer;
-}
-
-.c18[disabled] {
- cursor: default;
-}
-
-.c21 {
- width: 32px;
- height: 16px;
- border-radius: 10px;
- cursor: inherit;
- flex-shrink: 0;
- background: rgba(255,255,255,0.07);
- transition: background 0.15s ease-in-out;
-}
-
-.c21:hover {
- background: rgba(255,255,255,0.13);
-}
-
-.c21:active {
- background: rgba(255,255,255,0.18);
-}
-
-.c21:before {
- content: '';
- position: absolute;
- top: 50%;
- width: 12px;
- height: 12px;
- transform: translate(2px,-50%);
- border-radius: 14px;
- background: #FFFFFF;
- box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
- transition: transform 0.05s ease-in;
-}
-
-.c19 {
- opacity: 0;
- position: absolute;
- cursor: inherit;
- z-index: -1;
-}
-
-.c19:checked + .c20:before {
- transform: translate(18px,-50%);
-}
-
-.c19:enabled:checked + .c20 {
- background: #00BFA6;
-}
-
-.c19:enabled:checked + .c20:hover {
- background: #33CCB8;
-}
-
-.c19:enabled:checked + .c20:active {
- background: #66D9CA;
-}
-
-.c19:disabled + .c20 {
- background: rgba(255,255,255,0.07);
-}
-
-.c19:disabled + .c20:before {
- opacity: 0.36;
- box-shadow: none;
-}
-
-.c19:disabled:checked + .c20 {
- background: rgba(0,191,166,0.25);
-}
-
-.c5 {
- flex-shrink: 0;
- border-bottom: 1px solid rgba(255,255,255,0.07);
- height: 56px;
- margin-left: -40px;
- margin-right: -40px;
- padding-left: 40px;
- padding-right: 40px;
-}
-
-.c7 {
- white-space: nowrap;
-}
-
-.c2 {
- width: 100%;
- height: 100%;
- flex-direction: column;
-}
-
-.c2::after {
- content: ' ';
- padding-bottom: 24px;
-}
-
-.c34 {
- border-collapse: collapse;
- border-spacing: 0;
- border-style: hidden;
- font-size: 12px;
- width: 100%;
-}
-
-.c34 > thead > tr > th,
-.c34 > tbody > tr > th,
-.c34 > tfoot > tr > th,
-.c34 > thead > tr > td,
-.c34 > tbody > tr > td,
-.c34 > tfoot > tr > td {
- padding: 8px 8px;
- vertical-align: middle;
-}
-
-.c34 > thead > tr > th:first-child,
-.c34 > tbody > tr > th:first-child,
-.c34 > tfoot > tr > th:first-child,
-.c34 > thead > tr > td:first-child,
-.c34 > tbody > tr > td:first-child,
-.c34 > tfoot > tr > td:first-child {
- padding-left: 24px;
-}
-
-.c34 > thead > tr > th:last-child,
-.c34 > tbody > tr > th:last-child,
-.c34 > tfoot > tr > th:last-child,
-.c34 > thead > tr > td:last-child,
-.c34 > tbody > tr > td:last-child,
-.c34 > tfoot > tr > td:last-child {
- padding-right: 24px;
-}
-
-.c34 > tbody > tr > td {
- vertical-align: middle;
-}
-
-.c34 > thead > tr > th {
- color: #FFFFFF;
- font-weight: 600;
- font-size: 14px;
- line-height: 24px;
- cursor: pointer;
- padding-bottom: 0;
- padding-top: 0;
- text-align: left;
- white-space: nowrap;
-}
-
-.c34 > thead > tr > th svg {
- height: 12px;
-}
-
-.c34 > tbody > tr > td {
- color: #FFFFFF;
- font-weight: 300;
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.035px;
-}
-
-.c34 tbody tr {
- transition: all 150ms;
- position: relative;
- border-top: 2px solid rgba(255,255,255,0.07);
-}
-
-.c34 tbody tr:hover {
- border-top: 2px solid rgba(0,0,0,0);
- background-color: #222C59;
-}
-
-.c34 tbody tr:hover:after {
- box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- width: 100%;
- height: 100%;
-}
-
-.c34 tbody tr:hover + tr {
- border-top: 2px solid rgba(0,0,0,0);
-}
-
-.c9 {
- display: flex;
- flex-shrink: 0;
- align-items: center;
- justify-content: space-between;
- padding: 0 0 16px 0;
- max-height: 40px;
- margin-top: 4px;
-}
-
-.c37 {
- cursor: pointer;
-}
-
-.c37:hover {
- background-color: rgba(255,255,255,0.13);
-}
-
-.c32 svg {
- font-size: 20px;
-}
-
-.c32 svg:before {
- padding-left: 1px;
-}
-
-.c29 {
- flex-shrink: 1;
- flex-grow: 0;
- flex-basis: 0;
-}
-
-.c15 {
- position: relative;
- height: 100%;
- right: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 0 200px 200px 0;
-}
-
-.c14 {
- position: absolute;
- height: 100%;
- right: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- border-left: 1px solid rgba(255,255,255,0.07);
- border-radius: 0 200px 200px 0;
-}
-
-.c12 {
- position: relative;
- display: flex;
- overflow: hidden;
- border-radius: 200px;
- height: 100%;
- background: transparent;
- max-width: 725px;
-}
-
-.c11 {
- border-radius: 200px;
- width: 100%;
- height: 48px;
-}
-
-.c13 {
- border: none;
- outline: none;
- box-sizing: border-box;
- font-size: 16px;
- width: 100%;
- transition: all 0.2s;
- padding-left: 16px;
- padding-right: 16px;
- color: #FFFFFF;
- background: rgba(255,255,255,0.07);
- padding-right: 184px;
- padding-left: 24px;
-}
-
-.c25 {
- height: 18px;
- width: 18px;
- color: inherit;
-}
-
-.c23 {
- vertical-align: middle;
- display: inline-block;
- height: 18px;
-}
-
-.c23:hover {
- cursor: pointer;
-}
-
-
-
-
-
- some error message
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Hostname
-
-
-
-
- |
-
- Address
- |
-
- Labels
- |
- |
-
-
-
-
-
- fujedu
- |
-
- 172.10.1.20:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- facuzguv
- |
-
- 172.10.1.1:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- duzsevkig
- |
-
- 172.10.1.1:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- kuhinur
- |
-
- 172.10.1.1:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- zebpecda
- |
-
- 172.10.1.1:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- zebpecda
- |
-
-
- ← tunnel
-
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- zebpecda
- |
-
-
- ← tunnel
-
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`loaded 1`] = `
-.c0 {
- box-sizing: border-box;
- padding-left: 40px;
- padding-right: 40px;
-}
-
-.c3 {
- box-sizing: border-box;
- margin-bottom: 24px;
-}
-
-.c10 {
- box-sizing: border-box;
- width: 100%;
-}
-
-.c16 {
- box-sizing: border-box;
- padding-left: 24px;
- padding-right: 24px;
-}
-
-.c26 {
- box-sizing: border-box;
- margin-bottom: 4px;
- margin-right: 8px;
- margin-top: 8px;
-}
-
-.c30 {
- box-sizing: border-box;
-}
-
-.c40 {
- box-sizing: border-box;
- margin-top: 8px;
-}
-
-.c8 {
- 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;
- color: #000000;
- background: #9F85FF;
- min-height: 32px;
- font-size: 12px;
- padding: 0px 24px;
- width: 240px;
- text-transform: none;
-}
-
-.c8:hover,
-.c8:focus {
- background: #B29DFF;
-}
-
-.c8:active {
- background: #C5B6FF;
-}
-
-.c8:disabled {
- background: rgba(255,255,255,0.12);
- color: rgba(255,255,255,0.3);
- cursor: auto;
-}
-
-.c38 {
- 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;
- color: #FFFFFF;
- background: rgba(255,255,255,0);
- border: 1px solid rgba(255,255,255,0.36);
- font-size: 10px;
- min-height: 24px;
- padding: 0px 16px;
- height: 24px;
-}
-
-.c38:hover,
-.c38:focus {
- background: rgba(255,255,255,0.07);
-}
-
-.c38:active {
- background: rgba(255,255,255,0.13);
-}
-
-.c38:disabled {
- background: rgba(255,255,255,0.12);
- color: rgba(255,255,255,0.3);
- cursor: auto;
-}
-
-.c31 {
- align-items: center;
- border: none;
- cursor: pointer;
- display: flex;
- outline: none;
- border-radius: 50%;
- overflow: visible;
- justify-content: center;
- text-align: center;
- flex: 0 0 auto;
- background: transparent;
- color: inherit;
- transition: all 0.3s;
- -webkit-font-smoothing: antialiased;
- font-size: 16px;
- height: 32px;
- width: 32px;
- margin-left: 0px;
- margin-right: 0px;
-}
-
-.c31:disabled {
- color: rgba(255,255,255,0.36);
- cursor: default;
-}
-
-.c31:not(:disabled):hover,
-.c31:not(:disabled):focus {
- background: rgba(255,255,255,0.13);
-}
-
-.c31:not(:disabled):active {
- background: rgba(255,255,255,0.18);
-}
-
-.c33 {
- align-items: center;
- border: none;
- cursor: pointer;
- display: flex;
- outline: none;
- border-radius: 50%;
- overflow: visible;
- justify-content: center;
- text-align: center;
- flex: 0 0 auto;
- background: transparent;
- color: inherit;
- transition: all 0.3s;
- -webkit-font-smoothing: antialiased;
- font-size: 16px;
- height: 32px;
- width: 32px;
- margin-left: 0px;
-}
-
-.c33:disabled {
- color: rgba(255,255,255,0.36);
- cursor: default;
-}
-
-.c33:not(:disabled):hover,
-.c33:not(:disabled):focus {
- background: rgba(255,255,255,0.13);
-}
-
-.c33:not(:disabled):active {
- background: rgba(255,255,255,0.18);
-}
-
-.c24 {
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-
-.c39 {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- color: rgba(255,255,255,0.72);
- margin-left: 4px;
- margin-right: -8px;
-}
-
-.c6 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 300;
- font-size: 22px;
- line-height: 32px;
- margin: 0px;
-}
-
-.c22 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 400;
- font-size: 12px;
- line-height: 16px;
- margin: 0px;
-}
-
-.c28 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 400;
- font-size: 12px;
- line-height: 16px;
- margin: 0px;
- margin-right: 4px;
- font-weight: 500;
-}
-
-.c36 {
- box-sizing: border-box;
- border-radius: 10px;
- display: inline-block;
- font-size: 10px;
- font-weight: 500;
- padding: 0 8px;
- margin: 1px 0;
- vertical-align: middle;
- background-color: rgba(255,255,255,0.07);
- color: #FFFFFF;
- font-weight: 400;
- margin-right: 4px;
-}
-
-.c1 {
- display: flex;
-}
-
-.c4 {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.c17 {
- display: flex;
- align-items: center;
- gap: 8px;
-}
-
-.c27 {
- display: flex;
- justify-content: flex-end;
-}
-
-.c35 {
- display: flex;
- flex-wrap: wrap;
-}
-
-.c18 {
- position: relative;
- display: flex;
- align-items: center;
- cursor: pointer;
-}
-
-.c18[disabled] {
- cursor: default;
-}
-
-.c21 {
- width: 32px;
- height: 16px;
- border-radius: 10px;
- cursor: inherit;
- flex-shrink: 0;
- background: rgba(255,255,255,0.07);
- transition: background 0.15s ease-in-out;
-}
-
-.c21:hover {
- background: rgba(255,255,255,0.13);
-}
-
-.c21:active {
- background: rgba(255,255,255,0.18);
-}
-
-.c21:before {
- content: '';
- position: absolute;
- top: 50%;
- width: 12px;
- height: 12px;
- transform: translate(2px,-50%);
- border-radius: 14px;
- background: #FFFFFF;
- box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
- transition: transform 0.05s ease-in;
-}
-
-.c19 {
- opacity: 0;
- position: absolute;
- cursor: inherit;
- z-index: -1;
-}
-
-.c19:checked + .c20:before {
- transform: translate(18px,-50%);
-}
-
-.c19:enabled:checked + .c20 {
- background: #00BFA6;
-}
-
-.c19:enabled:checked + .c20:hover {
- background: #33CCB8;
-}
-
-.c19:enabled:checked + .c20:active {
- background: #66D9CA;
-}
-
-.c19:disabled + .c20 {
- background: rgba(255,255,255,0.07);
-}
-
-.c19:disabled + .c20:before {
- opacity: 0.36;
- box-shadow: none;
-}
-
-.c19:disabled:checked + .c20 {
- background: rgba(0,191,166,0.25);
-}
-
-.c5 {
- flex-shrink: 0;
- border-bottom: 1px solid rgba(255,255,255,0.07);
- height: 56px;
- margin-left: -40px;
- margin-right: -40px;
- padding-left: 40px;
- padding-right: 40px;
-}
-
-.c7 {
- white-space: nowrap;
-}
-
-.c2 {
- width: 100%;
- height: 100%;
- flex-direction: column;
-}
-
-.c2::after {
- content: ' ';
- padding-bottom: 24px;
-}
-
-.c34 {
- border-collapse: collapse;
- border-spacing: 0;
- border-style: hidden;
- font-size: 12px;
- width: 100%;
-}
-
-.c34 > thead > tr > th,
-.c34 > tbody > tr > th,
-.c34 > tfoot > tr > th,
-.c34 > thead > tr > td,
-.c34 > tbody > tr > td,
-.c34 > tfoot > tr > td {
- padding: 8px 8px;
- vertical-align: middle;
-}
-
-.c34 > thead > tr > th:first-child,
-.c34 > tbody > tr > th:first-child,
-.c34 > tfoot > tr > th:first-child,
-.c34 > thead > tr > td:first-child,
-.c34 > tbody > tr > td:first-child,
-.c34 > tfoot > tr > td:first-child {
- padding-left: 24px;
-}
-
-.c34 > thead > tr > th:last-child,
-.c34 > tbody > tr > th:last-child,
-.c34 > tfoot > tr > th:last-child,
-.c34 > thead > tr > td:last-child,
-.c34 > tbody > tr > td:last-child,
-.c34 > tfoot > tr > td:last-child {
- padding-right: 24px;
-}
-
-.c34 > tbody > tr > td {
- vertical-align: middle;
-}
-
-.c34 > thead > tr > th {
- color: #FFFFFF;
- font-weight: 600;
- font-size: 14px;
- line-height: 24px;
- cursor: pointer;
- padding-bottom: 0;
- padding-top: 0;
- text-align: left;
- white-space: nowrap;
-}
-
-.c34 > thead > tr > th svg {
- height: 12px;
-}
-
-.c34 > tbody > tr > td {
- color: #FFFFFF;
- font-weight: 300;
- font-size: 14px;
- line-height: 20px;
- letter-spacing: 0.035px;
-}
-
-.c34 tbody tr {
- transition: all 150ms;
- position: relative;
- border-top: 2px solid rgba(255,255,255,0.07);
-}
-
-.c34 tbody tr:hover {
- border-top: 2px solid rgba(0,0,0,0);
- background-color: #222C59;
-}
-
-.c34 tbody tr:hover:after {
- box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- width: 100%;
- height: 100%;
-}
-
-.c34 tbody tr:hover + tr {
- border-top: 2px solid rgba(0,0,0,0);
-}
-
-.c9 {
- display: flex;
- flex-shrink: 0;
- align-items: center;
- justify-content: space-between;
- padding: 0 0 16px 0;
- max-height: 40px;
- margin-top: 4px;
-}
-
-.c37 {
- cursor: pointer;
-}
-
-.c37:hover {
- background-color: rgba(255,255,255,0.13);
-}
-
-.c32 svg {
- font-size: 20px;
-}
-
-.c32 svg:before {
- padding-left: 1px;
-}
-
-.c29 {
- flex-shrink: 1;
- flex-grow: 0;
- flex-basis: 0;
-}
-
-.c15 {
- position: relative;
- height: 100%;
- right: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 0 200px 200px 0;
-}
-
-.c14 {
- position: absolute;
- height: 100%;
- right: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- border-left: 1px solid rgba(255,255,255,0.07);
- border-radius: 0 200px 200px 0;
-}
-
-.c12 {
- position: relative;
- display: flex;
- overflow: hidden;
- border-radius: 200px;
- height: 100%;
- background: transparent;
- max-width: 725px;
-}
-
-.c11 {
- border-radius: 200px;
- width: 100%;
- height: 48px;
-}
-
-.c13 {
- border: none;
- outline: none;
- box-sizing: border-box;
- font-size: 16px;
- width: 100%;
- transition: all 0.2s;
- padding-left: 16px;
- padding-right: 16px;
- color: #FFFFFF;
- background: rgba(255,255,255,0.07);
- padding-right: 184px;
- padding-left: 24px;
-}
-
-.c25 {
- height: 18px;
- width: 18px;
- color: inherit;
-}
-
-.c23 {
- vertical-align: middle;
- display: inline-block;
- height: 18px;
-}
-
-.c23:hover {
- cursor: pointer;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Hostname
-
-
-
-
- |
-
- Address
- |
-
- Labels
- |
- |
-
-
-
-
-
- fujedu
- |
-
- 172.10.1.20:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- facuzguv
- |
-
- 172.10.1.1:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- duzsevkig
- |
-
- 172.10.1.1:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- kuhinur
- |
-
- 172.10.1.1:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- zebpecda
- |
-
- 172.10.1.1:3022
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- zebpecda
- |
-
-
- ← tunnel
-
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
- zebpecda
- |
-
-
- ← tunnel
-
- |
-
-
-
- cluster: one
-
-
- kernel: 4.15.0-51-generic
-
-
- |
-
-
- |
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`readonly empty state 1`] = `
-.c0 {
- box-sizing: border-box;
- padding-left: 40px;
- padding-right: 40px;
-}
-
-.c3 {
- box-sizing: border-box;
- margin-bottom: 24px;
-}
-
-.c8 {
- box-sizing: border-box;
- max-width: 664px;
- margin-left: auto;
- margin-right: auto;
- padding: 56px;
- color: #FFFFFF;
- text-align: center;
- border-radius: 12px;
-}
-
-.c6 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 300;
- font-size: 22px;
- line-height: 32px;
- margin: 0px;
-}
-
-.c9 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 300;
- font-size: 28px;
- line-height: 32px;
- margin: 0px;
- margin-bottom: 16px;
-}
-
-.c10 {
- overflow: hidden;
- text-overflow: ellipsis;
- margin: 0px;
-}
-
-.c11 {
- overflow: hidden;
- text-overflow: ellipsis;
- font-weight: 600;
- margin: 0px;
-}
-
-.c1 {
- display: flex;
-}
-
-.c4 {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.c5 {
- flex-shrink: 0;
- border-bottom: 1px solid rgba(255,255,255,0.07);
- height: 56px;
- margin-left: -40px;
- margin-right: -40px;
- padding-left: 40px;
- padding-right: 40px;
-}
-
-.c7 {
- white-space: nowrap;
-}
-
-.c2 {
- width: 100%;
- height: 100%;
- flex-direction: column;
-}
-
-.c2::after {
- content: ' ';
- padding-bottom: 24px;
-}
-
-
-
-
-
-
- No Servers Found
-
-
- Either there are no
- servers
- in the "
-
- im-a-cluster
-
- " cluster, or your roles don't grant you access.
-
-
-
-
-`;
diff --git a/web/packages/teleport/src/Recordings/Recordings.story.test.tsx b/web/packages/teleport/src/Recordings/Recordings.story.test.tsx
index d9d55cd3732a..2456168d0680 100644
--- a/web/packages/teleport/src/Recordings/Recordings.story.test.tsx
+++ b/web/packages/teleport/src/Recordings/Recordings.story.test.tsx
@@ -18,13 +18,13 @@
import React from 'react';
-import { render, waitFor } from 'design/utils/testing';
+import { render, screen } from 'design/utils/testing';
import { Loaded } from './Recordings.story';
test('rendering of Session Recordings', async () => {
const { container } = render();
- await waitFor(() => document.querySelector('table'));
+ await screen.findAllByText(/Showing/);
expect(container).toMatchSnapshot();
});
diff --git a/web/packages/teleport/src/Recordings/Recordings.story.tsx b/web/packages/teleport/src/Recordings/Recordings.story.tsx
index ecf3a537a009..d8d110ef8441 100644
--- a/web/packages/teleport/src/Recordings/Recordings.story.tsx
+++ b/web/packages/teleport/src/Recordings/Recordings.story.tsx
@@ -32,6 +32,7 @@ export default {
export const Loaded = () => {
const ctx = new Context();
+ ctx.clusterService.fetchClusters = () => Promise.resolve([]);
ctx.recordingsService.fetchRecordings = () =>
Promise.resolve({
recordings: recordings.map(makeRecording),
@@ -43,6 +44,7 @@ export const Loaded = () => {
export const LoadedFetchMore = () => {
const ctx = new Context();
+ ctx.clusterService.fetchClusters = () => Promise.resolve([]);
ctx.recordingsService.fetchRecordings = () =>
Promise.resolve({
recordings: recordings.map(makeRecording),
@@ -54,12 +56,14 @@ export const LoadedFetchMore = () => {
export const Processing = () => {
const ctx = new Context();
+ ctx.clusterService.fetchClusters = () => Promise.resolve([]);
ctx.recordingsService.fetchRecordings = () => new Promise(() => null);
return render(ctx);
};
export const Failed = () => {
const ctx = new Context();
+ ctx.clusterService.fetchClusters = () => Promise.resolve([]);
ctx.recordingsService.fetchRecordings = () =>
Promise.reject(new Error('server error'));
return render(ctx);
diff --git a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
index 247844e7c9e7..c676ca1b6c4d 100644
--- a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
+++ b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
@@ -18,7 +18,22 @@ exports[`rendering of Session Recordings 1`] = `
width: 210px;
}
-.c19 {
+.c20 {
+ box-sizing: border-box;
+}
+
+.c16 {
+ box-sizing: border-box;
+ margin-bottom: 4px;
+ width: 100%;
+}
+
+.c18 {
+ box-sizing: border-box;
+ margin-right: 8px;
+}
+
+.c27 {
line-height: 1.5;
margin: 0;
display: inline-flex;
@@ -45,28 +60,99 @@ exports[`rendering of Session Recordings 1`] = `
width: 80px;
}
-.c19:hover,
-.c19:focus {
+.c27:hover,
+.c27:focus {
background: #B29DFF;
}
-.c19:active {
+.c27:active {
background: #C5B6FF;
}
-.c19:disabled {
+.c27:disabled {
background: rgba(255,255,255,0.12);
color: rgba(255,255,255,0.3);
cursor: auto;
}
-.c17 {
+.c21 {
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ outline: none;
+ border-radius: 50%;
+ overflow: visible;
+ justify-content: center;
+ text-align: center;
+ flex: 0 0 auto;
+ background: transparent;
+ color: inherit;
+ transition: all 0.3s;
+ -webkit-font-smoothing: antialiased;
+ font-size: 16px;
+ height: 32px;
+ width: 32px;
+ margin-left: 0px;
+ margin-right: 0px;
+}
+
+.c21:disabled {
+ color: rgba(255,255,255,0.36);
+ cursor: default;
+}
+
+.c21:not(:disabled):hover,
+.c21:not(:disabled):focus {
+ background: rgba(255,255,255,0.13);
+}
+
+.c21:not(:disabled):active {
+ background: rgba(255,255,255,0.18);
+}
+
+.c24 {
+ align-items: center;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ outline: none;
+ border-radius: 50%;
+ overflow: visible;
+ justify-content: center;
+ text-align: center;
+ flex: 0 0 auto;
+ background: transparent;
+ color: inherit;
+ transition: all 0.3s;
+ -webkit-font-smoothing: antialiased;
+ font-size: 16px;
+ height: 32px;
+ width: 32px;
+ margin-left: 0px;
+}
+
+.c24:disabled {
+ color: rgba(255,255,255,0.36);
+ cursor: default;
+}
+
+.c24:not(:disabled):hover,
+.c24:not(:disabled):focus {
+ background: rgba(255,255,255,0.13);
+}
+
+.c24:not(:disabled):active {
+ background: rgba(255,255,255,0.18);
+}
+
+.c23 {
display: inline-flex;
align-items: center;
justify-content: center;
}
-.c18 {
+.c26 {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -84,6 +170,17 @@ exports[`rendering of Session Recordings 1`] = `
margin-right: 56px;
}
+.c19 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ margin: 0px;
+ margin-right: 4px;
+ font-weight: 500;
+}
+
.c1 {
display: flex;
}
@@ -93,6 +190,12 @@ exports[`rendering of Session Recordings 1`] = `
align-items: center;
}
+.c17 {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
.c9 .react-select-container {
box-sizing: border-box;
display: block;
@@ -278,7 +381,7 @@ exports[`rendering of Session Recordings 1`] = `
padding-bottom: 24px;
}
-.c16 {
+.c25 {
border-collapse: collapse;
border-spacing: 0;
border-style: hidden;
@@ -286,39 +389,39 @@ exports[`rendering of Session Recordings 1`] = `
width: 100%;
}
-.c16 > thead > tr > th,
-.c16 > tbody > tr > th,
-.c16 > tfoot > tr > th,
-.c16 > thead > tr > td,
-.c16 > tbody > tr > td,
-.c16 > tfoot > tr > td {
+.c25 > thead > tr > th,
+.c25 > tbody > tr > th,
+.c25 > tfoot > tr > th,
+.c25 > thead > tr > td,
+.c25 > tbody > tr > td,
+.c25 > tfoot > tr > td {
padding: 8px 8px;
vertical-align: middle;
}
-.c16 > thead > tr > th:first-child,
-.c16 > tbody > tr > th:first-child,
-.c16 > tfoot > tr > th:first-child,
-.c16 > thead > tr > td:first-child,
-.c16 > tbody > tr > td:first-child,
-.c16 > tfoot > tr > td:first-child {
+.c25 > thead > tr > th:first-child,
+.c25 > tbody > tr > th:first-child,
+.c25 > tfoot > tr > th:first-child,
+.c25 > thead > tr > td:first-child,
+.c25 > tbody > tr > td:first-child,
+.c25 > tfoot > tr > td:first-child {
padding-left: 24px;
}
-.c16 > thead > tr > th:last-child,
-.c16 > tbody > tr > th:last-child,
-.c16 > tfoot > tr > th:last-child,
-.c16 > thead > tr > td:last-child,
-.c16 > tbody > tr > td:last-child,
-.c16 > tfoot > tr > td:last-child {
+.c25 > thead > tr > th:last-child,
+.c25 > tbody > tr > th:last-child,
+.c25 > tfoot > tr > th:last-child,
+.c25 > thead > tr > td:last-child,
+.c25 > tbody > tr > td:last-child,
+.c25 > tfoot > tr > td:last-child {
padding-right: 24px;
}
-.c16 > tbody > tr > td {
+.c25 > tbody > tr > td {
vertical-align: middle;
}
-.c16 > thead > tr > th {
+.c25 > thead > tr > th {
color: #FFFFFF;
font-weight: 600;
font-size: 14px;
@@ -330,11 +433,11 @@ exports[`rendering of Session Recordings 1`] = `
white-space: nowrap;
}
-.c16 > thead > tr > th svg {
+.c25 > thead > tr > th svg {
height: 12px;
}
-.c16 > tbody > tr > td {
+.c25 > tbody > tr > td {
color: #FFFFFF;
font-weight: 300;
font-size: 14px;
@@ -342,18 +445,18 @@ exports[`rendering of Session Recordings 1`] = `
letter-spacing: 0.035px;
}
-.c16 tbody tr {
+.c25 tbody tr {
transition: all 150ms;
position: relative;
border-top: 2px solid rgba(255,255,255,0.07);
}
-.c16 tbody tr:hover {
+.c25 tbody tr:hover {
border-top: 2px solid rgba(0,0,0,0);
background-color: #222C59;
}
-.c16 tbody tr:hover:after {
+.c25 tbody tr:hover:after {
box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
content: '';
position: absolute;
@@ -364,7 +467,7 @@ exports[`rendering of Session Recordings 1`] = `
height: 100%;
}
-.c16 tbody tr:hover + tr {
+.c25 tbody tr:hover + tr {
border-top: 2px solid rgba(0,0,0,0);
}
@@ -378,6 +481,14 @@ exports[`rendering of Session Recordings 1`] = `
margin-top: 4px;
}
+.c22 svg {
+ font-size: 20px;
+}
+
+.c22 svg:before {
+ padding-left: 1px;
+}
+
.c15 {
position: relative;
height: 100%;
@@ -507,11 +618,12 @@ exports[`rendering of Session Recordings 1`] = `
-
@@ -522,11 +634,90 @@ exports[`rendering of Session Recordings 1`] = `
class="c15"
/>
+
+
+
+
+
+ Showing
+
+ 1
+
+ -
+
+ 7
+
+ of
+
+
+ 7
+
+
+
+
+
+
@@ -536,7 +727,7 @@ exports[`rendering of Session Recordings 1`] = `
>
Type
|
- peach-node
+ ip-172-31-30-254
|
- one, two
+ foo
|
- 21 seconds
+ 32 seconds
|
- 2019-04-22T00:00:51.543Z
+ 2021-05-21T22:54:27.123Z
|
- 377875-6491-11e9-80a1-427cfde50f5a
+ 9d92ad96-a45c-4add-463cc7bc48b1
|
-
- Play
-
+ non-interactive
|
|
- im-a-nodename
+ peach-node
|
- test
+ one, two
|
- 10 minutes
+ 21 seconds
|
- 2021-07-27T23:20:05.346Z
+ 2019-04-22T00:00:51.543Z
|
- d183ca84-dd94-434a-afee5c2c5f38
+ 377875-6491-11e9-80a1-427cfde50f5a
|
- recording disabled
+
+ Play
+
|
|
- ip-172-31-30-254
+ apple-node
|
- foo
+ one, two
|
- 32 seconds
+ 19 minutes
|
- 2021-05-21T22:54:27.123Z
+ 2019-04-22T00:00:51.543Z
|
- 9d92ad96-a45c-4add-463cc7bc48b1
+ 426485-6491-11e9-80a1-427cfde50f5a
|
- non-interactive
+
+ Play
+
|
+ >
+
+
+
+ Showing
+
+ 1
+
+ -
+
+ 7
+
+ of
+
+
+ 7
+
+
+
+
+
+
+
+
+
`;
diff --git a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
index 273b15338eaa..2315c7f252be 100644
--- a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
+++ b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
@@ -21,12 +21,6 @@ exports[`active sessions CTA 1`] = `
box-sizing: border-box;
}
-.c31 {
- box-sizing: border-box;
- width: 80px;
- text-align: center;
-}
-
.c21 {
box-sizing: border-box;
margin-bottom: 4px;
@@ -38,6 +32,12 @@ exports[`active sessions CTA 1`] = `
margin-right: 8px;
}
+.c31 {
+ box-sizing: border-box;
+ width: 80px;
+ text-align: center;
+}
+
.c10 {
line-height: 1.5;
margin: 0;
@@ -522,11 +522,12 @@ exports[`active sessions CTA 1`] = `
-
@@ -537,7 +538,7 @@ exports[`active sessions CTA 1`] = `
class="c20"
/>
-
+
-
@@ -1610,7 +1612,7 @@ exports[`loaded 1`] = `
class="c14"
/>
-
+
-
@@ -2683,7 +2686,7 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
class="c14"
/>
-
+
-
@@ -480,7 +481,7 @@ exports[`success state 1`] = `
class="c14"
/>
-
+