Improve UI for Errors and add Filters

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

@@ -93,12 +93,37 @@ const EnvironmentDetail: React.FC = () => {
 
   if (error || !environment) {
     return (
-      <Alert
-        message="Error loading environment"
-        description={error || "Environment not found"}
-        type="error"
-        showIcon
-      />
+      <div style={{ padding: "24px", flex: 1 }}>
+        <Breadcrumb style={{ marginBottom: "16px" }}>
+          <Breadcrumb.Item>
+            <span
+              style={{ cursor: "pointer" }}
+              onClick={() => history.push("/setting/environments")}
+            >
+              <HomeOutlined /> Environments
+            </span>
+          </Breadcrumb.Item>
+          <Breadcrumb.Item>Not Found</Breadcrumb.Item>
+        </Breadcrumb>
+
+        <Card>
+          <div style={{ textAlign: "center", padding: "40px 0" }}>
+            <Title level={3} style={{ color: "#ff4d4f" }}>
+              Environment Not Found
+            </Title>
+            <Text type="secondary" style={{ display: "block", margin: "16px 0" }}>
+              {error || "The environment you're looking for doesn't exist or you don't have permission to view it."}
+            </Text>
+            <Button 
+              type="primary"
+              onClick={() => history.push("/setting/environments")}
+              style={{ marginTop: "16px" }}
+            >
+              Return to Environments List
+            </Button>
+          </div>
+        </Card>
+      </div>
     );
   }
 

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/DeployableItemsList.tsx

@@ -1,12 +1,14 @@
 // components/DeployableItemsList.tsx
-import React from 'react';
-import { Table, Tag, Empty, Spin, Switch, Space, Button, Tooltip } from 'antd';
-import { CloudUploadOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import { Table, Tag, Empty, Spin, Switch, Space, Button, Tooltip, Input } from 'antd';
+import { CloudUploadOutlined, SearchOutlined } from '@ant-design/icons';
 import history from '@lowcoder-ee/util/history';
 import { DeployableItem, BaseStats, DeployableItemConfig } from '../types/deployable-item.types';
 import { Environment } from '../types/environment.types';
 import { useDeployModal } from '../context/DeployModalContext';
 
+const { Search } = Input;
+
 interface DeployableItemsListProps<T extends DeployableItem, S extends BaseStats> {
   items: T[];
   loading: boolean;
@@ -30,6 +32,14 @@ function DeployableItemsList<T extends DeployableItem, S extends BaseStats>({
 }: DeployableItemsListProps<T, S>) {
 
   const { openDeployModal } = useDeployModal();
+  const [searchText, setSearchText] = useState('');
+
+  // Filter items based on search
+  const filteredItems = searchText
+    ? items.filter(item => 
+        item.name.toLowerCase().includes(searchText.toLowerCase()) || 
+        item.id.toLowerCase().includes(searchText.toLowerCase()))
+    : items;
 
   // Handle row click for navigation
   const handleRowClick = (item: T) => {
@@ -53,8 +63,7 @@ function DeployableItemsList<T extends DeployableItem, S extends BaseStats>({
     onToggleManaged,
     openDeployModal,
     additionalParams 
-    }) 
-
+    });
 
   if (loading) {
     return (
@@ -76,18 +85,36 @@ function DeployableItemsList<T extends DeployableItem, S extends BaseStats>({
   const hasNavigation = config.buildDetailRoute({}) !== '#';
 
   return (
-    <Table
-      columns={columns}
-      dataSource={items}
-      rowKey={config.idField}
-      pagination={{ pageSize: 10 }}
-      size="middle"
-      scroll={{ x: 'max-content' }} 
-      onRow={(record) => ({
-        onClick: hasNavigation ? () => handleRowClick(record) : undefined,
-        style: hasNavigation ? { cursor: 'pointer' } : undefined,
-      })}
-    />
+    <>
+      {/* Search Bar */}
+      <div style={{ marginBottom: 16 }}>
+        <Search
+          placeholder={`Search ${config.pluralLabel} by name or ID`}
+          allowClear
+          onSearch={value => setSearchText(value)}
+          onChange={e => setSearchText(e.target.value)}
+          style={{ width: 300 }}
+        />
+        {searchText && filteredItems.length !== items.length && (
+          <div style={{ marginTop: 8 }}>
+            Showing {filteredItems.length} of {items.length} {config.pluralLabel.toLowerCase()}
+          </div>
+        )}
+      </div>
+
+      <Table
+        columns={columns}
+        dataSource={filteredItems}
+        rowKey={config.idField}
+        pagination={{ pageSize: 10 }}
+        size="middle"
+        scroll={{ x: 'max-content' }} 
+        onRow={(record) => ({
+          onClick: hasNavigation ? () => handleRowClick(record) : undefined,
+          style: hasNavigation ? { cursor: 'pointer' } : undefined,
+        })}
+      />
+    </>
   );
 }
 

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/columnFactories.tsx

@@ -69,6 +69,13 @@ export function createManagedColumn<T extends DeployableItem>(
   return {
     title: 'Managed',
     key: 'managed',
+    filterMode: 'menu',
+    filters: [
+      { text: 'Managed', value: true },
+      { text: 'Unmanaged', value: false },
+    ],
+    onFilter: (value, record) => record.managed === value,
+    filterMultiple: false,
     render: (_, record: T) => (
       <Space>
         <Tag color={record.managed ? 'green' : 'default'}>
@@ -178,6 +185,13 @@ export function createPublishedColumn<T extends { published?: boolean }>(): Colu
     title: 'Status',
     dataIndex: 'published',
     key: 'published',
+    filterMode: 'menu',
+    filters: [
+      { text: 'Published', value: true },
+      { text: 'Unpublished', value: false },
+    ],
+    onFilter: (value, record) => record.published === value,
+    filterMultiple: false,
     render: (published: boolean) => (
       <Tag color={published ? 'green' : 'orange'}>
         {published ? 'Published' : 'Unpublished'}

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();
+};