Skip to content
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

Jump to bottom

NEOS-1631: reduce constraint text #2970

Merged
merged 2 commits into from
Nov 21, 2024
Merged

NEOS-1631: reduce constraint text #2970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
68ce0c9
further constrains cell text to
nickzelei Nov 21, 2024
66720c4
truncates schema/table columns
nickzelei Nov 21, 2024
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
6 changes: 6 additions & 0 deletions frontend/apps/web/components/jobs/JobMappingTable/Columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,19 @@ function getJobMappingColumns(): ColumnDef<JobMappingRow, string>[] {
header({ column }) {
return <SchemaColumnHeader column={column} title="Schema" />;
},
cell({ getValue }) {
return <TruncatedText text={getValue()} />;
},
});

const tableColumn = columnHelper.accessor((row) => row.table, {
id: 'table',
header({ column }) {
return <SchemaColumnHeader column={column} title="Table" />;
},
cell({ getValue }) {
return <TruncatedText text={getValue()} />;
},
});

const columnColumn = columnHelper.accessor('column', {
Expand Down
95 changes: 53 additions & 42 deletions frontend/apps/web/components/jobs/JobMappingTable/ConstraintsCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { cn } from '@/libs/utils';
import { ReactElement } from 'react';

interface Props {
Expand All @@ -23,63 +24,73 @@ export default function ConstraintsCell(props: Props): ReactElement {
<div className="flex flex-col lg:flex-row items-start gap-1">
{isPrimaryKey && (
<div>
<Badge
variant="outline"
className="text-xs bg-blue-100 text-gray-800 cursor-default dark:bg-blue-200 dark:text-gray-900"
>
Primary Key
</Badge>
<HoverBadge
badgeText="P"
tooltipContent="Primary Key"
badgeClassName="bg-blue-100 dark:bg-blue-200"
/>
</div>
)}
{isForeignKey && (
<div>
<TooltipProvider>
<Tooltip delayDuration={200}>
<TooltipTrigger>
<Badge
variant="outline"
className="text-xs bg-orange-100 text-gray-800 cursor-default dark:dark:text-gray-900 dark:bg-orange-300"
>
Foreign Key
</Badge>
</TooltipTrigger>
<TooltipContent>
{fkCols.map((col) => `Primary Key: ${col}`).join('\n')}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<HoverBadge
badgeText="FK"
tooltipContent={`FK: ${fkCols
.map((col) => `Primary Key: ${col}`)
.join('\n')}`}
badgeClassName="bg-orange-100 dark:bg-orange-300"
/>
</div>
)}
{isVirtualForeignKey && (
<div>
<TooltipProvider>
<Tooltip delayDuration={200}>
<TooltipTrigger>
<Badge
variant="outline"
className="text-xs bg-orange-100 text-gray-800 cursor-default dark:dark:text-gray-900 dark:bg-orange-300"
>
Virtual Foreign Key
</Badge>
</TooltipTrigger>
<TooltipContent>
{vfkCols.map((col) => `Primary Key: ${col}`).join('\n')}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<HoverBadge
badgeText="VFK"
tooltipContent={`VFK: ${vfkCols
.map((col) => `Primary Key: ${col}`)
.join('\n')}`}
badgeClassName="bg-orange-100 dark:bg-orange-300"
/>
</div>
)}
{isUnique && (
<div>
<Badge
variant="outline"
className="text-xs bg-purple-100 text-gray-800 cursor-default dark:bg-purple-300 dark:text-gray-900"
>
Unique
</Badge>
<HoverBadge
badgeText="U"
tooltipContent="Unique Key"
badgeClassName="bg-red-100 dark:bg-red-300"
/>
</div>
)}
</div>
</span>
);
}

interface HoverBadgeProps {
badgeText: string;
tooltipContent: string;
badgeClassName?: string;
}

function HoverBadge(props: HoverBadgeProps): ReactElement {
const { badgeText, tooltipContent, badgeClassName } = props;
return (
<TooltipProvider>
<Tooltip delayDuration={200}>
<TooltipTrigger>
<Badge
variant="outline"
className={cn(
'text-xs cursor-default text-gray-800 dark:text-gray-900',
badgeClassName
)}
>
{badgeText}
</Badge>
</TooltipTrigger>
<TooltipContent>{tooltipContent}</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}