Extract common step components into new file

Author: malwilley

static/app/views/automations/components/actionFilterBlock.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
 import {Container, Flex} from '@sentry/scraps/layout';
-import {Select} from '@sentry/scraps/select';
 
 import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import {ConditionBadge} from 'sentry/components/workflowEngine/ui/conditionBadge';
@@ -26,6 +25,11 @@ import {
   validateActions,
 } from 'sentry/views/automations/components/automationFormData';
 import {DataConditionNodeList} from 'sentry/views/automations/components/dataConditionNodeList';
+import {
+  EmbeddedSelectField,
+  Step,
+  StepLead,
+} from 'sentry/views/automations/components/stepComponents';
 import {useSendTestNotification as useSendTestNotificationMutation} from 'sentry/views/automations/hooks';
 import {useConnectedDetectors} from 'sentry/views/automations/hooks/useConnectedDetectors';
 
@@ -172,23 +176,6 @@ export function ActionFilterBlock({actionFilter}: ActionFilterBlockProps) {
   );
 }
 
-const Step = styled(Flex)`
-  flex-direction: column;
-  gap: ${p => p.theme.space.sm};
-`;
-
-const StepLead = styled(Flex)`
-  align-items: center;
-  gap: ${p => p.theme.space.xs};
-  margin-bottom: ${p => p.theme.space.xs};
-`;
-
-const EmbeddedSelectField = styled(Select)`
-  padding: 0;
-  font-weight: ${p => p.theme.font.weight.sans.regular};
-  text-transform: none;
-`;
-
 const IfThenWrapper = styled(Flex)`
   position: relative;
   flex-direction: column;

static/app/views/automations/components/automationBuilder.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 
 import {Alert} from '@sentry/scraps/alert';
 import {Container, Flex} from '@sentry/scraps/layout';
-import {Select} from '@sentry/scraps/select';
 
 import {fetchOrgMembers} from 'sentry/actionCreators/members';
 import {ConditionBadge} from 'sentry/components/workflowEngine/ui/conditionBadge';
@@ -22,6 +21,11 @@ import {AutomationBuilderConflictContext} from 'sentry/views/automations/compone
 import {useAutomationBuilderContext} from 'sentry/views/automations/components/automationBuilderContext';
 import {useAutomationBuilderErrorContext} from 'sentry/views/automations/components/automationBuilderErrorContext';
 import {DataConditionNodeList} from 'sentry/views/automations/components/dataConditionNodeList';
+import {
+  EmbeddedSelectField,
+  Step,
+  StepLead,
+} from 'sentry/views/automations/components/stepComponents';
 import {TRIGGER_MATCH_OPTIONS} from 'sentry/views/automations/components/triggers/constants';
 import {findConflictingConditions} from 'sentry/views/automations/hooks/utils';
 
@@ -120,23 +124,6 @@ export function AutomationBuilder() {
   );
 }
 
-const Step = styled(Flex)`
-  flex-direction: column;
-  gap: ${p => p.theme.space.sm};
-`;
-
-const StepLead = styled(Flex)`
-  align-items: center;
-  gap: ${p => p.theme.space.xs};
-  margin-bottom: ${p => p.theme.space.xs};
-`;
-
-const EmbeddedSelectField = styled(Select)`
-  padding: 0;
-  font-weight: ${p => p.theme.font.weight.sans.regular};
-  text-transform: none;
-`;
-
 const StyledAlert = styled(Alert)`
   margin-top: ${p => p.theme.space.md};
 `;

static/app/views/automations/components/stepComponents.tsx

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+import {Flex} from '@sentry/scraps/layout';
+import {Select} from '@sentry/scraps/select';
+
+export const Step = styled(Flex)`
+  flex-direction: column;
+  gap: ${p => p.theme.space.sm};
+`;
+
+export const StepLead = styled(Flex)`
+  align-items: center;
+  gap: ${p => p.theme.space.xs};
+  margin-bottom: ${p => p.theme.space.xs};
+`;
+
+export const EmbeddedSelectField = styled(Select)`
+  padding: 0;
+  font-weight: ${p => p.theme.font.weight.sans.regular};
+  text-transform: none;
+`;