feat(ui): Re-word debug files download tooltip (#32365)

static/app/views/settings/projectDebugFiles/debugFileRow.tsx

@@ -7,11 +7,12 @@ import Button from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import Confirm from 'sentry/components/confirm';
 import FileSize from 'sentry/components/fileSize';
+import Link from 'sentry/components/links/link';
 import Tag from 'sentry/components/tag';
 import TimeSince from 'sentry/components/timeSince';
 import Tooltip from 'sentry/components/tooltip';
 import {IconClock, IconDelete, IconDownload} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {DebugFile} from 'sentry/types/debugFiles';
@@ -23,6 +24,7 @@ type Props = {
   downloadRole: string;
   downloadUrl: string;
   onDelete: (id: string) => void;
+  orgSlug: string;
   showDetails: boolean;
 };
 
@@ -32,6 +34,7 @@ const DebugFileRow = ({
   downloadUrl,
   downloadRole,
   onDelete,
+  orgSlug,
 }: Props) => {
   const {
     id,
@@ -102,7 +105,15 @@ const DebugFileRow = ({
             {({hasRole}) => (
               <Tooltip
                 disabled={hasRole}
-                title={t('You do not have permission to download debug files.')}
+                title={tct(
+                  'Debug files can only be downloaded by users with organization [downloadRole] role[orHigher]. This can be changed in [settingsLink:Debug Files Access] settings.',
+                  {
+                    downloadRole,
+                    orHigher: downloadRole !== 'owner' ? ` ${t('or higher')}` : '',
+                    settingsLink: <Link to={`/settings/${orgSlug}/#debugFilesRole`} />,
+                  }
+                )}
+                isHoverable
               >
                 <Button
                   size="xsmall"

static/app/views/settings/projectDebugFiles/index.tsx

@@ -157,6 +157,7 @@ class ProjectDebugSymbols extends AsyncView<Props, State> {
           downloadRole={organization.debugFilesRole}
           onDelete={this.handleDelete}
           key={debugFile.id}
+          orgSlug={organization.slug}
         />
       );
     });

static/app/views/settings/projectProguard/projectProguard.tsx

@@ -118,6 +118,7 @@ class ProjectProguard extends AsyncView<Props, State> {
           onDelete={this.handleDelete}
           downloadRole={organization.debugFilesRole}
           key={mapping.id}
+          orgSlug={organization.slug}
         />
       );
     });

static/app/views/settings/projectProguard/projectProguardRow.tsx

@@ -7,10 +7,11 @@ import Button from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import Confirm from 'sentry/components/confirm';
 import FileSize from 'sentry/components/fileSize';
+import Link from 'sentry/components/links/link';
 import TimeSince from 'sentry/components/timeSince';
 import Tooltip from 'sentry/components/tooltip';
 import {IconClock, IconDelete, IconDownload} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {DebugFile} from 'sentry/types/debugFiles';
 
@@ -19,9 +20,16 @@ type Props = {
   downloadUrl: string;
   mapping: DebugFile;
   onDelete: (id: string) => void;
+  orgSlug: string;
 };
 
-const ProjectProguardRow = ({mapping, onDelete, downloadUrl, downloadRole}: Props) => {
+const ProjectProguardRow = ({
+  mapping,
+  onDelete,
+  downloadUrl,
+  downloadRole,
+  orgSlug,
+}: Props) => {
   const {id, debugId, uuid, size, dateCreated} = mapping;
 
   const handleDeleteClick = () => {
@@ -45,8 +53,16 @@ const ProjectProguardRow = ({mapping, onDelete, downloadUrl, downloadRole}: Prop
           <Role role={downloadRole}>
             {({hasRole}) => (
               <Tooltip
-                title={t('You do not have permission to download mappings.')}
+                title={tct(
+                  'Mappings can only be downloaded by users with organization [downloadRole] role[orHigher]. This can be changed in [settingsLink:Debug Files Access] settings.',
+                  {
+                    downloadRole,
+                    orHigher: downloadRole !== 'owner' ? ` ${t('or higher')}` : '',
+                    settingsLink: <Link to={`/settings/${orgSlug}/#debugFilesRole`} />,
+                  }
+                )}
                 disabled={hasRole}
+                isHoverable
               >
                 <Button
                   size="small"

static/app/views/settings/projectSourceMaps/detail/index.tsx

@@ -142,6 +142,7 @@ class ProjectSourceMapsDetail extends AsyncView<Props, State> {
           onDelete={this.handleArtifactDelete}
           downloadUrl={`${artifactApiUrl}${artifact.id}/?download=1`}
           downloadRole={organization.debugFilesRole}
+          orgSlug={organization.slug}
         />
       );
     });

static/app/views/settings/projectSourceMaps/detail/sourceMapsArtifactRow.tsx

@@ -7,11 +7,12 @@ import Button from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import Confirm from 'sentry/components/confirm';
 import FileSize from 'sentry/components/fileSize';
+import Link from 'sentry/components/links/link';
 import Tag from 'sentry/components/tag';
 import TimeSince from 'sentry/components/timeSince';
 import Tooltip from 'sentry/components/tooltip';
 import {IconClock, IconDelete, IconDownload} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import {Artifact} from 'sentry/types';
 
@@ -20,6 +21,7 @@ type Props = {
   downloadRole: string;
   downloadUrl: string;
   onDelete: (id: string) => void;
+  orgSlug: string;
 };
 
 const SourceMapsArtifactRow = ({
@@ -27,6 +29,7 @@ const SourceMapsArtifactRow = ({
   onDelete,
   downloadUrl,
   downloadRole,
+  orgSlug,
 }: Props) => {
   const {name, size, dateCreated, id, dist} = artifact;
 
@@ -59,8 +62,16 @@ const SourceMapsArtifactRow = ({
           <Role role={downloadRole}>
             {({hasRole}) => (
               <Tooltip
-                title={t('You do not have permission to download artifacts.')}
+                title={tct(
+                  'Artifacts can only be downloaded by users with organization [downloadRole] role[orHigher]. This can be changed in [settingsLink:Debug Files Access] settings.',
+                  {
+                    downloadRole,
+                    orHigher: downloadRole !== 'owner' ? ` ${t('or higher')}` : '',
+                    settingsLink: <Link to={`/settings/${orgSlug}/#debugFilesRole`} />,
+                  }
+                )}
                 disabled={hasRole}
+                isHoverable
               >
                 <Button
                   size="small"