balibabu commited on
Commit
551c783
·
1 Parent(s): 544e97f

Feat: Add LoadingButton #4368 (#4384)

Browse files

### What problem does this PR solve?

Feat: Add LoadingButton #4368

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/ui/loading-button.tsx ADDED
@@ -0,0 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // https://github.com/hsuanyi-chou/shadcn-ui-expansions/blob/main/components/ui/loading-button.tsx
2
+
3
+ import { cn } from '@/lib/utils';
4
+ import { Slot, Slottable } from '@radix-ui/react-slot';
5
+ import { cva, type VariantProps } from 'class-variance-authority';
6
+ import { Loader2 } from 'lucide-react';
7
+ import * as React from 'react';
8
+
9
+ const buttonVariants = cva(
10
+ 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
11
+ {
12
+ variants: {
13
+ variant: {
14
+ default: 'bg-primary text-primary-foreground hover:bg-primary/90',
15
+ destructive:
16
+ 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
17
+ outline:
18
+ 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
19
+ secondary:
20
+ 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
21
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
22
+ link: 'text-primary underline-offset-4 hover:underline',
23
+ },
24
+ size: {
25
+ default: 'h-10 px-4 py-2',
26
+ sm: 'h-9 rounded-md px-3',
27
+ lg: 'h-11 rounded-md px-8',
28
+ icon: 'h-10 w-10',
29
+ },
30
+ },
31
+ defaultVariants: {
32
+ variant: 'default',
33
+ size: 'default',
34
+ },
35
+ },
36
+ );
37
+
38
+ export interface ButtonProps
39
+ extends React.ButtonHTMLAttributes<HTMLButtonElement>,
40
+ VariantProps<typeof buttonVariants> {
41
+ asChild?: boolean;
42
+ loading?: boolean;
43
+ }
44
+
45
+ const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
46
+ (
47
+ {
48
+ className,
49
+ loading = false,
50
+ children,
51
+ disabled,
52
+ variant,
53
+ size,
54
+ asChild = false,
55
+ ...props
56
+ },
57
+ ref,
58
+ ) => {
59
+ const Comp = asChild ? Slot : 'button';
60
+ return (
61
+ <Comp
62
+ className={cn(buttonVariants({ variant, size, className }))}
63
+ ref={ref}
64
+ disabled={loading || disabled}
65
+ {...props}
66
+ >
67
+ {loading && <Loader2 className="mr-2 h-5 w-5 animate-spin" />}
68
+ <Slottable>{children}</Slottable>
69
+ </Comp>
70
+ );
71
+ },
72
+ );
73
+ LoadingButton.displayName = 'LoadingButton';
74
+
75
+ export { LoadingButton, buttonVariants };
web/src/hooks/knowledge-hooks.ts CHANGED
@@ -321,7 +321,7 @@ export const useRenameTag = () => {
321
  isPending: loading,
322
  mutateAsync,
323
  } = useMutation({
324
- mutationKey: ['deleteTag'],
325
  mutationFn: async (params: IRenameTag) => {
326
  const { data } = await renameTag(knowledgeBaseId, params);
327
  if (data.code === 0) {
@@ -337,4 +337,8 @@ export const useRenameTag = () => {
337
  return { data, loading, renameTag: mutateAsync };
338
  };
339
 
 
 
 
 
340
  //#endregion
 
321
  isPending: loading,
322
  mutateAsync,
323
  } = useMutation({
324
+ mutationKey: ['renameTag'],
325
  mutationFn: async (params: IRenameTag) => {
326
  const { data } = await renameTag(knowledgeBaseId, params);
327
  if (data.code === 0) {
 
337
  return { data, loading, renameTag: mutateAsync };
338
  };
339
 
340
+ export const useTagIsRenaming = () => {
341
+ return useIsMutating({ mutationKey: ['renameTag'] }) > 0;
342
+ };
343
+
344
  //#endregion
web/src/pages/add-knowledge/components/knowledge-setting/hooks.ts CHANGED
@@ -2,7 +2,6 @@ import { LlmModelType } from '@/constants/knowledge';
2
  import { useSetModalState } from '@/hooks/common-hooks';
3
  import {
4
  useFetchKnowledgeBaseConfiguration,
5
- useRenameTag,
6
  useUpdateKnowledge,
7
  } from '@/hooks/knowledge-hooks';
8
  import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
@@ -97,21 +96,6 @@ export const useRenameKnowledgeTag = () => {
97
  hideModal: hideTagRenameModal,
98
  showModal: showFileRenameModal,
99
  } = useSetModalState();
100
- const { renameTag, loading } = useRenameTag();
101
-
102
- const onTagRenameOk = useCallback(
103
- async (name: string) => {
104
- const ret = await renameTag({
105
- fromTag: tag,
106
- toTag: name,
107
- });
108
-
109
- if (ret === 0) {
110
- hideTagRenameModal();
111
- }
112
- },
113
- [renameTag, tag, hideTagRenameModal],
114
- );
115
 
116
  const handleShowTagRenameModal = useCallback(
117
  (record: string) => {
@@ -122,9 +106,7 @@ export const useRenameKnowledgeTag = () => {
122
  );
123
 
124
  return {
125
- renameLoading: loading,
126
  initialName: tag,
127
- onTagRenameOk,
128
  tagRenameVisible,
129
  hideTagRenameModal,
130
  showTagRenameModal: handleShowTagRenameModal,
 
2
  import { useSetModalState } from '@/hooks/common-hooks';
3
  import {
4
  useFetchKnowledgeBaseConfiguration,
 
5
  useUpdateKnowledge,
6
  } from '@/hooks/knowledge-hooks';
7
  import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks';
 
96
  hideModal: hideTagRenameModal,
97
  showModal: showFileRenameModal,
98
  } = useSetModalState();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
 
100
  const handleShowTagRenameModal = useCallback(
101
  (record: string) => {
 
106
  );
107
 
108
  return {
 
109
  initialName: tag,
 
110
  tagRenameVisible,
111
  hideTagRenameModal,
112
  showTagRenameModal: handleShowTagRenameModal,
web/src/pages/add-knowledge/components/knowledge-setting/tag-table/index.tsx CHANGED
@@ -74,7 +74,6 @@ export function TagTable() {
74
  showTagRenameModal,
75
  hideTagRenameModal,
76
  tagRenameVisible,
77
- onTagRenameOk,
78
  initialName,
79
  } = useRenameKnowledgeTag();
80
 
@@ -300,7 +299,6 @@ export function TagTable() {
300
  {tagRenameVisible && (
301
  <RenameDialog
302
  hideModal={hideTagRenameModal}
303
- onOk={onTagRenameOk}
304
  initialName={initialName}
305
  ></RenameDialog>
306
  )}
 
74
  showTagRenameModal,
75
  hideTagRenameModal,
76
  tagRenameVisible,
 
77
  initialName,
78
  } = useRenameKnowledgeTag();
79
 
 
299
  {tagRenameVisible && (
300
  <RenameDialog
301
  hideModal={hideTagRenameModal}
 
302
  initialName={initialName}
303
  ></RenameDialog>
304
  )}
web/src/pages/add-knowledge/components/knowledge-setting/tag-table/rename-dialog/index.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { Button } from '@/components/ui/button';
2
  import {
3
  Dialog,
4
  DialogContent,
@@ -6,6 +5,8 @@ import {
6
  DialogHeader,
7
  DialogTitle,
8
  } from '@/components/ui/dialog';
 
 
9
  import { IModalProps } from '@/interfaces/common';
10
  import { TagRenameId } from '@/pages/add-knowledge/constant';
11
  import { useTranslation } from 'react-i18next';
@@ -16,6 +17,7 @@ export function RenameDialog({
16
  initialName,
17
  }: IModalProps<any> & { initialName: string }) {
18
  const { t } = useTranslation();
 
19
 
20
  return (
21
  <Dialog open onOpenChange={hideModal}>
@@ -28,9 +30,9 @@ export function RenameDialog({
28
  hideModal={hideModal}
29
  ></RenameForm>
30
  <DialogFooter>
31
- <Button type="submit" form={TagRenameId}>
32
  {t('common.save')}
33
- </Button>
34
  </DialogFooter>
35
  </DialogContent>
36
  </Dialog>
 
 
1
  import {
2
  Dialog,
3
  DialogContent,
 
5
  DialogHeader,
6
  DialogTitle,
7
  } from '@/components/ui/dialog';
8
+ import { LoadingButton } from '@/components/ui/loading-button';
9
+ import { useTagIsRenaming } from '@/hooks/knowledge-hooks';
10
  import { IModalProps } from '@/interfaces/common';
11
  import { TagRenameId } from '@/pages/add-knowledge/constant';
12
  import { useTranslation } from 'react-i18next';
 
17
  initialName,
18
  }: IModalProps<any> & { initialName: string }) {
19
  const { t } = useTranslation();
20
+ const loading = useTagIsRenaming();
21
 
22
  return (
23
  <Dialog open onOpenChange={hideModal}>
 
30
  hideModal={hideModal}
31
  ></RenameForm>
32
  <DialogFooter>
33
+ <LoadingButton type="submit" form={TagRenameId} loading={loading}>
34
  {t('common.save')}
35
+ </LoadingButton>
36
  </DialogFooter>
37
  </DialogContent>
38
  </Dialog>