From 23ffbd2532e2992c7e7bb3671fbee663ef0737ff Mon Sep 17 00:00:00 2001 From: Stephen Zhou <38493346+hyoban@users.noreply.github.com> Date: Thu, 7 May 2026 18:09:52 +0800 Subject: [PATCH] tweaks --- .../deployments/[instanceId]/access/page.tsx | 6 +- .../deployments/[instanceId]/deploy/page.tsx | 6 +- .../deployments/[instanceId]/layout.tsx | 6 +- .../[instanceId]/overview/page.tsx | 6 +- .../deployments/[instanceId]/page.tsx | 4 +- .../[instanceId]/settings/page.tsx | 6 +- .../[instanceId]/versions/page.tsx | 6 +- web/app/(commonLayout)/deployments/page.tsx | 6 +- .../apps/hooks/use-workflow-online-users.ts | 6 +- web/app/components/header/index.tsx | 2 +- .../components/create-instance-modal.tsx | 13 +-- .../deployments/components/deploy-drawer.tsx | 5 +- .../components/deploy-drawer/form.tsx | 30 +++--- .../components/deploy-drawer/select.tsx | 41 ++++---- .../deployments/components/rollback-modal.tsx | 12 ++- .../deployments/components/status-badge.tsx | 7 +- .../deployments/detail/access-tab.tsx | 5 +- .../detail/access-tab/api-keys.tsx | 5 +- .../detail/access-tab/channels-section.tsx | 5 +- .../deployments/detail/access-tab/common.tsx | 70 ++++++------- .../access-tab/developer-api-section.tsx | 5 +- .../detail/access-tab/permissions-section.tsx | 5 +- .../detail/access-tab/permissions.tsx | 13 ++- .../deployments/detail/deploy-tab.tsx | 6 +- .../detail/deploy-tab/deployment-panel.tsx | 40 ++++---- .../deploy-tab/deployment-status-summary.tsx | 3 +- .../deployments/detail/deployment-sidebar.tsx | 48 ++++++--- web/features/deployments/detail/index.tsx | 10 +- .../deployments/detail/overview-tab.tsx | 40 ++++---- .../deployments/detail/settings-tab.tsx | 7 +- .../deployments/detail/versions-tab.tsx | 5 +- .../versions-tab/deploy-release-menu.tsx | 3 +- .../detail/versions-tab/deployed-to-badge.tsx | 3 +- .../deployments/list/environment-filter.tsx | 4 +- web/features/deployments/list/index.tsx | 11 +-- .../deployments/list/instance-card.tsx | 4 +- .../deployments/list/new-instance-card.tsx | 5 +- web/features/deployments/nav/index.tsx | 4 +- web/features/deployments/utils.ts | 97 ++++++++++++------- web/service/client.ts | 8 +- 40 files changed, 291 insertions(+), 277 deletions(-) diff --git a/web/app/(commonLayout)/deployments/[instanceId]/access/page.tsx b/web/app/(commonLayout)/deployments/[instanceId]/access/page.tsx index 23b0777fcc..0dd28ad177 100644 --- a/web/app/(commonLayout)/deployments/[instanceId]/access/page.tsx +++ b/web/app/(commonLayout)/deployments/[instanceId]/access/page.tsx @@ -1,12 +1,10 @@ -import AccessTab from '@/features/deployments/detail/access-tab' +import { AccessTab } from '@/features/deployments/detail/access-tab' type PageProps = { params: Promise<{ instanceId: string }> } -const InstanceDetailAccessPage = async ({ params }: PageProps) => { +export default async function InstanceDetailAccessPage({ params }: PageProps) { const { instanceId } = await params return } - -export default InstanceDetailAccessPage diff --git a/web/app/(commonLayout)/deployments/[instanceId]/deploy/page.tsx b/web/app/(commonLayout)/deployments/[instanceId]/deploy/page.tsx index 04ac7b0da5..dcf37c886b 100644 --- a/web/app/(commonLayout)/deployments/[instanceId]/deploy/page.tsx +++ b/web/app/(commonLayout)/deployments/[instanceId]/deploy/page.tsx @@ -1,12 +1,10 @@ -import DeployTab from '@/features/deployments/detail/deploy-tab' +import { DeployTab } from '@/features/deployments/detail/deploy-tab' type PageProps = { params: Promise<{ instanceId: string }> } -const InstanceDetailDeployPage = async ({ params }: PageProps) => { +export default async function InstanceDetailDeployPage({ params }: PageProps) { const { instanceId } = await params return } - -export default InstanceDetailDeployPage diff --git a/web/app/(commonLayout)/deployments/[instanceId]/layout.tsx b/web/app/(commonLayout)/deployments/[instanceId]/layout.tsx index 10814783ee..9f1f38adb8 100644 --- a/web/app/(commonLayout)/deployments/[instanceId]/layout.tsx +++ b/web/app/(commonLayout)/deployments/[instanceId]/layout.tsx @@ -1,12 +1,12 @@ import type { ReactNode } from 'react' -import InstanceDetail from '@/features/deployments/detail' +import { InstanceDetail } from '@/features/deployments/detail' type LayoutProps = { children: ReactNode params: Promise<{ instanceId: string }> } -const InstanceDetailLayout = async ({ children, params }: LayoutProps) => { +export default async function InstanceDetailLayout({ children, params }: LayoutProps) { const { instanceId } = await params return ( @@ -15,5 +15,3 @@ const InstanceDetailLayout = async ({ children, params }: LayoutProps) => { ) } - -export default InstanceDetailLayout diff --git a/web/app/(commonLayout)/deployments/[instanceId]/overview/page.tsx b/web/app/(commonLayout)/deployments/[instanceId]/overview/page.tsx index 275f1c66e6..33bc561080 100644 --- a/web/app/(commonLayout)/deployments/[instanceId]/overview/page.tsx +++ b/web/app/(commonLayout)/deployments/[instanceId]/overview/page.tsx @@ -1,12 +1,10 @@ -import OverviewTab from '@/features/deployments/detail/overview-tab' +import { OverviewTab } from '@/features/deployments/detail/overview-tab' type PageProps = { params: Promise<{ instanceId: string }> } -const InstanceDetailOverviewPage = async ({ params }: PageProps) => { +export default async function InstanceDetailOverviewPage({ params }: PageProps) { const { instanceId } = await params return } - -export default InstanceDetailOverviewPage diff --git a/web/app/(commonLayout)/deployments/[instanceId]/page.tsx b/web/app/(commonLayout)/deployments/[instanceId]/page.tsx index be3aab6b10..cb88504e62 100644 --- a/web/app/(commonLayout)/deployments/[instanceId]/page.tsx +++ b/web/app/(commonLayout)/deployments/[instanceId]/page.tsx @@ -4,9 +4,7 @@ type PageProps = { params: Promise<{ instanceId: string }> } -const InstanceDetailPage = async ({ params }: PageProps) => { +export default async function InstanceDetailPage({ params }: PageProps) { const { instanceId } = await params redirect(`/deployments/${instanceId}/overview`) } - -export default InstanceDetailPage diff --git a/web/app/(commonLayout)/deployments/[instanceId]/settings/page.tsx b/web/app/(commonLayout)/deployments/[instanceId]/settings/page.tsx index c3ae36697a..bf6fe1083c 100644 --- a/web/app/(commonLayout)/deployments/[instanceId]/settings/page.tsx +++ b/web/app/(commonLayout)/deployments/[instanceId]/settings/page.tsx @@ -1,12 +1,10 @@ -import SettingsTab from '@/features/deployments/detail/settings-tab' +import { SettingsTab } from '@/features/deployments/detail/settings-tab' type PageProps = { params: Promise<{ instanceId: string }> } -const InstanceDetailSettingsPage = async ({ params }: PageProps) => { +export default async function InstanceDetailSettingsPage({ params }: PageProps) { const { instanceId } = await params return } - -export default InstanceDetailSettingsPage diff --git a/web/app/(commonLayout)/deployments/[instanceId]/versions/page.tsx b/web/app/(commonLayout)/deployments/[instanceId]/versions/page.tsx index 7964a54087..92c9d06025 100644 --- a/web/app/(commonLayout)/deployments/[instanceId]/versions/page.tsx +++ b/web/app/(commonLayout)/deployments/[instanceId]/versions/page.tsx @@ -1,12 +1,10 @@ -import VersionsTab from '@/features/deployments/detail/versions-tab' +import { VersionsTab } from '@/features/deployments/detail/versions-tab' type PageProps = { params: Promise<{ instanceId: string }> } -const InstanceDetailVersionsPage = async ({ params }: PageProps) => { +export default async function InstanceDetailVersionsPage({ params }: PageProps) { const { instanceId } = await params return } - -export default InstanceDetailVersionsPage diff --git a/web/app/(commonLayout)/deployments/page.tsx b/web/app/(commonLayout)/deployments/page.tsx index f6bff9762d..1d085df265 100644 --- a/web/app/(commonLayout)/deployments/page.tsx +++ b/web/app/(commonLayout)/deployments/page.tsx @@ -1,12 +1,10 @@ 'use client' import { useTranslation } from 'react-i18next' -import DeploymentsMain from '@/features/deployments/list' +import { DeploymentsMain } from '@/features/deployments/list' import useDocumentTitle from '@/hooks/use-document-title' -const DeploymentsPage = () => { +export default function DeploymentsPage() { const { t } = useTranslation('deployments') useDocumentTitle(t('documentTitle.list')) return } - -export default DeploymentsPage diff --git a/web/app/components/apps/hooks/use-workflow-online-users.ts b/web/app/components/apps/hooks/use-workflow-online-users.ts index 21348b3997..a764153dcf 100644 --- a/web/app/components/apps/hooks/use-workflow-online-users.ts +++ b/web/app/components/apps/hooks/use-workflow-online-users.ts @@ -9,7 +9,7 @@ type UseWorkflowOnlineUsersParams = { enabled: boolean } -const normalizeWorkflowOnlineUsers = (response?: WorkflowOnlineUsersResponse): WorkflowOnlineUsersMap => { +function normalizeWorkflowOnlineUsers(response?: WorkflowOnlineUsersResponse): WorkflowOnlineUsersMap { const data = response?.data if (!data) @@ -30,10 +30,10 @@ const normalizeWorkflowOnlineUsers = (response?: WorkflowOnlineUsersResponse): W }, {}) } -export const useWorkflowOnlineUsers = ({ +export function useWorkflowOnlineUsers({ appIds, enabled, -}: UseWorkflowOnlineUsersParams) => { +}: UseWorkflowOnlineUsersParams) { const shouldFetch = enabled && appIds.length > 0 const { data: onlineUsersMap = {} } = useQuery(consoleQuery.apps.workflowOnlineUsers.queryOptions({ input: { diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx index 511177c7eb..b53193198c 100644 --- a/web/app/components/header/index.tsx +++ b/web/app/components/header/index.tsx @@ -8,7 +8,7 @@ import { useAppContext } from '@/context/app-context' import { useModalContext } from '@/context/modal-context' import { useProviderContext } from '@/context/provider-context' import { WorkspaceProvider } from '@/context/workspace-context-provider' -import DeploymentsNav from '@/features/deployments/nav' +import { DeploymentsNav } from '@/features/deployments/nav' import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints' import Link from '@/next/link' import { systemFeaturesQueryOptions } from '@/service/system-features' diff --git a/web/features/deployments/components/create-instance-modal.tsx b/web/features/deployments/components/create-instance-modal.tsx index ad0ef0348f..bd2635fc5b 100644 --- a/web/features/deployments/components/create-instance-modal.tsx +++ b/web/features/deployments/components/create-instance-modal.tsx @@ -1,5 +1,4 @@ 'use client' -import type { FC } from 'react' import type { AppInfo, AppMode } from '../types' import type { App, AppModeEnum } from '@/types/app' import { Button } from '@langgenius/dify-ui/button' @@ -39,7 +38,7 @@ type AppPickerProps = { onChange: (appId: string) => void } -export const AppPicker: FC = ({ apps, isLoading, value, onChange }) => { +export function AppPicker({ apps, isLoading, value, onChange }: AppPickerProps) { const { t } = useTranslation('deployments') const [open, setOpen] = useState(false) const [keywords, setKeywords] = useState('') @@ -204,7 +203,11 @@ export const AppPicker: FC = ({ apps, isLoading, value, onChange ) } -const CreateInstanceForm: FC<{ onClose: () => void }> = ({ onClose }) => { +type CreateInstanceFormProps = { + onClose: () => void +} + +function CreateInstanceForm({ onClose }: CreateInstanceFormProps) { const { t } = useTranslation('deployments') const router = useRouter() const createInstance = useMutation(consoleQuery.enterprise.appDeploy.createAppInstance.mutationOptions()) @@ -310,7 +313,7 @@ const CreateInstanceForm: FC<{ onClose: () => void }> = ({ onClose }) => { ) } -const CreateInstanceModal: FC = () => { +export function CreateInstanceModal() { const modal = useDeploymentsStore(state => state.createInstanceModal) const closeModal = useDeploymentsStore(state => state.closeCreateInstanceModal) @@ -326,5 +329,3 @@ const CreateInstanceModal: FC = () => { ) } - -export default CreateInstanceModal diff --git a/web/features/deployments/components/deploy-drawer.tsx b/web/features/deployments/components/deploy-drawer.tsx index 7cc12f45d0..185d04dc1b 100644 --- a/web/features/deployments/components/deploy-drawer.tsx +++ b/web/features/deployments/components/deploy-drawer.tsx @@ -1,6 +1,5 @@ 'use client' -import type { FC } from 'react' import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog' import { toast } from '@langgenius/dify-ui/toast' import { skipToken, useMutation, useQuery } from '@tanstack/react-query' @@ -12,7 +11,7 @@ import { useDeploymentsStore } from '../store' import { environmentOptionsFromOptionsReply } from '../utils' import { DeployForm } from './deploy-drawer/form' -const DeployDrawer: FC = () => { +export function DeployDrawer() { const { t } = useTranslation('deployments') const drawer = useDeploymentsStore(state => state.deployDrawer) const drawerAppInstanceId = drawer.appInstanceId @@ -95,5 +94,3 @@ const DeployDrawer: FC = () => { ) } - -export default DeployDrawer diff --git a/web/features/deployments/components/deploy-drawer/form.tsx b/web/features/deployments/components/deploy-drawer/form.tsx index d935ca22e0..c653b79f45 100644 --- a/web/features/deployments/components/deploy-drawer/form.tsx +++ b/web/features/deployments/components/deploy-drawer/form.tsx @@ -1,7 +1,6 @@ 'use client' import type { DeploymentBindingOptionSlot, DeploymentRuntimeBinding } from '@dify/contracts/enterprise/types.gen' -import type { FC } from 'react' import type { ConsoleReleaseSummary, EnvironmentOption } from '@/features/deployments/types' import { Button } from '@langgenius/dify-ui/button' import { DialogDescription, DialogTitle } from '@langgenius/dify-ui/dialog' @@ -54,12 +53,15 @@ type BindingOptionsPanelProps = { onChange: (slot: string, value: string) => void } -const isEnvBindingSlot = (slot: DeploymentBindingOptionSlot) => - (slot.kind?.toLowerCase() ?? '').includes('env') +function isEnvBindingSlot(slot: DeploymentBindingOptionSlot) { + return (slot.kind?.toLowerCase() ?? '').includes('env') +} -const bindingSlotKey = (slot: DeploymentBindingOptionSlot) => slot.slot ?? '' +function bindingSlotKey(slot: DeploymentBindingOptionSlot) { + return slot.slot ?? '' +} -const bindingCandidateOptions = (slot: DeploymentBindingOptionSlot): BindingSelectOption[] => { +function bindingCandidateOptions(slot: DeploymentBindingOptionSlot): BindingSelectOption[] { if (isEnvBindingSlot(slot)) { return (slot.envVarCandidates ?? []) .filter(candidate => candidate.envVarId) @@ -84,13 +86,11 @@ const bindingCandidateOptions = (slot: DeploymentBindingOptionSlot): BindingSele })) } -const hasMissingRequiredBinding = (slot: DeploymentBindingOptionSlot, selectedValue?: string) => - Boolean(slot.required && !selectedValue) +function hasMissingRequiredBinding(slot: DeploymentBindingOptionSlot, selectedValue?: string) { + return Boolean(slot.required && !selectedValue) +} -const selectedDeploymentBindings = ( - slots: DeploymentBindingOptionSlot[], - selections: BindingSelections, -): DeploymentRuntimeBinding[] => { +function selectedDeploymentBindings(slots: DeploymentBindingOptionSlot[], selections: BindingSelections): DeploymentRuntimeBinding[] { return slots .map((slot): DeploymentRuntimeBinding | undefined => { const slotKey = bindingSlotKey(slot) @@ -105,13 +105,13 @@ const selectedDeploymentBindings = ( .filter((binding): binding is DeploymentRuntimeBinding => Boolean(binding)) } -const BindingOptionsPanel: FC = ({ +function BindingOptionsPanel({ slots, selections, isLoading, hasError, onChange, -}) => { +}: BindingOptionsPanelProps) { const { t } = useTranslation('deployments') if (isLoading) { @@ -192,7 +192,7 @@ const BindingOptionsPanel: FC = ({ ) } -export const DeployForm: FC = ({ +export function DeployForm({ appInstanceId, environments, releases, @@ -202,7 +202,7 @@ export const DeployForm: FC = ({ isSubmitting, onCancel, onSubmit, -}) => { +}: DeployFormProps) { const { t } = useTranslation('deployments') const presetRelease = useMemo( () => presetReleaseId ? releases.find(r => r.id === presetReleaseId) : undefined, diff --git a/web/features/deployments/components/deploy-drawer/select.tsx b/web/features/deployments/components/deploy-drawer/select.tsx index b470a80bcb..e646e2e635 100644 --- a/web/features/deployments/components/deploy-drawer/select.tsx +++ b/web/features/deployments/components/deploy-drawer/select.tsx @@ -1,6 +1,5 @@ 'use client' -import type { FC } from 'react' import type { EnvironmentOption } from '@/features/deployments/types' import { cn } from '@langgenius/dify-ui/cn' import { Select, SelectContent, SelectItem, SelectItemIndicator, SelectItemText, SelectTrigger } from '@langgenius/dify-ui/select' @@ -14,15 +13,17 @@ type FieldProps = { children: React.ReactNode } -export const Field: FC = ({ label, hint, children }) => ( -
-
-
{label}
- {hint && {hint}} +export function Field({ label, hint, children }: FieldProps) { + return ( +
+
+
{label}
+ {hint && {hint}} +
+ {children}
- {children} -
-) + ) +} type SelectOption = { value: string @@ -38,7 +39,7 @@ type SelectProps = { placeholder?: string } -export const DeploymentSelect: FC = ({ value, onChange, options, placeholder }) => { +export function DeploymentSelect({ value, onChange, options, placeholder }: SelectProps) { const { t } = useTranslation('deployments') const selectedOption = options.find(option => option.value === value) @@ -79,13 +80,15 @@ export const DeploymentSelect: FC = ({ value, onChange, options, pl type EnvironmentRowProps = { env: EnvironmentOption } -export const EnvironmentRow: FC = ({ env }) => ( -
-
- {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 }) => ( -
- - {envName} - - - {openLabel && ( - - - {openLabel} - - )} -
-) +export function EndpointRow({ envName, label, value, openLabel }: EndpointRowProps) { + return ( +
+ + {envName} + + + {openLabel && ( + + + {openLabel} + + )} +
+ ) +} 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 }) => ( -
-
{title}
-
{children}
-
-) +function InfoBlock({ title, children }: InfoBlockProps) { + return ( +
+
{title}
+
{children}
+
+ ) +} 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 ( +
+
+
{title}
+ {action} +
+ {children}
- {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 {