From 930688c559ff90850556047acb48604a2d75b4cc Mon Sep 17 00:00:00 2001 From: Stephen Zhou <38493346+hyoban@users.noreply.github.com> Date: Wed, 29 Apr 2026 16:12:44 +0800 Subject: [PATCH] tweaks --- .../components/deploy-drawer/form.tsx | 114 ++++++++---------- .../deployments/detail/deploy-tab.tsx | 98 +++++++++------ .../detail/deploy-tab/deployment-panel.tsx | 98 ++++++--------- .../deploy-tab/deployment-status-summary.tsx | 10 ++ web/features/deployments/utils.ts | 10 +- web/i18n/en-US/deployments.json | 8 +- web/i18n/zh-Hans/deployments.json | 8 +- 7 files changed, 182 insertions(+), 164 deletions(-) diff --git a/web/features/deployments/components/deploy-drawer/form.tsx b/web/features/deployments/components/deploy-drawer/form.tsx index 383dff7c8b..0dcb52afff 100644 --- a/web/features/deployments/components/deploy-drawer/form.tsx +++ b/web/features/deployments/components/deploy-drawer/form.tsx @@ -43,51 +43,37 @@ type DeployFormProps = { onSubmit: (params: DeployFormSubmit) => void } -type DisabledBindingControlProps = { +type RuntimeBindingGroupProps = { label: string - placeholder: string -} - -const DisabledBindingControl: FC = ({ label, placeholder }) => ( -
- {label} - -
-) - -type DisabledBindingGroupProps = { - label: string - placeholder: string bindings: RuntimeBindingDisplay[] isLoading: boolean } -const DisabledBindingGroup: FC = ({ label, placeholder, bindings, isLoading }) => { - if (bindings.length === 0) { - return ( - - ) - } +const RuntimeBindingGroup: FC = ({ label, bindings, isLoading }) => { + const { t } = useTranslation('deployments') return ( -
- {bindings.map(binding => ( - - ))} +
+
{label}
+
+ {isLoading + ? {t('deployDrawer.loadingBindings')} + : bindings.length === 0 + ? {t('deployDrawer.noBindingRequired')} + : bindings.map(binding => ( +
+ + {runtimeBindingLabel(binding)} + + + {runtimeBindingValue(binding)} + +
+ ))} +
) } @@ -214,35 +200,31 @@ export const DeployForm: FC = ({ )} -
-
-
{t('deployDrawer.runtimeCredentials')}
- {t('deployDrawer.bindingsDisabled')} +
+
+
+
{t('deployDrawer.runtimeCredentials')}
+ {t('deployDrawer.bindingsDisabled')} +
+ + {t('deployDrawer.readOnly')} +
- - - - - - - - - + + +
diff --git a/web/features/deployments/detail/deploy-tab.tsx b/web/features/deployments/detail/deploy-tab.tsx index 7b3bea39aa..69ca0e7c5d 100644 --- a/web/features/deployments/detail/deploy-tab.tsx +++ b/web/features/deployments/detail/deploy-tab.tsx @@ -21,13 +21,14 @@ import { environmentId, environmentMode, environmentName, + isUndeployedDeploymentRow, releaseCommit, releaseLabel, } from '../utils' import { DeploymentPanel } from './deploy-tab/deployment-panel' import { DeploymentStatusSummary } from './deploy-tab/deployment-status-summary' -const GRID_TEMPLATE = 'lg:grid-cols-[1.2fr_0.8fr_1fr_auto]' +const GRID_TEMPLATE = 'lg:grid-cols-[minmax(180px,1fr)_minmax(140px,0.75fr)_minmax(180px,0.85fr)_240px]' type DeployTabProps = { instanceId: string @@ -41,14 +42,32 @@ const DeployTab: FC = ({ instanceId: appId }) => { const { environmentOptions } = useSourceApps() const rows = useMemo( + () => appData?.environmentDeployments.data?.filter(row => row.environment?.id) ?? [], + [appData?.environmentDeployments.data], + ) + const deployedRuntimeRows = useMemo( () => deployedRows(appData?.environmentDeployments.data), [appData?.environmentDeployments.data], ) - const deployedEnvIds = new Set(rows.map(row => environmentId(row.environment))) + const deployedEnvIds = new Set(deployedRuntimeRows.map(row => environmentId(row.environment))) const availableEnvs = environmentOptions.filter(env => env.id && !deployedEnvIds.has(env.id)) - const [expanded, setExpanded] = useState(() => rows[0] ? environmentId(rows[0].environment) : null) - const toggle = (id: string) => setExpanded(prev => (prev === id ? null : id)) + const expandableEnvIds = useMemo( + () => rows.filter(row => !isUndeployedDeploymentRow(row)).map(row => environmentId(row.environment)), + [rows], + ) + const [expanded, setExpanded] = useState() + const activeExpanded = expanded === undefined + ? expandableEnvIds[0] ?? null + : expanded !== null && expandableEnvIds.includes(expanded) + ? expanded + : null + const toggle = (id: string) => { + setExpanded((prev) => { + const current = prev === undefined ? expandableEnvIds[0] ?? null : prev + return current === id ? null : id + }) + } const [deployMenuOpen, setDeployMenuOpen] = useState(false) return ( @@ -126,39 +145,46 @@ const DeployTab: FC = ({ instanceId: appId }) => {
{t('deployTab.col.environment')}
{t('deployTab.col.currentRelease')}
{t('deployTab.col.status')}
-
+
{t('deployTab.col.actions')}
{rows.map((row) => { const envId = environmentId(row.environment) - const isExpanded = expanded === envId + const isUndeployed = isUndeployedDeploymentRow(row) + const isExpanded = !isUndeployed && activeExpanded === envId const status = deploymentStatus(row) const release = activeRelease(row) const actions = (
e.stopPropagation()}> - - - - - - undeployDeployment(appId, envId, deploymentId(row), status === 'deploying')} + {!isUndeployed && ( + + - - {status === 'deploying' ? t('deployTab.cancelDeployment') : t('deployTab.undeploy')} - - - - + + + + undeployDeployment(appId, envId, deploymentId(row), status === 'deploying')} + > + + {status === 'deploying' ? t('deployTab.cancelDeployment') : t('deployTab.undeploy')} + + + + + )}
) - const chevron = ( + const chevron = !isUndeployed && ( = ({ instanceId: appId }) => {