Skip to content

Commit f6c550e

Browse files
hcharlie1201kavinvalli
hcharlie1201
and
kavinvalli
authored
[ENG-1689] Fix Safari session table links (#3763)
Co-authored-by: kavinvalli <mail@kavin.me>
1 parent 0b9fca8 commit f6c550e

File tree

1 file changed

+102
-120
lines changed

1 file changed

+102
-120
lines changed

‎web/components/shared/themed/table/themedTable.tsx‎

Lines changed: 102 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,16 @@ import DraggableColumnHeader from "./columns/draggableColumnHeader";
3232

3333
type CheckboxMode = "always_visible" | "on_hover" | "never";
3434

35+
function ConditionalLink<T>({
36+
children,
37+
href,
38+
}: {
39+
children: React.ReactNode;
40+
href?: string | undefined;
41+
}) {
42+
return href ? <Link href={href}>{children}</Link> : children;
43+
}
44+
3545
interface ThemedTableProps<T extends { id?: string; subRows?: T[] }> {
3646
id: string;
3747
defaultData: T[];
@@ -370,131 +380,103 @@ export default function ThemedTable<T extends { id?: string; subRows?: T[] }>(
370380
maxWidth: cell.column.getSize(),
371381
}}
372382
>
373-
<div
374-
className={clsx("flex items-center gap-1")}
375-
style={
376-
i === 0
377-
? {
378-
paddingLeft: `${
379-
row.depth * 24 +
380-
(onToggleAllRows !== undefined ? 24 : 0) +
381-
(row.getCanExpand() ? 0 : 8)
382-
}px`,
383-
}
384-
: {}
385-
}
386-
>
387-
{i === 0 &&
388-
(() => {
389-
const getAncestorPath = (
390-
currentRow: Row<T>
391-
): string | undefined => {
392-
if (currentRow.depth === 0) {
393-
return (currentRow.original as any)
394-
?.path as string;
395-
}
396-
let currentParent = currentRow.getParentRow();
397-
while (currentParent && currentParent.depth > 0) {
398-
currentParent = currentParent.getParentRow();
399-
}
400-
return currentParent
401-
? ((currentParent.original as any)
402-
?.path as string)
403-
: undefined;
404-
};
383+
<ConditionalLink href={rowLink?.(row.original)}>
384+
<div
385+
className={clsx("flex items-center gap-1")}
386+
style={
387+
i === 0
388+
? {
389+
paddingLeft: `${
390+
row.depth * 24 +
391+
(onToggleAllRows !== undefined ? 24 : 0) +
392+
(row.getCanExpand() ? 0 : 8)
393+
}px`,
394+
}
395+
: {}
396+
}
397+
>
398+
{i === 0 &&
399+
(() => {
400+
const getAncestorPath = (
401+
currentRow: Row<T>
402+
): string | undefined => {
403+
if (currentRow.depth === 0) {
404+
return (currentRow.original as any)
405+
?.path as string;
406+
}
407+
let currentParent = currentRow.getParentRow();
408+
while (
409+
currentParent &&
410+
currentParent.depth > 0
411+
) {
412+
currentParent = currentParent.getParentRow();
413+
}
414+
return currentParent
415+
? ((currentParent.original as any)
416+
?.path as string)
417+
: undefined;
418+
};
405419

406-
const ancestorPath = getAncestorPath(row);
407-
const groupColorClass =
408-
(ancestorPath &&
409-
topLevelPathColorMap[ancestorPath]) ||
410-
"bg-transparent";
420+
const ancestorPath = getAncestorPath(row);
421+
const groupColorClass =
422+
(ancestorPath &&
423+
topLevelPathColorMap[ancestorPath]) ||
424+
"bg-transparent";
411425

412-
if (groupColorClass !== "bg-transparent") {
413-
return (
414-
<div
415-
className={clsx(
416-
"absolute left-0 top-0 bottom-0 w-1 z-30",
417-
groupColorClass
418-
)}
419-
/>
420-
);
421-
}
422-
return null;
423-
})()}
426+
if (groupColorClass !== "bg-transparent") {
427+
return (
428+
<div
429+
className={clsx(
430+
"absolute left-0 top-0 bottom-0 w-1 z-30",
431+
groupColorClass
432+
)}
433+
/>
434+
);
435+
}
436+
return null;
437+
})()}
424438

425-
{i === 0 && row.getCanExpand() && (
426-
<button
427-
{...{
428-
onClick: row.getToggleExpandedHandler(),
429-
style: { cursor: "pointer" },
430-
"data-expander": true,
431-
}}
432-
className="p-0.5"
433-
>
434-
{row.getIsExpanded() ? (
435-
<ChevronDown className="h-4 w-4 text-muted-foreground" />
436-
) : (
437-
<ChevronRight className="h-4 w-4 text-muted-foreground" />
438-
)}
439-
</button>
440-
)}
441-
{dataLoading &&
442-
(cell.column.id == "requestText" ||
443-
cell.column.id == "responseText") ? (
444-
<span
445-
className={clsx(
446-
"w-full flex flex-grow",
447-
(cell.column.id == "requestText" ||
448-
cell.column.id == "responseText") &&
449-
dataLoading
450-
? "animate-pulse bg-slate-200 rounded-md"
451-
: "hidden"
452-
)}
453-
>
454-
&nbsp;
455-
</span>
456-
) : (
457-
flexRender(
458-
cell.column.columnDef.cell,
459-
cell.getContext()
460-
)
461-
)}
462-
</div>
439+
{i === 0 && row.getCanExpand() && (
440+
<button
441+
{...{
442+
onClick: row.getToggleExpandedHandler(),
443+
style: { cursor: "pointer" },
444+
"data-expander": true,
445+
}}
446+
className="p-0.5"
447+
>
448+
{row.getIsExpanded() ? (
449+
<ChevronDown className="h-4 w-4 text-muted-foreground" />
450+
) : (
451+
<ChevronRight className="h-4 w-4 text-muted-foreground" />
452+
)}
453+
</button>
454+
)}
455+
{dataLoading &&
456+
(cell.column.id == "requestText" ||
457+
cell.column.id == "responseText") ? (
458+
<span
459+
className={clsx(
460+
"w-full flex flex-grow",
461+
(cell.column.id == "requestText" ||
462+
cell.column.id == "responseText") &&
463+
dataLoading
464+
? "animate-pulse bg-slate-200 rounded-md"
465+
: "hidden"
466+
)}
467+
>
468+
&nbsp;
469+
</span>
470+
) : (
471+
flexRender(
472+
cell.column.columnDef.cell,
473+
cell.getContext()
474+
)
475+
)}
476+
</div>
477+
</ConditionalLink>
463478
</td>
464479
))}
465-
{rowLink && (
466-
<td
467-
className="p-0 m-0 border-0"
468-
style={{
469-
position: "absolute",
470-
top: 0,
471-
left: 0,
472-
right: 0,
473-
bottom: 0,
474-
padding: 0,
475-
margin: 0,
476-
border: "none",
477-
background: "transparent",
478-
pointerEvents: "none",
479-
zIndex: 2,
480-
}}
481-
>
482-
<Link
483-
href={rowLink(row.original)}
484-
style={{
485-
display: "block",
486-
width: "100%",
487-
height: "100%",
488-
opacity: 0,
489-
pointerEvents: "auto",
490-
}}
491-
onClick={(e: React.MouseEvent) => {
492-
e.stopPropagation();
493-
}}
494-
aria-hidden="true"
495-
/>
496-
</td>
497-
)}
498480
</tr>
499481
))}
500482
</tbody>

0 commit comments

Comments
 (0)