Skip to content

Commit e686774

Browse files
camielvscamielvs
authored
Update Link Component (#1472)
## Description <!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. --> Update our core `Link` component for improved UI. Migrate various places around the app onto the Link component. ## Related Issue and Pull requests <!-- Link to any related issues using the format #<issue-number> --> ## Type of Change <!-- Please delete options that are not relevant --> - [x] Cleanup/Refactor ## Checklist <!-- Please ensure the following are completed before submitting the PR --> - [ ] I have tested this does not break current pipelines / runs functionality - [ ] I have tested the changes on staging ## Screenshots (if applicable) <!-- Include any screenshots that might help explain the changes or provide visual context --> ## Test Instructions <!-- Detail steps and prerequisites for testing the changes in this PR --> All links should work as expected! ## Additional Comments <!-- Add any additional context or information that reviewers might need to know regarding this PR --> Given I passed through a variety of components I made an effort NOT to start refactoring everything I saw onto UI primitives. I will deal with that later. This PR is solely focussed on `<a />` and `<Link />`
1 parent c424d9a commit e686774

File tree

14 files changed

+91
-111
lines changed

14 files changed

+91
-111
lines changed

‎src/components/Home/PipelineSection/PipelineRow.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link, useNavigate } from "@tanstack/react-router";
1+
import { useNavigate } from "@tanstack/react-router";
22
import { type MouseEvent, useCallback, useMemo } from "react";
33

44
import { ConfirmationDialog } from "@/components/shared/Dialogs";
@@ -86,15 +86,6 @@ const PipelineRow = ({
8686
return formatDate(modificationTime.toISOString());
8787
}, [modificationTime]);
8888

89-
const linkProps = {
90-
to: `${EDITOR_PATH}/$name`,
91-
params: { name: name ?? "" },
92-
className: "hover:underline",
93-
onClick: (e: MouseEvent) => {
94-
e.stopPropagation();
95-
},
96-
};
97-
9889
return (
9990
<>
10091
<TableRow
@@ -110,7 +101,7 @@ const PipelineRow = ({
110101
/>
111102
</TableCell>
112103
<TableCell>
113-
<Link {...linkProps}>{name}</Link>
104+
<Paragraph>{name}</Paragraph>
114105
</TableCell>
115106
<TableCell>
116107
<Paragraph tone="subdued" size="xs">

‎src/components/Home/RunSection/RunRow.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Link, useNavigate } from "@tanstack/react-router";
1+
import { useNavigate } from "@tanstack/react-router";
22
import { type MouseEvent, useCallback } from "react";
33

44
import type { PipelineRunResponse } from "@/api/types.gen";
@@ -15,6 +15,7 @@ import {
1515
TooltipContent,
1616
TooltipTrigger,
1717
} from "@/components/ui/tooltip";
18+
import { Paragraph } from "@/components/ui/typography";
1819
import useToastNotification from "@/hooks/useToastNotification";
1920
import { APP_ROUTES } from "@/routes/router";
2021
import {
@@ -50,14 +51,6 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
5051

5152
const clickThroughUrl = `${APP_ROUTES.RUNS}/${runId}`;
5253

53-
const LinkProps = {
54-
to: clickThroughUrl,
55-
className: "underline hover:text-blue-500 text-black",
56-
onClick: (e: MouseEvent) => {
57-
e.stopPropagation(); // Prevent triggering the row click handler
58-
},
59-
};
60-
6154
const createdByButton = (
6255
<Button
6356
className="truncate underline"
@@ -88,7 +81,7 @@ const RunRow = ({ run }: { run: PipelineRunResponse }) => {
8881
>
8982
<TableCell className="text-sm flex items-center gap-2">
9083
<StatusIcon status={getRunStatus(statusCounts)} />
91-
<Link {...LinkProps}>{name}</Link>
84+
<Paragraph>{name}</Paragraph>
9285
<span>{`#${runId}`}</span>
9386
</TableCell>
9487
<TableCell>

‎src/components/layout/AppFooter.tsx‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,46 +18,39 @@ function AppFooter() {
1818
>
1919
<InlineStack className="w-full" align="space-between">
2020
<div />
21-
<InlineStack gap="1" blockAlign="center">
22-
<Link
23-
href={ABOUT_URL}
24-
className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
25-
target="_blank"
26-
rel="noopener noreferrer"
27-
>
21+
<InlineStack gap="4" blockAlign="center">
22+
<Link href={ABOUT_URL} target="_blank" rel="noopener noreferrer">
2823
About
2924
</Link>
3025
<Link
3126
href={GIVE_FEEDBACK_URL}
32-
className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
3327
target="_blank"
3428
rel="noopener noreferrer"
3529
>
3630
Give feedback
3731
</Link>
3832
<Link
3933
href={PRIVACY_POLICY_URL}
40-
className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
4134
target="_blank"
4235
rel="noopener noreferrer"
4336
>
4437
Privacy policy
4538
</Link>
46-
Version:
47-
<Link
48-
href={`${GIT_REPO_URL}/commit/${GIT_COMMIT}`}
49-
className="mx-1.5 text-blue-600 hover:text-blue-800 hover:underline"
50-
target="_blank"
51-
rel="noopener noreferrer"
52-
>
53-
{GIT_COMMIT.substring(0, 6)}
54-
</Link>
39+
<InlineStack gap="1" blockAlign="center">
40+
Version:
41+
<Link
42+
href={`${GIT_REPO_URL}/commit/${GIT_COMMIT}`}
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
>
46+
{GIT_COMMIT.substring(0, 6)}
47+
</Link>
48+
</InlineStack>
5549
</InlineStack>
5650
<Text size="xs" font="mono" tone="subdued">
5751
Built with{" "}
5852
<Link
5953
href="https://reactflow.dev"
60-
className="text-blue-400 hover:text-blue-600 hover:underline"
6154
target="_blank"
6255
rel="noopener noreferrer"
6356
>

‎src/components/layout/AppMenu.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { Link } from "@tanstack/react-router";
2-
31
import logo from "/public/Tangle_white.png";
42
import { isAuthorizationRequired } from "@/components/shared/Authentication/helpers";
53
import { TopBarAuthentication } from "@/components/shared/Authentication/TopBarAuthentication";
64
import ImportPipeline from "@/components/shared/ImportPipeline";
75
import { InlineStack } from "@/components/ui/layout";
6+
import { Link } from "@/components/ui/link";
87
import { useComponentSpec } from "@/providers/ComponentSpecProvider";
98
import { TOP_NAV_HEIGHT } from "@/utils/constants";
109

@@ -28,7 +27,7 @@ const AppMenu = () => {
2827
className="pl-12 pr-2"
2928
>
3029
<InlineStack blockAlign="center">
31-
<Link to="/">
30+
<Link href="/" aria-label="Home" variant="block">
3231
<img
3332
src={logo}
3433
alt="logo"

‎src/components/shared/ExecutionDetails/ExecutionDetails.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
CollapsibleContent,
88
CollapsibleTrigger,
99
} from "@/components/ui/collapsible";
10+
import { Link } from "@/components/ui/link";
1011
import { Skeleton } from "@/components/ui/skeleton";
1112
import { useBackend } from "@/providers/BackendProvider";
1213
import { useFetchContainerExecutionState } from "@/services/executionService";
@@ -161,15 +162,14 @@ export const ExecutionDetails = ({
161162
<span className="font-medium text-foreground min-w-fit">
162163
{linkInfo.name}:
163164
</span>
164-
<a
165+
<Link
165166
href={linkInfo.url}
166-
className="text-sky-500 hover:underline flex items-center gap-1"
167167
target="_blank"
168168
rel="noopener noreferrer"
169169
>
170170
{linkInfo.value}
171171
<ExternalLink className="size-3 shrink-0" />
172-
</a>
172+
</Link>
173173
</div>
174174
))}
175175
</>

‎src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellDetails.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ const IOCellDetails = ({ io, artifactData, actions }: IOCellDetailsProps) => {
3838
artifactData.uri,
3939
artifactData.is_dir,
4040
)}
41-
className="font-mono break-all text-xs text-blue-600 hover:text-blue-800 hover:underline flex items-center gap-1"
4241
>
4342
{artifactData.uri}
4443
</Link>

‎src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/IOSection/IOCell/IOCellHeader.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,7 @@ const IOCellHeader = ({
9797
artifactData.is_dir || false,
9898
)}
9999
external
100-
iconClassName="h-2.5 w-2.5"
101-
className="font-mono break-all text-[10px] text-blue-600 hover:text-blue-800 hover:underline flex gap-1"
100+
size="xs"
102101
>
103102
Link
104103
</Link>

‎src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/logs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ export const OpenLogsInNewWindowLink = ({
207207
<Link
208208
href={logsUrl}
209209
external
210-
variant={available ? "link" : "disabled"}
210+
variant={available ? "primary" : "disabled"}
211211
size="sm"
212212
aria-label={
213213
available

‎src/components/shared/ReactFlow/FlowSidebar/components/RecentExecutions.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { useEffect, useMemo } from "react";
22

33
import { InfoBox } from "@/components/shared/InfoBox";
44
import RunOverview from "@/components/shared/RunOverview";
5+
import { Link } from "@/components/ui/link";
56
import { ScrollArea } from "@/components/ui/scroll-area";
67
import { Spinner } from "@/components/ui/spinner";
8+
import { Paragraph } from "@/components/ui/typography";
79
import { cn } from "@/lib/utils";
810
import { useBackend } from "@/providers/BackendProvider";
911
import { usePipelineRuns } from "@/providers/PipelineRunsProvider";
@@ -15,15 +17,21 @@ const RecentExecutions = ({ pipelineName }: { pipelineName?: string }) => {
1517
const runOverviews = useMemo(
1618
() =>
1719
recentRuns.map((run) => (
18-
<a key={run.id} href={`/runs/${run.id}`} tabIndex={0}>
20+
<Link
21+
key={run.id}
22+
href={`/runs/${run.id}`}
23+
tabIndex={0}
24+
variant="block"
25+
className="w-full"
26+
>
1927
<RunOverview
2028
run={run}
2129
config={{
2230
showName: false,
2331
}}
24-
className="rounded-sm hover:bg-gray-100"
32+
className="rounded-sm hover:bg-gray-100 w-full"
2533
/>
26-
</a>
34+
</Link>
2735
)),
2836
[recentRuns],
2937
);
@@ -95,12 +103,16 @@ const RecentExecutions = ({ pipelineName }: { pipelineName?: string }) => {
95103
{recentRuns.length === 0 ? (
96104
<div className="text-xs text-muted-foreground">No runs yet.</div>
97105
) : (
98-
<ScrollArea className="h-fit rounded">
106+
<ScrollArea className="h-fit rounded w-full">
99107
{runOverviews}
100108
{remainingRuns > 0 && (
101-
<div className="mt-2 text-xs text-muted-foreground w.full text-center">
109+
<Paragraph
110+
size="xs"
111+
tone="subdued"
112+
className="mt-2 w-full text-center"
113+
>
102114
+{remainingRuns} more runs
103-
</div>
115+
</Paragraph>
104116
)}
105117
</ScrollArea>
106118
)}

‎src/components/shared/ReactFlow/FlowSidebar/sections/FileActions.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { PipelineNameDialog } from "@/components/shared/Dialogs";
55
import ImportPipeline from "@/components/shared/ImportPipeline";
66
import { Icon } from "@/components/ui/icon";
77
import { InlineStack } from "@/components/ui/layout";
8+
import { Link } from "@/components/ui/link";
89
import {
910
SidebarContent,
1011
SidebarGroup,
@@ -166,12 +167,13 @@ const FileActions = ({ isOpen }: { isOpen: boolean }) => {
166167
tooltipPosition={tooltipPosition}
167168
asChild
168169
>
169-
<a
170+
<Link
170171
href={URL.createObjectURL(componentTextBlob)}
171172
download={filename}
173+
variant="primary"
172174
>
173175
<Icon name="FileDown" size="lg" className="stroke-[1.5]" />
174-
</a>
176+
</Link>
175177
</SidebarMenuButton>
176178
</SidebarMenuItem>
177179
<SidebarMenuItem>

0 commit comments

Comments
 (0)