create a util function and add tags in Deployment Modal

Author: iamfaran

client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx

@@ -1,9 +1,11 @@
 // components/DeployItemModal.tsx
 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Select, Checkbox, Button, message, Spin, Input } from 'antd';
+import { Modal, Form, Select, Checkbox, Button, message, Spin, Input, Tag, Space } from 'antd';
 import { Environment } from '../types/environment.types';
 import { DeployableItem, BaseStats, DeployableItemConfig } from '../types/deployable-item.types';
 import { useEnvironmentContext } from '../context/EnvironmentContext';
+import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
+
 interface DeployItemModalProps<T extends DeployableItem, S extends BaseStats> {
   visible: boolean;
   item: T | null;
@@ -84,6 +86,18 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
           form={form}
           layout="vertical"
         >
+          {/* Source environment display */}
+          <Form.Item label="Source Environment">
+            <Space>
+              <strong>{sourceEnvironment.environmentName}</strong>
+              {sourceEnvironment.environmentType && (
+                <Tag color={getEnvironmentTagColor(sourceEnvironment.environmentType)}>
+                  {formatEnvironmentType(sourceEnvironment.environmentType)}
+                </Tag>
+              )}
+            </Space>
+          </Form.Item>
+
           <Form.Item
             name="targetEnvId"
             label="Target Environment"
@@ -92,7 +106,14 @@ function DeployItemModal<T extends DeployableItem, S extends BaseStats>({
             <Select placeholder="Select target environment">
               {targetEnvironments.map((env) => (
                 <Select.Option key={env.environmentId} value={env.environmentId}>
-                  {env.environmentName}
+                  <Space>
+                    {env.environmentName}
+                    {env.environmentType && (
+                      <Tag color={getEnvironmentTagColor(env.environmentType)}>
+                        {formatEnvironmentType(env.environmentType)}
+                      </Tag>
+                    )}
+                  </Space>
                 </Select.Option>
               ))}
             </Select>

client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentsTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Table, Tag, Button, Tooltip, Space } from 'antd';
 import { EditOutlined, AuditOutlined} from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
+import { getEnvironmentTagColor, formatEnvironmentType } from '../utils/environmentUtils';
 
 
 
@@ -20,19 +21,6 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
   loading,
   onRowClick,
 }) => {
-  // Get color for environment type/stage
-  const getTypeColor = (type: string): string => {
-    if (!type) return 'default'; 
-    
-    switch (type.toUpperCase()) {
-      case 'DEV': return 'blue';
-      case 'TEST': return 'orange';
-      case 'PREPROD': return 'purple';
-      case 'PROD': return 'green';
-      default: return 'default';
-    }
-  };
-
    // Open audit page in new tab
    const openAuditPage = (environmentId: string, e: React.MouseEvent) => {
     e.stopPropagation(); // Prevent row click from triggering
@@ -65,8 +53,8 @@ const EnvironmentsTable: React.FC<EnvironmentsTableProps> = ({
       dataIndex: 'environmentType',
       key: 'environmentType',
       render: (type: string) => (
-        <Tag color={getTypeColor(type || '')}>
-          {type ? type.toUpperCase() : 'UNKNOWN'}
+        <Tag color={getEnvironmentTagColor(type)}>
+          {formatEnvironmentType(type)}
         </Tag>
       ),
     },

client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts

@@ -0,0 +1,46 @@
+/**
+ * Utility functions for environment-related features
+ */
+
+/**
+ * Get the appropriate color for an environment tag based on its type
+ * @param envType The environment type/stage (e.g. 'PROD', 'DEV', 'STAGING')
+ * @returns A color string to use with Ant Design's Tag component
+ */
+export const getEnvironmentTagColor = (envType: string | undefined): string => {
+  if (!envType) return 'default';
+  
+  // Normalize to uppercase for consistent comparison
+  const type = envType.toUpperCase();
+  
+  switch (type) {
+    // Production environment
+    case 'PROD':
+      return 'red'; // Red for production - indicates caution
+    
+    // Pre-production environment
+    case 'PREPROD':
+      return 'orange'; // Orange for pre-production
+    
+    // Test environment
+    case 'TEST':
+      return 'purple'; // Purple for test environment
+    
+    // Development environment
+    case 'DEV':
+      return 'green'; // Green for development - safe to use
+      
+    default:
+      return 'default'; // Default gray for unknown types
+  }
+};
+
+/**
+ * Format an environment type for display
+ * @param envType The environment type string
+ * @returns Formatted environment type string
+ */
+export const formatEnvironmentType = (envType: string | undefined): string => {
+  if (!envType) return 'UNKNOWN';
+  return envType.toUpperCase();
+};