-
-
{environmentName(env)}
-
-
+export function EnvironmentRow({ env }: EnvironmentRowProps) {
+ return (
+
+
+ {environmentName(env)}
+
+
+
+
{env.type ?? 'env'}
-
{env.type ?? 'env'}
-
-)
+ )
+}
diff --git a/web/features/deployments/components/rollback-modal.tsx b/web/features/deployments/components/rollback-modal.tsx
index baa9bf3289..5db7808ed7 100644
--- a/web/features/deployments/components/rollback-modal.tsx
+++ b/web/features/deployments/components/rollback-modal.tsx
@@ -1,5 +1,4 @@
'use client'
-import type { FC } from 'react'
import {
AlertDialog,
AlertDialogActions,
@@ -26,7 +25,12 @@ import {
toAppInfoFromOverview,
} from '../utils'
-const InfoRow: FC<{ label: string, value: string }> = ({ label, value }) => {
+type InfoRowProps = {
+ label: string
+ value: string
+}
+
+function InfoRow({ label, value }: InfoRowProps) {
return (
{label}
@@ -35,7 +39,7 @@ const InfoRow: FC<{ label: string, value: string }> = ({ label, value }) => {
)
}
-const RollbackModal: FC = () => {
+export function RollbackModal() {
const { t } = useTranslation('deployments')
const modal = useDeploymentsStore(state => state.rollbackModal)
const closeRollbackModal = useDeploymentsStore(state => state.closeRollbackModal)
@@ -146,5 +150,3 @@ const RollbackModal: FC = () => {
)
}
-
-export default RollbackModal
diff --git a/web/features/deployments/components/status-badge.tsx b/web/features/deployments/components/status-badge.tsx
index 87ffb2bdfe..7d019f8661 100644
--- a/web/features/deployments/components/status-badge.tsx
+++ b/web/features/deployments/components/status-badge.tsx
@@ -1,5 +1,4 @@
'use client'
-import type { FC } from 'react'
import type { DeployStatus, EnvironmentHealth, EnvironmentMode } from '../types'
import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from 'react-i18next'
@@ -23,7 +22,7 @@ const statusKey = {
const baseBadge = 'inline-flex items-center gap-1 rounded-md border px-2 py-0.5 system-xs-medium whitespace-nowrap'
-export const StatusBadge: FC
= ({ status, className }) => {
+export function StatusBadge({ status, className }: StatusBadgeProps) {
const { t } = useTranslation('deployments')
return (
@@ -40,7 +39,7 @@ type ModeBadgeProps = {
className?: string
}
-export const ModeBadge: FC = ({ mode, className }) => {
+export function ModeBadge({ mode, className }: ModeBadgeProps) {
const { t } = useTranslation('deployments')
const style = mode === 'shared'
? 'border-util-colors-green-green-200 bg-util-colors-green-green-50 text-util-colors-green-green-700'
@@ -57,7 +56,7 @@ type HealthBadgeProps = {
className?: string
}
-export const HealthBadge: FC = ({ health, className }) => {
+export function HealthBadge({ health, className }: HealthBadgeProps) {
const { t } = useTranslation('deployments')
const style = health === 'ready'
? 'border-util-colors-green-green-200 bg-util-colors-green-green-50 text-util-colors-green-green-700'
diff --git a/web/features/deployments/detail/access-tab.tsx b/web/features/deployments/detail/access-tab.tsx
index 80216a6029..d1e7f0aeb1 100644
--- a/web/features/deployments/detail/access-tab.tsx
+++ b/web/features/deployments/detail/access-tab.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import type {
AccessPermission,
AccessSubject,
@@ -31,7 +30,7 @@ type AccessTabProps = {
instanceId: string
}
-const AccessTab: FC = ({ instanceId: appId }) => {
+export function AccessTab({ instanceId: appId }: AccessTabProps) {
const appInput = { params: { appInstanceId: appId } }
const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({
input: appInput,
@@ -171,5 +170,3 @@ const AccessTab: FC = ({ instanceId: appId }) => {
)
}
-
-export default AccessTab
diff --git a/web/features/deployments/detail/access-tab/api-keys.tsx b/web/features/deployments/detail/access-tab/api-keys.tsx
index ce6c2d3f08..0097a50d38 100644
--- a/web/features/deployments/detail/access-tab/api-keys.tsx
+++ b/web/features/deployments/detail/access-tab/api-keys.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import type { ConsoleEnvironmentSummary, DeveloperAPIKeySummary } from '@/features/deployments/types'
import { cn } from '@langgenius/dify-ui/cn'
import {
@@ -20,7 +19,7 @@ type ApiKeyRowProps = {
onRevoke: () => void
}
-export const ApiKeyRow: FC
= ({ apiKey, onCopy, onRevoke }) => {
+export function ApiKeyRow({ apiKey, onCopy, onRevoke }: ApiKeyRowProps) {
const { t } = useTranslation('deployments')
const [copied, setCopied] = useState(false)
const displayValue = apiKey.maskedKey || apiKey.maskedPrefix || apiKey.id || '—'
@@ -80,7 +79,7 @@ type ApiKeyGenerateMenuProps = {
onGenerate: (environmentId: string) => void
}
-export const ApiKeyGenerateMenu: FC = ({ environments, onGenerate }) => {
+export function ApiKeyGenerateMenu({ environments, onGenerate }: ApiKeyGenerateMenuProps) {
const { t } = useTranslation('deployments')
const [open, setOpen] = useState(false)
const selectableEnvironments = environments.filter(env => env.id)
diff --git a/web/features/deployments/detail/access-tab/channels-section.tsx b/web/features/deployments/detail/access-tab/channels-section.tsx
index b09227385b..deb789ca8a 100644
--- a/web/features/deployments/detail/access-tab/channels-section.tsx
+++ b/web/features/deployments/detail/access-tab/channels-section.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import type { WebAppAccessRow } from '@/features/deployments/types'
import { Switch } from '@langgenius/dify-ui/switch'
import { useTranslation } from 'react-i18next'
@@ -15,13 +14,13 @@ type AccessChannelsSectionProps = {
onToggle: (enabled: boolean) => void
}
-export const AccessChannelsSection: FC = ({
+export function AccessChannelsSection({
runEnabled,
webappRows,
cliDomain,
cliDocsUrl,
onToggle,
-}) => {
+}: AccessChannelsSectionProps) {
const { t } = useTranslation('deployments')
return (
diff --git a/web/features/deployments/detail/access-tab/common.tsx b/web/features/deployments/detail/access-tab/common.tsx
index ace17dc9d2..eaf60b44bd 100644
--- a/web/features/deployments/detail/access-tab/common.tsx
+++ b/web/features/deployments/detail/access-tab/common.tsx
@@ -1,6 +1,6 @@
'use client'
-import type { FC, ReactNode } from 'react'
+import type { ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { toast } from '@langgenius/dify-ui/toast'
import { useState } from 'react'
@@ -13,20 +13,22 @@ type SectionProps = {
children: ReactNode
}
-export const Section: FC = ({ title, description, action, children }) => (
-
-
-
-
{title}
- {description && (
-
{description}
- )}
+export function Section({ title, description, action, children }: SectionProps) {
+ return (
+
+
+
+
{title}
+ {description && (
+
{description}
+ )}
+
+ {action}
- {action}
+ {children}
- {children}
-
-)
+ )
+}
type CopyPillProps = {
label: string
@@ -35,7 +37,7 @@ type CopyPillProps = {
className?: string
}
-export const CopyPill: FC
= ({ label, value, prefix, className }) => {
+export function CopyPill({ label, value, prefix, className }: CopyPillProps) {
const { t } = useTranslation('deployments')
const [copied, setCopied] = useState(false)
@@ -85,22 +87,24 @@ type EndpointRowProps = {
openLabel?: string
}
-export const EndpointRow: FC = ({ envName, label, value, openLabel }) => (
-
-)
+export function EndpointRow({ envName, label, value, openLabel }: EndpointRowProps) {
+ return (
+
+ )
+}
diff --git a/web/features/deployments/detail/access-tab/developer-api-section.tsx b/web/features/deployments/detail/access-tab/developer-api-section.tsx
index eaa246583c..b7349acb74 100644
--- a/web/features/deployments/detail/access-tab/developer-api-section.tsx
+++ b/web/features/deployments/detail/access-tab/developer-api-section.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import type { ConsoleEnvironmentSummary, DeveloperAPIKeySummary } from '@/features/deployments/types'
import { Switch } from '@langgenius/dify-ui/switch'
import { useTranslation } from 'react-i18next'
@@ -20,7 +19,7 @@ type DeveloperApiSectionProps = {
onClearCreatedToken: () => void
}
-export const DeveloperApiSection: FC = ({
+export function DeveloperApiSection({
apiEnabled,
apiUrl,
environments,
@@ -31,7 +30,7 @@ export const DeveloperApiSection: FC = ({
onCopyApiKey,
onRevoke,
onClearCreatedToken,
-}) => {
+}: DeveloperApiSectionProps) {
const { t } = useTranslation('deployments')
return (
diff --git a/web/features/deployments/detail/access-tab/permissions-section.tsx b/web/features/deployments/detail/access-tab/permissions-section.tsx
index e7d237509a..a293b1229e 100644
--- a/web/features/deployments/detail/access-tab/permissions-section.tsx
+++ b/web/features/deployments/detail/access-tab/permissions-section.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import type { AccessPermission, AccessSubject, ConsoleEnvironmentSummary } from '@/features/deployments/types'
import { useTranslation } from 'react-i18next'
import { Section } from './common'
@@ -18,12 +17,12 @@ type AccessPermissionsSectionProps = {
) => Promise
}
-export const AccessPermissionsSection: FC = ({
+export function AccessPermissionsSection({
appId,
environments,
policies,
onSetPolicy,
-}) => {
+}: AccessPermissionsSectionProps) {
const { t } = useTranslation('deployments')
return (
diff --git a/web/features/deployments/detail/access-tab/permissions.tsx b/web/features/deployments/detail/access-tab/permissions.tsx
index 2b8a5329ba..c637060b2e 100644
--- a/web/features/deployments/detail/access-tab/permissions.tsx
+++ b/web/features/deployments/detail/access-tab/permissions.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import type { AccessPermissionKind } from '../../types'
import type {
AccessPermission,
@@ -43,7 +42,7 @@ type PermissionPickerProps = {
onChange: (kind: AccessPermissionKind) => void
}
-const PermissionPicker: FC = ({ value, disabled, onChange }) => {
+function PermissionPicker({ value, disabled, onChange }: PermissionPickerProps) {
const { t } = useTranslation('deployments')
const icon = permissionIcon[value]
const label = t(`access.permission.${value}`)
@@ -142,7 +141,7 @@ type SubjectPillProps = {
onRemove: () => void
}
-const SubjectPill: FC = ({ subject, disabled, onRemove }) => {
+function SubjectPill({ subject, disabled, onRemove }: SubjectPillProps) {
const { t } = useTranslation('deployments')
const isGroup = subject.subjectType === 'group'
@@ -176,12 +175,12 @@ type SubjectPickerProps = {
onChange: (subjects: SelectableAccessSubject[]) => void
}
-const SubjectPicker: FC = ({
+function SubjectPicker({
appId,
disabled,
selectedSubjects,
onChange,
-}) => {
+}: SubjectPickerProps) {
const { t } = useTranslation('deployments')
const [open, setOpen] = useState(false)
const [keyword, setKeyword] = useState('')
@@ -308,12 +307,12 @@ type EnvironmentPermissionRowProps = {
) => Promise
}
-export const EnvironmentPermissionRow: FC = ({
+export function EnvironmentPermissionRow({
appId,
environment,
summaryPolicy,
onSetPolicy,
-}) => {
+}: EnvironmentPermissionRowProps) {
const { t } = useTranslation('deployments')
const environmentId = environment.id
const policyQuery = useQuery(consoleQuery.enterprise.appDeploy.getEnvironmentAccessPolicy.queryOptions({
diff --git a/web/features/deployments/detail/deploy-tab.tsx b/web/features/deployments/detail/deploy-tab.tsx
index 7fcc783a5f..ed5d776f20 100644
--- a/web/features/deployments/detail/deploy-tab.tsx
+++ b/web/features/deployments/detail/deploy-tab.tsx
@@ -1,5 +1,5 @@
'use client'
-import type { FC, KeyboardEvent } from 'react'
+import type { KeyboardEvent } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
@@ -36,7 +36,7 @@ type DeployTabProps = {
instanceId: string
}
-const DeployTab: FC = ({ instanceId: appInstanceId }) => {
+export function DeployTab({ instanceId: appInstanceId }: DeployTabProps) {
const { t } = useTranslation('deployments')
const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({
input: {
@@ -302,5 +302,3 @@ const DeployTab: FC = ({ instanceId: appInstanceId }) => {
)
}
-
-export default DeployTab
diff --git a/web/features/deployments/detail/deploy-tab/deployment-panel.tsx b/web/features/deployments/detail/deploy-tab/deployment-panel.tsx
index 730c573ea3..1eb8ee8940 100644
--- a/web/features/deployments/detail/deploy-tab/deployment-panel.tsx
+++ b/web/features/deployments/detail/deploy-tab/deployment-panel.tsx
@@ -1,6 +1,6 @@
'use client'
-import type { FC, ReactNode } from 'react'
+import type { ReactNode } from 'react'
import type { EnvironmentDeploymentRow, RuntimeBindingDisplay } from '@/features/deployments/types'
import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from 'react-i18next'
@@ -23,12 +23,14 @@ type InfoBlockProps = {
children: ReactNode
}
-const InfoBlock: FC
= ({ title, children }) => (
-
-)
+function InfoBlock({ title, children }: InfoBlockProps) {
+ return (
+
+ )
+}
type InfoRowProps = {
label: string
@@ -37,21 +39,23 @@ type InfoRowProps = {
suffix?: string
}
-const InfoRow: FC = ({ label, value, mono, suffix }) => (
-
- {label}
-
- {value}
- {suffix && {suffix}}
-
-
-)
+function InfoRow({ label, value, mono, suffix }: InfoRowProps) {
+ return (
+
+ {label}
+
+ {value}
+ {suffix && {suffix}}
+
+
+ )
+}
type RuntimeBindingItemProps = {
binding: RuntimeBindingDisplay
}
-const RuntimeBindingItem: FC = ({ binding }) => {
+function RuntimeBindingItem({ binding }: RuntimeBindingItemProps) {
const summary = runtimeBindingSummary(binding)
return (
@@ -67,7 +71,7 @@ type DeploymentPanelProps = {
row: EnvironmentDeploymentRow
}
-export const DeploymentPanel: FC = ({ row }) => {
+export function DeploymentPanel({ row }: DeploymentPanelProps) {
const { t } = useTranslation('deployments')
const observed = activeRelease(row)
const env = row.environment
diff --git a/web/features/deployments/detail/deploy-tab/deployment-status-summary.tsx b/web/features/deployments/detail/deploy-tab/deployment-status-summary.tsx
index 090eeec7b5..db7742be51 100644
--- a/web/features/deployments/detail/deploy-tab/deployment-status-summary.tsx
+++ b/web/features/deployments/detail/deploy-tab/deployment-status-summary.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import type { EnvironmentDeploymentRow } from '@/features/deployments/types'
import { useTranslation } from 'react-i18next'
import {
@@ -14,7 +13,7 @@ type DeploymentStatusSummaryProps = {
row: EnvironmentDeploymentRow
}
-export const DeploymentStatusSummary: FC = ({ row }) => {
+export function DeploymentStatusSummary({ row }: DeploymentStatusSummaryProps) {
const { t } = useTranslation('deployments')
if (isUndeployedDeploymentRow(row)) {
return (
diff --git a/web/features/deployments/detail/deployment-sidebar.tsx b/web/features/deployments/detail/deployment-sidebar.tsx
index 0f6da929df..2684a52796 100644
--- a/web/features/deployments/detail/deployment-sidebar.tsx
+++ b/web/features/deployments/detail/deployment-sidebar.tsx
@@ -1,6 +1,6 @@
'use client'
-import type { ComponentProps, FC, PropsWithoutRef } from 'react'
+import type { ComponentProps, PropsWithoutRef } from 'react'
import type { AppInfo } from '../types'
import type { InstanceDetailTabKey } from './tabs'
import type { NavIcon } from '@/app/components/app-sidebar/nav-link'
@@ -28,16 +28,36 @@ type TailwindNavIconProps = PropsWithoutRef> & {
titleId?: string
}
-const OverviewIcon = ({ className }: TailwindNavIconProps) =>
-const OverviewSelectedIcon = ({ className }: TailwindNavIconProps) =>
-const DeployIcon = ({ className }: TailwindNavIconProps) =>
-const DeploySelectedIcon = ({ className }: TailwindNavIconProps) =>
-const VersionsIcon = ({ className }: TailwindNavIconProps) =>
-const VersionsSelectedIcon = ({ className }: TailwindNavIconProps) =>
-const AccessIcon = ({ className }: TailwindNavIconProps) =>
-const AccessSelectedIcon = ({ className }: TailwindNavIconProps) =>
-const SettingsIcon = ({ className }: TailwindNavIconProps) =>
-const SettingsSelectedIcon = ({ className }: TailwindNavIconProps) =>
+function OverviewIcon({ className }: TailwindNavIconProps) {
+ return
+}
+function OverviewSelectedIcon({ className }: TailwindNavIconProps) {
+ return
+}
+function DeployIcon({ className }: TailwindNavIconProps) {
+ return
+}
+function DeploySelectedIcon({ className }: TailwindNavIconProps) {
+ return
+}
+function VersionsIcon({ className }: TailwindNavIconProps) {
+ return
+}
+function VersionsSelectedIcon({ className }: TailwindNavIconProps) {
+ return
+}
+function AccessIcon({ className }: TailwindNavIconProps) {
+ return
+}
+function AccessSelectedIcon({ className }: TailwindNavIconProps) {
+ return
+}
+function SettingsIcon({ className }: TailwindNavIconProps) {
+ return
+}
+function SettingsSelectedIcon({ className }: TailwindNavIconProps) {
+ return
+}
const TABS: TabDef[] = [
{ key: 'overview', icon: OverviewIcon, selectedIcon: OverviewSelectedIcon },
@@ -47,7 +67,7 @@ const TABS: TabDef[] = [
{ key: 'settings', icon: SettingsIcon, selectedIcon: SettingsSelectedIcon },
]
-const isShortcutFromInputArea = (target: EventTarget | null) => {
+function isShortcutFromInputArea(target: EventTarget | null) {
if (!(target instanceof HTMLElement))
return false
@@ -64,13 +84,13 @@ type DeploymentSidebarProps = {
app?: AppInfo
}
-export const DeploymentSidebar: FC = ({
+export function DeploymentSidebar({
instanceId,
instanceName,
instanceDescription,
appModeLabel,
app,
-}) => {
+}: DeploymentSidebarProps) {
const { t } = useTranslation('deployments')
const sidebarRef = useRef(null)
const isHoveringSidebar = useHover(sidebarRef)
diff --git a/web/features/deployments/detail/index.tsx b/web/features/deployments/detail/index.tsx
index 4cade8f8d1..1261631796 100644
--- a/web/features/deployments/detail/index.tsx
+++ b/web/features/deployments/detail/index.tsx
@@ -1,6 +1,6 @@
'use client'
-import type { FC, ReactNode } from 'react'
+import type { ReactNode } from 'react'
import type { InstanceDetailTabKey } from './tabs'
import { Button } from '@langgenius/dify-ui/button'
import { useQuery } from '@tanstack/react-query'
@@ -10,8 +10,8 @@ import { getAppModeLabel } from '@/app/components/app-sidebar/app-info/app-mode-
import useDocumentTitle from '@/hooks/use-document-title'
import { useRouter, useSelectedLayoutSegment } from '@/next/navigation'
import { consoleQuery } from '@/service/client'
-import DeployDrawer from '../components/deploy-drawer'
-import RollbackModal from '../components/rollback-modal'
+import { DeployDrawer } from '../components/deploy-drawer'
+import { RollbackModal } from '../components/rollback-modal'
import { toAppInfoFromOverview } from '../utils'
import { DeploymentSidebar } from './deployment-sidebar'
import { isInstanceDetailTabKey } from './tabs'
@@ -21,7 +21,7 @@ type InstanceDetailProps = {
children: ReactNode
}
-const InstanceDetail: FC = ({ instanceId, children }) => {
+export function InstanceDetail({ instanceId, children }: InstanceDetailProps) {
const { t } = useTranslation('deployments')
const { t: tCommon } = useTranslation()
const router = useRouter()
@@ -95,5 +95,3 @@ const InstanceDetail: FC = ({ instanceId, children }) => {
>
)
}
-
-export default InstanceDetail
diff --git a/web/features/deployments/detail/overview-tab.tsx b/web/features/deployments/detail/overview-tab.tsx
index 8c19bab54e..24482648fd 100644
--- a/web/features/deployments/detail/overview-tab.tsx
+++ b/web/features/deployments/detail/overview-tab.tsx
@@ -1,5 +1,5 @@
'use client'
-import type { FC, ReactNode } from 'react'
+import type { ReactNode } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { useQuery } from '@tanstack/react-query'
@@ -29,15 +29,17 @@ type SectionProps = {
children: ReactNode
}
-const Section: FC = ({ title, action, children }) => (
-
-
-
{title}
- {action}
+function Section({ title, action, children }: SectionProps) {
+ return (
+
- {children}
-
-)
+ )
+}
type InfoRowProps = {
label: string
@@ -45,12 +47,14 @@ type InfoRowProps = {
mono?: boolean
}
-const InfoRow: FC
= ({ label, value, mono }) => (
-
- {label}
- {value}
-
-)
+function InfoRow({ label, value, mono }: InfoRowProps) {
+ return (
+
+ {label}
+ {value}
+
+ )
+}
type AccessOverviewRowProps = {
label: string
@@ -59,7 +63,7 @@ type AccessOverviewRowProps = {
meta?: string
}
-const AccessOverviewRow: FC = ({ label, enabled, hint, meta }) => {
+function AccessOverviewRow({ label, enabled, hint, meta }: AccessOverviewRowProps) {
const { t } = useTranslation('deployments')
return (
@@ -94,7 +98,7 @@ function overviewDeploymentStatus(status?: string) {
return 'ready'
}
-const OverviewTab: FC = ({ instanceId }) => {
+export function OverviewTab({ instanceId }: OverviewTabProps) {
const { t } = useTranslation('deployments')
const { t: tCommon } = useTranslation()
const router = useRouter()
@@ -237,5 +241,3 @@ const OverviewTab: FC = ({ instanceId }) => {
)
}
-
-export default OverviewTab
diff --git a/web/features/deployments/detail/settings-tab.tsx b/web/features/deployments/detail/settings-tab.tsx
index 95ec407e85..4d46b286c2 100644
--- a/web/features/deployments/detail/settings-tab.tsx
+++ b/web/features/deployments/detail/settings-tab.tsx
@@ -1,5 +1,4 @@
'use client'
-import type { FC } from 'react'
import type { AppInfo } from '../types'
import type { GetAppInstanceSettingsReply } from '@/features/deployments/types'
import {
@@ -35,7 +34,7 @@ type SettingsFormProps = {
onDelete: () => Promise
}
-const SettingsForm: FC = ({ app, settings, hasDeployments, onSave, onDelete }) => {
+function SettingsForm({ app, settings, hasDeployments, onSave, onDelete }: SettingsFormProps) {
const { t } = useTranslation('deployments')
const [name, setName] = useState(settings?.name ?? app.name)
const [description, setDescription] = useState(settings?.description ?? app.description ?? '')
@@ -175,7 +174,7 @@ const SettingsForm: FC = ({ app, settings, hasDeployments, on
)
}
-const SettingsTab: FC = ({ instanceId }) => {
+export function SettingsTab({ instanceId }: SettingsTabProps) {
const router = useRouter()
const updateInstance = useMutation(consoleQuery.enterprise.appDeploy.updateAppInstance.mutationOptions())
const deleteInstance = useMutation(consoleQuery.enterprise.appDeploy.deleteAppInstance.mutationOptions())
@@ -225,5 +224,3 @@ const SettingsTab: FC = ({ instanceId }) => {
/>
)
}
-
-export default SettingsTab
diff --git a/web/features/deployments/detail/versions-tab.tsx b/web/features/deployments/detail/versions-tab.tsx
index cb5c22f264..de74c4adae 100644
--- a/web/features/deployments/detail/versions-tab.tsx
+++ b/web/features/deployments/detail/versions-tab.tsx
@@ -1,5 +1,4 @@
'use client'
-import type { FC } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { Dialog, DialogCloseButton, DialogContent, DialogDescription, DialogTitle } from '@langgenius/dify-ui/dialog'
@@ -28,7 +27,7 @@ type VersionsTabProps = {
instanceId: string
}
-const VersionsTab: FC = ({ instanceId: appId }) => {
+export function VersionsTab({ instanceId: appId }: VersionsTabProps) {
const { t } = useTranslation('deployments')
const input = { params: { appInstanceId: appId } }
const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
@@ -311,5 +310,3 @@ const VersionsTab: FC = ({ instanceId: appId }) => {
)
}
-
-export default VersionsTab
diff --git a/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx b/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx
index a792b1c003..04d6df91eb 100644
--- a/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx
+++ b/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import {
DropdownMenu,
@@ -27,7 +26,7 @@ type DeployReleaseMenuProps = {
releaseId: string
}
-export const DeployReleaseMenu: FC = ({ appInstanceId, releaseId }) => {
+export function DeployReleaseMenu({ appInstanceId, releaseId }: DeployReleaseMenuProps) {
const { t } = useTranslation('deployments')
const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer)
const [open, setOpen] = useState(false)
diff --git a/web/features/deployments/detail/versions-tab/deployed-to-badge.tsx b/web/features/deployments/detail/versions-tab/deployed-to-badge.tsx
index 4f7ceda703..f5c1d86d24 100644
--- a/web/features/deployments/detail/versions-tab/deployed-to-badge.tsx
+++ b/web/features/deployments/detail/versions-tab/deployed-to-badge.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import type { ReleaseDeployment, ReleaseDeploymentState } from './release-deployments'
import { cn } from '@langgenius/dify-ui/cn'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
@@ -16,7 +15,7 @@ type DeployedToBadgeProps = {
item: ReleaseDeployment
}
-export const DeployedToBadge: FC = ({ item }) => {
+export function DeployedToBadge({ item }: DeployedToBadgeProps) {
const { t } = useTranslation('deployments')
const statusLabel = t(`versions.deployedStatus.${item.state}`)
diff --git a/web/features/deployments/list/environment-filter.tsx b/web/features/deployments/list/environment-filter.tsx
index f719011278..34d94fffdd 100644
--- a/web/features/deployments/list/environment-filter.tsx
+++ b/web/features/deployments/list/environment-filter.tsx
@@ -1,6 +1,6 @@
'use client'
-import type { FC, ReactNode } from 'react'
+import type { ReactNode } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import {
DropdownMenu,
@@ -24,7 +24,7 @@ type EnvironmentFilterProps = {
onChange: (value: string) => void
}
-export const EnvironmentFilter: FC = ({ value, options, onChange }) => {
+export function EnvironmentFilter({ value, options, onChange }: EnvironmentFilterProps) {
const [open, setOpen] = useState(false)
const selectedOption = options.find(option => option.value === value) ?? options[0]
diff --git a/web/features/deployments/list/index.tsx b/web/features/deployments/list/index.tsx
index 964a856848..522b4e8b63 100644
--- a/web/features/deployments/list/index.tsx
+++ b/web/features/deployments/list/index.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import { useQuery } from '@tanstack/react-query'
import { useDebounce } from 'ahooks'
import { debounce, parseAsString, useQueryState } from 'nuqs'
@@ -8,9 +7,9 @@ import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import { consoleQuery } from '@/service/client'
-import CreateInstanceModal from '../components/create-instance-modal'
-import DeployDrawer from '../components/deploy-drawer'
-import RollbackModal from '../components/rollback-modal'
+import { CreateInstanceModal } from '../components/create-instance-modal'
+import { DeployDrawer } from '../components/deploy-drawer'
+import { RollbackModal } from '../components/rollback-modal'
import { SOURCE_APPS_PAGE_SIZE } from '../data'
import { useDeploymentsStore } from '../store'
import {
@@ -21,7 +20,7 @@ import { EnvironmentFilter } from './environment-filter'
import { InstanceCard } from './instance-card'
import { NewInstanceCard } from './new-instance-card'
-const DeploymentsMain: FC = () => {
+export function DeploymentsMain() {
const { t } = useTranslation('deployments')
const openCreateInstanceModal = useDeploymentsStore(state => state.openCreateInstanceModal)
@@ -140,5 +139,3 @@ const DeploymentsMain: FC = () => {
>
)
}
-
-export default DeploymentsMain
diff --git a/web/features/deployments/list/instance-card.tsx b/web/features/deployments/list/instance-card.tsx
index c1695bda19..54a850864b 100644
--- a/web/features/deployments/list/instance-card.tsx
+++ b/web/features/deployments/list/instance-card.tsx
@@ -1,6 +1,6 @@
'use client'
-import type { FC, MouseEvent } from 'react'
+import type { MouseEvent } from 'react'
import type { AppInfo } from '../types'
import type { AppDeploymentSummary } from '@/features/deployments/types'
import type { AppModeEnum } from '@/types/app'
@@ -26,7 +26,7 @@ type InstanceCardProps = {
summary?: AppDeploymentSummary
}
-export const InstanceCard: FC = ({ app, summary }) => {
+export function InstanceCard({ app, summary }: InstanceCardProps) {
const { t } = useTranslation('deployments')
const router = useRouter()
const { formatTimeFromNow } = useFormatTimeFromNow()
diff --git a/web/features/deployments/list/new-instance-card.tsx b/web/features/deployments/list/new-instance-card.tsx
index 8647ddbc82..abe4f25469 100644
--- a/web/features/deployments/list/new-instance-card.tsx
+++ b/web/features/deployments/list/new-instance-card.tsx
@@ -1,6 +1,5 @@
'use client'
-import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from 'react-i18next'
@@ -15,7 +14,7 @@ type NewInstanceActionProps = {
onClick?: () => void
}
-const NewInstanceAction: FC = ({ icon, label, disabled, onClick }) => {
+function NewInstanceAction({ icon, label, disabled, onClick }: NewInstanceActionProps) {
const { t } = useTranslation('deployments')
return (
@@ -42,7 +41,7 @@ const NewInstanceAction: FC = ({ icon, label, disabled,
)
}
-export const NewInstanceCard: FC = ({ onOpen }) => {
+export function NewInstanceCard({ onOpen }: NewInstanceCardProps) {
const { t } = useTranslation('deployments')
return (
diff --git a/web/features/deployments/nav/index.tsx b/web/features/deployments/nav/index.tsx
index faabc41192..7625e836cf 100644
--- a/web/features/deployments/nav/index.tsx
+++ b/web/features/deployments/nav/index.tsx
@@ -15,7 +15,7 @@ import {
toAppInfoFromOverview,
} from '../utils'
-const DeploymentsNav = () => {
+export function DeploymentsNav() {
const { t } = useTranslation()
const router = useRouter()
const selectedSegment = useSelectedLayoutSegment()
@@ -90,5 +90,3 @@ const DeploymentsNav = () => {
/>
)
}
-
-export default DeploymentsNav
diff --git a/web/features/deployments/utils.ts b/web/features/deployments/utils.ts
index ad03738cf4..4bfd105266 100644
--- a/web/features/deployments/utils.ts
+++ b/web/features/deployments/utils.ts
@@ -16,60 +16,78 @@ import { PUBLIC_API_PREFIX } from '@/config'
export type DeploymentUiStatus = 'ready' | 'deploying' | 'deploy_failed'
-export const formatDate = (value?: string) => {
+export function formatDate(value?: string) {
if (!value)
return '—'
return value.replace('T', ' ').replace(/\.\d+Z?$/, '').replace(/Z$/, '').slice(0, 16)
}
-export const environmentId = (environment?: ConsoleEnvironmentSummary | EnvironmentOption) => environment?.id ?? ''
+export function environmentId(environment?: ConsoleEnvironmentSummary | EnvironmentOption) {
+ return environment?.id ?? ''
+}
-export const environmentName = (environment?: ConsoleEnvironmentSummary | EnvironmentOption) => environment?.name || environment?.id || '—'
+export function environmentName(environment?: ConsoleEnvironmentSummary | EnvironmentOption) {
+ return environment?.name || environment?.id || '—'
+}
-export const environmentMode = (environment?: ConsoleEnvironmentSummary | EnvironmentOption) => {
+export function environmentMode(environment?: ConsoleEnvironmentSummary | EnvironmentOption) {
const type = environment?.type?.toLowerCase() ?? ''
return type.includes('isolated') ? 'isolated' : 'shared'
}
-export const environmentBackend = (environment?: ConsoleEnvironmentSummary) => {
+export function environmentBackend(environment?: ConsoleEnvironmentSummary) {
const runtime = (environment?.backend || environment?.runtime)?.toLowerCase() ?? ''
return runtime.includes('host') ? 'host' : 'k8s'
}
-export const environmentHealth = (environment?: ConsoleEnvironmentSummary | EnvironmentOption) => {
+export function environmentHealth(environment?: ConsoleEnvironmentSummary | EnvironmentOption) {
const status = environment?.status?.toLowerCase() ?? ''
return status.includes('ready') ? 'ready' : 'degraded'
}
-export const releaseId = (release?: ConsoleReleaseSummary) => release?.id ?? ''
+export function releaseId(release?: ConsoleReleaseSummary) {
+ return release?.id ?? ''
+}
-export const releaseLabel = (release?: ConsoleReleaseSummary) => release?.name || release?.displayId || release?.id || '—'
+export function releaseLabel(release?: ConsoleReleaseSummary) {
+ return release?.name || release?.displayId || release?.id || '—'
+}
-export const releaseCommit = (release?: ConsoleReleaseSummary) => release?.shortCommitId || release?.commitId || '—'
+export function releaseCommit(release?: ConsoleReleaseSummary) {
+ return release?.shortCommitId || release?.commitId || '—'
+}
-export const runtimeBindingLabel = (binding?: RuntimeBindingDisplay) =>
- binding?.label || binding?.slot || binding?.kind || '—'
+export function runtimeBindingLabel(binding?: RuntimeBindingDisplay) {
+ return binding?.label || binding?.slot || binding?.kind || '—'
+}
-export const runtimeBindingValue = (binding?: RuntimeBindingDisplay) =>
- binding?.displayValue || binding?.maskedValue || binding?.displayName || '—'
+export function runtimeBindingValue(binding?: RuntimeBindingDisplay) {
+ return binding?.displayValue || binding?.maskedValue || binding?.displayName || '—'
+}
-export const runtimeBindingSummary = (binding?: RuntimeBindingDisplay) =>
- binding?.label || binding?.slot || binding?.displayName || binding?.displayValue || binding?.maskedValue || binding?.kind || '—'
+export function runtimeBindingSummary(binding?: RuntimeBindingDisplay) {
+ return binding?.label || binding?.slot || binding?.displayName || binding?.displayValue || binding?.maskedValue || binding?.kind || '—'
+}
-export const isRuntimeEnvVarBinding = (binding?: RuntimeBindingDisplay) =>
- (binding?.kind?.toLowerCase() ?? '').includes('env')
+export function isRuntimeEnvVarBinding(binding?: RuntimeBindingDisplay) {
+ return (binding?.kind?.toLowerCase() ?? '').includes('env')
+}
-export const isRuntimeModelBinding = (binding?: RuntimeBindingDisplay) =>
- (binding?.kind?.toLowerCase() ?? '').includes('model')
+export function isRuntimeModelBinding(binding?: RuntimeBindingDisplay) {
+ return (binding?.kind?.toLowerCase() ?? '').includes('model')
+}
-export const isRuntimePluginBinding = (binding?: RuntimeBindingDisplay) =>
- !isRuntimeEnvVarBinding(binding) && !isRuntimeModelBinding(binding)
+export function isRuntimePluginBinding(binding?: RuntimeBindingDisplay) {
+ return !isRuntimeEnvVarBinding(binding) && !isRuntimeModelBinding(binding)
+}
const absoluteUrlRegExp = /^[a-z][a-z\d+.-]*:\/\//i
-const withLeadingSlash = (path: string) => path.startsWith('/') ? path : `/${path}`
+function withLeadingSlash(path: string) {
+ return path.startsWith('/') ? path : `/${path}`
+}
-const publicWebappOrigin = () => {
+function publicWebappOrigin() {
try {
return new URL(PUBLIC_API_PREFIX).origin
}
@@ -78,7 +96,7 @@ const publicWebappOrigin = () => {
}
}
-export const webappUrl = (url?: string) => {
+export function webappUrl(url?: string) {
if (!url)
return ''
if (absoluteUrlRegExp.test(url))
@@ -88,15 +106,19 @@ export const webappUrl = (url?: string) => {
return `${origin}${withLeadingSlash(url)}`
}
-export const deploymentId = (row?: EnvironmentDeploymentRow) =>
- row?.id || ''
+export function deploymentId(row?: EnvironmentDeploymentRow) {
+ return row?.id || ''
+}
-export const activeRelease = (row?: EnvironmentDeploymentRow) => row?.currentRelease
+export function activeRelease(row?: EnvironmentDeploymentRow) {
+ return row?.currentRelease
+}
-export const isUndeployedDeploymentRow = (row?: EnvironmentDeploymentRow) =>
- (row?.status?.toLowerCase() ?? '').includes('undeployed') || (!row?.id && !row?.currentRelease && !row?.detail)
+export function isUndeployedDeploymentRow(row?: EnvironmentDeploymentRow) {
+ return (row?.status?.toLowerCase() ?? '').includes('undeployed') || (!row?.id && !row?.currentRelease && !row?.detail)
+}
-export const deploymentStatus = (row: EnvironmentDeploymentRow): DeploymentUiStatus => {
+export function deploymentStatus(row: EnvironmentDeploymentRow): DeploymentUiStatus {
const runtimeStatus = row.status?.toLowerCase() ?? ''
if (runtimeStatus.includes('deploying') || runtimeStatus.includes('pending'))
return 'deploying'
@@ -105,13 +127,14 @@ export const deploymentStatus = (row: EnvironmentDeploymentRow): DeploymentUiSta
return 'ready'
}
-export const deployedRows = (rows?: EnvironmentDeploymentRow[]) =>
- rows?.filter((row) => {
+export function deployedRows(rows?: EnvironmentDeploymentRow[]) {
+ return rows?.filter((row) => {
const runtimeStatus = row.status?.toLowerCase() ?? ''
return row.environment?.id
&& !isUndeployedDeploymentRow(row)
&& (row.id || runtimeStatus || row.currentRelease || row.detail)
}) ?? []
+}
export function toAppInfoFromSummary(summary: AppDeploymentSummary): AppInfo | undefined {
if (!summary.id || !summary.name)
@@ -149,13 +172,13 @@ export function toAppInfoFromOverview(instance?: AppInstanceOverview): AppInfo |
}
}
-export const sourceAppsFromList = (response?: ListAppDeploymentsReply) => {
+export function sourceAppsFromList(response?: ListAppDeploymentsReply) {
return (response?.data ?? [])
.map(toAppInfoFromSummary)
.filter((app): app is AppInfo => Boolean(app))
}
-export const deploymentSummariesFromList = (response?: ListAppDeploymentsReply): Record => {
+export function deploymentSummariesFromList(response?: ListAppDeploymentsReply): Record {
return Object.fromEntries(
(response?.data ?? [])
.filter(summary => summary.id)
@@ -163,7 +186,7 @@ export const deploymentSummariesFromList = (response?: ListAppDeploymentsReply):
)
}
-export const environmentOptionsFromOptionsReply = (response?: ListDeploymentEnvironmentOptionsReply): EnvironmentOption[] => {
+export function environmentOptionsFromOptionsReply(response?: ListDeploymentEnvironmentOptionsReply): EnvironmentOption[] {
return response?.environments
?.filter(environment => environment.id)
.map(environment => ({
@@ -172,7 +195,7 @@ export const environmentOptionsFromOptionsReply = (response?: ListDeploymentEnvi
})) ?? []
}
-export const accessModeToPermissionKey = (mode?: string): AccessPermissionKind => {
+export function accessModeToPermissionKey(mode?: string): AccessPermissionKind {
const normalized = mode?.toLowerCase() ?? ''
if (normalized === 'private')
return 'specific'
@@ -181,7 +204,7 @@ export const accessModeToPermissionKey = (mode?: string): AccessPermissionKind =
return 'organization'
}
-export const permissionKeyToAccessMode = (key: AccessPermissionKind) => {
+export function permissionKeyToAccessMode(key: AccessPermissionKind) {
if (key === 'organization')
return 'private_all'
if (key === 'specific')
diff --git a/web/service/client.ts b/web/service/client.ts
index 64a5c5bc2d..eaa64ab7cf 100644
--- a/web/service/client.ts
+++ b/web/service/client.ts
@@ -17,9 +17,11 @@ import {
import { isClient } from '@/utils/client'
import { request } from './base'
-const getMarketplaceHeaders = () => new Headers({
- 'X-Dify-Version': !IS_MARKETPLACE ? APP_VERSION : '999.0.0',
-})
+function getMarketplaceHeaders() {
+ return new Headers({
+ 'X-Dify-Version': !IS_MARKETPLACE ? APP_VERSION : '999.0.0',
+ })
+}
function isURL(path: string) {
try {