diff --git a/web/packages/design/src/Mark/Mark.story.tsx b/web/packages/design/src/Mark/Mark.story.tsx index fdc202a8f2044..0b532cd03d2ab 100644 --- a/web/packages/design/src/Mark/Mark.story.tsx +++ b/web/packages/design/src/Mark/Mark.story.tsx @@ -17,8 +17,9 @@ */ import Box from 'design/Box'; +import { IconTooltip } from 'design/Tooltip'; -import { Mark as M } from './Mark'; +import { Mark as M, MarkInverse } from './Mark'; export default { title: 'Design/Mark', @@ -41,3 +42,12 @@ export const SampleText = () => { ); }; + +export const MarkInsideTooltip = () => { + return ( + + Example of MarkInverse component. Note the{' '} + inversed background and text color. + + ); +}; diff --git a/web/packages/design/src/Mark/Mark.tsx b/web/packages/design/src/Mark/Mark.tsx index 2c76a92e0a25c..95552b8e9882b 100644 --- a/web/packages/design/src/Mark/Mark.tsx +++ b/web/packages/design/src/Mark/Mark.tsx @@ -26,3 +26,16 @@ export const Mark = styled.mark` background-color: ${p => p.theme.colors.interactive.tonal.neutral[2]}; color: inherit; `; + +/** + * Returns a MarkInverse that inverts the colors from its parent Mark. + * For example, if current theme is dark theme, parent Mark would use + * light colors, but MarkInverse will use dark colors. + * + * Intended for use in tooltips since tooltips uses inverse background + * color of the current theme. + */ +export const MarkInverse = styled(Mark)` + background-color: ${p => p.theme.colors.tooltip.inverseBackground}; + color: ${p => p.theme.colors.text.main}; +`; diff --git a/web/packages/design/src/Mark/index.ts b/web/packages/design/src/Mark/index.ts index f12d3f30412e7..8ff108e93731d 100644 --- a/web/packages/design/src/Mark/index.ts +++ b/web/packages/design/src/Mark/index.ts @@ -16,4 +16,4 @@ * along with this program. If not, see . */ -export { Mark } from './Mark'; +export { Mark, MarkInverse } from './Mark'; diff --git a/web/packages/design/src/theme/themes/bblpTheme.ts b/web/packages/design/src/theme/themes/bblpTheme.ts index 94c03f70948b8..bab7835d0c80d 100644 --- a/web/packages/design/src/theme/themes/bblpTheme.ts +++ b/web/packages/design/src/theme/themes/bblpTheme.ts @@ -204,6 +204,7 @@ const colors: ThemeColors = { tooltip: { background: 'rgba(255, 255, 255, 0.8)', + inverseBackground: 'rgba(0, 0, 0, 0.5)', }, progressBarColor: '#00BFA5', diff --git a/web/packages/design/src/theme/themes/darkTheme.ts b/web/packages/design/src/theme/themes/darkTheme.ts index 9ba4d7b2a98c4..1a7ce32ece88c 100644 --- a/web/packages/design/src/theme/themes/darkTheme.ts +++ b/web/packages/design/src/theme/themes/darkTheme.ts @@ -203,6 +203,7 @@ const colors: ThemeColors = { tooltip: { background: 'rgba(255, 255, 255, 0.8)', + inverseBackground: 'rgba(0, 0, 0, 0.5)', }, progressBarColor: '#00BFA5', diff --git a/web/packages/design/src/theme/themes/lightTheme.ts b/web/packages/design/src/theme/themes/lightTheme.ts index 8c2cc6daf7677..c19ebb8e991cc 100644 --- a/web/packages/design/src/theme/themes/lightTheme.ts +++ b/web/packages/design/src/theme/themes/lightTheme.ts @@ -202,6 +202,7 @@ const colors: ThemeColors = { tooltip: { background: 'rgba(0, 0, 0, 0.80)', + inverseBackground: 'rgba(255, 255, 255, 0.5)', }, progressBarColor: '#007D6B', diff --git a/web/packages/design/src/theme/themes/types.ts b/web/packages/design/src/theme/themes/types.ts index 64a45651a7035..d0519eb98d3dc 100644 --- a/web/packages/design/src/theme/themes/types.ts +++ b/web/packages/design/src/theme/themes/types.ts @@ -141,6 +141,7 @@ export type ThemeColors = { tooltip: { background: string; + inverseBackground: string; }; progressBarColor: string; diff --git a/web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx b/web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx index 3d65b59944f06..e33a9849b37b4 100644 --- a/web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx +++ b/web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx @@ -33,7 +33,7 @@ export const ButtonTextWithAddIcon = ({ iconSize?: IconSize; }) => { return ( - + . + */ + +import { ResourceLabelTooltip } from './ResourceLabelTooltip'; + +export default { + title: 'Teleport/Discover/Shared/ResourceLabelTooltip', +}; + +export const RDS = () => ; +export const EKS = () => ; +export const Server = () => ; +export const Database = () => ; +export const Kube = () => ; diff --git a/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx b/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx new file mode 100644 index 0000000000000..2e7ad2d1980aa --- /dev/null +++ b/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.tsx @@ -0,0 +1,147 @@ +/** + * Teleport + * Copyright (C) 2024 Gravitational, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import Link from 'design/Link'; +import { MarkInverse } from 'design/Mark'; +import { Position } from 'design/Popover/Popover'; +import { IconTooltip } from 'design/Tooltip'; +import styled from 'styled-components'; + +/** + * Returns a IconTooltip component with its tip contents + * set to the requested resource kind. + * + * @param resourceKind - the tip contents differ slightly depending + * on the resource kind + * @param toolTipPosition (opt) - the position which the tooltip should + * render (see type Position) + * @returns JSX Element + */ +export function ResourceLabelTooltip({ + resourceKind, + toolTipPosition, +}: { + resourceKind: 'server' | 'eks' | 'rds' | 'kube' | 'db'; + toolTipPosition?: Position; +}) { + let tip; + + switch (resourceKind) { + case 'server': { + tip = ( + <> + Labels allow you to do the following: +
    +
  • + Filter servers by labels when using tsh, tctl, or the web UI. +
    • +
  • + Restrict access to this server with{' '} + + Teleport RBAC + + . Only roles with node_labels that + match these labels will be allowed to access this server. +
    • +
+ + ); + break; + } + case 'kube': + case 'eks': { + tip = ( + <> + Labels allow you to do the following: +
    +
  • + Filter Kubernetes clusters by labels when using tsh, tctl, or the + web UI. +
    • +
  • + Restrict access to this Kubernetes cluster with{' '} + + Teleport RBAC + + . Only roles with kubernetes_labels{' '} + that match these labels will be allowed to access this Kubernetes + cluster. +
    • + {resourceKind === 'eks' && ( +
  • + All the AWS tags from the selected EKS will be included upon + enrollment. +
    • + )} +
+ + ); + break; + } + case 'rds': + case 'db': { + tip = ( + <> + Labels allow you to do the following: +
    +
  • + Filter databases by labels when using tsh, tctl, or the web UI. +
    • +
  • + Restrict access to this database with{' '} + + Teleport RBAC + + . Only roles with db_labels that match + these labels will be allowed to access this database. +
    • + {resourceKind === 'rds' && ( +
  • + All the AWS tags from the selected RDS will be included upon + enrollment. +
    • + )} +
+ + ); + break; + } + default: + resourceKind satisfies never; + } + + return ( + + {tip} + + ); +} + +const Ul = styled.ul` + margin: 0; + padding-left: ${p => p.theme.space[4]}px; +`; diff --git a/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/index.ts b/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/index.ts new file mode 100644 index 0000000000000..fd093b71e1080 --- /dev/null +++ b/web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/index.ts @@ -0,0 +1,19 @@ +/** + * Teleport + * Copyright (C) 2024 Gravitational, Inc. + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +export { ResourceLabelTooltip } from './ResourceLabelTooltip';