Browse Source

fix(ui): Sentry Apps: Vertical CircularIndicator and capitalize (#36576)

For instance, when loading the Linear app, the circular indicator would not line up with the text.

You can see this working by running `yarn dev-ui` (sign in with a non-SSO org) and load this page:
https://localhost:7999/settings/sentry-ecosystem/sentry-apps/linear/

This also capitalizes the name of the app when the installing/uninstalling apps.

Fixes Jira ticket: API-1173
Armen Zambrano G 2 years ago
parent
commit
4ac733b00c

+ 3 - 1
static/app/actionCreators/sentryAppInstallations.tsx

@@ -49,9 +49,11 @@ export function uninstallSentryApp(
   const promise = client.requestPromise(`/sentry-app-installations/${install.uuid}/`, {
     method: 'DELETE',
   });
+  const capitalizedAppSlug =
+    install.app.slug.charAt(0).toUpperCase() + install.app.slug.slice(1);
   promise.then(
     () => {
-      addSuccessMessage(t(`${install.app.slug} successfully uninstalled.`));
+      addSuccessMessage(t(`${capitalizedAppSlug} successfully uninstalled.`));
     },
     () => clearIndicators()
   );

+ 4 - 2
static/app/views/organizationIntegrations/sentryAppDetailedView.tsx

@@ -237,12 +237,14 @@ class SentryAppDetailedView extends AbstractIntegrationDetailedView<
 
   renderTopButton(disabledFromFeatures: boolean, userHasAccess: boolean) {
     const install = this.install;
+    const capitalizedSlug =
+      this.integrationSlug.charAt(0).toUpperCase() + this.integrationSlug.slice(1);
     if (install) {
       return (
         <Confirm
           disabled={!userHasAccess}
           message={tct('Are you sure you want to remove the [slug] installation?', {
-            slug: this.integrationSlug,
+            slug: capitalizedSlug,
           })}
           onConfirm={() => this.handleUninstall(install)} // called when the user confirms the action
           onConfirming={this.recordUninstallClicked} // called when the confirm modal opens
@@ -302,7 +304,7 @@ const Title = styled('p')`
 `;
 
 const Indicator = styled(p => <CircleIndicator size={7} {...p} />)`
-  margin-top: 3px;
+  align-self: center;
   color: ${p => p.theme.success};
 `;