fix(dashboards): Add and modify tooltips according to dashboard edit access (#81069)

- Added new tooltips to buttons that get disabled when user does not
have Edit Access
- Modified tooltip on Edit Access dropdown button when the menu is open
for a cleaner UI

---------

Co-authored-by: harshithadurai <harshi.durai@esentry.io>

static/app/components/avatar/baseAvatar.tsx

@@ -130,6 +130,7 @@ function BaseAvatar({
       suggested={!!suggested}
       style={{...sizeStyle, ...style}}
       title={title}
+      hasTooltip={hasTooltip}
       {...props}
     >
       {hasError ? backup : imageAvatar}
@@ -150,6 +151,7 @@ export {BaseAvatar, type BaseAvatarProps};
 // Note: Avatar will not always be a child of a flex layout, but this seems like a
 // sensible default.
 const StyledBaseAvatar = styled('span')<{
+  hasTooltip: boolean;
   round: boolean;
   suggested: boolean;
 }>`
@@ -157,6 +159,9 @@ const StyledBaseAvatar = styled('span')<{
   border-radius: ${p => (p.round ? '50%' : '3px')};
   border: ${p => (p.suggested ? `1px dashed ${p.theme.subText}` : 'none')};
   background-color: ${p => (p.suggested ? p.theme.background : 'none')};
+  :hover {
+    pointer-events: ${p => (p.hasTooltip ? 'none' : 'auto')};
+  }
 `;
 
 const ImageAvatar = styled('img')<ImageStyleProps>`

static/app/components/modals/widgetViewerModal.tsx

@@ -1084,6 +1084,10 @@ function WidgetViewerModal(props: Props) {
                               });
                             }}
                             disabled={!hasEditAccess}
+                            title={
+                              !hasEditAccess &&
+                              t('You do not have permission to edit this widget')
+                            }
                           >
                             {t('Edit Widget')}
                           </Button>

static/app/views/dashboards/controls.tsx

@@ -192,7 +192,11 @@ function Controls({
               }}
               icon={<IconEdit />}
               disabled={!hasFeature || hasUnsavedFilters || !hasEditAccess}
-              title={hasUnsavedFilters && UNSAVED_FILTERS_MESSAGE}
+              title={
+                !hasEditAccess
+                  ? t('You do not have permission to edit this dashboard')
+                  : hasUnsavedFilters && UNSAVED_FILTERS_MESSAGE
+              }
               priority="default"
               size="sm"
             >
@@ -226,6 +230,10 @@ function Controls({
                       });
                       onAddWidget(defaultDataset);
                     }}
+                    title={
+                      !hasEditAccess &&
+                      t('You do not have permission to edit this dashboard')
+                    }
                   >
                     {t('Add Widget')}
                   </Button>

static/app/views/dashboards/editAccessSelector.tsx

@@ -143,6 +143,7 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
         maxVisibleAvatars={1}
         avatarSize={25}
         renderUsersFirst
+        tooltipOptions={{disabled: !isCurrentUserDashboardOwner}}
       />
     ) : (
       // Case where we display 1 Creator Avatar + a Badge with no. of teams selected
@@ -152,6 +153,7 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
         users={Array(selectedOptions.length).fill(dashboardCreator)}
         maxVisibleAvatars={1}
         avatarSize={25}
+        tooltipOptions={{disabled: !isCurrentUserDashboardOwner}}
       />
     );
 
@@ -227,13 +229,14 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
       options={allDropdownOptions}
       value={selectedOptions}
       triggerLabel={[
-        t('Edit Access:'),
-        triggerAvatars,
-        <FeatureBadge
+        <StyledFeatureBadge
           key="beta-badge"
           type="beta"
           title={t('This feature is available for early adopters and may change')}
+          tooltipProps={{position: 'left', delay: 1000, isHoverable: true}}
         />,
+        t('Edit Access:'),
+        triggerAvatars,
       ]}
       searchPlaceholder={t('Search Teams')}
       isOpen={isMenuOpen}
@@ -248,10 +251,11 @@ function EditAccessSelector({dashboard, onChangeEditAccess}: EditAccessSelectorP
     />
   );
 
-  return isCurrentUserDashboardOwner ? (
-    dropdownMenu
-  ) : (
-    <Tooltip title={t('Only the creator of the dashboard can edit permissions')}>
+  return (
+    <Tooltip
+      title={t('Only the creator of the dashboard can edit permissions')}
+      disabled={isCurrentUserDashboardOwner || isMenuOpen}
+    >
       {dropdownMenu}
     </Tooltip>
   );
@@ -282,6 +286,11 @@ const StyledAvatarList = styled(AvatarList)`
   margin-right: -3px;
 `;
 
+const StyledFeatureBadge = styled(FeatureBadge)`
+  margin-left: 0px;
+  margin-right: 6px;
+`;
+
 const StyledBadge = styled(Badge)`
   color: ${p => p.theme.white};
   background: ${p => p.theme.purple300};

static/app/views/dashboards/filtersBar.tsx

@@ -120,7 +120,14 @@ export default function FiltersBar({
         </FilterButtons>
         {hasUnsavedChanges && !isEditingDashboard && !isPreview && (
           <FilterButtons>
-            <Button priority="primary" onClick={onSave} disabled={!hasEditAccess}>
+            <Button
+              title={
+                !hasEditAccess && t('You do not have permission to edit this dashboard')
+              }
+              priority="primary"
+              onClick={onSave}
+              disabled={!hasEditAccess}
+            >
               {t('Save')}
             </Button>
             <Button onClick={onCancel}>{t('Cancel')}</Button>