[Customer Portal][Web] Enhance Deployments: Product Deletion Workflow, Add/Edit Improvements & UI Refinements

apps/customer-portal/webapp/src/components/project-details/deployments/AddProductModal.tsx

@@ -30,7 +30,6 @@ import {
 import { X } from "@wso2/oxygen-ui-icons-react";
 import {
   useCallback,
-  useEffect,
   useMemo,
   useState,
   type ChangeEvent,
@@ -54,8 +53,19 @@ const INITIAL_FORM = {
   versionId: "",
   cores: "",
   tps: "",
+  description: "",
 };
 
+/**
+ * Helper to parse and validate a numeric string value.
+ * Returns a valid number or undefined if invalid.
+ */
+function parseValidNumber(value: string): number | undefined {
+  if (!value || !value.trim()) return undefined;
+  const num = Number(value);
+  return Number.isFinite(num) ? num : undefined;
+}
+
 /**
  * Modal for adding a WSO2 product to a deployment environment.
  * Product Name and Version come from APIs; Description and Initial Update Info are disabled.
@@ -104,12 +114,6 @@ export default function AddProductModal({
     onClose();
   }, [onClose]);
 
-  useEffect(() => {
-    if (!open) {
-      setForm(INITIAL_FORM);
-    }
-  }, [open]);
-
   const handleProductChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       const productId = event.target.value;
@@ -130,7 +134,8 @@ export default function AddProductModal({
   );
 
   const handleTextChange =
-    (field: "cores" | "tps") => (event: ChangeEvent<HTMLInputElement>) => {
+    (field: "cores" | "tps" | "description") =>
+    (event: ChangeEvent<HTMLInputElement>) => {
       setForm((prev) => ({ ...prev, [field]: event.target.value }));
     };
 
@@ -144,8 +149,9 @@ export default function AddProductModal({
           productId: form.productId,
           versionId: form.versionId,
           projectId,
-          cores: form.cores ? Number(form.cores) : undefined,
-          tps: form.tps ? Number(form.tps) : undefined,
+          cores: parseValidNumber(form.cores),
+          tps: parseValidNumber(form.tps),
+          description: form.description || undefined,
         },
       });
       handleClose();
@@ -161,6 +167,7 @@ export default function AddProductModal({
     form.versionId,
     form.cores,
     form.tps,
+    form.description,
     deploymentId,
     projectId,
     postProduct,
@@ -302,13 +309,15 @@ export default function AddProductModal({
         <TextField
           id="product-description"
           label="Description"
-          placeholder="Optional description..."
+          placeholder="Enter Description..."
           fullWidth
           size="small"
           multiline
           rows={2}
           sx={{ mb: 2 }}
-          disabled
+          value={form.description}
+          onChange={handleTextChange("description")}
+          disabled={isSubmitting}
         />
 
         <Box sx={{ borderTop: 1, borderColor: "divider", pt: 2, mt: 2 }}>

apps/customer-portal/webapp/src/components/project-details/deployments/DeleteProductModal.tsx

@@ -0,0 +1,126 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import {
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Typography,
+} from "@wso2/oxygen-ui";
+import { X } from "@wso2/oxygen-ui-icons-react";
+import { useCallback, type JSX } from "react";
+import type { DeploymentProductItem } from "@models/responses";
+
+export interface DeleteProductModalProps {
+  open: boolean;
+  product: DeploymentProductItem | null;
+  onClose: () => void;
+  onConfirm: () => void;
+  isDeleting?: boolean;
+}
+
+/**
+ * Confirmation modal before deleting a product.
+ * Delete is implemented as PATCH with { active: false }.
+ *
+ * @param {DeleteProductModalProps} props - open, product, onClose, onConfirm, isDeleting.
+ * @returns {JSX.Element} The confirmation modal.
+ */
+export default function DeleteProductModal({
+  open,
+  product,
+  onClose,
+  onConfirm,
+  isDeleting = false,
+}: DeleteProductModalProps): JSX.Element {
+  const handleDialogClose = useCallback(() => {
+    if (isDeleting) return;
+    onClose();
+  }, [isDeleting, onClose]);
+
+  const productName = product?.product?.label || "this product";
+  const productVersion =
+    typeof product?.version === "object"
+      ? product?.version?.label
+      : product?.version;
+  const displayName = productVersion
+    ? `${productName} (${productVersion})`
+    : productName;
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleDialogClose}
+      maxWidth="sm"
+      fullWidth
+      aria-labelledby="delete-product-modal-title"
+      aria-describedby="delete-product-modal-description"
+      slotProps={{
+        paper: {
+          sx: { position: "relative" },
+        },
+      }}
+    >
+      <IconButton
+        aria-label="Close"
+        size="small"
+        onClick={onClose}
+        disabled={isDeleting}
+        sx={{
+          position: "absolute",
+          right: 8,
+          top: 8,
+          zIndex: 1,
+        }}
+      >
+        <X size={18} />
+      </IconButton>
+      <DialogTitle id="delete-product-modal-title">Confirm Action</DialogTitle>
+      <DialogContent>
+        <Typography
+          id="delete-product-modal-description"
+          color="text.secondary"
+        >
+          {product
+            ? `Are you sure you want to delete "${displayName}"? This action cannot be undone.`
+            : "Are you sure you want to delete this product? This action cannot be undone."}
+        </Typography>
+      </DialogContent>
+      <DialogActions sx={{ px: 3, pb: 2 }}>
+        <Button variant="outlined" onClick={onClose} disabled={isDeleting}>
+          Go Back
+        </Button>
+        <Button
+          variant="contained"
+          color="error"
+          onClick={onConfirm}
+          disabled={isDeleting}
+          startIcon={
+            isDeleting ? (
+              <CircularProgress size={16} color="inherit" />
+            ) : undefined
+          }
+        >
+          {isDeleting ? "Deleting..." : "Confirm"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

apps/customer-portal/webapp/src/components/project-details/deployments/DeploymentCard.tsx

@@ -15,23 +15,23 @@
 // under the License.
 
 import type { ProjectDeploymentItem } from "@models/responses";
-import { displayValue, formatProjectDate } from "@utils/projectDetails";
+import { displayValue, formatProjectDateTime } from "@utils/projectDetails";
 import {
   Box,
   Card,
   CardContent,
+  Chip,
   Divider,
   IconButton,
   Link,
   Typography,
 } from "@wso2/oxygen-ui";
-import { Activity, Calendar, PencilLine, Trash2 } from "@wso2/oxygen-ui-icons-react";
+import { Calendar, PencilLine, Trash2 } from "@wso2/oxygen-ui-icons-react";
 import { useState, type JSX } from "react";
-import ErrorIndicator from "@components/common/error-indicator/ErrorIndicator";
-import DeploymentDocumentList from "./DeploymentDocumentList";
-import DeploymentProductList from "./DeploymentProductList";
-import EditDeploymentModal from "./EditDeploymentModal";
-import DeleteDeploymentModal from "./DeleteDeploymentModal";
+import DeploymentDocumentList from "@deployments/DeploymentDocumentList";
+import DeploymentProductList from "@deployments/DeploymentProductList";
+import EditDeploymentModal from "@deployments/EditDeploymentModal";
+import DeleteDeploymentModal from "@deployments/DeleteDeploymentModal";
 import { usePatchDeployment } from "@api/usePatchDeployment";
 
 export interface DeploymentCardProps {
@@ -47,18 +47,29 @@ export interface DeploymentCardProps {
 export default function DeploymentCard({
   deployment,
 }: DeploymentCardProps): JSX.Element {
-  const { name, url, description, createdOn } = deployment;
+  const { name, url, description, createdOn, updatedOn } = deployment;
   const projectId = deployment.project?.id ?? "";
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const patchDeployment = usePatchDeployment();
 
-  const deployedAtStr = formatProjectDate(createdOn);
+  const createdAtStr = formatProjectDateTime(createdOn);
+  const updatedAtStr = formatProjectDateTime(updatedOn);
 
   return (
     <Card>
-      <CardContent sx={{ p: 3, display: "flex", flexDirection: "column", gap: 3 }}>
-        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3, flex: 1 }}>
+      <CardContent
+        sx={{ p: 3, display: "flex", flexDirection: "column", gap: 3 }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 3,
+            flex: 1,
+          }}
+        >
           <Box sx={{ flex: 1, minWidth: 0 }}>
             <Box
               sx={{
@@ -72,7 +83,14 @@ export default function DeploymentCard({
               <Typography variant="h6" sx={{ fontWeight: 600 }}>
                 {displayValue(name, "Not Available")}
               </Typography>
-              <ErrorIndicator entityName="status and version" size="small" />
+              {deployment.type?.label && (
+                <Chip
+                  label={deployment.type.label}
+                  size="small"
+                  variant="outlined"
+                  sx={{ height: 20, fontSize: "0.75rem" }}
+                />
+              )}
             </Box>
             <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
               {url ? (
@@ -141,42 +159,27 @@ export default function DeploymentCard({
         <DeploymentDocumentList deploymentId={deployment.id} />
 
         <Divider />
-        <Box sx={{ display: "flex", gap: 3 }}>
-          <Box
-            sx={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 0.5,
-              color: "text.secondary",
-              flexShrink: 0,
-              fontSize: "0.75rem",
-            }}
-          >
-            <Calendar
-              size={14}
-              style={{ verticalAlign: "middle", display: "inline-block" }}
-            />
-            <span style={{ verticalAlign: "middle", whiteSpace: "nowrap" }}>
-              Deployed on {deployedAtStr} •{" "}
-              <ErrorIndicator entityName="version" size="small" />
-            </span>
-          </Box>
-          <Box
-            sx={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: 0.5,
-              color: "text.secondary",
-              fontSize: "0.75rem",
+        <Box
+          sx={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 0.5,
+            color: "text.secondary",
+            flexShrink: 0,
+            fontSize: "0.75rem",
+          }}
+        >
+          <Calendar
+            size={14}
+            style={{
+              verticalAlign: "middle",
+              display: "inline-block",
+              marginTop: "-2px",
             }}
-          >
-            <Activity
-              size={14}
-              style={{ verticalAlign: "middle", display: "inline-block" }}
-            />
-            <span style={{ verticalAlign: "middle" }}>Uptime: </span>
-            <ErrorIndicator entityName="uptime" size="small" />
-          </Box>
+          />
+          <span style={{ verticalAlign: "middle", whiteSpace: "nowrap" }}>
+            Created on {createdAtStr} • Updated on {updatedAtStr}
+          </span>
         </Box>
       </CardContent>