Skip to content

Commit a666510

Browse files
JonasBaJonasBa
authored
codemod(flex): apply changes for @getsentry/machine-learning-ai (#106304)
Applies the flex codemod to files owned by @getsentry/machine-learning-ai.
1 parent 48611ca commit a666510

20 files changed

+115
-308
lines changed

‎static/app/components/events/autofix/autofixChanges.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ export function AutofixChanges({
277277
<AnimatePresence initial={isChangesFirstAppearance}>
278278
<AnimationWrapper key="card" {...cardAnimationProps}>
279279
<ChangesContainer>
280-
<HeaderWrapper>
280+
<Flex justify="between" align="center" wrap="wrap" gap="md">
281281
<HeaderText>
282282
<Flex justify="center" align="center" ref={iconCodeRef}>
283283
<IconCode size="md" variant="accent" />
@@ -294,7 +294,7 @@ export function AutofixChanges({
294294
<IconChat />
295295
</Button>
296296
</HeaderText>
297-
</HeaderWrapper>
297+
</Flex>
298298
<AnimatePresence>
299299
{agentCommentThread && iconCodeRef.current && (
300300
<AutofixHighlightPopup
@@ -483,14 +483,6 @@ const HeaderText = styled('div')`
483483
margin-right: ${space(2)};
484484
`;
485485

486-
const HeaderWrapper = styled('div')`
487-
display: flex;
488-
justify-content: space-between;
489-
align-items: center;
490-
flex-wrap: wrap;
491-
gap: ${space(1)};
492-
`;
493-
494486
const BottomDivider = styled('div')`
495487
border-top: 1px solid ${p => p.theme.tokens.border.secondary};
496488
margin-top: ${p => p.theme.space.xl};

‎static/app/components/events/autofix/autofixDiff.tsx‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {createPortal} from 'react-dom';
33
import styled from '@emotion/styled';
44
import {diffWords, type Change} from 'diff';
55

6+
import {Flex, Stack} from '@sentry/scraps/layout';
7+
68
import {addErrorMessage} from 'sentry/actionCreators/indicator';
79
import {Button} from 'sentry/components/core/button';
810
import InteractionStateLayer from 'sentry/components/core/interactionStateLayer';
@@ -589,10 +591,10 @@ function FileDiff({
589591
{!integratedStyle && (
590592
<FileHeader onClick={() => setIsExpanded(value => !value)}>
591593
<InteractionStateLayer />
592-
<FileAddedRemoved>
594+
<Flex align="center" gap="md">
593595
<FileAdded>+{file.added}</FileAdded>
594596
<FileRemoved>-{file.removed}</FileRemoved>
595-
</FileAddedRemoved>
597+
</Flex>
596598
<FileName title={file.path}>{file.path}</FileName>
597599
<Button
598600
icon={<IconChevron size="xs" direction={isExpanded ? 'up' : 'down'} />}
@@ -605,10 +607,10 @@ function FileDiff({
605607
)}
606608
{integratedStyle && (
607609
<FileHeader>
608-
<FileAddedRemoved>
610+
<Flex align="center" gap="md">
609611
<FileAdded>+{file.added}</FileAdded>
610612
<FileRemoved>-{file.removed}</FileRemoved>
611-
</FileAddedRemoved>
613+
</Flex>
612614
<FileName title={file.path}>{file.path}</FileName>
613615
</FileHeader>
614616
)}
@@ -650,7 +652,7 @@ export function AutofixDiff({
650652
}
651653

652654
return (
653-
<DiffsColumn>
655+
<Stack gap="md">
654656
{diff.map(file => (
655657
<AutofixHighlightWrapper
656658
key={file.path}
@@ -674,16 +676,10 @@ export function AutofixDiff({
674676
/>
675677
</AutofixHighlightWrapper>
676678
))}
677-
</DiffsColumn>
679+
</Stack>
678680
);
679681
}
680682

681-
const DiffsColumn = styled('div')`
682-
display: flex;
683-
flex-direction: column;
684-
gap: ${space(1)};
685-
`;
686-
687683
const FileDiffWrapper = styled('div')<{integratedStyle?: boolean}>`
688684
font-family: ${p => p.theme.text.familyMono};
689685
font-size: ${p => p.theme.fontSize.sm};
@@ -711,12 +707,6 @@ const FileHeader = styled('div')`
711707
cursor: pointer;
712708
`;
713709

714-
const FileAddedRemoved = styled('div')`
715-
display: flex;
716-
gap: ${space(1)};
717-
align-items: center;
718-
`;
719-
720710
const FileAdded = styled('div')`
721711
color: ${p => p.theme.tokens.content.success};
722712
`;

‎static/app/components/events/autofix/autofixHighlightPopup.tsx‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import styled from '@emotion/styled';
1313
import {useMutation, useQueryClient} from '@tanstack/react-query';
1414
import {AnimatePresence, motion} from 'framer-motion';
1515

16+
import {Flex} from '@sentry/scraps/layout';
17+
1618
import {addErrorMessage, addLoadingMessage} from 'sentry/actionCreators/indicator';
1719
import {UserAvatar} from 'sentry/components/core/avatar/userAvatar';
1820
import {Button} from 'sentry/components/core/button';
@@ -405,7 +407,7 @@ function AutofixHighlightPopupContent({
405407
<FlippedReturnIcon />
406408
</ReworkArrow>
407409
</ReworkHeaderSection>
408-
<HeaderRight>
410+
<Flex align="center" paddingLeft="lg">
409411
<Divider />
410412
<ResolveButton
411413
size="zero"
@@ -414,7 +416,7 @@ function AutofixHighlightPopupContent({
414416
onClick={handleResolve}
415417
icon={<IconClose size="xs" />}
416418
/>
417-
</HeaderRight>
419+
</Flex>
418420
</motion.div>
419421
) : (
420422
<motion.div
@@ -464,9 +466,9 @@ function AutofixHighlightPopupContent({
464466
)}
465467
<MessageContent>
466468
{message.isLoading ? (
467-
<LoadingWrapper>
469+
<Flex align="center" marginTop="2xs" height="24px">
468470
<LoadingIndicator mini size={12} />
469-
</LoadingWrapper>
471+
</Flex>
470472
) : (
471473
<MarkedText text={message.content} inline />
472474
)}
@@ -841,13 +843,6 @@ const CircularSeerIcon = styled('div')`
841843
}
842844
`;
843845

844-
const LoadingWrapper = styled('div')`
845-
display: flex;
846-
align-items: center;
847-
height: 24px;
848-
margin-top: ${space(0.25)};
849-
`;
850-
851846
const ResolveButton = styled(Button)`
852847
margin-left: ${space(1)};
853848
`;
@@ -861,12 +856,6 @@ const ReworkHeaderSection = styled('div')`
861856
flex: 1;
862857
`;
863858

864-
const HeaderRight = styled('div')`
865-
display: flex;
866-
align-items: center;
867-
padding-left: ${p => p.theme.space.lg};
868-
`;
869-
870859
const ReworkText = styled('span')`
871860
font-size: ${p => p.theme.fontSize.sm};
872861
color: ${p => p.theme.tokens.content.secondary};

‎static/app/components/events/autofix/autofixRootCause.tsx‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -519,17 +519,17 @@ function AutofixRootCauseDisplay({
519519
return (
520520
<CausesContainer>
521521
<CustomRootCausePadding>
522-
<HeaderWrapper>
522+
<Flex justify="between" align="center" wrap="wrap" gap="md">
523523
<HeaderText>
524524
<Flex justify="center" align="center" ref={iconFocusRef}>
525525
<IconFocus size="md" variant="promotion" />
526526
</Flex>
527527
{t('Custom Root Cause')}
528528
</HeaderText>
529-
</HeaderWrapper>
529+
</Flex>
530530
<CauseDescription>{rootCauseSelection.custom_root_cause}</CauseDescription>
531531
<BottomDivider />
532-
<BottomButtonContainer>
532+
<Flex justify="end" align="center" paddingTop="xl" gap="md">
533533
<ButtonBar>
534534
<CopyRootCauseButton
535535
customRootCause={rootCauseSelection.custom_root_cause}
@@ -543,15 +543,15 @@ function AutofixRootCauseDisplay({
543543
runId={runId}
544544
/>
545545
)}
546-
</BottomButtonContainer>
546+
</Flex>
547547
</CustomRootCausePadding>
548548
</CausesContainer>
549549
);
550550
}
551551

552552
return (
553553
<CausesContainer>
554-
<HeaderWrapper>
554+
<Flex justify="between" align="center" wrap="wrap" gap="md">
555555
<HeaderText>
556556
<Flex justify="center" align="center" ref={iconFocusRef}>
557557
<IconFocus size="md" variant="promotion" />
@@ -568,7 +568,7 @@ function AutofixRootCauseDisplay({
568568
<IconChat />
569569
</Button>
570570
</HeaderText>
571-
</HeaderWrapper>
571+
</Flex>
572572
<AnimatePresence>
573573
{agentCommentThread && iconFocusRef.current && (
574574
<AutofixHighlightPopup
@@ -600,7 +600,7 @@ function AutofixRootCauseDisplay({
600600
</Fragment>
601601
</Content>
602602
<BottomDivider />
603-
<BottomButtonContainer>
603+
<Flex justify="end" align="center" paddingTop="xl" gap="md">
604604
<SolutionInput
605605
autosize
606606
value={solutionText}
@@ -633,7 +633,7 @@ function AutofixRootCauseDisplay({
633633
{status === AutofixStatus.COMPLETED && (
634634
<AutofixStepFeedback stepType="root_cause" groupId={groupId} runId={runId} />
635635
)}
636-
</BottomButtonContainer>
636+
</Flex>
637637
</CausesContainer>
638638
);
639639
}
@@ -687,14 +687,6 @@ const Content = styled('div')`
687687
padding: ${space(1)} 0;
688688
`;
689689

690-
const HeaderWrapper = styled('div')`
691-
display: flex;
692-
justify-content: space-between;
693-
align-items: center;
694-
gap: ${space(1)};
695-
flex-wrap: wrap;
696-
`;
697-
698690
const HeaderText = styled('div')`
699691
font-weight: ${p => p.theme.fontWeight.bold};
700692
font-size: ${p => p.theme.fontSize.lg};
@@ -720,14 +712,6 @@ const BottomDivider = styled('div')`
720712
border-top: 1px solid ${p => p.theme.tokens.border.secondary};
721713
`;
722714

723-
const BottomButtonContainer = styled('div')`
724-
display: flex;
725-
justify-content: flex-end;
726-
align-items: center;
727-
gap: ${space(1)};
728-
padding-top: ${p => p.theme.space.xl};
729-
`;
730-
731715
const SolutionInput = styled(TextArea)`
732716
flex: 1;
733717
resize: none;

‎static/app/components/events/autofix/autofixSolution.tsx‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -516,35 +516,35 @@ function AutofixSolutionDisplay({
516516
return (
517517
<SolutionContainer>
518518
<CustomSolutionPadding>
519-
<HeaderWrapper>
519+
<Flex justify="between" align="center" wrap="wrap" gap="md">
520520
<HeaderText>
521521
<Flex justify="center" align="center" ref={iconFixRef}>
522522
<IconFix size="sm" variant="success" />
523523
</Flex>
524524
{t('Custom Solution')}
525525
</HeaderText>
526-
</HeaderWrapper>
526+
</Flex>
527527
<Content>
528528
<SolutionDescriptionWrapper>{customSolution}</SolutionDescriptionWrapper>
529529
</Content>
530530
<BottomDivider />
531-
<BottomFooter>
531+
<Flex justify="end" align="center" padding="xl 0 0 0" gap="lg">
532532
<div style={{flex: 1}} />
533533
<CopySolutionButton
534534
solution={solution}
535535
customSolution={customSolution}
536536
event={event}
537537
rootCause={rootCause}
538538
/>
539-
</BottomFooter>
539+
</Flex>
540540
</CustomSolutionPadding>
541541
</SolutionContainer>
542542
);
543543
}
544544

545545
return (
546546
<SolutionContainer ref={containerRef}>
547-
<HeaderWrapper>
547+
<Flex justify="between" align="center" wrap="wrap" gap="md">
548548
<HeaderText>
549549
<Flex justify="center" align="center" ref={iconFixRef}>
550550
<IconFix size="md" variant="success" />
@@ -561,7 +561,7 @@ function AutofixSolutionDisplay({
561561
<IconChat />
562562
</Button>
563563
</HeaderText>
564-
</HeaderWrapper>
564+
</Flex>
565565
<AnimatePresence>
566566
{agentCommentThread && iconFixRef.current && (
567567
<AutofixHighlightPopup
@@ -594,7 +594,7 @@ function AutofixSolutionDisplay({
594594
/>
595595
</Content>
596596
<BottomDivider />
597-
<BottomFooter>
597+
<Flex justify="end" align="center" padding="xl 0 0 0" gap="lg">
598598
<AddInstructionWrapper>
599599
<InstructionsInputWrapper onSubmit={handleFormSubmit}>
600600
<InstructionsInput
@@ -669,7 +669,7 @@ function AutofixSolutionDisplay({
669669
{status === AutofixStatus.COMPLETED && (
670670
<AutofixStepFeedback stepType="solution" groupId={groupId} runId={runId} />
671671
)}
672-
</BottomFooter>
672+
</Flex>
673673
</SolutionContainer>
674674
);
675675
}
@@ -713,14 +713,6 @@ const Content = styled('div')`
713713
padding: ${space(1)} 0 0;
714714
`;
715715

716-
const HeaderWrapper = styled('div')`
717-
display: flex;
718-
justify-content: space-between;
719-
align-items: center;
720-
flex-wrap: wrap;
721-
gap: ${space(1)};
722-
`;
723-
724716
const HeaderText = styled('div')`
725717
font-weight: ${p => p.theme.fontWeight.bold};
726718
font-size: ${p => p.theme.fontSize.lg};
@@ -774,14 +766,6 @@ const BottomDivider = styled('div')`
774766
margin-top: ${p => p.theme.space.lg};
775767
`;
776768

777-
const BottomFooter = styled('div')`
778-
display: flex;
779-
align-items: center;
780-
gap: ${p => p.theme.space.lg};
781-
padding: ${p => p.theme.space.xl} 0 0 0;
782-
justify-content: flex-end;
783-
`;
784-
785769
const AddInstructionWrapper = styled('div')`
786770
flex: 0;
787771
`;

0 commit comments

Comments
 (0)