1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

refactor: improve tooltip styles after MUI update (#966)

* refactor: add missing event arg type

* refactor: fix project card popup position

* refactor: add tooltip arrows

* refactor: update snapshot

* refactor: add missing tooltips

* refactor: use a custom Autocomplete size in AutocompleteBox
This commit is contained in:
olav 2022-05-09 15:17:20 +02:00 committed by GitHub
parent 44c579f7a8
commit 9902494f58
42 changed files with 157 additions and 141 deletions

View File

@ -113,7 +113,7 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
<PermissionIconButton
permission={UPDATE_ADDON}
onClick={() => toggleAddon(addon)}
tooltip="Toggle addon"
tooltipProps={{ title: 'Toggle addon' }}
>
<ConditionallyRender
condition={addon.enabled}
@ -123,14 +123,14 @@ export const ConfiguredAddons = ({ getAddonIcon }: IConfigureAddonsProps) => {
</PermissionIconButton>
<PermissionIconButton
permission={UPDATE_ADDON}
tooltip="Edit Addon"
tooltipProps={{ title: 'Edit Addon' }}
onClick={() => navigate(`/addons/edit/${addon.id}`)}
>
<Edit />
</PermissionIconButton>
<PermissionIconButton
permission={DELETE_ADDON}
tooltip="Remove Addon"
tooltipProps={{ title: 'Remove Addon' }}
onClick={() => {
setDeletedAddon(addon);
setShowDelete(true);

View File

@ -25,6 +25,7 @@ import { useLocationSettings } from 'hooks/useLocationSettings';
import { formatDateYMD } from 'utils/formatDate';
import { ProjectsList } from './ProjectsList/ProjectsList';
import { useStyles } from './ApiTokenList.styles';
import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
interface IApiToken {
createdAt: Date;
@ -191,7 +192,7 @@ export const ApiTokenList = () => {
</Box>
</TableCell>
<TableCell className={styles.actionsContainer}>
<Tooltip title="Copy token">
<Tooltip title="Copy token" arrow>
<IconButton
onClick={() => {
copyToken(item.secret);
@ -204,7 +205,7 @@ export const ApiTokenList = () => {
<ConditionallyRender
condition={hasAccess(DELETE_API_TOKEN)}
show={
<Tooltip title="Delete token">
<Tooltip title="Delete token" arrow>
<IconButton
onClick={() => {
setDeleteToken(item);

View File

@ -37,7 +37,7 @@ export const UserToken = ({ token }: IUserTokenProps) => {
}}
>
{token}
<Tooltip title="Copy token">
<Tooltip title="Copy token" arrow>
<IconButton onClick={copyToken} size="large">
<CopyIcon />
</IconButton>

View File

@ -55,7 +55,7 @@ const RoleListItem = ({
navigate(`/admin/roles/${id}/edit`);
}}
permission={ADMIN}
tooltip="Edit role"
tooltipProps={{ title: 'Edit role' }}
>
<Edit />
</PermissionIconButton>
@ -68,7 +68,7 @@ const RoleListItem = ({
setDelDialog(true);
}}
permission={ADMIN}
tooltip="Remove role"
tooltipProps={{ title: 'Remove role' }}
>
<Delete />
</PermissionIconButton>

View File

@ -47,7 +47,7 @@ const UserInviteLink = ({ inviteLink }: IInviteLinkProps) => {
}}
>
{inviteLink}
<Tooltip title="Copy link">
<Tooltip title="Copy link" arrow>
<IconButton onClick={handleCopy} size="large">
<CopyIcon />
</IconButton>

View File

@ -124,7 +124,7 @@ export const ApplicationEdit = () => {
/>
<PermissionButton
tooltip="Delete application"
tooltipProps={{ title: 'Delete application' }}
onClick={toggleModal}
permission={UPDATE_APPLICATION}
>

View File

@ -5,13 +5,16 @@ export const useStyles = makeStyles()(theme => ({
display: 'flex',
alignItems: 'center',
borderRadius: '1rem',
'& .MuiInputLabel-root[data-shrink="false"]': {
top: 3,
},
},
icon: {
background: theme.palette.primary.main,
height: 40,
height: 48,
width: 48,
display: 'flex',
alignItems: 'center',
width: 40,
justifyContent: 'center',
paddingLeft: 6,
borderTopLeftRadius: 40,
@ -25,6 +28,7 @@ export const useStyles = makeStyles()(theme => ({
flex: 1,
},
inputRoot: {
height: 48,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
borderTopRightRadius: 50,

View File

@ -122,7 +122,7 @@ export const ConstraintAccordionEditHeader = ({
show={<p className={styles.editingBadge}>Updating...</p>}
elseShow={<p className={styles.editingBadge}>Editing</p>}
/>
<Tooltip title="Help">
<Tooltip title="Help" arrow>
<a
href="https://docs.getunleash.io/advanced/strategy_constraints"
style={{ marginLeft: 'auto' }}

View File

@ -1,5 +1,5 @@
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { Chip, useMediaQuery, IconButton } from '@mui/material';
import { Chip, useMediaQuery, IconButton, Tooltip } from '@mui/material';
import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
import { Delete, Edit } from '@mui/icons-material';
import { IConstraint } from 'interfaces/strategy';
@ -91,17 +91,21 @@ export const ConstraintAccordionViewHeader = ({
<ConditionallyRender
condition={Boolean(onEditClick)}
show={() => (
<IconButton type="button" onClick={onEditClick}>
<Edit titleAccess="Edit constraint" />
</IconButton>
<Tooltip title="Edit constraint" arrow>
<IconButton type="button" onClick={onEditClick}>
<Edit />
</IconButton>
</Tooltip>
)}
/>
<ConditionallyRender
condition={Boolean(onDeleteClick)}
show={() => (
<IconButton type="button" onClick={onDeleteClick}>
<Delete titleAccess="Delete constraint" />
</IconButton>
<Tooltip title="Delete constraint" arrow>
<IconButton type="button" onClick={onDeleteClick}>
<Delete />
</IconButton>
</Tooltip>
)}
/>
</div>

View File

@ -95,7 +95,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
>
<h2 className={styles.subtitle}>
API Command{' '}
<Tooltip title="Copy command">
<Tooltip title="Copy command" arrow>
<IconButton onClick={copyCommand} size="large">
<FileCopy className={styles.icon} />
</IconButton>
@ -128,7 +128,7 @@ const MobileGuidance = ({
<div className={styles.mobileGuidanceBgContainer}>
<MobileGuidanceBG className={styles.mobileGuidanceBackground} />
</div>
<Tooltip title="Toggle help">
<Tooltip title="Toggle help" arrow>
<IconButton
className={styles.mobileGuidanceButton}
onClick={() => setOpen(prev => !prev)}

View File

@ -3,7 +3,10 @@ import { Lock } from '@mui/icons-material';
import AccessContext from 'contexts/AccessContext';
import React, { useContext } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
import {
TooltipResolver,
ITooltipResolverProps,
} from 'component/common/TooltipResolver/TooltipResolver';
import { formatAccessText } from 'utils/formatAccessText';
import { useId } from 'hooks/useId';
@ -13,7 +16,7 @@ export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> {
disabled?: boolean;
projectId?: string;
environmentId?: string;
tooltip?: string;
tooltipProps?: Omit<ITooltipResolverProps, 'children'>;
}
const PermissionButton: React.FC<IPermissionButtonProps> = ({
@ -25,7 +28,7 @@ const PermissionButton: React.FC<IPermissionButtonProps> = ({
disabled,
projectId,
environmentId,
tooltip,
tooltipProps,
...rest
}) => {
const { hasAccess } = useContext(AccessContext);
@ -60,7 +63,11 @@ const PermissionButton: React.FC<IPermissionButtonProps> = ({
access = handleAccess();
return (
<TooltipResolver title={formatAccessText(access, tooltip)} arrow>
<TooltipResolver
{...tooltipProps}
title={formatAccessText(access, tooltipProps?.title)}
arrow
>
<span id={id}>
<Button
onClick={onClick}

View File

@ -2,21 +2,23 @@ import { IconButton, IconButtonProps } from '@mui/material';
import React, { useContext, ReactNode } from 'react';
import AccessContext from 'contexts/AccessContext';
import { Link } from 'react-router-dom';
import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
import {
TooltipResolver,
ITooltipResolverProps,
} from 'component/common/TooltipResolver/TooltipResolver';
import { formatAccessText } from 'utils/formatAccessText';
import { useId } from 'hooks/useId';
interface IPermissionIconButtonProps {
permission: string;
projectId?: string;
environmentId?: string;
className?: string;
tooltip?: string;
children?: ReactNode;
disabled?: boolean;
hidden?: boolean;
type?: 'button';
edge?: IconButtonProps['edge'];
tooltipProps?: Omit<ITooltipResolverProps, 'children'>;
}
interface IButtonProps extends IPermissionIconButtonProps {
@ -33,11 +35,10 @@ const PermissionIconButton = ({
projectId,
children,
environmentId,
tooltip,
tooltipProps,
...rest
}: IButtonProps | ILinkProps) => {
const { hasAccess } = useContext(AccessContext);
const id = useId();
let access;
if (projectId && environmentId) {
@ -49,17 +50,14 @@ const PermissionIconButton = ({
}
return (
<TooltipResolver title={formatAccessText(access, tooltip)}>
<span id={id}>
<IconButton
{...rest}
disabled={!access}
aria-labelledby={id}
size="large"
>
{children}
</IconButton>
</span>
<TooltipResolver
{...tooltipProps}
title={formatAccessText(access, tooltipProps?.title)}
arrow
>
<IconButton {...rest} disabled={!access} size="large">
{children}
</IconButton>
</TooltipResolver>
);
};

View File

@ -76,7 +76,7 @@ const Toast = ({ title, text, type, confetti }: IToast) => {
/>
</div>
</div>
<Tooltip title="Close">
<Tooltip title="Close" arrow>
<IconButton
onClick={hide}
className={styles.buttonStyle}

View File

@ -1,6 +1,6 @@
import { Tooltip, TooltipProps } from '@mui/material';
interface ITooltipResolverProps extends Omit<TooltipProps, 'title'> {
export interface ITooltipResolverProps extends Omit<TooltipProps, 'title'> {
title: string | undefined;
}
@ -14,7 +14,7 @@ export const TooltipResolver = ({
}
return (
<Tooltip {...rest} title={title}>
<Tooltip {...rest} title={title} arrow>
{children}
</Tooltip>
);

View File

@ -80,7 +80,7 @@ const ContextList: VFC = () => {
<ConditionallyRender
condition={hasAccess(UPDATE_CONTEXT_FIELD)}
show={
<Tooltip title="Edit context field">
<Tooltip title="Edit context field" arrow>
<IconButton
onClick={() =>
navigate(`/context/edit/${field.name}`)
@ -95,7 +95,7 @@ const ContextList: VFC = () => {
<ConditionallyRender
condition={hasAccess(DELETE_CONTEXT_FIELD)}
show={
<Tooltip title="Delete context field">
<Tooltip title="Delete context field" arrow>
<IconButton
aria-label="delete"
onClick={() => {
@ -118,7 +118,7 @@ const ContextList: VFC = () => {
<ConditionallyRender
condition={smallScreen}
show={
<Tooltip title="Add context type">
<Tooltip title="Add context type" arrow>
<IconButton
onClick={() => navigate('/context/create')}
size="large"

View File

@ -162,7 +162,7 @@ const EnvironmentListItem = ({
<ConditionallyRender
condition={updatePermission}
show={
<Tooltip title={`${tooltipText} environment`}>
<Tooltip title={`${tooltipText} environment`} arrow>
<IconButton
onClick={() => {
setSelectedEnv(env);
@ -178,7 +178,7 @@ const EnvironmentListItem = ({
<ConditionallyRender
condition={updatePermission}
show={
<Tooltip title="Edit environment">
<Tooltip title="Edit environment" arrow>
<IconButton
disabled={env.protected}
onClick={() => {
@ -194,7 +194,7 @@ const EnvironmentListItem = ({
<ConditionallyRender
condition={hasAccess(DELETE_ENVIRONMENT)}
show={
<Tooltip title="Delete environment">
<Tooltip title="Delete environment" arrow>
<IconButton
disabled={env.protected}
onClick={() => {

View File

@ -28,7 +28,7 @@ export const CreateFeatureButton = ({
<ConditionallyRender
condition={smallScreen}
show={
<Tooltip title="Create feature toggle">
<Tooltip title="Create feature toggle" arrow>
<IconButton
component={Link}
to={createFeature.path}

View File

@ -69,7 +69,7 @@ export const FeatureStrategyRemove = ({
disabled={disabled}
permission={DELETE_FEATURE_STRATEGY}
data-testid={STRATEGY_FORM_REMOVE_ID}
tooltip="Remove strategy"
tooltipProps={{ title: 'Remove strategy' }}
type="button"
>
<Delete />

View File

@ -59,7 +59,7 @@ export const FeatureStrategySegmentChip = ({
>
{segment.name}
</Link>
<Tooltip title={previewIconTooltip}>
<Tooltip title={previewIconTooltip} arrow>
<button
type="button"
onClick={onTogglePreview}
@ -70,7 +70,7 @@ export const FeatureStrategySegmentChip = ({
{togglePreviewIcon}
</button>
</Tooltip>
<Tooltip title="Remove segment">
<Tooltip title="Remove segment" arrow>
<button
type="button"
onClick={onRemove}

View File

@ -99,7 +99,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
themeStyles.truncate
)}
>
<Tooltip title={description || ''}>
<Tooltip title={description || ''} arrow>
<span className={themeStyles.toggleName}>
{name}&nbsp;
</span>
@ -126,7 +126,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
}
elseShow={
<>
<Tooltip title={description || ''}>
<Tooltip title={description || ''} arrow>
<span className={themeStyles.toggleName}>
{name}&nbsp;{' '}
</span>
@ -196,7 +196,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
!projectExists()
}
onClick={reviveFeature}
tooltip="Revive feature"
tooltipProps={{ title: 'Revive feature' }}
>
<Undo />
</PermissionIconButton>

View File

@ -15,6 +15,7 @@ const CreatedAt = ({ time }: ICreatedAtProps) => {
time,
locationSettings.locale
)}`}
arrow
>
<span>{formatDateYMD(time, locationSettings.locale)}</span>
</Tooltip>

View File

@ -54,7 +54,7 @@ const FeatureOverviewEnvironmentStrategy = ({
projectId={projectId}
component={Link}
to={editStrategyPath}
tooltip="Edit strategy"
tooltipProps={{ title: 'Edit strategy' }}
>
<Edit />
</PermissionIconButton>

View File

@ -48,11 +48,11 @@ const FeatureOverviewMetaData = () => {
permission={UPDATE_FEATURE}
component={Link}
to={`/projects/${projectId}/features/${featureId}/settings`}
tooltipProps={{
title: 'Edit description',
}}
>
<Edit
className={styles.editIcon}
titleAccess="Settings"
/>
<Edit className={styles.editIcon} />
</PermissionIconButton>
</div>
</span>
@ -66,7 +66,9 @@ const FeatureOverviewMetaData = () => {
permission={UPDATE_FEATURE}
component={Link}
to={`/projects/${projectId}/features/${featureId}/settings`}
tooltip="Edit description"
tooltipProps={{
title: 'Edit description',
}}
>
<Edit className={styles.editIcon} />
</PermissionIconButton>

View File

@ -34,7 +34,7 @@ export const FeatureSettingsInformation = ({
projectId={projectId}
data-loading
onClick={onEdit}
tooltip="Edit"
tooltipProps={{ title: 'Edit' }}
>
<Edit />
</PermissionIconButton>

View File

@ -132,7 +132,7 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
/>
</Grid>
<Grid item md={1}>
<Tooltip title="Remove">
<Tooltip title="Remove" arrow>
<IconButton
onClick={event => {
event.preventDefault();

View File

@ -54,7 +54,7 @@ const FeatureVariantListItem = ({
show={
<TableCell className={styles.actions}>
<div className={styles.actionsContainer}>
<Tooltip title="Edit variant">
<Tooltip title="Edit variant" arrow>
<IconButton
data-testid={'VARIANT_EDIT_BUTTON'}
onClick={() => editVariant(variant.name)}
@ -63,7 +63,7 @@ const FeatureVariantListItem = ({
<Edit />
</IconButton>
</Tooltip>
<Tooltip title="Delete variant">
<Tooltip title="Delete variant" arrow>
<IconButton
data-testid={`VARIANT_DELETE_BUTTON_${variant.name}`}
onClick={e => {

View File

@ -145,14 +145,18 @@ export const FeatureView = () => {
data-loading
component={Link}
to={`/projects/${projectId}/features/${featureId}/strategies/copy`}
tooltip="Copy feature toggle"
tooltipProps={{
title: 'Copy feature toggle',
}}
>
<FileCopy />
</PermissionIconButton>
<PermissionIconButton
permission={DELETE_FEATURE}
projectId={projectId}
tooltip="Archive feature toggle"
tooltipProps={{
title: 'Archive feature toggle',
}}
data-loading
onClick={() => setShowDelDialog(true)}
>
@ -162,7 +166,9 @@ export const FeatureView = () => {
onClick={() => setOpenStaleDialog(true)}
permission={UPDATE_FEATURE}
projectId={projectId}
tooltip="Toggle stale status"
tooltipProps={{
title: 'Toggle stale status',
}}
data-loading
>
<WatchLater />
@ -171,7 +177,7 @@ export const FeatureView = () => {
onClick={() => setOpenTagDialog(true)}
permission={UPDATE_FEATURE}
projectId={projectId}
tooltip="Add tag"
tooltipProps={{ title: 'Add tag' }}
data-loading
>
<Label />

View File

@ -136,6 +136,7 @@ const GeneralStrategy = ({
<Tooltip
title={description}
placement="right-end"
arrow
>
<FormControlLabel
label={name}

View File

@ -73,7 +73,7 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
themeStyles.contentSpacingY
)}
>
<Tooltip title="Close">
<Tooltip title="Close" arrow>
<IconButton
className={styles.close}
onClick={() => setShowFeedback(false)}

View File

@ -67,7 +67,7 @@ const Header: VFC = () => {
return (
<AppBar className={styles.header} position="static">
<Container className={styles.container}>
<Tooltip title="Menu">
<Tooltip title="Menu" arrow>
<IconButton
className={styles.drawerButton}
onClick={toggleDrawer}
@ -137,7 +137,7 @@ const Header: VFC = () => {
/>
</div>
<div className={styles.userContainer}>
<Tooltip title="Documentation">
<Tooltip title="Documentation" arrow>
<IconButton
href="https://docs.getunleash.io/"
target="_blank"
@ -152,7 +152,7 @@ const Header: VFC = () => {
<ConditionallyRender
condition={admin}
show={
<Tooltip title="Settings">
<Tooltip title="Settings" arrow>
<IconButton
onClick={e =>
setAdminRef(e.currentTarget)

View File

@ -128,7 +128,7 @@ const Project = () => {
onClick={() =>
navigate(`/projects/${projectId}/edit`)
}
tooltip="Edit project"
tooltipProps={{ title: 'Edit project' }}
data-loading
>
<Edit />

View File

@ -57,7 +57,7 @@ const ProjectInfo = ({
className={permissionButtonClass}
data-loading
to={`/projects/${id}/edit`}
tooltip="Edit description"
tooltipProps={{ title: 'Edit description' }}
>
<Edit />
</PermissionIconButton>

View File

@ -68,7 +68,7 @@ export const ProjectAccessListItem = ({
edge="end"
onClick={() => handleRemoveAccess(user)}
disabled={access.users.length === 1}
tooltip="Remove access"
tooltipProps={{ title: 'Remove access' }}
>
<Delete />
</PermissionIconButton>

View File

@ -2,7 +2,7 @@ import { Card, Menu, MenuItem } from '@mui/material';
import { useStyles } from './ProjectCard.styles';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import { ReactComponent as ProjectIcon } from 'assets/icons/projectIcon.svg';
import { useState } from 'react';
import { useState, SyntheticEvent } from 'react';
import { useNavigate } from 'react-router-dom';
import { Dialogue } from 'component/common/Dialogue/Dialogue';
import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
@ -73,7 +73,7 @@ export const ProjectCard = ({
className={classes.actionsBtn}
data-loading
onClick={handleClick}
tooltip="Options"
tooltipProps={{ title: 'Options' }}
>
<MoreVertIcon />
</PermissionIconButton>
@ -82,10 +82,9 @@ export const ProjectCard = ({
id="project-card-menu"
open={Boolean(anchorEl)}
anchorEl={anchorEl}
style={{ top: '40px', left: '-60px' }}
onClose={e => {
// @ts-expect-error
e.preventDefault();
style={{ top: 0, left: -100 }}
onClose={(event: SyntheticEvent) => {
event.preventDefault();
setAnchorEl(null);
}}
>

View File

@ -66,7 +66,7 @@ export const SegmentListItem = ({
navigate(`/segments/edit/${id}`);
}}
permission={UPDATE_SEGMENT}
tooltip="Edit segment"
tooltipProps={{ title: 'Edit segment' }}
>
<Edit />
</PermissionIconButton>
@ -84,7 +84,7 @@ export const SegmentListItem = ({
setDelDialog(true);
}}
permission={DELETE_SEGMENT}
tooltip="Remove segment"
tooltipProps={{ title: 'Remove segment' }}
data-testid={`${SEGMENT_DELETE_BTN_ID}_${name}`}
>
<Delete />

View File

@ -72,7 +72,7 @@ export const StrategiesList = () => {
data-testid={ADD_NEW_STRATEGY_ID}
onClick={() => navigate('/strategies/create')}
permission={CREATE_STRATEGY}
tooltip="New strategy"
tooltipProps={{ title: 'New strategy' }}
>
<Add />
</PermissionIconButton>
@ -166,7 +166,7 @@ export const StrategiesList = () => {
<PermissionIconButton
onClick={() => onReactivateStrategy(strategy)}
permission={UPDATE_STRATEGY}
tooltip="Reactivate activation strategy"
tooltipProps={{ title: 'Reactivate activation strategy' }}
>
<VisibilityOff />
</PermissionIconButton>
@ -176,7 +176,10 @@ export const StrategiesList = () => {
<ConditionallyRender
condition={strategy.name === 'default'}
show={
<Tooltip title="You cannot deprecate the default strategy">
<Tooltip
title="You cannot deprecate the default strategy"
arrow
>
<div>
<IconButton disabled size="large">
<Visibility titleAccess="Deprecate strategy" />
@ -189,7 +192,7 @@ export const StrategiesList = () => {
<PermissionIconButton
onClick={() => onDeprecateStrategy(strategy)}
permission={UPDATE_STRATEGY}
tooltip="Deprecate strategy"
tooltipProps={{ title: 'Deprecate strategy' }}
>
<Visibility />
</PermissionIconButton>
@ -207,13 +210,13 @@ export const StrategiesList = () => {
navigate(`/strategies/${strategy?.name}/edit`)
}
permission={UPDATE_STRATEGY}
tooltip="Edit strategy"
tooltipProps={{ title: 'Edit strategy' }}
>
<Edit />
</PermissionIconButton>
}
elseShow={
<Tooltip title="You cannot delete a built-in strategy">
<Tooltip title="You cannot delete a built-in strategy" arrow>
<div>
<IconButton disabled size="large">
<Edit titleAccess="Edit strategy" />
@ -231,13 +234,13 @@ export const StrategiesList = () => {
<PermissionIconButton
onClick={() => onDeleteStrategy(strategy)}
permission={DELETE_STRATEGY}
tooltip="Delete strategy"
tooltipProps={{ title: 'Delete strategy' }}
>
<Delete />
</PermissionIconButton>
}
elseShow={
<Tooltip title="You cannot delete a built-in strategy">
<Tooltip title="You cannot delete a built-in strategy" arrow>
<div>
<IconButton disabled size="large">
<Delete titleAccess="Delete strategy" />

View File

@ -117,55 +117,44 @@ exports[`renders correctly 1`] = `
</p>
</div>
<div>
<span
<button
aria-label="Deprecate strategy"
aria-labelledby={null}
className=""
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element={true}
id="useId-1"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
>
<button
aria-labelledby="useId-1"
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onDragLeave={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
type="button"
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
data-testid="VisibilityIcon"
focusable="false"
viewBox="0 0 24 24"
>
<svg
aria-hidden={true}
className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
data-testid="VisibilityIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
/>
</svg>
<span
className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
<path
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
/>
</button>
</span>
</svg>
<span
className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
aria-label="You cannot delete a built-in strategy"

View File

@ -88,7 +88,7 @@ export const StrategyParameter = ({
error={Boolean(errors?.[`paramName${index}`])}
errorText={errors?.[`paramName${index}`]}
/>
<Tooltip title="Remove parameter">
<Tooltip title="Remove parameter" arrow>
<IconButton
onClick={() => {
setParams(params.filter((e, i) => i !== index));

View File

@ -35,14 +35,14 @@ export const StrategyDetails = ({
condition={required}
show={
<ListItemAvatar>
<Tooltip title="Required parameter">
<Tooltip title="Required parameter" arrow>
<Add aria-hidden={false} />
</Tooltip>
</ListItemAvatar>
}
elseShow={
<ListItemAvatar>
<Tooltip title="Optional parameter">
<Tooltip title="Optional parameter" arrow>
<RadioButtonChecked aria-hidden={false} />
</Tooltip>
</ListItemAvatar>

View File

@ -44,7 +44,7 @@ export const StrategyView = () => {
permission={UPDATE_STRATEGY}
data-loading
onClick={handleEdit}
tooltip="Edit strategy"
tooltipProps={{ title: 'Edit strategy' }}
>
<Edit />
</PermissionIconButton>

View File

@ -25,12 +25,12 @@ export const TogglesLinkList = ({ toggles }: ITogglesLinkListProps) => (
<ConditionallyRender
condition={Boolean(enabled)}
show={
<Tooltip title="Enabled">
<Tooltip title="Enabled" arrow>
<PlayArrow aria-hidden={false} />
</Tooltip>
}
elseShow={
<Tooltip title="Disabled">
<Tooltip title="Disabled" arrow>
<Pause aria-hidden={false} />
</Tooltip>
}

View File

@ -27,6 +27,7 @@ import useToast from 'hooks/useToast';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { formatUnknownError } from 'utils/formatUnknownError';
import { ITagType } from 'interfaces/tags';
import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
export const TagTypeList = () => {
const { hasAccess } = useContext(AccessContext);
@ -67,7 +68,7 @@ export const TagTypeList = () => {
<ConditionallyRender
condition={smallScreen}
show={
<Tooltip title="Add tag type">
<Tooltip title="Add tag type" arrow>
<IconButton
onClick={() =>
navigate('/tag-types/create')
@ -103,7 +104,7 @@ export const TagTypeList = () => {
</Link>
);
let deleteButton = (
<Tooltip title={`Delete ${tagType.name}`}>
<Tooltip title={`Delete ${tagType.name}`} arrow>
<IconButton
onClick={() =>
setDeletion({
@ -130,7 +131,7 @@ export const TagTypeList = () => {
<PermissionIconButton
permission={UPDATE_TAG_TYPE}
component={Link}
tooltip="Edit tag type"
tooltipProps={{ title: 'Edit tag type' }}
to={`/tag-types/edit/${tagType.name}`}
>
<Edit className={styles.icon} />