Thanks to visit codestin.com
Credit goes to github.com

Skip to content

fix(site): resolve all Array.prototype.toSorted and Array.prototype.sort bugs #17307

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 9, 2025
Merged

fix(site): resolve all Array.prototype.toSorted and Array.prototype.sort bugs #17307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0fe4644
fix: remove all Array.prototype.toSorted calls
Parkreiner Apr 9, 2025
d08ab30
fix: remove all accidental render mutations
Parkreiner Apr 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions site/src/api/queries/organizations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ export const organizationsPermissions = (
}

return {
queryKey: ["organizations", organizationIds.sort(), "permissions"],
queryKey: ["organizations", [...organizationIds.sort()], "permissions"],
queryFn: async () => {
// Only request what we need for the sidebar, which is one edit permission
// per sub-link (settings, groups, roles, and members pages) that tells us
Expand Down Expand Up @@ -316,7 +316,7 @@ export const workspacePermissionsByOrganization = (
}

return {
queryKey: ["workspaces", organizationIds.sort(), "permissions"],
queryKey: ["workspaces", [...organizationIds.sort()], "permissions"],
queryFn: async () => {
const prefixedChecks = organizationIds.flatMap((orgId) =>
Object.entries(workspacePermissionChecks(orgId, userId)).map(
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/dashboard/Navbar/proxyUtils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export function sortProxiesByLatency(
proxies: Proxies,
latencies: ProxyLatencies,
) {
return proxies.toSorted((a, b) => {
return [...proxies].sort((a, b) => {
const latencyA = latencies?.[a.id]?.latencyMS ?? Number.POSITIVE_INFINITY;
const latencyB = latencies?.[b.id]?.latencyMS ?? Number.POSITIVE_INFINITY;
return latencyA - latencyB;
Expand Down
6 changes: 3 additions & 3 deletions site/src/modules/workspaces/WorkspaceTiming/Chart/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ export const mergeTimeRanges = (ranges: TimeRange[]): TimeRange => {
.sort((a, b) => a.startedAt.getTime() - b.startedAt.getTime());
const start = sortedDurations[0].startedAt;

const sortedEndDurations = ranges
.slice()
.sort((a, b) => a.endedAt.getTime() - b.endedAt.getTime());
const sortedEndDurations = [...ranges].sort(
(a, b) => a.endedAt.getTime() - b.endedAt.getTime(),
);
const end = sortedEndDurations[sortedEndDurations.length - 1].endedAt;
return { startedAt: start, endedAt: end };
};
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/CreateTemplateGalleryPage/StarterTemplates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const sortVisibleTemplates = (templates: TemplateExample[]) => {
// The docker template should be the first template in the list,
// as it's the easiest way to get started with Coder.
const dockerTemplateId = "docker";
return templates.sort((a, b) => {
return [...templates].sort((a, b) => {
if (a.id === dockerTemplateId) {
return -1;
}
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const LicensesSettingsPageView: FC<Props> = ({

{!isLoading && licenses && licenses?.length > 0 && (
<Stack spacing={4} className="licenses">
{licenses
{[...(licenses ?? [])]
?.sort(
(a, b) =>
new Date(b.claims.license_expires).valueOf() -
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/HealthPage/DERPPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const DERPPage: FC = () => {
<section>
<SectionLabel>Regions</SectionLabel>
<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
{Object.values(regions!)
{Object.values(regions ?? {})
.filter((region) => {
// Values can technically be null
return region !== null;
Expand Down
4 changes: 2 additions & 2 deletions site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,8 +170,8 @@ const RoleTable: FC<RoleTableProps> = ({
</Cond>

<Cond>
{roles
?.sort((a, b) => a.name.localeCompare(b.name))
{[...(roles ?? [])]
.sort((a, b) => a.name.localeCompare(b.name))
.map((role) => (
<RoleRow
key={role.name}
Expand Down
146 changes: 72 additions & 74 deletions site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,9 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
...panelProps
}) => {
const theme = useTheme();
const validUsage = data?.filter((u) => u.seconds > 0);
const validUsage = data
?.filter((u) => u.seconds > 0)
.sort((a, b) => b.seconds - a.seconds);
const totalInSeconds =
validUsage?.reduce((total, usage) => total + usage.seconds, 0) ?? 1;
const usageColors = chroma
Expand All @@ -438,86 +440,82 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
gap: 24,
}}
>
{validUsage
.sort((a, b) => b.seconds - a.seconds)
.map((usage, i) => {
const percentage = (usage.seconds / totalInSeconds) * 100;
return (
<div
key={usage.slug}
css={{ display: "flex", gap: 24, alignItems: "center" }}
>
{validUsage.map((usage, i) => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

None of the code content changed here. The indentation only changed because I moved the .sort call up, to make it more obvious that it wasn't causing any harmful mutations

const percentage = (usage.seconds / totalInSeconds) * 100;
return (
<div
key={usage.slug}
css={{ display: "flex", gap: 24, alignItems: "center" }}
>
<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
<div
css={{ display: "flex", alignItems: "center", gap: 8 }}
>
<div
css={{
width: 20,
height: 20,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<img
src={usage.icon}
alt=""
style={{
objectFit: "contain",
width: "100%",
height: "100%",
}}
/>
</div>
<div css={{ fontSize: 13, fontWeight: 500, width: 200 }}>
{usage.display_name}
</div>
</div>
<Tooltip
title={`${Math.floor(percentage)}%`}
placement="top"
arrow
css={{
width: 20,
height: 20,
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<LinearProgress
value={percentage}
variant="determinate"
css={{
<img
src={usage.icon}
alt=""
style={{
objectFit: "contain",
width: "100%",
height: 8,
backgroundColor: theme.palette.divider,
"& .MuiLinearProgress-bar": {
backgroundColor: usageColors[i],
borderRadius: 999,
},
height: "100%",
}}
/>
</Tooltip>
<Stack
spacing={0}
</div>
<div css={{ fontSize: 13, fontWeight: 500, width: 200 }}>
{usage.display_name}
</div>
</div>
<Tooltip
title={`${Math.floor(percentage)}%`}
placement="top"
arrow
>
<LinearProgress
value={percentage}
variant="determinate"
css={{
fontSize: 13,
color: theme.palette.text.secondary,
width: 120,
flexShrink: 0,
lineHeight: "1.5",
width: "100%",
height: 8,
backgroundColor: theme.palette.divider,
"& .MuiLinearProgress-bar": {
backgroundColor: usageColors[i],
borderRadius: 999,
},
}}
>
{formatTime(usage.seconds)}
{usage.times_used > 0 && (
<span
css={{
fontSize: 12,
color: theme.palette.text.disabled,
}}
>
Opened {usage.times_used.toLocaleString()}{" "}
{usage.times_used === 1 ? "time" : "times"}
</span>
)}
</Stack>
</div>
);
})}
/>
</Tooltip>
<Stack
spacing={0}
css={{
fontSize: 13,
color: theme.palette.text.secondary,
width: 120,
flexShrink: 0,
lineHeight: "1.5",
}}
>
{formatTime(usage.seconds)}
{usage.times_used > 0 && (
<span
css={{
fontSize: 12,
color: theme.palette.text.disabled,
}}
>
Opened {usage.times_used.toLocaleString()}{" "}
{usage.times_used === 1 ? "time" : "times"}
</span>
)}
</Stack>
</div>
);
})}
</div>
)}
</PanelContent>
Expand Down
3 changes: 2 additions & 1 deletion site/src/pages/WorkspacePage/AppStatuses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,8 @@ export const AppStatuses: FC<AppStatusesProps> = ({
})),
);

// 2. Sort statuses chronologically (newest first)
// 2. Sort statuses chronologically (newest first) - mutating the value is
// fine since it's not an outside parameter
allStatuses.sort(
(a, b) =>
new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
Expand Down
Loading