Merge branch 'bl-nero/tooltips' into bl-nero/slidetabs

gravitational · Dec 2, 2024 · cbda4b7 · cbda4b7
2 parents d4c6ce1 + 0f803c3
commit cbda4b7
Show file tree

Hide file tree

Showing 29 changed files with 87 additions and 87 deletions.
diff --git a/...ages/design/src/Tooltip/Tooltip.story.tsx → .../design/src/Tooltip/IconTooltip.story.tsx b/...ages/design/src/Tooltip/Tooltip.story.tsx → .../design/src/Tooltip/IconTooltip.story.tsx
@@ -25,7 +25,7 @@ import { P } from 'design/Text/Text';
 import AGPLLogoLight from 'design/assets/images/agpl-light.svg';
 import AGPLLogoDark from 'design/assets/images/agpl-dark.svg';
 
-import { TooltipInfo } from './Tooltip';
+import { IconTooltip } from './IconTooltip';
 import { HoverTooltip } from './HoverTooltip';
 
 export default {
@@ -38,25 +38,25 @@ export const ShortContent = () => (
       <span css={{ marginRight: '4px', verticalAlign: 'middle' }}>
         Hover the icon
       </span>
-      <TooltipInfo position="bottom">"some popover content"</TooltipInfo>
+      <IconTooltip position="bottom">"some popover content"</IconTooltip>
     </div>
     <div style={{ gridColumn: '1/2' }}>
       <span css={{ marginRight: '4px', verticalAlign: 'middle' }}>
         Hover the icon
       </span>
-      <TooltipInfo position="right">"some popover content"</TooltipInfo>
+      <IconTooltip position="right">"some popover content"</IconTooltip>
     </div>
     <div style={{ gridColumn: '3/4' }}>
       <span css={{ marginRight: '4px', verticalAlign: 'middle' }}>
         Hover the icon
       </span>
-      <TooltipInfo position="left">"some popover content"</TooltipInfo>
+      <IconTooltip position="left">"some popover content"</IconTooltip>
     </div>
     <div style={{ gridColumn: '2/3' }}>
       <span css={{ marginRight: '4px', verticalAlign: 'middle' }}>
         Hover the icon
       </span>
-      <TooltipInfo position="top">"some popover content"</TooltipInfo>
+      <IconTooltip position="top">"some popover content"</IconTooltip>
     </div>
   </Grid>
 );
@@ -78,7 +78,7 @@ export const LongContent = () => {
     <>
       <Flex alignItems="center" mb={3}>
         <Text mr={1}>Hover the icon</Text>
-        <TooltipInfo>
+        <IconTooltip>
           <P>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
@@ -91,7 +91,7 @@ export const LongContent = () => {
             cupidatat non proident, sunt in culpa qui officia deserunt mollit
             anim id est laborum.
           </P>
-        </TooltipInfo>
+        </IconTooltip>
       </Flex>
       <P>
         Here's some content that shouldn't interfere with the semi-transparent
@@ -120,7 +120,7 @@ export const WithMutedIconColor = () => (
     <span css={{ marginRight: '4px', verticalAlign: 'middle' }}>
       Hover the icon
     </span>
-    <TooltipInfo muteIconColor>"some popover content"</TooltipInfo>
+    <IconTooltip muteIconColor>"some popover content"</IconTooltip>
   </>
 );
 
@@ -129,7 +129,7 @@ export const WithKindWarning = () => (
     <span css={{ marginRight: '4px', verticalAlign: 'middle' }}>
       Hover the icon
     </span>
-    <TooltipInfo kind="warning">"some popover content"</TooltipInfo>
+    <IconTooltip kind="warning">"some popover content"</IconTooltip>
   </>
 );
 
@@ -138,7 +138,7 @@ export const WithKindError = () => (
     <span css={{ marginRight: '4px', verticalAlign: 'middle' }}>
       Hover the icon
     </span>
-    <TooltipInfo kind="error">"some popover content"</TooltipInfo>
+    <IconTooltip kind="error">"some popover content"</IconTooltip>
   </>
 );
 

diff --git a/web/packages/design/src/Tooltip/Tooltip.tsx → ...ckages/design/src/Tooltip/IconTooltip.tsx b/web/packages/design/src/Tooltip/Tooltip.tsx → ...ckages/design/src/Tooltip/IconTooltip.tsx
@@ -27,7 +27,7 @@ import { anchorOriginForPosition, transformOriginForPosition } from './shared';
 
 type ToolTipKind = 'info' | 'warning' | 'error';
 
-export const TooltipInfo: React.FC<
+export const IconTooltip: React.FC<
   PropsWithChildren<{
     trigger?: 'click' | 'hover';
     position?: Position;

diff --git a/web/packages/design/src/Tooltip/index.ts b/web/packages/design/src/Tooltip/index.ts
@@ -16,5 +16,5 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { TooltipInfo } from './Tooltip';
+export { IconTooltip } from './IconTooltip';
 export { HoverTooltip } from './HoverTooltip';
diff --git a/web/packages/shared/components/AccessRequests/AccessDuration/AccessDurationRequest.tsx b/web/packages/shared/components/AccessRequests/AccessDuration/AccessDurationRequest.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { Flex, LabelInput, Text } from 'design';
 
-import { TooltipInfo } from 'design/Tooltip';
+import { IconTooltip } from 'design/Tooltip';
 
 import Select, { Option } from 'shared/components/Select';
 
@@ -36,11 +36,11 @@ export function AccessDurationRequest({
     <LabelInput color="text.slightlyMuted">
       <Flex alignItems="center">
         <Text mr={1}>Access Duration</Text>
-        <TooltipInfo>
+        <IconTooltip>
           How long you would be given elevated privileges. Note that the time it
           takes to approve this request will be subtracted from the duration you
           requested.
-        </TooltipInfo>
+        </IconTooltip>
       </Flex>
       <Select
         options={maxDurationOptions}

diff --git a/web/packages/shared/components/AccessRequests/AccessDuration/AccessDurationReview.tsx b/web/packages/shared/components/AccessRequests/AccessDuration/AccessDurationReview.tsx
@@ -19,7 +19,7 @@
 import React from 'react';
 import { Flex, Text } from 'design';
 
-import { TooltipInfo } from 'design/Tooltip';
+import { IconTooltip } from 'design/Tooltip';
 
 import { AccessRequest } from 'shared/services/accessRequests';
 
@@ -41,9 +41,9 @@ export function AccessDurationReview({
           end: accessRequest.expires,
         })}
       </Text>
-      <TooltipInfo>
+      <IconTooltip>
         How long the access will be granted for after approval.
-      </TooltipInfo>
+      </IconTooltip>
     </Flex>
   );
 }
diff --git a/...ackages/shared/components/AccessRequests/NewRequest/RequestCheckout/AdditionalOptions.tsx b/...ackages/shared/components/AccessRequests/NewRequest/RequestCheckout/AdditionalOptions.tsx
@@ -20,7 +20,7 @@ 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 { IconTooltip } from 'design/Tooltip';
 
 import Select, { Option } from 'shared/components/Select';
 
@@ -73,10 +73,10 @@ export function AdditionalOptions({
             <LabelInput color="text.slightlyMuted" mb={3}>
               <Flex alignItems="center">
                 <Text mr={1}>Request expires if not reviewed in</Text>
-                <TooltipInfo>
+                <IconTooltip>
                   The request TTL which is the amount of time this request will
                   be in the PENDING state before it expires.
-                </TooltipInfo>
+                </IconTooltip>
               </Flex>
               <Select
                 options={pendingRequestTtlOptions}
@@ -90,10 +90,10 @@ export function AdditionalOptions({
           <LabelInput color="text.slightlyMuted">
             <Flex alignItems="center">
               <Text mr={1}>Access Request Lifetime</Text>
-              <TooltipInfo>
+              <IconTooltip>
                 The max duration of an access request, starting from its
                 creation, until it expires.
-              </TooltipInfo>
+              </IconTooltip>
             </Flex>
             <Text>
               {getFormattedDurationTxt({

diff --git a/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx b/web/packages/shared/components/AccessRequests/NewRequest/ResourceList/Apps.tsx
@@ -24,7 +24,7 @@ import { ClickableLabelCell, Cell } from 'design/DataTable';
 
 import { App } from 'teleport/services/apps';
 
-import { TooltipInfo } from 'design/Tooltip';
+import { IconTooltip } from 'design/Tooltip';
 
 import Select, {
   Option as BaseOption,
@@ -231,11 +231,11 @@ function ActionCell({
         </ButtonPrimary>
       )}
       <Flex alignItems="center" justifyContent="end" mt={1}>
-        <TooltipInfo muteIconColor={true}>
+        <IconTooltip muteIconColor={true}>
           This application {agent.name} can be alternatively requested by
           members of user groups. You can alternatively select user groups
           instead to access this application.
-        </TooltipInfo>
+        </IconTooltip>
         <StyledSelect
           className={hasSelectedGroups ? 'hasSelectedGroups' : ''}
           size="small"

diff --git a/web/packages/shared/components/AdvancedSearchToggle/AdvancedSearchToggle.tsx b/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 'design/Tooltip';
+import { IconTooltip } from 'design/Tooltip';
 
 const GUIDE_URL =
   'https://goteleport.com/docs/reference/predicate-language/#resource-filtering';
@@ -44,9 +44,9 @@ export function AdvancedSearchToggle(props: {
     >
       <Toggle isToggled={props.isToggled} onToggle={props.onToggle} />
       <Text typography="body3">Advanced</Text>
-      <TooltipInfo trigger="click">
+      <IconTooltip trigger="click">
         <PredicateDocumentation />
-      </TooltipInfo>
+      </IconTooltip>
     </Flex>
   );
 }

diff --git a/web/packages/shared/components/FieldInput/FieldInput.tsx b/web/packages/shared/components/FieldInput/FieldInput.tsx
@@ -28,7 +28,7 @@ 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 { IconTooltip } from 'design/Tooltip';
 
 import { useRule } from 'shared/components/Validation';
 
@@ -114,7 +114,7 @@ const FieldInput = forwardRef<HTMLInputElement, FieldInputProps>(
                   >
                     {label}
                   </span>
-                  <TooltipInfo children={toolTipContent} />
+                  <IconTooltip children={toolTipContent} />
                 </>
               ) : (
                 <>{label}</>

diff --git a/web/packages/shared/components/FieldSelect/shared.tsx b/web/packages/shared/components/FieldSelect/shared.tsx
@@ -25,7 +25,7 @@ import LabelInput from 'design/LabelInput';
 
 import Flex from 'design/Flex';
 
-import { TooltipInfo } from 'design/Tooltip';
+import { IconTooltip } from 'design/Tooltip';
 
 import { HelperTextLine } from '../FieldInput/FieldInput';
 import { useRule } from '../Validation';
@@ -96,7 +96,7 @@ export const FieldSelectWrapper = <Opt, IsMulti extends boolean>({
           {toolTipContent ? (
             <Flex gap={1} alignItems="center">
               {label}
-              <TooltipInfo children={toolTipContent} />
+              <IconTooltip children={toolTipContent} />
             </Flex>
           ) : (
             label

diff --git a/web/packages/shared/components/FieldTextArea/FieldTextArea.tsx b/web/packages/shared/components/FieldTextArea/FieldTextArea.tsx
@@ -27,7 +27,7 @@ import { TextAreaSize } from 'design/TextArea';
 
 import { BoxProps } from 'design/Box';
 
-import { TooltipInfo } from 'design/Tooltip';
+import { IconTooltip } from 'design/Tooltip';
 
 import { useRule } from 'shared/components/Validation';
 
@@ -141,7 +141,7 @@ export const FieldTextArea = forwardRef<
                   >
                     {label}
                   </span>
-                  <TooltipInfo children={toolTipContent} />
+                  <IconTooltip children={toolTipContent} />
                 </>
               ) : (
                 <>{label}</>

diff --git a/web/packages/shared/components/ToolTip/index.ts b/web/packages/shared/components/ToolTip/index.ts
@@ -18,7 +18,7 @@
 
 export {
   /** @deprecated Use `TooltipInfo` from `design/Tooltip` */
-  TooltipInfo as ToolTipInfo,
+  IconTooltip as ToolTipInfo,
 
   /** @deprecated Use `HoverTooltip` from `design/Tooltip` */
   HoverTooltip,

diff --git a/web/packages/teleport/src/Console/DocumentKubeExec/KubeExecDataDialog.tsx b/web/packages/teleport/src/Console/DocumentKubeExec/KubeExecDataDialog.tsx
@@ -35,7 +35,7 @@ import {
 import Validation from 'shared/components/Validation';
 import FieldInput from 'shared/components/FieldInput';
 import { requiredField } from 'shared/components/Validation/rules';
-import { TooltipInfo } from 'design/Tooltip';
+import { IconTooltip } from 'design/Tooltip';
 
 type Props = {
   onClose(): void;
@@ -123,11 +123,11 @@ function KubeExecDataDialog({ onClose, onExec }: Props) {
                     <Box ml={2} mr={1}>
                       Interactive shell
                     </Box>
-                    <TooltipInfo>
+                    <IconTooltip>
                       You can start an interactive shell and have a
                       bidirectional communication with the target pod, or you
                       can run one-off command and see its output.
-                    </TooltipInfo>
+                    </IconTooltip>
                   </Toggle>
                 </Flex>
               </Box>

diff --git a/web/packages/teleport/src/Discover/AwsMangementConsole/CreateAppAccess/CreateAppAccess.tsx b/web/packages/teleport/src/Discover/AwsMangementConsole/CreateAppAccess/CreateAppAccess.tsx
@@ -21,7 +21,7 @@ import styled from 'styled-components';
 import { Box, Flex, Link, Mark, H3 } from 'design';
 import TextEditor from 'shared/components/TextEditor';
 import { Danger } from 'design/Alert';
-import { TooltipInfo } from 'design/Tooltip';
+import { IconTooltip } from 'design/Tooltip';
 import { useAsync } from 'shared/hooks/useAsync';
 
 import { P } from 'design/Text/Text';
@@ -81,7 +81,7 @@ export function CreateAppAccess() {
       <Container>
         <Flex alignItems="center" gap={1} mb={1}>
           <H3>First configure your AWS IAM permissions</H3>
-          <TooltipInfo sticky={true} maxWidth={450}>
+          <IconTooltip sticky={true} maxWidth={450}>
             The following IAM permissions will be added as an inline policy
             named <Mark>{IAM_POLICY_NAME}</Mark> to IAM role{' '}
             <Mark>{iamRoleName}</Mark>
@@ -94,7 +94,7 @@ export function CreateAppAccess() {
                 />
               </EditorWrapper>
             </Box>
-          </TooltipInfo>
+          </IconTooltip>
         </Flex>
         <P mb={2}>
           Run the command below on your{' '}

diff --git a/...packages/teleport/src/Discover/Database/DeployService/AutoDeploy/SelectSecurityGroups.tsx b/...packages/teleport/src/Discover/Database/DeployService/AutoDeploy/SelectSecurityGroups.tsx
@@ -21,7 +21,7 @@ import React, { useState, useEffect } from 'react';
 import { Text, Flex, Box, Indicator, ButtonSecondary, Subtitle3 } from 'design';
 import * as Icons from 'design/Icon';
 import { FetchStatus } from 'design/DataTable/types';
-import { HoverTooltip, TooltipInfo } from 'design/Tooltip';
+import { HoverTooltip, IconTooltip } from 'design/Tooltip';
 import useAttempt from 'shared/hooks/useAttemptNext';
 import { getErrMessage } from 'shared/utils/errorType';
 import { pluralize } from 'shared/utils/text';
@@ -126,7 +126,7 @@ export const SelectSecurityGroups = ({
     <>
       <Flex alignItems="center" gap={1} mb={2}>
         <Subtitle3>Select ECS Security Groups</Subtitle3>
-        <TooltipInfo>
+        <IconTooltip>
           <Text>
             Select ECS security group(s) based on the following requirements:
             <ul>
@@ -141,7 +141,7 @@ export const SelectSecurityGroups = ({
               </li>
             </ul>
           </Text>
-        </TooltipInfo>
+        </IconTooltip>
       </Flex>
 
       <P mb={2}>

diff --git a/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/SelectSubnetIds.tsx b/web/packages/teleport/src/Discover/Database/DeployService/AutoDeploy/SelectSubnetIds.tsx
@@ -29,7 +29,7 @@ import {
 } from 'design';
 import * as Icons from 'design/Icon';
 import { FetchStatus } from 'design/DataTable/types';
-import { HoverTooltip, TooltipInfo } from 'design/Tooltip';
+import { HoverTooltip, IconTooltip } from 'design/Tooltip';
 import { pluralize } from 'shared/utils/text';
 import useAttempt from 'shared/hooks/useAttemptNext';
 import { getErrMessage } from 'shared/utils/errorType';
@@ -121,12 +121,12 @@ export function SelectSubnetIds({
     <>
       <Flex alignItems="center" gap={1} mb={2}>
         <Subtitle3>Select ECS Subnets</Subtitle3>
-        <TooltipInfo>
+        <IconTooltip>
           <Text>
             A subnet has an outbound internet route if it has a route to an
             internet gateway or a NAT gateway in a public subnet.
           </Text>
-        </TooltipInfo>
+        </IconTooltip>
       </Flex>
 
       <Text mb={2}>