Skip to content

phsl / new-api

Go to a project
Commit 9ba251ce by QuentinHsu Committed by GitHub
Options

perf(web): streamline table actions and destructive dialogs (#5645) 

* perf(data-table): autosize action columns

- exclude actions columns from shared table width calculations so action cells size to their content.
- remove fixed size and w-* width overrides from feature action columns to preserve content-based layout.

* perf(data-table): streamline row action controls

- expose common edit and status actions directly while moving secondary actions into overflow menus.
- add shared row action menu helpers so static and table rows use consistent action controls.
- let action columns size to their content instead of relying on fixed widths.

* fix(web): localize destructive dialog copy

- route delete, reset, and batch update confirmation text through i18n.
- add locale entries for affected channel, model, system settings, and user dialogs.

* perf(web): unify destructive dialog actions

- align delete and cleanup confirmation buttons with the shared destructive variant.
- replace custom destructive color overrides with semantic button variants.
- clean up lint errors in touched dialog files before committing.

* fix(web): add user action success translations

- add localized success messages for user delete, status, and role changes.
- keep user management toast copy available across all frontend locales.

* fix(data-table): prevent mobile badge clipping

- expose badge cell slots so mobile card styles can target nested badge wrappers.
- reset badge margins in card rows to keep provider icons fully visible on small screens.
parent b191f473
Showing with 773 additions and 707 deletions
web/default/.oxlintrc.json
......@@ -31,7 +31,7 @@
],
"import/first": "warn",
"import/newline-after-import": "warn",
"import/no-cycle": "warn",
"import/no-cycle": "error",
"import/no-duplicates": [
"error",
{
......
web/default/AGENTS.md
......@@ -76,6 +76,7 @@
- **可读性**：控制函数圈复杂度，复杂逻辑拆成小函数；变量与函数命名需有意义，遵循驼峰等常规约定。
- **TypeScript**：避免 `any`，优先具体类型或 `unknown`；为参数与返回值显式标注类型；仅类型用途的导入使用 `import type { X } from '...'`。
- **类型检查**：每次改动 TypeScript 或 TSX 代码后都要执行类型检查（如 `bun run typecheck`）；若出现类型错误，须修复至无错误为止，不得遗留。
- **Lint 检查**：每次完成代码改动前，必须对所涉及文件执行 lint 检查，并修复这些文件中的所有 lint error；不得遗留 error。warning 可按变更范围与风险评估处理。
- **解构**：对象非必要不要进行解构，特别是组件的 props；直接使用 `props.xxx` 更清晰，避免不必要的解构增加代码复杂度。
### 3.3 组件
......@@ -176,3 +177,4 @@
- **2026-01-28**：补充状态管理、API、表单、路由、错误处理、样式、文件组织、可访问性、安全、测试、依赖与构建部署规范。
- **2026-01-29**：重组文档结构，合并重复内容，明确主次与交叉引用。
- **2026-01-31**：在 3.2 中补充「类型检查」要求：改动 TS/TSX 后须执行 typecheck 并修复至无错。
- **2026-06-21**：在 3.2 中补充「Lint 检查」要求：完成代码改动前须修复所涉及文件的所有 lint error。
web/default/src/components/data-table/core/badge-cell.tsx
......@@ -24,6 +24,7 @@ type BadgeCellProps = React.HTMLAttributes<HTMLDivElement>
export function BadgeCell({ className, ...props }: BadgeCellProps) {
return (
<div
data-slot='badge-cell'
className={cn(
'-ml-1.5 flex max-w-full min-w-0 items-center gap-1 overflow-hidden [&_[data-slot=status-badge]]:max-w-full [&_[data-slot=status-badge]]:min-w-0',
className
......
web/default/src/components/data-table/core/content-sized-columns.ts 0 → 100644
/*
Copyright (C) 2023-2026 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
export function isContentSizedColumn(columnId: string): boolean {
return columnId === 'actions'
}
web/default/src/components/data-table/core/data-table-colgroup.tsx
......@@ -18,27 +18,36 @@ For commercial licensing, please contact support@quantumnous.com
*/
import type { Table as TanstackTable } from '@tanstack/react-table'
import { isContentSizedColumn } from './content-sized-columns'
export function DataTableColgroup<TData>({
table,
}: {
table: TanstackTable<TData>
}) {
const columns = table.getVisibleLeafColumns()
const totalSize = columns.reduce((sum, col) => sum + col.getSize(), 0)
const sizedColumns = columns.filter(
(column) => !isContentSizedColumn(column.id)
)
const totalSize = sizedColumns.reduce((sum, col) => sum + col.getSize(), 0)
return (
<colgroup>
{columns.map((column) => (
<col
key={column.id}
style={{
width:
totalSize > 0
? `${(column.getSize() / totalSize) * 100}%`
: undefined,
}}
/>
))}
{columns.map((column) => {
const width = isContentSizedColumn(column.id)
? undefined
: getColumnWidth(column.getSize(), totalSize)
return <col key={column.id} style={{ width }} />
})}
</colgroup>
)
}
function getColumnWidth(columnSize: number, totalSize: number) {
if (totalSize <= 0) {
return undefined
}
return `${(columnSize / totalSize) * 100}%`
}
web/default/src/components/data-table/core/data-table-header.tsx
......@@ -23,6 +23,7 @@ import {
} from '@tanstack/react-table'
import { TableHead, TableHeader, TableRow } from '@/components/ui/table'
import { DataTableColumnHeader } from './column-header'
import { isContentSizedColumn } from './content-sized-columns'
import type { DataTableColumnClassName } from './types'
type DataTableHeaderProps<TData> = {
......@@ -49,7 +50,7 @@ export function DataTableHeader<TData>({
key={header.id}
colSpan={header.colSpan}
className={getColumnClassName?.(header.column.id, 'header')}
style={applyHeaderSize ? { width: header.getSize() } : undefined}
style={getHeaderSizeStyle(header, applyHeaderSize)}
>
{renderHeaderContent(header)}
</TableHead>
......@@ -60,6 +61,17 @@ export function DataTableHeader<TData>({
)
}
function getHeaderSizeStyle<TData>(
header: Header<TData, unknown>,
applyHeaderSize: boolean | undefined
) {
if (!applyHeaderSize || isContentSizedColumn(header.column.id)) {
return undefined
}
return { width: header.getSize() }
}
function renderHeaderContent<TData>(header: Header<TData, unknown>) {
if (header.isPlaceholder) return null
const { header: headerDef, meta } = header.column.columnDef
......
web/default/src/components/data-table/core/data-table-view.tsx
import type { Row, Table as TanstackTable } from '@tanstack/react-table'
/*
Copyright (C) 2023-2026 QuantumNous
......@@ -18,6 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import * as React from 'react'
import type { Row, Table as TanstackTable } from '@tanstack/react-table'
import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
import { cn } from '@/lib/utils'
......@@ -45,6 +45,7 @@ export type {
DataTableViewProps,
} from './types'
export { DataTableRow } from './data-table-row'
export { DataTableRowActionMenu } from './row-action-menu'
export function DataTableView<TData>(props: DataTableViewProps<TData>) {
const rows = props.rows ?? props.table.getRowModel().rows
......
web/default/src/components/data-table/core/row-action-menu.tsx 0 → 100644
/*
Copyright (C) 2023-2026 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import * as React from 'react'
import { MoreHorizontal } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'
type DataTableRowActionMenuProps = {
children: React.ReactNode
ariaLabel: string
contentClassName?: string
modal?: boolean
onOpenChange?: (open: boolean) => void
}
export function DataTableRowActionMenu(props: DataTableRowActionMenuProps) {
return (
<DropdownMenu modal={props.modal} onOpenChange={props.onOpenChange}>
<DropdownMenuTrigger
render={
<Button
variant='ghost'
size='icon'
className='data-popup-open:bg-muted'
aria-label={props.ariaLabel}
/>
}
>
<MoreHorizontal aria-hidden='true' />
</DropdownMenuTrigger>
<DropdownMenuContent
align='end'
className={cn('w-48', props.contentClassName)}
>
{props.children}
</DropdownMenuContent>
</DropdownMenu>
)
}
web/default/src/components/data-table/core/table-sizing.ts
......@@ -19,11 +19,14 @@ For commercial licensing, please contact support@quantumnous.com
import type * as React from 'react'
import type { Table as TanstackTable } from '@tanstack/react-table'
import { isContentSizedColumn } from './content-sized-columns'
export function getTableSizeStyle<TData>(
table: TanstackTable<TData>
): React.CSSProperties {
const width = table
.getVisibleLeafColumns()
.filter((column) => !isContentSizedColumn(column.id))
.reduce((total, column) => total + column.getSize(), 0)
return {
......
web/default/src/components/data-table/index.ts
......@@ -28,9 +28,11 @@ export {
StaticDataTable,
type StaticDataTableColumn,
} from './static/static-data-table'
export { StaticRowActions } from './static/static-row-actions'
export { staticDataTableClassNames } from './static/static-data-table-classnames'
export {
DataTableRow,
DataTableRowActionMenu,
DataTableView,
type DataTableColumnClassName,
type DataTablePinnedColumn,
......
web/default/src/components/data-table/layout/card-row-content.tsx
......@@ -96,7 +96,7 @@ function CompactContent<TData>({ row }: { row: Row<TData> }) {
{label}
</div>
)}
<div className='min-w-0 overflow-hidden text-xs [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'>
<div className='min-w-0 overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
<StatusBadgeTypeContext.Provider value='text'>
{renderCellContent(cell) ?? '-'}
</StatusBadgeTypeContext.Provider>
......@@ -146,7 +146,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
return (
<div
key={cell.id}
className='flex justify-end overflow-hidden [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'
className='flex justify-end overflow-hidden [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'
>
<StatusBadgeTypeContext.Provider value='text'>
{renderCellContent(cell)}
......@@ -163,7 +163,7 @@ function FallbackContent<TData>({ row }: { row: Row<TData> }) {
<span className='text-muted-foreground shrink-0 text-[10px] font-medium select-none'>
{label}
</span>
<div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs [&_[data-slot=provider-badge]]:ml-0 [&_[data-slot=status-badge]]:ml-0'>
<div className='flex min-w-0 flex-1 items-center justify-end overflow-hidden text-xs [&_:is([data-slot=badge-cell],[data-slot=provider-badge],[data-slot=status-badge])]:ml-0'>
<StatusBadgeTypeContext.Provider value='text'>
{renderCellContent(cell) ?? '-'}
</StatusBadgeTypeContext.Provider>
......
web/default/src/components/data-table/layout/data-table-page.tsx
......@@ -23,7 +23,7 @@ For commercial licensing, please contact support@quantumnous.com
*/
import * as React from 'react'
import { PageFooterPortal } from '@/components/layout'
import { PageFooterPortal } from '@/components/layout/components/page-footer'
import { useMediaQuery } from '@/hooks'
import { cn } from '@/lib/utils'
......
web/default/src/components/data-table/static/static-data-table-classnames.ts
......@@ -42,6 +42,6 @@ export const staticDataTableClassNames = {
mutedCodeCell: 'text-muted-foreground font-mono text-sm',
topNumericCell: 'py-2 text-right font-mono',
mediumCell: 'font-medium',
actionHeaderCell: 'text-right',
actionCell: 'text-right',
actionHeaderCell: 'w-auto max-w-none text-right',
actionCell: 'w-auto max-w-none text-right',
} as const
web/default/src/components/data-table/static/static-row-actions.tsx 0 → 100644
/*
Copyright (C) 2023-2026 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { Pencil, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
DropdownMenuItem,
DropdownMenuShortcut,
} from '@/components/ui/dropdown-menu'
import { DataTableRowActionMenu } from '../core/row-action-menu'
type StaticRowActionsProps = {
editLabel: string
deleteLabel: string
menuLabel: string
onEdit: () => void
onDelete: () => void
editDisabled?: boolean
deleteDisabled?: boolean
}
export function StaticRowActions(props: StaticRowActionsProps) {
return (
<div className='flex justify-end gap-1'>
<Button
variant='ghost'
size='icon-sm'
onClick={props.onEdit}
disabled={props.editDisabled}
aria-label={props.editLabel}
>
<Pencil />
</Button>
<DataTableRowActionMenu ariaLabel={props.menuLabel}>
<DropdownMenuItem
onClick={props.onDelete}
disabled={props.deleteDisabled}
className='text-destructive focus:text-destructive'
>
{props.deleteLabel}
<DropdownMenuShortcut>
<Trash2 size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
</DataTableRowActionMenu>
</div>
)
}
web/default/src/components/truncated-text.tsx
import { cn } from '@/lib/utils'
import { TruncatedCell } from '@/components/data-table'
import { TruncatedCell } from '@/components/data-table/core/truncated-cell'
interface TruncatedTextProps {
text: string
......
web/default/src/features/channels/components/channels-columns.tsx
......@@ -200,8 +200,11 @@ function PriorityCell({ channel }: { channel: Channel }) {
open={confirmOpen}
onOpenChange={setConfirmOpen}
title={t('Confirm Batch Update')}
desc={`This will update the priority to ${pendingValue} for all ${channelCount} channel(s) with tag "${tag}". Continue?`}
confirmText='Update'
desc={t(
'This will update the priority to {{value}} for all {{count}} channel(s) with tag "{{tag}}". Continue?',
{ value: pendingValue, count: channelCount, tag }
)}
confirmText={t('Update')}
handleConfirm={() => {
if (pendingValue !== null) {
handleUpdateTagField(tag, 'priority', pendingValue, queryClient)
......@@ -255,8 +258,11 @@ function WeightCell({ channel }: { channel: Channel }) {
open={confirmOpen}
onOpenChange={setConfirmOpen}
title={t('Confirm Batch Update')}
desc={`This will update the weight to ${pendingValue} for all ${channelCount} channel(s) with tag "${tag}". Continue?`}
confirmText='Update'
desc={t(
'This will update the weight to {{value}} for all {{count}} channel(s) with tag "{{tag}}". Continue?',
{ value: pendingValue, count: channelCount, tag }
)}
confirmText={t('Update')}
handleConfirm={() => {
if (pendingValue !== null) {
handleUpdateTagField(tag, 'weight', pendingValue, queryClient)
......@@ -1108,7 +1114,6 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
return <DataTableRowActions row={row} />
},
size: 132,
enableSorting: false,
enableHiding: false,
meta: { pinned: 'right' as const },
......
web/default/src/features/channels/components/channels-primary-buttons.tsx
......@@ -226,7 +226,9 @@ export function ChannelsPrimaryButtons() {
open={showDeleteDialog}
onOpenChange={setShowDeleteDialog}
title={t('Delete All Disabled Channels?')}
desc='This will permanently delete all manually and automatically disabled channels. This action cannot be undone.'
desc={t(
'This will permanently delete all manually and automatically disabled channels. This action cannot be undone.'
)}
destructive
handleConfirm={() => {
handleDeleteAllDisabled(queryClient, (_count) => {
......
web/default/src/features/channels/components/data-table-row-actions.tsx
......@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/
import { useContext, useState } from 'react'
import { useQueryClient } from '@tanstack/react-query'
import { type Row } from '@tanstack/react-table'
import type { Row } from '@tanstack/react-table'
import {
MoreHorizontal,
Boxes,
......@@ -36,6 +36,8 @@ import {
Loader2,
} from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
......@@ -50,7 +52,7 @@ import {
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { MODEL_FETCHABLE_TYPES } from '../constants'
import {
channelsQueryKeys,
......@@ -96,13 +98,9 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
e.stopPropagation()
setIsTesting(true)
try {
await handleTestChannel(
channel.id,
{ channelName: channel.name },
() => {
await handleTestChannel(channel.id, { channelName: channel.name }, () => {
queryClient.invalidateQueries({ queryKey: channelsQueryKeys.lists() })
}
)
})
} finally {
setIsTesting(false)
}
......@@ -145,6 +143,13 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
}
}
let statusIcon = <Power className='size-4' />
if (isTogglingStatus) {
statusIcon = <Loader2 className='size-4 animate-spin' />
} else if (isEnabled) {
statusIcon = <PowerOff className='size-4' />
}
return (
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
......@@ -153,6 +158,25 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
<Button
variant='ghost'
size='icon-sm'
onClick={(e) => {
e.stopPropagation()
handleEdit()
}}
aria-label={t('Edit')}
/>
}
>
<Pencil className='size-4' />
</TooltipTrigger>
<TooltipContent>{t('Edit')}</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
size='icon-sm'
onClick={handleDirectTest}
disabled={isTesting}
aria-label={t('Test Connection')}
......@@ -206,13 +230,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
/>
}
>
{isTogglingStatus ? (
<Loader2 className='size-4 animate-spin' />
) : isEnabled ? (
<PowerOff className='size-4' />
) : (
<Power className='size-4' />
)}
{statusIcon}
</TooltipTrigger>
<TooltipContent>
{isEnabled ? t('Disable') : t('Enable')}
......@@ -232,14 +250,6 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
<span className='sr-only'>{t('Open menu')}</span>
</DropdownMenuTrigger>
<DropdownMenuContent align='end' className='w-48'>
{/* Edit */}
<DropdownMenuItem onClick={handleEdit}>
{t('Edit')}
<DropdownMenuShortcut>
<Pencil size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
{/* Test Connection */}
<DropdownMenuItem onClick={handleTest}>
{t('Test Connection')}
......@@ -343,8 +353,11 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
open={deleteConfirmOpen}
onOpenChange={setDeleteConfirmOpen}
title={t('Delete Channel')}
desc={`Are you sure you want to delete "${channel.name}"? This action cannot be undone.`}
confirmText='Delete'
desc={t(
'Are you sure you want to delete channel "{{name}}"? This action cannot be undone.',
{ name: channel.name }
)}
confirmText={t('Delete')}
destructive
handleConfirm={() => {
handleDeleteChannel(channel.id, queryClient)
......
web/default/src/features/channels/components/data-table-tag-row-actions.tsx
......@@ -17,18 +17,21 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useQueryClient } from '@tanstack/react-query'
import { type Row } from '@tanstack/react-table'
import { MoreHorizontal, Power, PowerOff, Pencil, Edit } from 'lucide-react'
import type { Row } from '@tanstack/react-table'
import { Power, PowerOff, Pencil, Edit } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { handleEnableTagChannels, handleDisableTagChannels } from '../lib'
import type { Channel } from '../types'
import { useChannels } from './channels-provider'
......@@ -64,27 +67,24 @@ export function DataTableTagRowActions({ row }: DataTableTagRowActionsProps) {
}
return (
<DropdownMenu>
<DropdownMenuTrigger
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
className='data-popup-open:bg-muted flex h-8 w-8 p-0'
size='icon-sm'
onClick={handleEditTag}
aria-label={t('Edit Tag')}
/>
}
>
<MoreHorizontal className='h-4 w-4' />
<span className='sr-only'>{t('Open menu')}</span>
</DropdownMenuTrigger>
<DropdownMenuContent align='end' className='w-48'>
{/* Edit Tag */}
<DropdownMenuItem onClick={handleEditTag}>
{t('Edit Tag')}
<DropdownMenuShortcut>
<Edit size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
<Edit />
</TooltipTrigger>
<TooltipContent>{t('Edit Tag')}</TooltipContent>
</Tooltip>
<DataTableRowActionMenu ariaLabel={t('Open menu')}>
{/* Batch Edit */}
<DropdownMenuItem onClick={handleBatchEdit}>
{t('Batch Edit')}
......@@ -110,7 +110,7 @@ export function DataTableTagRowActions({ row }: DataTableTagRowActionsProps) {
<PowerOff size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</DataTableRowActionMenu>
</div>
)
}
web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx
......@@ -872,7 +872,6 @@ function ChannelTestDialogContent({
)
},
enableSorting: false,
size: 120,
},
],
[
......@@ -1068,7 +1067,6 @@ function ChannelTestDialogContent({
{
columnId: 'actions',
side: 'right',
className: 'w-24 min-w-24 sm:w-28 sm:min-w-28',
cellClassName: 'bg-popover',
},
]}
......@@ -1077,7 +1075,7 @@ function ChannelTestDialogContent({
<col className='w-10 min-w-10' />
<col className='w-auto' />
<col className='w-70' />
<col className='w-24 sm:w-28' />
<col className='w-auto' />
</colgroup>
}
getColumnClassName={(columnId) =>
......
web/default/src/features/channels/components/dialogs/multi-key-manage-dialog.tsx
......@@ -387,7 +387,7 @@ export function MultiKeyManageDialog({
{
id: 'actions',
header: t('Actions'),
className: 'w-44 text-right',
className: 'text-right',
cell: (key) => (
<MultiKeyTableRowActions
keyIndex={key.index}
......
web/default/src/features/channels/components/dialogs/ollama-models-dialog.tsx
......@@ -186,7 +186,7 @@ export function OllamaModelsDialog({
setSelected((prev) => {
const next = new Set(prev)
filteredModels.forEach((m) => next.add(m.id))
return Array.from(next)
return [...next]
})
}
......@@ -201,8 +201,8 @@ export function OllamaModelsDialog({
const next =
mode === 'replace'
? Array.from(new Set(selected))
: Array.from(new Set([...existingModels, ...selected]))
? [...new Set(selected)]
: [...new Set([...existingModels, ...selected])]
try {
const res = await updateChannel(currentRow.id, { models: next.join(',') })
......@@ -587,7 +587,7 @@ export function OllamaModelsDialog({
{t('Cancel')}
</AlertDialogCancel>
<AlertDialogAction
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
variant='destructive'
disabled={isDeleting || !deleteTarget}
onClick={() => {
if (!deleteTarget) return
......
web/default/src/features/keys/components/api-keys-columns.tsx
......@@ -314,7 +314,6 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
header: () => t('Actions'),
cell: ({ row }) => <DataTableRowActions row={row} />,
meta: { pinned: 'right' as const },
size: 88,
},
]
}
web/default/src/features/keys/components/api-keys-delete-dialog.tsx
......@@ -51,7 +51,7 @@ export function ApiKeysDeleteDialog() {
} else {
toast.error(result.message || t(ERROR_MESSAGES.DELETE_FAILED))
}
} catch (_error) {
} catch {
toast.error(t(ERROR_MESSAGES.UNEXPECTED))
} finally {
setIsDeleting(false)
......@@ -79,7 +79,7 @@ export function ApiKeysDeleteDialog() {
<AlertDialogAction
onClick={handleDelete}
disabled={isDeleting}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
variant='destructive'
>
{isDeleting ? t('Deleting...') : t('Delete')}
</AlertDialogAction>
......
web/default/src/features/keys/components/data-table-row-actions.tsx
......@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useCallback, useState } from 'react'
import { type Row } from '@tanstack/react-table'
import type { Row } from '@tanstack/react-table'
import {
Trash2,
Edit,
......@@ -28,22 +28,19 @@ import {
Copy,
Link,
Loader2,
MoreHorizontal as DotsHorizontalIcon,
} from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import { copyToClipboard } from '@/lib/copy-to-clipboard'
import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
Tooltip,
......@@ -53,6 +50,8 @@ import {
import { useChatPresets } from '@/features/chat/hooks/use-chat-presets'
import { resolveChatUrl, type ChatPreset } from '@/features/chat/lib/chat-links'
import { sendToFluent } from '@/features/chat/lib/send-to-fluent'
import { copyToClipboard } from '@/lib/copy-to-clipboard'
import { updateApiKeyStatus } from '../api'
import { API_KEY_STATUS, ERROR_MESSAGES, SUCCESS_MESSAGES } from '../constants'
import { apiKeySchema } from '../types'
......@@ -104,6 +103,7 @@ export function DataTableRowActions<TData>({
const isRealKeyLoading = Boolean(loadingKeys[apiKey.id])
const hasChatPresets = chatPresets.length > 0
const toggleLabel = isEnabled ? t('Disable') : t('Enable')
const handleMenuOpenChange = useCallback(
(open: boolean) => {
......@@ -189,6 +189,13 @@ export function DataTableRowActions<TData>({
}
}
let statusIcon = <Power className='size-4' />
if (isTogglingStatus) {
statusIcon = <Loader2 className='size-4 animate-spin' />
} else if (isEnabled) {
statusIcon = <PowerOff className='size-4' />
}
return (
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
......@@ -199,7 +206,7 @@ export function DataTableRowActions<TData>({
size='icon-sm'
onClick={handleToggleStatus}
disabled={isTogglingStatus}
aria-label={isEnabled ? t('Disable') : t('Enable')}
aria-label={toggleLabel}
className={
isEnabled
? 'text-destructive hover:text-destructive'
......@@ -208,32 +215,36 @@ export function DataTableRowActions<TData>({
/>
}
>
{isTogglingStatus ? (
<Loader2 className='size-4 animate-spin' />
) : isEnabled ? (
<PowerOff className='size-4' />
) : (
<Power className='size-4' />
)}
{statusIcon}
</TooltipTrigger>
<TooltipContent>
{isEnabled ? t('Disable') : t('Enable')}
</TooltipContent>
<TooltipContent>{toggleLabel}</TooltipContent>
</Tooltip>
<DropdownMenu modal={false} onOpenChange={handleMenuOpenChange}>
<DropdownMenuTrigger
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
className='data-popup-open:bg-muted flex h-8 w-8 p-0'
size='icon-sm'
onClick={() => {
setCurrentRow(apiKey)
setOpen('update')
}}
aria-label={t('Edit')}
/>
}
>
<DotsHorizontalIcon className='h-4 w-4' />
<span className='sr-only'>{t('Open menu')}</span>
</DropdownMenuTrigger>
<DropdownMenuContent align='end' className='w-[200px]'>
<Edit />
</TooltipTrigger>
<TooltipContent>{t('Edit')}</TooltipContent>
</Tooltip>
<DataTableRowActionMenu
ariaLabel={t('Open menu')}
contentClassName='w-[200px]'
modal={false}
onOpenChange={handleMenuOpenChange}
>
<DropdownMenuItem
onClick={async () => {
const realKey = getCachedRealKey()
......@@ -251,10 +262,7 @@ export function DataTableRowActions<TData>({
onClick={async () => {
const realKey = getCachedRealKey()
if (!realKey) return
const connStr = encodeConnectionString(
realKey,
getServerAddress()
)
const connStr = encodeConnectionString(realKey, getServerAddress())
const ok = await copyToClipboard(connStr)
if (ok) toast.success(t('Copied'))
}}
......@@ -266,17 +274,6 @@ export function DataTableRowActions<TData>({
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
setCurrentRow(apiKey)
setOpen('update')
}}
>
{t('Edit')}
<DropdownMenuShortcut>
<Edit size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem
onClick={async () => {
const realKey = await resolveRealKey(apiKey.id)
if (!realKey) return
......@@ -323,8 +320,7 @@ export function DataTableRowActions<TData>({
<Trash2 size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</DataTableRowActionMenu>
</div>
)
}
web/default/src/features/models/components/data-table-row-actions.tsx
......@@ -18,18 +18,20 @@ For commercial licensing, please contact support@quantumnous.com
*/
import { useState } from 'react'
import { useQueryClient } from '@tanstack/react-query'
import { type Row } from '@tanstack/react-table'
import { MoreHorizontal, Pencil, Power, PowerOff, Trash2 } from 'lucide-react'
import type { Row } from '@tanstack/react-table'
import { Pencil, Power, PowerOff, Trash2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { ConfirmDialog } from '@/components/confirm-dialog'
import {
handleDeleteModel,
......@@ -61,53 +63,48 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
handleToggleModelStatus(model.id, model.status, queryClient)
}
const toggleLabel = isEnabled ? t('Disable') : t('Enable')
return (
<div className='-ml-2'>
<DropdownMenu>
<DropdownMenuTrigger
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
className='data-popup-open:bg-muted flex h-8 w-8 p-0'
size='icon-sm'
onClick={handleEdit}
aria-label={t('Edit')}
/>
}
>
<MoreHorizontal className='h-4 w-4' />
<span className='sr-only'>{t('Open menu')}</span>
</DropdownMenuTrigger>
<DropdownMenuContent align='end' className='w-48'>
{/* Edit */}
<DropdownMenuItem onClick={handleEdit}>
{t('Edit')}
<DropdownMenuShortcut>
<Pencil size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<Pencil />
</TooltipTrigger>
<TooltipContent>{t('Edit')}</TooltipContent>
</Tooltip>
{/* Enable/Disable */}
<DropdownMenuItem onClick={handleToggleStatus}>
{isEnabled ? (
<>
{t('Disable')}
<DropdownMenuShortcut>
<PowerOff size={16} />
</DropdownMenuShortcut>
</>
) : (
<>
{t('Enable')}
<DropdownMenuShortcut>
<Power size={16} />
</DropdownMenuShortcut>
</>
)}
</DropdownMenuItem>
<DropdownMenuSeparator />
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
size='icon-sm'
onClick={handleToggleStatus}
aria-label={toggleLabel}
className={
isEnabled
? 'text-destructive hover:text-destructive'
: 'text-success hover:text-success'
}
/>
}
>
{isEnabled ? <PowerOff /> : <Power />}
</TooltipTrigger>
<TooltipContent>{toggleLabel}</TooltipContent>
</Tooltip>
{/* Delete */}
<DataTableRowActionMenu ariaLabel={t('Open menu')}>
<DropdownMenuItem
onSelect={(e) => {
e.preventDefault()
......@@ -120,21 +117,23 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
<Trash2 size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DataTableRowActionMenu>
<ConfirmDialog
open={deleteConfirmOpen}
onOpenChange={setDeleteConfirmOpen}
title={t('Delete Model')}
desc={`Are you sure you want to delete "${model.model_name}"? This action cannot be undone.`}
confirmText='Delete'
desc={t(
'Are you sure you want to delete model "{{name}}"? This action cannot be undone.',
{ name: model.model_name }
)}
confirmText={t('Delete')}
destructive
handleConfirm={() => {
handleDeleteModel(model.id, queryClient)
setDeleteConfirmOpen(false)
}}
/>
</DropdownMenu>
</div>
)
}
web/default/src/features/models/components/deployments-columns.tsx
......@@ -16,13 +16,21 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { type ColumnDef } from '@tanstack/react-table'
import type { ColumnDef } from '@tanstack/react-table'
import { Eye, Info, Pencil, Settings2, Timer, Trash2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { formatTimestampToDate } from '@/lib/format'
import { Button } from '@/components/ui/button'
import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
import { StatusBadge } from '@/components/status-badge'
import { TableId } from '@/components/table-id'
import { Button } from '@/components/ui/button'
import {
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
} from '@/components/ui/dropdown-menu'
import { formatTimestampToDate } from '@/lib/format'
import { getDeploymentStatusConfig } from '../constants'
import {
formatRemainingMinutes,
......@@ -113,8 +121,9 @@ export function useDeploymentsColumns(opts: {
header: t('Provider'),
cell: ({ row }) => {
const provider = row.original.provider
if (!provider)
if (!provider) {
return <span className='text-muted-foreground text-xs'>-</span>
}
return (
<StatusBadge
label={String(provider)}
......@@ -194,8 +203,9 @@ export function useDeploymentsColumns(opts: {
typeof row.original.hardware_quantity === 'number'
? row.original.hardware_quantity
: null
if (!hardware)
if (!hardware) {
return <span className='text-muted-foreground text-xs'>-</span>
}
return (
<div className='flex max-w-full min-w-0 flex-nowrap items-center gap-2 overflow-hidden'>
<StatusBadge
......@@ -218,12 +228,12 @@ export function useDeploymentsColumns(opts: {
header: t('Created'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const ts =
typeof row.original.created_at === 'number'
? row.original.created_at
: typeof row.original.created_at === 'string'
? Number(row.original.created_at)
: undefined
let ts: number | undefined
if (typeof row.original.created_at === 'number') {
ts = row.original.created_at
} else if (typeof row.original.created_at === 'string') {
ts = Number(row.original.created_at)
}
return (
<div className='min-w-[140px] font-mono text-sm'>
{formatTimestampToDate(ts)}
......@@ -249,56 +259,51 @@ export function useDeploymentsColumns(opts: {
<div className='-ml-2.5 flex items-center gap-1'>
<Button
variant='ghost'
size='sm'
size='icon-sm'
onClick={() => opts.onViewLogs(id)}
title={t('View logs')}
>
<Eye className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() => opts.onViewDetails(id)}
title={t('View details')}
>
<Info className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() => opts.onUpdateConfig(id)}
title={t('Update configuration')}
>
<Settings2 className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() => opts.onExtend(id)}
title={t('Extend deployment')}
>
<Timer className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() => opts.onRename(id, String(currentName))}
title={t('Rename deployment')}
aria-label={t('View logs')}
>
<Pencil className='h-4 w-4' />
<Eye />
</Button>
<Button
variant='ghost'
size='sm'
<DataTableRowActionMenu ariaLabel={t('Open menu')}>
<DropdownMenuItem onClick={() => opts.onViewDetails(id)}>
{t('View details')}
<DropdownMenuShortcut>
<Info size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => opts.onUpdateConfig(id)}>
{t('Update configuration')}
<DropdownMenuShortcut>
<Settings2 size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => opts.onExtend(id)}>
{t('Extend deployment')}
<DropdownMenuShortcut>
<Timer size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => opts.onRename(id, currentName)}>
{t('Rename deployment')}
<DropdownMenuShortcut>
<Pencil size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => opts.onDelete(row.original)}
title={t('Delete')}
className='text-destructive focus:text-destructive'
>
<Trash2 className='h-4 w-4 text-red-500' />
</Button>
{t('Delete')}
<DropdownMenuShortcut>
<Trash2 size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
</DataTableRowActionMenu>
</div>
)
},
size: 180,
meta: { pinned: 'right' as const },
},
]
......
web/default/src/features/models/components/deployments-table.tsx
......@@ -308,7 +308,7 @@ export function DeploymentsTable() {
<AlertDialogAction
onClick={handleDelete}
disabled={isDeleting}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
variant='destructive'
>
{isDeleting ? t('Deleting...') : t('Delete')}
</AlertDialogAction>
......
web/default/src/features/models/components/models-columns.tsx
......@@ -470,7 +470,6 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
cell: ({ row }) => {
return <DataTableRowActions row={row} />
},
size: 100,
enableSorting: false,
enableHiding: false,
meta: { pinned: 'right' as const },
......
web/default/src/features/profile/components/passkey-card.tsx
......@@ -125,11 +125,12 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
const handleRemove = useCallback(async () => {
const methods = await fetchVerificationMethods()
const required: VerificationMethod | null = methods.has2FA
? '2fa'
: methods.hasPasskey
? 'passkey'
: null
let required: VerificationMethod | null = null
if (methods.has2FA) {
required = '2fa'
} else if (methods.hasPasskey) {
required = 'passkey'
}
if (!required) {
toast.error(
......@@ -205,6 +206,24 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
: t('Not used yet')
const showUnsupportedNotice = !supported && !enabled
let backupStatus: {
label: string
variant: 'success' | 'warning' | 'neutral'
} | null = null
if (status?.backup_eligible !== undefined) {
backupStatus = {
label: t('No backup'),
variant: 'neutral',
}
if (status.backup_eligible) {
backupStatus = {
label: status.backup_state ? t('Backed up') : t('Not backed up'),
variant: status.backup_state ? 'success' : 'warning',
}
}
}
return (
<>
......@@ -234,22 +253,10 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
showDot
copyable={false}
/>
{status?.backup_eligible !== undefined && (
{backupStatus && (
<StatusBadge
label={
status.backup_eligible
? status.backup_state
? t('Backed up')
: t('Not backed up')
: t('No backup')
}
variant={
status.backup_eligible
? status.backup_state
? 'success'
: 'warning'
: 'neutral'
}
label={backupStatus.label}
variant={backupStatus.variant}
showDot
copyable={false}
/>
......@@ -310,7 +317,7 @@ export function PasskeyCard({ loading: pageLoading }: PasskeyCardProps) {
{t('Cancel')}
</AlertDialogCancel>
<AlertDialogAction
className='bg-destructive text-destructive-foreground'
variant='destructive'
disabled={removing}
onClick={(event) => {
event.preventDefault()
......
web/default/src/features/redemption-codes/components/data-table-row-actions.tsx
......@@ -16,25 +16,27 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { type Row } from '@tanstack/react-table'
import type { Row } from '@tanstack/react-table'
import {
Trash2,
Edit,
Power,
PowerOff,
MoreHorizontal as DotsHorizontalIcon,
} from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { updateRedemptionStatus } from '../api'
import { REDEMPTION_STATUS, SUCCESS_MESSAGES } from '../constants'
import { isRedemptionExpired } from '../lib'
......@@ -77,32 +79,28 @@ export function DataTableRowActions<TData>({
const canToggle = !isUsed && !isExpired
return (
<div className='-ml-2'>
<DropdownMenu modal={false}>
<DropdownMenuTrigger
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
className='data-popup-open:bg-muted flex h-8 w-8 p-0'
/>
}
>
<DotsHorizontalIcon className='h-4 w-4' />
<span className='sr-only'>{t('Open menu')}</span>
</DropdownMenuTrigger>
<DropdownMenuContent align='end' className='w-[160px]'>
<DropdownMenuItem
size='icon-sm'
onClick={() => {
setCurrentRow(redemption)
setOpen('update')
}}
disabled={!canEdit}
aria-label={t('Edit')}
/>
}
>
{t('Edit')}
<DropdownMenuShortcut>
<Edit size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
<Edit />
</TooltipTrigger>
<TooltipContent>{t('Edit')}</TooltipContent>
</Tooltip>
<DataTableRowActionMenu ariaLabel={t('Open menu')} modal={false}>
{canToggle && (
<DropdownMenuItem onClick={handleToggleStatus}>
{isEnabled ? (
......@@ -122,7 +120,7 @@ export function DataTableRowActions<TData>({
)}
</DropdownMenuItem>
)}
<DropdownMenuSeparator />
{canToggle && <DropdownMenuSeparator />}
<DropdownMenuItem
onClick={() => {
setCurrentRow(redemption)
......@@ -135,8 +133,7 @@ export function DataTableRowActions<TData>({
<Trash2 size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</DataTableRowActionMenu>
</div>
)
}
web/default/src/features/redemption-codes/components/redemptions-columns.tsx
......@@ -255,7 +255,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
header: () => t('Actions'),
cell: ({ row }) => <DataTableRowActions row={row} />,
meta: { pinned: 'right' as const },
size: 88,
},
]
}
web/default/src/features/redemption-codes/components/redemptions-delete-dialog.tsx
......@@ -75,7 +75,7 @@ export function RedemptionsDeleteDialog() {
<AlertDialogAction
onClick={handleDelete}
disabled={isDeleting}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
variant='destructive'
>
{isDeleting ? t('Deleting...') : t('Delete')}
</AlertDialogAction>
......
web/default/src/features/subscriptions/components/data-table-row-actions.tsx
......@@ -16,16 +16,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { type Row } from '@tanstack/react-table'
import { MoreHorizontal, Pencil, Power, PowerOff } from 'lucide-react'
import type { Row } from '@tanstack/react-table'
import { Pencil, Power, PowerOff } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import type { PlanRecord } from '../types'
import { useSubscriptions } from './subscriptions-provider'
......@@ -36,47 +35,59 @@ interface DataTableRowActionsProps {
export function DataTableRowActions({ row }: DataTableRowActionsProps) {
const { t } = useTranslation()
const { setOpen, setCurrentRow, complianceConfirmed } = useSubscriptions()
const isEnabled = row.original.plan.enabled
const toggleLabel = isEnabled ? t('Disable') : t('Enable')
return (
<div className='-ml-2'>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant='ghost' className='h-8 w-8 p-0' />}
>
<MoreHorizontal className='h-4 w-4' />
</DropdownMenuTrigger>
<DropdownMenuContent align='end'>
<DropdownMenuItem
disabled={!complianceConfirmed}
onClick={() => {
const handleEdit = () => {
setCurrentRow(row.original)
setOpen('update')
}}
>
<Pencil className='mr-2 h-4 w-4' />
{t('Edit')}
</DropdownMenuItem>
<DropdownMenuItem
disabled={!complianceConfirmed}
onClick={() => {
}
const handleToggleStatus = () => {
setCurrentRow(row.original)
setOpen('toggle-status')
}}
}
return (
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
size='icon-sm'
disabled={!complianceConfirmed}
onClick={handleEdit}
aria-label={t('Edit')}
/>
}
>
<Pencil />
</TooltipTrigger>
<TooltipContent>{t('Edit')}</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
size='icon-sm'
disabled={!complianceConfirmed}
onClick={handleToggleStatus}
aria-label={toggleLabel}
className={
isEnabled
? 'text-destructive hover:text-destructive'
: 'text-success hover:text-success'
}
/>
}
>
{row.original.plan.enabled ? (
<>
<PowerOff className='mr-2 h-4 w-4' />
{t('Disable')}
</>
) : (
<>
<Power className='mr-2 h-4 w-4' />
{t('Enable')}
</>
)}
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
{isEnabled ? <PowerOff /> : <Power />}
</TooltipTrigger>
<TooltipContent>{toggleLabel}</TooltipContent>
</Tooltip>
</div>
)
}
web/default/src/features/subscriptions/components/subscriptions-columns.tsx
......@@ -196,7 +196,6 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
header: () => t('Actions'),
cell: ({ row }) => <DataTableRowActions row={row} />,
meta: { pinned: 'right' as const },
size: 80,
},
],
[t]
......
web/default/src/features/system-settings/auth/custom-oauth/components/provider-table.tsx
......@@ -17,11 +17,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useState } from 'react'
import { Pencil, Trash2, Plus } from 'lucide-react'
import { Plus } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { BadgeCell, StaticDataTable } from '@/components/data-table'
import { BadgeCell } from '@/components/data-table/core/badge-cell'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { StatusBadge } from '@/components/status-badge'
import { useDeleteProvider } from '../hooks/use-custom-oauth-mutations'
import type { CustomOAuthProvider } from '../types'
......@@ -118,22 +120,13 @@ export function ProviderTable(props: ProviderTableProps) {
className: 'text-right',
cellClassName: 'text-right',
cell: (provider) => (
<div className='flex justify-end gap-1'>
<Button
variant='ghost'
size='sm'
onClick={() => props.onEdit(provider)}
>
<Pencil className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() => setDeleteTarget(provider)}
>
<Trash2 className='text-destructive h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => props.onEdit(provider)}
onDelete={() => setDeleteTarget(provider)}
/>
),
},
]}
......
web/default/src/features/system-settings/content/announcements-section.tsx
......@@ -20,7 +20,7 @@ import { useEffect, useMemo, useState } from 'react'
import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Plus, Edit, Trash2, Save } from 'lucide-react'
import { Plus, Trash2, Save } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import dayjs from '@/lib/dayjs'
......@@ -55,7 +55,8 @@ import {
SelectValue,
} from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { StaticDataTable } from '@/components/data-table'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { DateTimePicker } from '@/components/datetime-picker'
import { Dialog } from '@/components/dialog'
import { StatusBadge } from '@/components/status-badge'
......@@ -419,24 +420,14 @@ export function AnnouncementsSection({
{
id: 'actions',
header: t('Actions'),
className: 'w-32',
cell: (announcement) => (
<div className='flex gap-2'>
<Button
onClick={() => handleEdit(announcement)}
size='sm'
variant='ghost'
>
<Edit className='h-4 w-4' />
</Button>
<Button
onClick={() => handleDelete(announcement)}
size='sm'
variant='ghost'
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => handleEdit(announcement)}
onDelete={() => handleDelete(announcement)}
/>
),
},
]}
......@@ -600,13 +591,16 @@ export function AnnouncementsSection({
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
<AlertDialogDescription>
{deleteTarget === 'single'
? 'This announcement will be removed from the list.'
: `${selectedIds.length} announcements will be removed from the list.`}
? t('This announcement will be removed from the list.')
: t(
'{{count}} announcements will be removed from the list.',
{ count: selectedIds.length }
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
<AlertDialogAction onClick={confirmDelete}>
<AlertDialogAction variant='destructive' onClick={confirmDelete}>
{t('Delete')}
</AlertDialogAction>
</AlertDialogFooter>
......
web/default/src/features/system-settings/content/api-info-section.tsx
......@@ -20,7 +20,7 @@ import { useMemo, useState } from 'react'
import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Plus, Edit, Trash2, Save } from 'lucide-react'
import { Plus, Trash2, Save } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import { getBgColorClass } from '@/lib/colors'
......@@ -54,7 +54,9 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { BadgeCell, StaticDataTable } from '@/components/data-table'
import { BadgeCell } from '@/components/data-table/core/badge-cell'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { Dialog } from '@/components/dialog'
import { StatusBadge } from '@/components/status-badge'
import { SettingsSwitchField } from '../components/settings-form-layout'
......@@ -369,24 +371,14 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
{
id: 'actions',
header: t('Actions'),
className: 'w-32',
cell: (apiInfo) => (
<div className='flex gap-2'>
<Button
onClick={() => handleEdit(apiInfo)}
size='sm'
variant='ghost'
>
<Edit className='h-4 w-4' />
</Button>
<Button
onClick={() => handleDelete(apiInfo)}
size='sm'
variant='ghost'
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => handleEdit(apiInfo)}
onDelete={() => handleDelete(apiInfo)}
/>
),
},
]}
......@@ -526,13 +518,16 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
<AlertDialogDescription>
{deleteTarget === 'single'
? 'This API shortcut will be removed from the list.'
: `${selectedIds.length} API shortcuts will be removed from the list.`}
? t('This API shortcut will be removed from the list.')
: t(
'{{count}} API shortcuts will be removed from the list.',
{ count: selectedIds.length }
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
<AlertDialogAction onClick={confirmDelete}>
<AlertDialogAction variant='destructive' onClick={confirmDelete}>
{t('Delete')}
</AlertDialogAction>
</AlertDialogFooter>
......
web/default/src/features/system-settings/content/chat-settings-visual-editor.tsx
......@@ -17,11 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useState, useMemo } from 'react'
import { Pencil, Plus, Search, Trash2 } from 'lucide-react'
import { Plus, Search } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { StaticDataTable } from '@/components/data-table'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { safeJsonParseWithValidation } from '../utils/json-parser'
import { isArray } from '../utils/json-validators'
import { ChatDialog, type ChatEntryData } from './chat-dialog'
......@@ -171,22 +172,13 @@ export function ChatSettingsVisualEditor({
className: 'text-right',
cellClassName: 'text-right',
cell: (chat) => (
<div className='flex justify-end gap-2'>
<Button
variant='ghost'
size='sm'
onClick={() => handleEdit(chat)}
>
<Pencil className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() => handleDelete(chat.name)}
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => handleEdit(chat)}
onDelete={() => handleDelete(chat.name)}
/>
),
},
]}
......
web/default/src/features/system-settings/content/faq-section.tsx
......@@ -20,7 +20,7 @@ import { useEffect, useState } from 'react'
import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Plus, Edit, Trash2, Save } from 'lucide-react'
import { Plus, Trash2, Save } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import {
......@@ -46,7 +46,8 @@ import {
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { StaticDataTable } from '@/components/data-table'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { Dialog } from '@/components/dialog'
import { SettingsSwitchField } from '../components/settings-form-layout'
import { SettingsSection } from '../components/settings-section'
......@@ -302,24 +303,14 @@ export function FAQSection({ enabled, data }: FAQSectionProps) {
{
id: 'actions',
header: t('Actions'),
className: 'w-32',
cell: (faq) => (
<div className='flex gap-2'>
<Button
onClick={() => handleEdit(faq)}
size='sm'
variant='ghost'
>
<Edit className='h-4 w-4' />
</Button>
<Button
onClick={() => handleDelete(faq)}
size='sm'
variant='ghost'
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => handleEdit(faq)}
onDelete={() => handleDelete(faq)}
/>
),
},
]}
......@@ -406,13 +397,15 @@ export function FAQSection({ enabled, data }: FAQSectionProps) {
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
<AlertDialogDescription>
{deleteTarget === 'single'
? 'This FAQ entry will be removed from the list.'
: `${selectedIds.length} FAQ entries will be removed from the list.`}
? t('This FAQ entry will be removed from the list.')
: t('{{count}} FAQ entries will be removed from the list.', {
count: selectedIds.length,
})}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
<AlertDialogAction onClick={confirmDelete}>
<AlertDialogAction variant='destructive' onClick={confirmDelete}>
{t('Delete')}
</AlertDialogAction>
</AlertDialogFooter>
......
web/default/src/features/system-settings/content/uptime-kuma-section.tsx
......@@ -20,7 +20,7 @@ import { useEffect, useState } from 'react'
import * as z from 'zod'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { Plus, Edit, Trash2, Save } from 'lucide-react'
import { Plus, Trash2, Save } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import {
......@@ -45,7 +45,8 @@ import {
FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { StaticDataTable } from '@/components/data-table'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { Dialog } from '@/components/dialog'
import { SettingsSwitchField } from '../components/settings-form-layout'
import { SettingsSection } from '../components/settings-section'
......@@ -319,24 +320,14 @@ export function UptimeKumaSection({ enabled, data }: UptimeKumaSectionProps) {
{
id: 'actions',
header: t('Actions'),
className: 'w-32',
cell: (group) => (
<div className='flex gap-2'>
<Button
onClick={() => handleEdit(group)}
size='sm'
variant='ghost'
>
<Edit className='h-4 w-4' />
</Button>
<Button
onClick={() => handleDelete(group)}
size='sm'
variant='ghost'
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => handleEdit(group)}
onDelete={() => handleDelete(group)}
/>
),
},
]}
......@@ -445,13 +436,16 @@ export function UptimeKumaSection({ enabled, data }: UptimeKumaSectionProps) {
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
<AlertDialogDescription>
{deleteTarget === 'single'
? 'This Uptime Kuma group will be removed from the list.'
: `${selectedIds.length} Uptime Kuma groups will be removed from the list.`}
? t('This Uptime Kuma group will be removed from the list.')
: t(
'{{count}} Uptime Kuma groups will be removed from the list.',
{ count: selectedIds.length }
)}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
<AlertDialogAction onClick={confirmDelete}>
<AlertDialogAction variant='destructive' onClick={confirmDelete}>
{t('Delete')}
</AlertDialogAction>
</AlertDialogFooter>
......
web/default/src/features/system-settings/integrations/amount-discount-visual-editor.tsx
......@@ -20,7 +20,8 @@ import { useState, useMemo } from 'react'
import { Pencil, Plus, Trash2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { StaticDataTable } from '@/components/data-table'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { StatusBadge } from '@/components/status-badge'
import { safeJsonParseWithValidation } from '../utils/json-parser'
import { isObjectRecord } from '../utils/json-validators'
......@@ -52,9 +53,9 @@ export function AmountDiscountVisualEditor({
return Object.entries(parsed)
.map(([amount, rate]) => ({
amount: parseInt(amount, 10),
amount: Number.parseInt(amount, 10),
discountRate:
typeof rate === 'number' ? rate : parseFloat(String(rate)),
typeof rate === 'number' ? rate : Number.parseFloat(String(rate)),
}))
.filter((item) => !isNaN(item.amount) && !isNaN(item.discountRate))
.sort((a, b) => a.amount - b.amount)
......@@ -180,32 +181,13 @@ export function AmountDiscountVisualEditor({
className: 'text-right',
cellClassName: 'text-right',
cell: (discount) => (
<div className='flex justify-end gap-2'>
<Button
type='button'
variant='ghost'
size='sm'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
handleEdit(discount)
}}
>
<Pencil className='h-4 w-4' />
</Button>
<Button
type='button'
variant='ghost'
size='sm'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
handleDelete(discount.amount)
}}
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => handleEdit(discount)}
onDelete={() => handleDelete(discount.amount)}
/>
),
},
]}
......
web/default/src/features/system-settings/integrations/creem-products-visual-editor.tsx
......@@ -21,7 +21,8 @@ import { Pencil, Plus, Search, Trash2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { StaticDataTable } from '@/components/data-table'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import {
formatCreemPrice,
formatQuotaShort,
......@@ -220,32 +221,13 @@ export function CreemProductsVisualEditor({
className: 'text-right',
cellClassName: 'text-right',
cell: (product) => (
<div className='flex justify-end gap-2'>
<Button
type='button'
variant='ghost'
size='sm'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
handleEdit(product)
}}
>
<Pencil className='h-4 w-4' />
</Button>
<Button
type='button'
variant='ghost'
size='sm'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
handleDelete(product)
}}
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => handleEdit(product)}
onDelete={() => handleDelete(product)}
/>
),
},
]}
......
web/default/src/features/system-settings/integrations/payment-methods-visual-editor.tsx
......@@ -19,6 +19,10 @@ For commercial licensing, please contact support@quantumnous.com
import { useState, useMemo } from 'react'
import { Lightbulb, Pencil, Plus, Search, Trash2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { ReactIconByName } from '@/components/react-icon-by-name'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
......@@ -26,8 +30,7 @@ import {
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover'
import { StaticDataTable } from '@/components/data-table'
import { ReactIconByName } from '@/components/react-icon-by-name'
import { safeJsonParseWithValidation } from '../utils/json-parser'
import { isArray } from '../utils/json-validators'
import {
......@@ -362,32 +365,13 @@ export function PaymentMethodsVisualEditor({
className: 'text-right',
cellClassName: 'text-right',
cell: (method) => (
<div className='flex justify-end gap-2'>
<Button
type='button'
variant='ghost'
size='sm'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
handleEdit(method)
}}
>
<Pencil className='h-4 w-4' />
</Button>
<Button
type='button'
variant='ghost'
size='sm'
onClick={(e) => {
e.preventDefault()
e.stopPropagation()
handleDelete(method)
}}
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => handleEdit(method)}
onDelete={() => handleDelete(method)}
/>
),
},
]}
......@@ -395,11 +379,20 @@ export function PaymentMethodsVisualEditor({
{/* Mobile card view */}
<div className='divide-y md:hidden'>
{filteredMethods.map((method, index) => {
{filteredMethods.map((method) => {
const iconName = getEffectiveIconName(method)
const methodKey = [
method.type,
method.name,
method.icon,
method.min_topup,
method.color,
]
.filter(Boolean)
.join('-')
return (
<div key={`${method.type}-${index}`} className='p-4'>
<div key={methodKey} className='p-4'>
<div className='mb-3 flex items-start justify-between'>
<div className='flex-1'>
<div className='mb-1 font-medium'>{method.name}</div>
......
web/default/src/features/system-settings/integrations/waffo-settings-section.tsx
......@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { type ChangeEvent, useRef, type SetStateAction, useState } from 'react'
import { Plus, Pencil, Trash2 } from 'lucide-react'
import { Plus } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import { Alert, AlertDescription } from '@/components/ui/alert'
......@@ -26,7 +26,8 @@ import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'
import { Textarea } from '@/components/ui/textarea'
import { StaticDataTable } from '@/components/data-table'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { Dialog } from '@/components/dialog'
import { SettingsSwitchField } from '../components/settings-form-layout'
......@@ -364,30 +365,17 @@ export function WaffoSettingsSection({
className: 'text-right',
cellClassName: 'text-right',
cell: (_m, idx) => (
<div className='flex justify-end gap-1'>
<Button
type='button'
variant='ghost'
size='icon'
className='h-7 w-7'
onClick={() => openEdit(idx)}
>
<Pencil className='h-3 w-3' />
</Button>
<Button
type='button'
variant='ghost'
size='icon'
className='h-7 w-7'
onClick={() =>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => openEdit(idx)}
onDelete={() =>
onPayMethodsChange((prev) =>
prev.filter((_, i) => i !== idx)
)
}
>
<Trash2 className='h-3 w-3' />
</Button>
</div>
/>
),
},
]}
......
web/default/src/features/system-settings/maintenance/log-settings-section.tsx
......@@ -220,14 +220,15 @@ export function LogSettingsSection({
)
const logCleanupProcessed = logCleanupState?.processed ?? 0
const logCleanupTotal = logCleanupState?.total ?? 0
const logCleanupTaskId = logCleanupTask?.task_id
useEffect(() => {
if (!logCleanupTask || !isActiveLogCleanupTask(logCleanupTask)) return
if (!logCleanupTaskId || !logCleanupActive) return
let cancelled = false
const interval = window.setInterval(async () => {
try {
const res = await getSystemTask(logCleanupTask.task_id)
const res = await getSystemTask(logCleanupTaskId)
if (cancelled || !res.success || !res.data) return
setLogCleanupTask(res.data)
......@@ -253,7 +254,7 @@ export function LogSettingsSection({
cancelled = true
window.clearInterval(interval)
}
}, [logCleanupTask?.task_id, logCleanupTask?.status, t])
}, [logCleanupActive, logCleanupTaskId, t])
const onSubmit = async (values: LogSettingsFormValues) => {
if (values.LogConsumeEnabled === defaultEnabled) return
......@@ -558,7 +559,10 @@ export function LogSettingsSection({
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
<AlertDialogAction onClick={cleanupServerLogFiles}>
<AlertDialogAction
variant='destructive'
onClick={cleanupServerLogFiles}
>
{t('Confirm Cleanup')}
</AlertDialogAction>
</AlertDialogFooter>
......@@ -598,6 +602,7 @@ export function LogSettingsSection({
{t('Cancel')}
</AlertDialogCancel>
<AlertDialogAction
variant='destructive'
onClick={handleCleanLogs}
disabled={isStartingLogCleanup}
>
......
web/default/src/features/system-settings/maintenance/performance-section.tsx
......@@ -553,7 +553,10 @@ export function PerformanceSection(props: Props) {
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
<AlertDialogAction onClick={clearDiskCache}>
<AlertDialogAction
variant='destructive'
onClick={clearDiskCache}
>
{t('Confirm')}
</AlertDialogAction>
</AlertDialogFooter>
......
web/default/src/features/system-settings/models/group-ratio-visual-editor.tsx
......@@ -17,8 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useState, useMemo, useEffect, useCallback, memo } from 'react'
import { Pencil, Plus, Trash2, GripVertical, ChevronDown } from 'lucide-react'
import { Plus, Trash2, GripVertical, ChevronDown } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { Dialog } from '@/components/dialog'
import { Button } from '@/components/ui/button'
import {
Card,
......@@ -35,8 +39,7 @@ import {
} from '@/components/ui/collapsible'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { StaticDataTable } from '@/components/data-table'
import { Dialog } from '@/components/dialog'
import { safeJsonParse } from '../utils/json-parser'
type GroupRatioVisualEditorProps = {
......@@ -95,11 +98,11 @@ function buildGroupPricingRows(
})
const names = new Set([...Object.keys(ratioMap), ...Object.keys(usableMap)])
return Array.from(names).map((name) => ({
return [...names].map((name) => ({
_id: createGroupPricingId(),
name,
ratio: normalizeRatio(ratioMap[name]),
selectable: Object.prototype.hasOwnProperty.call(usableMap, name),
selectable: Object.hasOwn(usableMap, name),
description: String(usableMap[name] ?? ''),
}))
}
......@@ -246,7 +249,7 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
delete map[simpleEditData.name]
}
map[name] = parseFloat(value)
map[name] = Number.parseFloat(value)
const field =
simpleDialogType === 'groupRatio' ? 'GroupRatio' : 'TopupGroupRatio'
......@@ -441,26 +444,17 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
className: 'text-right',
cellClassName: 'text-right',
cell: (group) => (
<div className='flex justify-end gap-2'>
<Button
variant='ghost'
size='sm'
onClick={() =>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() =>
handleSimpleEdit('topupGroupRatio', group)
}
>
<Pencil className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() =>
onDelete={() =>
handleSimpleDelete('topupGroupRatio', group.name)
}
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
/>
),
},
]}
......@@ -553,32 +547,23 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
className: 'text-right',
cellClassName: 'text-right',
cell: (override) => (
<div className='flex justify-end gap-2'>
<Button
variant='ghost'
size='sm'
onClick={() =>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() =>
handleOverrideEdit(
userGroupData.userGroup,
override
)
}
>
<Pencil className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() =>
onDelete={() =>
handleOverrideDelete(
userGroupData.userGroup,
override.targetGroup
)
}
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
/>
),
},
]}
......@@ -615,7 +600,7 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
<div className='space-y-2'>
{autoGroupsList.map((group, index) => (
<div
key={index}
key={group}
className='flex items-center gap-2 rounded-md border p-3'
>
<GripVertical className='text-muted-foreground h-4 w-4' />
......@@ -826,7 +811,7 @@ function GroupPricingTable({
if (!name) continue
counts.set(name, (counts.get(name) ?? 0) + 1)
}
return Array.from(counts.entries())
return [...counts.entries()]
.filter(([, count]) => count > 1)
.map(([name]) => name)
}, [rows])
......@@ -929,7 +914,7 @@ function GroupPricingTable({
{
id: 'actions',
header: t('Actions'),
className: 'w-16 text-right',
className: 'text-right',
cellClassName: 'text-right',
cell: (row) => (
<Button
......@@ -1037,7 +1022,7 @@ function SimpleGroupDialog({
value={value}
onChange={(e) => {
const val = e.target.value
if (val === '' || !isNaN(parseFloat(val))) {
if (val === '' || !isNaN(Number.parseFloat(val))) {
setValue(val)
}
}}
......@@ -1082,7 +1067,7 @@ function GroupOverrideDialog({
const handleSave = () => {
if (!targetGroup.trim() || !ratio.trim()) return
const parsedRatio = parseFloat(ratio)
const parsedRatio = Number.parseFloat(ratio)
if (isNaN(parsedRatio)) return
onSave(targetGroup.trim(), parsedRatio, editData?.targetGroup)
......@@ -1137,7 +1122,7 @@ function GroupOverrideDialog({
value={ratio}
onChange={(e) => {
const val = e.target.value
if (val === '' || !isNaN(parseFloat(val))) {
if (val === '' || !isNaN(Number.parseFloat(val))) {
setRatio(val)
}
}}
......
web/default/src/features/system-settings/models/model-ratio-table-columns.tsx
......@@ -16,12 +16,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { type ColumnDef } from '@tanstack/react-table'
import { Pencil, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { DataTableColumnHeader } from '@/components/data-table'
import type { ColumnDef } from '@tanstack/react-table'
import { DataTableColumnHeader } from '@/components/data-table/core/column-header'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { StatusBadge } from '@/components/status-badge'
import { Checkbox } from '@/components/ui/checkbox'
import {
getModeLabel,
getModeVariant,
......@@ -144,22 +144,13 @@ export function buildModelRatioColumns({
id: 'actions',
header: () => <div>{t('Actions')}</div>,
cell: ({ row }) => (
<div className='flex justify-end gap-2'>
<Button
variant='ghost'
size='sm'
onClick={() => onEdit(row.original)}
>
<Pencil />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() => onDelete(row.original.name)}
>
<Trash2 />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => onEdit(row.original)}
onDelete={() => onDelete(row.original.name)}
/>
),
enableHiding: false,
},
......
web/default/src/features/system-settings/models/model-ratio-visual-editor.tsx
......@@ -683,7 +683,6 @@ const ModelRatioVisualEditorComponent = forwardRef<
{
columnId: 'actions',
side: 'right',
className: 'w-24 min-w-24',
},
]}
colgroup={
......@@ -692,7 +691,7 @@ const ModelRatioVisualEditorComponent = forwardRef<
<col className='w-[300px]' />
<col className='w-[120px]' />
<col className='w-[300px]' />
<col className='w-24' />
<col className='w-auto' />
</colgroup>
}
renderRow={(row, { getCellClassName }) => (
......
web/default/src/features/system-settings/models/tool-price-settings.tsx
......@@ -289,7 +289,7 @@ export const ToolPriceSettings = memo(function ToolPriceSettings({
{
id: 'actions',
header: t('Actions'),
className: 'w-[80px] text-right',
className: 'text-right',
cellClassName: 'text-right',
cell: (row) => (
<Button
......
web/default/src/features/system-settings/request-limits/rate-limit-visual-editor.tsx
......@@ -17,11 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useState, useMemo } from 'react'
import { Pencil, Plus, Search, Trash2 } from 'lucide-react'
import { Plus, Search } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { StaticDataTable } from '@/components/data-table'
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
import { safeJsonParseWithValidation } from '../utils/json-parser'
import { isObjectRecord } from '../utils/json-validators'
import { RateLimitDialog, type RateLimitEntryData } from './rate-limit-dialog'
......@@ -182,22 +183,13 @@ export function RateLimitVisualEditor({
className: 'text-right',
cellClassName: 'text-right',
cell: (limit) => (
<div className='flex justify-end gap-2'>
<Button
variant='ghost'
size='sm'
onClick={() => handleEdit(limit)}
>
<Pencil className='h-4 w-4' />
</Button>
<Button
variant='ghost'
size='sm'
onClick={() => handleDelete(limit.groupName)}
>
<Trash2 className='h-4 w-4' />
</Button>
</div>
<StaticRowActions
editLabel={t('Edit')}
deleteLabel={t('Delete')}
menuLabel={t('Open menu')}
onEdit={() => handleEdit(limit)}
onDelete={() => handleDelete(limit.groupName)}
/>
),
},
]}
......
web/default/src/features/users/components/data-table-row-actions.tsx
......@@ -17,9 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
For commercial licensing, please contact support@quantumnous.com
*/
import { useState } from 'react'
import { type Row } from '@tanstack/react-table'
import type { Row } from '@tanstack/react-table'
import {
MoreHorizontal,
Pencil,
Trash2,
Power,
......@@ -35,13 +34,16 @@ import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { DataTableRowActionMenu } from '@/components/data-table/core/row-action-menu'
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { UserSubscriptionsDialog } from '@/features/subscriptions/components/dialogs/user-subscriptions-dialog'
import { manageUser, resetUserPasskey, resetUserTwoFA } from '../api'
......@@ -52,7 +54,7 @@ import {
isUserDeleted,
} from '../constants'
import { getUserActionMessage } from '../lib'
import { type User, type ManageUserAction } from '../types'
import type { User, ManageUserAction } from '../types'
import { UserBindingDialog } from './dialogs/user-binding-dialog'
import { useUsers } from './users-provider'
......@@ -90,7 +92,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
result.message || t('Failed to {{action}} user', { action })
)
}
} catch (_error) {
} catch {
toast.error(t(ERROR_MESSAGES.UNEXPECTED))
}
}
......@@ -104,7 +106,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
} else {
toast.error(result.message || t('Failed to reset Passkey'))
}
} catch (_error) {
} catch {
toast.error(t(ERROR_MESSAGES.UNEXPECTED))
} finally {
setResetPasskeyOpen(false)
......@@ -120,7 +122,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
} else {
toast.error(result.message || t('Failed to reset 2FA'))
}
} catch (_error) {
} catch {
toast.error(t(ERROR_MESSAGES.UNEXPECTED))
} finally {
setResetTwoFAOpen(false)
......@@ -136,29 +138,24 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
}
return (
<div className='-ml-2'>
<DropdownMenu>
<DropdownMenuTrigger
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
<TooltipTrigger
render={
<Button
variant='ghost'
className='data-popup-open:bg-muted flex h-8 w-8 p-0'
size='icon-sm'
onClick={handleEdit}
aria-label={t('Edit')}
/>
}
>
<MoreHorizontal className='h-4 w-4' />
<span className='sr-only'>{t('Open menu')}</span>
</DropdownMenuTrigger>
<DropdownMenuContent align='end' className='w-[180px]'>
<DropdownMenuItem onClick={handleEdit}>
{t('Edit')}
<DropdownMenuShortcut>
<Pencil size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<Pencil />
</TooltipTrigger>
<TooltipContent>{t('Edit')}</TooltipContent>
</Tooltip>
<DataTableRowActionMenu ariaLabel={t('Open menu')} contentClassName='w-48'>
{isDisabled ? (
<DropdownMenuItem onClick={() => handleManage('enable')}>
{t('Enable')}
......@@ -260,15 +257,17 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
<Trash2 size={16} />
</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</DataTableRowActionMenu>
<ConfirmDialog
open={resetPasskeyOpen}
onOpenChange={setResetPasskeyOpen}
title={t('Reset Passkey')}
desc={`Reset Passkey for ${user.username}? The user will need to register a new Passkey before using passwordless login.`}
confirmText='Reset Passkey'
desc={t(
'Reset Passkey for {{username}}? The user will need to register a new Passkey before using passwordless login.',
{ username: user.username }
)}
confirmText={t('Reset Passkey')}
handleConfirm={handleResetPasskey}
/>
......@@ -276,8 +275,11 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
open={resetTwoFAOpen}
onOpenChange={setResetTwoFAOpen}
title={t('Reset Two-Factor Authentication')}
desc={`Reset 2FA for ${user.username}? The user must set up 2FA again to continue using it.`}
confirmText='Reset 2FA'
desc={t(
'Reset 2FA for {{username}}? The user must set up 2FA again to continue using it.',
{ username: user.username }
)}
confirmText={t('Reset 2FA')}
handleConfirm={handleResetTwoFA}
/>
......
web/default/src/features/users/components/users-delete-dialog.tsx
......@@ -19,16 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { deleteUser } from '../api'
import { ERROR_MESSAGES } from '../constants'
import { getUserActionMessage } from '../lib'
......@@ -52,7 +43,7 @@ export function UsersDeleteDialog() {
} else {
toast.error(result.message || t(ERROR_MESSAGES.DELETE_FAILED))
}
} catch (_error) {
} catch {
toast.error(t(ERROR_MESSAGES.UNEXPECTED))
} finally {
setIsDeleting(false)
......@@ -60,32 +51,21 @@ export function UsersDeleteDialog() {
}
return (
<AlertDialog
<ConfirmDialog
open={open === 'delete'}
onOpenChange={(open) => !open && setOpen(null)}
>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
<AlertDialogDescription>
title={t('Are you sure?')}
desc={
<>
{t('This will permanently delete user')}{' '}
<span className='font-semibold'>{currentRow?.username}</span>
{t('. This action cannot be undone.')}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel disabled={isDeleting}>
{t('Cancel')}
</AlertDialogCancel>
<AlertDialogAction
onClick={handleDelete}
disabled={isDeleting}
className='bg-destructive text-destructive-foreground hover:bg-destructive/90'
>
{isDeleting ? 'Deleting...' : 'Delete'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
}
confirmText={isDeleting ? t('Deleting...') : t('Delete')}
destructive
isLoading={isDeleting}
handleConfirm={handleDelete}
/>
)
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment