Skip to content

Commit 97461c0

Browse files
cardernecarderne
authored
refactor(webapp): remove redundant React fragments (#4683)
## Summary Remove redundant React fragments from dashboard components, leaving their rendered output unchanged while simplifying component trees. Base: [#4682](#4682)
1 parent 219bc09 commit 97461c0

7 files changed

Lines changed: 174 additions & 191 deletions

File tree

‎apps/webapp/app/components/primitives/FormError.tsx‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,17 @@ export function FormError({
1212
id?: string;
1313
className?: string;
1414
}) {
15-
return (
16-
<>
17-
{children && (
18-
<motion.div
19-
initial={{ opacity: 0 }}
20-
animate={{ opacity: 1 }}
21-
transition={{ duration: 0.3 }}
22-
className={cn("flex items-start gap-0.5", className)}
23-
>
24-
<ErrorIcon className="h-4 w-4 shrink-0 justify-start text-rose-500" />
25-
<Paragraph id={id} variant="extra-small" className="text-rose-500">
26-
{children}
27-
</Paragraph>
28-
</motion.div>
29-
)}
30-
</>
31-
);
15+
return children ? (
16+
<motion.div
17+
initial={{ opacity: 0 }}
18+
animate={{ opacity: 1 }}
19+
transition={{ duration: 0.3 }}
20+
className={cn("flex items-start gap-0.5", className)}
21+
>
22+
<ErrorIcon className="h-4 w-4 shrink-0 justify-start text-rose-500" />
23+
<Paragraph id={id} variant="extra-small" className="text-rose-500">
24+
{children}
25+
</Paragraph>
26+
</motion.div>
27+
) : null;
3228
}

‎apps/webapp/app/components/primitives/Icon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function Icon(props: IconProps) {
1818
}
1919

2020
if (React.isValidElement(props.icon)) {
21-
return <>{props.icon}</>;
21+
return props.icon;
2222
}
2323

2424
if (

‎apps/webapp/app/components/query/QueryEditor.tsx‎

Lines changed: 63 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1187,38 +1187,36 @@ function ResultsChart({
11871187
accessory?: ReactNode;
11881188
}) {
11891189
return (
1190-
<>
1191-
<ResizablePanelGroup className="overflow-hidden">
1192-
<ResizablePanel id="chart-results">
1193-
<div className="h-full overflow-hidden bg-background-bright">
1194-
<QueryWidget
1195-
className="border-0"
1196-
title={
1197-
<QueryTitle
1198-
isTitleLoading={isTitleLoading}
1199-
title={queryTitle}
1200-
onRename={onRenameTitle}
1201-
/>
1202-
}
1203-
query={query}
1204-
data={{
1205-
rows,
1206-
columns,
1207-
}}
1208-
config={{
1209-
type: "chart",
1210-
...chartConfig,
1211-
}}
1212-
accessory={accessory}
1213-
/>
1214-
</div>
1215-
</ResizablePanel>
1216-
<ResizableHandle id="chart-split" />
1217-
<ResizablePanel id="chart-config" min="50px" default="200px">
1218-
<ChartConfigPanel columns={columns} config={chartConfig} onChange={onChartConfigChange} />
1219-
</ResizablePanel>
1220-
</ResizablePanelGroup>
1221-
</>
1190+
<ResizablePanelGroup className="overflow-hidden">
1191+
<ResizablePanel id="chart-results">
1192+
<div className="h-full overflow-hidden bg-background-bright">
1193+
<QueryWidget
1194+
className="border-0"
1195+
title={
1196+
<QueryTitle
1197+
isTitleLoading={isTitleLoading}
1198+
title={queryTitle}
1199+
onRename={onRenameTitle}
1200+
/>
1201+
}
1202+
query={query}
1203+
data={{
1204+
rows,
1205+
columns,
1206+
}}
1207+
config={{
1208+
type: "chart",
1209+
...chartConfig,
1210+
}}
1211+
accessory={accessory}
1212+
/>
1213+
</div>
1214+
</ResizablePanel>
1215+
<ResizableHandle id="chart-split" />
1216+
<ResizablePanel id="chart-config" min="50px" default="200px">
1217+
<ChartConfigPanel columns={columns} config={chartConfig} onChange={onChartConfigChange} />
1218+
</ResizablePanel>
1219+
</ResizablePanelGroup>
12221220
);
12231221
}
12241222

@@ -1266,42 +1264,40 @@ function ResultsBigNumber({
12661264
}, [columns]);
12671265

12681266
return (
1269-
<>
1270-
<ResizablePanelGroup className="overflow-hidden">
1271-
<ResizablePanel id="bignumber-results">
1272-
<div className="h-full overflow-hidden bg-background-bright">
1273-
<QueryWidget
1274-
className="border-0"
1275-
title={
1276-
<QueryTitle
1277-
isTitleLoading={isTitleLoading}
1278-
title={queryTitle}
1279-
onRename={onRenameTitle}
1280-
/>
1281-
}
1282-
query={query}
1283-
data={{
1284-
rows,
1285-
columns,
1286-
}}
1287-
config={{
1288-
type: "bignumber",
1289-
...bigNumberConfig,
1290-
}}
1291-
accessory={accessory}
1292-
/>
1293-
</div>
1294-
</ResizablePanel>
1295-
<ResizableHandle id="bignumber-split" />
1296-
<ResizablePanel id="bignumber-config" min="50px" default="200px">
1297-
<BigNumberConfigPanel
1298-
columns={columns}
1299-
config={bigNumberConfig}
1300-
onChange={onBigNumberConfigChange}
1267+
<ResizablePanelGroup className="overflow-hidden">
1268+
<ResizablePanel id="bignumber-results">
1269+
<div className="h-full overflow-hidden bg-background-bright">
1270+
<QueryWidget
1271+
className="border-0"
1272+
title={
1273+
<QueryTitle
1274+
isTitleLoading={isTitleLoading}
1275+
title={queryTitle}
1276+
onRename={onRenameTitle}
1277+
/>
1278+
}
1279+
query={query}
1280+
data={{
1281+
rows,
1282+
columns,
1283+
}}
1284+
config={{
1285+
type: "bignumber",
1286+
...bigNumberConfig,
1287+
}}
1288+
accessory={accessory}
13011289
/>
1302-
</ResizablePanel>
1303-
</ResizablePanelGroup>
1304-
</>
1290+
</div>
1291+
</ResizablePanel>
1292+
<ResizableHandle id="bignumber-split" />
1293+
<ResizablePanel id="bignumber-config" min="50px" default="200px">
1294+
<BigNumberConfigPanel
1295+
columns={columns}
1296+
config={bigNumberConfig}
1297+
onChange={onBigNumberConfigChange}
1298+
/>
1299+
</ResizablePanel>
1300+
</ResizablePanelGroup>
13051301
);
13061302
}
13071303

‎apps/webapp/app/components/run/RunTimeline.tsx‎

Lines changed: 69 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -594,86 +594,84 @@ export function SpanTimeline({
594594
const visibleEvents = events ?? [];
595595

596596
return (
597-
<>
598-
<div className="min-w-fit max-w-80">
599-
{visibleEvents.map((event, index) => {
600-
// Store previous date to compare
601-
const prevDate = index === 0 ? null : visibleEvents[index - 1].timestamp;
597+
<div className="min-w-fit max-w-80">
598+
{visibleEvents.map((event, index) => {
599+
// Store previous date to compare
600+
const prevDate = index === 0 ? null : visibleEvents[index - 1].timestamp;
602601

603-
return (
604-
<Fragment key={index}>
605-
<RunTimelineEvent
606-
title={event.name}
607-
subtitle={<DateTimeAccurate date={event.timestamp} previousDate={prevDate} />}
608-
variant={event.markerVariant}
609-
state={state}
610-
helpText={event.helpText}
611-
style={style}
612-
/>
613-
<RunTimelineLine
614-
title={
615-
index === visibleEvents.length - 1
616-
? // Last event - calculate duration until span start time
617-
formatDuration(event.timestamp, startTime)
618-
: // Calculate duration until next event
619-
formatDuration(event.timestamp, visibleEvents[index + 1].timestamp)
620-
}
621-
variant={event.lineVariant}
622-
state={state}
623-
style={style}
624-
/>
625-
</Fragment>
626-
);
627-
})}
628-
<RunTimelineEvent
629-
title="Started"
630-
subtitle={
631-
<DateTimeAccurate
632-
date={startTime}
633-
previousDate={
634-
visibleEvents.length > 0 ? visibleEvents[visibleEvents.length - 1].timestamp : null
602+
return (
603+
<Fragment key={index}>
604+
<RunTimelineEvent
605+
title={event.name}
606+
subtitle={<DateTimeAccurate date={event.timestamp} previousDate={prevDate} />}
607+
variant={event.markerVariant}
608+
state={state}
609+
helpText={event.helpText}
610+
style={style}
611+
/>
612+
<RunTimelineLine
613+
title={
614+
index === visibleEvents.length - 1
615+
? // Last event - calculate duration until span start time
616+
formatDuration(event.timestamp, startTime)
617+
: // Calculate duration until next event
618+
formatDuration(event.timestamp, visibleEvents[index + 1].timestamp)
635619
}
620+
variant={event.lineVariant}
621+
state={state}
622+
style={style}
636623
/>
637-
}
638-
variant={"start-cap-thick"}
624+
</Fragment>
625+
);
626+
})}
627+
<RunTimelineEvent
628+
title="Started"
629+
subtitle={
630+
<DateTimeAccurate
631+
date={startTime}
632+
previousDate={
633+
visibleEvents.length > 0 ? visibleEvents[visibleEvents.length - 1].timestamp : null
634+
}
635+
/>
636+
}
637+
variant={"start-cap-thick"}
638+
state={state}
639+
helpText={getHelpTextForEvent("Started")}
640+
style={style}
641+
/>
642+
{state === "inprogress" ? (
643+
<RunTimelineLine
644+
title={<LiveTimer startTime={startTime} />}
639645
state={state}
640-
helpText={getHelpTextForEvent("Started")}
646+
variant="normal"
641647
style={style}
642648
/>
643-
{state === "inprogress" ? (
649+
) : (
650+
<>
644651
<RunTimelineLine
645-
title={<LiveTimer startTime={startTime} />}
646-
state={state}
652+
title={formatDuration(
653+
startTime,
654+
new Date(startTime.getTime() + nanosecondsToMilliseconds(duration))
655+
)}
656+
state={isError ? "error" : undefined}
647657
variant="normal"
648658
style={style}
649659
/>
650-
) : (
651-
<>
652-
<RunTimelineLine
653-
title={formatDuration(
654-
startTime,
655-
new Date(startTime.getTime() + nanosecondsToMilliseconds(duration))
656-
)}
657-
state={isError ? "error" : undefined}
658-
variant="normal"
659-
style={style}
660-
/>
661-
<RunTimelineEvent
662-
title="Finished"
663-
subtitle={
664-
<DateTimeAccurate
665-
date={new Date(startTime.getTime() + nanosecondsToMilliseconds(duration))}
666-
previousDate={startTime}
667-
/>
668-
}
669-
state={isError ? "error" : undefined}
670-
variant="end-cap-thick"
671-
helpText={getHelpTextForEvent("Finished")}
672-
style={style}
673-
/>
674-
</>
675-
)}
676-
</div>
677-
</>
660+
<RunTimelineEvent
661+
title="Finished"
662+
subtitle={
663+
<DateTimeAccurate
664+
date={new Date(startTime.getTime() + nanosecondsToMilliseconds(duration))}
665+
previousDate={startTime}
666+
/>
667+
}
668+
state={isError ? "error" : undefined}
669+
variant="end-cap-thick"
670+
helpText={getHelpTextForEvent("Finished")}
671+
style={style}
672+
/>
673+
</>
674+
)}
675+
</div>
678676
);
679677
}

‎apps/webapp/app/components/runs/v3/WaitpointDetails.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,7 @@ export function WaitpointDetailTable({
8787
<div>
8888
<div className="flex w-full flex-wrap items-center justify-between gap-1">
8989
{waitpoint.completedAfter ? (
90-
<>
91-
<DateTimeAccurate date={waitpoint.completedAfter} />
92-
</>
90+
<DateTimeAccurate date={waitpoint.completedAfter} />
9391
) : (
9492
"–"
9593
)}
@@ -127,9 +125,8 @@ export function WaitpointDetailTable({
127125
{waitpoint.completedAt ? <DateTimeAccurate date={waitpoint.completedAt} /> : "–"}
128126
</Property.Value>
129127
</Property.Item>
130-
{waitpoint.status === "WAITING" ? null : waitpoint.status === "TIMED_OUT" ? (
131-
<></>
132-
) : waitpoint.output ? (
128+
{waitpoint.status === "WAITING" ? null : waitpoint.status ===
129+
"TIMED_OUT" ? null : waitpoint.output ? (
133130
<PacketDisplay title="Output" data={waitpoint.output} dataType={waitpoint.outputType} />
134131
) : waitpoint.completedAfter ? null : (
135132
"Completed with no output"

0 commit comments

Comments
 (0)