Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-31 13:47:02 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
View File

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

5
frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
View File

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

2
frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
View File

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

4
frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
View File

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

2
frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
View File

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

2
frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
View File

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

8
frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
View File

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

2
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
View File

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

10
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
View File

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

4
frontend/src/component/common/FormTemplate/FormTemplate.tsx
View File

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

15
frontend/src/component/common/PermissionButton/PermissionButton.tsx
View File

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

24
frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
View File

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

2
frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
View File

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

4
frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
View File

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

6
frontend/src/component/context/ContextList/ContextList.tsx
View File

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

6
frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
View File

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

2
frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
View File

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

2
frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
View File

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

4
frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
View File

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

6
frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx
View File

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

1
frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
View File

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

2
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
View File

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

12
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
View File

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

2
frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
View File

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

2
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
View File

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

4
frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
View File

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

14
frontend/src/component/feature/FeatureView/FeatureView.tsx
View File

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

1
frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
View File

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

2
frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
View File

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

6
frontend/src/component/menu/Header/Header.tsx
View File

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

2
frontend/src/component/project/Project/Project.tsx
View File

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

2
frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
View File

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

2
frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
View File

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

11
frontend/src/component/project/ProjectCard/ProjectCard.tsx
View File

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

4
frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
View File

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

19
frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
View File

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

17
frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap
View File

@ -117,22 +117,11 @@ exports[`renders correctly 1`] = `
</p> </p>
</div> </div>
<div> <div>
<span <button
aria-label="Deprecate strategy" aria-label="Deprecate strategy"
aria-labelledby={null} aria-labelledby={null}
className=""
data-mui-internal-clone-element={true}
id="useId-1"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
onTouchEnd={[Function]}
onTouchStart={[Function]}
>
<button
aria-labelledby="useId-1"
className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root" className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
data-mui-internal-clone-element={true}
disabled={false} disabled={false}
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}
@ -143,6 +132,7 @@ exports[`renders correctly 1`] = `
onKeyUp={[Function]} onKeyUp={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseLeave={[Function]} onMouseLeave={[Function]}
onMouseOver={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
onTouchEnd={[Function]} onTouchEnd={[Function]}
onTouchMove={[Function]} onTouchMove={[Function]}
@ -165,7 +155,6 @@ exports[`renders correctly 1`] = `
className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root" className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
/> />
</button> </button>
</span>
</div> </div>
<div <div
aria-label="You cannot delete a built-in strategy" aria-label="You cannot delete a built-in strategy"

2
frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
View File

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

4
frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
View File

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

2
frontend/src/component/strategies/StrategyView/StrategyView.tsx
View File

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

4
frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
View File

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

7
frontend/src/component/tags/TagTypeList/TagTypeList.tsx
View File

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