fix: add dataset edit permissions (#13223)

web/app/components/app/configuration/dataset-config/card-item/item.tsx

@@ -23,12 +23,14 @@ type ItemProps = {
   onRemove: (id: string) => void
   readonly?: boolean
   onSave: (newDataset: DataSet) => void
+  editable?: boolean
 }
 
 const Item: FC<ItemProps> = ({
   config,
   onSave,
   onRemove,
+  editable = true,
 }) => {
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
@@ -68,19 +70,21 @@ const Item: FC<ItemProps> = ({
         <div className='flex items-center h-[18px]'>
           <div className='grow text-[13px] font-medium text-gray-800 truncate' title={config.name}>{config.name}</div>
           {config.provider === 'external'
-            ? <Badge text={t('dataset.externalTag')}></Badge>
+            ? <Badge text={t('dataset.externalTag') as string} />
             : <Badge
               text={formatIndexingTechniqueAndMethod(config.indexing_technique, config.retrieval_model_dict?.search_method)}
             />}
         </div>
       </div>
       <div className='hidden rounded-lg group-hover:flex items-center justify-end absolute right-0 top-0 bottom-0 pr-2 w-[124px] bg-gradient-to-r from-white/50 to-white to-50%'>
-        <div
-          className='flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
-          onClick={() => setShowSettingsModal(true)}
-        >
-          <RiEditLine className='w-4 h-4 text-gray-500' />
-        </div>
+        {
+          editable && <div
+            className='flex items-center justify-center mr-1 w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
+            onClick={() => setShowSettingsModal(true)}
+          >
+            <RiEditLine className='w-4 h-4 text-gray-500' />
+          </div>
+        }
         <div
           className='group/action flex items-center justify-center w-6 h-6 hover:bg-[#FEE4E2] rounded-md cursor-pointer'
           onClick={() => onRemove(config.id)}

web/app/components/app/configuration/dataset-config/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import produce from 'immer'
@@ -19,6 +19,8 @@ import {
 } from '@/app/components/workflow/nodes/knowledge-retrieval/utils'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useSelector as useAppContextSelector } from '@/context/app-context'
+import { hasEditPermissionForDataset } from '@/utils/permission'
 
 const Icon = (
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -29,6 +31,7 @@ const Icon = (
 
 const DatasetConfig: FC = () => {
   const { t } = useTranslation()
+  const userProfile = useAppContextSelector(s => s.userProfile)
   const {
     mode,
     dataSets: dataSet,
@@ -105,6 +108,20 @@ const DatasetConfig: FC = () => {
     setModelConfig(newModelConfig)
   }
 
+  const formattedDataset = useMemo(() => {
+    return dataSet.map((item) => {
+      const datasetConfig = {
+        createdBy: item.created_by,
+        partialMemberList: item.partial_member_list || [],
+        permission: item.permission,
+      }
+      return {
+        ...item,
+        editable: hasEditPermissionForDataset(userProfile?.id || '', datasetConfig),
+      }
+    })
+  }, [dataSet, userProfile?.id])
+
   return (
     <FeaturePanel
       className='mt-2'
@@ -122,12 +139,13 @@ const DatasetConfig: FC = () => {
       {hasData
         ? (
           <div className='flex flex-wrap mt-1 px-3 pb-3 justify-between'>
-            {dataSet.map(item => (
+            {formattedDataset.map(item => (
               <CardItem
                 key={item.id}
                 config={item}
                 onRemove={onRemove}
                 onSave={handleSave}
+                editable={item.editable}
               />
             ))}
           </div>

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

@@ -12,7 +12,7 @@ import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-import { type DataSet } from '@/models/datasets'
+import { type DataSet, DatasetPermission } from '@/models/datasets'
 import { useToastContext } from '@/app/components/base/toast'
 import { updateDatasetSetting } from '@/service/datasets'
 import { useAppContext } from '@/context/app-context'
@@ -134,7 +134,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
           }),
         },
       } as any
-      if (permission === 'partial_members') {
+      if (permission === DatasetPermission.partialMembers) {
         requestParams.body.partial_member_list = selectedMemberIDs.map((id) => {
           return {
             user_id: id,

web/app/components/datasets/settings/form/index.tsx

@@ -17,7 +17,7 @@ import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import { updateDatasetSetting } from '@/service/datasets'
-import { type DataSetListResponse } from '@/models/datasets'
+import { type DataSetListResponse, DatasetPermission } from '@/models/datasets'
 import DatasetDetailContext from '@/context/dataset-detail'
 import { type RetrievalConfig } from '@/types/app'
 import { useAppContext } from '@/context/app-context'
@@ -145,7 +145,7 @@ const Form = () => {
           }),
         },
       } as any
-      if (permission === 'partial_members') {
+      if (permission === DatasetPermission.partialMembers) {
         requestParams.body.partial_member_list = selectedMemberIDs.map((id) => {
           return {
             user_id: id,

web/app/components/datasets/settings/permission-selector/index.tsx

@@ -12,7 +12,7 @@ import Avatar from '@/app/components/base/avatar'
 import Input from '@/app/components/base/input'
 import { Check } from '@/app/components/base/icons/src/vender/line/general'
 import { Users01, UsersPlus } from '@/app/components/base/icons/src/vender/solid/users'
-import type { DatasetPermission } from '@/models/datasets'
+import { DatasetPermission } from '@/models/datasets'
 import { useAppContext } from '@/context/app-context'
 import type { Member } from '@/models/common'
 export type RoleSelectorProps = {
@@ -60,6 +60,10 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
     return memberList.filter(member => (member.name.includes(searchKeywords) || member.email.includes(searchKeywords)) && member.id !== userProfile.id && ['owner', 'admin', 'editor', 'dataset_operator'].includes(member.role))
   }, [memberList, searchKeywords, userProfile])
 
+  const isOnlyMe = permission === DatasetPermission.onlyMe
+  const isAllTeamMembers = permission === DatasetPermission.allTeamMembers
+  const isPartialMembers = permission === DatasetPermission.partialMembers
+
   return (
     <PortalToFollowElem
       open={open}
@@ -72,14 +76,14 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
           onClick={() => !disabled && setOpen(v => !v)}
           className='block'
         >
-          {permission === 'only_me' && (
+          {isOnlyMe && (
             <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200', disabled && 'hover:!bg-gray-100 !cursor-default')}>
               <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0 mr-2' size={24} />
               <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
               {!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />}
             </div>
           )}
-          {permission === 'all_team_members' && (
+          {isAllTeamMembers && (
             <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
               <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
                 <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
@@ -88,7 +92,7 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
               {!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />}
             </div>
           )}
-          {permission === 'partial_members' && (
+          {isPartialMembers && (
             <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
               <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
                 <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
@@ -102,41 +106,41 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
           <div className='relative w-[480px] rounded-lg border-[0.5px] bg-white shadow-lg'>
             <div className='p-1'>
               <div className='pl-3 pr-2 py-1 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
-                onChange('only_me')
+                onChange(DatasetPermission.onlyMe)
                 setOpen(false)
               }}>
                 <div className='flex items-center gap-2'>
                   <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0 mr-2' size={24} />
                   <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
-                  {permission === 'only_me' && <Check className='w-4 h-4 text-primary-600' />}
+                  {isOnlyMe && <Check className='w-4 h-4 text-primary-600' />}
                 </div>
               </div>
               <div className='pl-3 pr-2 py-1 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
-                onChange('all_team_members')
+                onChange(DatasetPermission.allTeamMembers)
                 setOpen(false)
               }}>
                 <div className='flex items-center gap-2'>
                   <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
                     <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
                   </div>
                   <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsAllMember')}</div>
-                  {permission === 'all_team_members' && <Check className='w-4 h-4 text-primary-600' />}
+                  {isAllTeamMembers && <Check className='w-4 h-4 text-primary-600' />}
                 </div>
               </div>
               <div className='pl-3 pr-2 py-1 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
-                onChange('partial_members')
+                onChange(DatasetPermission.partialMembers)
                 onMemberSelect([userProfile.id])
               }}>
                 <div className='flex items-center gap-2'>
-                  <div className={cn('mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#FFF6ED]', permission === 'partial_members' && '!bg-[#EEF4FF]')}>
-                    <UsersPlus className={cn('w-3.5 h-3.5 text-[#FB6514]', permission === 'partial_members' && '!text-[#444CE7]')} />
+                  <div className={cn('mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#FFF6ED]', isPartialMembers && '!bg-[#EEF4FF]')}>
+                    <UsersPlus className={cn('w-3.5 h-3.5 text-[#FB6514]', isPartialMembers && '!text-[#444CE7]')} />
                   </div>
                   <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsInvitedMembers')}</div>
-                  {permission === 'partial_members' && <Check className='w-4 h-4 text-primary-600' />}
+                  {isPartialMembers && <Check className='w-4 h-4 text-primary-600' />}
                 </div>
               </div>
             </div>
-            {permission === 'partial_members' && (
+            {isPartialMembers && (
               <div className='max-h-[360px] border-t-[1px] border-gray-100 p-1 overflow-y-auto'>
                 <div className='sticky left-0 top-0 p-2 pb-1 bg-white'>
                   <Input

web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx

@@ -23,13 +23,15 @@ type Props = {
   onRemove: () => void
   onChange: (dataSet: DataSet) => void
   readonly?: boolean
+  editable?: boolean
 }
 
 const DatasetItem: FC<Props> = ({
   payload,
   onRemove,
   onChange,
   readonly,
+  editable = true,
 }) => {
   const media = useBreakpoints()
   const { t } = useTranslation()
@@ -75,14 +77,16 @@ const DatasetItem: FC<Props> = ({
       </div>
       {!readonly && (
         <div className='hidden group-hover/dataset-item:flex shrink-0 ml-2  items-center space-x-1'>
-          <ActionButton
-            onClick={(e) => {
-              e.stopPropagation()
-              showSettingsModal()
-            }}
-          >
-            <RiEditLine className='w-4 h-4 flex-shrink-0 text-text-tertiary' />
-          </ActionButton>
+          {
+            editable && <ActionButton
+              onClick={(e) => {
+                e.stopPropagation()
+                showSettingsModal()
+              }}
+            >
+              <RiEditLine className='w-4 h-4 flex-shrink-0 text-text-tertiary' />
+            </ActionButton>
+          }
           <ActionButton
             onClick={handleRemove}
             state={ActionButtonState.Destructive}
@@ -102,7 +106,7 @@ const DatasetItem: FC<Props> = ({
       {
         payload.provider === 'external' && <Badge
           className='group-hover/dataset-item:hidden shrink-0'
-          text={t('dataset.externalTag')}
+          text={t('dataset.externalTag') as string}
         />
       }