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)

Author: Ahmed-Labs

static/app/views/dashboards/controls.tsx

@@ -194,6 +194,39 @@ function Controls({
         })
       : null
     : t('You do not have permission to edit this dashboard');
+
+  const renderEditButton = (hasFeature: boolean) => {
+    if (!hasFeature) {
+      return null;
+    }
+    const isDisabled = !hasFeature || hasUnsavedFilters || !hasEditAccess || isSaving;
+    const toolTipMessage = isSaving
+      ? DASHBOARD_SAVING_MESSAGE
+      : hasEditAccess
+        ? hasUnsavedFilters
+          ? UNSAVED_FILTERS_MESSAGE
+          : null
+        : t('You do not have permission to edit this dashboard');
+
+    return (
+      <Tooltip title={t('Edit Dashboard')} disabled={isDisabled}>
+        <Button
+          data-test-id="dashboard-edit"
+          aria-label={t('edit-dashboard')}
+          onClick={e => {
+            e.preventDefault();
+            onEdit();
+          }}
+          icon={isSaving ? <LoadingIndicator size={14} /> : <IconEdit />}
+          disabled={isDisabled}
+          title={toolTipMessage}
+          priority="default"
+          size="sm"
+        />
+      </Tooltip>
+    );
+  };
+
   return (
     <StyledButtonBar key="controls">
       <DashboardEditFeature>
@@ -256,27 +289,7 @@ function Controls({
                 />
               </Tooltip>
             )}
-            <Tooltip title={t('Edit Dashboard')}>
-              <Button
-                data-test-id="dashboard-edit"
-                aria-label={t('edit-dashboard')}
-                onClick={e => {
-                  e.preventDefault();
-                  onEdit();
-                }}
-                icon={isSaving ? <LoadingIndicator size={14} /> : <IconEdit />}
-                disabled={!hasFeature || hasUnsavedFilters || !hasEditAccess || isSaving}
-                title={
-                  isSaving
-                    ? DASHBOARD_SAVING_MESSAGE
-                    : hasEditAccess
-                      ? hasUnsavedFilters && UNSAVED_FILTERS_MESSAGE
-                      : t('You do not have permission to edit this dashboard')
-                }
-                priority="default"
-                size="sm"
-              />
-            </Tooltip>
+            {renderEditButton(hasFeature)}
             {hasFeature ? (
               <Tooltip
                 title={tooltipMessage}