Fix: Fixed an issue where knowledge base could not be shared #9634 (#9642)

### What problem does this PR solve?

Fix: Fixed an issue where knowledge base could not be shared #9634

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/home-card.tsx

@@ -1,6 +1,7 @@
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatDate } from '@/utils/date';
+import { ReactNode } from 'react';
 
 interface IProps {
   data: {
@@ -11,8 +12,9 @@ interface IProps {
   };
   onClick?: () => void;
   moreDropdown: React.ReactNode;
+  sharedBadge?: ReactNode;
 }
-export function HomeCard({ data, onClick, moreDropdown }: IProps) {
+export function HomeCard({ data, onClick, moreDropdown, sharedBadge }: IProps) {
   return (
     <Card
       className="bg-bg-card  border-colors-outline-neutral-standard"
@@ -41,10 +43,11 @@ export function HomeCard({ data, onClick, moreDropdown }: IProps) {
             <div className="whitespace-nowrap overflow-hidden text-ellipsis">
               {data.description}
             </div>
-            <div>
+            <div className="flex justify-between items-center">
               <p className="text-sm opacity-80">
                 {formatDate(data.update_time)}
               </p>
+              {sharedBadge}
             </div>
           </section>
         </div>

web/src/components/ragflow-form.tsx

@@ -5,6 +5,7 @@ import {
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
+import { cn } from '@/lib/utils';
 import { ReactNode, cloneElement, isValidElement } from 'react';
 import { ControllerRenderProps, useFormContext } from 'react-hook-form';
 
@@ -13,6 +14,7 @@ type RAGFlowFormItemProps = {
   label: ReactNode;
   tooltip?: ReactNode;
   children: ReactNode | ((field: ControllerRenderProps) => ReactNode);
+  horizontal?: boolean;
 };
 
 export function RAGFlowFormItem({
@@ -20,6 +22,7 @@ export function RAGFlowFormItem({
   label,
   tooltip,
   children,
+  horizontal = false,
 }: RAGFlowFormItemProps) {
   const form = useFormContext();
   return (
@@ -27,8 +30,14 @@ export function RAGFlowFormItem({
       control={form.control}
       name={name}
       render={({ field }) => (
-        <FormItem>
+        <FormItem
-          <FormLabel tooltip={tooltip}>{label}</FormLabel>
+          className={cn({
+            'flex items-center': horizontal,
+          })}
+        >
+          <FormLabel tooltip={tooltip} className={cn({ 'w-1/4': horizontal })}>
+            {label}
+          </FormLabel>
           <FormControl>
             {typeof children === 'function'
               ? children(field)

web/src/components/shared-badge.tsx

@@ -8,9 +8,5 @@ export function SharedBadge({ children }: PropsWithChildren) {
     return null;
   }
 
-  return (
+  return <span className="bg-bg-card rounded-sm px-1 text-xs">{children}</span>;
-    <span className="bg-text-secondary rounded-sm px-1 text-bg-base text-xs">
-      {children}
-    </span>
-  );
 }

web/src/constants/permission.ts

@@ -0,0 +1,4 @@
+export enum PermissionRole {
+  Me = 'me',
+  Team = 'team',
+}

web/src/pages/dataset/setting/general-form.tsx

@@ -1,6 +1,8 @@
 import { FormContainer } from '@/components/form-container';
+import { SelectWithSearch } from '@/components/originui/select-with-search';
+import { RAGFlowFormItem } from '@/components/ragflow-form';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Button } from '@/components/ui/button';
+import { Button, ButtonLoading } from '@/components/ui/button';
 import {
   FormControl,
   FormField,
@@ -9,9 +11,10 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { PermissionRole } from '@/constants/permission';
 import { useUpdateKnowledge } from '@/hooks/knowledge-hooks';
 import { transformFile2Base64 } from '@/utils/file-util';
-import { Loader2Icon, Pencil, Upload } from 'lucide-react';
+import { Pencil, Upload } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -33,6 +36,13 @@ export function GeneralForm() {
   const parser_id = defaultValues['parser_id'];
   const { id: kb_id } = useParams();
 
+  const teamOptions = useMemo(() => {
+    return Object.values(PermissionRole).map((x) => ({
+      label: t('knowledgeConfiguration.' + x),
+      value: x,
+    }));
+  }, [t]);
+
   // init avatar file if it exists in defaultValues
   useEffect(() => {
     if (!avatarFile) {
@@ -171,24 +181,35 @@ export function GeneralForm() {
             );
           }}
         />
+        <RAGFlowFormItem
+          name="permission"
+          label={t('knowledgeConfiguration.permissions')}
+          tooltip={t('knowledgeConfiguration.permissionsTip')}
+          horizontal
+        >
+          <SelectWithSearch
+            options={teamOptions}
+            triggerClassName="w-3/4"
+          ></SelectWithSearch>
+        </RAGFlowFormItem>
       </FormContainer>
       <div className="text-right pt-4 flex justify-end gap-3">
         <Button
           type="reset"
-          className="bg-transparent text-color-white hover:bg-transparent border-gray-500 border-[1px]"
+          variant={'outline'}
           onClick={() => {
             form.reset();
           }}
         >
           {t('knowledgeConfiguration.cancel')}
         </Button>
-        <Button
+        <ButtonLoading
           type="button"
-          disabled={submitLoading}
+          loading={submitLoading}
           onClick={() => {
             (async () => {
               let isValidate = await form.trigger('name');
-              const { name, description } = form.getValues();
+              const { name, description, permission } = form.getValues();
               const avatar = avatarBase64Str;
 
               if (isValidate) {
@@ -198,14 +219,14 @@ export function GeneralForm() {
                   name,
                   description,
                   avatar,
+                  permission,
                 });
               }
             })();
           }}
         >
-          {submitLoading && <Loader2Icon className="animate-spin" />}
           {t('knowledgeConfiguration.save')}
-        </Button>
+        </ButtonLoading>
       </div>
     </>
   );

web/src/pages/dataset/setting/index.tsx

@@ -6,6 +6,7 @@ import {
   TabsTrigger,
 } from '@/components/ui/tabs-underlined';
 import { DocumentParserType } from '@/constants/knowledge';
+import { PermissionRole } from '@/constants/permission';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
@@ -43,7 +44,7 @@ export default function DatasetSettings() {
     defaultValues: {
       name: '',
       parser_id: DocumentParserType.Naive,
-      permission: 'me',
+      permission: PermissionRole.Me,
       parser_config: {
         layout_recognize: DocumentType.DeepDOC,
         chunk_token_num: 512,

web/src/pages/datasets/dataset-card.tsx

@@ -1,5 +1,6 @@
 import { HomeCard } from '@/components/home-card';
 import { MoreButton } from '@/components/more-button';
+import { SharedBadge } from '@/components/shared-badge';
 import { Card, CardContent } from '@/components/ui/card';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { IKnowledge } from '@/interfaces/database/knowledge';
@@ -32,6 +33,7 @@ export function DatasetCard({
           <MoreButton></MoreButton>
         </DatasetDropdown>
       }
+      sharedBadge={<SharedBadge>{dataset.nickname}</SharedBadge>}
       onClick={navigateToDataset(dataset.id)}
     />
   );