Web: Add MarkInverse and ResourceLabelTooltip contents (#50532)

* Add a inverse Mark version inside tooltips

* Add tooltip contents for resource labels

* Fix spacing for ButtonTextWithAddIcon

* Add index file for export

* Rename MarkForTooltip to MarkInverse

* Address CRs

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 = () => {
     </Box>
   );
 };
+
+export const MarkInsideTooltip = () => {
+  return (
+    <IconTooltip>
+      Example of <MarkInverse>MarkInverse</MarkInverse> component. Note the{' '}
+      <MarkInverse>inversed</MarkInverse> background and text color.
+    </IconTooltip>
+  );
+};

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};
+`;

web/packages/design/src/Mark/index.ts

@@ -16,4 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { Mark } from './Mark';
+export { Mark, MarkInverse } from './Mark';

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',

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',

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',

web/packages/design/src/theme/themes/types.ts

@@ -141,6 +141,7 @@ export type ThemeColors = {
 
   tooltip: {
     background: string;
+    inverseBackground: string;
   };
 
   progressBarColor: string;

web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx

@@ -33,7 +33,7 @@ export const ButtonTextWithAddIcon = ({
   iconSize?: IconSize;
 }) => {
   return (
-    <ButtonText onClick={onClick} disabled={disabled} compact>
+    <ButtonText onClick={onClick} disabled={disabled} compact pr={2}>
       <AddIcon
         className="icon-add"
         size={iconSize}

web/packages/teleport/src/Discover/Shared/ResourceLabelTooltip/ResourceLabelTooltip.story.tsx

@@ -0,0 +1,29 @@
+/**
+ * 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 <http://www.gnu.org/licenses/>.
+ */
+
+import { ResourceLabelTooltip } from './ResourceLabelTooltip';
+
+export default {
+  title: 'Teleport/Discover/Shared/ResourceLabelTooltip',
+};
+
+export const RDS = () => <ResourceLabelTooltip resourceKind="rds" />;
+export const EKS = () => <ResourceLabelTooltip resourceKind="eks" />;
+export const Server = () => <ResourceLabelTooltip resourceKind="server" />;
+export const Database = () => <ResourceLabelTooltip resourceKind="db" />;
+export const Kube = () => <ResourceLabelTooltip resourceKind="kube" />;

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 <http://www.gnu.org/licenses/>.
+ */
+
+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:
+          <Ul>
+            <li>
+              Filter servers by labels when using tsh, tctl, or the web UI.
+            </li>
+            <li>
+              Restrict access to this server with{' '}
+              <Link
+                target="_blank"
+                href="https://goteleport.com/docs/enroll-resources/server-access/rbac/"
+              >
+                Teleport RBAC
+              </Link>
+              . Only roles with <MarkInverse>node_labels</MarkInverse> that
+              match these labels will be allowed to access this server.
+            </li>
+          </Ul>
+        </>
+      );
+      break;
+    }
+    case 'kube':
+    case 'eks': {
+      tip = (
+        <>
+          Labels allow you to do the following:
+          <Ul>
+            <li>
+              Filter Kubernetes clusters by labels when using tsh, tctl, or the
+              web UI.
+            </li>
+            <li>
+              Restrict access to this Kubernetes cluster with{' '}
+              <Link
+                target="_blank"
+                href="https://goteleport.com/docs/enroll-resources/kubernetes-access/controls/"
+              >
+                Teleport RBAC
+              </Link>
+              . Only roles with <MarkInverse>kubernetes_labels</MarkInverse>{' '}
+              that match these labels will be allowed to access this Kubernetes
+              cluster.
+            </li>
+            {resourceKind === 'eks' && (
+              <li>
+                All the AWS tags from the selected EKS will be included upon
+                enrollment.
+              </li>
+            )}
+          </Ul>
+        </>
+      );
+      break;
+    }
+    case 'rds':
+    case 'db': {
+      tip = (
+        <>
+          Labels allow you to do the following:
+          <Ul>
+            <li>
+              Filter databases by labels when using tsh, tctl, or the web UI.
+            </li>
+            <li>
+              Restrict access to this database with{' '}
+              <Link
+                target="_blank"
+                href="https://goteleport.com/docs/enroll-resources/database-access/rbac/"
+              >
+                Teleport RBAC
+              </Link>
+              . Only roles with <MarkInverse>db_labels</MarkInverse> that match
+              these labels will be allowed to access this database.
+            </li>
+            {resourceKind === 'rds' && (
+              <li>
+                All the AWS tags from the selected RDS will be included upon
+                enrollment.
+              </li>
+            )}
+          </Ul>
+        </>
+      );
+      break;
+    }
+    default:
+      resourceKind satisfies never;
+  }
+
+  return (
+    <IconTooltip sticky={true} position={toolTipPosition}>
+      {tip}
+    </IconTooltip>
+  );
+}
+
+const Ul = styled.ul`
+  margin: 0;
+  padding-left: ${p => p.theme.space[4]}px;
+`;

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 <http://www.gnu.org/licenses/>.
+ */
+
+export { ResourceLabelTooltip } from './ResourceLabelTooltip';