Update UI for the EnvironmentsListing Page

Author: iamfaran

client/packages/lowcoder/src/pages/setting/environments/EnvironmentsList.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Typography, Alert, Input, Button, Space, Empty, Card, Spin, Row, Col, Tooltip, Badge } from "antd";
-import { SearchOutlined,  CloudServerOutlined, SyncOutlined, PlusOutlined} from "@ant-design/icons";
+import React, { useState, useEffect } from "react";
+import { Alert, Empty, Spin } from "antd";
+import { SyncOutlined } from "@ant-design/icons";
+import { AddIcon, Search, TacoButton } from "lowcoder-design";
 import { useHistory } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { selectEnvironments, selectEnvironmentsLoading, selectEnvironmentsError } from "redux/selectors/enterpriseSelectors";
@@ -9,10 +10,49 @@ import { Environment } from "./types/environment.types";
 import EnvironmentsTable from "./components/EnvironmentsTable";
 import CreateEnvironmentModal from "./components/CreateEnvironmentModal";
 import { buildEnvironmentId } from "@lowcoder-ee/constants/routesURL";
-import { getEnvironmentTagColor } from "./utils/environmentUtils";
 import { createEnvironment } from "./services/environments.service";
-
-const { Title, Text } = Typography;
+import styled from "styled-components";
+
+const EnvironmentsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 92px;
+  padding: 28px 36px;
+  width: 100%;
+`;
+
+const Title = styled.div`
+  font-weight: 500;
+  font-size: 18px;
+  color: #222222;
+  line-height: 18px;
+  flex-grow: 1;
+`;
+
+const AddBtn = styled(TacoButton)`
+  min-width: 96px;
+  width: fit-content;
+  height: 32px;
+`;
+
+const RefreshBtn = styled(TacoButton)`
+  width: fit-content;
+  height: 32px;
+  margin-right: 12px;
+`;
+
+const BodyWrapper = styled.div`
+  width: 100%;
+  flex-grow: 1;
+  padding: 0 24px;
+`;
 
 /**
  * Environment Listing Page Component
@@ -29,13 +69,10 @@ const EnvironmentsList: React.FC = () => {
   const [searchText, setSearchText] = useState("");
   const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
-  
-
 
   // Hook for navigation
   const history = useHistory();
 
-
   // Filter environments based on search text
   const filteredEnvironments = environments.filter((env) => {
     const searchLower = searchText.toLowerCase();
@@ -82,182 +119,45 @@ const EnvironmentsList: React.FC = () => {
     }
   };
 
-  // Count environment types
-  const environmentCounts = environments.reduce((counts, env) => {
-    const type = env.environmentType.toUpperCase();
-    counts[type] = (counts[type] || 0) + 1;
-    return counts;
-  }, {} as Record<string, number>);
-
   return (
-    <div 
-      className="environments-container" 
-      style={{ 
-        padding: "24px",
-        flex: 1,
-        minWidth: "1000px",
-         // Ensure minimum width to prevent excessive shrinking
-      }}
-    >
-      {/* Modern gradient header */}
-      <div
-        className="environments-header"
-        style={{
-          marginBottom: "24px",
-          background: 'linear-gradient(135deg, #0050b3 0%, #1890ff 100%)',
-          padding: '24px 32px',
-          borderRadius: '12px',
-          color: 'white',
-          boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
-        }}
-      >
-        <Row justify="space-between" align="middle" gutter={[16, 16]}>
-          <Col xs={24} sm={16}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
-              <div style={{
-                fontSize: '36px',
-                backgroundColor: 'rgba(255,255,255,0.2)',
-                width: '72px',
-                height: '72px',
-                borderRadius: '50%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
-              }}>
-                <CloudServerOutlined />
-              </div>
-              <div>
-                <Title level={2} style={{ margin: '0 0 4px 0', color: 'white' }}>
-                  Environments
-                </Title>
-                <Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: '16px' }}>
-                  Manage your deployment environments across dev, test, preprod, and production
-                </Text>
-              </div>
-            </div>
-          </Col>
-          <Col xs={24} sm={8} style={{ textAlign: 'right' }}>
-            <Space size="middle">
-              <Button 
-                icon={<PlusOutlined />} 
-                onClick={() => setIsCreateModalVisible(true)}
-                type="primary"
-                style={{
-                  backgroundColor: 'rgba(255, 255, 255, 0.15)',
-                  borderColor: 'rgba(255, 255, 255, 0.4)',
-                  color: 'white',
-                  fontWeight: 500
-                }}
-              >
-                Create Environment
-              </Button>
-              <Button 
-                icon={<SyncOutlined spin={isLoading} />} 
-                onClick={handleRefresh}
-                loading={isLoading}
-                type="default"
-                style={{
-                  backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                  borderColor: 'rgba(255, 255, 255, 0.4)',
-                  color: 'white',
-                  fontWeight: 500
-                }}
-              >
-                Refresh
-              </Button>
-            </Space>
-          </Col>
-        </Row>
-      </div>
-
-      {/* Environment type stats */}
-      {environments.length > 0 && (
-        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
-          <Col span={24}>
-            <Card 
-              title="Environment Overview" 
-              style={{ 
-                borderRadius: '12px', 
-                boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
-              }}
-              styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' } }}
-              bodyStyle={{ padding: '24px' }}
-            >
-              <Row gutter={[32, 16]} justify="space-around">
-                <Col>
-                  <Tooltip title="Total number of environments">
-                    <div style={{ textAlign: 'center' }}>
-                      <div style={{ fontSize: '38px', fontWeight: 600, color: '#1890ff' }}>
-                        {environments.length}
-                      </div>
-                      <div style={{ fontSize: '14px', color: '#8c8c8c', marginTop: '4px' }}>
-                        Total Environments
-                      </div>
-                    </div>
-                  </Tooltip>
-                </Col>
-
-                {['PROD', 'PREPROD', 'TEST', 'DEV'].map(type => (
-                  <Col key={type}>
-                    <Tooltip title={`Number of ${type} environments`}>
-                      <div style={{ textAlign: 'center' }}>
-                        <div style={{ 
-                          fontSize: '38px', 
-                          fontWeight: 600, 
-                          color: getEnvironmentTagColor(type) === 'default' ? '#8c8c8c' : getEnvironmentTagColor(type) 
-                        }}>
-                          {environmentCounts[type] || 0}
-                        </div>
-                        <div style={{ fontSize: '14px', color: '#8c8c8c', marginTop: '4px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '6px' }}>
-                          <Badge color={getEnvironmentTagColor(type)} /> 
-                          {type} Environments
-                        </div>
-                      </div>
-                    </Tooltip>
-                  </Col>
-                ))}
-              </Row>
-            </Card>
-          </Col>
-        </Row>
-      )}
-
-      {/* Main content card */}
-      <Card 
-        title="Environment List" 
-        style={{ 
-          borderRadius: '12px', 
-          boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
-        }}
-        styles={{ header: { borderBottom: '1px solid #f0f0f0', padding: '16px 24px' } }}
-        bodyStyle={{ padding: '24px' }}
-        extra={
-          <Input
-            placeholder="Search environments"
-            value={searchText}
-            onChange={(e) => setSearchText(e.target.value)}
-            style={{ width: 250 }}
-            prefix={<SearchOutlined />}
-            allowClear
-          />
-        }
-      >
+    <EnvironmentsWrapper>
+      <HeaderWrapper>
+        <Title>Environments</Title>
+        <Search
+          placeholder="Search"
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          style={{ width: "192px", height: "32px", margin: "0 12px 0 0" }}
+        />
+        <RefreshBtn 
+          buttonType="normal" 
+          icon={<SyncOutlined spin={isLoading} />}
+          onClick={handleRefresh}
+          loading={isLoading}
+        >
+          Refresh
+        </RefreshBtn>
+        <AddBtn buttonType="primary" onClick={() => setIsCreateModalVisible(true)}>
+          New Environment
+        </AddBtn>
+      </HeaderWrapper>
+
+      <BodyWrapper>
         {/* Error handling */}
         {error && (
           <Alert
             message="Error loading environments"
             description={error}
             type="error"
             showIcon
-            style={{ marginBottom: "24px" }}
+            style={{ marginBottom: "16px" }}
           />
         )}
 
         {/* Loading, empty state or table */}
         {isLoading ? (
           <div style={{ display: 'flex', justifyContent: 'center', padding: '60px 0' }}>
-            <Spin size="large" tip="Loading environments..." />
+            <Spin size="large" />
           </div>
         ) : environments.length === 0 && !error ? (
           <Empty
@@ -286,7 +186,7 @@ const EnvironmentsList: React.FC = () => {
             Showing {filteredEnvironments.length} of {environments.length} environments
           </div>
         )}
-      </Card>
+      </BodyWrapper>
 
       {/* Create Environment Modal */}
       <CreateEnvironmentModal
@@ -295,7 +195,7 @@ const EnvironmentsList: React.FC = () => {
         onSave={handleCreateEnvironment}
         loading={isCreating}
       />
-    </div>
+    </EnvironmentsWrapper>
   );
 };