feat(errors): create errors toolbar components

Author: nikkikapadia

static/app/views/explore/errors/body.tsx

@@ -5,6 +5,7 @@ import {
   ExploreContentSection,
   ExploreControlSection,
 } from 'sentry/views/explore/components/styles';
+import {ErrorsToolbar} from 'sentry/views/explore/errors/toolbar';
 import {ChevronButton} from 'sentry/views/explore/spans/spansTab';
 
 interface ErrorsControlSectionProps {
@@ -14,7 +15,11 @@ interface ErrorsControlSectionProps {
 export function ErrorsControlSection({
   controlSectionExpanded,
 }: ErrorsControlSectionProps) {
-  return <ExploreControlSection expanded={controlSectionExpanded} />;
+  return (
+    <ExploreControlSection expanded={controlSectionExpanded}>
+      <ErrorsToolbar />
+    </ExploreControlSection>
+  );
 }
 
 interface ErrorsContentSectionProps {

static/app/views/explore/errors/toolbar/errorsToolbarGroupBy.tsx

@@ -0,0 +1,36 @@
+import {
+  ToolbarFooter,
+  ToolbarSection,
+} from 'sentry/views/explore/components/toolbar/styles';
+import {
+  ToolbarGroupByAddGroupBy,
+  ToolbarGroupByDropdown,
+  ToolbarGroupByHeader,
+} from 'sentry/views/explore/components/toolbar/toolbarGroupBy';
+
+export function ErrorsToolbarGroupBy() {
+  return (
+    <ToolbarSection data-test-id="section-group-by">
+      <ToolbarGroupByHeader />
+      <ToolbarGroupByItem />
+      <ToolbarFooter>
+        <ToolbarGroupByAddGroupBy add={() => {}} disabled={false} />
+      </ToolbarFooter>
+    </ToolbarSection>
+  );
+}
+
+function ToolbarGroupByItem() {
+  return (
+    <ToolbarGroupByDropdown
+      column={{column: '', id: 0, uniqueId: '0'}}
+      options={[{label: '-', value: '', textValue: '-'}]}
+      loading={false}
+      onClose={() => {}}
+      onSearch={() => {}}
+      canDelete={false}
+      onColumnChange={() => {}}
+      onColumnDelete={() => {}}
+    />
+  );
+}

static/app/views/explore/errors/toolbar/errorsToolbarSortBy.tsx

@@ -0,0 +1,40 @@
+import {Tooltip} from '@sentry/scraps/tooltip';
+
+import {t} from 'sentry/locale';
+import {
+  ToolbarHeader,
+  ToolbarLabel,
+  ToolbarRow,
+  ToolbarSection,
+} from 'sentry/views/explore/components/toolbar/styles';
+import {
+  ColumnCompactSelect,
+  DirectionCompactSelect,
+} from 'sentry/views/explore/toolbar/toolbarSortBy';
+
+export function ErrorsToolbarSortBy() {
+  return (
+    <ToolbarSection data-test-id="section-sort-by">
+      <ToolbarHeader>
+        <Tooltip
+          position="right"
+          title={t('Results you see first and last in your samples or aggregates.')}
+        >
+          <ToolbarLabel disabled={false}>{t('Sort By')}</ToolbarLabel>
+        </Tooltip>
+      </ToolbarHeader>
+      <ToolbarRow>
+        <ColumnCompactSelect options={[]} value="" onChange={() => {}} disabled={false} />
+        <DirectionCompactSelect
+          options={[
+            {label: 'Desc', value: 'desc', textValue: 'desc'},
+            {label: 'Asc', value: 'asc', textValue: 'asc'},
+          ]}
+          value="desc"
+          onChange={() => {}}
+          disabled={false}
+        />
+      </ToolbarRow>
+    </ToolbarSection>
+  );
+}

static/app/views/explore/errors/toolbar/errorsToolbarVisualize.tsx

@@ -0,0 +1,42 @@
+import {Tooltip} from '@sentry/scraps/tooltip';
+
+import {t} from 'sentry/locale';
+import {
+  ToolbarFooter,
+  ToolbarHeader,
+  ToolbarLabel,
+  ToolbarSection,
+} from 'sentry/views/explore/components/toolbar/styles';
+import {
+  ToolbarVisualizeAddChart,
+  ToolbarVisualizeAddEquation,
+} from 'sentry/views/explore/components/toolbar/toolbarVisualize';
+import {ErrorsToolbarVisualizeItem as ToolbarVisualizeItem} from 'sentry/views/explore/errors/toolbar/errorsToolbarVisualizeItem';
+
+export function ErrorsToolbarVisualize() {
+  return (
+    <ToolbarSection data-test-id="section-visualizes">
+      <ToolbarVisualizeHeader />
+      <ToolbarVisualizeItem />
+      <ToolbarFooter>
+        <ToolbarVisualizeAddChart add={() => {}} disabled={false} />
+        <ToolbarVisualizeAddEquation add={() => {}} disabled={false} />
+      </ToolbarFooter>
+    </ToolbarSection>
+  );
+}
+
+function ToolbarVisualizeHeader() {
+  return (
+    <ToolbarHeader>
+      <Tooltip
+        position="right"
+        title={t(
+          'Primary metric that appears in your chart. You can also overlay a series onto an existing chart or add an equation.'
+        )}
+      >
+        <ToolbarLabel>{t('Visualize')}</ToolbarLabel>
+      </Tooltip>
+    </ToolbarHeader>
+  );
+}

static/app/views/explore/errors/toolbar/errorsToolbarVisualizeItem.tsx

@@ -0,0 +1,23 @@
+import {ToolbarVisualizeDropdown} from 'sentry/views/explore/components/toolbar/toolbarVisualize';
+import {VisualizeFunction} from 'sentry/views/explore/queryParams/visualize';
+import {VisualizeLabel} from 'sentry/views/explore/toolbar/toolbarVisualize';
+
+export function ErrorsToolbarVisualizeItem() {
+  const sampleVisualize = new VisualizeFunction('count()', {visible: true});
+  const label = (
+    <VisualizeLabel index={0} visualize={sampleVisualize} onClick={() => {}} />
+  );
+  return (
+    <ToolbarVisualizeDropdown
+      aggregateOptions={[{label: 'Count', value: 'count', textValue: 'count'}]}
+      fieldOptions={[]}
+      onChangeAggregate={() => {}}
+      onChangeArgument={() => {}}
+      parsedFunction={sampleVisualize.parsedFunction}
+      label={label}
+      loading={false}
+      onSearch={() => {}}
+      onClose={() => {}}
+    />
+  );
+}

static/app/views/explore/errors/toolbar/index.spec.tsx

@@ -0,0 +1,40 @@
+import {render, screen, within} from 'sentry-test/reactTestingLibrary';
+
+import {ErrorsToolbar} from 'sentry/views/explore/errors/toolbar';
+
+describe('ErrorsToolbar', () => {
+  it('renders the visualize section', async () => {
+    render(<ErrorsToolbar />);
+
+    const section = await screen.findByTestId('section-visualizes');
+    expect(within(section).getByText('Visualize')).toBeInTheDocument();
+    expect(within(section).getByRole('button', {name: 'Count'})).toBeInTheDocument();
+    expect(within(section).getByRole('button', {name: 'Add Chart'})).toBeInTheDocument();
+    expect(
+      within(section).getByRole('button', {name: 'Add Equation'})
+    ).toBeInTheDocument();
+  });
+
+  it('renders the group by section', async () => {
+    render(<ErrorsToolbar />);
+
+    const section = await screen.findByTestId('section-group-by');
+    expect(within(section).getByTestId('editor-column')).toBeInTheDocument();
+    expect(within(section).getByRole('button', {name: 'Add Group'})).toBeInTheDocument();
+  });
+
+  it('renders the sort by section', async () => {
+    render(<ErrorsToolbar />);
+
+    const section = await screen.findByTestId('section-sort-by');
+    expect(within(section).getByText('Sort By')).toBeInTheDocument();
+    expect(within(section).getByRole('button', {name: 'Desc'})).toBeInTheDocument();
+  });
+
+  it('renders the save as section', async () => {
+    render(<ErrorsToolbar />);
+
+    const section = await screen.findByTestId('section-save-as');
+    expect(within(section).getByRole('button', {name: 'Save as'})).toBeInTheDocument();
+  });
+});

static/app/views/explore/errors/toolbar/index.tsx

@@ -0,0 +1,29 @@
+import {Button} from '@sentry/scraps/button';
+import {Grid, Container} from '@sentry/scraps/layout';
+
+import {t} from 'sentry/locale';
+import {ErrorsToolbarGroupBy} from 'sentry/views/explore/errors/toolbar/errorsToolbarGroupBy';
+import {ErrorsToolbarSortBy} from 'sentry/views/explore/errors/toolbar/errorsToolbarSortBy';
+import {ErrorsToolbarVisualize} from 'sentry/views/explore/errors/toolbar/errorsToolbarVisualize';
+import {SaveStyledToolbarSection} from 'sentry/views/explore/toolbar/toolbarSaveAs';
+
+export function ErrorsToolbar() {
+  return (
+    <Container data-test-id="errors-toolbar">
+      <ErrorsToolbarVisualize />
+      <ErrorsToolbarGroupBy />
+      <ErrorsToolbarSortBy />
+      <ErrorsToolbarSaveAs />
+    </Container>
+  );
+}
+
+function ErrorsToolbarSaveAs() {
+  return (
+    <SaveStyledToolbarSection data-test-id="section-save-as">
+      <Grid flow="column" align="center" gap="md">
+        <Button aria-label={t('Save as')}>{t('Save')}</Button>
+      </Grid>
+    </SaveStyledToolbarSection>
+  );
+}

static/app/views/explore/toolbar/toolbarSaveAs.tsx

@@ -289,7 +289,7 @@ export function ToolbarSaveAs() {
   const canCompareQueries = visualizeFunctions.length >= 2;
 
   return (
-    <StyledToolbarSection data-test-id="section-save-as">
+    <SaveStyledToolbarSection data-test-id="section-save-as">
       <Grid flow="column" align="center" gap="md">
         <Tooltip
           disabled={!hasCrossEvents}
@@ -347,7 +347,7 @@ export function ToolbarSaveAs() {
           {t('Compare Queries')}
         </WideLinkButton>
       </Grid>
-    </StyledToolbarSection>
+    </SaveStyledToolbarSection>
   );
 }
 
@@ -359,7 +359,7 @@ const DisabledText = styled('span')`
   color: ${p => p.theme.tokens.content.disabled};
 `;
 
-const StyledToolbarSection = styled(ToolbarSection)`
+export const SaveStyledToolbarSection = styled(ToolbarSection)`
   border-top: 1px solid ${p => p.theme.tokens.border.primary};
   padding-top: ${p => p.theme.space['2xl']};
 `;

static/app/views/explore/toolbar/toolbarSortBy.tsx

@@ -148,7 +148,7 @@ const FullWidthTooltip = styled(Tooltip)`
   width: 100%;
 `;
 
-const ColumnCompactSelect = styled(CompactSelect)`
+export const ColumnCompactSelect = styled(CompactSelect)`
   flex: 1 1;
   min-width: 0;
 
@@ -157,7 +157,7 @@ const ColumnCompactSelect = styled(CompactSelect)`
   }
 `;
 
-const DirectionCompactSelect = styled(CompactSelect)`
+export const DirectionCompactSelect = styled(CompactSelect)`
   width: 90px;
 
   > button {

static/app/views/explore/toolbar/toolbarVisualize.tsx

@@ -276,7 +276,7 @@ export function getVisualizeLabel(index: number) {
   return String.fromCharCode('A'.charCodeAt(0) + index);
 }
 
-function VisualizeLabel({index, onClick, visualize}: VisualizeLabelProps) {
+export function VisualizeLabel({index, onClick, visualize}: VisualizeLabelProps) {
   const label = visualize.visible ? getVisualizeLabel(index) : <IconHide />;
 
   return <Label onClick={onClick}>{label}</Label>;