ref(dashboards): reorder primary actions

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 {DashboardRevisionsButton} from './dashboardRevisions';
@@ -68,6 +69,7 @@ export function Controls({
   isSaving,
 }: Props) {
   const [isFavorited, setIsFavorited] = useState(dashboard.isFavorited);
+  const hasPageFrameFeature = useHasPageFrameFeature();
   const queryClient = useQueryClient();
   function renderCancelButton(label = t('Cancel')) {
     return (
@@ -269,27 +271,6 @@ export function Controls({
       <DashboardEditFeature>
         {hasFeature => (
           <Fragment>
-            <Feature features="dashboards-import">
-              <Tooltip title={t('Export Dashboard')}>
-                <Button
-                  data-test-id="dashboard-export"
-                  aria-label={t('export-dashboard')}
-                  onClick={e => {
-                    e.preventDefault();
-                    exportDashboard();
-                  }}
-                  icon={<IconDownload />}
-                  priority="default"
-                  size="sm"
-                />
-              </Tooltip>
-            </Feature>
-            {dashboard.id !== 'default-overview' && !isPrebuiltDashboard && (
-              <EditAccessSelector
-                dashboard={dashboard}
-                onChangeEditAccess={onChangeEditAccess}
-              />
-            )}
             {dashboard.id !== 'default-overview' && (
               <Tooltip title={isFavorited ? t('Starred Dashboard') : t('Star Dashboard')}>
                 <Button
@@ -326,7 +307,70 @@ export function Controls({
                 />
               </Tooltip>
             )}
-            {renderEditButton(hasFeature)}
+            <Feature features="dashboards-import">
+              <Tooltip title={t('Export Dashboard')}>
+                <Button
+                  data-test-id="dashboard-export"
+                  aria-label={t('export-dashboard')}
+                  onClick={e => {
+                    e.preventDefault();
+                    exportDashboard();
+                  }}
+                  icon={<IconDownload />}
+                  priority="default"
+                  size="sm"
+                />
+              </Tooltip>
+            </Feature>
+            {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 && (
+              <EditAccessSelector
+                dashboard={dashboard}
+                onChangeEditAccess={onChangeEditAccess}
+              />
+            )}
+            {!hasPageFrameFeature && renderEditButton(hasFeature)}
             {hasFeature && (
               <Feature features="dashboards-revisions">
                 <DashboardRevisionsButton dashboard={dashboard} />