From 5dad15600c77dff1789e34109238d954f8482b3c Mon Sep 17 00:00:00 2001 From: balibabu Date: Fri, 3 Jan 2025 09:47:05 +0800 Subject: [PATCH] Feat: Add FileUploadDialog #3221 (#4327) (#4335) ### What problem does this PR solve? Feat: Add ConfirmDeleteDialog #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/package-lock.json | 86 +++++++++++ web/package.json | 1 + web/src/components/confirm-delete-dialog.tsx | 50 +++++++ web/src/components/ui/alert-dialog.tsx | 141 +++++++++++++++++++ web/src/components/ui/slider.tsx | 2 +- web/src/pages/datasets/index.tsx | 11 +- web/tailwind.config.js | 2 +- web/tailwind.css | 1 + 8 files changed, 288 insertions(+), 6 deletions(-) create mode 100644 web/src/components/confirm-delete-dialog.tsx create mode 100644 web/src/components/ui/alert-dialog.tsx diff --git a/web/package-lock.json b/web/package-lock.json index fe34f5cc4..e625542c3 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -13,6 +13,7 @@ "@hookform/resolvers": "^3.9.1", "@js-preview/excel": "^1.7.8", "@monaco-editor/react": "^4.6.0", + "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.2", @@ -4182,6 +4183,91 @@ "resolved": "https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.1.0.tgz", "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==" }, + "node_modules/@radix-ui/react-alert-dialog": { + "version": "1.1.4", + "resolved": "https://registry.npmmirror.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.4.tgz", + "integrity": "sha512-A6Kh23qZDLy3PSU4bh2UJZznOrUdHImIXqF8YtUa6CN73f8EOO9XlXSCd9IHyPvIquTaa/kwaSWzZTtUvgXVGw==", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-dialog": "1.1.4", + "@radix-ui/react-primitive": "2.0.1", + "@radix-ui/react-slot": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/primitive": { + "version": "1.1.1", + "resolved": "https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.1.1.tgz", + "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==" + }, + "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.1", + "resolved": "https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz", + "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-primitive": { + "version": "2.0.1", + "resolved": "https://registry.npmmirror.com/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz", + "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==", + "dependencies": { + "@radix-ui/react-slot": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-slot": { + "version": "1.1.1", + "resolved": "https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.1.1.tgz", + "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-arrow": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz", diff --git a/web/package.json b/web/package.json index c5a23a75e..4593b8455 100644 --- a/web/package.json +++ b/web/package.json @@ -24,6 +24,7 @@ "@hookform/resolvers": "^3.9.1", "@js-preview/excel": "^1.7.8", "@monaco-editor/react": "^4.6.0", + "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.2", diff --git a/web/src/components/confirm-delete-dialog.tsx b/web/src/components/confirm-delete-dialog.tsx new file mode 100644 index 000000000..887a1222c --- /dev/null +++ b/web/src/components/confirm-delete-dialog.tsx @@ -0,0 +1,50 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from '@/components/ui/alert-dialog'; +import { Trash2 } from 'lucide-react'; +import { PropsWithChildren } from 'react'; +import { useTranslation } from 'react-i18next'; + +interface IProps { + title?: string; + onOk?: (...args: any[]) => any; + onCancel?: (...args: any[]) => any; +} + +export function ConfirmDeleteDialog({ + children, + title, +}: IProps & PropsWithChildren) { + const { t } = useTranslation(); + + return ( + + {children} + + + + {title ?? t('common.deleteModalTitle')} + + {/* + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + */} + + + {t('common.cancel')} + + + {t('common.ok')} + + + + + ); +} diff --git a/web/src/components/ui/alert-dialog.tsx b/web/src/components/ui/alert-dialog.tsx new file mode 100644 index 000000000..caa6025bb --- /dev/null +++ b/web/src/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +'use client'; + +import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'; +import * as React from 'react'; + +import { buttonVariants } from '@/components/ui/button'; +import { cn } from '@/lib/utils'; + +const AlertDialog = AlertDialogPrimitive.Root; + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger; + +const AlertDialogPortal = AlertDialogPrimitive.Portal; + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName; + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)); +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName; + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogHeader.displayName = 'AlertDialogHeader'; + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+); +AlertDialogFooter.displayName = 'AlertDialogFooter'; + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName; + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName; + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName; + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName; + +export { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogOverlay, + AlertDialogPortal, + AlertDialogTitle, + AlertDialogTrigger, +}; diff --git a/web/src/components/ui/slider.tsx b/web/src/components/ui/slider.tsx index f025182d9..6fd1a8d6b 100644 --- a/web/src/components/ui/slider.tsx +++ b/web/src/components/ui/slider.tsx @@ -17,7 +17,7 @@ const Slider = React.forwardRef< )} {...props} > - + diff --git a/web/src/pages/datasets/index.tsx b/web/src/pages/datasets/index.tsx index a82958845..54503a1cf 100644 --- a/web/src/pages/datasets/index.tsx +++ b/web/src/pages/datasets/index.tsx @@ -1,8 +1,9 @@ +import { ConfirmDeleteDialog } from '@/components/confirm-delete-dialog'; import ListFilterBar from '@/components/list-filter-bar'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks'; -import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'; +import { ChevronRight, Plus, Trash2 } from 'lucide-react'; import { DatasetCreatingDialog } from './dataset-creating-dialog'; import { useSaveKnowledge } from './hooks'; @@ -109,9 +110,11 @@ export default function Datasets() { className="w-[70px] h-[70px] rounded-xl bg-cover" style={{ backgroundImage: `url(${dataset.image})` }} /> - + + +
diff --git a/web/tailwind.config.js b/web/tailwind.config.js index ca5dfe037..a819ad1ba 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -110,7 +110,7 @@ module.exports = { }, 'colors-background-functional-solid-danger': { DEFAULT: 'var(--colors-background-functional-solid-danger)', - foreground: 'var(--background-inverse-standard-foreground)', + foreground: 'var(--colors-text-inverse-strong)', }, 'colors-background-functional-solid-notice': { DEFAULT: 'var(--colors-background-functional-solid-notice)', diff --git a/web/tailwind.css b/web/tailwind.css index 7e91eeacf..aff02989f 100644 --- a/web/tailwind.css +++ b/web/tailwind.css @@ -41,6 +41,7 @@ --colors-background-inverse-strong: rgba(11, 10, 18, 0.8); --colors-background-inverse-weak: rgba(17, 16, 23, 0.1); --colors-background-neutral-standard: white; + --colors-background-functional-solid-danger: rgba(222, 17, 53, 1); --button-blue-text: rgb(22, 119, 255);