ref(feedback): change position of tags expand/collapse button (#63355)

The original tags button was hard to see/discover, so let's change the
color and also move it to a more obvious spot.





https://github.com/getsentry/sentry/assets/56095982/d32ada91-0bfa-4b98-ad28-f73323757952

Author: michellewzhang

static/app/components/feedback/feedbackItem/feedbackItem.tsx

@@ -1,7 +1,6 @@
-import {Fragment, useState} from 'react';
+import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import {Button} from 'sentry/components/button';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import CrashReportSection from 'sentry/components/feedback/feedbackItem/crashReportSection';
 import FeedbackActivitySection from 'sentry/components/feedback/feedbackItem/feedbackActivitySection';
@@ -40,7 +39,6 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
   const crashReportId = eventData?.contexts?.feedback?.associated_event_id;
 
   const {hasSentOneReplay} = useHaveSelectedProjectsSentAnyReplayEvents();
-  const [isHidden, setIsHidden] = useState(true);
   const platformSupported = replayPlatforms.includes(feedbackItem.platform);
 
   return (
@@ -95,16 +93,8 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
           </Section>
         )}
 
-        <Section
-          icon={<IconTag size="xs" />}
-          title={t('Tags')}
-          contentRight={
-            <Button borderless onClick={() => setIsHidden(!isHidden)}>
-              {isHidden ? t('Expand Tags') : t('Collapse Tags')}
-            </Button>
-          }
-        >
-          {isHidden ? <TagsSection tags={tags} collapsed /> : <TagsSection tags={tags} />}
+        <Section icon={<IconTag size="xs" />} title={t('Tags')}>
+          <TagsSection tags={tags} />
         </Section>
 
         <Section icon={<IconChat size="xs" />} title={t('Activity')}>

static/app/components/feedback/feedbackItem/tagsSection.tsx

@@ -1,36 +1,52 @@
+import styled from '@emotion/styled';
+
+import {Button} from 'sentry/components/button';
+import Collapsible from 'sentry/components/collapsible';
 import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
 import TextOverflow from 'sentry/components/textOverflow';
 import {Tooltip} from 'sentry/components/tooltip';
+import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 
 interface Props {
   tags: Record<string, string>;
-  collapsed?: boolean;
 }
 
-export default function TagsSection({tags, collapsed}: Props) {
+export default function TagsSection({tags}: Props) {
   const entries = Object.entries(tags);
 
   return (
-    <KeyValueTable
-      noMargin
-      style={
-        collapsed
-          ? {maxHeight: '90px', overflow: 'hidden', marginBottom: `${space(1)}`}
-          : undefined
-      }
-    >
-      {entries.map(([key, value]) => (
-        <KeyValueTableRow
-          key={key}
-          keyName={key}
-          value={
-            <Tooltip showOnlyOnOverflow title={value}>
-              <TextOverflow>{value}</TextOverflow>
-            </Tooltip>
-          }
-        />
-      ))}
+    <KeyValueTable noMargin>
+      <Collapsible
+        maxVisibleItems={3}
+        collapseButton={({onCollapse}) => (
+          <StyledButton priority="primary" size="xs" onClick={onCollapse}>
+            {t('Collapse tags')}
+          </StyledButton>
+        )}
+        expandButton={({onExpand}) => (
+          <StyledButton priority="primary" size="xs" onClick={onExpand}>
+            {t('See all tags')}
+          </StyledButton>
+        )}
+      >
+        {entries.map(([key, value]) => (
+          <KeyValueTableRow
+            key={key}
+            keyName={key}
+            value={
+              <Tooltip showOnlyOnOverflow title={value}>
+                <TextOverflow>{value}</TextOverflow>
+              </Tooltip>
+            }
+          />
+        ))}
+      </Collapsible>
     </KeyValueTable>
   );
 }
+
+const StyledButton = styled(Button)`
+  margin-top: ${space(1)};
+  width: 150px;
+`;