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

static/app/utils/discover/fieldRenderers.tsx

@@ -6,6 +6,8 @@ import partial from 'lodash/partial';
 import pick from 'lodash/pick';
 import * as qs from 'query-string';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Button} from 'sentry/components/core/button';
 import {ExternalLink, Link} from 'sentry/components/core/link';
@@ -1255,7 +1257,7 @@ export const spanOperationRelativeBreakdownRenderer = (
   }
 
   return (
-    <RelativeOpsBreakdown data-test-id="relative-ops-breakdown">
+    <Flex position="relative" data-test-id="relative-ops-breakdown">
       {orderedSpanOpsBreakdownFields.map(field => {
         if (!isDurationValue(data, field)) {
           return null;
@@ -1321,15 +1323,10 @@ export const spanOperationRelativeBreakdownRenderer = (
           <OtherRelativeOpsBreakdown />
         </Tooltip>
       </div>
-    </RelativeOpsBreakdown>
+    </Flex>
   );
 };
 
-const RelativeOpsBreakdown = styled('div')`
-  position: relative;
-  display: flex;
-`;
-
 const RectangleRelativeOpsBreakdown = styled(RowRectangle)`
   position: relative;
   width: 100%;

static/app/utils/discover/styles.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import {Flex} from 'sentry/components/core/layout';
+import {Flex, type FlexProps} from 'sentry/components/core/layout';
 import {Link} from 'sentry/components/core/link';
 import {DateTime} from 'sentry/components/dateTime';
 import ShortId, {StyledAutoSelectText} from 'sentry/components/shortId';
@@ -81,12 +81,9 @@ export const BarContainer = styled('div')`
   margin-left: auto;
 `;
 
-export const FlexContainer = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-`;
+export function FlexContainer(props: FlexProps<'div'>) {
+  return <Flex justify="end" align="center" width="100%" {...props} />;
+}
 
 export const UserIcon = styled(IconUser)`
   margin-left: ${p => p.theme.space.md};

static/app/views/discover/landing.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import {Stack} from '@sentry/scraps/layout';
 import {Link} from '@sentry/scraps/link';
 
 import Feature from 'sentry/components/acl/feature';
@@ -245,7 +246,7 @@ function DiscoverLanding() {
               ) : status === 'error' ? (
                 <LoadingError message={error.message} />
               ) : (
-                <QueriesContainer>
+                <Stack gap="xl">
                   {organization.features.includes('expose-migrated-discover-queries') && (
                     <Alert variant="info">
                       {tct(
@@ -265,7 +266,7 @@ function DiscoverLanding() {
                     organization={organization}
                     refetchSavedQueries={refreshSavedQueries}
                   />
-                </QueriesContainer>
+                </Stack>
               )}
             </Layout.Main>
           </Layout.Body>
@@ -299,10 +300,4 @@ const StyledActions = styled('div')`
   }
 `;
 
-const QueriesContainer = styled('div')`
-  display: flex;
-  flex-direction: column;
-  gap: ${p => p.theme.space.xl};
-`;
-
 export default DiscoverLanding;

static/app/views/discover/querycard.tsx

@@ -1,6 +1,8 @@
 import {PureComponent} from 'react';
 import styled from '@emotion/styled';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {ActivityAvatar} from 'sentry/components/activity/item/avatar';
 import Card from 'sentry/components/card';
 import {Link} from 'sentry/components/core/link';
@@ -41,7 +43,7 @@ class QueryCard extends PureComponent<Props> {
     return (
       <Link data-test-id={`card-${title}`} onClick={this.handleClick} to={this.props.to}>
         <StyledQueryCard interactive>
-          <QueryCardHeader>
+          <Flex padding="lg xl">
             <QueryCardContent>
               <QueryTitle>{title}</QueryTitle>
               <QueryDetail>{queryDetail}</QueryDetail>
@@ -53,11 +55,11 @@ class QueryCard extends PureComponent<Props> {
                 <ActivityAvatar type="system" size={34} />
               )}
             </AvatarWrapper>
-          </QueryCardHeader>
+          </Flex>
           <QueryCardBody>
             <StyledErrorBoundary mini>{renderGraph()}</StyledErrorBoundary>
           </QueryCardBody>
-          <QueryCardFooter>
+          <Flex justify="between" align="center" padding="md xl">
             <DateSelected>
               {subtitle}
               {dateStatus ? (
@@ -67,7 +69,7 @@ class QueryCard extends PureComponent<Props> {
               ) : null}
             </DateSelected>
             {renderContextMenu?.()}
-          </QueryCardFooter>
+          </Flex>
         </StyledQueryCard>
       </Link>
     );
@@ -95,11 +97,6 @@ const StyledQueryCard = styled(Card)`
   }
 `;
 
-const QueryCardHeader = styled('div')`
-  display: flex;
-  padding: ${space(1.5)} ${space(2)};
-`;
-
 const QueryTitle = styled('div')`
   color: ${p => p.theme.tokens.content.primary};
   display: block;
@@ -134,13 +131,6 @@ const QueryCardBody = styled('div')`
   overflow: hidden;
 `;
 
-const QueryCardFooter = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: ${space(1)} ${space(2)};
-`;
-
 const DateSelected = styled('div')`
   font-size: ${p => p.theme.fontSize.sm};
   grid-column-gap: ${space(1)};

static/app/views/discover/table/columnEditCollection.tsx

@@ -3,6 +3,8 @@ import {createPortal} from 'react-dom';
 import {css, withTheme, type Theme} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {parseArithmetic} from 'sentry/components/arithmeticInput/parser';
 import {SectionHeading} from 'sentry/components/charts/styles';
 import {Button} from 'sentry/components/core/button';
@@ -670,7 +672,7 @@ class ColumnEditCollection extends Component<Props, State> {
 
 function OnDemandEquationsWarning() {
   return (
-    <OnDemandContainer>
+    <Flex justify="center" align="center" height="100%">
       <Tooltip
         containerDisplayMode="inline-flex"
         title={t(
@@ -679,7 +681,7 @@ function OnDemandEquationsWarning() {
       >
         <IconWarning variant="warning" />
       </Tooltip>
-    </OnDemandContainer>
+    </Flex>
   );
 }
 
@@ -735,13 +737,6 @@ const Ghost = styled('div')`
   }
 `;
 
-const OnDemandContainer = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-`;
-
 const DragPlaceholder = styled('div')`
   margin: 0 ${space(3)} ${space(1)} ${space(3)};
   border: 2px dashed ${p => p.theme.tokens.border.primary};

static/app/views/discover/table/quickContext/styles.tsx

@@ -1,18 +1,15 @@
 import styled from '@emotion/styled';
 
-import type {FlexProps} from 'sentry/components/core/layout';
-import {Flex, Stack} from 'sentry/components/core/layout';
+import {Flex, Stack, type FlexProps} from 'sentry/components/core/layout';
 import {space} from 'sentry/styles/space';
 
 export function ContextContainer(props: FlexProps) {
   return <Stack {...props} />;
 }
 
-export const ContextHeader = styled('div')`
-  display: flex;
-  align-items: center;
-  margin-bottom: ${space(0.75)};
-`;
+export function ContextHeader(props: FlexProps<'div'>) {
+  return <Flex align="center" marginBottom="sm" {...props} />;
+}
 
 export const ContextTitle = styled('h6')`
   color: ${p => p.theme.tokens.content.secondary};