Skip to content

Commit 64d4509

Browse files
authored
fix(dashboards): Tooltip overlap on dashboard edit button (#102825)
The edit dashboard button has a tooltip title that is displayed on hover. If dashboard editing is disabled, another tool tip message describes the reason why a user is unable to edit their dashboard. Since both of these tool tips are displayed for the same button, they overlap each other and end up hiding text. Fixes [DAIN-1059](https://linear.app/getsentry/issue/DAIN-1059/tooltip-overlap-on-dashboard-editing-with-unsaved-filters)
1 parent 7614cc0 commit 64d4509

File tree

1 file changed

+34
-21
lines changed

1 file changed

+34
-21
lines changed

static/app/views/dashboards/controls.tsx

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,39 @@ function Controls({
194194
})
195195
: null
196196
: t('You do not have permission to edit this dashboard');
197+
198+
const renderEditButton = (hasFeature: boolean) => {
199+
if (!hasFeature) {
200+
return null;
201+
}
202+
const isDisabled = !hasFeature || hasUnsavedFilters || !hasEditAccess || isSaving;
203+
const toolTipMessage = isSaving
204+
? DASHBOARD_SAVING_MESSAGE
205+
: hasEditAccess
206+
? hasUnsavedFilters
207+
? UNSAVED_FILTERS_MESSAGE
208+
: null
209+
: t('You do not have permission to edit this dashboard');
210+
211+
return (
212+
<Tooltip title={t('Edit Dashboard')} disabled={isDisabled}>
213+
<Button
214+
data-test-id="dashboard-edit"
215+
aria-label={t('edit-dashboard')}
216+
onClick={e => {
217+
e.preventDefault();
218+
onEdit();
219+
}}
220+
icon={isSaving ? <LoadingIndicator size={14} /> : <IconEdit />}
221+
disabled={isDisabled}
222+
title={toolTipMessage}
223+
priority="default"
224+
size="sm"
225+
/>
226+
</Tooltip>
227+
);
228+
};
229+
197230
return (
198231
<StyledButtonBar key="controls">
199232
<DashboardEditFeature>
@@ -256,27 +289,7 @@ function Controls({
256289
/>
257290
</Tooltip>
258291
)}
259-
<Tooltip title={t('Edit Dashboard')}>
260-
<Button
261-
data-test-id="dashboard-edit"
262-
aria-label={t('edit-dashboard')}
263-
onClick={e => {
264-
e.preventDefault();
265-
onEdit();
266-
}}
267-
icon={isSaving ? <LoadingIndicator size={14} /> : <IconEdit />}
268-
disabled={!hasFeature || hasUnsavedFilters || !hasEditAccess || isSaving}
269-
title={
270-
isSaving
271-
? DASHBOARD_SAVING_MESSAGE
272-
: hasEditAccess
273-
? hasUnsavedFilters && UNSAVED_FILTERS_MESSAGE
274-
: t('You do not have permission to edit this dashboard')
275-
}
276-
priority="default"
277-
size="sm"
278-
/>
279-
</Tooltip>
292+
{renderEditButton(hasFeature)}
280293
{hasFeature ? (
281294
<Tooltip
282295
title={tooltipMessage}

0 commit comments

Comments
 (0)