From 67b9e8f96c9b807958ef46dd946147edc1c09c04 Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Mon, 20 Apr 2026 08:59:19 -0700
Subject: [PATCH 1/5] ref(dashboards): Reorder Edit before Editors in page
 frame action bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In the page frame layout, the Edit button now appears before the
Editors (edit access) selector. Previously, the order placed the Edit
button after the Editors selector, separating it from the Add Widget
button without a clear grouping rationale. The new order (Edit →
Editors → Star → Add Widget) keeps editing-intent actions together.
Both Edit and Editors now use tooltipProps for consistent tooltip
behavior in the page frame path.

Refs DE-1112
Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/app/views/dashboards/controls.tsx | 74 +++++++++++++++++++++---
 static/app/views/dashboards/detail.tsx   |  1 +
 2 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/static/app/views/dashboards/controls.tsx b/static/app/views/dashboards/controls.tsx
index 59a636e73443..25c396c40d94 100644
--- a/static/app/views/dashboards/controls.tsx
+++ b/static/app/views/dashboards/controls.tsx
@@ -47,6 +47,7 @@ type Props = {
   onEdit: () => void;
   organization: Organization;
   widgetLimitReached: boolean;
+  hasPageFrameFeature?: boolean;
   hasUnsavedFilters?: boolean;
   isSaving?: boolean;
   onChangeEditAccess?: (newDashboardPermissions: DashboardPermissions) => void;
@@ -65,6 +66,7 @@ export function Controls({
   onCancel,
   onAddWidget,
   isSaving,
+  hasPageFrameFeature,
 }: Props) {
   const [isFavorited, setIsFavorited] = useState(dashboard.isFavorited);
   const queryClient = useQueryClient();
@@ -263,6 +265,54 @@ export function Controls({
     );
   };
 
+  const renderPageFrameEditButton = (hasFeature: boolean) => {
+    if (!hasFeature) {
+      return null;
+    }
+    if (isPrebuiltDashboard) {
+      return (
+        <Button
+          data-test-id="dashboard-edit"
+          aria-label={t('edit-dashboard')}
+          icon={<IconEdit />}
+          disabled
+          tooltipProps={{
+            title: tct(
+              'This is a [label] dashboard and cannot be edited. Duplicate it to make changes.',
+              {label: PREBUILT_DASHBOARD_LABEL}
+            ),
+          }}
+          priority="default"
+          size="sm"
+        />
+      );
+    }
+    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 (
+      <Button
+        data-test-id="dashboard-edit"
+        aria-label={t('edit-dashboard')}
+        onClick={e => {
+          e.preventDefault();
+          onEdit();
+        }}
+        icon={isSaving ? <LoadingIndicator size={14} /> : <IconEdit />}
+        disabled={isDisabled}
+        tooltipProps={{title: toolTipMessage ?? t('Edit Dashboard')}}
+        priority="default"
+        size="sm"
+      />
+    );
+  };
+
   return (
     <StyledButtonBar key="controls">
       <DashboardEditFeature>
@@ -283,12 +333,22 @@ export function Controls({
                 />
               </Tooltip>
             </Feature>
-            {dashboard.id !== 'default-overview' && !isPrebuiltDashboard && (
-              <EditAccessSelector
-                dashboard={dashboard}
-                onChangeEditAccess={onChangeEditAccess}
-              />
-            )}
+            {hasPageFrameFeature && renderPageFrameEditButton(hasFeature)}
+            {dashboard.id !== 'default-overview' &&
+              !isPrebuiltDashboard &&
+              (hasPageFrameFeature ? (
+                <Tooltip title={t('Edit Access')}>
+                  <EditAccessSelector
+                    dashboard={dashboard}
+                    onChangeEditAccess={onChangeEditAccess}
+                  />
+                </Tooltip>
+              ) : (
+                <EditAccessSelector
+                  dashboard={dashboard}
+                  onChangeEditAccess={onChangeEditAccess}
+                />
+              ))}
             {dashboard.id !== 'default-overview' && (
               <Tooltip title={isFavorited ? t('Starred Dashboard') : t('Star Dashboard')}>
                 <Button
@@ -325,7 +385,7 @@ export function Controls({
                 />
               </Tooltip>
             )}
-            {renderEditButton(hasFeature)}
+            {!hasPageFrameFeature && renderEditButton(hasFeature)}
             {hasFeature && !isPrebuiltDashboard && (
               <Tooltip
                 title={tooltipMessage}
diff --git a/static/app/views/dashboards/detail.tsx b/static/app/views/dashboards/detail.tsx
index 7ab54afd6b2f..710f9deadf61 100644
--- a/static/app/views/dashboards/detail.tsx
+++ b/static/app/views/dashboards/detail.tsx
@@ -1234,6 +1234,7 @@ class DashboardDetail extends Component<Props, State> {
                         dashboardState={dashboardState}
                         widgetLimitReached={widgetLimitReached}
                         isSaving={isCommittingChanges}
+                        hasPageFrameFeature
                       />
                     </TopBar.Slot>
                   ) : (

From ff10457dd43dcf4909234ed6e6e37f201f92a02d Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Mon, 20 Apr 2026 09:06:34 -0700
Subject: [PATCH 2/5] ref(dashboards): Inline hasPageFrameFeature and remove
 renderPageFrameEditButton

Use the useHasPageFrameFeature hook directly in Controls instead of
accepting it as a prop from detail.tsx. Remove the renderPageFrameEditButton
helper and inline its JSX at the call site.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/app/views/dashboards/controls.tsx | 95 +++++++++++-------------
 static/app/views/dashboards/detail.tsx   |  1 -
 2 files changed, 44 insertions(+), 52 deletions(-)

diff --git a/static/app/views/dashboards/controls.tsx b/static/app/views/dashboards/controls.tsx
index 25c396c40d94..309979f183f4 100644
--- a/static/app/views/dashboards/controls.tsx
+++ b/static/app/views/dashboards/controls.tsx
@@ -29,6 +29,7 @@ import {DashboardCreateLimitWrapper} from 'sentry/views/dashboards/createLimitWr
 import {EditAccessSelector} from 'sentry/views/dashboards/editAccessSelector';
 import {useDuplicatePrebuiltDashboard} from 'sentry/views/dashboards/hooks/useDuplicateDashboard';
 import {DataSet} from 'sentry/views/dashboards/widgetBuilder/utils';
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 import {checkUserHasEditAccess} from './utils/checkUserHasEditAccess';
 import {UNSAVED_FILTERS_MESSAGE} from './detail';
@@ -47,7 +48,6 @@ type Props = {
   onEdit: () => void;
   organization: Organization;
   widgetLimitReached: boolean;
-  hasPageFrameFeature?: boolean;
   hasUnsavedFilters?: boolean;
   isSaving?: boolean;
   onChangeEditAccess?: (newDashboardPermissions: DashboardPermissions) => void;
@@ -66,9 +66,9 @@ export function Controls({
   onCancel,
   onAddWidget,
   isSaving,
-  hasPageFrameFeature,
 }: Props) {
   const [isFavorited, setIsFavorited] = useState(dashboard.isFavorited);
+  const hasPageFrameFeature = useHasPageFrameFeature();
   const queryClient = useQueryClient();
   function renderCancelButton(label = t('Cancel')) {
     return (
@@ -265,54 +265,6 @@ export function Controls({
     );
   };
 
-  const renderPageFrameEditButton = (hasFeature: boolean) => {
-    if (!hasFeature) {
-      return null;
-    }
-    if (isPrebuiltDashboard) {
-      return (
-        <Button
-          data-test-id="dashboard-edit"
-          aria-label={t('edit-dashboard')}
-          icon={<IconEdit />}
-          disabled
-          tooltipProps={{
-            title: tct(
-              'This is a [label] dashboard and cannot be edited. Duplicate it to make changes.',
-              {label: PREBUILT_DASHBOARD_LABEL}
-            ),
-          }}
-          priority="default"
-          size="sm"
-        />
-      );
-    }
-    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 (
-      <Button
-        data-test-id="dashboard-edit"
-        aria-label={t('edit-dashboard')}
-        onClick={e => {
-          e.preventDefault();
-          onEdit();
-        }}
-        icon={isSaving ? <LoadingIndicator size={14} /> : <IconEdit />}
-        disabled={isDisabled}
-        tooltipProps={{title: toolTipMessage ?? t('Edit Dashboard')}}
-        priority="default"
-        size="sm"
-      />
-    );
-  };
-
   return (
     <StyledButtonBar key="controls">
       <DashboardEditFeature>
@@ -333,7 +285,48 @@ export function Controls({
                 />
               </Tooltip>
             </Feature>
-            {hasPageFrameFeature && renderPageFrameEditButton(hasFeature)}
+            {hasPageFrameFeature &&
+              hasFeature &&
+              (isPrebuiltDashboard ? (
+                <Button
+                  data-test-id="dashboard-edit"
+                  aria-label={t('edit-dashboard')}
+                  icon={<IconEdit />}
+                  disabled
+                  tooltipProps={{
+                    title: tct(
+                      'This is a [label] dashboard and cannot be edited. Duplicate it to make changes.',
+                      {label: PREBUILT_DASHBOARD_LABEL}
+                    ),
+                  }}
+                  priority="default"
+                  size="sm"
+                />
+              ) : (
+                <Button
+                  data-test-id="dashboard-edit"
+                  aria-label={t('edit-dashboard')}
+                  onClick={e => {
+                    e.preventDefault();
+                    onEdit();
+                  }}
+                  icon={isSaving ? <LoadingIndicator size={14} /> : <IconEdit />}
+                  disabled={hasUnsavedFilters || !hasEditAccess || isSaving}
+                  tooltipProps={{
+                    title:
+                      (isSaving
+                        ? DASHBOARD_SAVING_MESSAGE
+                        : hasEditAccess
+                          ? hasUnsavedFilters
+                            ? UNSAVED_FILTERS_MESSAGE
+                            : null
+                          : t('You do not have permission to edit this dashboard')) ??
+                      t('Edit Dashboard'),
+                  }}
+                  priority="default"
+                  size="sm"
+                />
+              ))}
             {dashboard.id !== 'default-overview' &&
               !isPrebuiltDashboard &&
               (hasPageFrameFeature ? (
diff --git a/static/app/views/dashboards/detail.tsx b/static/app/views/dashboards/detail.tsx
index 710f9deadf61..7ab54afd6b2f 100644
--- a/static/app/views/dashboards/detail.tsx
+++ b/static/app/views/dashboards/detail.tsx
@@ -1234,7 +1234,6 @@ class DashboardDetail extends Component<Props, State> {
                         dashboardState={dashboardState}
                         widgetLimitReached={widgetLimitReached}
                         isSaving={isCommittingChanges}
-                        hasPageFrameFeature
                       />
                     </TopBar.Slot>
                   ) : (

From a503b71f109d17bf9798be4cdff87560d2fb79fc Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Mon, 20 Apr 2026 09:16:20 -0700
Subject: [PATCH 3/5] ref(dashboards): Move star button to first position in
 controls action bar

Co-Authored-By: Claude <noreply@anthropic.com>
---
 static/app/views/dashboards/controls.tsx | 72 ++++++++++++------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/static/app/views/dashboards/controls.tsx b/static/app/views/dashboards/controls.tsx
index 309979f183f4..902437422f1b 100644
--- a/static/app/views/dashboards/controls.tsx
+++ b/static/app/views/dashboards/controls.tsx
@@ -270,6 +270,42 @@ export function Controls({
       <DashboardEditFeature>
         {hasFeature => (
           <Fragment>
+            {dashboard.id !== 'default-overview' && (
+              <Tooltip title={isFavorited ? t('Starred Dashboard') : t('Star Dashboard')}>
+                <Button
+                  size="sm"
+                  aria-label={t('star-dashboard')}
+                  icon={
+                    <IconStar
+                      variant={isFavorited ? 'warning' : 'muted'}
+                      isSolid={isFavorited}
+                      aria-label={isFavorited ? t('Unstar') : t('Star')}
+                      data-test-id={isFavorited ? 'yellow-star' : 'empty-star'}
+                    />
+                  }
+                  onClick={async () => {
+                    try {
+                      setIsFavorited(!isFavorited);
+                      await updateDashboardFavorite(
+                        api,
+                        queryClient,
+                        organization,
+                        dashboard.id,
+                        !isFavorited
+                      );
+                      trackAnalytics('dashboards_manage.toggle_favorite', {
+                        organization,
+                        dashboard_id: dashboard.id,
+                        favorited: !isFavorited,
+                      });
+                    } catch (error) {
+                      // If the api call fails, revert the state
+                      setIsFavorited(isFavorited);
+                    }
+                  }}
+                />
+              </Tooltip>
+            )}
             <Feature features="dashboards-import">
               <Tooltip title={t('Export Dashboard')}>
                 <Button
@@ -342,42 +378,6 @@ export function Controls({
                   onChangeEditAccess={onChangeEditAccess}
                 />
               ))}
-            {dashboard.id !== 'default-overview' && (
-              <Tooltip title={isFavorited ? t('Starred Dashboard') : t('Star Dashboard')}>
-                <Button
-                  size="sm"
-                  aria-label={t('star-dashboard')}
-                  icon={
-                    <IconStar
-                      variant={isFavorited ? 'warning' : 'muted'}
-                      isSolid={isFavorited}
-                      aria-label={isFavorited ? t('Unstar') : t('Star')}
-                      data-test-id={isFavorited ? 'yellow-star' : 'empty-star'}
-                    />
-                  }
-                  onClick={async () => {
-                    try {
-                      setIsFavorited(!isFavorited);
-                      await updateDashboardFavorite(
-                        api,
-                        queryClient,
-                        organization,
-                        dashboard.id,
-                        !isFavorited
-                      );
-                      trackAnalytics('dashboards_manage.toggle_favorite', {
-                        organization,
-                        dashboard_id: dashboard.id,
-                        favorited: !isFavorited,
-                      });
-                    } catch (error) {
-                      // If the api call fails, revert the state
-                      setIsFavorited(isFavorited);
-                    }
-                  }}
-                />
-              </Tooltip>
-            )}
             {!hasPageFrameFeature && renderEditButton(hasFeature)}
             {hasFeature && !isPrebuiltDashboard && (
               <Tooltip

From 7c4ee44855cc9ef289ac37f26f11e4c793153b96 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 20 Apr 2026 17:11:51 +0000
Subject: [PATCH 4/5] fix(dashboards): remove nested tooltip on
 EditAccessSelector

The EditAccessSelector component already has its own tooltip wrapper with
conditional disabled logic. Wrapping it in an additional tooltip in the
hasPageFrameFeature branch created nested tooltips that would both fire
on hover, causing overlapping or flickering tooltip UI.

Co-authored-by: Jonas <JonasBa@users.noreply.github.com>
---
 static/app/views/dashboards/controls.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/static/app/views/dashboards/controls.tsx b/static/app/views/dashboards/controls.tsx
index 902437422f1b..f752d97abad9 100644
--- a/static/app/views/dashboards/controls.tsx
+++ b/static/app/views/dashboards/controls.tsx
@@ -366,12 +366,10 @@ export function Controls({
             {dashboard.id !== 'default-overview' &&
               !isPrebuiltDashboard &&
               (hasPageFrameFeature ? (
-                <Tooltip title={t('Edit Access')}>
-                  <EditAccessSelector
-                    dashboard={dashboard}
-                    onChangeEditAccess={onChangeEditAccess}
-                  />
-                </Tooltip>
+                <EditAccessSelector
+                  dashboard={dashboard}
+                  onChangeEditAccess={onChangeEditAccess}
+                />
               ) : (
                 <EditAccessSelector
                   dashboard={dashboard}

From d8e9b29a772e5750aff4fe82d496331de3c47d5f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Mon, 20 Apr 2026 18:44:45 +0000
Subject: [PATCH 5/5] refactor(dashboards): remove redundant ternary around
 EditAccessSelector

Both branches of the hasPageFrameFeature ternary rendered identical
EditAccessSelector components with the same props. Simplified by
removing the unnecessary conditional and rendering the component
directly.

Co-authored-by: Jonas <JonasBa@users.noreply.github.com>
---
 static/app/views/dashboards/controls.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/static/app/views/dashboards/controls.tsx b/static/app/views/dashboards/controls.tsx
index f752d97abad9..e2d43e94e739 100644
--- a/static/app/views/dashboards/controls.tsx
+++ b/static/app/views/dashboards/controls.tsx
@@ -363,19 +363,12 @@ export function Controls({
                   size="sm"
                 />
               ))}
-            {dashboard.id !== 'default-overview' &&
-              !isPrebuiltDashboard &&
-              (hasPageFrameFeature ? (
-                <EditAccessSelector
-                  dashboard={dashboard}
-                  onChangeEditAccess={onChangeEditAccess}
-                />
-              ) : (
-                <EditAccessSelector
-                  dashboard={dashboard}
-                  onChangeEditAccess={onChangeEditAccess}
-                />
-              ))}
+            {dashboard.id !== 'default-overview' && !isPrebuiltDashboard && (
+              <EditAccessSelector
+                dashboard={dashboard}
+                onChangeEditAccess={onChangeEditAccess}
+              />
+            )}
             {!hasPageFrameFeature && renderEditButton(hasFeature)}
             {hasFeature && !isPrebuiltDashboard && (
               <Tooltip