codemod(flex): apply changes for @getsentry/issue-workflow

static/app/components/events/highlights/highlightsIconSummary.tsx

@@ -2,6 +2,8 @@ import {Fragment} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {useFetchEventAttachments} from 'sentry/actionCreators/events';
 import {openModal} from 'sentry/actionCreators/modal';
 import {Button} from 'sentry/components/core/button';
@@ -156,7 +158,7 @@ export function HighlightsIconSummary({event, group}: HighlightsIconSummaryProps
             </Fragment>
           )}
           {items.map((item, index) => (
-            <IconContainer key={index}>
+            <Flex align="center" flexShrink={0} gap="md" minHeight="24px" key={index}>
               <IconWrapper>{item.icon}</IconWrapper>
               <IconDescription>
                 <div>{item.title}</div>
@@ -166,7 +168,7 @@ export function HighlightsIconSummary({event, group}: HighlightsIconSummaryProps
                   </IconSubtitle>
                 )}
               </IconDescription>
-            </IconContainer>
+            </Flex>
           ))}
           {projectSlug && projectId && (
             <ReleaseHighlight
@@ -200,7 +202,7 @@ function ReleaseHighlight({
   }
 
   return (
-    <IconContainer key="release">
+    <Flex align="center" flexShrink={0} gap="md" minHeight="24px" key="release">
       <IconWrapper>
         <IconReleases size="sm" variant="muted" />
       </IconWrapper>
@@ -213,7 +215,7 @@ function ReleaseHighlight({
           <StyledVersion version={releaseTag.value} projectId={projectId} />
         </VersionHoverCard>
       </IconDescription>
-    </IconContainer>
+    </Flex>
   );
 }
 
@@ -223,14 +225,14 @@ function EnvironmentHighlight({environmentTag}: {environmentTag: EventTag | unde
   }
 
   return (
-    <IconContainer key="environment">
+    <Flex align="center" flexShrink={0} gap="md" minHeight="24px" key="environment">
       <IconWrapper>
         <IconWindow size="sm" variant="muted" />
       </IconWrapper>
       <IconDescription aria-label={t('Event environment')}>
         <Tooltip title={t('Environment')}>{environmentTag.value}</Tooltip>
       </IconDescription>
-    </IconContainer>
+    </Flex>
   );
 }
 
@@ -239,14 +241,6 @@ const IconBar = styled('div')`
   padding: 0;
 `;
 
-const IconContainer = styled('div')`
-  display: flex;
-  gap: ${space(1)};
-  align-items: center;
-  flex-shrink: 0;
-  min-height: 24px;
-`;
-
 const IconDescription = styled('div')`
   display: flex;
   gap: ${space(0.75)};

static/app/components/events/interfaces/crashContent/exception/actionableItems.tsx

@@ -4,6 +4,8 @@ import styled from '@emotion/styled';
 import startCase from 'lodash/startCase';
 import moment from 'moment-timezone';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
 import KeyValueList from 'sentry/components/events/interfaces/keyValueList';
@@ -297,7 +299,7 @@ function ExpandableErrorList({handleExpandClick, errorList}: ExpandableErrorList
   return (
     <List symbol="bullet">
       <StyledListItem>
-        <ErrorTitleFlex>
+        <Flex justify="between" align="center" gap="md">
           <strong>
             {title} ({numErrors})
           </strong>
@@ -311,7 +313,7 @@ function ExpandableErrorList({handleExpandClick, errorList}: ExpandableErrorList
           >
             {expanded ? t('Collapse') : t('Expand')}
           </ToggleButton>
-        </ErrorTitleFlex>
+        </Flex>
         {expanded && (
           <div>
             {desc && <Description>{desc}</Description>}
@@ -499,13 +501,6 @@ const ToggleButton = styled(Button)`
   }
 `;
 
-const ErrorTitleFlex = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: ${space(1)};
-`;
-
 const HiddenDiv = styled('div')`
   display: none;
 `;

static/app/views/issueDetails/actions/index.tsx

@@ -397,10 +397,10 @@ export function GroupActions({group, project, disabled, event}: GroupActionsProp
     onUpdate,
   });
   return (
-    <ActionWrapper>
+    <Flex align="center" gap="xs">
       {hasStreamlinedUI &&
         (isResolved || isIgnored ? (
-          <ResolvedActionWapper>
+          <Flex align="center" gap="md">
             <ResolvedWrapper>
               <IconCheckmark size="md" />
               <Flex direction="column">
@@ -443,7 +443,7 @@ export function GroupActions({group, project, disabled, event}: GroupActionsProp
                 {isResolved ? t('Unresolve') : t('Unarchive')}
               </Button>
             )}
-          </ResolvedActionWapper>
+          </Flex>
         ) : (
           <Fragment>
             {resolveCap.enabled && (
@@ -679,16 +679,10 @@ export function GroupActions({group, project, disabled, event}: GroupActionsProp
           )}
         </Fragment>
       )}
-    </ActionWrapper>
+    </Flex>
   );
 }
 
-const ActionWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-  gap: ${space(0.5)};
-`;
-
 const ResolvedWrapper = styled('div')`
   display: flex;
   gap: ${space(1.5)};
@@ -698,12 +692,6 @@ const ResolvedWrapper = styled('div')`
   font-size: ${p => p.theme.fontSize.lg};
 `;
 
-const ResolvedActionWapper = styled('div')`
-  display: flex;
-  gap: ${space(1)};
-  align-items: center;
-`;
-
 const ReasonBanner = styled('div')`
   font-weight: normal;
   color: ${p => p.theme.colors.green500};

static/app/views/issueDetails/actions/shareModal.tsx

@@ -1,6 +1,8 @@
 import {Fragment, useCallback, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
+import {Stack} from '@sentry/scraps/layout';
+
 import {bulkUpdate} from 'sentry/actionCreators/group';
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import type {ModalRenderProps} from 'sentry/actionCreators/modal';
@@ -129,7 +131,7 @@ export default function ShareIssueModal({
         <h4>{t('Share Issue')}</h4>
       </Header>
       <Body>
-        <ModalContent>
+        <Stack gap="md">
           <UrlContainer>
             <TextContainer>
               <StyledAutoSelectText ref={urlRef}>{issueUrl}</StyledAutoSelectText>
@@ -245,18 +247,12 @@ export default function ShareIssueModal({
               )}
             </Fragment>
           )}
-        </ModalContent>
+        </Stack>
       </Body>
     </Fragment>
   );
 }
 
-const ModalContent = styled('div')`
-  display: flex;
-  gap: ${space(1)};
-  flex-direction: column;
-`;
-
 const UrlContainer = styled('div')`
   display: grid;
   grid-template-columns: 1fr max-content max-content;

static/app/views/issueDetails/groupEventAttachments/groupEventAttachments.tsx

@@ -1,7 +1,7 @@
 import {useEffect} from 'react';
 import styled from '@emotion/styled';
 
-import {Flex} from 'sentry/components/core/layout';
+import {Flex, Stack} from 'sentry/components/core/layout';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
@@ -151,7 +151,7 @@ function GroupEventAttachments({project, group}: GroupEventAttachmentsProps) {
   };
 
   return (
-    <Wrapper>
+    <Stack gap="xl">
       {hasStreamlinedUI ? (
         <Flex justify="between">
           <Flex align="center" gap="md">
@@ -169,7 +169,7 @@ function GroupEventAttachments({project, group}: GroupEventAttachmentsProps) {
         ? renderScreenshotGallery()
         : renderAttachmentsTable()}
       <NoMarginPagination pageLinks={getResponseHeader?.('Link')} />
-    </Wrapper>
+    </Stack>
   );
 }
 
@@ -197,9 +197,3 @@ const ScreenshotGrid = styled('div')`
 const NoMarginPagination = styled(Pagination)`
   margin: 0;
 `;
-
-const Wrapper = styled('div')`
-  display: flex;
-  flex-direction: column;
-  gap: ${space(2)};
-`;

static/app/views/issueDetails/groupEventAttachments/screenshotCard.tsx

@@ -1,6 +1,8 @@
 import {useState} from 'react';
 import styled from '@emotion/styled';
 
+import {Flex, Stack} from '@sentry/scraps/layout';
+
 import {openModal} from 'sentry/actionCreators/modal';
 import Card from 'sentry/components/card';
 import {openConfirmModal} from 'sentry/components/confirm';
@@ -81,8 +83,8 @@ export function ScreenshotCard({
 
   return (
     <StyledCard>
-      <CardHeader>
-        <ScreenshotInfo>
+      <Flex justify="between" flexShrink={0} paddingBottom="md">
+        <Stack minWidth="0">
           <Tooltip title={eventAttachment.name} showOnlyOnOverflow skipWrapper>
             <AttachmentName>{eventAttachment.name}</AttachmentName>
           </Tooltip>
@@ -96,7 +98,7 @@ export function ScreenshotCard({
               </Tooltip>
             </Link>
           </div>
-        </ScreenshotInfo>
+        </Stack>
         <DropdownMenu
           items={[
             {
@@ -131,7 +133,7 @@ export function ScreenshotCard({
             />
           )}
         />
-      </CardHeader>
+      </Flex>
       <CardBody>
         <StyledPanelBody
           onClick={() => openVisualizationModal()}
@@ -158,12 +160,6 @@ export function ScreenshotCard({
   );
 }
 
-const ScreenshotInfo = styled('div')`
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-`;
-
 const StyledCard = styled(Card)`
   margin: 0;
   padding: ${space(1)} ${space(1.5)};
@@ -178,13 +174,6 @@ const AttachmentName = styled('span')`
   text-overflow: ellipsis;
 `;
 
-const CardHeader = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: ${space(1)};
-  flex-shrink: 0;
-`;
-
 const CardBody = styled('div')`
   max-height: 250px;
   min-height: 250px;

static/app/views/issueDetails/groupEventCarousel.tsx

@@ -4,6 +4,8 @@ import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 import moment from 'moment-timezone';
 
+import {Flex} from '@sentry/scraps/layout';
+
 import type {ButtonProps} from 'sentry/components/core/button';
 import {Button} from 'sentry/components/core/button';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
@@ -369,7 +371,7 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
   const {copy} = useCopyToClipboard();
 
   return (
-    <CarouselAndButtonsWrapper>
+    <Flex justify="between" align="start" marginBottom="xs" gap="md">
       <div>
         <EventHeading>
           <EventIdAndTimeContainer>
@@ -428,7 +430,7 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
           </EventIdAndTimeContainer>
         </EventHeading>
       </div>
-      <ActionsWrapper>
+      <Flex align="center" gap="xs">
         <GroupEventActions event={event} group={group} projectSlug={projectSlug} />
         <EventNavigationDropdown
           isDisabled={!hasPreviousEvent && !hasNextEvent}
@@ -453,19 +455,11 @@ export function GroupEventCarousel({event, group, projectSlug}: GroupEventCarous
             referrer="next-event"
           />
         </NavButtons>
-      </ActionsWrapper>
-    </CarouselAndButtonsWrapper>
+      </Flex>
+    </Flex>
   );
 }
 
-const CarouselAndButtonsWrapper = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: ${space(1)};
-  margin-bottom: ${space(0.5)};
-`;
-
 const EventHeading = styled('div')`
   display: flex;
   align-items: center;
@@ -478,12 +472,6 @@ const EventHeading = styled('div')`
   }
 `;
 
-const ActionsWrapper = styled('div')`
-  display: flex;
-  align-items: center;
-  gap: ${space(0.5)};
-`;
-
 const StyledNavButton = styled(LinkButton)`
   border-radius: 0;
 `;

static/app/views/issueDetails/groupMerged/mergedItem.tsx

@@ -155,11 +155,11 @@ function MergedItem({fingerprint, totalFingerprint}: Props) {
                 size="xs"
                 style={{marginLeft: space(1)}}
               />
-              <EventDetails>
+              <Flex justify="between" padding="md">
                 <Text size="md" data-issue-title-primary>
                   {latestEvent.title}
                 </Text>
-              </EventDetails>
+              </Flex>
             </Flex>
           ) : null}
         </MergedEventList>
@@ -205,10 +205,4 @@ const MergedEventList = styled('div')`
   background-color: ${p => p.theme.tokens.background.primary};
 `;
 
-const EventDetails = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  padding: ${space(1)};
-`;
-
 export default MergedItem;