Merge pull request #967 from lyp000119/dev

scottsut · web-flow · commit c7fe3a92b5c9 · 2022-03-10T16:03:55.000+08:00
add migrationViewDetailConfig test and migration view config
diff --git a/frontend/src/app/components/ChartEditor.tsx b/frontend/src/app/components/ChartEditor.tsx
@@ -42,7 +42,6 @@ import {
   SaveFormContext,
   useSaveFormContext,
 } from 'app/pages/MainPage/pages/VizPage/SaveFormContext';
-import { useMainSlice } from 'app/pages/MainPage/slice';
 import { IChart } from 'app/types/Chart';
 import { ChartDTO } from 'app/types/ChartDTO';
 import { makeDownloadDataTask } from 'app/utils/fetch';
@@ -103,7 +102,6 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
 }) => {
   const saveFormContextValue = useSaveFormContext();
   const { actions } = useWorkbenchSlice();
-  const { actions: mainActions } = useMainSlice();
   const dispatch = useDispatch();
   const dataset = useSelector(datasetsSelector);
   const dataview = useSelector(currentDataViewSelector);
@@ -477,7 +475,7 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
         ],
         fileName: backendChart?.name || 'chart',
         resolve: () => {
-          dispatch(mainActions.setDownloadPolling(true));
+          dispatch(actions.setChartEditorDownloadPolling(true));
         },
       }),
     );
@@ -489,7 +487,7 @@ export const ChartEditor: React.FC<ChartEditorProps> = ({
     dataChartId,
     dataview,
     dispatch,
-    mainActions,
+    actions,
     widgetId,
   ]);
 
diff --git a/frontend/src/app/migration/ViewConfig/migrationViewDetailConfig.ts b/frontend/src/app/migration/ViewConfig/migrationViewDetailConfig.ts
@@ -1,27 +1,33 @@
-import { View } from 'app/types/View';
-import isUndefined from 'lodash/isUndefined';
+import { APP_VERSION_BETA_2 } from '../constants';
+import MigrationEvent from '../MigrationEvent';
+import MigrationEventDispatcher from '../MigrationEventDispatcher';
 
-export const beta2 = viewDetailData => {
-  if (!viewDetailData) {
-    return viewDetailData;
+export const beta2 = viewConfig => {
+  if (!viewConfig) {
+    return viewConfig;
   }
 
   try {
-    let viewConfig = JSON.parse(viewDetailData.config);
-
-    if (isUndefined(viewConfig.expensiveQuery)) {
+    if (viewConfig) {
       viewConfig.expensiveQuery = false;
     }
-    viewDetailData.config = JSON.stringify(viewConfig);
 
-    return viewDetailData;
+    return viewConfig;
   } catch (error) {
     console.error('Migration ViewConfig Errors | beta.2 | ', error);
-    return viewDetailData;
+    return viewConfig;
   }
 };
 
-export const migrateViewConfig = (viewDetailData: View) => {
-  let config = beta2(viewDetailData);
-  return beta2(config);
+export const migrateViewConfig = (viewConfig: string) => {
+  if (!viewConfig?.trim().length) {
+    return viewConfig;
+  }
+
+  const config = JSON.parse(viewConfig);
+  const event2 = new MigrationEvent(APP_VERSION_BETA_2, beta2);
+  const dispatcher = new MigrationEventDispatcher(event2);
+  const result = dispatcher.process(config);
+
+  return JSON.stringify(result);
 };
diff --git a/frontend/src/app/migration/__tests__/migrationViewDetailConfig.test.ts b/frontend/src/app/migration/__tests__/migrationViewDetailConfig.test.ts
@@ -0,0 +1,77 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { APP_VERSION_BETA_2 } from '../constants';
+import { migrateViewConfig } from '../ViewConfig/migrationViewDetailConfig';
+
+describe('migrateViewConfig Test', () => {
+  test('Test when config is null', () => {
+    const config = JSON.stringify(null);
+    expect(migrateViewConfig(config)).toEqual('null');
+  });
+
+  test('Test when config is empty', () => {
+    const config = '';
+    expect(migrateViewConfig(config)).toEqual('');
+  });
+
+  test('Test config without expensiveQuery variable', () => {
+    const config =
+      '{"concurrencyControl":true,"concurrencyControlMode":"DIRTYREAD","cache":false,"cacheExpires":0}';
+    expect(migrateViewConfig(config)).toEqual(
+      `{"concurrencyControl":true,"concurrencyControlMode":"DIRTYREAD","cache":false,"cacheExpires":0,"expensiveQuery":false,"version":"${APP_VERSION_BETA_2}"}`,
+    );
+    expect(migrateViewConfig(config)).toMatch(/"version":/);
+  });
+
+  test('Test when there is a version number and expensiveQuery = false', () => {
+    const config = `{"concurrencyControl":true,"concurrencyControlMode":"DIRTYREAD","cache":false,"cacheExpires":0,"expensiveQuery":false,"version":"${APP_VERSION_BETA_2}"}`;
+    expect(migrateViewConfig(config)).toEqual(config);
+    expect(migrateViewConfig(config)).toMatch(/"version":/);
+  });
+
+  test('Test when there is a version number and expensiveQuery = true', () => {
+    const config = `{"concurrencyControl":true,"concurrencyControlMode":"DIRTYREAD","cache":false,"cacheExpires":0,"expensiveQuery":true,"version":"${APP_VERSION_BETA_2}"}`;
+    expect(migrateViewConfig(config)).toEqual(config);
+    expect(migrateViewConfig(config)).toMatch(/"version":/);
+  });
+
+  /**
+   * The case of dirty data
+   */
+  test('Test when config is null', () => {
+    const config =
+      '{"expensiveQuery":false,"concurrencyControl":true,"concurrencyControlMode":"DIRTYREAD","cache":false,"cacheExpires":0}';
+    expect(migrateViewConfig(config)).toEqual(
+      `{"expensiveQuery":false,"concurrencyControl":true,"concurrencyControlMode":"DIRTYREAD","cache":false,"cacheExpires":0,"version":"${APP_VERSION_BETA_2}"}`,
+    );
+    expect(migrateViewConfig(config)).toMatch(/"version":/);
+  });
+
+  /**
+   * The case of dirty data
+   */
+  test('Test for dirty data', () => {
+    const config =
+      '{"expensiveQuery":true,"concurrencyControl":true,"concurrencyControlMode":"DIRTYREAD","cache":false,"cacheExpires":0}';
+    expect(migrateViewConfig(config)).toEqual(
+      `{"expensiveQuery":false,"concurrencyControl":true,"concurrencyControlMode":"DIRTYREAD","cache":false,"cacheExpires":0,"version":"${APP_VERSION_BETA_2}"}`,
+    );
+    expect(migrateViewConfig(config)).toMatch(/"version":/);
+  });
+});
diff --git a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartHeaderPanel/ChartHeaderPanel.tsx b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartHeaderPanel/ChartHeaderPanel.tsx
@@ -20,13 +20,15 @@ import { Button, Space } from 'antd';
 import SaveToDashboard from 'app/components/SaveToDashboard';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
 import useMount from 'app/hooks/useMount';
-import { backendChartSelector } from 'app/pages/ChartWorkbenchPage/slice/workbenchSlice';
+import {
+  backendChartSelector,
+  selectChartEditorDownloadPolling,
+  useWorkbenchSlice,
+} from 'app/pages/ChartWorkbenchPage/slice/workbenchSlice';
 import { DownloadListPopup } from 'app/pages/MainPage/Navbar/DownloadListPopup';
 import { loadTasks } from 'app/pages/MainPage/Navbar/service';
 import { selectHasVizFetched } from 'app/pages/MainPage/pages/VizPage/slice/selectors';
 import { getFolders } from 'app/pages/MainPage/pages/VizPage/slice/thunks';
-import { useMainSlice } from 'app/pages/MainPage/slice';
-import { selectDownloadPolling } from 'app/pages/MainPage/slice/selectors';
 import { downloadFile } from 'app/utils/fetch';
 import { FC, memo, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -61,9 +63,9 @@ const ChartHeaderPanel: FC<{
     const hasVizFetched = useSelector(selectHasVizFetched);
     const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
     const backendChart = useSelector(backendChartSelector);
-    const downloadPolling = useSelector(selectDownloadPolling);
+    const downloadPolling = useSelector(selectChartEditorDownloadPolling);
     const dispatch = useDispatch();
-    const { actions } = useMainSlice();
+    const { actions } = useWorkbenchSlice();
 
     const handleModalOk = useCallback(
       (dashboardId: string, dashboardType: string) => {
@@ -79,7 +81,7 @@ const ChartHeaderPanel: FC<{
 
     const onSetPolling = useCallback(
       (polling: boolean) => {
-        dispatch(actions.setDownloadPolling(polling));
+        dispatch(actions.setChartEditorDownloadPolling(polling));
       },
       [dispatch, actions],
     );
@@ -90,6 +92,7 @@ const ChartHeaderPanel: FC<{
         dispatch(getFolders(orgId as string));
       }
     });
+
     return (
       <Wrapper>
         <h1>{chartName}</h1>
@@ -101,7 +104,7 @@ const ChartHeaderPanel: FC<{
             onDownloadFile={item => {
               if (item.id) {
                 downloadFile(item.id).then(() => {
-                  dispatch(actions.setDownloadPolling(true));
+                  dispatch(actions.setChartEditorDownloadPolling(true));
                 });
               }
             }}
diff --git a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartPresentPanel/components/Chart404Graph.tsx b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartPresentPanel/components/Chart404Graph.tsx
@@ -61,8 +61,8 @@ export default Chart404Graph;
 const StyledChart404Graph = styled.div`
   display: flex;
   flex-flow: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   height: 100%;
   opacity: 0.3;
 `;
diff --git a/frontend/src/app/pages/ChartWorkbenchPage/slice/workbenchSlice.ts b/frontend/src/app/pages/ChartWorkbenchPage/slice/workbenchSlice.ts
@@ -78,6 +78,7 @@ export type WorkbenchState = {
   backendChartId?: string;
   aggregation?: boolean;
   datasetLoading: boolean;
+  chartEditorDownloadPolling: boolean;
 };
 
 const initState: WorkbenchState = {
@@ -87,6 +88,7 @@ const initState: WorkbenchState = {
   dataset: {},
   aggregation: true,
   datasetLoading: false,
+  chartEditorDownloadPolling: false,
 };
 
 // Selectors
@@ -142,6 +144,11 @@ export const datasetLoadingSelector = createSelector(
   workbenchSelector,
   wb => wb.datasetLoading,
 );
+
+export const selectChartEditorDownloadPolling = createSelector(
+  workbenchSelector,
+  wb => wb.chartEditorDownloadPolling,
+);
 // Effects
 export const initWorkbenchAction = createAsyncThunk(
   'workbench/initWorkbenchAction',
@@ -208,7 +215,7 @@ export const fetchViewDetailAction = createAsyncThunk(
       method: 'GET',
       url: `views/${arg}`,
     });
-    return migrateViewConfig(response.data);
+    return response.data;
   },
 );
 
@@ -442,6 +449,9 @@ const workbenchSlice = createSlice({
     resetWorkbenchState: (state, action) => {
       return initState;
     },
+    setChartEditorDownloadPolling(state, { payload }: PayloadAction<boolean>) {
+      state.chartEditorDownloadPolling = payload;
+    },
   },
   extraReducers: builder => {
     builder
@@ -460,6 +470,7 @@ const workbenchSlice = createSlice({
         if (index !== undefined) {
           state.currentDataView = {
             ...payload,
+            config: migrateViewConfig(payload.config),
             meta: transformMeta(payload.model),
             computedFields,
           };
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Editor/SQLEditor.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Editor/SQLEditor.tsx
@@ -104,6 +104,11 @@ export const SQLEditor = memo(() => {
           type: CommonFormTypes.Edit,
           visible: true,
           parentIdLabel: t('folder'),
+          initialValues: {
+            name: '',
+            parentId: '',
+            config: {},
+          },
           onSave: (values, onClose) => {
             let index = getInsertedNodeIndex(values, viewsData);
 
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/SaveForm.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/SaveForm.tsx
@@ -30,6 +30,7 @@ import {
 } from 'antd';
 import { ModalForm, ModalFormProps } from 'app/components';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
+import { APP_CURRENT_VERSION } from 'app/migration/constants';
 import debounce from 'debounce-promise';
 import { DEFAULT_DEBOUNCE_WAIT } from 'globalConstants';
 import {
@@ -115,7 +116,13 @@ export function SaveForm({ formProps, ...modalProps }: SaveFormProps) {
 
   const save = useCallback(
     values => {
-      onSave(values, onCancel);
+      onSave(
+        {
+          ...values,
+          config: { version: APP_CURRENT_VERSION, ...values.config },
+        },
+        onCancel,
+      );
     },
     [onSave, onCancel],
   );
@@ -184,15 +191,7 @@ export function SaveForm({ formProps, ...modalProps }: SaveFormProps) {
           }}
         />
       </Form.Item>
-      <Form.Item
-        wrapperCol={{ span: 13, offset: 9 }}
-        name={['config', 'expensiveQuery']}
-        initialValue={expensiveQuery}
-        valuePropName="checked"
-      >
-        <Checkbox>{t('expensiveQuery')}</Checkbox>
-      </Form.Item>
-      {!simple && (
+      {!simple && initialValues?.config && (
         <>
           <AdvancedToggle
             type="link"
@@ -238,6 +237,14 @@ export function SaveForm({ formProps, ...modalProps }: SaveFormProps) {
             >
               <InputNumber disabled={!cache} />
             </Form.Item>
+            <Form.Item
+              wrapperCol={{ span: 13, offset: 9 }}
+              name={['config', 'expensiveQuery']}
+              initialValue={expensiveQuery}
+              valuePropName="checked"
+            >
+              <Checkbox>{t('expensiveQuery')}</Checkbox>
+            </Form.Item>
           </AdvancedWrapper>
         </>
       )}
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Sidebar/index.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Sidebar/index.tsx
@@ -228,20 +228,23 @@ const Wrapper = styled.div<{
   isDragging: boolean;
   width: number;
 }>`
-  transition: ${p => (!p.isDragging ? 'width 0.3s ease' : 'none')};
   height: 100%;
+  transition: ${p => (!p.isDragging ? 'width 0.3s ease' : 'none')};
   &.close {
-    width: ${SPACE_TIMES(7.5)} !important;
-    border-right: 1px solid #e9ecef;
     position: absolute;
+    width: ${SPACE_TIMES(7.5)} !important;
     height: 100%;
     background: #fff;
+    border-right: 1px solid #e9ecef;
     .menuUnfoldOutlined {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
+    > div {
+      display: ${p => (p.sliderVisible ? 'none' : 'flex')};
+    }
     &:hover {
       width: ${p => p.width + '%'} !important;
       .menuUnfoldOutlined {
@@ -255,18 +258,15 @@ const Wrapper = styled.div<{
       }
     }
   }
-  > div {
-    display: ${p => (p.sliderVisible ? 'none' : 'flex')};
-  }
 `;
 const ListNavWrapper = styled(ListNav)`
+  position: relative;
+  z-index: ${NAV_LEVEL};
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
+  height: 100%;
   padding: ${SPACE_XS} 0;
   background-color: ${p => p.theme.componentBackground};
   border-right: 1px solid ${p => p.theme.borderColorSplit};
-  height: 100%;
-  position: relative;
-  z-index: ${NAV_LEVEL};
 `;
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/hooks/useSaveAsView.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/hooks/useSaveAsView.tsx
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/slice/thunks.ts b/frontend/src/app/pages/MainPage/pages/ViewPage/slice/thunks.ts
diff --git a/frontend/src/app/pages/MainPage/pages/VizPage/ChartPreview/ChartPreview.tsx b/frontend/src/app/pages/MainPage/pages/VizPage/ChartPreview/ChartPreview.tsx
diff --git a/frontend/src/styles/__tests__/media.test.ts b/frontend/src/styles/__tests__/media.test.ts
