codemod(flex): apply changes for @getsentry/ecosystem

static/app/components/modals/inviteMissingMembersModal/index.tsx

@@ -221,12 +221,12 @@ export function InviteMissingMembersModal({
             checked={selectedAll}
           />,
           t('User Information'),
-          <StyledHeader key={1}>
+          <Flex gap="xs" key={1}>
             {t('Recent Commits')}
             <Tooltip title={t('Based on the last 30 days of commit data')}>
               <IconInfo size="xs" />
             </Tooltip>
-          </StyledHeader>,
+          </Flex>,
           t('Role'),
           t('Team'),
         ]}
@@ -336,11 +336,6 @@ const StyledPanelTable = styled(PanelTable)`
   max-height: 475px;
 `;
 
-const StyledHeader = styled('div')`
-  display: flex;
-  gap: ${space(0.5)};
-`;
-
 const StyledPanelItem = styled(PanelItem)`
   flex-direction: column;
 `;

static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx

@@ -3,6 +3,8 @@ import styled from '@emotion/styled';
 import memoize from 'lodash/memoize';
 import type moment from 'moment-timezone';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {Tag, type TagProps} from 'sentry/components/core/badge/tag';
 import {Button, StyledButton} from 'sentry/components/core/button';
 import {Checkbox} from 'sentry/components/core/checkbox';
@@ -202,10 +204,10 @@ export default function RequestLog({app}: RequestLogProps) {
           />
 
           <StyledErrorsOnlyButton onClick={handleChangeErrorsOnly}>
-            <ErrorsOnlyCheckbox>
+            <Flex align="center" gap="md">
               <Checkbox checked={errorsOnly} onChange={() => {}} />
               {t('Errors Only')}
-            </ErrorsOnlyCheckbox>
+            </Flex>
           </StyledErrorsOnlyButton>
         </RequestLogFilters>
       </div>
@@ -305,12 +307,6 @@ const RequestLogFilters = styled('div')`
   }
 `;
 
-const ErrorsOnlyCheckbox = styled('div')`
-  display: flex;
-  gap: ${space(1)};
-  align-items: center;
-`;
-
 const StyledErrorsOnlyButton = styled(Button)`
   margin-left: -1px;
   border-top-left-radius: 0;

static/app/views/settings/organizationDeveloperSettings/subscriptionBox.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import {Stack} from '@sentry/scraps/layout';
+
 import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
 import {Checkbox} from 'sentry/components/core/checkbox';
 import {Tooltip} from 'sentry/components/core/tooltip';
@@ -63,13 +65,13 @@ function SubscriptionBox({
   return (
     <Tooltip disabled={!disabled} title={message} key={resource}>
       <SubscriptionGridItem disabled={disabled}>
-        <SubscriptionInfo>
+        <Stack alignSelf="center">
           <SubscriptionTitle>
             {resource}
             {isNew && <FeatureBadge type="new" />}
           </SubscriptionTitle>
           <SubscriptionDescription>{DESCRIPTIONS[resource]}</SubscriptionDescription>
-        </SubscriptionInfo>
+        </Stack>
         <Checkbox
           key={`${resource}${checked}`}
           aria-label={resource}
@@ -99,12 +101,6 @@ const SubscriptionGridItem = styled('div')<{disabled: boolean}>`
   box-sizing: border-box;
 `;
 
-const SubscriptionInfo = styled('div')`
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-`;
-
 const SubscriptionDescription = styled('div')`
   font-size: ${p => p.theme.fontSize.md};
   line-height: 1;

static/app/views/settings/organizationIntegrations/detailedView/integrationLayout.tsx

@@ -6,7 +6,7 @@ import Access from 'sentry/components/acl/access';
 import type {AlertProps} from 'sentry/components/core/alert';
 import {Alert} from 'sentry/components/core/alert';
 import {Tag} from 'sentry/components/core/badge/tag';
-import {Flex} from 'sentry/components/core/layout';
+import {Flex, Stack} from 'sentry/components/core/layout';
 import {ExternalLink} from 'sentry/components/core/link';
 import {TabList, Tabs} from 'sentry/components/core/tabs';
 import {Tooltip} from 'sentry/components/core/tooltip';
@@ -57,7 +57,7 @@ function TopSection({
     <Flex justify="between">
       <Flex>
         {integrationIcon}
-        <NameContainer>
+        <Stack justify="center" align="start" paddingLeft="xl">
           <Flex align="center">
             <Name>{integrationName}</Name>
             <StatusWrapper>
@@ -71,7 +71,7 @@ function TopSection({
               </StyledTag>
             ))}
           </Flex>
-        </NameContainer>
+        </Stack>
       </Flex>
       <Flex align="center">
         {addInstallButton}
@@ -313,14 +313,6 @@ const IntegrationDescription = styled('div')`
   flex-grow: 1;
 `;
 
-const NameContainer = styled('div')`
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: center;
-  padding-left: ${space(2)};
-`;
-
 const Name = styled('div')`
   font-weight: ${p => p.theme.fontWeight.bold};
   font-size: 1.4em;

static/app/views/settings/organizationIntegrations/integrationListDirectory.tsx

@@ -4,6 +4,8 @@ import styled from '@emotion/styled';
 import debounce from 'lodash/debounce';
 import startCase from 'lodash/startCase';
 
+import {Stack} from '@sentry/scraps/layout';
+
 import {DocIntegrationAvatar} from 'sentry/components/core/avatar/docIntegrationAvatar';
 import {SentryAppAvatar} from 'sentry/components/core/avatar/sentryAppAvatar';
 import type {SelectOption} from 'sentry/components/core/compactSelect';
@@ -514,7 +516,7 @@ function IntegrationSettingsHeader({
 
 function IntegrationResultsEmpty({searchTerm}: {searchTerm: string}) {
   return (
-    <EmptyResultsContainer>
+    <Stack justify="center" align="center" height="200px">
       <EmptyResultsBody>
         {tct('No Integrations found for "[searchTerm]".', {searchTerm})}
       </EmptyResultsBody>
@@ -528,7 +530,7 @@ function IntegrationResultsEmpty({searchTerm}: {searchTerm: string}) {
           ),
         })}
       </EmptyResultsBody>
-    </EmptyResultsContainer>
+    </Stack>
   );
 }
 
@@ -538,14 +540,6 @@ const ActionContainer = styled('div')`
   gap: ${space(2)};
 `;
 
-const EmptyResultsContainer = styled('div')`
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
 const EmptyResultsBody = styled('div')`
   font-size: 16px;
   line-height: 28px;

static/app/views/settings/organizationIntegrations/integrationRow.tsx

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 import startCase from 'lodash/startCase';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {Alert} from 'sentry/components/core/alert';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
@@ -99,7 +101,7 @@ function IntegrationRow(props: Props) {
 
   return (
     <PanelRow noPadding data-test-id={slug}>
-      <FlexContainer>
+      <Flex align="center" padding="xl">
         {customIcon ?? <PluginIcon size={36} pluginId={slug} />}
         <TitleContainer>
           <IntegrationName to={baseUrl}>{displayName}</IntegrationName>
@@ -108,14 +110,14 @@ function IntegrationRow(props: Props) {
             {renderDetails()}
           </IntegrationDetails>
         </TitleContainer>
-        <TagsContainer>
+        <Flex justify="end" wrap="wrap" flex="3" padding="0 xl" gap="md">
           {categories?.map(category => (
             <Tag key={category} variant={category === publishStatus ? 'info' : 'muted'}>
               {category === 'api' ? 'API' : startCase(category)}
             </Tag>
           ))}
-        </TagsContainer>
-      </FlexContainer>
+        </Flex>
+      </Flex>
       {alertText && (
         <AlertContainer>
           <Alert.Container>
@@ -160,28 +162,12 @@ const PanelRow = styled(PanelItem)`
   flex-direction: column;
 `;
 
-const FlexContainer = styled('div')`
-  display: flex;
-  align-items: center;
-  padding: ${space(2)};
-`;
-
 const TitleContainer = styled('div')`
   flex: 1;
   padding: 0 16px;
   white-space: nowrap;
 `;
 
-const TagsContainer = styled('div')`
-  flex: 3;
-  padding: 0 ${space(2)};
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: ${space(1)};
-  justify-content: flex-end;
-`;
-
 const IntegrationName = styled(Link)`
   font-weight: ${p => p.theme.fontWeight.bold};
 `;

static/app/views/settings/organizationIntegrations/integrationServerlessRow.tsx

@@ -1,6 +1,8 @@
 import {Fragment, useCallback, useMemo, useState} from 'react';
 import styled from '@emotion/styled';
 
+import {Stack} from '@sentry/scraps/layout';
+
 import {
   addErrorMessage,
   addLoadingMessage,
@@ -120,13 +122,13 @@ export function IntegrationServerlessRow({
   return (
     <Item>
       <NameWrapper>
-        <NameRuntimeVersionWrapper>
+        <Stack>
           <Name>{serverlessFunction.name}</Name>
           <RuntimeAndVersion>
             <DetailWrapper>{serverlessFunction.runtime}</DetailWrapper>
             <DetailWrapper>{versionText}</DetailWrapper>
           </RuntimeAndVersion>
-        </NameRuntimeVersionWrapper>
+        </Stack>
       </NameWrapper>
       <LayerStatusWrapper>{layerStatus}</LayerStatusWrapper>
       <StyledSwitch
@@ -174,11 +176,6 @@ const StyledSwitch = styled(Switch)`
 
 const UpdateButton = styled(Button)``;
 
-const NameRuntimeVersionWrapper = styled('div')`
-  display: flex;
-  flex-direction: column;
-`;
-
 const Name = styled(`span`)`
   padding-bottom: ${space(1)};
 `;

static/app/views/settings/organizationIntegrations/repositoryProjectPathConfigRow.tsx

@@ -1,6 +1,8 @@
-import {Fragment} from 'react';
+import {Fragment, type ReactNode} from 'react';
 import styled from '@emotion/styled';
 
+import {Flex, Stack, type FlexProps} from '@sentry/scraps/layout';
+
 import Access from 'sentry/components/acl/access';
 import Confirm from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
@@ -28,7 +30,7 @@ export default function RepositoryProjectPathConfigRow({
   return (
     <Fragment>
       <NameRepoColumn>
-        <ProjectRepoHolder>
+        <Stack>
           <RepoName>{pathConfig.repoName}</RepoName>
           <ProjectAndBranch>
             <IdBadge
@@ -39,7 +41,7 @@ export default function RepositoryProjectPathConfigRow({
             />
             <BranchWrapper>&nbsp;|&nbsp;{pathConfig.defaultBranch}</BranchWrapper>
           </ProjectAndBranch>
-        </ProjectRepoHolder>
+        </Stack>
       </NameRepoColumn>
       <OutputPathColumn>{pathConfig.sourceRoot}</OutputPathColumn>
       <InputPathColumn>{pathConfig.stackRoot}</InputPathColumn>
@@ -78,11 +80,6 @@ export default function RepositoryProjectPathConfigRow({
   );
 }
 
-const ProjectRepoHolder = styled('div')`
-  display: flex;
-  flex-direction: column;
-`;
-
 const RepoName = styled(`span`)`
   padding-bottom: ${space(1)};
 `;
@@ -116,7 +113,8 @@ export const InputPathColumn = styled(Column)`
   grid-area: input-path;
 `;
 
-export const ButtonWrapper = styled('span')`
-  display: flex;
-  gap: ${space(1)};
-`;
+export function ButtonWrapper(
+  props: Omit<FlexProps<'span'>, 'as'> & {children?: ReactNode}
+) {
+  return <Flex<'span'> gap="md" {...props} as="span" />;
+}