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/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/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'}