mirror of
https://github.com/vxcontrol/pentagi.git
synced 2026-08-23 11:36:29 +00:00
refactor(frontend): use shared formatDate for table cells, drop dup tooltips
The Flows, Providers, and API tokens pages each defined a local
`formatDateTime`/`formatFullDateTime` pair (~16 lines × 3 files) doing
essentially the same trimming-by-recency job as `formatDate` from
`@/lib/utils/format`, and each wrapped the cell in a Tooltip that
repeated the same text more verbosely.
After the previous date-format unification commit (1806956), the
trimmed cell already conveys enough context for every recency band:
- today → HH:mm:ss
- this year → HH:mm, d MMM
- older → HH:mm, d MMM yyyy
So the Tooltip+full-timestamp pair no longer adds information for the
date columns. Replace the three local copies with a direct
`formatDate(new Date(dateString))` call and drop the Tooltip wrapper
where it only mirrors the cell.
The Tooltip on the Terminals column in flows.tsx is kept — it expands
the list of terminals with per-row connection status and is not a
duplicate.
Net delta: -115 / +10 lines.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sergey Kozyrenko
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
6af1ee4dc1
commit
84fcdc2b28
@@ -1,7 +1,5 @@
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
import { format, isToday } from 'date-fns';
|
||||
import { enUS } from 'date-fns/locale';
|
||||
import { Ellipsis, Eye, GitFork, Loader2, Pause, Pencil, PencilLine, Plus, Star, Trash } from 'lucide-react';
|
||||
import { CheckCircle2, XCircle } from 'lucide-react';
|
||||
import { useCallback, useMemo, useRef, useState } from 'react';
|
||||
@@ -33,6 +31,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip
|
||||
import { ResultType, StatusType, type TerminalFragmentFragment, useRenameFlowMutation } from '@/graphql/types';
|
||||
import { useTableState } from '@/hooks/use-table-state';
|
||||
import { mergeHrefWithSearchParams } from '@/lib/url-params';
|
||||
import { formatDate } from '@/lib/utils/format';
|
||||
import { useFavorites } from '@/providers/favorites-provider';
|
||||
import { type Flow, useFlows } from '@/providers/flows-provider';
|
||||
|
||||
@@ -62,22 +61,6 @@ const statusConfig: Record<
|
||||
},
|
||||
};
|
||||
|
||||
const formatDateTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
|
||||
if (isToday(date)) {
|
||||
return format(date, 'HH:mm:ss', { locale: enUS });
|
||||
}
|
||||
|
||||
return format(date, 'd MMM yyyy', { locale: enUS });
|
||||
};
|
||||
|
||||
const formatFullDateTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
|
||||
return format(date, 'd MMM yyyy, HH:mm:ss', { locale: enUS });
|
||||
};
|
||||
|
||||
function Flows() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
@@ -367,16 +350,7 @@ function Flows() {
|
||||
cell: ({ row }) => {
|
||||
const dateString = row.getValue('createdAt') as string;
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="cursor-default text-sm">{formatDateTime(dateString)}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="text-xs">{formatFullDateTime(dateString)}</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
return <div className="text-sm">{formatDate(new Date(dateString))}</div>;
|
||||
},
|
||||
header: ({ column }) => (
|
||||
<DataTableColumnHeader
|
||||
@@ -400,16 +374,7 @@ function Flows() {
|
||||
cell: ({ row }) => {
|
||||
const dateString = row.getValue('updatedAt') as string;
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="cursor-default text-sm">{formatDateTime(dateString)}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="text-xs">{formatFullDateTime(dateString)}</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
return <div className="text-sm">{formatDate(new Date(dateString))}</div>;
|
||||
},
|
||||
header: ({ column }) => (
|
||||
<DataTableColumnHeader
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { format, isToday } from 'date-fns';
|
||||
import { format } from 'date-fns';
|
||||
import { enUS } from 'date-fns/locale';
|
||||
import {
|
||||
AlertCircle,
|
||||
@@ -43,7 +43,6 @@ import { Input } from '@/components/ui/input';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { StatusCard } from '@/components/ui/status-card';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import {
|
||||
TokenStatus as TokenStatusEnum,
|
||||
useApiTokenCreatedSubscription,
|
||||
@@ -56,6 +55,7 @@ import {
|
||||
} from '@/graphql/types';
|
||||
import { useTableState } from '@/hooks/use-table-state';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { formatDate } from '@/lib/utils/format';
|
||||
import { baseUrl } from '@/models/api';
|
||||
|
||||
type APIToken = ApiTokenFragmentFragment;
|
||||
@@ -121,22 +121,6 @@ const getStatusDisplay = (
|
||||
return { label: token.status, variant: 'secondary' };
|
||||
};
|
||||
|
||||
const formatDateTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
|
||||
if (isToday(date)) {
|
||||
return format(date, 'HH:mm:ss', { locale: enUS });
|
||||
}
|
||||
|
||||
return format(date, 'd MMM yyyy', { locale: enUS });
|
||||
};
|
||||
|
||||
const formatFullDateTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
|
||||
return format(date, 'd MMM yyyy, HH:mm:ss', { locale: enUS });
|
||||
};
|
||||
|
||||
const calculateTTL = (expiresAt: Date): number => {
|
||||
const now = new Date();
|
||||
const diffMs = expiresAt.getTime() - now.getTime();
|
||||
@@ -673,16 +657,7 @@ function SettingsAPITokens() {
|
||||
const expiresAt = getTokenExpirationDate(token);
|
||||
const expiresAtString = expiresAt.toISOString();
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="cursor-default text-sm">{formatDateTime(expiresAtString)}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="text-xs">{formatFullDateTime(expiresAtString)}</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
return <div className="text-sm">{formatDate(new Date(expiresAtString))}</div>;
|
||||
},
|
||||
header: ({ column }) => (
|
||||
<DataTableColumnHeader
|
||||
@@ -710,16 +685,7 @@ function SettingsAPITokens() {
|
||||
|
||||
const dateString = row.getValue('createdAt') as string;
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="cursor-default text-sm">{formatDateTime(dateString)}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="text-xs">{formatFullDateTime(dateString)}</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
return <div className="text-sm">{formatDate(new Date(dateString))}</div>;
|
||||
},
|
||||
header: ({ column }) => (
|
||||
<DataTableColumnHeader
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
import { format, isToday } from 'date-fns';
|
||||
import { enUS } from 'date-fns/locale';
|
||||
import { AlertCircle, ChevronDown, Copy, Ellipsis, Loader2, Pencil, Plus, Settings, Trash } from 'lucide-react';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
@@ -32,9 +30,9 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { StatusCard } from '@/components/ui/status-card';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { ProviderType, useDeleteProviderMutation, useSettingsProvidersQuery } from '@/graphql/types';
|
||||
import { useTableState } from '@/hooks/use-table-state';
|
||||
import { formatDate } from '@/lib/utils/format';
|
||||
type Provider = ProviderConfigFragmentFragment;
|
||||
|
||||
const providerIcons: Record<ProviderType, React.ComponentType<any>> = {
|
||||
@@ -63,22 +61,6 @@ const providerTypes = [
|
||||
{ label: 'Qwen', type: ProviderType.Qwen },
|
||||
];
|
||||
|
||||
const formatDateTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
|
||||
if (isToday(date)) {
|
||||
return format(date, 'HH:mm:ss', { locale: enUS });
|
||||
}
|
||||
|
||||
return format(date, 'd MMM yyyy', { locale: enUS });
|
||||
};
|
||||
|
||||
const formatFullDateTime = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
|
||||
return format(date, 'd MMM yyyy, HH:mm:ss', { locale: enUS });
|
||||
};
|
||||
|
||||
function SettingsProviders() {
|
||||
const { data, error, loading: isLoading } = useSettingsProvidersQuery();
|
||||
const [deleteProvider, { error: deleteError, loading: isDeleteLoading }] = useDeleteProviderMutation();
|
||||
@@ -179,16 +161,7 @@ function SettingsProviders() {
|
||||
cell: ({ row }) => {
|
||||
const dateString = row.getValue('createdAt') as string;
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="cursor-default text-sm">{formatDateTime(dateString)}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="text-xs">{formatFullDateTime(dateString)}</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
return <div className="text-sm">{formatDate(new Date(dateString))}</div>;
|
||||
},
|
||||
header: ({ column }) => (
|
||||
<DataTableColumnHeader
|
||||
@@ -210,16 +183,7 @@ function SettingsProviders() {
|
||||
cell: ({ row }) => {
|
||||
const dateString = row.getValue('updatedAt') as string;
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="cursor-default text-sm">{formatDateTime(dateString)}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<div className="text-xs">{formatFullDateTime(dateString)}</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
return <div className="text-sm">{formatDate(new Date(dateString))}</div>;
|
||||
},
|
||||
header: ({ column }) => (
|
||||
<DataTableColumnHeader
|
||||
|
||||
Reference in New Issue
Block a user