create utils for different env colors

lowcoder-org · dragonpoo · May 20, 2025 · May 9, 2025 · May 9, 2025 · May 9, 2025
commit 9a8329e68e363f071229d86a8a2e0dda26ed6aa2
diff --git a/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx b/client/packages/lowcoder/src/pages/setting/environments/EnvironmentDetail.tsx
@@ -26,6 +26,7 @@ import WorkspacesTab from "./components/WorkspacesTab";
 import UserGroupsTab from "./components/UserGroupsTab";
 import EnvironmentHeader from "./components/EnvironmentHeader";
 import ModernBreadcrumbs from "./components/ModernBreadcrumbs";
+import { getEnvironmentTagColor } from "./utils/environmentUtils";
 const { Title, Text } = Typography;
 const { TabPane } = Tabs;
 
@@ -74,15 +75,7 @@ const EnvironmentDetail: React.FC = () => {
     }
   };
 
-  // Dropdown menu for environment actions
-  const actionsMenu = (
-    <Menu>
-      <Menu.Item key="edit" icon={<EditOutlined />} onClick={handleEditClick}>
-        Edit Environment
-      </Menu.Item>
-      {/* Add more menu items here if needed */}
-    </Menu>
-  );
+
 
   if (isLoading) {
     return (
@@ -149,18 +142,6 @@ const EnvironmentDetail: React.FC = () => {
       title: environment.environmentName
     }
   ];
-
-  // Get environment type tag color
-  const getEnvironmentTypeColor = () => {
-    switch(environment.environmentType) {
-      case 'production':
-        return 'red';
-      case 'testing':
-        return 'orange';
-      default:
-        return 'blue';
-    }
-  };
 
   return (
     <div
@@ -202,7 +183,7 @@ const EnvironmentDetail: React.FC = () => {
           </Descriptions.Item>
           <Descriptions.Item label="Environment Type">
             <Tag
-              color={getEnvironmentTypeColor()}
+              color={getEnvironmentTagColor(environment.environmentType)}
               style={{ borderRadius: '12px' }}
             >
               {environment.environmentType}

diff --git a/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx b/client/packages/lowcoder/src/pages/setting/environments/components/EnvironmentHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Button, Tag, Typography, Row, Col } from 'antd';
 import { EditOutlined, EnvironmentOutlined } from '@ant-design/icons';
 import { Environment } from '../types/environment.types';
+import { getEnvironmentTagColor, getEnvironmentHeaderGradient } from '../utils/environmentUtils';
 
 const { Title, Text } = Typography;
 
@@ -18,36 +19,12 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
   environment, 
   onEditClick 
 }) => {
-  // Determine header gradient based on environment type
-  const getHeaderGradient = () => {
-    switch(environment.environmentType) {
-      case 'production':
-        return 'linear-gradient(135deg, #f5222d 0%, #fa8c16 100%)';
-      case 'testing':
-        return 'linear-gradient(135deg, #fa8c16 0%, #faad14 100%)';
-      default:
-        return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
-    }
-  };
-
-  // Get environment type tag color
-  const getEnvironmentTypeColor = () => {
-    switch(environment.environmentType) {
-      case 'production':
-        return 'red';
-      case 'testing':
-        return 'orange';
-      default:
-        return 'blue';
-    }
-  };
-
   return (
     <div
       className="environment-header"
       style={{
         marginBottom: "24px",
-        background: getHeaderGradient(),
+        background: getEnvironmentHeaderGradient(environment.environmentType),
         padding: '20px 24px',
         borderRadius: '8px',
         color: 'white',
@@ -78,7 +55,7 @@ const EnvironmentHeader: React.FC<EnvironmentHeaderProps> = ({
                   ID: {environment.environmentId}
                 </Text>
                 <Tag 
-                  color={getEnvironmentTypeColor()}
+                  color={getEnvironmentTagColor(environment.environmentType)}
                   style={{ marginLeft: 0, borderRadius: '12px' }}
                 >
                   {environment.environmentType}

diff --git a/client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts b/client/packages/lowcoder/src/pages/setting/environments/utils/environmentUtils.ts
@@ -4,7 +4,7 @@
 
 /**
  * Get the appropriate color for an environment tag based on its type
- * @param envType The environment type/stage (e.g. 'PROD', 'DEV', 'STAGING')
+ * @param envType The environment type/stage (DEV, TEST, PREPROD, PROD)
  * @returns A color string to use with Ant Design's Tag component
  */
 export const getEnvironmentTagColor = (envType: string | undefined): string => {
@@ -14,27 +14,52 @@ export const getEnvironmentTagColor = (envType: string | undefined): string => {
   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
+      return 'blue'; // Blue for development
 
     default:
       return 'default'; // Default gray for unknown types
   }
 };
 
+/**
+ * Get the appropriate background gradient for an environment based on its type
+ * @param envType The environment type/stage (DEV, TEST, PREPROD, PROD)
+ * @returns A CSS linear gradient string for the background
+ */
+export const getEnvironmentHeaderGradient = (envType: string | undefined): string => {
+  if (!envType) return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
+
+  // Normalize to uppercase for consistent comparison
+  const type = envType.toUpperCase();
+
+  switch (type) {
+    case 'PROD':
+      return 'linear-gradient(135deg, #f5222d 0%, #fa8c16 100%)';
+
+    case 'PREPROD':
+      return 'linear-gradient(135deg, #fa8c16 0%, #faad14 100%)';
+
+    case 'TEST':
+      return 'linear-gradient(135deg, #722ed1 0%, #b37feb 100%)';
+
+    case 'DEV':
+      return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
+
+    default:
+      return 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)';
+  }
+};
+
 /**
  * Format an environment type for display
  * @param envType The environment type string