Merge pull request #2252 from scottsut/dev

chore: Merge hotfix from master to dev

frontend/rollup.config.js

@@ -7,6 +7,7 @@ import replace from '@rollup/plugin-replace';
 import typescript from '@rollup/plugin-typescript';
 import path from 'path';
 import cleanup from 'rollup-plugin-cleanup';
+
 export default {
   input: 'src/task.ts', // 打包入口
   output: {
@@ -36,6 +37,7 @@ export default {
     cleanup(),
     replace({
       'console.log': '//console.log',
+      'process.env.PUBLIC_URL': JSON.stringify(process.env.PUBLIC_URL),
     }),
   ],
 };

frontend/src/app/components/Avatar.tsx

@@ -1,4 +1,5 @@
 import { Avatar as AntdAvatar, AvatarProps } from 'antd';
+import endsWith from 'lodash/endsWith';
 import { CSSProperties, useState } from 'react';
 import styled from 'styled-components/macro';
 
@@ -12,7 +13,7 @@ export function Avatar(props: AvatarProps) {
   }
   if (
     typeof safeSrc === 'string' &&
-    (safeSrc.endsWith('null') || safeSrc.endsWith('undefined'))
+    (endsWith(safeSrc, 'null') || endsWith(safeSrc, 'undefined'))
   ) {
     setSafeSrc('');
   }

frontend/src/app/migration/BoardConfig/migrateWidgetChartConfig.ts

@@ -28,6 +28,14 @@ const migrateWidgetChartConfig = (widgets: Widget[]): Widget[] => {
   }
   return widgets
     .map(widget => {
+      // ------------------------------------------------
+      // FIXME 1.0.0-rc.3 hotfix, will remove in next version.
+      if (typeof widget?.config?.content?.dataChart?.config === 'string') {
+        widget.config.content.dataChart.config = JSON.parse(
+          widget.config.content.dataChart.config,
+        );
+      }
+      // ------------------------------------------------
       if (widget?.config?.content?.dataChart?.config) {
         const event_rc_2 = new MigrationEvent(APP_VERSION_RC_2, RC2);
         const dispatcher_rc_2 = new MigrationEventDispatcher(event_rc_2);

frontend/src/app/pages/DashBoardPage/components/WidgetManager/utils/init.ts

@@ -27,7 +27,7 @@ import type {
 import { Widget } from 'app/pages/DashBoardPage/types/widgetTypes';
 import type { ChartStyleConfig } from 'app/types/ChartConfig';
 import { getInitialLocale } from 'locales/utils';
-import { uuidv4 } from 'utils/utils';
+import { universalUUID } from 'utils/utils';
 
 export const initTitleTpl = () => {
   const titleTpl: ChartStyleConfig = {
@@ -472,7 +472,7 @@ export const initFreeWidgetRect = (): RectConfig => ({
 
 export const widgetTpl = (): Widget => {
   return {
-    id: uuidv4(),
+    id: universalUUID(),
     dashboardId: '',
     datachartId: '',
     relations: [],
@@ -502,7 +502,7 @@ export const widgetTpl = (): Widget => {
 };
 
 export const initClientId = () => {
-  return 'client_' + uuidv4();
+  return 'client_' + universalUUID();
 };
 export const initWidgetName = (i18nMap: object, local?: string) => {
   if (local && i18nMap[local]) {

frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/HiddenUploader.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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 { Upload } from 'antd';
+import { uploadBoardImage } from 'app/pages/DashBoardPage/pages/BoardEditor/slice/thunk';
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { useDispatch } from 'react-redux';
+import { BoardContext } from '../../BoardProvider/BoardProvider';
+
+interface HiddenUploaderProps {
+  onChange: (url: string) => void;
+}
+
+export const HiddenUploader = forwardRef(
+  ({ onChange }: HiddenUploaderProps, ref) => {
+    const dispatch = useDispatch();
+    const uploadRef = useRef<any>();
+    const { boardId } = useContext(BoardContext);
+
+    useImperativeHandle(ref, () => uploadRef.current?.upload.uploader);
+
+    const beforeUpload = useCallback(
+      async info => {
+        const formData = new FormData();
+        formData.append('file', info);
+        dispatch(
+          uploadBoardImage({
+            boardId,
+            fileName: info.name,
+            formData: formData,
+            resolve: onChange,
+          }),
+        );
+        return false;
+      },
+      [boardId, dispatch, onChange],
+    );
+
+    return (
+      <Upload
+        accept=".jpg,.jpeg,.png,.gif,.svg"
+        beforeUpload={beforeUpload}
+        multiple={false}
+        showUploadList={false}
+        style={{ display: 'none' }}
+        ref={uploadRef}
+      />
+    );
+  },
+);

frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/ImageWidget.tsx

@@ -15,9 +15,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Space } from 'antd';
 import { WidgetContext } from 'app/pages/DashBoardPage/components/WidgetProvider/WidgetProvider';
-import { memo, useContext } from 'react';
+import {
+  editBoardStackActions,
+  editWidgetInfoActions,
+} from 'app/pages/DashBoardPage/pages/BoardEditor/slice';
+import { memo, useCallback, useContext, useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import styled from 'styled-components/macro';
 import { BoardContext } from '../../BoardProvider/BoardProvider';
 import { FlexStyle, ZIndexStyle } from '../../WidgetComponents/constants';
 import { EditMask } from '../../WidgetComponents/EditMask';
@@ -30,38 +37,99 @@ import {
   getWidgetBaseStyle,
   getWidgetTitle,
 } from '../../WidgetManager/utils/utils';
+import { WidgetInfoContext } from '../../WidgetProvider/WidgetInfoProvider';
+import { HiddenUploader } from './HiddenUploader';
 import { ImageWidgetCore } from './ImageWidgetCore';
+import { Picture } from './Picture';
 
 export const ImageWidget: React.FC<{ hideTitle: boolean }> = memo(
   ({ hideTitle }) => {
+    const dispatch = useDispatch();
     const widget = useContext(WidgetContext);
+    const widgetInfo = useContext(WidgetInfoContext);
     const { editing } = useContext(BoardContext);
     const title = getWidgetTitle(widget.config.customConfig.props);
     title.title = widget.config.name;
     const { background, border, padding } = getWidgetBaseStyle(
       widget.config.customConfig.props,
     );
+    const showBackground =
+      !background.image && background.color === 'transparent';
+    const uploaderRef = useRef<any>();
+
+    useEffect(() => {
+      if (widgetInfo.editing) {
+        uploaderRef.current?.onClick();
+      }
+    }, [widgetInfo.editing]);
+
+    const uploaderChange = useCallback(
+      (url: string) => {
+        dispatch(
+          editBoardStackActions.updateWidgetStyleConfigByPath({
+            ancestors: [0, 0],
+            configItem: {
+              key: 'background',
+              comType: 'background',
+              label: 'background.background',
+              value: { ...background, image: url },
+            },
+            wid: widget.id,
+          }),
+        );
+        dispatch(editWidgetInfoActions.closeWidgetEditing(widget.id));
+      },
+      [dispatch, widget.id, background],
+    );
+
     return (
-      <WidgetWrapper background={background} border={border} padding={padding}>
-        <div style={ZIndexStyle}>
-          {!hideTitle && <WidgetTitle title={title} />}
+      <>
+        <WidgetWrapper
+          background={background}
+          border={border}
+          padding={padding}
+        >
+          <div style={ZIndexStyle}>
+            {!hideTitle && <WidgetTitle title={title} />}
 
-          <div style={FlexStyle}>
-            <ImageWidgetCore />
+            <div style={FlexStyle}>
+              <ImageWidgetCore />
+            </div>
           </div>
-        </div>
-        {editing && <EditMask />}
-        <StyledWidgetToolBar>
-          <Space size={0}>
-            <LockIconFn
-              boardEditing={editing}
-              wid={widget.id}
-              lock={widget.config?.lock}
-            />
-            <WidgetDropdownList widget={widget} />
-          </Space>
-        </StyledWidgetToolBar>
-      </WidgetWrapper>
+          {editing && <EditMask />}
+          <StyledWidgetToolBar>
+            <Space size={0}>
+              <LockIconFn
+                boardEditing={editing}
+                wid={widget.id}
+                lock={widget.config?.lock}
+              />
+              <WidgetDropdownList widget={widget} />
+            </Space>
+          </StyledWidgetToolBar>
+        </WidgetWrapper>
+        {editing && (
+          <HiddenUploader onChange={uploaderChange} ref={uploaderRef} />
+        )}
+        {editing && showBackground && (
+          <ImageWidgetBackground>
+            <Picture />
+          </ImageWidgetBackground>
+        )}
+      </>
     );
   },
 );
+
+const ImageWidgetBackground = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;

frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/Picture.tsx

@@ -0,0 +1,51 @@
+/**
+ * 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 useI18NPrefix from 'app/hooks/useI18NPrefix';
+import styled from 'styled-components/macro';
+
+export function Picture() {
+  const t = useI18NPrefix(`viz.board.setting`);
+
+  return (
+    <Svg
+      viewBox="0 0 1029 1128"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M944.148 94.925H235.336c-46.853 0-84.972 38.118-84.972 84.971v39.87H93.46c-46.064 0-83.537 37.473-83.537 83.538v508.81c0 46.065 37.473 83.538 83.537 83.538h696.07c46.064 0 83.538-37.473 83.538-83.538v-41.298h71.08c46.854 0 84.972-38.113 84.972-84.972V179.896c0-46.858-38.113-84.971-84.972-84.971zM61.61 651.372V303.299c0-17.562 14.29-31.847 31.851-31.847h696.07A31.887 31.887 0 0 1 821.38 303.3v479.098L631.43 619.577 477.932 711.68 255.493 457.482 61.61 651.372zM789.53 843.96H93.46a31.887 31.887 0 0 1-31.85-31.85v-87.65l191.365-191.375 214.508 245.15 158.602-95.15L807.29 838.39a31.135 31.135 0 0 1-17.761 5.57z m154.62-124.84h-71.081V303.298c0-46.065-37.474-83.538-83.538-83.538H202.056v-39.87c0-18.35 14.93-33.28 33.28-33.28h708.812c18.35 0 33.28 14.93 33.28 33.28v505.943a33.321 33.321 0 0 1-33.28 33.285zM644.361 552.34c57.278 0 103.87-46.597 103.87-103.869 0-57.277-46.597-103.87-103.87-103.87s-103.87 46.598-103.87 103.87c-0.004 57.272 46.593 103.87 103.87 103.87z m0-156.047c28.77 0 52.178 23.409 52.178 52.178s-23.408 52.178-52.178 52.178-52.178-23.409-52.178-52.178 23.404-52.178 52.178-52.178z"></path>
+      <text x="500" y="1096" textAnchor="middle">
+        {t('dbClickToUpload')}
+      </text>
+    </Svg>
+  );
+}
+
+const Svg = styled.svg`
+  width: 60%;
+  height: 60%;
+
+  path {
+    fill: ${p => p.theme.borderColorEmphasis};
+  }
+
+  text {
+    font-size: 120px;
+    fill: ${p => p.theme.borderColorBase};
+  }
+`;

frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/imageConfig.ts

@@ -96,15 +96,6 @@ export const widgetToolkit: ImageToolkit = {
       { ...initPaddingTpl() },
       { ...initBorderTpl() },
     ];
-    widget.config.customConfig.props?.forEach(ele => {
-      if (ele.key === 'backgroundGroup') {
-        ele.rows?.forEach(row => {
-          if (row.key === 'background') {
-            row.value.image = '/images/example.png';
-          }
-        });
-      }
-    });
 
     return widget;
   },

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx

@@ -63,6 +63,7 @@ export const UploadDragger: React.FC<{
   return (
     <StyleUpload
       name={'upload-image'}
+      accept=".jpg,.jpeg,.png,.gif,.svg"
       className="datart-ant-upload"
       beforeUpload={beforeUpload}
       multiple={false}

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/index.ts

@@ -195,7 +195,6 @@ const widgetInfoRecordSlice = createSlice({
     closeWidgetEditing(state, action: PayloadAction<string>) {
       const id = action.payload;
       if (id) {
-        state[id].selected = false;
         state[id].editing = false;
       } else {
         for (let key of Object.keys(state)) {

frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/thunk.ts

@@ -269,7 +269,7 @@ export const addDataChartWidgets = createAsyncThunk<
   'editBoard/addDataChartWidgets',
   async ({ boardId, chartIds, boardType }, { getState, dispatch }) => {
     const {
-      data: { datacharts, views, viewVariables },
+      data: { datacharts: serverDataCharts, views, viewVariables },
     } = await request2<{
       datacharts: ServerDatachart[];
       views: View[];
@@ -278,13 +278,17 @@ export const addDataChartWidgets = createAsyncThunk<
       url: `viz/datacharts?datachartIds=${chartIds.join()}`,
       method: 'get',
     });
-    const dataCharts: DataChart[] = getDataChartsByServer(datacharts, views);
-    const dashboardDataChartMap = datacharts.reduce<
-      Record<string, ServerDatachart>
-    >((acc, cur) => {
-      acc[cur.id] = cur;
-      return acc;
-    }, {});
+    const dataCharts: DataChart[] = getDataChartsByServer(
+      serverDataCharts,
+      views,
+    );
+    const dashboardDataChartMap = dataCharts.reduce<Record<string, DataChart>>(
+      (acc, cur) => {
+        acc[cur.id] = cur;
+        return acc;
+      },
+      {},
+    );
     const viewViews = getChartDataView(views, dataCharts);
     dispatch(
       boardActions.setDataChartToMap({ dashboardId: boardId, dataCharts }),