ref: move accordion to components (#58009)

Closes getsentry/team-replay#242
getsentry · Oct 13, 2023 · 7748425 · 7748425
1 parent b79b9c3
commit 7748425
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 25 deletions.
diff --git a/...ing/widgets/components/accordion.spec.tsx → ...p/components/accordion/accordion.spec.tsx b/...ing/widgets/components/accordion.spec.tsx → ...p/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/.../landing/widgets/components/accordion.tsx → ...ic/app/components/accordion/accordion.tsx b/.../landing/widgets/components/accordion.tsx → ...ic/app/components/accordion/accordion.tsx
@@ -16,13 +16,15 @@ interface Props {
  items: AccordionItemContent[];
  setExpandedIndex: (index: number) => void;
  buttonOnLeft?: boolean;
+ collapsible?: boolean;
 }
 
 export default function Accordion({
  expandedIndex,
  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,27 +52,43 @@ function AccordionItem({
  setExpandedIndex,
  content,
  buttonOnLeft,
+ collapsible,
 }: {
  children: ReactNode;
  content: ReactNode;
  currentIndex: number;
  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 => {