+ const content = (
+ <>
{leftIcon}
-
+
{name}
{isMe && (
@@ -40,10 +36,28 @@ const MemberItem = ({
{email}
{isSelected && (
-
+
)}
-
+
+ )
+
+ if (isMe) {
+ return
{content}
+ }
+
+ return (
+
)
}
-export default React.memo(MemberItem)
+export default MemberItem
diff --git a/web/app/components/datasets/settings/permission-selector/permission-item.tsx b/web/app/components/datasets/settings/permission-selector/permission-item.tsx
index 0cea3a79707..9c017b30257 100644
--- a/web/app/components/datasets/settings/permission-selector/permission-item.tsx
+++ b/web/app/components/datasets/settings/permission-selector/permission-item.tsx
@@ -1,24 +1,49 @@
-import { RiCheckLine } from '@remixicon/react'
-import * as React from 'react'
+import type { ReactNode } from 'react'
+import type { DatasetPermission } from '@/models/datasets'
+import { PopoverClose } from '@langgenius/dify-ui/popover'
+import { RadioItem } from '@langgenius/dify-ui/radio'
type PermissionItemProps = {
- leftIcon: React.ReactNode
+ value: DatasetPermission
+ leftIcon: ReactNode
text: string
- onClick: () => void
isSelected: boolean
+ closeOnSelect?: boolean
}
-const PermissionItem = ({ leftIcon, text, onClick, isSelected }: PermissionItemProps) => {
- return (
-
+const className =
+ 'flex w-full touch-manipulation cursor-pointer items-center gap-x-1 rounded-lg border-none bg-transparent px-2 py-1 text-left outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid'
+
+const PermissionItem = ({
+ value,
+ leftIcon,
+ text,
+ isSelected,
+ closeOnSelect = false,
+}: PermissionItemProps) => {
+ const content = (
+ <>
{leftIcon}
{text}
- {isSelected &&
}
-
+ {isSelected && (
+
+ )}
+
+ )
+
+ if (closeOnSelect) {
+ return (
+
value={value} />} className={className}>
+ {content}
+
+ )
+ }
+
+ return (
+
value={value} className={className}>
+ {content}
+
)
}
-export default React.memo(PermissionItem)
+export default PermissionItem
diff --git a/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx b/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
index c57970689a7..42cbe046662 100644
--- a/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/__tests__/api-key-modal.spec.tsx
@@ -2,7 +2,7 @@ import type { ApiKeyModalProps } from '../api-key-modal'
import type { FormSchema } from '@/app/components/base/form/types'
import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
-import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { fireEvent, screen, waitFor, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -97,10 +97,6 @@ vi.mock('@/app/components/base/form/types', () => ({
FormTypeEnum: { textInput: 'text-input' },
}))
-vi.mock('@/service/use-common', () => ({
- useMembers: () => ({ data: { accounts: [] } }),
-}))
-
const basePayload = {
category: AuthCategory.tool,
provider: 'test-provider',
@@ -298,11 +294,50 @@ describe('ApiKeyModal', () => {
expect.objectContaining({
type: 'api-key',
name: 'My Key',
+ visibility: 'all_team_members',
}),
)
})
})
+ it('selects credential visibility through the native trigger', async () => {
+ const user = userEvent.setup()
+ render()
+
+ const trigger = screen.getByRole('button', { name: /permissionsAllMember/ })
+ expect(trigger).toHaveAttribute('type', 'button')
+ await user.click(trigger)
+ const permissionDialog = screen.getByRole('dialog', { name: /auth.whoCanUse/ })
+ const permissionGroup = within(permissionDialog).getByRole('radiogroup', {
+ name: /auth.whoCanUse/,
+ })
+ const allMembers = within(permissionGroup).getByRole('radio', {
+ name: /permissionsAllMember/,
+ })
+ const onlyMe = within(permissionGroup).getByRole('radio', { name: /permissionsOnlyMe/ })
+ expect(allMembers).toBeChecked()
+
+ allMembers.focus()
+ await user.keyboard('{ArrowUp}')
+ expect(onlyMe).toBeChecked()
+ expect(permissionDialog).toBeInTheDocument()
+
+ await user.click(onlyMe)
+ await user.click(screen.getByRole('button', { name: 'common.operation.save' }))
+
+ await waitFor(() => {
+ expect(mockAddPluginCredential).toHaveBeenCalledWith(
+ expect.objectContaining({ visibility: 'only_me' }),
+ )
+ })
+ })
+
+ it('disables the credential visibility trigger with the modal', () => {
+ render()
+
+ expect(screen.getByRole('button', { name: /permissionsAllMember/ })).toBeDisabled()
+ })
+
it('should use empty credential name when authorization name is blank in add mode', async () => {
mockFormValues = { isCheckValidated: true, values: { api_key: 'sk-123' } }
diff --git a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
index 6b2857a5147..8350da2f88a 100644
--- a/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
+++ b/web/app/components/plugins/plugin-auth/authorize/api-key-modal.tsx
@@ -1,4 +1,5 @@
import type { PluginPayload } from '../types'
+import type { CredentialPermission } from './permission-selector'
import type { FormRefObject, FormSchema } from '@/app/components/base/form/types'
import { Button } from '@langgenius/dify-ui/button'
import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
@@ -9,9 +10,7 @@ import { EncryptedBottom } from '@/app/components/base/encrypted-bottom'
import AuthForm from '@/app/components/base/form/form-scenarios/auth'
import { FormTypeEnum } from '@/app/components/base/form/types'
import Loading from '@/app/components/base/loading'
-import PermissionSelector from '@/app/components/base/permission-selector'
import { PermissionLevel } from '@/models/permission'
-import { useMembers } from '@/service/use-common'
import { ReadmeEntrance } from '../../readme-panel/entrance'
import {
useAddPluginCredentialHook,
@@ -19,6 +18,7 @@ import {
useUpdatePluginCredentialHook,
} from '../hooks/use-credential'
import { CredentialTypeEnum } from '../types'
+import PermissionSelector from './permission-selector'
export type ApiKeyModalProps = {
pluginPayload: PluginPayload
@@ -53,15 +53,11 @@ const ApiKeyModal = ({
pluginPayload,
CredentialTypeEnum.API_KEY,
)
- const [permission, setPermission] = useState(
- (editValues?.__visibility__ as PermissionLevel) ?? PermissionLevel.allTeamMembers,
+ const [permission, setPermission] = useState(
+ editValues?.__visibility__ === PermissionLevel.onlyMe
+ ? PermissionLevel.onlyMe
+ : PermissionLevel.allTeamMembers,
)
- const [selectedMemberIDs, setSelectedMemberIDs] = useState(
- (editValues?.__partial_member_list__ as string[]) ?? [],
- )
- // Only need member list when creating (the permission selector is hidden on edit).
- const { data: membersData } = useMembers()
- const memberList = membersData?.accounts ?? []
const mergedData = useMemo(() => {
if (formSchemasFromProps?.length) return formSchemasFromProps
@@ -115,17 +111,11 @@ const ApiKeyModal = ({
name: __name__ || '',
})
} else {
- const permissionPayload = {
- visibility: permission,
- ...(permission === PermissionLevel.partialMembers
- ? { partial_member_list: selectedMemberIDs.map((id) => ({ user_id: id })) }
- : {}),
- }
await addPluginCredential({
credentials: restValues,
type: CredentialTypeEnum.API_KEY,
name: __name__ || '',
- ...permissionPayload,
+ visibility: permission,
})
}
toast.success(t(($) => $['api.actionSuccess'], { ns: 'common' }))
@@ -146,7 +136,6 @@ const ApiKeyModal = ({
editValues,
handleSetDoingAction,
permission,
- selectedMemberIDs,
])
const isDisabled = disabled || isLoading || doingAction
@@ -199,11 +188,7 @@ const ApiKeyModal = ({
setPermission(v)}
- onMemberSelect={setSelectedMemberIDs}
- hidePartialMembers
+ onChange={setPermission}
/>
)}
diff --git a/web/app/components/plugins/plugin-auth/authorize/permission-selector.tsx b/web/app/components/plugins/plugin-auth/authorize/permission-selector.tsx
new file mode 100644
index 00000000000..9292ebad2e0
--- /dev/null
+++ b/web/app/components/plugins/plugin-auth/authorize/permission-selector.tsx
@@ -0,0 +1,115 @@
+import { Avatar } from '@langgenius/dify-ui/avatar'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+ Popover,
+ PopoverClose,
+ PopoverContent,
+ PopoverTitle,
+ PopoverTrigger,
+} from '@langgenius/dify-ui/popover'
+import { RadioGroup, RadioItem } from '@langgenius/dify-ui/radio'
+import { useAtomValue } from 'jotai'
+import { useTranslation } from 'react-i18next'
+import { userProfileAtom } from '@/context/account-state'
+import { PermissionLevel } from '@/models/permission'
+
+export type CredentialPermission =
+ | typeof PermissionLevel.onlyMe
+ | typeof PermissionLevel.allTeamMembers
+
+type PermissionSelectorProps = {
+ disabled?: boolean
+ permission: CredentialPermission
+ onChange: (permission: CredentialPermission) => void
+}
+
+const optionClassName =
+ 'flex w-full touch-manipulation cursor-pointer items-center gap-x-1 rounded-lg border-none bg-transparent px-2 py-1 text-left outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid'
+
+const PermissionSelector = ({ disabled, permission, onChange }: PermissionSelectorProps) => {
+ const { t } = useTranslation()
+ const userProfile = useAtomValue(userProfileAtom)
+ const isOnlyMe = permission === PermissionLevel.onlyMe
+ const isAllTeamMembers = permission === PermissionLevel.allTeamMembers
+ const permissionLabel = t(($) => $['auth.whoCanUse'], { ns: 'plugin' })
+
+ return (
+
+
+ {isOnlyMe && (
+ <>
+
+
+ {t(($) => $['form.permissionsOnlyMe'], { ns: 'datasetSettings' })}
+
+
+ )}
+ {isAllTeamMembers && (
+ <>
+
+
+
+
+ {t(($) => $['form.permissionsAllMember'], { ns: 'datasetSettings' })}
+
+
+ )}
+
+
+
+ {permissionLabel}
+
+ value={permission}
+ onValueChange={onChange}
+ aria-label={permissionLabel}
+ className="flex-col items-stretch gap-0 p-1"
+ >
+ value={PermissionLevel.onlyMe} />}
+ className={optionClassName}
+ >
+
+
+ {t(($) => $['form.permissionsOnlyMe'], { ns: 'datasetSettings' })}
+
+ {isOnlyMe && (
+
+ )}
+
+ value={PermissionLevel.allTeamMembers} />}
+ className={optionClassName}
+ >
+
+
+
+
+ {t(($) => $['form.permissionsAllMember'], { ns: 'datasetSettings' })}
+
+ {isAllTeamMembers && (
+
+ )}
+
+
+
+
+ )
+}
+
+export default PermissionSelector