fix(dashboards): add fe check to allow managers and owners to always edit dashboards (#81181)

add frontend check to allow managers and owners to always be able to
edit dashboards, and dashboard edit perms. this won't work until
#80684 is merged

---------

Co-authored-by: harshithadurai <[email protected]>

Author: 2 people

Diff for: static/app/views/dashboards/detail.spec.tsx

@@ -1902,7 +1902,7 @@ describe('Dashboards > Detail', function () {
         }),
       });
 
-      const currentUser = UserFixture({id: '781629'});
+      const currentUser = UserFixture({id: '781629', isSuperuser: false});
       ConfigStore.set('user', currentUser);
 
       render(
@@ -1911,6 +1911,7 @@ describe('Dashboards > Detail', function () {
           organization={{
             ...initialData.organization,
             features: ['dashboards-edit-access', ...initialData.organization.features],
+            access: ['org:read'],
           }}
           params={{orgId: 'org-slug', dashboardId: '1'}}
           router={initialData.router}
@@ -1922,6 +1923,7 @@ describe('Dashboards > Detail', function () {
           router: initialData.router,
           organization: {
             features: ['dashboards-edit-access', ...initialData.organization.features],
+            access: ['org:read'],
           },
         }
       );
@@ -1973,6 +1975,7 @@ describe('Dashboards > Detail', function () {
           organization={{
             ...initialData.organization,
             features: ['dashboards-edit-access', ...initialData.organization.features],
+            access: ['org:read'],
           }}
           params={{orgId: 'org-slug', dashboardId: '1'}}
           router={initialData.router}
@@ -1984,6 +1987,7 @@ describe('Dashboards > Detail', function () {
           router: initialData.router,
           organization: {
             features: ['dashboards-edit-access', ...initialData.organization.features],
+            access: ['org:read'],
           },
         }
       );

Diff for: static/app/views/dashboards/detail.tsx

@@ -14,6 +14,7 @@ import {
 import {addErrorMessage, addSuccessMessage} from 'sentry/actionCreators/indicator';
 import {openWidgetViewerModal} from 'sentry/actionCreators/modal';
 import type {Client} from 'sentry/api';
+import {hasEveryAccess} from 'sentry/components/acl/access';
 import {Breadcrumbs} from 'sentry/components/breadcrumbs';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import * as Layout from 'sentry/components/layouts/thirds';
@@ -180,6 +181,7 @@ export function checkUserHasEditAccess(
 ): boolean {
   if (
     !organization.features.includes('dashboards-edit-access') ||
+    hasEveryAccess(['org:write'], {organization}) || // Managers and Owners
     !dashboardPermissions ||
     dashboardPermissions.isEditableByEveryone ||
     dashboardCreator?.id === currentUser.id

Diff for: static/app/views/dashboards/editAccessSelector.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import debounce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';
 
+import {hasEveryAccess} from 'sentry/components/acl/access';
 import AvatarList from 'sentry/components/avatar/avatarList';
 import TeamAvatar from 'sentry/components/avatar/teamAvatar';
 import Badge from 'sentry/components/badge/badge';
@@ -20,6 +21,7 @@ import {space} from 'sentry/styles/space';
 import type {Team} from 'sentry/types/organization';
 import type {User} from 'sentry/types/user';
 import {defined} from 'sentry/utils';
+import useOrganization from 'sentry/utils/useOrganization';
 import {useTeams} from 'sentry/utils/useTeams';
 import {useTeamsById} from 'sentry/utils/useTeamsById';
 import {useUser} from 'sentry/utils/useUser';
@@ -37,7 +39,11 @@ interface EditAccessSelectorProps {
 function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorProps) {
   const currentUser: User = useUser();
   const dashboardCreator: User | undefined = dashboard.createdBy;
-  const isCurrentUserDashboardOwner = dashboardCreator?.id === currentUser.id;
+
+  const organization = useOrganization();
+  const userCanEditDashboardPermissions =
+    dashboardCreator?.id === currentUser.id ||
+    hasEveryAccess(['org:write'], {organization});
 
   // Retrieves teams from the team store, which may contain only a subset of all teams
   const {teams: teamsToRender} = useTeamsById();
@@ -143,7 +149,7 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
         maxVisibleAvatars={1}
         avatarSize={25}
         renderUsersFirst
-        tooltipOptions={{disabled: !isCurrentUserDashboardOwner}}
+        tooltipOptions={{disabled: !userCanEditDashboardPermissions}}
       />
     ) : (
       // Case where we display 1 Creator Avatar + a Badge with no. of teams selected
@@ -153,7 +159,7 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
         users={Array(selectedOptions.length).fill(dashboardCreator)}
         maxVisibleAvatars={1}
         avatarSize={25}
-        tooltipOptions={{disabled: !isCurrentUserDashboardOwner}}
+        tooltipOptions={{disabled: !userCanEditDashboardPermissions}}
       />
     );
 
@@ -165,16 +171,16 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
         {
           value: '_allUsers',
           label: t('All users'),
-          disabled: !isCurrentUserDashboardOwner,
+          disabled: !userCanEditDashboardPermissions,
         },
       ],
     },
     {
       value: '_teams',
       label: t('Teams'),
       options: teamsToRender.map(makeTeamOption),
-      showToggleAllButton: isCurrentUserDashboardOwner,
-      disabled: !isCurrentUserDashboardOwner,
+      showToggleAllButton: userCanEditDashboardPermissions,
+      disabled: !userCanEditDashboardPermissions,
     },
   ];
 
@@ -189,7 +195,7 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
             setSelectedOptions(getSelectedOptions());
           }
         }}
-        disabled={!isCurrentUserDashboardOwner}
+        disabled={!userCanEditDashboardPermissions}
       >
         {t('Cancel')}
       </Button>
@@ -209,7 +215,7 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
         }}
         priority="primary"
         disabled={
-          !isCurrentUserDashboardOwner ||
+          !userCanEditDashboardPermissions ||
           isEqual(getDashboardPermissions(), dashboard.permissions)
         }
       >
@@ -254,7 +260,7 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
   return (
     <Tooltip
       title={t('Only the creator of the dashboard can edit permissions')}
-      disabled={isCurrentUserDashboardOwner || isMenuOpen}
+      disabled={userCanEditDashboardPermissions || isMenuOpen}
     >
       {dropdownMenu}
     </Tooltip>