Skip to content

Commit

Permalink
DEVPROD-1062: Enable jsx-sort-props rule in Spruce (#349)
Browse files Browse the repository at this point in the history
  • Loading branch information
minnakt authored Aug 30, 2024
1 parent 705940b commit 6fb31a4
Show file tree
Hide file tree
Showing 339 changed files with 1,870 additions and 1,866 deletions.
1 change: 0 additions & 1 deletion apps/parsley/.eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ module.exports = {
plugins: ["sort-keys-plus"],
root: true,
rules: {
"react/jsx-sort-props": WARN, // Sort props alphabetically
"sort-imports": [
ERROR,
{
Expand Down
4 changes: 2 additions & 2 deletions apps/spruce/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ const browserRouter = createBrowserRouter(
createRoutesFromElements(
<>
{(isDevelopmentBuild() || isLocal()) && (
<Route path={routes.login} element={<Login />} />
<Route element={<Login />} path={routes.login} />
)}
<Route
path="/*"
element={
<GQLWrapper>
<Content />
</GQLWrapper>
}
path="/*"
/>
</>,
),
Expand Down
8 changes: 4 additions & 4 deletions apps/spruce/src/components/Accordion/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@ export const Accordion: React.FC<AccordionProps> = ({
<div className={className} data-cy={dataCy}>
{toggleFromBottom && (
<AnimatedAccordion
hide={!isAccordionDisplayed}
disableAnimation={disableAnimation}
aria-expanded={isAccordionDisplayed}
data-cy="accordion-collapse-container"
disableAnimation={disableAnimation}
hide={!isAccordionDisplayed}
>
{children}
</AnimatedAccordion>
Expand All @@ -71,10 +71,10 @@ export const Accordion: React.FC<AccordionProps> = ({
)}
{!toggleFromBottom && (
<AnimatedAccordion
hide={!isAccordionDisplayed}
disableAnimation={disableAnimation}
aria-expanded={isAccordionDisplayed}
data-cy="accordion-collapse-container"
disableAnimation={disableAnimation}
hide={!isAccordionDisplayed}
>
<ContentsContainer indent={showCaret && useIndent}>
{children}
Expand Down
12 changes: 6 additions & 6 deletions apps/spruce/src/components/Banners/SlackNotificationBanner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,30 +88,30 @@ export const SlackNotificationBanner = () => {

return shouldShowSlackBanner ? (
<Banner
variant="info"
data-cy="slack-notification-banner"
dismissible
onClose={hideBanner}
variant="info"
>
You can receive a Slack notification when your patch is ready.{" "}
<Popconfirm
confirmDisabled={!slackUsername || loadingUpdateUserSettings}
confirmText="Save"
onConfirm={() => saveNotificationSettings()}
confirmDisabled={!slackUsername || loadingUpdateUserSettings}
trigger={
<SubscribeButton data-cy="subscribe-to-notifications">
Subscribe
</SubscribeButton>
}
>
<TextInput
label="Slack Username"
autoFocus
data-cy="slack-username-input"
// @ts-expect-error: FIXME. This comment was added by an automated script.
value={slackUsername}
label="Slack Username"
onChange={(e) => setSlackUsername(e.target.value)}
onKeyPress={(e) => e.key === "Enter" && saveNotificationSettings()}
autoFocus
// @ts-expect-error: FIXME. This comment was added by an automated script.
value={slackUsername}
/>
</Popconfirm>
</Banner>
Expand Down
6 changes: 3 additions & 3 deletions apps/spruce/src/components/Breadcrumbs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ breadcrumbs }) => (
{breadcrumbs.length - 1 !== index && (
<PaddedIcon
data-cy="breadcrumb-chevron"
glyph="ChevronRight"
fill={gray.dark2}
glyph="ChevronRight"
size="small"
/>
)}
Expand All @@ -49,12 +49,12 @@ const BreadcrumbFragment: React.FC<BreadcrumbFragmentProps> = ({
<Tooltip
align="top"
data-cy="breadcrumb-tooltip"
justify="middle"
enabled={shouldTrimMessage}
justify="middle"
trigger={
to ? (
<div data-cy={dataCy}>
<StyledRouterLink to={to} onClick={onClick}>
<StyledRouterLink onClick={onClick} to={to}>
{message}
</StyledRouterLink>
</div>
Expand Down
14 changes: 7 additions & 7 deletions apps/spruce/src/components/ButtonDropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,22 @@ export const ButtonDropdown: React.FC<Props> = ({
size = "small",
}) => (
<Menu
adjustOnMutation
data-cy="card-dropdown"
open={open}
popoverZIndex={zIndex.popover}
// @ts-expect-error: FIXME. This comment was added by an automated script.
setOpen={setOpen}
trigger={
<LoadingButton
size={size}
data-cy={dataCy}
disabled={disabled}
loading={loading}
size={size}
>
<Icon glyph="Ellipsis" />
</LoadingButton>
}
data-cy="card-dropdown"
popoverZIndex={zIndex.popover}
adjustOnMutation
open={open}
// @ts-expect-error: FIXME. This comment was added by an automated script.
setOpen={setOpen}
>
{dropdownItems}
</Menu>
Expand Down
2 changes: 1 addition & 1 deletion apps/spruce/src/components/Buttons/PlusButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ export const PlusButton: ExtendableBox<
> = forwardRef(({ leftGlyph, ...rest }: ButtonProps, ref) => (
<LeafyGreenButton
ref={ref}
leftGlyph={<Icon glyph="Plus" />}
as="button"
leftGlyph={<Icon glyph="Plus" />}
{...rest}
/>
));
8 changes: 4 additions & 4 deletions apps/spruce/src/components/Checkbox/CheckboxGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ export const CheckboxGroup: React.FC<CheckboxesProps> = ({
{data.map(({ key, title, value: checkboxValue }) => (
<StyledCheckbox
key={key}
className="cy-checkbox"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, key)}
label={title}
checked={value.includes(checkboxValue)}
bold={false}
checked={value.includes(checkboxValue)}
className="cy-checkbox"
data-cy={title}
label={title}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e, key)}
/>
))}
</CheckboxesWrapper>
Expand Down
10 changes: 5 additions & 5 deletions apps/spruce/src/components/CodeChanges/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const CodeChanges: React.FC<CodeChangesProps> = ({ patchId }) => {
const { moduleCodeChanges } = data?.patch ?? {};

if (loading) {
return <Skeleton active title paragraph={{ rows: 8 }} />;
return <Skeleton active paragraph={{ rows: 8 }} title />;
}
if (error) {
return <div id="patch-error">{error.message}</div>;
Expand Down Expand Up @@ -93,19 +93,19 @@ export const CodeChanges: React.FC<CodeChangesProps> = ({ patchId }) => {
<Title>Changes on {branchName}: </Title>
<StyledButton
data-cy="html-diff-btn"
size="small"
title="Open diff as html file"
href={htmlLink}
size="small"
target="_blank"
title="Open diff as html file"
>
HTML
</StyledButton>
<StyledButton
data-cy="raw-diff-btn"
size="small"
title="Open diff as raw file"
href={rawLink}
size="small"
target="_blank"
title="Open diff as raw file"
>
Raw
</StyledButton>
Expand Down
6 changes: 3 additions & 3 deletions apps/spruce/src/components/CodeChangesTable/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ export const CodeChangesTable: React.FC<CodeChangesTableProps> = ({
<BaseTable
data-cy="code-changes-table"
data-cy-row="code-changes-table-row"
table={table}
shouldAlternateRowColor
table={table}
/>
);
};
Expand Down Expand Up @@ -57,12 +57,12 @@ const columns = [
accessorKey: "additions",
header: "Additions",
// @ts-expect-error: FIXME. This comment was added by an automated script.
cell: ({ getValue }) => <FileDiffText value={getValue()} type="+" />,
cell: ({ getValue }) => <FileDiffText type="+" value={getValue()} />,
},
{
accessorKey: "deletions",
header: "Deletions",
// @ts-expect-error: FIXME. This comment was added by an automated script.
cell: ({ getValue }) => <FileDiffText value={getValue()} type="-" />,
cell: ({ getValue }) => <FileDiffText type="-" value={getValue()} />,
},
];
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ import CommitChartLabel from ".";
const RenderCommitChartLabel = ({ version }) => (
<MockedProvider mocks={[getSpruceConfigMock]}>
<CommitChartLabel
versionId={version.id}
githash={shortenGithash(version.revision)}
createTime={version.createTime}
author={version.author}
message={version.message}
createTime={version.createTime}
githash={shortenGithash(version.revision)}
gitTags={[
{ tag: "v1.2.3", pusher: "release-bot" },
{ tag: "v1.2.3-rc0", pusher: "release-bot" },
]}
message={version.message}
versionId={version.id}
/>
</MockedProvider>
);
Expand Down
6 changes: 3 additions & 3 deletions apps/spruce/src/components/CommitChartLabel/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ const CommitChartLabel: React.FC<Props> = ({
<LabelText>
<InlineCode
as={Link}
data-cy="githash-link"
onClick={onClickGithash}
to={getVersionRoute(versionId)}
data-cy="githash-link"
>
{shortenGithash(githash)}
</InlineCode>{" "}
Expand Down Expand Up @@ -102,9 +102,9 @@ const CommitChartLabel: React.FC<Props> = ({
</LabelText>
{shortenMessage && (
<ExpandedText
popoverZIndex={zIndex.tooltip}
message={message}
data-cy="long-commit-message-tooltip"
message={message}
popoverZIndex={zIndex.tooltip}
/>
)}
{gitTags && (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ describe("conditionalWrapper", () => {
it("should render the element surrounded by the secondary wrapper when the conditional is false and a secondary wrapper is supplied", () => {
render(
<ConditionalWrapper
altWrapper={(children) => <Wrapper2>{children}</Wrapper2>}
condition={false}
wrapper={(children) => <Wrapper1>{children}</Wrapper1>}
altWrapper={(children) => <Wrapper2>{children}</Wrapper2>}
>
<span>Some Element</span>
</ConditionalWrapper>,
Expand Down
4 changes: 2 additions & 2 deletions apps/spruce/src/components/Content/Layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ export const Layout: React.FC = () => {
<Outlet />
{!shouldDisableForTest && !hasUsedSpruceBefore && (
<WelcomeModal
title="Welcome to the New Evergreen UI!"
param="hasUsedSpruceBefore"
carouselCards={newSpruceUser}
param="hasUsedSpruceBefore"
title="Welcome to the New Evergreen UI!"
/>
)}
<FloatingContent>
Expand Down
Loading

0 comments on commit 6fb31a4

Please sign in to comment.