Skip to content

Commit d15108c

Browse files
CahllagerfeldCahllagerfeld
authored
Merge pull request #850 from zenml-io/staging
Release
2 parents a1631de + fc6fda8 commit d15108c

File tree

31 files changed

+331
-174
lines changed

31 files changed

+331
-174
lines changed

‎src/app/components/button-group.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import Trash from "@/assets/icons/trash.svg?react";
2+
import { DeleteStackComponentAlertBody } from "@/components/stack-components/delete-component/delete-alert";
3+
import { pluralize } from "@/lib/strings";
24
import {
35
AlertDialog,
46
AlertDialogTrigger
57
} from "@zenml-io/react-component-library/components/client";
68
import { Button } from "@zenml-io/react-component-library/components/server";
79
import { useComponentBulkDelete, useComponentSelectorContext } from "./selector-context";
8-
import { DeleteStackComponentAlertBody } from "@/components/stack-components/delete-component/delete-alert";
910

1011
export function ComponentButtonGroup() {
1112
const { bulkDelete } = useComponentBulkDelete();
@@ -15,8 +16,8 @@ export function ComponentButtonGroup() {
1516
await bulkDelete(selectedRowIDs);
1617
}
1718

18-
const plural = selectedRowCount > 1 ? "s" : "";
19-
const info = `${selectedRowCount} Component${plural} selected`;
19+
const plural = pluralize(selectedRowCount, "Component");
20+
const info = `${selectedRowCount} ${plural} selected`;
2021

2122
return (
2223
<div className="flex items-center divide-x divide-theme-border-moderate overflow-hidden rounded-md border border-theme-border-moderate">

‎src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { DeploymentStatusTag } from "@/components/deployments/deployment-status-
44
import { DisplayDate } from "@/components/DisplayDate";
55
import { InlineAvatar } from "@/components/InlineAvatar";
66
import { SnapshotLink } from "@/components/pipeline-snapshots/snapshot-link";
7+
import { getFirstUuidSegment } from "@/lib/strings";
78
import { routes } from "@/router/routes";
89
import { Deployment } from "@/types/deployments";
910
import { ColumnDef } from "@tanstack/react-table";
@@ -37,6 +38,15 @@ export function useDeploymentColumns(): ColumnDef<Deployment>[] {
3738

3839
<CopyButton copyText={name ?? ""} />
3940
</div>
41+
<Link
42+
to={routes.projects.deployments.detail.overview(id)}
43+
className="flex items-center gap-1"
44+
>
45+
<p className="text-text-xs text-theme-text-secondary">
46+
{getFirstUuidSegment(id)}
47+
</p>
48+
<CopyButton copyText={id} />
49+
</Link>
4050
</div>
4151
</div>
4252
);

‎src/app/pipelines/[pipelineId]/runs/columns.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,9 @@ export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
9393
{
9494
id: "Snapshot",
9595
header: "Snapshot",
96-
accessorFn: (row) => row.resources?.snapshot?.id,
96+
accessorFn: (row) => row.resources?.source_snapshot?.id,
9797
cell: ({ row }) => {
98-
const snapshot = row.original.resources?.snapshot;
98+
const snapshot = row.original.resources?.source_snapshot;
9999
const name = snapshot?.name;
100100
if (!snapshot || !name) return null;
101101

‎src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Checkbox, Tag } from "@zenml-io/react-component-library";
1212
import { useMemo } from "react";
1313
import { Link } from "react-router-dom";
1414
import { PipelineSnapshotTableActions } from "./table-actions";
15+
import { getFirstUuidSegment } from "@/lib/strings";
1516

1617
export function useSnapshotColumns(): ColumnDef<PipelineSnapshot>[] {
1718
return useMemo<ColumnDef<PipelineSnapshot>[]>(
@@ -70,6 +71,15 @@ export function useSnapshotColumns(): ColumnDef<PipelineSnapshot>[] {
7071

7172
<CopyButton copyText={name ?? ""} />
7273
</div>
74+
<Link
75+
to={routes.projects.snapshots.detail.overview(id)}
76+
className="flex items-center gap-1"
77+
>
78+
<p className="text-text-xs text-theme-text-secondary">
79+
{getFirstUuidSegment(id)}
80+
</p>
81+
<CopyButton copyText={id} />
82+
</Link>
7383
</div>
7484
</div>
7585
);
@@ -82,8 +92,13 @@ export function useSnapshotColumns(): ColumnDef<PipelineSnapshot>[] {
8292
cell: ({ row }) => {
8393
const deployment = row.original.resources?.deployment;
8494
const status = deployment?.body?.status;
85-
if (!status) return null;
86-
return <DeploymentStatusTag status={status} />;
95+
const id = deployment?.id;
96+
if (!status || !id) return null;
97+
return (
98+
<Link to={routes.projects.deployments.detail.overview(id)}>
99+
<DeploymentStatusTag status={status} />
100+
</Link>
101+
);
87102
}
88103
},
89104
{

‎src/app/pipelines/_components/ButtonGroup.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1+
import { pluralize } from "@/lib/strings";
12
import { DeletePipelineAlert } from "./DeletePipelineAlert";
23
import { usePipelineSelectorContext } from "./PipelineSelectorContext";
34

45
export function PipelinesButtonGroup() {
56
const { selectedRowCount } = usePipelineSelectorContext();
7+
const plural = pluralize(selectedRowCount, "Pipeline");
8+
69
return (
710
<div className="flex items-center divide-x divide-theme-border-moderate overflow-hidden rounded-md border border-theme-border-moderate">
8-
<div className="bg-primary-25 px-2 py-1 font-semibold text-theme-text-brand">{`${selectedRowCount} Pipeline${selectedRowCount > 1 ? "s" : ""} selected`}</div>
11+
<div className="bg-primary-25 px-2 py-1 font-semibold text-theme-text-brand">{`${selectedRowCount} ${plural} selected`}</div>
912
<DeletePipelineAlert />
1013
</div>
1114
);

‎src/app/pipelines/_components/DeletePipelineAlert.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import Alert from "@/assets/icons/alert-triangle.svg?react";
12
import Trash from "@/assets/icons/trash.svg?react";
23
import { DeleteAlertContent, DeleteAlertContentBody } from "@/components/DeleteAlertDialog";
4+
import { pluralize } from "@/lib/strings";
35
import { AlertDialog, AlertDialogTrigger, Button } from "@zenml-io/react-component-library";
46
import { useState } from "react";
57
import { usePipelineBulkDelete, usePipelineSelectorContext } from "./PipelineSelectorContext";
@@ -14,6 +16,9 @@ export function DeletePipelineAlert() {
1416
setIsOpen(false);
1517
}
1618

19+
const itemName = pluralize(selectedRowCount, "Pipeline");
20+
const title = `Delete ${itemName}`;
21+
1722
return (
1823
<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
1924
<AlertDialogTrigger asChild>
@@ -27,13 +32,19 @@ export function DeletePipelineAlert() {
2732
Delete
2833
</Button>
2934
</AlertDialogTrigger>
30-
<DeleteAlertContent
31-
title={`Delete Pipeline${selectedRowCount >= 2 ? "s" : ""}`}
32-
handleDelete={handleDelete}
33-
>
34-
<DeleteAlertContentBody>
35-
<p>Are you sure?</p>
36-
<p>This action cannot be undone.</p>
35+
<DeleteAlertContent title={title} handleDelete={handleDelete}>
36+
<DeleteAlertContentBody className="space-y-1">
37+
<div>
38+
<p>Are you sure?</p>
39+
<p>This action cannot be undone.</p>
40+
</div>
41+
42+
<div className="space-y-3 rounded-md border border-warning-300 bg-warning-50 px-2 py-1 text-warning-900">
43+
<div className="flex items-center gap-2 text-text-sm">
44+
<Alert width={24} height={24} className="shrink-0 fill-warning-700" />
45+
<p>This will also delete all runs and snapshots associated with the {itemName}.</p>
46+
</div>
47+
</div>
3748
</DeleteAlertContentBody>
3849
</DeleteAlertContent>
3950
</AlertDialog>

‎src/app/runs/ButtonGroup.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import { pluralize } from "@/lib/strings";
12
import { DeleteRunAlert } from "./DeleteRunAlert";
23
import { useRunsSelectorContext } from "./RunsSelectorContext";
34

45
export function RunsButtonGroup() {
56
const { selectedRowCount } = useRunsSelectorContext();
67
return (
78
<div className="flex items-center divide-x divide-theme-border-moderate overflow-hidden rounded-md border border-theme-border-moderate">
8-
<div className="bg-primary-25 px-2 py-1 font-semibold text-theme-text-brand">{`${selectedRowCount} Run${selectedRowCount > 1 ? "s" : ""} selected`}</div>
9+
<div className="bg-primary-25 px-2 py-1 font-semibold text-theme-text-brand">{`${selectedRowCount} ${pluralize(selectedRowCount, "Run")} selected`}</div>
910
<DeleteRunAlert />
1011
</div>
1112
);

‎src/app/runs/DeleteRunAlert.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Trash from "@/assets/icons/trash.svg?react";
22
import { DeleteAlertContent, DeleteAlertContentBody } from "@/components/DeleteAlertDialog";
3+
import { pluralize } from "@/lib/strings";
34
import { AlertDialog, AlertDialogTrigger, Button } from "@zenml-io/react-component-library";
45
import { useState } from "react";
56
import { useRunBulkDelete, useRunsSelectorContext } from "./RunsSelectorContext";
@@ -28,7 +29,7 @@ export function DeleteRunAlert() {
2829
</Button>
2930
</AlertDialogTrigger>
3031
<DeleteAlertContent
31-
title={`Delete Run${selectedRowCount >= 2 ? "s" : ""}`}
32+
title={`Delete ${pluralize(selectedRowCount, "Run")}`}
3233
handleDelete={handleDelete}
3334
>
3435
<DeleteAlertContentBody>

‎src/app/settings/connectors/button-group.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import Trash from "@/assets/icons/trash.svg?react";
2+
import { DeleteConnectorAlertBody } from "@/components/service-connectors/delete-connector";
3+
import { pluralize } from "@/lib/strings";
24
import {
35
AlertDialog,
46
AlertDialogTrigger
57
} from "@zenml-io/react-component-library/components/client";
68
import { Button } from "@zenml-io/react-component-library/components/server";
79
import { useConnectorBulkDelete, useConnectorSelectorContext } from "./selector-context";
8-
import { DeleteConnectorAlertBody } from "@/components/service-connectors/delete-connector";
910
export function ConnectorButtonGroup() {
1011
const { selectedRowCount, selectedRowIDs } = useConnectorSelectorContext();
1112
const { bulkDelete } = useConnectorBulkDelete();
@@ -14,8 +15,8 @@ export function ConnectorButtonGroup() {
1415
await bulkDelete(selectedRowIDs);
1516
}
1617

17-
const plural = selectedRowCount > 1 ? "s" : "";
18-
const info = `${selectedRowCount} Service connector${plural} selected`;
18+
const plural = pluralize(selectedRowCount, "Service connector");
19+
const info = `${selectedRowCount} ${plural} selected`;
1920

2021
return (
2122
<div className="flex h-7 items-center divide-x divide-theme-border-moderate overflow-hidden rounded-md border border-theme-border-moderate">

‎src/app/settings/service-accounts/ButtonGroup.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { pluralize } from "@/lib/strings";
12
import { DeleteServiceAccountAlert } from "./DeleteAlert";
23
import { useServiceAccountSelectorContext } from "./SelectorContext";
34

@@ -7,7 +8,7 @@ export function ServiceAccountsButtonGroup() {
78
<div className="flex items-center divide-x divide-theme-border-moderate overflow-hidden rounded-md border border-theme-border-moderate">
89
<div className="bg-primary-25 px-2 py-1 font-semibold text-theme-text-brand">{`${
910
selectedRowCount
10-
} Service Account${selectedRowCount > 1 ? "s" : ""} selected`}</div>
11+
} ${pluralize(selectedRowCount, "Service Account")} selected`}</div>
1112
<DeleteServiceAccountAlert />
1213
</div>
1314
);

0 commit comments

Comments
 (0)