@dovetail-v2/refine 0.3.18 → 0.3.19-alpha.0

package/dist/components/Dropdowns/K8sDropdown/index.d.ts

@@ -1,3 +1,4 @@
+import { DeleteDialogProps } from '@cloudtower/eagle';
 import React from 'react';
 import { ResourceModel } from '../../../models';
 export type DropdownSize = 'normal' | 'large';
@@ -5,6 +6,10 @@ interface K8sDropdownProps {
     record: ResourceModel;
     size?: DropdownSize;
     customButton?: React.ReactNode;
+    resourceName?: string;
+    displayName?: string;
+    deleteDialogProps?: Partial<DeleteDialogProps>;
+    hideEdit?: boolean;
 }
 export declare function K8sDropdown(props: React.PropsWithChildren<K8sDropdownProps>): JSX.Element;
 export default K8sDropdown;

package/dist/components/ListPage/index.d.ts

@@ -6,6 +6,8 @@ interface ListPageProps<T extends ResourceModel> {
     tableProps: InternalTableProps<T>;
     contentClassName?: string;
     belowToolBarContent?: React.ReactNode;
+    customFilterBar?: React.ReactNode;
+    isSearching?: boolean;
 }
 export declare function ListPage<T extends ResourceModel>(props: ListPageProps<T>): JSX.Element;
 export {};

package/dist/components/Table/index.d.ts

@@ -6,6 +6,7 @@ interface TableProps<Model extends ResourceModel> {
     tableProps: InternalTableProps<Model>;
     displayName: string;
     errorContentProps?: WidgetErrorContentProps;
+    isSearching?: boolean;
 }
 export declare function Table<Model extends ResourceModel>(props: TableProps<Model>): JSX.Element;
 export {};

package/dist/hooks/useDeleteModal/useDeleteModal.d.ts

@@ -1,12 +1,14 @@
 import { DeleteDialogProps } from '@cloudtower/eagle';
 type useDeleteDialogProps = {
     resourceName: string;
+    displayName?: string;
+    meta?: Record<string, string>;
     deleteDialogProps?: Partial<DeleteDialogProps>;
 };
 /**
  * 打开确认删除弹窗，如果失败会自动弹出回绝弹窗
  */
-export declare const useDeleteModal: ({ resourceName, deleteDialogProps, }: useDeleteDialogProps) => {
+export declare const useDeleteModal: ({ resourceName, displayName, meta, deleteDialogProps, }: useDeleteDialogProps) => {
     openDeleteConfirmModal: (id: string) => void;
     closeDeleteConfirmModal: () => void;
 };

package/dist/hooks/useDeleteModal/useDeleteModalOnly.d.ts

@@ -2,10 +2,12 @@ import { DeleteDialogProps } from '@cloudtower/eagle';
 import { HttpError } from '@refinedev/core';
 type useDeleteModalOnlyProps = {
     resource: string;
+    displayName?: string;
+    meta?: Record<string, string>;
     onError?: (resourceId: string, error?: HttpError) => void;
     deleteDialogProps?: Partial<DeleteDialogProps>;
 };
-export declare const useDeleteModalOnly: ({ resource: resourceFromProps, deleteDialogProps, onError, }: useDeleteModalOnlyProps) => {
+export declare const useDeleteModalOnly: ({ resource: resourceFromProps, displayName: displayNameFromProps, deleteDialogProps, meta, onError, }: useDeleteModalOnlyProps) => {
     openDeleteConfirmModal: (id: string) => void;
     closeDeleteConfirmModal: () => void;
 };

package/dist/hooks/useDeleteModal/useFailedModal.d.ts

@@ -1,4 +1,7 @@
-export declare const useFailedModal: (resource: string) => {
+export declare const useFailedModal: (props: {
+    resource: string;
+    displayName?: string;
+}) => {
     openFailedModal: (id: string, errorMsgs: string[]) => void;
     closeFailedModal: () => void;
 };

package/dist/hooks/useEagleTable/useEagleTable.d.ts

@@ -25,6 +25,7 @@ export declare function addDefaultRenderToColumns<Data, Col extends RequiredColu
     render(value: unknown): JSX.Element;
 } & Col)[];
 export declare const useEagleTable: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(params: Params<Model>) => {
+    setCurrent: (current: number) => void;
     tableQueryResult: import("@tanstack/query-core").QueryObserverResult<import("@refinedev/core").GetListResponse<Model>, import("@refinedev/core").HttpError>;
     sorter: import("@refinedev/core").CrudSorting;
     sorters: import("@refinedev/core").CrudSorting;
@@ -42,7 +43,6 @@ export declare const useEagleTable: <Model extends ResourceModel<import("k8s-api
         filters: import("@refinedev/core").CrudFilters;
     }) => string;
     current: number;
-    setCurrent: (value: React.SetStateAction<number>) => void;
     pageSize: number;
     setPageSize: (value: React.SetStateAction<number>) => void;
     pageCount: number;

package/dist/refine.cjs

@@ -7433,18 +7433,21 @@ function transformResourceKindInSentence(str, language) {
 }
 const useDeleteModalOnly = ({
   resource: resourceFromProps,
+  displayName: displayNameFromProps,
   deleteDialogProps,
+  meta,
   onError
 }) => {
   const { resource } = core.useResource();
   const configs = React.useContext(ConfigsContext);
   const config = configs[resourceFromProps];
   const { mutateAsync } = core.useDelete();
+  const [deleting, setDeleting] = React.useState(false);
   const pushModal = eagle.usePushModal();
   const popModal = eagle.usePopModal();
   const navigation = core.useNavigation();
   const { t: t2, i18n: i18n2 } = common.useTranslation();
-  const displayName = config.displayName || config.kind;
+  const displayName = displayNameFromProps || (config == null ? void 0 : config.displayName) || (meta == null ? void 0 : meta.kind) || (config == null ? void 0 : config.kind);
   const resourceDisplayName = transformResourceKindInSentence(displayName, i18n2.language);
   function openDeleteConfirmModal(id) {
     pushModal({
@@ -7467,10 +7470,13 @@ const useDeleteModalOnly = ({
         ),
         secondaryDesc: t2("dovetail.delete_tip"),
         okText: t2("dovetail.delete"),
+        confirmLoading: deleting,
         onOk: async (popModal2) => {
           try {
+            setDeleting(true);
             await mutateAsync({
               resource: resourceFromProps,
+              meta,
               id,
               successNotification() {
                 return {
@@ -7494,6 +7500,7 @@ const useDeleteModalOnly = ({
             }
             popModal2();
           } finally {
+            setDeleting(false);
           }
         },
         ...deleteDialogProps
@@ -7502,13 +7509,14 @@ const useDeleteModalOnly = ({
   }
   return { openDeleteConfirmModal, closeDeleteConfirmModal: popModal };
 };
-const useFailedModal = (resource) => {
+const useFailedModal = (props) => {
+  const { resource, displayName: displayNameFromProps } = props;
   const configs = React.useContext(ConfigsContext);
   const config = configs[resource];
   const { t: t2, i18n: i18n2 } = common.useTranslation();
   const pushModal = eagle.usePushModal();
   const popModal = eagle.usePopModal();
-  const displayName = config.displayName || config.kind;
+  const displayName = displayNameFromProps || (config == null ? void 0 : config.displayName) || (config == null ? void 0 : config.kind);
   const resourceDisplayName = transformResourceKindInSentence(displayName, i18n2.language);
   function openFailedModal(id, errorMsgs) {
     pushModal({
@@ -7542,15 +7550,25 @@ const useFailedModal = (resource) => {
 };
 const useDeleteModal = ({
   resourceName,
+  displayName,
+  meta,
   deleteDialogProps
 }) => {
   const { i18n: i18n2 } = common.useTranslation();
   const configs = React.useContext(ConfigsContext);
   const config = configs[resourceName];
-  const { openFailedModal } = useFailedModal(resourceName);
+  const { openFailedModal } = useFailedModal({
+    resource: resourceName,
+    displayName
+  });
   const { openDeleteConfirmModal, closeDeleteConfirmModal } = useDeleteModalOnly({
     resource: resourceName,
-    deleteDialogProps: { secondaryDesc: config.deleteTip, ...deleteDialogProps },
+    displayName,
+    meta,
+    deleteDialogProps: {
+      secondaryDesc: (config == null ? void 0 : config.deleteTip) || i18n2.t("dovetail.delete_tip"),
+      ...deleteDialogProps
+    },
     onError: async (id, error) => {
       closeDeleteConfirmModal();
       openFailedModal(id, getCommonErrors(await (error == null ? void 0 : error.response.json()), i18n2));
@@ -10815,18 +10833,34 @@ function validateNodePort(nodePort, allNodePorts, i18n2) {
   return { isValid: true };
 }
 function K8sDropdown(props) {
-  var _a, _b;
-  const { record, size = "normal", customButton } = props;
+  var _a, _b, _c;
+  const {
+    record,
+    size = "normal",
+    resourceName: resourceNameFromProps,
+    customButton,
+    deleteDialogProps,
+    displayName,
+    hideEdit
+  } = props;
   const globalStore = useGlobalStore();
   const useResourceResult = core.useResource();
   const configs = React.useContext(ConfigsContext);
-  const resourceName = getResourceNameByKind(record.kind || "", configs);
+  const resourceName = resourceNameFromProps || getResourceNameByKind(record.kind || "", configs);
   const config = configs[resourceName || ""];
   const { t: t2, i18n: i18n2 } = common.useTranslation();
-  const { openDeleteConfirmModal } = useDeleteModal({ resourceName: resourceName || "" });
+  const { openDeleteConfirmModal } = useDeleteModal({
+    resourceName: resourceName || "",
+    deleteDialogProps,
+    displayName,
+    meta: record.apiVersion ? {
+      kind: record.kind || "",
+      resourceBasePath: (((_a = record.apiVersion) == null ? void 0 : _a.includes("/")) ? "apis" : "api") + `/${record.apiVersion}`
+    } : void 0
+  });
   const download2 = useDownloadYAML();
   const openForm = useOpenForm();
-  const isInShowPage = useResourceResult.action === "show" && ((_a = useResourceResult.resource) == null ? void 0 : _a.name) === config.name;
+  const isInShowPage = useResourceResult.action === "show" && ((_b = useResourceResult.resource) == null ? void 0 : _b.name) === resourceName;
   const { data: canEditData } = core.useCan({
     resource: resourceName,
     action: AccessControlAuth.Edit,
@@ -10841,12 +10875,12 @@ function K8sDropdown(props) {
       namespace: record.namespace
     }
   });
-  const formType = ((_b = config.formConfig) == null ? void 0 : _b.formType) || FormType.FORM;
+  const formType = (_c = config == null ? void 0 : config.formConfig) == null ? void 0 : _c.formType;
   return /* @__PURE__ */ common.jsxRuntimeExports.jsx(common.jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(
     eagle.Dropdown,
     {
       overlay: /* @__PURE__ */ common.jsxRuntimeExports.jsxs(eagle.Menu, { children: [
-        isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false || config.hideEdit ? null : /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Menu.Item, { onClick: () => openForm({ id: record.id, resourceName }), children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: formType === FormType.FORM ? `${t2("dovetail.edit")}${transformResourceKindInSentence(
+        isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false || hideEdit || (config == null ? void 0 : config.hideEdit) ? null : /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Menu.Item, { onClick: () => openForm({ id: record.id, resourceName }), children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: formType === FormType.FORM ? `${t2("dovetail.edit")}${transformResourceKindInSentence(
           (config == null ? void 0 : config.displayName) || record.kind || "",
           i18n2.language
         )}` : t2("dovetail.edit_yaml") }) }),
@@ -10911,12 +10945,7 @@ var ColumnKeys = /* @__PURE__ */ ((ColumnKeys2) => {
 function addDefaultRenderToColumns(columns) {
   return columns.map((col) => ({
     render(value2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-        ValueDisplay,
-        {
-          value: value2
-        }
-      );
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ValueDisplay, { value: value2 });
     },
     ...col
   }));
@@ -10952,18 +10981,23 @@ const useEagleTable = (params) => {
     },
     [setCurrentPage, table]
   );
-  const onSorterChange = React.useCallback((order, key2) => {
-    var _a2;
-    const ORDER_MAP = {
-      descend: "desc",
-      ascend: "asc"
-    };
-    const sorters = [{
-      field: (_a2 = columns.find((col) => col.key === key2)) == null ? void 0 : _a2.dataIndex,
-      order: order ? ORDER_MAP[order] : order
-    }];
-    table.setSorters(sorters);
-  }, [table, columns]);
+  const onSorterChange = React.useCallback(
+    (order, key2) => {
+      var _a2;
+      const ORDER_MAP = {
+        descend: "desc",
+        ascend: "asc"
+      };
+      const sorters = [
+        {
+          field: (_a2 = columns.find((col) => col.key === key2)) == null ? void 0 : _a2.dataIndex,
+          order: order ? ORDER_MAP[order] : order
+        }
+      ];
+      table.setSorters(sorters);
+    },
+    [table, columns]
+  );
   const data2 = (_a = table.tableQueryResult.data) == null ? void 0 : _a.data;
   const total = ((_b = table.tableQueryResult.data) == null ? void 0 : _b.total) || 0;
   const finalDataSource = formatter ? data2 == null ? void 0 : data2.map(formatter) : data2;
@@ -10986,12 +11020,23 @@ const useEagleTable = (params) => {
     defaultSize: currentSize
   };
   React.useEffect(() => {
-    table.setSorters([{
-      field: "metadata.creationTimestamp",
-      order: "desc"
-    }]);
+    table.setSorters([
+      {
+        field: "metadata.creationTimestamp",
+        order: "desc"
+      }
+    ]);
   }, []);
-  return { tableProps: finalProps, selectedKeys, ...table };
+  return {
+    tableProps: finalProps,
+    selectedKeys,
+    ...table,
+    setCurrent: (current) => {
+      var _a2;
+      setCurrentPage(current);
+      (_a2 = table.setCurrent) == null ? void 0 : _a2.call(table, current);
+    }
+  };
 };
 function CreateButton(props) {
   var _a;
@@ -12166,7 +12211,7 @@ function PVVolumeModeDisplay(props) {
 }
 function Table(props) {
   var _a;
-  const { tableProps, displayName, errorContentProps } = props;
+  const { tableProps, displayName, errorContentProps, isSearching } = props;
   const { Table: TableComponent } = React.useContext(ComponentContext);
   const Table2 = TableComponent || Table$1;
   const { params } = core.useParsed();
@@ -12174,7 +12219,7 @@ function Table(props) {
   const resourceType = transformResourceKindInSentence(displayName, i18n2.language);
   if (!((_a = tableProps.data) == null ? void 0 : _a.length) && !tableProps.loading) {
     const nameKeyword = (params == null ? void 0 : params[NAME_KEYWORD_PARAM]) || "";
-    if (nameKeyword) {
+    if (nameKeyword || isSearching) {
       const onClear = () => {
         var _a2;
         (_a2 = tableProps.onClearSearchKeyword) == null ? void 0 : _a2.call(tableProps);
@@ -14548,7 +14593,9 @@ function ListPage(props) {
     selectedKeys,
     tableProps,
     contentClassName,
-    belowToolBarContent
+    belowToolBarContent,
+    customFilterBar,
+    isSearching
   } = props;
   const {
     resource
@@ -14576,7 +14623,7 @@ function ListPage(props) {
       style: !config.customFilterBar && config.nonNsResource ? {
         paddingTop: 0
       } : {},
-      children: [config.customFilterBar || !config.nonNsResource && /* @__PURE__ */ common.jsxRuntimeExports.jsx(NamespacesFilter, {
+      children: [customFilterBar || config.customFilterBar || !config.nonNsResource && /* @__PURE__ */ common.jsxRuntimeExports.jsx(NamespacesFilter, {
         className: NamespaceFilterStyle
       }), /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
         className: TableStyle,
@@ -14587,7 +14634,8 @@ function ListPage(props) {
               y: "calc(100% - 48px)"
             }
           },
-          displayName: (config == null ? void 0 : config.displayName) || config.kind
+          displayName: (config == null ? void 0 : config.displayName) || config.kind,
+          isSearching
         })
       })]
     })]

package/dist/refine.js

@@ -7414,18 +7414,21 @@ function transformResourceKindInSentence(str, language) {
 }
 const useDeleteModalOnly = ({
   resource: resourceFromProps,
+  displayName: displayNameFromProps,
   deleteDialogProps,
+  meta,
   onError
 }) => {
   const { resource } = useResource();
   const configs = useContext(ConfigsContext);
   const config = configs[resourceFromProps];
   const { mutateAsync } = useDelete();
+  const [deleting, setDeleting] = useState(false);
   const pushModal = usePushModal();
   const popModal = usePopModal();
   const navigation = useNavigation();
   const { t: t2, i18n: i18n2 } = useTranslation();
-  const displayName = config.displayName || config.kind;
+  const displayName = displayNameFromProps || (config == null ? void 0 : config.displayName) || (meta == null ? void 0 : meta.kind) || (config == null ? void 0 : config.kind);
   const resourceDisplayName = transformResourceKindInSentence(displayName, i18n2.language);
   function openDeleteConfirmModal(id) {
     pushModal({
@@ -7448,10 +7451,13 @@ const useDeleteModalOnly = ({
         ),
         secondaryDesc: t2("dovetail.delete_tip"),
         okText: t2("dovetail.delete"),
+        confirmLoading: deleting,
         onOk: async (popModal2) => {
           try {
+            setDeleting(true);
             await mutateAsync({
               resource: resourceFromProps,
+              meta,
               id,
               successNotification() {
                 return {
@@ -7475,6 +7481,7 @@ const useDeleteModalOnly = ({
             }
             popModal2();
           } finally {
+            setDeleting(false);
           }
         },
         ...deleteDialogProps
@@ -7483,13 +7490,14 @@ const useDeleteModalOnly = ({
   }
   return { openDeleteConfirmModal, closeDeleteConfirmModal: popModal };
 };
-const useFailedModal = (resource) => {
+const useFailedModal = (props) => {
+  const { resource, displayName: displayNameFromProps } = props;
   const configs = useContext(ConfigsContext);
   const config = configs[resource];
   const { t: t2, i18n: i18n2 } = useTranslation();
   const pushModal = usePushModal();
   const popModal = usePopModal();
-  const displayName = config.displayName || config.kind;
+  const displayName = displayNameFromProps || (config == null ? void 0 : config.displayName) || (config == null ? void 0 : config.kind);
   const resourceDisplayName = transformResourceKindInSentence(displayName, i18n2.language);
   function openFailedModal(id, errorMsgs) {
     pushModal({
@@ -7523,15 +7531,25 @@ const useFailedModal = (resource) => {
 };
 const useDeleteModal = ({
   resourceName,
+  displayName,
+  meta,
   deleteDialogProps
 }) => {
   const { i18n: i18n2 } = useTranslation();
   const configs = useContext(ConfigsContext);
   const config = configs[resourceName];
-  const { openFailedModal } = useFailedModal(resourceName);
+  const { openFailedModal } = useFailedModal({
+    resource: resourceName,
+    displayName
+  });
   const { openDeleteConfirmModal, closeDeleteConfirmModal } = useDeleteModalOnly({
     resource: resourceName,
-    deleteDialogProps: { secondaryDesc: config.deleteTip, ...deleteDialogProps },
+    displayName,
+    meta,
+    deleteDialogProps: {
+      secondaryDesc: (config == null ? void 0 : config.deleteTip) || i18n2.t("dovetail.delete_tip"),
+      ...deleteDialogProps
+    },
     onError: async (id, error) => {
       closeDeleteConfirmModal();
       openFailedModal(id, getCommonErrors(await (error == null ? void 0 : error.response.json()), i18n2));
@@ -10796,18 +10814,34 @@ function validateNodePort(nodePort, allNodePorts, i18n2) {
   return { isValid: true };
 }
 function K8sDropdown(props) {
-  var _a, _b;
-  const { record, size = "normal", customButton } = props;
+  var _a, _b, _c;
+  const {
+    record,
+    size = "normal",
+    resourceName: resourceNameFromProps,
+    customButton,
+    deleteDialogProps,
+    displayName,
+    hideEdit
+  } = props;
   const globalStore = useGlobalStore();
   const useResourceResult = useResource();
   const configs = useContext(ConfigsContext);
-  const resourceName = getResourceNameByKind(record.kind || "", configs);
+  const resourceName = resourceNameFromProps || getResourceNameByKind(record.kind || "", configs);
   const config = configs[resourceName || ""];
   const { t: t2, i18n: i18n2 } = useTranslation();
-  const { openDeleteConfirmModal } = useDeleteModal({ resourceName: resourceName || "" });
+  const { openDeleteConfirmModal } = useDeleteModal({
+    resourceName: resourceName || "",
+    deleteDialogProps,
+    displayName,
+    meta: record.apiVersion ? {
+      kind: record.kind || "",
+      resourceBasePath: (((_a = record.apiVersion) == null ? void 0 : _a.includes("/")) ? "apis" : "api") + `/${record.apiVersion}`
+    } : void 0
+  });
   const download2 = useDownloadYAML();
   const openForm = useOpenForm();
-  const isInShowPage = useResourceResult.action === "show" && ((_a = useResourceResult.resource) == null ? void 0 : _a.name) === config.name;
+  const isInShowPage = useResourceResult.action === "show" && ((_b = useResourceResult.resource) == null ? void 0 : _b.name) === resourceName;
   const { data: canEditData } = useCan({
     resource: resourceName,
     action: AccessControlAuth.Edit,
@@ -10822,12 +10856,12 @@ function K8sDropdown(props) {
       namespace: record.namespace
     }
   });
-  const formType = ((_b = config.formConfig) == null ? void 0 : _b.formType) || FormType.FORM;
+  const formType = (_c = config == null ? void 0 : config.formConfig) == null ? void 0 : _c.formType;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     Dropdown,
     {
       overlay: /* @__PURE__ */ jsxRuntimeExports.jsxs(Menu$1, { children: [
-        isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false || config.hideEdit ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(Menu$1.Item, { onClick: () => openForm({ id: record.id, resourceName }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { src: EditPen16PrimaryIcon, children: formType === FormType.FORM ? `${t2("dovetail.edit")}${transformResourceKindInSentence(
+        isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false || hideEdit || (config == null ? void 0 : config.hideEdit) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(Menu$1.Item, { onClick: () => openForm({ id: record.id, resourceName }), children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { src: EditPen16PrimaryIcon, children: formType === FormType.FORM ? `${t2("dovetail.edit")}${transformResourceKindInSentence(
           (config == null ? void 0 : config.displayName) || record.kind || "",
           i18n2.language
         )}` : t2("dovetail.edit_yaml") }) }),
@@ -10892,12 +10926,7 @@ var ColumnKeys = /* @__PURE__ */ ((ColumnKeys2) => {
 function addDefaultRenderToColumns(columns) {
   return columns.map((col) => ({
     render(value2) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ValueDisplay,
-        {
-          value: value2
-        }
-      );
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(ValueDisplay, { value: value2 });
     },
     ...col
   }));
@@ -10933,18 +10962,23 @@ const useEagleTable = (params) => {
     },
     [setCurrentPage, table]
   );
-  const onSorterChange = useCallback((order, key2) => {
-    var _a2;
-    const ORDER_MAP = {
-      descend: "desc",
-      ascend: "asc"
-    };
-    const sorters = [{
-      field: (_a2 = columns.find((col) => col.key === key2)) == null ? void 0 : _a2.dataIndex,
-      order: order ? ORDER_MAP[order] : order
-    }];
-    table.setSorters(sorters);
-  }, [table, columns]);
+  const onSorterChange = useCallback(
+    (order, key2) => {
+      var _a2;
+      const ORDER_MAP = {
+        descend: "desc",
+        ascend: "asc"
+      };
+      const sorters = [
+        {
+          field: (_a2 = columns.find((col) => col.key === key2)) == null ? void 0 : _a2.dataIndex,
+          order: order ? ORDER_MAP[order] : order
+        }
+      ];
+      table.setSorters(sorters);
+    },
+    [table, columns]
+  );
   const data2 = (_a = table.tableQueryResult.data) == null ? void 0 : _a.data;
   const total = ((_b = table.tableQueryResult.data) == null ? void 0 : _b.total) || 0;
   const finalDataSource = formatter ? data2 == null ? void 0 : data2.map(formatter) : data2;
@@ -10967,12 +11001,23 @@ const useEagleTable = (params) => {
     defaultSize: currentSize
   };
   useEffect(() => {
-    table.setSorters([{
-      field: "metadata.creationTimestamp",
-      order: "desc"
-    }]);
+    table.setSorters([
+      {
+        field: "metadata.creationTimestamp",
+        order: "desc"
+      }
+    ]);
   }, []);
-  return { tableProps: finalProps, selectedKeys, ...table };
+  return {
+    tableProps: finalProps,
+    selectedKeys,
+    ...table,
+    setCurrent: (current) => {
+      var _a2;
+      setCurrentPage(current);
+      (_a2 = table.setCurrent) == null ? void 0 : _a2.call(table, current);
+    }
+  };
 };
 function CreateButton(props) {
   var _a;
@@ -12147,7 +12192,7 @@ function PVVolumeModeDisplay(props) {
 }
 function Table(props) {
   var _a;
-  const { tableProps, displayName, errorContentProps } = props;
+  const { tableProps, displayName, errorContentProps, isSearching } = props;
   const { Table: TableComponent } = useContext(ComponentContext);
   const Table2 = TableComponent || Table$1;
   const { params } = useParsed();
@@ -12155,7 +12200,7 @@ function Table(props) {
   const resourceType = transformResourceKindInSentence(displayName, i18n2.language);
   if (!((_a = tableProps.data) == null ? void 0 : _a.length) && !tableProps.loading) {
     const nameKeyword = (params == null ? void 0 : params[NAME_KEYWORD_PARAM]) || "";
-    if (nameKeyword) {
+    if (nameKeyword || isSearching) {
       const onClear = () => {
         var _a2;
         (_a2 = tableProps.onClearSearchKeyword) == null ? void 0 : _a2.call(tableProps);
@@ -14529,7 +14574,9 @@ function ListPage(props) {
     selectedKeys,
     tableProps,
     contentClassName,
-    belowToolBarContent
+    belowToolBarContent,
+    customFilterBar,
+    isSearching
   } = props;
   const {
     resource
@@ -14557,7 +14604,7 @@ function ListPage(props) {
       style: !config.customFilterBar && config.nonNsResource ? {
         paddingTop: 0
       } : {},
-      children: [config.customFilterBar || !config.nonNsResource && /* @__PURE__ */ jsxRuntimeExports.jsx(NamespacesFilter, {
+      children: [customFilterBar || config.customFilterBar || !config.nonNsResource && /* @__PURE__ */ jsxRuntimeExports.jsx(NamespacesFilter, {
         className: NamespaceFilterStyle
       }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
         className: TableStyle,
@@ -14568,7 +14615,8 @@ function ListPage(props) {
               y: "calc(100% - 48px)"
             }
           },
-          displayName: (config == null ? void 0 : config.displayName) || config.kind
+          displayName: (config == null ? void 0 : config.displayName) || config.kind,
+          isSearching
         })
       })]
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dovetail-v2/refine",
-  "version": "0.3.18",
+  "version": "0.3.19-alpha.0",
   "type": "module",
   "files": [
     "dist",