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:
parent
44c579f7a8
commit
9902494f58
@ -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);
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -124,7 +124,7 @@ export const ApplicationEdit = () => {
|
||||
/>
|
||||
|
||||
<PermissionButton
|
||||
tooltip="Delete application"
|
||||
tooltipProps={{ title: 'Delete application' }}
|
||||
onClick={toggleModal}
|
||||
permission={UPDATE_APPLICATION}
|
||||
>
|
||||
|
@ -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,
|
||||
|
@ -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' }}
|
||||
|
@ -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>
|
||||
|
@ -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)}
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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"
|
||||
|
@ -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={() => {
|
||||
|
@ -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}
|
||||
|
@ -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 />
|
||||
|
@ -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}
|
||||
|
@ -99,7 +99,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
|
||||
themeStyles.truncate
|
||||
)}
|
||||
>
|
||||
<Tooltip title={description || ''}>
|
||||
<Tooltip title={description || ''} arrow>
|
||||
<span className={themeStyles.toggleName}>
|
||||
{name}
|
||||
</span>
|
||||
@ -126,7 +126,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
|
||||
}
|
||||
elseShow={
|
||||
<>
|
||||
<Tooltip title={description || ''}>
|
||||
<Tooltip title={description || ''} arrow>
|
||||
<span className={themeStyles.toggleName}>
|
||||
{name} {' '}
|
||||
</span>
|
||||
@ -196,7 +196,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
|
||||
!projectExists()
|
||||
}
|
||||
onClick={reviveFeature}
|
||||
tooltip="Revive feature"
|
||||
tooltipProps={{ title: 'Revive feature' }}
|
||||
>
|
||||
<Undo />
|
||||
</PermissionIconButton>
|
||||
|
@ -15,6 +15,7 @@ const CreatedAt = ({ time }: ICreatedAtProps) => {
|
||||
time,
|
||||
locationSettings.locale
|
||||
)}`}
|
||||
arrow
|
||||
>
|
||||
<span>{formatDateYMD(time, locationSettings.locale)}</span>
|
||||
</Tooltip>
|
||||
|
@ -54,7 +54,7 @@ const FeatureOverviewEnvironmentStrategy = ({
|
||||
projectId={projectId}
|
||||
component={Link}
|
||||
to={editStrategyPath}
|
||||
tooltip="Edit strategy"
|
||||
tooltipProps={{ title: 'Edit strategy' }}
|
||||
>
|
||||
<Edit />
|
||||
</PermissionIconButton>
|
||||
|
@ -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>
|
||||
|
@ -34,7 +34,7 @@ export const FeatureSettingsInformation = ({
|
||||
projectId={projectId}
|
||||
data-loading
|
||||
onClick={onEdit}
|
||||
tooltip="Edit"
|
||||
tooltipProps={{ title: 'Edit' }}
|
||||
>
|
||||
<Edit />
|
||||
</PermissionIconButton>
|
||||
|
@ -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();
|
||||
|
@ -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 => {
|
||||
|
@ -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 />
|
||||
|
@ -136,6 +136,7 @@ const GeneralStrategy = ({
|
||||
<Tooltip
|
||||
title={description}
|
||||
placement="right-end"
|
||||
arrow
|
||||
>
|
||||
<FormControlLabel
|
||||
label={name}
|
||||
|
@ -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)}
|
||||
|
@ -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)
|
||||
|
@ -128,7 +128,7 @@ const Project = () => {
|
||||
onClick={() =>
|
||||
navigate(`/projects/${projectId}/edit`)
|
||||
}
|
||||
tooltip="Edit project"
|
||||
tooltipProps={{ title: 'Edit project' }}
|
||||
data-loading
|
||||
>
|
||||
<Edit />
|
||||
|
@ -57,7 +57,7 @@ const ProjectInfo = ({
|
||||
className={permissionButtonClass}
|
||||
data-loading
|
||||
to={`/projects/${id}/edit`}
|
||||
tooltip="Edit description"
|
||||
tooltipProps={{ title: 'Edit description' }}
|
||||
>
|
||||
<Edit />
|
||||
</PermissionIconButton>
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
}}
|
||||
>
|
||||
|
@ -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 />
|
||||
|
@ -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" />
|
||||
|
@ -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"
|
||||
|
@ -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));
|
||||
|
@ -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>
|
||||
|
@ -44,7 +44,7 @@ export const StrategyView = () => {
|
||||
permission={UPDATE_STRATEGY}
|
||||
data-loading
|
||||
onClick={handleEdit}
|
||||
tooltip="Edit strategy"
|
||||
tooltipProps={{ title: 'Edit strategy' }}
|
||||
>
|
||||
<Edit />
|
||||
</PermissionIconButton>
|
||||
|
@ -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>
|
||||
}
|
||||
|
@ -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} />
|
||||
|
Loading…
Reference in New Issue
Block a user