1624 accept searchbutton instead of searchbuttonprops for better customization

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.14.0",
+  "version": "14.15.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.14.0",
+  "version": "14.15.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/filter/index.tsx

@@ -70,8 +70,10 @@ export const Filters = observer(function _Filters({ view }: { view: ViewMetaInst
       }
     };
 
+  const submit = useMemo(() => handleSubmit(content.filters.setValues), [handleSubmit, content.filters.setValues]);
+
   return (
-    <form onSubmit={handleSubmit(content.filters.setValues)}>
+    <form>
       <FilterToggler opened={opened} toggle={toggle} />
       <Collapse in={opened}>
         <Group
@@ -94,7 +96,7 @@ export const Filters = observer(function _Filters({ view }: { view: ViewMetaInst
           </Group>
           {!allAutoSubmit && (
             <Group sx={{ alignSelf: 'flex-end' }}>
-              <SearchButton disabled={searchButtonDisabled} />
+              <SearchButton disabled={searchButtonDisabled} onSubmit={submit} />
             </Group>
           )}
         </Group>

dashboard/src/components/filter/search-button/index.tsx

@@ -1,12 +1,15 @@
 import { Button } from '@mantine/core';
 import { useDashboardThemeContext } from '~/contexts';
+import { RenderSearchButtonProps } from '~/index';
 
-export const SearchButton = ({ disabled }: { disabled: boolean }) => {
-  const { searchButtonProps } = useDashboardThemeContext();
-  const { children = 'Search', ...rest } = searchButtonProps;
+export const SearchButton = ({ disabled, onSubmit }: RenderSearchButtonProps) => {
+  const { renderSearchButton } = useDashboardThemeContext();
+  if (renderSearchButton) {
+    return renderSearchButton({ disabled, onSubmit });
+  }
   return (
-    <Button color="blue" size="sm" type="submit" {...rest} disabled={disabled || rest.disabled}>
-      {children}
+    <Button color="blue" size="sm" onClick={onSubmit} disabled={disabled}>
+      Search
     </Button>
   );
 };

dashboard/src/contexts/dashboard-theme-context.ts

@@ -1,11 +1,9 @@
-import { ButtonProps } from '@mantine/core';
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { RenderSearchButtonProps } from '..';
 
 const DashboardThemeContext = React.createContext<{
-  searchButtonProps: ButtonProps;
-}>({
-  searchButtonProps: {},
-});
+  renderSearchButton?: (props: RenderSearchButtonProps) => ReactNode;
+}>({});
 
 export const DashboardThemeContextProvider = DashboardThemeContext.Provider;
 

dashboard/src/dashboard-editor/dashboard-editor.tsx

@@ -162,7 +162,7 @@ const _DashboardEditor = (
       <I18nextContextProvider lang={lang}>
         <ModalsProvider>
           <DatesProvider>
-            <DashboardThemeContextProvider value={{ searchButtonProps: config.searchButtonProps }}>
+            <DashboardThemeContextProvider value={{ renderSearchButton: config.renderSearchButton }}>
               <DashboardModelContextProvider value={model}>
                 <ContentModelContextProvider value={model.content}>
                   <LayoutStateContext.Provider

dashboard/src/dashboard-render/dashboard-render.tsx

@@ -135,7 +135,7 @@ const _ReadOnlyDashboard = ({
       <I18nextContextProvider lang={lang}>
         <ModalsProvider>
           <DatesProvider>
-            <DashboardThemeContextProvider value={{ searchButtonProps: config.searchButtonProps }}>
+            <DashboardThemeContextProvider value={{ renderSearchButton: config.renderSearchButton }}>
               <DashboardModelContextProvider value={model}>
                 <ContentModelContextProvider value={model.content}>
                   <FullScreenPanelContext.Provider

dashboard/src/index.ts

@@ -1,6 +1,7 @@
 import { ButtonProps } from '@mantine/core';
 import './init-dayjs';
 import './i18n';
+import { ReactNode } from 'react';
 
 export const getVersion = () =>
   import('../package.json').then(({ version }) => {
@@ -19,15 +20,18 @@ export * from './model';
 export * from './api-caller/request';
 export type { AnyObject } from './types/utils';
 
-// NOTE: keep it align with global.d.ts
+export type RenderSearchButtonProps = {
+  disabled: boolean;
+  onSubmit: () => void;
+};
 export interface IDashboardConfig {
   basename: string;
   apiBaseURL: string;
   makeQueryENV?: () => Record<string, any>;
   app_id?: string;
   app_secret?: string;
   monacoPath: string;
-  searchButtonProps: ButtonProps;
+  renderSearchButton?: (props: RenderSearchButtonProps) => ReactNode;
 }
 
 export { pluginManager, onVizRendered, notifyVizRendered } from './components/plugins';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "14.14.0",
+  "version": "14.15.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.14.0",
+  "version": "14.15.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "14.14.0",
+  "version": "14.15.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"

website/src/utils/config.ts

@@ -15,7 +15,7 @@ export const BaseDashboardConfig: IDashboardConfig = {
   basename: import.meta.env.VITE_WEBSITE_BASE_URL,
   monacoPath: MonacoPath,
   makeQueryENV: () => ({}),
-  searchButtonProps: {},
+  renderSearchButton: undefined,
 };
 
 export const getDashboardConfig = async (signal: AbortSignal): Promise<IDashboardConfig> => {