Merge remote-tracking branch 'upstream/dev' into share

Author: SoarBlueSky

frontend/src/app/pages/DashBoardPage/actions/widgetAction.ts

@@ -17,7 +17,8 @@
  */
 import { urlSearchTransfer } from 'app/pages/MainPage/pages/VizPage/utils';
 import { ChartMouseEventParams } from 'app/types/Chart';
-import history from 'app/utils/history';
+import { History } from 'history';
+import i18next from 'i18next';
 import { RootState } from 'types';
 import { jumpTypes } from '../constants';
 import { boardActions } from '../pages/Board/slice';
@@ -43,6 +44,7 @@ import {
   getEditWidgetData,
 } from '../pages/BoardEditor/slice/thunk';
 import { getValueByRowData } from '../utils/widget';
+
 export const toggleLinkageAction =
   (boardEditing: boolean, boardId: string, widgetId: string, toggle: boolean) =>
   dispatch => {
@@ -105,11 +107,10 @@ export const tableChartClickAction =
 
 export const widgetClickJumpAction =
   (
-    boardId: string,
-    editing: boolean,
     renderMode: VizRenderMode,
     widget: Widget,
     params: ChartMouseEventParams,
+    history: History,
   ) =>
   (dispatch, getState) => {
     const state = getState() as RootState;
@@ -118,17 +119,11 @@ export const widgetClickJumpAction =
     const jumpConfig = widget.config?.jumpConfig;
     const targetType = jumpConfig?.targetType || jumpTypes[0].value;
 
-    if (
-      jumpConfig?.targetType === 'INTERNAL' &&
-      !folderIds.includes(jumpConfig.target.relId)
-    ) {
-      history.push(`/404/targetVizDeleted`);
-      return;
-    }
     const URL = jumpConfig?.URL || '';
     const queryName = jumpConfig?.queryName || '';
     const targetId = jumpConfig?.target?.relId;
     const jumpFieldName: string = jumpConfig?.field?.jumpFieldName || '';
+    // table chart
     if (
       params.componentType === 'table' &&
       jumpFieldName !== params.seriesName
@@ -137,23 +132,33 @@ export const widgetClickJumpAction =
       return;
     }
     const rowDataValue = getValueByRowData(params.data, jumpFieldName);
-    if (typeof jumpConfig?.filter === 'object' && targetType === 'INTERNAL') {
-      const searchParamsStr = urlSearchTransfer.toUrlString({
-        [jumpConfig?.filter?.filterId]: rowDataValue,
-      });
-      if (targetId) {
-        history.push(
-          `/organizations/${orgId}/vizs/${targetId}?${searchParamsStr}`,
-        );
-      }
-    } else if (targetType === 'URL') {
+    // jump url
+    if (targetType === 'URL') {
       let jumpUrl;
       if (URL.indexOf('?') > -1) {
         jumpUrl = `${URL}&${queryName}=${rowDataValue}`;
       } else {
         jumpUrl = `${URL}?${queryName}=${rowDataValue}`;
       }
       window.location.href = jumpUrl;
+      return;
+    }
+    // jump in datart
+    if (jumpConfig?.targetType === 'INTERNAL') {
+      if (!folderIds.includes(jumpConfig.target.relId)) {
+        dispatch(
+          showJumpErrorAction(renderMode, widget.dashboardId, widget.id),
+        );
+        return;
+      }
+      if (typeof jumpConfig?.filter === 'object') {
+        const searchParamsStr = urlSearchTransfer.toUrlString({
+          [jumpConfig?.filter?.filterId]: rowDataValue,
+        });
+        history.push(
+          `/organizations/${orgId}/vizs/${targetId}?${searchParamsStr}`,
+        );
+      }
     }
   };
 
@@ -246,6 +251,7 @@ export const widgetChartClickAction =
     renderMode: VizRenderMode,
     widget: Widget,
     params: ChartMouseEventParams,
+    history: History,
   ) =>
   dispatch => {
     //is tableChart
@@ -261,9 +267,7 @@ export const widgetChartClickAction =
     // jump
     const jumpConfig = widget.config?.jumpConfig;
     if (jumpConfig && jumpConfig.open) {
-      dispatch(
-        widgetClickJumpAction(boardId, editing, renderMode, widget, params),
-      );
+      dispatch(widgetClickJumpAction(renderMode, widget, params, history));
       return;
     }
     // linkage
@@ -293,3 +297,27 @@ export const widgetToClearLinkageAction =
       dispatch(widgetClearLinkageAction(widget, renderMode));
     }
   };
+
+export const showJumpErrorAction =
+  (renderMode: VizRenderMode, boardId: string, wid: string) => dispatch => {
+    const errorInfo = i18next.t('viz.jump.jumpError');
+    if (renderMode === 'edit') {
+      dispatch(
+        editWidgetInfoActions.setWidgetErrInfo({
+          boardId,
+          widgetId: wid,
+          errInfo: errorInfo, // viz.linkage.linkageError
+          errorType: 'interaction',
+        }),
+      );
+    } else {
+      dispatch(
+        boardActions.setWidgetErrInfo({
+          boardId,
+          widgetId: wid,
+          errInfo: errorInfo,
+          errorType: 'interaction',
+        }),
+      );
+    }
+  };

frontend/src/app/pages/DashBoardPage/components/ActionProvider/WidgetActionProvider.tsx

@@ -22,6 +22,7 @@ import { ChartMouseEventParams } from 'app/types/Chart';
 import debounce from 'lodash/debounce';
 import { createContext, FC, memo, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import {
   widgetChartClickAction,
   widgetGetDataAction,
@@ -76,7 +77,7 @@ export const WidgetActionProvider: FC<{
   renderMode: VizRenderMode;
 }> = memo(({ boardEditing, boardId, orgId, renderMode, children }) => {
   const dispatch = useDispatch();
-
+  const history = useHistory();
   const methods = useMemo(() => {
     const contextValue: WidgetActionContextProps = {
       onEditLayerToTop: () => {
@@ -183,9 +184,11 @@ export const WidgetActionProvider: FC<{
             renderMode,
             widget,
             params,
+            history,
           ),
         );
       },
+
       onWidgetClearLinkage: (widget: Widget) => {
         dispatch(widgetToClearLinkageAction(boardEditing, widget, renderMode));
       },
@@ -256,6 +259,7 @@ export const WidgetActionProvider: FC<{
       },
     };
     return contextValue;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [boardEditing, boardId, dispatch, orgId, renderMode]);
 
   return (

frontend/src/app/pages/DashBoardPage/components/WidgetComponents/StatusIcon.tsx

@@ -25,12 +25,13 @@ import {
 } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
 import useI18NPrefix from 'app/hooks/useI18NPrefix';
-import React, { memo, useContext } from 'react';
+import React, { memo, useCallback, useContext } from 'react';
 import styled from 'styled-components/macro';
 import { ERROR, PRIMARY } from 'styles/StyleConstants';
+import { Widget, WidgetErrorType } from '../../pages/Board/slice/types';
 import { WidgetActionContext } from '../ActionProvider/WidgetActionProvider';
 
-export const LockFnIcon: React.FC<{
+export const LockIconFn: React.FC<{
   boardEditing: boolean;
   wid: string;
   lock: boolean;
@@ -57,7 +58,23 @@ export const LockIcon: React.FC<{
     </Tooltip>
   );
 };
-
+export const WaitIconFn: React.FC<{ rendered: boolean; widget: Widget }> = memo(
+  ({ rendered, widget }) => {
+    const { onWidgetGetData } = useContext(WidgetActionContext);
+    const t = useI18NPrefix(`viz.widget.tips`);
+    const onRefreshWidget = useCallback(() => {
+      onWidgetGetData(widget);
+    }, [onWidgetGetData, widget]);
+    if (rendered) return null;
+    return (
+      <WaitingIcon
+        onClick={onRefreshWidget}
+        onMouseEnter={onRefreshWidget}
+        title={t('waiting')}
+      />
+    );
+  },
+);
 export const WaitingIcon: React.FC<{
   title: React.ReactNode;
   onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
@@ -88,6 +105,7 @@ export const LoadingIcon: React.FC<{ loading?: boolean }> = ({ loading }) => {
     />
   );
 };
+
 export const CancelLinkageIcon: React.FC<{
   title: React.ReactNode | undefined;
   onClick: React.MouseEventHandler<HTMLSpanElement> | undefined;
@@ -107,23 +125,50 @@ export const CanLinkageIcon: React.FC<{
     </Tooltip>
   );
 };
-
+export const LinkageIconFn: React.FC<{ inLinking: boolean; widget: Widget }> =
+  memo(({ inLinking, widget }) => {
+    const { onWidgetClearLinkage } = useContext(WidgetActionContext);
+    const t = useI18NPrefix(`viz.widget.tips`);
+    if (inLinking) {
+      return (
+        <CancelLinkageIcon
+          title={t('cancelLinkage')}
+          onClick={() => onWidgetClearLinkage(widget)}
+        />
+      );
+    } else {
+      return widget.config?.linkageConfig?.open ? (
+        <CanLinkageIcon title={t('canLinkage')} />
+      ) : null;
+    }
+  });
 const StyledErrorIcon = styled(Button)`
   background: ${p => p.theme.componentBackground};
   &:hover,
   &:focus {
     background: ${p => p.theme.componentBackground};
   }
 `;
+
 export const ErrorIcon: React.FC<{
-  errInfo: React.ReactNode;
-}> = ({ errInfo }) => {
+  errInfo?: Record<WidgetErrorType, string>;
+}> = memo(({ errInfo }) => {
+  if (!errInfo) return null;
+  const errorInfos = Object.values(errInfo);
+  if (!errorInfos.length) return null;
+  const errHtml = (
+    <div style={{ maxHeight: '200px', maxWidth: '400px', overflow: 'auto' }}>
+      {errorInfos.map((item, i) => {
+        return <p key={i}>{String(item)}</p>;
+      })}
+    </div>
+  );
   return (
-    <Tooltip title={errInfo}>
+    <Tooltip title={errHtml}>
       <StyledErrorIcon
         icon={<WarningTwoTone twoToneColor={ERROR} />}
         type="link"
       />
     </Tooltip>
   );
-};
+});

frontend/src/app/utils/history.ts …ents/WidgetComponents/WidgetDropdown.tsxfrontend/src/app/utils/history.ts renamed to frontend/src/app/pages/DashBoardPage/components/WidgetComponents/WidgetDropdown.tsx frontend/src/app/utils/history.ts renamed to frontend/src/app/pages/DashBoardPage/components/WidgetComponents/WidgetDropdown.tsx

@@ -15,7 +15,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { createBrowserHistory } from 'history';
-const history = createBrowserHistory();
-export default history;
+import { EllipsisOutlined } from '@ant-design/icons';
+import { Button, Dropdown } from 'antd';
+import { memo, ReactElement } from 'react';
+export const WidgetDropdown: React.FC<{ overlay: ReactElement }> = memo(
+  ({ overlay }) => {
+    return (
+      <Dropdown
+        className="widget-tool-dropdown"
+        overlay={overlay}
+        placement="bottomCenter"
+        trigger={['click']}
+        arrow
+      >
+        <Button icon={<EllipsisOutlined />} type="link" />
+      </Dropdown>
+    );
+  },
+);

frontend/src/app/pages/DashBoardPage/components/WidgetComponents/WidgetWrapper.tsx

@@ -37,4 +37,8 @@ const Wrapper = styled.div`
   display: flex;
   flex: 1;
   min-height: 0;
+
+  &:hover .widget-tool-dropdown {
+    visibility: visible;
+  }
 `;

frontend/src/app/pages/DashBoardPage/components/WidgetMapper/WidgetMapper.tsx

@@ -19,7 +19,7 @@ import { memo, useContext } from 'react';
 import { BoardType, MediaWidgetType } from '../../pages/Board/slice/types';
 import { WidgetDataProvider } from '../WidgetProvider/WidgetDataProvider';
 import { WidgetContext } from '../WidgetProvider/WidgetProvider';
-import { ControllerWidget } from '../Widgets/ControlWidget/ControlWidget';
+import { ControllerWidget } from '../Widgets/ControllerWidget/ControllerWidget';
 import { DataChartWidget } from '../Widgets/DataChartWidget/DataChartWidget';
 import { IframeWidget } from '../Widgets/IframeWidget/IframeWidget';
 import { ImageWidget } from '../Widgets/ImageWidget/ImageWidget';