feat: add tips on create Board

frontend/src/app/pages/DashBoardPage/utils/board.ts

@@ -19,6 +19,7 @@ import { migrateBoardConfig } from 'app/migration/BoardConfig/migrateBoardConfig
 import {
   BoardInfo,
   BoardType,
+  BoardTypeMap,
   Dashboard,
   DashboardConfig,
   DataChart,
@@ -131,8 +132,9 @@ export const getInitBoardInfo = (obj: {
   return boardInfo;
 };
 
-export const getInitBoardConfig = (boardType: BoardType) => {
+export const getInitBoardConfig = (boardType?: BoardType) => {
   const dashboardConfig: DashboardConfig = {
+    type: boardType || BoardTypeMap.auto,
     version: '',
     background: BackgroundDefault,
     widgetDefaultSettings: {
@@ -143,14 +145,14 @@ export const getInitBoardConfig = (boardType: BoardType) => {
     initialQuery: true,
     hasQueryControl: false,
     hasResetControl: false,
+
     // auto
     margin: [16, 16], //0-100
     containerPadding: [16, 16], //0-100
     cols: LAYOUT_COLS_MAP, //2-48    step 2
     mobileMargin: [MIN_MARGIN, MIN_MARGIN],
     mobileContainerPadding: [MIN_PADDING, MIN_PADDING],
     // free
-    type: boardType,
     width: 1920,
     height: 1080,
     gridStep: [10, 10],

frontend/src/app/pages/MainPage/pages/VizPage/SaveForm.tsx

@@ -1,3 +1,4 @@
+import { InfoCircleOutlined } from '@ant-design/icons';
 import { Form, FormInstance, Input, Radio, TreeSelect } from 'antd';
 import { ModalForm, ModalFormProps } from 'app/components';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
@@ -133,7 +134,20 @@ export function SaveForm({ formProps, ...modalProps }: SaveFormProps) {
         </Form.Item>
       )}
       {vizType === 'DASHBOARD' && type === CommonFormTypes.Add && (
-        <Form.Item name="boardType" label={t('boardType.label')}>
+        <Form.Item
+          rules={[
+            {
+              required: true,
+              message: t('boardType.requiredMessage'),
+            },
+          ]}
+          name="boardType"
+          label={t('boardType.label')}
+          tooltip={{
+            title: t('boardType.tips'),
+            icon: <InfoCircleOutlined />,
+          }}
+        >
           <Radio.Group>
             <Radio.Button value={BoardTypeMap.auto}>
               {t('boardType.auto')}

frontend/src/app/pages/MainPage/pages/VizPage/Sidebar/Folders/index.tsx

@@ -7,7 +7,6 @@ import { ListNav, ListPane, ListTitle } from 'app/components';
 import { useDebouncedSearch } from 'app/hooks/useDebouncedSearch';
 import useGetVizIcon from 'app/hooks/useGetVizIcon';
 import useI18NPrefix, { I18NComponentProps } from 'app/hooks/useI18NPrefix';
-import { BoardTypeMap } from 'app/pages/DashBoardPage/pages/Board/slice/types';
 import { selectOrgId } from 'app/pages/MainPage/slice/selectors';
 import { dispatchResize } from 'app/utils/dispatchResize';
 import { CommonFormTypes } from 'globalConstants';
@@ -17,7 +16,7 @@ import { useHistory } from 'react-router';
 import styled from 'styled-components/macro';
 import { SPACE_XS } from 'styles/StyleConstants';
 import { useAddViz } from '../../hooks/useAddViz';
-import { SaveFormContext, SaveFormModel } from '../../SaveFormContext';
+import { SaveFormContext } from '../../SaveFormContext';
 import {
   makeSelectVizTree,
   selectArchivedDashboardLoading,
@@ -29,7 +28,7 @@ import {
   getArchivedDashboards,
   getArchivedDatacharts,
 } from '../../slice/thunks';
-import { FolderViewModel, VizType } from '../../slice/types';
+import { FolderViewModel } from '../../slice/types';
 import { Recycle } from '../Recycle';
 import { FolderTree } from './FolderTree';
 
@@ -55,15 +54,6 @@ export const Folders = memo(
     const history = useHistory();
     const { showSaveForm } = useContext(SaveFormContext);
     const addVizFn = useAddViz({ showSaveForm });
-    const getInitValues = useCallback((relType: VizType) => {
-      if (relType === 'DASHBOARD') {
-        return {
-          name: '',
-          boardType: BoardTypeMap.auto,
-        } as SaveFormModel;
-      }
-      return undefined;
-    }, []);
 
     const getIcon = useGetVizIcon();
 
@@ -82,10 +72,10 @@ export const Folders = memo(
       );
     const archivedDatacharts = useSelector(selectArchivedDatacharts);
     const archivedDashboards = useSelector(selectArchivedDashboards);
-    const archivedDatachartloading = useSelector(
+    const archivedDataChartLoading = useSelector(
       selectArchivedDatachartLoading,
     );
-    const archivedDashboardloading = useSelector(
+    const archivedDashboardLoading = useSelector(
       selectArchivedDashboardLoading,
     );
     const { filteredData: filteredListData, debouncedSearch: listSearch } =
@@ -113,10 +103,10 @@ export const Folders = memo(
           vizType: key,
           type: CommonFormTypes.Add,
           visible: true,
-          initialValues: getInitValues(key),
+          initialValues: undefined,
         });
       },
-      [getInitValues, orgId, history, addVizFn],
+      [orgId, history, addVizFn],
     );
 
     const titles = useMemo(
@@ -190,7 +180,7 @@ export const Folders = memo(
             type="viz"
             orgId={orgId}
             list={filteredListData}
-            listLoading={archivedDashboardloading || archivedDatachartloading}
+            listLoading={archivedDashboardLoading || archivedDataChartLoading}
             selectedId={selectedId}
             onInit={recycleInit}
           />

frontend/src/app/pages/MainPage/pages/VizPage/hooks/useAddViz.ts

@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BoardTypeMap } from 'app/pages/DashBoardPage/pages/Board/slice/types';
 import { getInitBoardConfig } from 'app/pages/DashBoardPage/utils/board';
 import { selectOrgId } from 'app/pages/MainPage/slice/selectors';
 import { CommonFormTypes } from 'globalConstants';
@@ -50,7 +49,7 @@ export function useAddViz({ showSaveForm }) {
     if (relType === 'DASHBOARD') {
       try {
         dataValues.config = JSON.stringify(
-          getInitBoardConfig(values.boardType || BoardTypeMap.auto),
+          getInitBoardConfig(values.boardType),
         );
       } catch (error) {
         throw error;

frontend/src/locales/en/translation.json

@@ -952,9 +952,11 @@
       "name": "Name",
       "description": "Description",
       "boardType": {
-        "label": "Board type",
+        "label": "Layout",
         "auto": "Auto",
-        "free": "Free"
+        "free": "Free",
+        "tips": "Auto : create responsive dashboard  Free : create ensure size dashboard",
+        "requiredMessage": "Select a Layout Type"
       },
       "parent": "Parent",
       "root": "Root",

frontend/src/locales/zh/translation.json

@@ -954,7 +954,9 @@
       "boardType": {
         "label": "布局类型",
         "auto": "自动",
-        "free": "自由"
+        "free": "自由",
+        "tips": "自动布局 :方便快速创建响应式仪表板  自由布局 :创建精美大屏类数字应用",
+        "requiredMessage": "请选择一种布局方式"
       },
       "parent": "所属目录",
       "root": "根目录",