Move tooltips to the design package

web/packages/shared/components/ToolTip/HoverTooltip.tsx → web/packages/design/src/ToolTip/HoverTooltip.tsx

@@ -18,6 +18,7 @@
 
 import React, { PropsWithChildren, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
+
 import { Popover, Flex, Text } from 'design';
 import { JustifyContentProps, FlexBasisProps } from 'design/system';
 
@@ -64,6 +65,7 @@ export const HoverTooltip: React.FC<
       // whether we want to show the tooltip.
       if (
         target instanceof Element &&
+        target.parentElement &&
         target.scrollWidth > target.parentElement.offsetWidth
       ) {
         setAnchorEl(event.currentTarget);
@@ -75,7 +77,7 @@ export const HoverTooltip: React.FC<
   }
 
   function handlePopoverClose() {
-    setAnchorEl(null);
+    setAnchorEl(undefined);
   }
 
   // Don't render the tooltip if the content is undefined.

web/packages/shared/components/ToolTip/ToolTip.story.tsx → web/packages/design/src/ToolTip/ToolTip.story.tsx

@@ -17,11 +17,13 @@
  */
 
 import React from 'react';
-import { Text, Flex, ButtonPrimary } from 'design';
 
 import styled, { useTheme } from 'styled-components';
+
+import { Text, Flex, ButtonPrimary } from 'design';
 import { P } from 'design/Text/Text';
-import { logos } from 'teleport/components/LogoHero/LogoHero';
+import AGPLLogoLight from 'design/assets/images/agpl-light.svg';
+import AGPLLogoDark from 'design/assets/images/agpl-dark.svg';
 
 import { ToolTipInfo } from './ToolTip';
 import { HoverTooltip } from './HoverTooltip';
@@ -65,6 +67,11 @@ const Grid = styled.div`
   grid-template-rows: repeat(3, 100px);
 `;
 
+const logos = {
+  light: AGPLLogoLight,
+  dark: AGPLLogoDark,
+};
+
 export const LongContent = () => {
   const theme = useTheme();
   return (
@@ -92,7 +99,7 @@ export const LongContent = () => {
       </P>
       <P>
         <div style={{ float: 'left', margin: '0 10px 10px 0' }}>
-          <img src={logos.oss[theme.type]} style={{ float: 'left' }} />
+          <img src={logos[theme.type]} style={{ float: 'left' }} />
         </div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim

web/packages/shared/components/ToolTip/ToolTip.tsx → web/packages/design/src/ToolTip/ToolTip.tsx

@@ -46,15 +46,15 @@ export const ToolTipInfo: React.FC<
   kind = 'info',
 }) => {
   const theme = useTheme();
-  const [anchorEl, setAnchorEl] = useState();
+  const [anchorEl, setAnchorEl] = useState<Element>();
   const open = Boolean(anchorEl);
 
-  function handlePopoverOpen(event) {
+  function handlePopoverOpen(event: React.MouseEvent) {
     setAnchorEl(event.currentTarget);
   }
 
   function handlePopoverClose() {
-    setAnchorEl(null);
+    setAnchorEl(undefined);
   }
 
   const triggerOnHoverProps = {
@@ -121,8 +121,6 @@ const ToolTipIcon = ({
       return <WarningIcon $muteIconColor={muteIconColor} size="medium" />;
     case 'error':
       return <ErrorIcon $muteIconColor={muteIconColor} size="medium" />;
-    default:
-      kind satisfies never;
   }
 };
 

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

@@ -0,0 +1,20 @@
+/**
+ * Teleport
+ * Copyright (C) 2023  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 { ToolTipInfo } from './ToolTip';
+export { HoverTooltip } from './HoverTooltip';

web/packages/shared/components/AccessRequests/AccessDuration/AccessDurationRequest.tsx

@@ -19,8 +19,9 @@
 import React from 'react';
 import { Flex, LabelInput, Text } from 'design';
 
+import { ToolTipInfo } from 'design/ToolTip';
+
 import Select, { Option } from 'shared/components/Select';
-import { ToolTipInfo } from 'shared/components/ToolTip';
 
 export function AccessDurationRequest({
   maxDuration,

web/packages/shared/components/AccessRequests/AccessDuration/AccessDurationReview.tsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import { Flex, Text } from 'design';
 
-import { ToolTipInfo } from 'shared/components/ToolTip';
+import { ToolTipInfo } from 'design/ToolTip';
 
 import { AccessRequest } from 'shared/services/accessRequests';
 

web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/AdditionalOptions.tsx

@@ -20,8 +20,9 @@ import React, { useState } from 'react';
 import { Flex, Text, ButtonIcon, Box, LabelInput } from 'design';
 import * as Icon from 'design/Icon';
 
+import { ToolTipInfo } from 'design/ToolTip';
+
 import Select, { Option } from 'shared/components/Select';
-import { ToolTipInfo } from 'shared/components/ToolTip';
 
 import { AccessRequest } from 'shared/services/accessRequests';
 

web/packages/shared/components/AccessRequests/NewRequest/RequestCheckout/RequestCheckout.tsx

@@ -39,6 +39,8 @@ import { ArrowBack, ChevronDown, ChevronRight, Warning } from 'design/Icon';
 import Table, { Cell } from 'design/DataTable';
 import { Danger } from 'design/Alert';
 
+import { HoverTooltip } from 'design/ToolTip';
+
 import Validation, { useRule, Validator } from 'shared/components/Validation';
 import { Attempt } from 'shared/hooks/useAttemptNext';
 import { pluralize } from 'shared/utils/text';
@@ -47,7 +49,6 @@ import { FieldCheckbox } from 'shared/components/FieldCheckbox';
 import { mergeRefs } from 'shared/libs/mergeRefs';
 import { TextSelectCopyMulti } from 'shared/components/TextSelectCopy';
 import { RequestableResourceKind } from 'shared/components/AccessRequests/NewRequest/resource';
-import { HoverTooltip } from 'shared/components/ToolTip';
 
 import { CreateRequest } from '../../Shared/types';
 import { AssumeStartTime } from '../../AssumeStartTime/AssumeStartTime';

web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx

@@ -24,11 +24,12 @@ import { ClickableLabelCell, Cell } from 'design/DataTable';
 
 import { App } from 'teleport/services/apps';
 
+import { ToolTipInfo } from 'design/ToolTip';
+
 import Select, {
   Option as BaseOption,
   CustomSelectComponentProps,
 } from 'shared/components/Select';
-import { ToolTipInfo } from 'shared/components/ToolTip';
 
 import { ResourceMap, RequestableResourceKind } from '../resource';
 

web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestReview/RequestReview.tsx

@@ -22,12 +22,13 @@ import { ButtonPrimary, Text, Box, Alert, Flex, Label, H3 } from 'design';
 import { Warning } from 'design/Icon';
 import { Radio } from 'design/RadioGroup';
 
+import { HoverTooltip } from 'design/ToolTip';
+
 import Validation, { Validator } from 'shared/components/Validation';
 import { FieldSelect } from 'shared/components/FieldSelect';
 import { Option } from 'shared/components/Select';
 import { Attempt } from 'shared/hooks/useAsync';
 import { requiredField } from 'shared/components/Validation/rules';
-import { HoverTooltip } from 'shared/components/ToolTip';
 import { FieldTextArea } from 'shared/components/FieldTextArea';
 
 import { AccessRequest, RequestState } from 'shared/services/accessRequests';

web/packages/shared/components/AccessRequests/ReviewRequests/RequestView/RequestView.tsx

@@ -42,7 +42,8 @@ import { displayDateWithPrefixedTime } from 'design/datetime';
 
 import { LabelKind } from 'design/LabelState/LabelState';
 
-import { HoverTooltip } from 'shared/components/ToolTip';
+import { HoverTooltip } from 'design/ToolTip';
+
 import { hasFinished, Attempt } from 'shared/hooks/useAsync';
 
 import {

web/packages/shared/components/AccessRequests/Shared/Shared.tsx

@@ -21,7 +21,8 @@ import { ButtonPrimary, Text, Box, ButtonIcon, Menu } from 'design';
 import { Info } from 'design/Icon';
 import { displayDateWithPrefixedTime } from 'design/datetime';
 
-import { HoverTooltip } from 'shared/components/ToolTip';
+import { HoverTooltip } from 'design/ToolTip';
+
 import { AccessRequest } from 'shared/services/accessRequests';
 
 export function PromotedMessage({

web/packages/shared/components/AdvancedSearchToggle/AdvancedSearchToggle.tsx

@@ -22,7 +22,7 @@ import { Text, Toggle, Link, Flex, H2 } from 'design';
 
 import { P } from 'design/Text/Text';
 
-import { ToolTipInfo } from 'shared/components/ToolTip';
+import { ToolTipInfo } from 'design/ToolTip';
 
 const GUIDE_URL =
   'https://goteleport.com/docs/reference/predicate-language/#resource-filtering';

web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx

@@ -24,7 +24,7 @@ import { ChevronDown } from 'design/Icon';
 import cfg from 'teleport/config';
 import { Cluster } from 'teleport/services/clusters';
 
-import { HoverTooltip } from 'shared/components/ToolTip';
+import { HoverTooltip } from 'design/ToolTip';
 
 export interface ClusterDropdownProps {
   clusterLoader: ClusterLoader;

web/packages/shared/components/Controls/MultiselectMenu.tsx

@@ -29,7 +29,7 @@ import {
 import { ChevronDown } from 'design/Icon';
 import { CheckboxInput } from 'design/Checkbox';
 
-import { HoverTooltip } from 'shared/components/ToolTip';
+import { HoverTooltip } from 'design/ToolTip';
 
 type MultiselectMenuProps<T> = {
   options: {

web/packages/shared/components/Controls/SortMenu.tsx

@@ -20,7 +20,7 @@ import React, { useState } from 'react';
 import { ButtonBorder, Flex, Menu, MenuItem } from 'design';
 import { ArrowDown, ArrowUp } from 'design/Icon';
 
-import { HoverTooltip } from 'shared/components/ToolTip';
+import { HoverTooltip } from 'design/ToolTip';
 
 type SortMenuSort<T extends object> = {
   fieldName: Exclude<keyof T, symbol | number>;

web/packages/shared/components/Controls/ViewModeSwitch.tsx

@@ -22,7 +22,7 @@ import { Rows, SquaresFour } from 'design/Icon';
 
 import { ViewMode } from 'gen-proto-ts/teleport/userpreferences/v1/unified_resource_preferences_pb';
 
-import { HoverTooltip } from 'shared/components/ToolTip';
+import { HoverTooltip } from 'design/ToolTip';
 
 export const ViewModeSwitch = ({
   currentViewMode,

web/packages/shared/components/FieldInput/FieldInput.tsx

@@ -28,8 +28,9 @@ import styled, { useTheme } from 'styled-components';
 import { IconProps } from 'design/Icon/Icon';
 import { InputMode, InputSize, InputType } from 'design/Input';
 
+import { ToolTipInfo } from 'design/ToolTip';
+
 import { useRule } from 'shared/components/Validation';
-import { ToolTipInfo } from 'shared/components/ToolTip';
 
 const FieldInput = forwardRef<HTMLInputElement, FieldInputProps>(
   (

web/packages/shared/components/FieldMultiInput/FieldMultiInput.story.tsx

@@ -20,6 +20,12 @@ import React, { useState } from 'react';
 
 import Box from 'design/Box';
 
+import { Button } from 'design/Button';
+
+import Validation from 'shared/components/Validation';
+
+import { arrayOf, requiredField } from '../Validation/rules';
+
 import { FieldMultiInput } from './FieldMultiInput';
 
 export default {
@@ -30,7 +36,21 @@ export function Story() {
   const [items, setItems] = useState([]);
   return (
     <Box width="500px">
-      <FieldMultiInput label="Some items" value={items} onChange={setItems} />
+      <Validation>
+        {({ validator }) => (
+          <>
+            <FieldMultiInput
+              label="Some items"
+              value={items}
+              onChange={setItems}
+              rule={arrayOf(requiredField('required'))}
+            />
+            <Button mt={3} onClick={() => validator.validate()}>
+              Validate
+            </Button>
+          </>
+        )}
+      </Validation>
     </Box>
   );
 }

web/packages/shared/components/FieldMultiInput/FieldMultiInput.test.tsx

@@ -19,20 +19,36 @@
 import userEvent from '@testing-library/user-event';
 import React, { useState } from 'react';
 
-import { render, screen } from 'design/utils/testing';
+import { act, render, screen } from 'design/utils/testing';
+
+import Validation, { Validator } from 'shared/components/Validation';
+
+import { arrayOf, requiredField } from '../Validation/rules';
 
 import { FieldMultiInput, FieldMultiInputProps } from './FieldMultiInput';
 
 const TestFieldMultiInput = ({
   onChange,
+  refValidator,
   ...rest
-}: Partial<FieldMultiInputProps>) => {
+}: Partial<FieldMultiInputProps> & {
+  refValidator?: (v: Validator) => void;
+}) => {
   const [items, setItems] = useState<string[]>([]);
   const handleChange = (it: string[]) => {
     setItems(it);
     onChange?.(it);
   };
-  return <FieldMultiInput value={items} onChange={handleChange} {...rest} />;
+  return (
+    <Validation>
+      {({ validator }) => {
+        refValidator?.(validator);
+        return (
+          <FieldMultiInput value={items} onChange={handleChange} {...rest} />
+        );
+      }}
+    </Validation>
+  );
 };
 
 test('adding, editing, and removing items', async () => {
@@ -69,3 +85,35 @@ test('keyboard handling', async () => {
   await user.keyboard('{Enter}bananas');
   expect(onChange).toHaveBeenLastCalledWith(['apples', 'bananas', 'oranges']);
 });
+
+test('validation', async () => {
+  const user = userEvent.setup();
+  let validator: Validator;
+  render(
+    <TestFieldMultiInput
+      refValidator={v => {
+        validator = v;
+      }}
+      rule={arrayOf(requiredField('required'))}
+    />
+  );
+
+  act(() => validator.validate());
+  expect(validator.state.valid).toBe(true);
+  expect(screen.getByRole('textbox')).toHaveAccessibleDescription('');
+
+  await user.click(screen.getByRole('button', { name: 'Add More' }));
+  await user.type(screen.getAllByRole('textbox')[1], 'foo');
+  act(() => validator.validate());
+  expect(validator.state.valid).toBe(false);
+  expect(screen.getAllByRole('textbox')[0]).toHaveAccessibleDescription(
+    'required'
+  );
+  expect(screen.getAllByRole('textbox')[1]).toHaveAccessibleDescription('');
+
+  await user.type(screen.getAllByRole('textbox')[0], 'foo');
+  act(() => validator.validate());
+  expect(validator.state.valid).toBe(true);
+  expect(screen.getAllByRole('textbox')[0]).toHaveAccessibleDescription('');
+  expect(screen.getAllByRole('textbox')[1]).toHaveAccessibleDescription('');
+});