From 77484257adf9dc623f39a2f75763ba20b2952900 Mon Sep 17 00:00:00 2001
From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>
Date: Fri, 13 Oct 2023 09:54:46 -0700
Subject: [PATCH] ref: move accordion to components (#58009)

Closes https://github.com/getsentry/team-replay/issues/242
---
 .../accordion}/accordion.spec.tsx             |  2 +-
 .../accordion}/accordion.tsx                  | 49 ++++++++++++-------
 .../widgets/widgets/lineChartListWidget.tsx   |  2 +-
 .../widgets/stackedAreaChartListWidget.tsx    |  2 +-
 .../landing/widgets/widgets/trendsWidget.tsx  |  2 +-
 .../landing/widgets/widgets/vitalWidget.tsx   |  2 +-
 .../deadRageClick/deadRageSelectorCards.tsx   |  3 +-
 7 files changed, 37 insertions(+), 25 deletions(-)
 rename static/app/{views/performance/landing/widgets/components => components/accordion}/accordion.spec.tsx (91%)
 rename static/app/{views/performance/landing/widgets/components => components/accordion}/accordion.tsx (76%)

diff --git a/static/app/views/performance/landing/widgets/components/accordion.spec.tsx b/static/app/components/accordion/accordion.spec.tsx
similarity index 91%
rename from static/app/views/performance/landing/widgets/components/accordion.spec.tsx
rename to static/app/components/accordion/accordion.spec.tsx
index 75d33806d26fac..d868a58f37dd44 100644
--- a/static/app/views/performance/landing/widgets/components/accordion.spec.tsx
+++ b/static/app/components/accordion/accordion.spec.tsx
@@ -1,6 +1,6 @@
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
-import Accordion from 'sentry/views/performance/landing/widgets/components/accordion';
+import Accordion from 'sentry/components/accordion/accordion';
 
 const items = [
   {header: () => <p>header</p>, content: () => <p>first content</p>},
diff --git a/static/app/views/performance/landing/widgets/components/accordion.tsx b/static/app/components/accordion/accordion.tsx
similarity index 76%
rename from static/app/views/performance/landing/widgets/components/accordion.tsx
rename to static/app/components/accordion/accordion.tsx
index e0f6a63f5c5908..53a6297f51e7af 100644
--- a/static/app/views/performance/landing/widgets/components/accordion.tsx
+++ b/static/app/components/accordion/accordion.tsx
@@ -16,6 +16,7 @@ interface Props {
   items: AccordionItemContent[];
   setExpandedIndex: (index: number) => void;
   buttonOnLeft?: boolean;
+  collapsible?: boolean;
 }
 
 export default function Accordion({
@@ -23,6 +24,7 @@ export default function Accordion({
   setExpandedIndex,
   items,
   buttonOnLeft,
+  collapsible = true,
 }: Props) {
   return (
     <AccordionContainer>
@@ -34,6 +36,7 @@ export default function Accordion({
           content={item.content()}
           setExpandedIndex={setExpandedIndex}
           buttonOnLeft={buttonOnLeft}
+          collapsible={collapsible}
         >
           {item.header()}
         </AccordionItem>
@@ -49,6 +52,7 @@ function AccordionItem({
   setExpandedIndex,
   content,
   buttonOnLeft,
+  collapsible,
 }: {
   children: ReactNode;
   content: ReactNode;
@@ -56,20 +60,35 @@ function AccordionItem({
   isExpanded: boolean;
   setExpandedIndex: (index: number) => void;
   buttonOnLeft?: boolean;
+  collapsible?: boolean;
 }) {
+  const button = collapsible ? (
+    <Button
+      icon={<IconChevron size="xs" direction={isExpanded ? 'up' : 'down'} />}
+      aria-label={isExpanded ? t('Collapse') : t('Expand')}
+      aria-expanded={isExpanded}
+      size="zero"
+      borderless
+      onClick={() => {
+        isExpanded ? setExpandedIndex(-1) : setExpandedIndex(index);
+      }}
+    />
+  ) : (
+    <Button
+      icon={<IconChevron size="xs" direction={isExpanded ? 'up' : 'down'} />}
+      aria-label={t('Expand')}
+      aria-expanded={isExpanded}
+      disabled={isExpanded}
+      size="zero"
+      borderless
+      onClick={() => setExpandedIndex(index)}
+    />
+  );
+
   return buttonOnLeft ? (
     <StyledLineItem>
       <ButtonLeftListItemContainer>
-        <Button
-          icon={<IconChevron size="xs" direction={isExpanded ? 'up' : 'down'} />}
-          aria-label={isExpanded ? t('Collapse') : t('Expand')}
-          aria-expanded={isExpanded}
-          size="zero"
-          borderless
-          onClick={() => {
-            isExpanded ? setExpandedIndex(-1) : setExpandedIndex(index);
-          }}
-        />
+        {button}
         {children}
       </ButtonLeftListItemContainer>
       <LeftContentContainer>{isExpanded && content}</LeftContentContainer>
@@ -78,15 +97,7 @@ function AccordionItem({
     <StyledLineItem>
       <ListItemContainer>
         {children}
-        <Button
-          icon={<IconChevron size="xs" direction={isExpanded ? 'up' : 'down'} />}
-          aria-label={t('Expand')}
-          aria-expanded={isExpanded}
-          disabled={isExpanded}
-          size="zero"
-          borderless
-          onClick={() => setExpandedIndex(index)}
-        />
+        {button}
       </ListItemContainer>
       <StyledContentContainer>{isExpanded && content}</StyledContentContainer>
     </StyledLineItem>
diff --git a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx
index 897da6bef3ee50..cf89c6cc5a15f3 100644
--- a/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx
+++ b/static/app/views/performance/landing/widgets/widgets/lineChartListWidget.tsx
@@ -2,6 +2,7 @@ import {Fragment, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 import pick from 'lodash/pick';
 
+import Accordion from 'sentry/components/accordion/accordion';
 import {LinkButton} from 'sentry/components/button';
 import _EventsRequest from 'sentry/components/charts/eventsRequest';
 import {getInterval} from 'sentry/components/charts/utils';
@@ -35,7 +36,6 @@ import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/cons
 import {RoutingContextProvider} from 'sentry/views/starfish/utils/routingContext';
 
 import {excludeTransaction} from '../../utils';
-import Accordion from '../components/accordion';
 import {GenericPerformanceWidget} from '../components/performanceWidget';
 import SelectableList, {
   GrowLink,
diff --git a/static/app/views/performance/landing/widgets/widgets/stackedAreaChartListWidget.tsx b/static/app/views/performance/landing/widgets/widgets/stackedAreaChartListWidget.tsx
index e95c342e6b2c7d..2314197899e5c7 100644
--- a/static/app/views/performance/landing/widgets/widgets/stackedAreaChartListWidget.tsx
+++ b/static/app/views/performance/landing/widgets/widgets/stackedAreaChartListWidget.tsx
@@ -2,6 +2,7 @@ import {Fragment, useMemo, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import pick from 'lodash/pick';
 
+import Accordion from 'sentry/components/accordion/accordion';
 import _EventsRequest from 'sentry/components/charts/eventsRequest';
 import StackedAreaChart from 'sentry/components/charts/stackedAreaChart';
 import {getInterval} from 'sentry/components/charts/utils';
@@ -29,7 +30,6 @@ import {
   UNPARAMETERIZED_TRANSACTION,
 } from 'sentry/views/performance/utils';
 
-import Accordion from '../components/accordion';
 import {GenericPerformanceWidget} from '../components/performanceWidget';
 import {
   GrowLink,
diff --git a/static/app/views/performance/landing/widgets/widgets/trendsWidget.tsx b/static/app/views/performance/landing/widgets/widgets/trendsWidget.tsx
index 4acbb710aa25ba..de7c7c136d049c 100644
--- a/static/app/views/performance/landing/widgets/widgets/trendsWidget.tsx
+++ b/static/app/views/performance/landing/widgets/widgets/trendsWidget.tsx
@@ -1,5 +1,6 @@
 import {Fragment, useMemo, useState} from 'react';
 
+import Accordion from 'sentry/components/accordion/accordion';
 import {Button} from 'sentry/components/button';
 import Truncate from 'sentry/components/truncate';
 import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
@@ -25,7 +26,6 @@ import {
 import {Chart} from '../../../trends/chart';
 import {TrendChangeType, TrendFunctionField} from '../../../trends/types';
 import {excludeTransaction} from '../../utils';
-import Accordion from '../components/accordion';
 import {GenericPerformanceWidget} from '../components/performanceWidget';
 import SelectableList, {
   GrowLink,
diff --git a/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx b/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx
index 64cb768fce9b0f..6b6518651ff5fd 100644
--- a/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx
+++ b/static/app/views/performance/landing/widgets/widgets/vitalWidget.tsx
@@ -2,6 +2,7 @@ import {Fragment, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 import pick from 'lodash/pick';
 
+import Accordion from 'sentry/components/accordion/accordion';
 import {Button} from 'sentry/components/button';
 import _EventsRequest from 'sentry/components/charts/eventsRequest';
 import {getInterval} from 'sentry/components/charts/utils';
@@ -35,7 +36,6 @@ import {_VitalChart} from 'sentry/views/performance/vitalDetail/vitalChart';
 
 import {excludeTransaction} from '../../utils';
 import {VitalBar} from '../../vitalsCards';
-import Accordion from '../components/accordion';
 import {GenericPerformanceWidget} from '../components/performanceWidget';
 import SelectableList, {
   GrowLink,
diff --git a/static/app/views/replays/deadRageClick/deadRageSelectorCards.tsx b/static/app/views/replays/deadRageClick/deadRageSelectorCards.tsx
index d20e0e9b85a14d..f851d3b4d7caa1 100644
--- a/static/app/views/replays/deadRageClick/deadRageSelectorCards.tsx
+++ b/static/app/views/replays/deadRageClick/deadRageSelectorCards.tsx
@@ -1,6 +1,7 @@
 import {ComponentProps, ReactNode, useState} from 'react';
 import styled from '@emotion/styled';
 
+import Accordion from 'sentry/components/accordion/accordion';
 import {LinkButton} from 'sentry/components/button';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import FeatureBadge from 'sentry/components/featureBadge';
@@ -15,7 +16,6 @@ import {ColorOrAlias} from 'sentry/utils/theme';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import Accordion from 'sentry/views/performance/landing/widgets/components/accordion';
 import {
   ContentContainer,
   HeaderContainer,
@@ -130,6 +130,7 @@ function AccordionWidget({
         <LeftAlignedContentContainer>
           <Accordion
             buttonOnLeft
+            collapsible
             expandedIndex={selectedListIndex}
             setExpandedIndex={setSelectListIndex}
             items={filteredData.map(d => {