ref(feedback): allow tags section to be expanded/collapsed (#63030)

Now there's a button that says "expand tags" or "collapse tags" (it's
collapsed by default) in the tags section. The "collapse" shows a
preview of 3 tags.


https://github.com/getsentry/sentry/assets/56095982/a5a3ec21-a38c-4f3b-bffc-9314752706b0

Also margin at the bottom of the feedback item is increased, so there's
less overlap with the "Give Feedback" floating button.

Closes https://github.com/getsentry/team-replay/issues/340
Closes https://github.com/getsentry/sentry/issues/63027

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

@@ -1,6 +1,7 @@
-import {Fragment} from 'react';
+import {Fragment, useState} 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';
@@ -35,6 +36,8 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
   const replayId = eventData?.contexts?.feedback?.replay_id;
   const crashReportId = eventData?.contexts?.feedback?.associated_event_id;
 
+  const [isHidden, setIsHidden] = useState(true);
+
   return (
     <Fragment>
       <FeedbackItemHeader eventData={eventData} feedbackItem={feedbackItem} />
@@ -83,8 +86,16 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
           </Section>
         )}
 
-        <Section icon={<IconTag size="xs" />} title={t('Tags')}>
-          <TagsSection tags={tags} />
+        <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>
 
         <Section icon={<IconChat size="xs" />} title={t('Activity')}>
@@ -101,6 +112,7 @@ const OverflowPanelItem = styled(PanelItem)`
   flex-direction: column;
   flex-grow: 1;
   gap: ${space(4)};
+  padding: ${space(2)} ${space(3)} 50px ${space(3)};
 `;
 
 const SmallTitle = styled('span')`

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

@@ -1,16 +1,25 @@
 import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
 import TextOverflow from 'sentry/components/textOverflow';
 import {Tooltip} from 'sentry/components/tooltip';
+import {space} from 'sentry/styles/space';
 
 interface Props {
   tags: Record<string, string>;
+  collapsed?: boolean;
 }
 
-export default function TagsSection({tags}: Props) {
+export default function TagsSection({tags, collapsed}: Props) {
   const entries = Object.entries(tags);
 
   return (
-    <KeyValueTable noMargin>
+    <KeyValueTable
+      noMargin
+      style={
+        collapsed
+          ? {maxHeight: '90px', overflow: 'hidden', marginBottom: `${space(1)}`}
+          : undefined
+      }
+    >
       {entries.map(([key, value]) => (
         <KeyValueTableRow
           key={key}