Skip to content

Truncate long names #862

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

Open
wants to merge 1 commit into
base: staging
Choose a base branch
from
Open

Truncate long names #862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 7 additions & 5 deletions src/app/pipelines/[pipelineId]/deployments/colunns/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,22 @@ export function useDeploymentColumns(): ColumnDef<Deployment>[] {
id: "name",
header: "Deployment",
accessorFn: (row) => row.name,

meta: {
className: "max-w-[30ch]"
},
cell: ({ row }) => {
const name = row.original.name;
const id = row.original.id;
return (
<div className="group/copybutton flex items-center gap-2">
<Rocket className={`h-5 w-5 fill-primary-400`} />
<div>
<div className="flex items-center gap-1">
<div className="flex w-full flex-col">
<div className="flex flex-1 items-center gap-1">
<Link
to={routes.projects.deployments.detail.overview(id)}
className="flex items-center gap-1"
className="flex min-w-0 flex-1 items-center gap-1"
>
<span className="text-text-md font-semibold text-theme-text-primary">
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{name ?? "Unnamed"}
</span>
</Link>
Expand Down
11 changes: 7 additions & 4 deletions src/app/pipelines/[pipelineId]/snapshots/columns/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,22 @@ export function useSnapshotColumns(): ColumnDef<PipelineSnapshot>[] {
id: "name",
header: "Snapshot",
accessorFn: (row) => row.name,
meta: {
className: "max-w-[30ch]"
},
cell: ({ row }) => {
const name = row.original.name;
const id = row.original.id;
return (
<div className="group/copybutton flex items-center gap-2">
<SnapshotIcon className={`h-5 w-5 fill-primary-400`} />
<div>
<div className="flex items-center gap-1">
<div className="flex w-full flex-col">
<div className="flex flex-1 items-center gap-1">
<Link
to={routes.projects.snapshots.detail.overview(id)}
className="flex items-center gap-1"
className="flex min-w-0 flex-1 items-center gap-1"
>
<span className="text-text-md font-semibold text-theme-text-primary">
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{name ?? "Unnamed"}
</span>
</Link>
Expand Down
11 changes: 7 additions & 4 deletions src/app/pipelines/_components/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,22 @@ export function getPipelineColumns(): ColumnDef<Pipeline>[] {
{
id: "name",
header: "Pipeline",
meta: {
className: "max-w-[30ch]"
},
cell: ({ row }) => {
return (
<div className="group/copybutton flex items-center gap-2">
<PipelineIcon
className={`h-5 w-5 ${getExecutionStatusColor(row.original.resources?.latest_run_status)}`}
/>
<div>
<div className="flex items-center gap-1">
<div className="flex w-full flex-col">
Copy link
Contributor

@Cahllagerfeld Cahllagerfeld Oct 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Question for @znegrin: with this change, all the icons are pushed ot the very right, which on one hand aligns them, but on the other makes them a bit floating around. Wdyt?

Bildschirmfoto 2025-10-09 um 14 51 34

Copy link
Contributor

Choose a reason for hiding this comment

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

@Cahllagerfeld, I would keep them aligned with the pipeline name, as showing them there would miss the context and consistency.

<div className="flex flex-1 items-center gap-1">
<Link
to={routes.projects.pipelines.detail.runs(row.original.id)}
className="flex items-center gap-1"
className="flex min-w-0 flex-1 items-center gap-1"
>
<span className="text-text-md font-semibold text-theme-text-primary">
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{row.original.name}
</span>
</Link>
Expand Down
16 changes: 12 additions & 4 deletions src/app/runs/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
name: row.name,
status: row.body?.status
}),
meta: {
className: "max-w-[30ch]"
},
cell: ({ getValue }) => {
const { name, status, id } = getValue<{
id: string;
Expand All @@ -63,10 +66,15 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
return (
<div className="group/copybutton flex items-center gap-2">
<RunIcon className={`h-5 w-5 ${getExecutionStatusColor(status)}`} />
<div>
<div className="flex items-center gap-1">
<Link to={routes.projects.runs.detail(id)} className="flex items-center gap-1">
<span className="text-text-md font-semibold text-theme-text-primary">{name}</span>
<div className="flex w-full flex-col">
<div className="flex flex-1 items-center gap-1">
<Link
to={routes.projects.runs.detail(id)}
className="flex min-w-0 flex-1 items-center gap-1"
>
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{name}
</span>
</Link>
<TooltipProvider>
<Tooltip>
Expand Down
13 changes: 8 additions & 5 deletions src/app/settings/secrets/[id]/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const ValueCell: React.FC<{ value: unknown }> = ({ value }) => {
const dots = "•".repeat(valueStr.length);

return (
<div className="flex items-center gap-2 space-x-2">
<div className="flex items-center gap-2 space-x-2">
<EyeIcon onClick={() => setIsVisible(!isVisible)} className="h-4 w-4 flex-shrink-0" />
<span>{isVisible ? valueStr : dots}</span>
</div>
Expand All @@ -27,6 +27,9 @@ export function getSecretDetailColumn(
id: "key",
header: "Key",
accessorKey: "key",
meta: {
className: "max-w-[30ch]"
},
cell: ({ row }) => {
const code = `from zenml.client import Client
secret = Client().get_secret("${name}")
Expand All @@ -37,10 +40,10 @@ secret.secret_values["${row.original.key}"]
return (
<div className="flex items-center space-x-2">
<KeyIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
<div className="flex flex-col">
<div className="flex items-center space-x-1">
<div className="flex items-center space-x-1">
<span className="text-text-md font-semibold text-theme-text-primary">
<div className="flex w-full flex-col">
<div className="flex flex-1 items-center space-x-1">
<div className="flex min-w-0 flex-1 items-center space-x-1">
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{row.original.key}
</span>
<SecretTooltip code={code} />
Expand Down
11 changes: 7 additions & 4 deletions src/app/settings/secrets/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,20 @@ export const secretsColumns: ColumnDef<SecretNamespace>[] = [
id: "secret",
header: "Secret",
accessorFn: (row) => row.name,
meta: {
className: "max-w-[30ch]"
},
cell: ({ getValue, row }) => {
const code = getSecretSnippet(row.original.name);

return (
<div className="flex items-center space-x-2">
<LockIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
<div className="group/copybutton flex flex-col">
<div className="flex flex-row items-center space-x-1">
<div className="flex items-center space-x-1">
<div className="group/copybutton flex w-full flex-col">
<div className="flex flex-1 flex-row items-center space-x-1">
<div className="flex min-w-0 flex-1 items-center space-x-1">
<Link
className="text-text-md font-semibold text-theme-text-primary"
className="truncate text-text-md font-semibold text-theme-text-primary"
to={routes.settings.secrets.detail(row.original.id)}
>
{row.original.name}
Expand Down
9 changes: 6 additions & 3 deletions src/app/settings/service-accounts/[service-account-id]/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,16 @@ export function getServiceAccountDetailColumn(): ColumnDef<ApiKey>[] {
accessorFn: (row) => ({
name: row.name
}),
meta: {
className: "max-w-[30ch]"
},
cell: ({ row }) => {
return (
<div className="flex items-center space-x-2">
<KeyIcon className="h-5 w-5 flex-shrink-0 fill-primary-400" />
<div className="group/copybutton flex flex-col">
<div className="flex flex-row items-center space-x-1">
<div className="flex items-center space-x-1 text-text-md font-semibold text-theme-text-primary">
<div className="group/copybutton flex w-full flex-col">
<div className="flex min-w-0 flex-1 flex-row items-center space-x-1">
<div className="flex items-center space-x-1 truncate text-text-md font-semibold text-theme-text-primary">
{row.original.name}
</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions src/app/settings/service-accounts/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ export function getServiceAccountColumns(): ColumnDef<ServiceAccount>[] {
id: "service-account",
header: "Service Account",
accessorFn: (row) => row.name,
meta: {
className: "max-w-[30ch]"
},
cell: ({ row }) => {
return (
<div className="flex items-center space-x-2">
Expand All @@ -48,11 +51,11 @@ export function getServiceAccountColumns(): ColumnDef<ServiceAccount>[] {
serviceAccountName={row.original.name}
serviceAccountAvatar={row.original.body?.avatar_url ?? undefined}
/>
<div className="group/copybutton flex flex-col">
<div className="flex flex-row items-center space-x-1">
<div className="flex items-center space-x-1">
<div className="group/copybutton flex w-full flex-col">
<div className="flex flex-1 flex-row items-center space-x-1">
<div className="flex min-w-0 flex-1 items-center space-x-1">
<Link
className="text-text-md font-semibold text-theme-text-primary"
className="truncate text-text-md font-semibold text-theme-text-primary"
to={routes.settings.service_accounts.detail(row.original.id)}
>
{row.original.name}
Expand Down
16 changes: 12 additions & 4 deletions src/components/stack-components/component-sheet/runs-tab/columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
name: row.name,
status: row.body?.status
}),
meta: {
className: "max-w-[30ch]"
},
cell: ({ getValue }) => {
const { name, status, id } = getValue<{
id: string;
Expand All @@ -31,10 +34,15 @@ export const runsColumns: ColumnDef<PipelineRun>[] = [
return (
<div className="group/copybutton flex items-center gap-2">
<RunIcon className={`h-5 w-5 ${getExecutionStatusColor(status)}`} />
<div>
<div className="flex items-center gap-1">
<Link to={routes.projects.runs.detail(id)} className="flex items-center gap-1">
<span className="text-text-md font-semibold text-theme-text-primary">{name}</span>
<div className="flex w-full flex-col">
<div className="flex flex-1 items-center gap-1">
<Link
to={routes.projects.runs.detail(id)}
className="flex min-w-0 flex-1 items-center gap-1"
>
<span className="truncate text-text-md font-semibold text-theme-text-primary">
{name}
</span>
</Link>
<TooltipProvider>
<Tooltip>
Expand Down