ref: move accordion to components (#58009)

Closes https://github.com/getsentry/team-replay/issues/242

static/app/views/performance/landing/widgets/components/accordion.spec.tsx → 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>},

static/app/views/performance/landing/widgets/components/accordion.tsx → 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>

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,

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,

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,

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,

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 => {