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 }),