fix(sidebar): Identical view buttons for the sections (#83858)

All three sections, activity, merged, similar issues all have the same
buttons. Gonna handle the solutions hub changes separately.

<img width="337" alt="image"
src="https://github.com/user-attachments/assets/2fa4df19-09bf-4bee-8a48-86ec61fbede9"
/>

Author: leeandher

static/app/views/issueDetails/streamline/sidebar/activitySection.tsx

@@ -30,6 +30,7 @@ import {groupActivityTypeIconMapping} from 'sentry/views/issueDetails/streamline
 import getGroupActivityItem from 'sentry/views/issueDetails/streamline/sidebar/groupActivityItem';
 import {NoteDropdown} from 'sentry/views/issueDetails/streamline/sidebar/noteDropdown';
 import {SidebarSectionTitle} from 'sentry/views/issueDetails/streamline/sidebar/sidebar';
+import {ViewButton} from 'sentry/views/issueDetails/streamline/sidebar/viewButton';
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 
@@ -225,9 +226,7 @@ export default function StreamlinedActivitySection({
       {!isDrawer && (
         <Flex justify="space-between" align="center">
           <SidebarSectionTitle>{t('Activity')}</SidebarSectionTitle>
-          <TextLinkButton
-            borderless
-            size="zero"
+          <ViewButton
             aria-label={t('Open activity drawer')}
             to={{
               pathname: `${baseUrl}${TabPaths[Tab.ACTIVITY]}`,
@@ -243,7 +242,7 @@ export default function StreamlinedActivitySection({
             }}
           >
             {t('View')}
-          </TextLinkButton>
+          </ViewButton>
         </Flex>
       )}
       <Timeline.Container>
@@ -336,12 +335,6 @@ const Timestamp = styled(TimeSince)`
   white-space: nowrap;
 `;
 
-const TextLinkButton = styled(LinkButton)`
-  font-weight: ${p => p.theme.fontWeightNormal};
-  font-size: ${p => p.theme.fontSizeSmall};
-  color: ${p => p.theme.subText};
-`;
-
 const RotatedEllipsisIcon = styled(IconEllipsis)`
   transform: rotate(90deg) translateY(1px);
 `;

static/app/views/issueDetails/streamline/sidebar/mergedSidebarSection.tsx

@@ -1,10 +1,8 @@
-import styled from '@emotion/styled';
-
-import {LinkButton} from 'sentry/components/button';
 import {Flex} from 'sentry/components/container/flex';
 import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
 import {SidebarSectionTitle} from 'sentry/views/issueDetails/streamline/sidebar/sidebar';
+import {ViewButton} from 'sentry/views/issueDetails/streamline/sidebar/viewButton';
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 
@@ -15,23 +13,16 @@ export function MergedIssuesSidebarSection() {
   return (
     <Flex justify="space-between" align="center">
       <SidebarSectionTitle style={{margin: 0}}>{t('Merged Issues')}</SidebarSectionTitle>
-      <SectionButton
+      <ViewButton
         aria-label={t('View Merged Issues')}
-        priority="link"
-        size="zero"
         to={{
           pathname: `${baseUrl}${TabPaths[Tab.MERGED]}`,
           query: location.query,
           replace: true,
         }}
       >
         {t('View')}
-      </SectionButton>
+      </ViewButton>
     </Flex>
   );
 }
-
-const SectionButton = styled(LinkButton)`
-  color: ${p => p.theme.subText};
-  line-height: 1;
-`;

static/app/views/issueDetails/streamline/sidebar/similarIssuesSidebarSection.tsx

@@ -1,10 +1,8 @@
-import styled from '@emotion/styled';
-
-import {LinkButton} from 'sentry/components/button';
 import {Flex} from 'sentry/components/container/flex';
 import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
 import {SidebarSectionTitle} from 'sentry/views/issueDetails/streamline/sidebar/sidebar';
+import {ViewButton} from 'sentry/views/issueDetails/streamline/sidebar/viewButton';
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useGroupDetailsRoute} from 'sentry/views/issueDetails/useGroupDetailsRoute';
 
@@ -15,23 +13,16 @@ export function SimilarIssuesSidebarSection() {
   return (
     <Flex justify="space-between" align="center">
       <SidebarSectionTitle style={{margin: 0}}>{t('Similar Issues')}</SidebarSectionTitle>
-      <SectionButton
+      <ViewButton
         aria-label={t('View Similar Issues')}
-        priority="link"
-        size="zero"
         to={{
           pathname: `${baseUrl}${TabPaths[Tab.SIMILAR_ISSUES]}`,
           query: location.query,
           replace: true,
         }}
       >
         {t('View')}
-      </SectionButton>
+      </ViewButton>
     </Flex>
   );
 }
-
-const SectionButton = styled(LinkButton)`
-  color: ${p => p.theme.subText};
-  line-height: 1;
-`;

static/app/views/issueDetails/streamline/sidebar/viewButton.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+import {LinkButton, type LinkButtonProps} from 'sentry/components/button';
+import {space} from 'sentry/styles/space';
+
+export function ViewButton({children, ...props}: LinkButtonProps) {
+  return (
+    <TextButton borderless size="zero" {...props}>
+      {children}
+    </TextButton>
+  );
+}
+
+const TextButton = styled(LinkButton)`
+  font-weight: ${p => p.theme.fontWeightNormal};
+  font-size: ${p => p.theme.fontSizeSmall};
+  color: ${p => p.theme.subText};
+  padding: ${space(0.25)} ${space(0.5)};
+`;