Localize shared modal, overlay and deployment-progress components.
Localize the confirm modal, delete button, deleting overlays/modal, the build-progress modal, deployment progress bar/manager and the resource upgrade modal via a shared components dictionary. Build-phase labels now resolve from the dictionary; deleting overlays take name/kind and build their own localized message (callers updated). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
@@ -12,7 +12,6 @@ import { DeleteButtonLabel } from '@/components/delete-button-label';
|
||||
import {
|
||||
DeletingCardOverlay,
|
||||
DeletingTableRowOverlay,
|
||||
deletingResourceMessage,
|
||||
deletingRowContentClass,
|
||||
} from '@/components/deleting-overlay';
|
||||
import { TruncatedText } from '@/components/truncated-text';
|
||||
@@ -442,7 +441,8 @@ export default function AdminAppsPage() {
|
||||
{rowDeleting && (
|
||||
<DeletingTableRowOverlay
|
||||
colSpan={8}
|
||||
message={deletingResourceMessage('application', app.name)}
|
||||
name={app.name}
|
||||
kind="application"
|
||||
/>
|
||||
)}
|
||||
</tr>
|
||||
@@ -467,7 +467,7 @@ export default function AdminAppsPage() {
|
||||
className={`relative card space-y-3 ${lifecycle === 'suspended' ? 'border-amber-200/80' : lifecycle === 'pending_deletion' ? 'border-red-200/80' : ''} ${cardDeleting ? 'bg-gray-50' : ''}`}
|
||||
>
|
||||
{cardDeleting && (
|
||||
<DeletingCardOverlay message={deletingResourceMessage('application', app.name)} />
|
||||
<DeletingCardOverlay name={app.name} kind="application" />
|
||||
)}
|
||||
<div className={cardDeleting ? deletingRowContentClass : undefined}>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
|
||||
@@ -11,7 +11,6 @@ import { useConfirm } from '@/components/confirm-modal';
|
||||
import { DeleteButtonLabel } from '@/components/delete-button-label';
|
||||
import {
|
||||
DeletingTableRowOverlay,
|
||||
deletingResourceMessage,
|
||||
deletingRowContentClass,
|
||||
} from '@/components/deleting-overlay';
|
||||
import { filterApplications } from '@/lib/product-type';
|
||||
@@ -203,7 +202,8 @@ export default function AppsPage() {
|
||||
{rowDeleting && (
|
||||
<DeletingTableRowOverlay
|
||||
colSpan={6}
|
||||
message={deletingResourceMessage('application', app.name)}
|
||||
name={app.name}
|
||||
kind="application"
|
||||
/>
|
||||
)}
|
||||
</tr>
|
||||
|
||||
@@ -12,7 +12,6 @@ import { useConfirm } from '@/components/confirm-modal';
|
||||
import { DeleteButtonLabel } from '@/components/delete-button-label';
|
||||
import {
|
||||
DeletingCardOverlay,
|
||||
deletingResourceMessage,
|
||||
deletingRowContentClass,
|
||||
} from '@/components/deleting-overlay';
|
||||
import { filterManagedServices } from '@/lib/product-type';
|
||||
@@ -140,7 +139,7 @@ export default function ServicesPage() {
|
||||
} ${lifecycle === 'pending_deletion' ? 'border-l-4 border-l-red-400' : ''} ${cardDeleting ? 'bg-gray-50' : ''}`}
|
||||
>
|
||||
{cardDeleting && (
|
||||
<DeletingCardOverlay message={deletingResourceMessage('service', svc.name)} />
|
||||
<DeletingCardOverlay name={svc.name} kind="service" />
|
||||
)}
|
||||
<div
|
||||
className={`flex flex-col sm:flex-row sm:items-center gap-4 flex-1 w-full min-w-0 ${cardDeleting ? deletingRowContentClass : ''}`}
|
||||
|
||||
@@ -4,6 +4,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import api from '@/lib/api';
|
||||
import { Loader2, Upload, Hammer, Rocket, CheckCircle, XCircle, X, Minimize2 } from 'lucide-react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useT } from '@/i18n/I18nProvider';
|
||||
import type { Dictionary } from '@/i18n/dictionaries/fa';
|
||||
|
||||
export interface BuildProgress {
|
||||
phase: 'uploading' | 'building' | 'deploying' | 'done' | 'failed' | 'cancelled';
|
||||
@@ -19,15 +21,21 @@ function formatBytes(bytes?: number): string {
|
||||
return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
// Icon + colour per build phase. The human-facing label comes from the
|
||||
// dictionary (components.buildPhases), keyed by the same phase name.
|
||||
export const phaseConfig = {
|
||||
uploading: { label: 'Uploading source to cluster', icon: Upload, bg: 'bg-blue-500' },
|
||||
building: { label: 'Building Docker image', icon: Hammer, bg: 'bg-amber-500' },
|
||||
deploying: { label: 'Deploying to Kubernetes', icon: Rocket, bg: 'bg-purple-500' },
|
||||
done: { label: 'Deployment complete', icon: CheckCircle, bg: 'bg-green-500' },
|
||||
failed: { label: 'Deployment failed', icon: XCircle, bg: 'bg-red-500' },
|
||||
cancelled: { label: 'Deployment cancelled', icon: XCircle, bg: 'bg-gray-500' },
|
||||
uploading: { icon: Upload, bg: 'bg-blue-500' },
|
||||
building: { icon: Hammer, bg: 'bg-amber-500' },
|
||||
deploying: { icon: Rocket, bg: 'bg-purple-500' },
|
||||
done: { icon: CheckCircle, bg: 'bg-green-500' },
|
||||
failed: { icon: XCircle, bg: 'bg-red-500' },
|
||||
cancelled: { icon: XCircle, bg: 'bg-gray-500' },
|
||||
};
|
||||
|
||||
export function buildPhaseLabel(phase: BuildProgress['phase'], t: Dictionary): string {
|
||||
return (t.components.buildPhases as Record<string, string>)[phase] ?? phase;
|
||||
}
|
||||
|
||||
export function BuildProgressModal({
|
||||
appId,
|
||||
appName,
|
||||
@@ -39,18 +47,20 @@ export function BuildProgressModal({
|
||||
progress: BuildProgress;
|
||||
onMinimize: () => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
const c = t.components;
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const cancelMutation = useMutation({
|
||||
mutationFn: () => api.post(`/deployments/applications/${appId}/cancel`),
|
||||
onSuccess: () => {
|
||||
toast.success('Deployment cancelled');
|
||||
toast.success(c.deploymentCancelled);
|
||||
queryClient.invalidateQueries({ queryKey: ['application', appId] });
|
||||
queryClient.invalidateQueries({ queryKey: ['deployments', appId] });
|
||||
queryClient.invalidateQueries({ queryKey: ['build-progress', appId] });
|
||||
queryClient.invalidateQueries({ queryKey: ['applications'] });
|
||||
},
|
||||
onError: () => toast.error('Failed to cancel deployment'),
|
||||
onError: () => toast.error(c.cancelDeploymentFailed),
|
||||
});
|
||||
|
||||
const cfg = phaseConfig[progress.phase];
|
||||
@@ -62,14 +72,14 @@ export function BuildProgressModal({
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||||
<div className="relative bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full mx-4 space-y-5">
|
||||
<div className="absolute top-4 right-4 flex items-center gap-1">
|
||||
<div className="absolute top-4 right-4 rtl:right-auto rtl:left-4 flex items-center gap-1">
|
||||
{isActive && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onMinimize}
|
||||
className="p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
|
||||
aria-label="Minimize and continue in background"
|
||||
title="Continue in background"
|
||||
aria-label={c.minimizeAria}
|
||||
title={c.continueInBackground}
|
||||
>
|
||||
<Minimize2 className="w-5 h-5" />
|
||||
</button>
|
||||
@@ -79,8 +89,8 @@ export function BuildProgressModal({
|
||||
onClick={() => cancelMutation.mutate()}
|
||||
disabled={isCancelling || progress.phase === 'failed' || progress.phase === 'cancelled'}
|
||||
className="p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors disabled:opacity-50"
|
||||
aria-label="Cancel deployment"
|
||||
title="Cancel deployment"
|
||||
aria-label={c.cancelDeploymentAria}
|
||||
title={c.cancelDeploymentAria}
|
||||
>
|
||||
{isCancelling ? <Loader2 className="w-5 h-5 animate-spin" /> : <X className="w-5 h-5" />}
|
||||
</button>
|
||||
@@ -92,7 +102,7 @@ export function BuildProgressModal({
|
||||
) : (
|
||||
<PhaseIcon className={`w-12 h-12 ${progress.phase === 'cancelled' ? 'text-gray-500' : 'text-red-500'} mx-auto mb-3`} />
|
||||
)}
|
||||
<h3 className="text-lg font-semibold text-gray-900">{cfg.label}</h3>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{buildPhaseLabel(progress.phase, t)}</h3>
|
||||
{appName && <p className="text-sm font-medium text-gray-700 mt-1">{appName}</p>}
|
||||
{progress.message && (
|
||||
<p className="text-sm text-gray-500 mt-1">{progress.message}</p>
|
||||
@@ -129,7 +139,7 @@ export function BuildProgressModal({
|
||||
|
||||
{isActive && (
|
||||
<p className="text-xs text-gray-400 text-center">
|
||||
Use minimize to keep working while deployment continues. Close (×) cancels the deployment.
|
||||
{c.minimizeHint}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
|
||||
import { AlertTriangle, Trash2, Info, X } from 'lucide-react';
|
||||
import { useT } from '@/i18n/I18nProvider';
|
||||
|
||||
/* ─── Types ────────────────────────────────────────────── */
|
||||
|
||||
@@ -32,6 +33,7 @@ export function useConfirm() {
|
||||
/* ─── Provider ─────────────────────────────────────────── */
|
||||
|
||||
export function ModalProvider({ children }: { children: React.ReactNode }) {
|
||||
const t = useT();
|
||||
const [state, setState] = useState<(ConfirmOptions & { open: boolean }) | null>(null);
|
||||
const resolveRef = useRef<((value: boolean) => void) | null>(null);
|
||||
const cancelBtnRef = useRef<HTMLButtonElement>(null);
|
||||
@@ -140,13 +142,13 @@ export function ModalProvider({ children }: { children: React.ReactNode }) {
|
||||
onClick={() => handleClose(false)}
|
||||
className="btn-secondary"
|
||||
>
|
||||
{state.cancelText || 'Cancel'}
|
||||
{state.cancelText || t.common.cancel}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleClose(true)}
|
||||
className={`inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl font-semibold text-sm transition-all duration-150 shadow-sm hover:shadow-md active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-offset-2 ${style.confirmBtn}`}
|
||||
>
|
||||
{state.confirmText || 'Confirm'}
|
||||
{state.confirmText || t.common.confirm}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import { Clock } from 'lucide-react';
|
||||
import { useT } from '@/i18n/I18nProvider';
|
||||
|
||||
export function DeleteButtonLabel({ loading, label = 'Delete' }: { loading?: boolean; label?: string }) {
|
||||
export function DeleteButtonLabel({ loading, label }: { loading?: boolean; label?: string }) {
|
||||
const t = useT();
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
<Clock className="w-3 h-3 inline animate-spin" /> Deleting…
|
||||
<Clock className="w-3 h-3 inline animate-spin" /> {t.components.deleting}
|
||||
</>
|
||||
);
|
||||
}
|
||||
return <>{label}</>;
|
||||
return <>{label ?? t.common.delete}</>;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { Clock } from 'lucide-react';
|
||||
import { useT } from '@/i18n/I18nProvider';
|
||||
|
||||
export function DeletingModal({
|
||||
open,
|
||||
@@ -11,12 +12,13 @@ export function DeletingModal({
|
||||
resourceName: string;
|
||||
resourceKind?: 'application' | 'service';
|
||||
}) {
|
||||
const t = useT();
|
||||
if (!open) return null;
|
||||
|
||||
const detail =
|
||||
resourceKind === 'service'
|
||||
? 'Removing this service and its data from the cluster. This may take a minute.'
|
||||
: 'Removing this application, deployments, and data from the cluster. This may take a minute.';
|
||||
? t.components.deletingModalDetailService
|
||||
: t.components.deletingModalDetailApp;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -31,13 +33,19 @@ export function DeletingModal({
|
||||
<Clock className="w-7 h-7 text-red-600 animate-spin" />
|
||||
</div>
|
||||
<h2 id="deleting-modal-title" className="text-lg font-semibold text-gray-900">
|
||||
Deleting…
|
||||
{t.components.deleting}
|
||||
</h2>
|
||||
<p className="text-sm text-gray-600">
|
||||
<span className="font-semibold text-gray-900">{resourceName}</span> is being permanently removed.
|
||||
{t.components.deletingModalBeingRemoved
|
||||
.split('{name}')
|
||||
.flatMap((part, i) =>
|
||||
i === 0
|
||||
? [part]
|
||||
: [<span key={i} className="font-semibold text-gray-900">{resourceName}</span>, part],
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">{detail}</p>
|
||||
<p className="text-xs text-amber-700 font-medium pt-1">Please wait — do not close this page.</p>
|
||||
<p className="text-xs text-amber-700 font-medium pt-1">{t.components.deletingModalWait}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
'use client';
|
||||
|
||||
import { Clock } from 'lucide-react';
|
||||
import { useT } from '@/i18n/I18nProvider';
|
||||
|
||||
export function deletingResourceMessage(
|
||||
kind: 'application' | 'service',
|
||||
name?: string,
|
||||
): string {
|
||||
if (kind === 'service') {
|
||||
return name ? `Deleting “${name}”…` : 'Deleting service…';
|
||||
}
|
||||
return name ? `Deleting “${name}”…` : 'Deleting application…';
|
||||
type ResourceKind = 'application' | 'service';
|
||||
|
||||
/** Resolve the "Deleting …" message for a resource using the active dictionary. */
|
||||
function useDeletingMessage(message: string | undefined, name: string | undefined, kind: ResourceKind) {
|
||||
const t = useT();
|
||||
if (message) return message;
|
||||
if (name) return t.components.deletingNamed.replace('{name}', name);
|
||||
return kind === 'service' ? t.components.deletingService : t.components.deletingApplication;
|
||||
}
|
||||
|
||||
/** Applied to row cells under the glass overlay so content stays visible but blurred. */
|
||||
@@ -21,15 +22,21 @@ const glassPanelClass =
|
||||
|
||||
/**
|
||||
* Glass overlay on a table row. Parent `<tr>` must be `relative`; render all `<td>` cells first,
|
||||
* then this as the last child while deleting.
|
||||
* then this as the last child while deleting. Pass either an explicit `message`, or `name`/`kind`
|
||||
* to have the localized message built for you.
|
||||
*/
|
||||
export function DeletingTableRowOverlay({
|
||||
colSpan,
|
||||
message = 'Deleting…',
|
||||
message,
|
||||
name,
|
||||
kind = 'application',
|
||||
}: {
|
||||
colSpan: number;
|
||||
message?: string;
|
||||
name?: string;
|
||||
kind?: ResourceKind;
|
||||
}) {
|
||||
const text = useDeletingMessage(message, name, kind);
|
||||
return (
|
||||
<td
|
||||
colSpan={colSpan}
|
||||
@@ -39,25 +46,23 @@ export function DeletingTableRowOverlay({
|
||||
>
|
||||
<div className={glassPanelClass}>
|
||||
<Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
|
||||
<span>{message}</span>
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
}
|
||||
|
||||
/** @deprecated Use DeletingTableRowOverlay on top of visible row cells */
|
||||
export function DeletingTableRowCell({
|
||||
colSpan,
|
||||
message = 'Deleting…',
|
||||
}: {
|
||||
colSpan: number;
|
||||
message?: string;
|
||||
}) {
|
||||
return <DeletingTableRowOverlay colSpan={colSpan} message={message} />;
|
||||
}
|
||||
|
||||
/** Full-card glass overlay while delete is in progress. Parent must be `relative`. */
|
||||
export function DeletingCardOverlay({ message = 'Deleting…' }: { message?: string }) {
|
||||
export function DeletingCardOverlay({
|
||||
message,
|
||||
name,
|
||||
kind = 'application',
|
||||
}: {
|
||||
message?: string;
|
||||
name?: string;
|
||||
kind?: ResourceKind;
|
||||
}) {
|
||||
const text = useDeletingMessage(message, name, kind);
|
||||
return (
|
||||
<div
|
||||
className="absolute inset-0 z-20 flex items-center justify-center gap-2 rounded-xl bg-white/45 backdrop-blur-md text-sm font-semibold text-gray-900 ring-1 ring-inset ring-white/50"
|
||||
@@ -65,7 +70,7 @@ export function DeletingCardOverlay({ message = 'Deleting…' }: { message?: str
|
||||
aria-busy="true"
|
||||
>
|
||||
<Clock className="w-4 h-4 shrink-0 animate-spin text-red-600" />
|
||||
<span>{message}</span>
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,8 @@ import { useState, useEffect } from 'react';
|
||||
import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
|
||||
import type { Application } from '@/types';
|
||||
import type { BuildProgress } from '@/components/build-progress-modal';
|
||||
import { phaseConfig } from '@/components/build-progress-modal';
|
||||
import { buildPhaseLabel } from '@/components/build-progress-modal';
|
||||
import { useT } from '@/i18n/I18nProvider';
|
||||
|
||||
type DeployingApp = {
|
||||
app: Application;
|
||||
@@ -18,6 +19,7 @@ export function DeploymentProgressBar({
|
||||
items: DeployingApp[];
|
||||
onExpand: (appId: string) => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
const [index, setIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -29,7 +31,6 @@ export function DeploymentProgressBar({
|
||||
const current = items[index];
|
||||
const progress = current.progress;
|
||||
const phase = progress?.phase ?? 'building';
|
||||
const cfg = phaseConfig[phase] ?? phaseConfig.building;
|
||||
const percent = progress?.percent ?? 0;
|
||||
const multiple = items.length > 1;
|
||||
|
||||
@@ -48,7 +49,7 @@ export function DeploymentProgressBar({
|
||||
}
|
||||
}}
|
||||
className="w-full bg-primary-600 text-white text-left hover:bg-primary-700 transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:ring-offset-2"
|
||||
aria-label={`View deployment progress for ${current.app.name}`}
|
||||
aria-label={t.components.viewProgressFor.replace('{name}', current.app.name)}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5 flex items-center gap-3">
|
||||
{multiple && (
|
||||
@@ -59,7 +60,7 @@ export function DeploymentProgressBar({
|
||||
goPrev();
|
||||
}}
|
||||
className="p-1 rounded-lg hover:bg-white/15 shrink-0"
|
||||
aria-label="Previous deployment"
|
||||
aria-label={t.components.prevDeployment}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</button>
|
||||
@@ -77,7 +78,7 @@ export function DeploymentProgressBar({
|
||||
)}
|
||||
</span>
|
||||
<span className="text-xs text-primary-100 truncate block">
|
||||
{cfg.label}
|
||||
{buildPhaseLabel(phase, t)}
|
||||
{progress?.message ? ` · ${progress.message}` : ''}
|
||||
</span>
|
||||
</span>
|
||||
@@ -99,7 +100,7 @@ export function DeploymentProgressBar({
|
||||
goNext();
|
||||
}}
|
||||
className="p-1 rounded-lg hover:bg-white/15 shrink-0"
|
||||
aria-label="Next deployment"
|
||||
aria-label={t.components.nextDeployment}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { useQuery, useQueries, keepPreviousData } from '@tanstack/react-query';
|
||||
import { useT } from '@/i18n/I18nProvider';
|
||||
import api from '@/lib/api';
|
||||
import type { Application } from '@/types';
|
||||
import { useAuthStore } from '@/lib/store';
|
||||
@@ -41,6 +42,7 @@ function stubAppFromTrack(appId: string, appName: string): Application {
|
||||
}
|
||||
|
||||
export function DeploymentProgressManager() {
|
||||
const t = useT();
|
||||
const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
|
||||
const pathname = usePathname();
|
||||
const { minimized, focusedAppId, tracked, minimize, expand, stopTracking } =
|
||||
@@ -143,7 +145,7 @@ export function DeploymentProgressManager() {
|
||||
|
||||
const focusedProgress =
|
||||
focusedItem?.progress ??
|
||||
({ phase: 'building', percent: 0, message: 'Starting deployment…' } satisfies BuildProgress);
|
||||
({ phase: 'building', percent: 0, message: t.components.startingDeployment } satisfies BuildProgress);
|
||||
|
||||
const showModal =
|
||||
!minimized &&
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { AlertTriangle, CheckCircle, Clock, CreditCard, Wallet } from 'lucide-react';
|
||||
import { useT } from '@/i18n/I18nProvider';
|
||||
|
||||
export type UpgradeCostSummary = {
|
||||
proratedAmount: number;
|
||||
@@ -24,6 +25,8 @@ export function ResourceUpgradeConfirmModal({
|
||||
onCancel: () => void;
|
||||
onConfirm: () => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
const c = t.components;
|
||||
if (!open || !upgradeCostData) return null;
|
||||
|
||||
const needsPay = upgradeCostData.proratedAmount > 0;
|
||||
@@ -33,34 +36,32 @@ export function ResourceUpgradeConfirmModal({
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 animate-fade-in">
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-2">Confirm Resource Upgrade</h2>
|
||||
<h2 className="text-xl font-bold text-gray-900 mb-2">{c.upgradeTitle}</h2>
|
||||
<p className="text-sm text-gray-500 mb-6">
|
||||
{needsPay
|
||||
? 'This upgrade requires payment for the remaining billing period.'
|
||||
: 'No additional cost for this change.'}
|
||||
{needsPay ? c.upgradeNeedsPay : c.upgradeNoCost}
|
||||
</p>
|
||||
|
||||
<div className="bg-gray-50 rounded-xl p-4 mb-6 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">Current hourly cost</span>
|
||||
<span className="text-sm text-gray-600">{c.currentHourlyCost}</span>
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{upgradeCostData.currentCost.hourly.toLocaleString()} Toman/hour
|
||||
{c.tomanPerHour.replace('{n}', upgradeCostData.currentCost.hourly.toLocaleString('en-US'))}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">New hourly cost</span>
|
||||
<span className="text-sm text-gray-600">{c.newHourlyCost}</span>
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{upgradeCostData.newCost.hourly.toLocaleString()} Toman/hour
|
||||
{c.tomanPerHour.replace('{n}', upgradeCostData.newCost.hourly.toLocaleString('en-US'))}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">Remaining hours in period</span>
|
||||
<span className="text-sm font-medium text-gray-900">{upgradeCostData.remainingHours} hours</span>
|
||||
<span className="text-sm text-gray-600">{c.remainingHoursInPeriod}</span>
|
||||
<span className="text-sm font-medium text-gray-900">{c.hoursUnit.replace('{n}', String(upgradeCostData.remainingHours))}</span>
|
||||
</div>
|
||||
<div className="border-t pt-3 flex items-center justify-between">
|
||||
<span className="text-sm font-semibold text-gray-700">Prorated amount to pay</span>
|
||||
<span className="text-sm font-semibold text-gray-700">{c.proratedAmountToPay}</span>
|
||||
<span className="text-lg font-bold text-primary-600">
|
||||
{upgradeCostData.proratedAmount.toLocaleString()} Toman
|
||||
{c.tomanUnit.replace('{n}', upgradeCostData.proratedAmount.toLocaleString('en-US'))}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,20 +69,21 @@ export function ResourceUpgradeConfirmModal({
|
||||
<div className="bg-blue-50 rounded-xl p-4 mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Wallet className="w-5 h-5 text-blue-500" />
|
||||
<span className="text-sm text-blue-700">Wallet Balance</span>
|
||||
<span className="text-sm text-blue-700">{c.walletBalance}</span>
|
||||
</div>
|
||||
<span className="text-lg font-bold text-blue-900">
|
||||
{walletBalance?.toLocaleString() ?? 0} Toman
|
||||
{c.tomanUnit.replace('{n}', (walletBalance ?? 0).toLocaleString('en-US'))}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{walletShort && (
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
|
||||
<p className="text-sm text-amber-700">
|
||||
<AlertTriangle className="w-4 h-4 inline mr-1" />
|
||||
Wallet is short by{' '}
|
||||
{(upgradeCostData.proratedAmount - (walletBalance ?? 0)).toLocaleString()} Toman. You can pay the
|
||||
delta by gateway on the invoice page.
|
||||
<AlertTriangle className="w-4 h-4 inline mr-1 rtl:mr-0 rtl:ml-1" />
|
||||
{c.walletShortBy.replace(
|
||||
'{n}',
|
||||
(upgradeCostData.proratedAmount - (walletBalance ?? 0)).toLocaleString('en-US'),
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -92,7 +94,7 @@ export function ResourceUpgradeConfirmModal({
|
||||
onClick={onCancel}
|
||||
className="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl font-medium text-gray-700 hover:bg-gray-50 transition-all"
|
||||
>
|
||||
Cancel
|
||||
{t.common.cancel}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -102,15 +104,15 @@ export function ResourceUpgradeConfirmModal({
|
||||
>
|
||||
{isPending ? (
|
||||
<>
|
||||
<Clock className="w-4 h-4 animate-spin" /> Applying…
|
||||
<Clock className="w-4 h-4 animate-spin" /> {c.applying}
|
||||
</>
|
||||
) : needsPay ? (
|
||||
<>
|
||||
<CreditCard className="w-4 h-4" /> Create Invoice & Pay
|
||||
<CreditCard className="w-4 h-4" /> {c.createInvoicePay}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircle className="w-4 h-4" /> Apply Changes
|
||||
<CheckCircle className="w-4 h-4" /> {c.applyChanges}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
@@ -136,6 +136,50 @@ const en: Dictionary = {
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
deleting: 'Deleting…',
|
||||
deletingNamed: 'Deleting “{name}”…',
|
||||
deletingService: 'Deleting service…',
|
||||
deletingApplication: 'Deleting application…',
|
||||
deletingModalBeingRemoved: '“{name}” is being permanently removed.',
|
||||
deletingModalDetailApp: 'Removing this application, deployments, and data from the cluster. This may take a minute.',
|
||||
deletingModalDetailService: 'Removing this service and its data from the cluster. This may take a minute.',
|
||||
deletingModalWait: 'Please wait — do not close this page.',
|
||||
buildPhases: {
|
||||
uploading: 'Uploading source to cluster',
|
||||
building: 'Building Docker image',
|
||||
deploying: 'Deploying to Kubernetes',
|
||||
done: 'Deployment complete',
|
||||
failed: 'Deployment failed',
|
||||
cancelled: 'Deployment cancelled',
|
||||
},
|
||||
startingDeployment: 'Starting deployment…',
|
||||
deploymentCancelled: 'Deployment cancelled',
|
||||
cancelDeploymentFailed: 'Failed to cancel deployment',
|
||||
minimizeHint: 'Use minimize to keep working while deployment continues. Close (×) cancels the deployment.',
|
||||
continueInBackground: 'Continue in background',
|
||||
minimizeAria: 'Minimize and continue in background',
|
||||
cancelDeploymentAria: 'Cancel deployment',
|
||||
viewProgressFor: 'View deployment progress for {name}',
|
||||
prevDeployment: 'Previous deployment',
|
||||
nextDeployment: 'Next deployment',
|
||||
upgradeTitle: 'Confirm Resource Upgrade',
|
||||
upgradeNeedsPay: 'This upgrade requires payment for the remaining billing period.',
|
||||
upgradeNoCost: 'No additional cost for this change.',
|
||||
currentHourlyCost: 'Current hourly cost',
|
||||
newHourlyCost: 'New hourly cost',
|
||||
remainingHoursInPeriod: 'Remaining hours in period',
|
||||
proratedAmountToPay: 'Prorated amount to pay',
|
||||
walletBalance: 'Wallet Balance',
|
||||
tomanPerHour: '{n} Toman/hour',
|
||||
hoursUnit: '{n} hours',
|
||||
tomanUnit: '{n} Toman',
|
||||
walletShortBy: 'Wallet is short by {n} Toman. You can pay the delta by gateway on the invoice page.',
|
||||
applying: 'Applying…',
|
||||
createInvoicePay: 'Create Invoice & Pay',
|
||||
applyChanges: 'Apply Changes',
|
||||
},
|
||||
|
||||
nav: {
|
||||
sectionAdmin: 'Admin',
|
||||
sectionTechnical: 'Technical',
|
||||
|
||||
@@ -135,6 +135,50 @@ const fa = {
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
deleting: 'در حال حذف…',
|
||||
deletingNamed: 'در حال حذف «{name}»…',
|
||||
deletingService: 'در حال حذف سرویس…',
|
||||
deletingApplication: 'در حال حذف اپلیکیشن…',
|
||||
deletingModalBeingRemoved: '«{name}» برای همیشه حذف میشود.',
|
||||
deletingModalDetailApp: 'این اپلیکیشن، دیپلویها و دادههایش از کلاستر حذف میشود. ممکن است یک دقیقه طول بکشد.',
|
||||
deletingModalDetailService: 'این سرویس و دادههایش از کلاستر حذف میشود. ممکن است یک دقیقه طول بکشد.',
|
||||
deletingModalWait: 'لطفاً صبر کن — این صفحه را نبند.',
|
||||
buildPhases: {
|
||||
uploading: 'آپلود سورس به کلاستر',
|
||||
building: 'ساخت ایمیج داکر',
|
||||
deploying: 'انتشار روی کوبرنتیز',
|
||||
done: 'دیپلوی کامل شد',
|
||||
failed: 'دیپلوی ناموفق بود',
|
||||
cancelled: 'دیپلوی لغو شد',
|
||||
},
|
||||
startingDeployment: 'در حال شروع دیپلوی…',
|
||||
deploymentCancelled: 'دیپلوی لغو شد',
|
||||
cancelDeploymentFailed: 'لغو دیپلوی ناموفق بود',
|
||||
minimizeHint: 'برای ادامهٔ کار حین دیپلوی، کوچک کن. بستن (×) دیپلوی را لغو میکند.',
|
||||
continueInBackground: 'ادامه در پسزمینه',
|
||||
minimizeAria: 'کوچک کن و در پسزمینه ادامه بده',
|
||||
cancelDeploymentAria: 'لغو دیپلوی',
|
||||
viewProgressFor: 'مشاهدهٔ پیشرفت دیپلوی برای {name}',
|
||||
prevDeployment: 'دیپلوی قبلی',
|
||||
nextDeployment: 'دیپلوی بعدی',
|
||||
upgradeTitle: 'تأیید ارتقای منابع',
|
||||
upgradeNeedsPay: 'این ارتقا نیازمند پرداخت برای بازهٔ باقیماندهٔ صورتحساب است.',
|
||||
upgradeNoCost: 'این تغییر هزینهٔ اضافهای ندارد.',
|
||||
currentHourlyCost: 'هزینهٔ ساعتی فعلی',
|
||||
newHourlyCost: 'هزینهٔ ساعتی جدید',
|
||||
remainingHoursInPeriod: 'ساعتهای باقیمانده در بازه',
|
||||
proratedAmountToPay: 'مبلغ تسهیمشده برای پرداخت',
|
||||
walletBalance: 'موجودی کیفپول',
|
||||
tomanPerHour: '{n} تومان/ساعت',
|
||||
hoursUnit: '{n} ساعت',
|
||||
tomanUnit: '{n} تومان',
|
||||
walletShortBy: 'موجودی کیفپول {n} تومان کم است. میتوانی مابهالتفاوت را از طریق درگاه در صفحهٔ فاکتور پرداخت کنی.',
|
||||
applying: 'در حال اعمال…',
|
||||
createInvoicePay: 'ساخت فاکتور و پرداخت',
|
||||
applyChanges: 'اعمال تغییرات',
|
||||
},
|
||||
|
||||
nav: {
|
||||
sectionAdmin: 'مدیریت',
|
||||
sectionTechnical: 'فنی',
|
||||
|
||||
Reference in New Issue
Block a user