implement optimistic hide for resource and policy deletions

ui/apps/dashboard/src/pages/cluster-manage/index.tsx

@@ -60,6 +60,7 @@ const ClusterManagePage = () => {
       return ret.data;
     },
   });
+  const [deletingNames, setDeletingNames] = useState<Set<string>>(new Set());
   const [clusterModalData, setModalData] = useState<{
     mode: 'create' | 'edit';
     open: boolean;
@@ -227,6 +228,11 @@ const ClusterManagePage = () => {
                       name: r.objectMeta.name,
                     }),
                   );
+                  setDeletingNames((prev) => {
+                    const next = new Set(prev);
+                    next.add(r.objectMeta.name);
+                    return next;
+                  });
                   await refetch();
                 } else {
                   await messageApi.error(
@@ -283,7 +289,9 @@ const ClusterManagePage = () => {
         rowKey={(r: Cluster) => r.objectMeta.name || ''}
         columns={columns}
         loading={isLoading}
-        dataSource={data?.clusters || []}
+        dataSource={(data?.clusters || []).filter(
+          (r: Cluster) => !deletingNames.has(r.objectMeta.name),
+        )}
       />
 
       <NewClusterModal

ui/apps/dashboard/src/pages/multicloud-policy-manage/override-policy/index.tsx

@@ -50,6 +50,15 @@ import OverridePolicyEditorDrawer, {
 import { GetNamespaces } from '@/services/namespace.ts';
 
 export type PolicyScope = 'namespace-scope' | 'cluster-scope';
+const getPolicyKey = (
+  policy: OverridePolicy | ClusterOverridePolicy,
+  scope: PolicyScope,
+) => {
+  return scope === 'cluster-scope'
+    ? policy.objectMeta.name
+    : `${policy.objectMeta.namespace}-${policy.objectMeta.name}`;
+};
+
 const OverridePolicyManage = () => {
   const [filter, setFilter] = useState<{
     policyScope: PolicyScope;
@@ -60,6 +69,7 @@ const OverridePolicyManage = () => {
     selectedWorkSpace: '',
     searchText: '',
   });
+  const [deletingNames, setDeletingNames] = useState<Set<string>>(new Set());
   const { data, isLoading, refetch } = useQuery({
     queryKey: ['GetOverridePolicies', JSON.stringify(filter)],
     queryFn: async () => {
@@ -228,6 +238,13 @@ const OverridePolicyManage = () => {
                       '删除成功',
                     ),
                   );
+                    setDeletingNames((prev) => {
+                      const next = new Set(prev);
+                      const key = getPolicyKey(r, filter.policyScope);
+
+                      next.add(key);
+                      return next;
+                    });
                   await refetch();
                 } else {
                   await messageApi.error(
@@ -361,10 +378,19 @@ const OverridePolicyManage = () => {
         </div>
       </div>
       <Table
-        rowKey={(r: OverridePolicy) => r.objectMeta.name || ''}
+        rowKey={(r: OverridePolicy | ClusterOverridePolicy) =>
+          getPolicyKey(r, filter.policyScope)
+        }
+
         columns={columns}
         loading={isLoading}
-        dataSource={data || []}
+        dataSource={(data || []).filter(
+          (r: OverridePolicy | ClusterOverridePolicy) => {
+            const key = getPolicyKey(r, filter.policyScope);
+
+            return !deletingNames.has(key);
+          },
+        )}
       />
       <OverridePolicyEditorDrawer
         open={editorDrawerData.open}

ui/apps/dashboard/src/pages/multicloud-policy-manage/propagation-policy/index.tsx

@@ -47,6 +47,16 @@ import { useDebounce } from '@uidotdev/usehooks';
 import { PolicyScope } from '@/services/base.ts';
 import useNamespace from '@/hooks/use-namespace.ts';
 
+const getPolicyKey = (
+  policy: PropagationPolicy | ClusterPropagationPolicy,
+  scope: PolicyScope,
+) => {
+  return scope === PolicyScope.Cluster
+    ? policy.objectMeta.name
+    : `${policy.objectMeta.namespace}-${policy.objectMeta.name}`;
+};
+
+
 const PropagationPolicyManage = () => {
   const [filter, setFilter] = useState<{
     policyScope: PolicyScope;
@@ -57,6 +67,7 @@ const PropagationPolicyManage = () => {
     selectedNamespace: '',
     searchText: '',
   });
+  const [deletingNames, setDeletingNames] = useState<Set<string>>(new Set());
   const debouncedSearchText = useDebounce(filter.searchText, 300);
   const { data, isLoading, refetch } = useQuery({
     queryKey: [
@@ -214,6 +225,13 @@ const PropagationPolicyManage = () => {
                       '删除成功',
                     ),
                   );
+                  setDeletingNames((prev) => {
+                    const next = new Set(prev);
+                    const key = getPolicyKey(r, filter.policyScope);
+
+                    next.add(key);
+                    return next;
+                  });
                   await refetch();
                 } else {
                   await messageApi.error(
@@ -354,10 +372,18 @@ const PropagationPolicyManage = () => {
       </div>
 
       <Table
-        rowKey={(r: PropagationPolicy) => r.objectMeta.name || ''}
+        rowKey={(r: PropagationPolicy | ClusterPropagationPolicy) =>
+          getPolicyKey(r, filter.policyScope)
+        }
+
         columns={columns}
         loading={isLoading}
-        dataSource={data || []}
+        dataSource={(data || []).filter(
+          (r: PropagationPolicy | ClusterPropagationPolicy) => {
+            const key = getPolicyKey(r, filter.policyScope);
+
+          return !deletingNames.has(key);
+        })}
       />
 
       <PropagationPolicyEditorDrawer

ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/configmap-table.tsx

@@ -29,6 +29,7 @@ interface ConfigMapTableProps {
   onViewConfigMapContent: (r: any) => void;
   onEditConfigMapContent: (r: any) => void;
   onDeleteConfigMapContent: (r: Config) => void;
+  deletingNames: Set<string>;
 }
 const ConfigMapTable: FC<ConfigMapTableProps> = (props) => {
   const {
@@ -38,6 +39,7 @@ const ConfigMapTable: FC<ConfigMapTableProps> = (props) => {
     onViewConfigMapContent,
     onEditConfigMapContent,
     onDeleteConfigMapContent,
+    deletingNames,
   } = props;
   const columns: TableColumnProps<Config>[] = [
     {
@@ -169,7 +171,10 @@ const ConfigMapTable: FC<ConfigMapTableProps> = (props) => {
       }
       columns={columns}
       loading={isLoading}
-      dataSource={data?.items || []}
+      dataSource={(data?.items || []).filter(
+        (c: Config) =>
+          !deletingNames.has(`${c.objectMeta.namespace}-${c.objectMeta.name}`),
+      )}
     />
   );
 };

ui/apps/dashboard/src/pages/multicloud-resource-manage/config/components/secret-table.tsx

@@ -29,6 +29,7 @@ interface SecretTableProps {
   onViewSecret: (r: any) => void;
   onEditSecret: (r: Secret) => void;
   onDeleteSecretContent: (r: Secret) => void;
+  deletingNames: Set<string>;
 }
 const SecretTable: FC<SecretTableProps> = (props) => {
   const {
@@ -38,6 +39,7 @@ const SecretTable: FC<SecretTableProps> = (props) => {
     onViewSecret,
     onEditSecret,
     onDeleteSecretContent,
+    deletingNames,
   } = props;
   const { data, isLoading } = useQuery({
     queryKey: ['GetSecrets', selectedWorkSpace, searchText],
@@ -169,7 +171,10 @@ const SecretTable: FC<SecretTableProps> = (props) => {
       }
       columns={columns}
       loading={isLoading}
-      dataSource={data?.secrets || []}
+      dataSource={(data?.secrets || []).filter(
+        (s: Secret) =>
+          !deletingNames.has(`${s.objectMeta.namespace}-${s.objectMeta.name}`),
+      )}
     />
   );
 };

ui/apps/dashboard/src/pages/multicloud-resource-manage/config/index.tsx

@@ -26,8 +26,10 @@ import { useStore } from './store.ts';
 import { message } from 'antd';
 import { DeleteResource } from '@/services/unstructured.ts';
 import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
 import SecretTable from '@/pages/multicloud-resource-manage/config/components/secret-table.tsx';
 const ConfigPage = () => {
+  const [deletingNames, setDeletingNames] = useState<Set<string>>(new Set());
   const { nsOptions, isNsDataLoading } = useNamespace({});
   const { tagNum } = useTagNum();
   const filter = useStore((state) => state.filter);
@@ -87,6 +89,13 @@ const ConfigPage = () => {
                   ),
                 );
               }
+              if (ret.code === 200) {
+                setDeletingNames((prev) => {
+                  const next = new Set(prev);
+                  next.add(`${r.objectMeta.namespace}-${r.objectMeta.name}`);
+                  return next;
+                });
+              }
               await queryClient.invalidateQueries({
                 queryKey: ['GetConfigMaps'],
                 exact: false,
@@ -95,6 +104,7 @@ const ConfigPage = () => {
               console.log('error', e);
             }
           }}
+          deletingNames={deletingNames}
         />
       )}
       {filter.kind === ConfigKind.Secret && (
@@ -123,6 +133,13 @@ const ConfigPage = () => {
                   ),
                 );
               }
+              if (ret.code === 200) {
+                setDeletingNames((prev) => {
+                  const next = new Set(prev);
+                  next.add(`${r.objectMeta.namespace}-${r.objectMeta.name}`);
+                  return next;
+                });
+              }
               await queryClient.invalidateQueries({
                 queryKey: ['GetSecrets'],
                 exact: false,
@@ -131,6 +148,7 @@ const ConfigPage = () => {
               console.log('error', e);
             }
           }}
+          deletingNames={deletingNames}
         />
       )}
 

ui/apps/dashboard/src/pages/multicloud-resource-manage/namespace/index.tsx

@@ -40,6 +40,7 @@ import TagList, { convertLabelToTags } from '@/components/tag-list';
 
 const NamespacePage = () => {
   const [searchFilter, setSearchFilter] = useState('');
+  const [deletingNames, setDeletingNames] = useState<Set<string>>(new Set());
   const { data, isLoading, refetch } = useQuery({
     queryKey: ['GetNamespaces', searchFilter],
     queryFn: async () => {
@@ -130,6 +131,11 @@ const NamespacePage = () => {
                       '删除命名空间成功',
                     ),
                   );
+                  setDeletingNames((prev) => {
+                    const next = new Set(prev);
+                    next.add(r.objectMeta.name);
+                    return next;
+                  });
                   await refetch();
                 } else {
                   await messageApi.error(
@@ -190,7 +196,11 @@ const NamespacePage = () => {
         rowKey={(r: Namespace) => r.objectMeta.name || ''}
         columns={columns}
         loading={isLoading}
-        dataSource={data?.namespaces || []}
+        dataSource={
+          (data?.namespaces || []).filter(
+            (n: Namespace) => !deletingNames.has(n.objectMeta.name),
+          )
+        }
       />
 
       <NewNamespaceModal

ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/ingress-table.tsx

@@ -31,6 +31,7 @@ interface ServiceTableProps {
   searchText: string;
   onViewIngressContent: (r: any) => void;
   onDeleteIngressContent: (r: Ingress) => void;
+  deletingNames: Set<string>;
 }
 const IngressTable: FC<ServiceTableProps> = (props) => {
   const {
@@ -39,6 +40,7 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
     searchText,
     onViewIngressContent,
     onDeleteIngressContent,
+    deletingNames,
   } = props;
   const columns: TableColumnProps<Ingress>[] = [
     {
@@ -165,7 +167,10 @@ const IngressTable: FC<ServiceTableProps> = (props) => {
       }
       columns={columns}
       loading={isLoading}
-      dataSource={data?.items || []}
+      dataSource={(data?.items || []).filter(
+        (i: Ingress) =>
+          !deletingNames.has(`${i.objectMeta.namespace}-${i.objectMeta.name}`),
+      )}
     />
   );
 };

ui/apps/dashboard/src/pages/multicloud-resource-manage/service/components/service-table.tsx

@@ -32,6 +32,7 @@ interface ServiceTableProps {
   onViewServiceContent: (r: any) => void;
   onEditServiceContent: (r: any) => void;
   onDeleteServiceContent: (r: Service) => void;
+  deletingNames: Set<string>;
 }
 const ServiceTable: FC<ServiceTableProps> = (props) => {
   const {
@@ -41,6 +42,7 @@ const ServiceTable: FC<ServiceTableProps> = (props) => {
     onViewServiceContent,
     onEditServiceContent,
     onDeleteServiceContent,
+    deletingNames,
   } = props;
   const columns: TableColumnProps<Service>[] = [
     {
@@ -169,7 +171,10 @@ const ServiceTable: FC<ServiceTableProps> = (props) => {
       }
       columns={columns}
       loading={isLoading}
-      dataSource={data?.services || []}
+      dataSource={(data?.services || []).filter(
+        (s: Service) =>
+          !deletingNames.has(`${s.objectMeta.namespace}-${s.objectMeta.name}`),
+      )}
     />
   );
 };