diff --git a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx index 68e79a56c8775..024bf357887e2 100644 --- a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx +++ b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx @@ -32,11 +32,13 @@ export default function InputSearch({ searchValue, setSearchValue, children, + bigInputSize = false, }: Props) { return ( - + >; children?: JSX.Element; + bigInputSize?: boolean; }; const ChildWrapper = styled.div` @@ -90,20 +93,23 @@ const Wrapper = styled.div` max-width: 725px; `; -const WrapperBackground = styled.div` +const WrapperBackground = styled.div<{ bigSize: boolean }>` border-radius: 200px; width: 100%; - height: ${props => props.theme.space[8]}px; - margin-bottom: 12px; + height: ${props => + props.bigSize ? props.theme.space[7] : props.theme.space[6]}px; `; -interface StyledInputProps extends ColorProps, SpaceProps, HeightProps {} +interface StyledInputProps extends ColorProps, SpaceProps, HeightProps { + bigInputSize: boolean; +} const StyledInput = styled.input` border: none; outline: none; box-sizing: border-box; - font-size: ${props => props.theme.fontSizes[3]}px; + font-size: ${props => + props.bigInputSize ? props.theme.fontSizes[3] : props.theme.fontSizes[2]}px; width: 100%; transition: all 0.2s; ${color} diff --git a/web/packages/design/src/DataTable/Pager/ServerSidePager.tsx b/web/packages/design/src/DataTable/Pager/ServerSidePager.tsx index 7f3c9449ea1da..74766d9f83b4a 100644 --- a/web/packages/design/src/DataTable/Pager/ServerSidePager.tsx +++ b/web/packages/design/src/DataTable/Pager/ServerSidePager.tsx @@ -28,7 +28,11 @@ export function ServerSidePager({ nextPage, prevPage, isLoading }: Props) { const isPrevDisabled = !prevPage || isLoading; return ( - + props.theme.space[3]}px 0; + padding: 0 0 ${props => props.theme.space[3]}px 0; max-height: ${props => props.theme.space[6]}px; - margin-bottom: ${p => p.theme.space[2]}px; + margin-top: ${props => props.theme.space[1]}px; `; diff --git a/web/packages/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx index 33aea29aecf57..5d61823b55866 100644 --- a/web/packages/design/src/DataTable/Table.tsx +++ b/web/packages/design/src/DataTable/Table.tsx @@ -25,6 +25,7 @@ import { StyledTable, StyledPanel } from './StyledTable'; import { BasicTableProps, PagedTableProps, + PagerPosition, SearchableBasicTableProps, ServersideTableProps, TableProps, @@ -232,7 +233,12 @@ function SearchableBasicTable({ }: SearchableBasicTableProps) { return ( <> - + + + ({ style, }: PagedTableProps) { const { pagerPosition, paginatedData, currentPage } = pagination; - const isTopPager = pagerPosition === 'top'; - - const radiusProps = { - borderTopLeftRadius: 3, - borderTopRightRadius: 3, - borderBottomLeftRadius: 3, - borderBottomRightRadius: 3, - }; + const { showBothPager, showBottomPager, showTopPager } = getPagerPosition( + pagerPosition, + paginatedData[currentPage].length + ); - if (isTopPager) { - radiusProps.borderTopLeftRadius = 0; - radiusProps.borderTopRightRadius = 0; - } else { - radiusProps.borderBottomLeftRadius = 0; - radiusProps.borderBottomRightRadius = 0; - } return ( <> - {isTopPager && ( - <> - - - + + + {(showTopPager || showBothPager) && ( ({ {...fetching} {...pagination} /> - - )} - + )} + + {renderHeaders()} {renderBody(paginatedData[currentPage])} - {!isTopPager && ( + {(showBottomPager || showBothPager) && ( ({ style, serversideProps, fetchStatus, + pagination, }: ServersideTableProps) { + const { showTopPager, showBothPager, showBottomPager } = getPagerPosition( + pagination?.pagerPosition, + data.length + ); return ( <> - {serversideProps.serversideSearchPanel} + + {serversideProps.serversideSearchPanel} + {(showTopPager || showBothPager) && ( + + )} + {renderHeaders()} {renderBody(data)} - {(nextPage || prevPage) && ( - + {(showBottomPager || showBothPager) && ( + - + )} ); @@ -419,3 +426,25 @@ const LoadingIndicator = ({ colSpan }: { colSpan: number }) => ( ); + +/** + * Returns pager position flags. + * + * If pagerPosition is not defined, it defaults to: + * - top pager only: if current dataLen < 5 + * - both top and bottom pager if dataLen > 5 + */ +export function getPagerPosition( + pagerPosition: PagerPosition, + dataLen: number +) { + const hasSufficientData = dataLen > 5; + + const showBottomPager = pagerPosition === 'bottom'; + const showTopPager = + pagerPosition === 'top' || (!pagerPosition && !hasSufficientData); + const showBothPager = + pagerPosition === 'both' || (!pagerPosition && hasSufficientData); + + return { showBothPager, showBottomPager, showTopPager }; +} diff --git a/web/packages/design/src/DataTable/types.ts b/web/packages/design/src/DataTable/types.ts index 7f850cf7a075b..2adb81e31f0db 100644 --- a/web/packages/design/src/DataTable/types.ts +++ b/web/packages/design/src/DataTable/types.ts @@ -68,9 +68,19 @@ type TableColumnBase = { isNonRender?: boolean; }; +export type PagerPosition = 'top' | 'bottom' | 'both'; + export type PaginationConfig = { pageSize?: number; - pagerPosition?: 'top' | 'bottom'; + /** + * "undefined" will show both pagers if data on current page is some + * sufficient length. + * + * Otherwise, it will only show the top pager. + * + * "both" will show both regardless of data length. + */ + pagerPosition?: PagerPosition; CustomTable?: (p: PagedTableProps) => JSX.Element; }; diff --git a/web/packages/design/src/DataTable/useTable.ts b/web/packages/design/src/DataTable/useTable.ts index c9b370432a795..b54a1d50bdc87 100644 --- a/web/packages/design/src/DataTable/useTable.ts +++ b/web/packages/design/src/DataTable/useTable.ts @@ -63,7 +63,7 @@ export default function useTable({ ? { paginatedData: paginateData(data, pagination.pageSize), currentPage: 0, - pagerPosition: pagination.pagerPosition || 'top', + pagerPosition: pagination.pagerPosition, pageSize: pagination.pageSize || 15, CustomTable: pagination.CustomTable, } @@ -87,7 +87,11 @@ export default function useTable({ return false; } - const updateData = (sort: typeof state.sort, searchValue: string) => { + const updateData = ( + sort: typeof state.sort, + searchValue: string, + resetCurrentPage = false + ) => { // Don't do clientside sorting and filtering if serversideProps are defined const sortedAndFiltered = serversideProps ? data @@ -101,6 +105,19 @@ export default function useTable({ showFirst ); if (pagination && !serversideProps) { + const pages = paginateData(sortedAndFiltered, pagination.pageSize); + // Preserve the current page, instead of resetting it every data update. + // The currentPage index can be out of range if data were deleted + // from the original data. If that were the case, reset the currentPage + // to the last page. + let currentPage = state.pagination.currentPage; + if (resetCurrentPage) { + // Resetting the current page is desirable when user is newly sorting + // or entered a new search. + currentPage = 0; + } else if (currentPage && pages.length > 0 && !pages[currentPage]) { + currentPage = pages.length - 1; + } setState({ ...state, sort, @@ -108,8 +125,8 @@ export default function useTable({ data: sortedAndFiltered, pagination: { ...state.pagination, - currentPage: 0, - paginatedData: paginateData(sortedAndFiltered, pagination.pageSize), + currentPage, + paginatedData: pages, }, }); } else { @@ -137,12 +154,13 @@ export default function useTable({ onSort: column.onSort, dir: state.sort?.dir === 'ASC' ? 'DESC' : 'ASC', }, - state.searchValue + state.searchValue, + true /* resetCurrentPage */ ); } function setSearchValue(searchValue: string) { - updateData(state.sort, searchValue); + updateData(state.sort, searchValue, true /* resetCurrentPage */); } function nextPage() { 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 8c881c2a3caf3..1a1ba1b322f9f 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 @@ -1639,10 +1639,6 @@ exports[`render Roles 1`] = ` transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } .c17 tbody tr:hover { @@ -1670,9 +1666,9 @@ exports[`render Roles 1`] = ` flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } .c14 svg { @@ -1717,15 +1713,14 @@ exports[`render Roles 1`] = ` .c3 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 40px; } .c5 { border: none; outline: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; width: 100%; transition: all 0.2s; padding-left: 16px; @@ -1772,86 +1767,86 @@ exports[`render Roles 1`] = ` - -
- Showing - - 1 - - - - - 2 - - of - - - 2 - +
+ Showing + + 1 + + - + + 2 + + of + + + 2 + +
-
-
- - + + + + + + +
- + diff --git a/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx b/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx index 5ab1b2ffc2b1e..fdccb6ae9045b 100644 --- a/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx +++ b/web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx @@ -38,6 +38,7 @@ export interface ClusterDropdownProps { * messages. Even if using the internal "loadClusters", we will pass the error back to be consumed by the parent. */ onError: (errorMessage: string) => void; + mb?: number; } interface ClusterLoader { @@ -60,6 +61,7 @@ export function ClusterDropdown({ clusterId, onChange, onError, + mb = 0, }: ClusterDropdownProps) { const initialClusters = clusterLoader.clusters; const [options, setOptions] = React.useState( @@ -146,7 +148,7 @@ export function ClusterDropdown({ } return ( - + - - - - {showSearchBar && ( - - {!hideAdvancedSearch && ( - - )} - - )} - - - - {pageIndicators && ( - + + + + {showSearchBar && ( + + {!hideAdvancedSearch && ( + + )} + )} - {extraChildren} - + - + + {pageIndicators && ( + + )} + {extraChildren} + + ); } diff --git a/web/packages/teleport/src/Audit/Audit.tsx b/web/packages/teleport/src/Audit/Audit.tsx index 9b31620212ca6..b47d8b3ca83e6 100644 --- a/web/packages/teleport/src/Audit/Audit.tsx +++ b/web/packages/teleport/src/Audit/Audit.tsx @@ -72,13 +72,12 @@ export function Audit(props: State) { {attempt.status === 'failed' && {attempt.statusText} } {!errorMessage && ( - - - + )} {errorMessage && {errorMessage}} {attempt.status === 'processing' && ( 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 1741e3dda820e..0b2139af5e70d 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 @@ -233,10 +233,6 @@ exports[`list of all events 1`] = ` transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } .c17 tbody tr:hover { @@ -264,9 +260,9 @@ exports[`list of all events 1`] = ` flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } .c14 svg { @@ -333,15 +329,14 @@ exports[`list of all events 1`] = ` .c1 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 40px; } .c3 { border: none; outline: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; width: 100%; transition: all 0.2s; padding-left: 16px; @@ -386,91 +381,91 @@ exports[`list of all events 1`] = ` - -
- Showing - - 1 - - - - - 242 - - of - - - 242 - +
+ Showing + + 1 + + - + + 242 + + of + + + 242 + +
+
- -
-
- - + + +
- +
@@ -12976,6 +12971,89 @@ exports[`list of all events 1`] = `
+ `; @@ -13326,10 +13404,6 @@ exports[`loaded audit log screen 1`] = ` transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } .c16 tbody tr:hover { @@ -13357,9 +13431,9 @@ exports[`loaded audit log screen 1`] = ` flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } .c15 { @@ -13396,15 +13470,14 @@ exports[`loaded audit log screen 1`] = ` .c11 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 40px; } .c13 { border: none; outline: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; width: 100%; transition: all 0.2s; padding-left: 16px; @@ -13495,9 +13568,6 @@ exports[`loaded audit log screen 1`] = ` -
`; 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 1f5aa78049597..551050569f8df 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 @@ -194,10 +194,6 @@ exports[`render clusters 1`] = ` transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } .c14 tbody tr:hover { @@ -225,9 +221,9 @@ exports[`render clusters 1`] = ` flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } .c13 { @@ -264,15 +260,14 @@ exports[`render clusters 1`] = ` .c9 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 40px; } .c11 { border: none; outline: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; width: 100%; transition: all 0.2s; padding-left: 16px; @@ -1702,5 +1697,8 @@ exports[`render clusters 1`] = ` + @@ -641,7 +795,7 @@ exports[`render DocumentNodes 1`] = ` > Hostname
cluster: one
kernel: 4.15.0-51-generic @@ -704,13 +858,13 @@ exports[`render DocumentNodes 1`] = ` align="right" >
-
-
-
+
-
-
+
+
+ Showing + + 1 + + - + + 7 + + of + + + 7 + +
+
+
- Showing - - 1 - - - - - 7 - - of - - - 7 - + +
- +
@@ -996,16 +1061,16 @@ exports[`failed 1`] = `
cluster: one
kernel: 4.15.0-51-generic @@ -1016,13 +1081,13 @@ exports[`failed 1`] = ` align="right" >
- + `; @@ -1450,8 +1515,9 @@ exports[`loaded 1`] = ` margin-bottom: 24px; } -.c9 { +.c10 { box-sizing: border-box; + width: 100%; } .c16 { @@ -1464,11 +1530,16 @@ exports[`loaded 1`] = ` box-sizing: border-box; margin-bottom: 4px; margin-right: 8px; + margin-top: 8px; } -.c36 { +.c30 { box-sizing: border-box; - width: 100%; +} + +.c40 { + box-sizing: border-box; + margin-top: 8px; } .c8 { @@ -1514,7 +1585,7 @@ exports[`loaded 1`] = ` cursor: auto; } -.c33 { +.c38 { line-height: 1.5; margin: 0; display: inline-flex; @@ -1542,22 +1613,22 @@ exports[`loaded 1`] = ` height: 24px; } -.c33:hover, -.c33:focus { +.c38:hover, +.c38:focus { background: rgba(255,255,255,0.07); } -.c33:active { +.c38:active { background: rgba(255,255,255,0.13); } -.c33:disabled { +.c38:disabled { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.3); cursor: auto; } -.c37 { +.c31 { align-items: center; border: none; cursor: pointer; @@ -1579,21 +1650,21 @@ exports[`loaded 1`] = ` margin-right: 0px; } -.c37:disabled { +.c31:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c37:not(:disabled):hover, -.c37:not(:disabled):focus { +.c31:not(:disabled):hover, +.c31:not(:disabled):focus { background: rgba(255,255,255,0.13); } -.c37:not(:disabled):active { +.c31:not(:disabled):active { background: rgba(255,255,255,0.18); } -.c39 { +.c33 { align-items: center; border: none; cursor: pointer; @@ -1614,17 +1685,17 @@ exports[`loaded 1`] = ` margin-left: 0px; } -.c39:disabled { +.c33:disabled { color: rgba(255,255,255,0.36); cursor: default; } -.c39:not(:disabled):hover, -.c39:not(:disabled):focus { +.c33:not(:disabled):hover, +.c33:not(:disabled):focus { background: rgba(255,255,255,0.13); } -.c39:not(:disabled):active { +.c33:not(:disabled):active { background: rgba(255,255,255,0.18); } @@ -1634,7 +1705,7 @@ exports[`loaded 1`] = ` justify-content: center; } -.c34 { +.c39 { display: inline-flex; align-items: center; justify-content: center; @@ -1672,7 +1743,7 @@ exports[`loaded 1`] = ` font-weight: 500; } -.c31 { +.c36 { box-sizing: border-box; border-radius: 10px; display: inline-block; @@ -1697,11 +1768,6 @@ exports[`loaded 1`] = ` justify-content: space-between; } -.c10 { - display: flex; - flex-direction: column; -} - .c17 { display: flex; align-items: center; @@ -1713,7 +1779,7 @@ exports[`loaded 1`] = ` justify-content: flex-end; } -.c30 { +.c35 { display: flex; flex-wrap: wrap; } @@ -1821,7 +1887,7 @@ exports[`loaded 1`] = ` padding-bottom: 24px; } -.c29 { +.c34 { border-collapse: collapse; border-spacing: 0; border-style: hidden; @@ -1829,39 +1895,39 @@ exports[`loaded 1`] = ` width: 100%; } -.c29 > thead > tr > th, -.c29 > tbody > tr > th, -.c29 > tfoot > tr > th, -.c29 > thead > tr > td, -.c29 > tbody > tr > td, -.c29 > tfoot > tr > td { +.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; } -.c29 > thead > tr > th:first-child, -.c29 > tbody > tr > th:first-child, -.c29 > tfoot > tr > th:first-child, -.c29 > thead > tr > td:first-child, -.c29 > tbody > tr > td:first-child, -.c29 > tfoot > tr > td:first-child { +.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; } -.c29 > thead > tr > th:last-child, -.c29 > tbody > tr > th:last-child, -.c29 > tfoot > tr > th:last-child, -.c29 > thead > tr > td:last-child, -.c29 > tbody > tr > td:last-child, -.c29 > tfoot > tr > td:last-child { +.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; } -.c29 > tbody > tr > td { +.c34 > tbody > tr > td { vertical-align: middle; } -.c29 > thead > tr > th { +.c34 > thead > tr > th { color: #FFFFFF; font-weight: 600; font-size: 14px; @@ -1873,11 +1939,11 @@ exports[`loaded 1`] = ` white-space: nowrap; } -.c29 > thead > tr > th svg { +.c34 > thead > tr > th svg { height: 12px; } -.c29 > tbody > tr > td { +.c34 > tbody > tr > td { color: #FFFFFF; font-weight: 300; font-size: 14px; @@ -1885,18 +1951,18 @@ exports[`loaded 1`] = ` letter-spacing: 0.035px; } -.c29 tbody tr { +.c34 tbody tr { transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); } -.c29 tbody tr:hover { +.c34 tbody tr:hover { border-top: 2px solid rgba(0,0,0,0); background-color: #222C59; } -.c29 tbody tr:hover:after { +.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; @@ -1907,36 +1973,42 @@ exports[`loaded 1`] = ` height: 100%; } -.c29 tbody tr:hover + tr { +.c34 tbody tr:hover + tr { border-top: 2px solid rgba(0,0,0,0); } -.c35 { +.c9 { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } -.c32 { +.c37 { cursor: pointer; } -.c32:hover { +.c37:hover { background-color: rgba(255,255,255,0.13); } -.c38 svg { +.c32 svg { font-size: 20px; } -.c38 svg:before { +.c32 svg:before { padding-left: 1px; } +.c29 { + flex-shrink: 1; + flex-grow: 0; + flex-basis: 0; +} + .c15 { position: relative; height: 100%; @@ -1971,8 +2043,7 @@ exports[`loaded 1`] = ` .c11 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 48px; } .c13 { @@ -2031,104 +2102,163 @@ exports[`loaded 1`] = ` -
-
-
+
-
-
+
+
+ Showing + + 1 + + - + + 7 + + of + + + 7 + +
+
+
- Showing - - 1 - - - - - 7 - - of - - - 7 - + +
- + @@ -2181,16 +2311,16 @@ exports[`loaded 1`] = `
cluster: one
kernel: 4.15.0-51-generic @@ -2201,13 +2331,13 @@ exports[`loaded 1`] = ` align="right" >
- +
`; diff --git a/web/packages/teleport/src/Recordings/Recordings.tsx b/web/packages/teleport/src/Recordings/Recordings.tsx index 7729fafb64231..d937f8bd708ac 100644 --- a/web/packages/teleport/src/Recordings/Recordings.tsx +++ b/web/packages/teleport/src/Recordings/Recordings.tsx @@ -67,13 +67,12 @@ export function Recordings({ {!errorMessage && ( - - - + )} {errorMessage && {errorMessage}} {attempt.status === 'failed' && {attempt.statusText} } 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 70df6728c99db..247844e7c9e79 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 @@ -346,10 +346,6 @@ exports[`rendering of Session Recordings 1`] = ` transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } .c16 tbody tr:hover { @@ -377,9 +373,9 @@ exports[`rendering of Session Recordings 1`] = ` flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } .c15 { @@ -416,15 +412,14 @@ exports[`rendering of Session Recordings 1`] = ` .c11 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 40px; } .c13 { border: none; outline: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; width: 100%; transition: all 0.2s; padding-left: 16px; @@ -506,9 +501,6 @@ exports[`rendering of Session Recordings 1`] = ` -
`; diff --git a/web/packages/teleport/src/Sessions/Sessions.tsx b/web/packages/teleport/src/Sessions/Sessions.tsx index cefe75a86b759..7f846b4061231 100644 --- a/web/packages/teleport/src/Sessions/Sessions.tsx +++ b/web/packages/teleport/src/Sessions/Sessions.tsx @@ -81,13 +81,12 @@ export function Sessions(props: ReturnType) { )} {!errorMessage && ( - - - + )} {errorMessage && {errorMessage}} {attempt.isFailed && {attempt.message} } 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 fe830bc1d59b4..772095ec8d4ae 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 @@ -359,10 +359,6 @@ exports[`active sessions CTA 1`] = ` transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } .c28 tbody tr:hover { @@ -390,9 +386,9 @@ exports[`active sessions CTA 1`] = ` flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } .c26 svg { @@ -437,15 +433,14 @@ exports[`active sessions CTA 1`] = ` .c16 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 40px; } .c18 { border: none; outline: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; width: 100%; transition: all 0.2s; padding-left: 16px; @@ -521,9 +516,6 @@ exports[`active sessions CTA 1`] = ` -
- -
- Showing - - 1 - - - - - 7 - - of - - - 7 - +
+ Showing + + 1 + + - + + 7 + + of + + + 7 + +
-
-
- - + + + + + + +
- + @@ -1095,6 +1087,89 @@ exports[`active sessions CTA 1`] = `
+ `; @@ -1395,10 +1470,6 @@ exports[`loaded 1`] = ` transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } .c24 tbody tr:hover { @@ -1426,9 +1497,9 @@ exports[`loaded 1`] = ` flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } .c21 svg { @@ -1473,15 +1544,14 @@ exports[`loaded 1`] = ` .c10 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 40px; } .c12 { border: none; outline: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; width: 100%; transition: all 0.2s; padding-left: 16px; @@ -1519,9 +1589,6 @@ exports[`loaded 1`] = ` Active Sessions -
- -
- Showing - - 1 - - - - - 7 - - of - - - 7 - +
+ Showing + + 1 + + - + + 7 + + of + + + 7 + +
-
-
- - + + + + + + +
- + @@ -2093,6 +2160,89 @@ exports[`loaded 1`] = `
+ `; @@ -2393,10 +2543,6 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } .c24 tbody tr:hover { @@ -2424,9 +2570,9 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } .c21 svg { @@ -2471,15 +2617,14 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` .c10 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 40px; } .c12 { border: none; outline: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; width: 100%; transition: all 0.2s; padding-left: 16px; @@ -2517,9 +2662,6 @@ exports[`moderated sessions CTA for non-enterprise 1`] = ` Active Sessions -
- -
- Showing - - 1 - - - - - 7 - - of - - - 7 - +
+ Showing + + 1 + + - + + 7 + + of + + + 7 + +
-
-
- - + + + + + + +
- + @@ -3091,5 +3233,88 @@ exports[`moderated sessions CTA for non-enterprise 1`] = `
+ `; diff --git a/web/packages/teleport/src/UnifiedResources/SearchInput.tsx b/web/packages/teleport/src/UnifiedResources/SearchInput.tsx index ce0e7c13d05d5..737d2d821d772 100644 --- a/web/packages/teleport/src/UnifiedResources/SearchInput.tsx +++ b/web/packages/teleport/src/UnifiedResources/SearchInput.tsx @@ -91,7 +91,7 @@ const WrapperBackground = styled.div` background: ${props => props.theme.colors.levels.sunken}; border-radius: 200px; width: 100%; - height: ${props => props.theme.space[8]}px; + height: ${props => props.theme.space[7]}px; `; interface StyledInputProps extends ColorProps, SpaceProps, HeightProps {} diff --git a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap index 853f8c023e300..fb3b4e45e5b2c 100644 --- a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap +++ b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap @@ -347,10 +347,6 @@ exports[`success state 1`] = ` transition: all 150ms; position: relative; border-top: 2px solid rgba(255,255,255,0.07); - border-top-left-radius: 0px; - border-top-right-radius: 0px; - border-bottom-right-radius: 8px; - border-bottom-left-radius: 8px; } .c24 tbody tr:hover { @@ -378,9 +374,9 @@ exports[`success state 1`] = ` flex-shrink: 0; align-items: center; justify-content: space-between; - padding: 16px 0; + padding: 0 0 16px 0; max-height: 40px; - margin-bottom: 8px; + margin-top: 4px; } .c21 svg { @@ -425,15 +421,14 @@ exports[`success state 1`] = ` .c10 { border-radius: 200px; width: 100%; - height: 56px; - margin-bottom: 12px; + height: 40px; } .c12 { border: none; outline: none; box-sizing: border-box; - font-size: 16px; + font-size: 14px; width: 100%; transition: all 0.2s; padding-left: 16px; @@ -487,86 +482,86 @@ exports[`success state 1`] = ` - -
- Showing - - 1 - - - - - 7 - - of - - - 7 - +
+ Showing + + 1 + + - + + 7 + + of + + + 7 + +
-
-
- - + + + + + + +
- + @@ -958,6 +953,89 @@ exports[`success state 1`] = `
+ `; diff --git a/web/packages/teleport/src/components/NodeList/NodeList.tsx b/web/packages/teleport/src/components/NodeList/NodeList.tsx index 96c1c83dd0925..d2220b4a15a93 100644 --- a/web/packages/teleport/src/components/NodeList/NodeList.tsx +++ b/web/packages/teleport/src/components/NodeList/NodeList.tsx @@ -92,6 +92,7 @@ function NodeList(props: Props) { pathname={pathname} replaceHistory={replaceHistory} disabled={fetchStatus === 'loading'} + bigInputSize={true} /> ), }} diff --git a/web/packages/teleport/src/components/ServersideSearchPanel/ServersideSearchPanel.tsx b/web/packages/teleport/src/components/ServersideSearchPanel/ServersideSearchPanel.tsx index 0c672123f63b3..675f9739ec292 100644 --- a/web/packages/teleport/src/components/ServersideSearchPanel/ServersideSearchPanel.tsx +++ b/web/packages/teleport/src/components/ServersideSearchPanel/ServersideSearchPanel.tsx @@ -35,21 +35,31 @@ interface ComponentProps { disabled?: boolean; } -export interface Props extends HookProps, ComponentProps {} +export interface Props extends HookProps, ComponentProps { + bigInputSize?: boolean; +} export default function Container(props: Props) { - const { pageIndicators, disabled, ...hookProps } = props; + const { + pageIndicators, + disabled, + bigInputSize = false, + ...hookProps + } = props; const state = useServersideSearchPanel(hookProps); return ( ); } -interface State extends SearchPanelState, ComponentProps {} +interface State extends SearchPanelState, ComponentProps { + bigInputSize?: boolean; +} export function ServersideSearchPanel({ searchString, @@ -59,6 +69,7 @@ export function ServersideSearchPanel({ onSubmitSearch, pageIndicators, disabled = false, + bigInputSize = false, }: State) { function onToggle() { setIsAdvancedSearch(!isAdvancedSearch); @@ -68,17 +79,23 @@ export function ServersideSearchPanel({ - + - +