refactor: [M3-8125] Remove and Prevent tooltip disableInteractive (li…

…node#10501) * remove and prevent tooltip disableInteractive * Added changeset: Remove and Prevent tooltip disableInteractive * feedback @mjac0bs
cliu-akamai · May 22, 2024 · 0d03587 · 0d03587
1 parent b774f62
commit 0d03587
Show file tree

Hide file tree

Showing 25 changed files with 16 additions and 76 deletions.
diff --git a/packages/manager/.changeset/pr-10501-tech-stories-1716324364842.md b/packages/manager/.changeset/pr-10501-tech-stories-1716324364842.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Make all tooltips Interactive and prevent `disableInteractive` for future usage ([#10501](https://github.com/linode/manager/pull/10501))
diff --git a/packages/manager/src/components/AccessPanel/AccessPanel.tsx b/packages/manager/src/components/AccessPanel/AccessPanel.tsx
@@ -56,7 +56,6 @@ interface Props {
   setAuthorizedUsers?: (usernames: string[]) => void;
   small?: boolean;
   toggleDiskEncryptionEnabled?: () => void;
-  tooltipInteractive?: boolean;
 }
 
 export const AccessPanel = (props: Props) => {
@@ -79,7 +78,6 @@ export const AccessPanel = (props: Props) => {
     selectedRegion,
     setAuthorizedUsers,
     toggleDiskEncryptionEnabled,
-    tooltipInteractive,
   } = props;
 
   const { classes, cx } = useStyles();
@@ -156,7 +154,6 @@ export const AccessPanel = (props: Props) => {
           onChange={handleChange}
           placeholder={placeholder || 'Enter a password.'}
           required={required}
-          tooltipInteractive={tooltipInteractive}
           value={password || ''}
         />
       </React.Suspense>

diff --git a/packages/manager/src/components/BackupStatus/BackupStatus.tsx b/packages/manager/src/components/BackupStatus/BackupStatus.tsx
@@ -114,7 +114,6 @@ const BackupStatus = (props: Props) => {
             padding: 0,
           }}
           classes={{ tooltip: classes.tooltip }}
-          interactive
           status="help"
           text={backupsUnavailableMessage}
         />

diff --git a/packages/manager/src/components/Checkbox.tsx b/packages/manager/src/components/Checkbox.tsx
@@ -5,8 +5,8 @@ import * as React from 'react';
 
 import CheckboxIcon from 'src/assets/icons/checkbox.svg';
 import CheckboxCheckedIcon from 'src/assets/icons/checkboxChecked.svg';
-import { TooltipIcon } from 'src/components/TooltipIcon';
 import { FormControlLabel } from 'src/components/FormControlLabel';
+import { TooltipIcon } from 'src/components/TooltipIcon';
 
 interface Props extends CheckboxProps {
   /**
@@ -17,11 +17,6 @@ interface Props extends CheckboxProps {
    * Renders a `FormControlLabel` that controls the underlying Checkbox with a label of `text`
    */
   text?: JSX.Element | string;
-  /**
-   * Whether or not the tooltip is interactive
-   * @default false
-   */
-  toolTipInteractive?: boolean;
   /**
    * Renders a tooltip to the right of the Checkbox
    */
@@ -44,7 +39,7 @@ interface Props extends CheckboxProps {
  * - If the user clicks the Back button, any changes made to checkboxes should be discarded and the original settings reinstated.
  */
 export const Checkbox = (props: Props) => {
-  const { sxFormLabel, text, toolTipInteractive, toolTipText, ...rest } = props;
+  const { sxFormLabel, text, toolTipText, ...rest } = props;
 
   const BaseCheckbox = (
     <StyledCheckbox
@@ -69,13 +64,7 @@ export const Checkbox = (props: Props) => {
   return (
     <>
       {CheckboxComponent}
-      {toolTipText ? (
-        <TooltipIcon
-          interactive={toolTipInteractive}
-          status="help"
-          text={toolTipText}
-        />
-      ) : null}
+      {toolTipText ? <TooltipIcon status="help" text={toolTipText} /> : null}
     </>
   );
 };

diff --git a/packages/manager/src/components/PasswordInput/PasswordInput.tsx b/packages/manager/src/components/PasswordInput/PasswordInput.tsx
@@ -19,7 +19,6 @@ const PasswordInput = (props: Props) => {
     hideStrengthLabel,
     hideValidation,
     required,
-    tooltipInteractive,
     value,
     ...rest
   } = props;
@@ -33,7 +32,6 @@ const PasswordInput = (props: Props) => {
           {...rest}
           fullWidth
           required={required}
-          tooltipInteractive={tooltipInteractive}
           tooltipText={disabledReason}
           value={value}
         />

diff --git a/packages/manager/src/components/TextField.tsx b/packages/manager/src/components/TextField.tsx
@@ -157,7 +157,6 @@ interface LabelToolTipProps {
 
 interface InputToolTipProps {
   tooltipClasses?: string;
-  tooltipInteractive?: boolean;
   tooltipOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   tooltipPosition?: TooltipProps['placement'];
   tooltipText?: JSX.Element | string;
@@ -251,7 +250,6 @@ export const TextField = (props: TextFieldProps) => {
     optional,
     required,
     tooltipClasses,
-    tooltipInteractive,
     tooltipOnMouseEnter,
     tooltipPosition,
     tooltipText,
@@ -484,7 +482,6 @@ export const TextField = (props: TextFieldProps) => {
               padding: '6px',
             }}
             classes={{ popper: tooltipClasses }}
-            interactive={tooltipInteractive}
             onMouseEnter={tooltipOnMouseEnter}
             status="help"
             text={tooltipText}

diff --git a/packages/manager/src/components/Toggle/Toggle.stories.tsx b/packages/manager/src/components/Toggle/Toggle.stories.tsx
@@ -11,12 +11,6 @@ export const Default: StoryObj<ToggleProps> = {
   render: (args) => <Toggle {...args} tooltipText={EXAMPLE_TEXT} />,
 };
 
-export const WithInteractiveTooltip: StoryObj<ToggleProps> = {
-  render: (args) => (
-    <Toggle {...args} interactive={true} tooltipText={EXAMPLE_TEXT} />
-  ),
-};
-
 const meta: Meta<ToggleProps> = {
   args: {
     disabled: false,

diff --git a/packages/manager/src/components/Toggle/Toggle.test.tsx b/packages/manager/src/components/Toggle/Toggle.test.tsx
@@ -13,7 +13,7 @@ describe('Toggle component', () => {
   });
   it('should render a tooltip button', async () => {
     const screen = renderWithTheme(
-      <Toggle interactive={true} tooltipText={'some tooltip text'} />
+      <Toggle tooltipText={'some tooltip text'} />
     );
     const tooltipButton = screen.getByRole('button');
     expect(tooltipButton).toBeInTheDocument();

diff --git a/packages/manager/src/components/Toggle/Toggle.tsx b/packages/manager/src/components/Toggle/Toggle.tsx
@@ -6,10 +6,6 @@ import ToggleOn from 'src/assets/icons/toggleOn.svg';
 import { TooltipIcon } from 'src/components/TooltipIcon';
 
 export interface ToggleProps extends SwitchProps {
-  /**
-   * Makes a tooltip interactive (meaning the tooltip will not close when the user hovers over the tooltip). Note that in order for the tooltip to show up, tooltipText must be passed in as a prop.
-   */
-  interactive?: boolean;
   /**
    * Content to display inside an optional tooltip.
    */
@@ -28,7 +24,7 @@ export interface ToggleProps extends SwitchProps {
  * > **Note:** Do not use toggles in long forms where other types of form fields are present, and users will need to click a Submit button for other changes to take effect. This scenario confuses users because they can’t be sure whether their toggle choice will take immediate effect.
  */
 export const Toggle = (props: ToggleProps) => {
-  const { interactive, tooltipText, ...rest } = props;
+  const { tooltipText, ...rest } = props;
 
   return (
     <React.Fragment>
@@ -39,13 +35,7 @@ export const Toggle = (props: ToggleProps) => {
         icon={<ToggleOff />}
         {...rest}
       />
-      {tooltipText && (
-        <TooltipIcon
-          interactive={interactive}
-          status="help"
-          text={tooltipText}
-        />
-      )}
+      {tooltipText && <TooltipIcon status="help" text={tooltipText} />}
     </React.Fragment>
   );
 };
diff --git a/packages/manager/src/components/TooltipIcon.tsx b/packages/manager/src/components/TooltipIcon.tsx
@@ -25,7 +25,10 @@ interface EnhancedTooltipProps extends TooltipProps {
 }
 
 export interface TooltipIconProps
-  extends Omit<TooltipProps, 'children' | 'leaveDelay' | 'title'> {
+  extends Omit<
+    TooltipProps,
+    'children' | 'disableInteractive' | 'leaveDelay' | 'title'
+  > {
   /**
    * An optional className that does absolutely nothing
    */
@@ -35,11 +38,6 @@ export interface TooltipIconProps
    * @todo this seems like a flaw... passing an icon should not require `status` to be `other`
    */
   icon?: JSX.Element;
-  /**
-   * Makes the tooltip interactive (stays open when cursor is over tooltip)
-   * @default false
-   */
-  interactive?: boolean;
   /**
    * Enables a leaveDelay of 3000ms
    * @default false
@@ -92,7 +90,6 @@ export const TooltipIcon = (props: TooltipIconProps) => {
   const {
     classes,
     icon,
-    interactive,
     leaveDelay,
     status,
     sx,
@@ -155,7 +152,6 @@ export const TooltipIcon = (props: TooltipIconProps) => {
       classes={classes}
       componentsProps={props.componentsProps}
       data-qa-help-tooltip
-      disableInteractive={!interactive}
       enterTouchDelay={0}
       leaveDelay={leaveDelay ? 3000 : undefined}
       leaveTouchDelay={5000}

diff --git a/...ages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx b/...ages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/MaintenanceWindow.tsx
@@ -269,7 +269,6 @@ export const MaintenanceWindow = (props: Props) => {
                       your timezone settings.
                     </Typography>
                   }
-                  interactive
                   status="help"
                 />
               </div>

diff --git a/packages/manager/src/features/Images/ImageUpload.tsx b/packages/manager/src/features/Images/ImageUpload.tsx
@@ -261,7 +261,6 @@ export const ImageUpload: React.FC<Props> = (props) => {
                 checked={isCloudInit}
                 onChange={changeIsCloudInit}
                 text="This image is cloud-init compatible"
-                toolTipInteractive
                 toolTipText={cloudInitTooltipMessage}
               />
             </div>

diff --git a/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx b/packages/manager/src/features/Images/ImagesCreate/CreateImageTab.tsx
@@ -238,7 +238,6 @@ export const CreateImageTab = () => {
                               </Link>
                             </Typography>
                           }
-                          interactive
                           status="help"
                         />
                       </>

diff --git a/...ures/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx b/...ures/Linodes/LinodeCreatev2/Tabs/StackScripts/UserDefinedFields/UserDefinedFieldInput.tsx
@@ -135,7 +135,6 @@ export const UserDefinedFieldInput = ({ userDefinedField }: Props) => {
         onChange={(e) => field.onChange(e.target.value)}
         placeholder={isTokenPassword ? 'Enter your token' : 'Enter a password.'}
         required={isRequired}
-        tooltipInteractive={isTokenPassword}
         value={field.value ?? ''}
       />
     );

diff --git a/packages/manager/src/features/Linodes/LinodeCreatev2/UserData/UserDataHeading.tsx b/packages/manager/src/features/Linodes/LinodeCreatev2/UserData/UserDataHeading.tsx
@@ -41,7 +41,6 @@ export const UserDataHeading = () => {
               .
             </>
           }
-          interactive
           status="help"
           sxTooltipIcon={{ p: 0 }}
         />

diff --git a/...manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx b/...manager/src/features/Linodes/LinodesCreate/UserDataAccordion/UserDataAccordionHeading.tsx
@@ -38,7 +38,6 @@ export const UserDataAccordionHeading = (props: Props) => {
               </Link>
             </>
           }
-          interactive
           status="help"
           sxTooltipIcon={{ alignItems: 'baseline', padding: '0 8px' }}
         />

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx
@@ -959,7 +959,6 @@ export const LinodeConfigDialog = (props: Props) => {
                     paddingBottom: 0,
                     paddingTop: 0,
                   }}
-                  interactive
                   status="help"
                   sx={{ tooltip: { maxWidth: 350 } }}
                   text={networkInterfacesHelperText}
@@ -1126,7 +1125,6 @@ export const LinodeConfigDialog = (props: Props) => {
                         }
                         checked={values.helpers.network}
                         disabled={isReadOnly}
-                        interactive={true}
                         onChange={formik.handleChange}
                       />
                     }

diff --git a/...ger/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx b/...ger/src/features/Linodes/LinodesDetail/LinodeResize/LinodeResizeUnifiedMigrationPanel.tsx
@@ -81,7 +81,6 @@ export const UnifiedMigrationPanel = (props: Props) => {
                   )}
                 </>
               }
-              interactive
               status="help"
               tooltipPosition="right"
               width={[theme.breakpoints.up('sm')] ? 375 : 300}
@@ -111,7 +110,6 @@ export const UnifiedMigrationPanel = (props: Props) => {
                   </Link>
                 </>
               }
-              interactive
               status="help"
               tooltipPosition="right"
               width={[theme.breakpoints.up('sm')] ? 450 : 300}

diff --git a/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx b/packages/manager/src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow.tsx
@@ -132,7 +132,6 @@ export const LinodeRow = (props: Props) => {
           <div style={{ alignItems: 'center', display: 'flex' }}>
             <strong>Maintenance Scheduled</strong>
             <TooltipIcon
-              interactive
               status="help"
               sx={{ tooltip: { maxWidth: 300 } }}
               text={<MaintenanceText />}

diff --git a/packages/manager/src/features/Linodes/PublicIpsUnassignedTooltip.tsx b/packages/manager/src/features/Linodes/PublicIpsUnassignedTooltip.tsx
@@ -23,7 +23,6 @@ export const PublicIpsUnassignedTooltip = (
         .
       </Typography>
     }
-    interactive
     status="help"
     sxTooltipIcon={sxTooltipIcon}
   />

diff --git a/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx b/packages/manager/src/features/Profile/DisplaySettings/DisplaySettings.tsx
@@ -103,7 +103,6 @@ export const DisplaySettings = () => {
                     marginTop: '-2px',
                     padding: 0,
                   }}
-                  interactive
                   status="help"
                   text={tooltipIconText}
                 />

diff --git a/...s/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedText.tsx b/...s/manager/src/features/StackScripts/UserDefinedFieldsPanel/FieldTypes/UserDefinedText.tsx
@@ -14,7 +14,6 @@ interface Props {
   isPassword?: boolean;
   placeholder?: string;
   tooltip?: JSX.Element;
-  tooltipInteractive?: boolean;
   updateFormState: (key: string, value: any) => void;
   value: string;
 }
@@ -41,14 +40,7 @@ class UserDefinedText extends React.Component<Props, {}> {
   };
 
   renderPasswordField = () => {
-    const {
-      error,
-      field,
-      isOptional,
-      placeholder,
-      tooltip,
-      tooltipInteractive,
-    } = this.props;
+    const { error, field, isOptional, placeholder, tooltip } = this.props;
 
     return (
       <StyledAccessPanel
@@ -61,7 +53,6 @@ class UserDefinedText extends React.Component<Props, {}> {
         password={this.props.value}
         placeholder={placeholder}
         required={!isOptional}
-        tooltipInteractive={tooltipInteractive}
       />
     );
   };

diff --git a/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx b/packages/manager/src/features/StackScripts/UserDefinedFieldsPanel/UserDefinedFieldsPanel.tsx
@@ -102,7 +102,6 @@ const renderField = (
           isOptional={isOptional}
           isPassword={true}
           placeholder={isTokenPassword ? 'Enter your token' : field.example}
-          tooltipInteractive={isTokenPassword}
           updateFor={[field.label, udf_data[field.name], error]}
           updateFormState={handleChange}
           /**

diff --git a/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx b/packages/manager/src/features/VPCs/VPCDetail/AssignIPRanges.tsx
@@ -54,7 +54,6 @@ export const AssignIPRanges = (props: Props) => {
               marginLeft: theme.spacing(0.5),
               padding: theme.spacing(0.5),
             }}
-            interactive
             status="help"
             text={IPv4RangesDescriptionJSX}
           />

diff --git a/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx b/packages/manager/src/features/VPCs/VPCDetail/SubnetLinodeRow.tsx
@@ -148,7 +148,6 @@ export const SubnetLinodeRow = (props: Props) => {
           </Typography>
         }
         icon={<StyledWarningIcon />}
-        interactive
         status="other"
         sxTooltipIcon={{ paddingLeft: 0 }}
       />