ref(explore): Move toolbar components into own file (#76183)

As each component will get more complex, move them into separate files
to be worked on independently.

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

@@ -1,6 +1,8 @@
-import {t} from 'sentry/locale';
-
-import {ToolbarHeading, ToolbarSection} from './styles';
+import {ToolbarGroupBy} from './toolbarGroupBy';
+import {ToolbarLimitTo} from './toolbarLimitTo';
+import {ToolbarResults} from './toolbarResults';
+import {ToolbarSortBy} from './toolbarSortBy';
+import {ToolbarVisualize} from './toolbarVisualize';
 
 interface ExploreToolbarProps {}
 
@@ -15,55 +17,3 @@ export function ExploreToolbar({}: ExploreToolbarProps) {
     </div>
   );
 }
-
-interface ToolbarResultsProps {}
-
-function ToolbarResults({}: ToolbarResultsProps) {
-  return (
-    <ToolbarSection>
-      <ToolbarHeading>{t('Results')}</ToolbarHeading>
-    </ToolbarSection>
-  );
-}
-
-interface ToolbarVisualizeProps {}
-
-function ToolbarVisualize({}: ToolbarVisualizeProps) {
-  return (
-    <ToolbarSection>
-      <ToolbarHeading>{t('Visualize')}</ToolbarHeading>
-    </ToolbarSection>
-  );
-}
-
-interface ToolbarSortByProps {}
-
-function ToolbarSortBy({}: ToolbarSortByProps) {
-  return (
-    <ToolbarSection>
-      <ToolbarHeading>{t('Sort By')}</ToolbarHeading>
-    </ToolbarSection>
-  );
-}
-
-interface ToolbarLimitToProps {}
-
-function ToolbarLimitTo({}: ToolbarLimitToProps) {
-  return (
-    <ToolbarSection>
-      <ToolbarHeading>{t('Limit To')}</ToolbarHeading>
-    </ToolbarSection>
-  );
-}
-
-interface ToolbarGroupByProps {
-  disabled?: boolean;
-}
-
-function ToolbarGroupBy({disabled}: ToolbarGroupByProps) {
-  return (
-    <ToolbarSection>
-      <ToolbarHeading disabled={disabled}>{t('Group By')}</ToolbarHeading>
-    </ToolbarSection>
-  );
-}

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

@@ -1,6 +1,10 @@
 import styled from '@emotion/styled';
 
-export const ToolbarSection = styled('div')``;
+import {space} from 'sentry/styles/space';
+
+export const ToolbarSection = styled('div')`
+  margin-bottom: ${space(2)};
+`;
 
 export const ToolbarHeading = styled('h6')<{disabled?: boolean}>`
   color: ${p => (p.disabled ? p.theme.gray300 : p.theme.purple300)};
@@ -10,4 +14,5 @@ export const ToolbarHeading = styled('h6')<{disabled?: boolean}>`
   line-height: ${p => p.theme.form.md.lineHeight};
   text-decoration: underline dotted
     ${p => (p.disabled ? p.theme.gray300 : p.theme.purple300)};
+  margin: 0 0 ${space(1)} 0;
 `;

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

@@ -0,0 +1,15 @@
+import {t} from 'sentry/locale';
+
+import {ToolbarHeading, ToolbarSection} from './styles';
+
+interface ToolbarGroupByProps {
+  disabled?: boolean;
+}
+
+export function ToolbarGroupBy({disabled}: ToolbarGroupByProps) {
+  return (
+    <ToolbarSection>
+      <ToolbarHeading disabled={disabled}>{t('Group By')}</ToolbarHeading>
+    </ToolbarSection>
+  );
+}

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

@@ -0,0 +1,13 @@
+import {t} from 'sentry/locale';
+
+import {ToolbarHeading, ToolbarSection} from './styles';
+
+interface ToolbarLimitToProps {}
+
+export function ToolbarLimitTo({}: ToolbarLimitToProps) {
+  return (
+    <ToolbarSection>
+      <ToolbarHeading>{t('Limit To')}</ToolbarHeading>
+    </ToolbarSection>
+  );
+}

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

@@ -0,0 +1,13 @@
+import {t} from 'sentry/locale';
+
+import {ToolbarHeading, ToolbarSection} from './styles';
+
+interface ToolbarResultsProps {}
+
+export function ToolbarResults({}: ToolbarResultsProps) {
+  return (
+    <ToolbarSection data-test-id="section-result-mode">
+      <ToolbarHeading>{t('Results')}</ToolbarHeading>
+    </ToolbarSection>
+  );
+}

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

@@ -0,0 +1,13 @@
+import {t} from 'sentry/locale';
+
+import {ToolbarHeading, ToolbarSection} from './styles';
+
+interface ToolbarSortByProps {}
+
+export function ToolbarSortBy({}: ToolbarSortByProps) {
+  return (
+    <ToolbarSection data-test-id="section-sort-by">
+      <ToolbarHeading>{t('Sort By')}</ToolbarHeading>
+    </ToolbarSection>
+  );
+}

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

@@ -0,0 +1,13 @@
+import {t} from 'sentry/locale';
+
+import {ToolbarHeading, ToolbarSection} from './styles';
+
+interface ToolbarVisualizeProps {}
+
+export function ToolbarVisualize({}: ToolbarVisualizeProps) {
+  return (
+    <ToolbarSection>
+      <ToolbarHeading>{t('Visualize')}</ToolbarHeading>
+    </ToolbarSection>
+  );
+}