Fixed disabling the requests, improved notification links

changelog.d/20240719_132628_klakhov_improved_requests.md

@@ -0,0 +1,8 @@
+### Fixed
+
+- Request card was not disabed properly after downloading
+  (<https://github.com/cvat-ai/cvat/pull/8197>)
+
+### Changed
+- Following the link in notification no longer reloads the page
+  (<https://github.com/cvat-ai/cvat/pull/8197>)

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.64.0",
+  "version": "1.64.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/actions/requests-actions.ts

@@ -21,6 +21,7 @@ export enum RequestsActionsTypes {
     CANCEL_REQUEST_FAILED = 'CANCEL_REQUEST_FAILED',
     DELETE_REQUEST = 'DELETE_REQUEST',
     DELETE_REQUEST_FAILED = 'DELETE_REQUEST_FAILED',
+    DISABLE_REQUEST = 'DISABLE_REQUEST',
 }
 
 export const requestsActions = {
@@ -44,6 +45,9 @@ export const requestsActions = {
     cancelRequestFailed: (request: Request, error: any) => createAction(
         RequestsActionsTypes.CANCEL_REQUEST_FAILED, { request, error },
     ),
+    disableRequest: (request: Request) => createAction(
+        RequestsActionsTypes.DISABLE_REQUEST, { request },
+    ),
 };
 
 export type RequestsActions = ActionUnion<typeof requestsActions>;

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx

@@ -44,12 +44,12 @@ import {
 import DetectorRunner, { DetectorRequestBody } from 'components/model-runner-modal/detector-runner';
 import LabelSelector from 'components/label-selector/label-selector';
 import CVATTooltip from 'components/common/cvat-tooltip';
+import CVATMarkdown from 'components/common/cvat-markdown';
 
 import ApproximationAccuracy, {
     thresholdFromAccuracy,
 } from 'components/annotation-page/standard-workspace/controls-side-bar/approximation-accuracy';
 import { switchToolsBlockerState } from 'actions/settings-actions';
-import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
 import withVisibilityHandling from './handle-popover-visibility';
 import ToolsTooltips from './interactor-tooltips';
 
@@ -440,7 +440,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
             setTimeout(() => this.runInteractionRequest(interactionId));
         } catch (error: any) {
             notification.error({
-                description: <ReactMarkdown>{error.message}</ReactMarkdown>,
+                description: <CVATMarkdown>{error.message}</CVATMarkdown>,
                 message: 'Interaction error occurred',
                 duration: null,
             });
@@ -533,7 +533,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
             fetchAnnotations();
         } catch (error: any) {
             notification.error({
-                description: <ReactMarkdown>{error.message}</ReactMarkdown>,
+                description: <CVATMarkdown>{error.message}</CVATMarkdown>,
                 message: 'Tracking error occurred',
                 duration: null,
             });
@@ -787,7 +787,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                     } catch (error: any) {
                         notification.error({
                             message: 'Tracker initialization error',
-                            description: <ReactMarkdown>{error.message}</ReactMarkdown>,
+                            description: <CVATMarkdown>{error.message}</CVATMarkdown>,
                             duration: null,
                         });
                     } finally {
@@ -841,7 +841,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                     } catch (error: any) {
                         notification.error({
                             message: 'Tracking error',
-                            description: <ReactMarkdown>{error.message}</ReactMarkdown>,
+                            description: <CVATMarkdown>{error.message}</CVATMarkdown>,
                             duration: null,
                         });
                     } finally {
@@ -900,7 +900,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
             } catch (error: any) {
                 notification.error({
                     message: 'Could not initialize OpenCV',
-                    description: <ReactMarkdown>{error.message}</ReactMarkdown>,
+                    description: <CVATMarkdown>{error.message}</CVATMarkdown>,
                     duration: null,
                 });
             } finally {
@@ -1346,7 +1346,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                         onSwitchToolsBlockerState({ buttonVisible: false });
                     } catch (error: any) {
                         notification.error({
-                            description: <ReactMarkdown>{error.message}</ReactMarkdown>,
+                            description: <CVATMarkdown>{error.message}</CVATMarkdown>,
                             message: 'Detection error occurred',
                             duration: null,
                         });

cvat-ui/src/components/common/cvat-markdown.tsx

@@ -0,0 +1,41 @@
+import Button from 'antd/lib/button';
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { RouteComponentProps } from 'react-router-dom';
+
+export type UseHistoryType = RouteComponentProps['history'];
+
+const RouterLinkHOC = (history?: UseHistoryType) => (
+    function (props: { children: React.ReactNode, href?: string }): JSX.Element {
+        const { href, children } = props;
+
+        if (href?.match(/^\//) && history) {
+            return (
+                <Button
+                    type='link'
+                    className='cvat-notification-link'
+                    onClick={() => {
+                        history.push(href);
+                    }}
+                >
+                    {children}
+                </Button>
+            );
+        }
+
+        return (<a href={href}>{children}</a>);
+    });
+
+export default function CVATMarkdown(props: { history?: UseHistoryType, children: string }): JSX.Element {
+    const { children, history } = props;
+
+    return (
+        <ReactMarkdown
+            components={{
+                a: RouterLinkHOC(history),
+            }}
+        >
+            {children}
+        </ReactMarkdown>
+    );
+}

cvat-ui/src/components/cvat-app.tsx

@@ -14,7 +14,6 @@ import Spin from 'antd/lib/spin';
 import { DisconnectOutlined } from '@ant-design/icons';
 import Space from 'antd/lib/space';
 import Text from 'antd/lib/typography/Text';
-import ReactMarkdown from 'react-markdown';
 
 import LogoutComponent from 'components/logout-component';
 import LoginPageContainer from 'containers/login-page/login-page';
@@ -77,6 +76,7 @@ import '../styles.scss';
 import appConfig from 'config';
 import EventRecorder from 'utils/event-recorder';
 import { authQuery } from 'utils/auth-query';
+import CVATMarkdown from './common/cvat-markdown';
 import EmailConfirmationPage from './email-confirmation-pages/email-confirmed';
 import EmailVerificationSentPage from './email-confirmation-pages/email-verification-sent';
 import IncorrectEmailConfirmationPage from './email-confirmation-pages/incorrect-email-confirmation';
@@ -358,20 +358,20 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
     }
 
     private showMessages(): void {
+        const { notifications, resetMessages, history } = this.props;
+
         function showMessage(notificationState: NotificationState): void {
             notification.info({
                 message: (
-                    <ReactMarkdown>{notificationState.message}</ReactMarkdown>
+                    <CVATMarkdown history={history}>{notificationState.message}</CVATMarkdown>
                 ),
                 description: notificationState?.description && (
-                    <ReactMarkdown>{notificationState?.description}</ReactMarkdown>
+                    <CVATMarkdown history={history}>{notificationState?.description}</CVATMarkdown>
                 ),
                 duration: notificationState.duration || null,
             });
         }
 
-        const { notifications, resetMessages } = this.props;
-
         let shown = false;
         for (const where of Object.keys(notifications.messages)) {
             for (const what of Object.keys((notifications as any).messages[where])) {
@@ -389,6 +389,8 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
     }
 
     private showErrors(): void {
+        const { notifications, resetErrors, history } = this.props;
+
         function showError(title: string, _error: Error, shouldLog?: boolean, className?: string): void {
             const error = _error?.message || _error.toString();
             const dynamicProps = typeof className === 'undefined' ? {} : { className };
@@ -400,10 +402,10 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
             notification.error({
                 ...dynamicProps,
                 message: (
-                    <ReactMarkdown>{title}</ReactMarkdown>
+                    <CVATMarkdown history={history}>{title}</CVATMarkdown>
                 ),
                 duration: null,
-                description: errorLength > 300 ? 'Open the Browser Console to get details' : <ReactMarkdown>{error}</ReactMarkdown>,
+                description: errorLength > 300 ? 'Open the Browser Console to get details' : <CVATMarkdown history={history}>{error}</CVATMarkdown>,
             });
 
             if (shouldLog) {
@@ -416,8 +418,6 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
             }
         }
 
-        const { notifications, resetErrors } = this.props;
-
         let shown = false;
         for (const where of Object.keys(notifications.errors)) {
             for (const what of Object.keys((notifications as any).errors[where])) {

cvat-ui/src/components/export-backup/export-backup-modal.tsx

@@ -5,7 +5,7 @@
 import './styles.scss';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import ReactMarkdown from 'react-markdown';
+import { useHistory } from 'react-router';
 import Modal from 'antd/lib/modal';
 import Notification from 'antd/lib/notification';
 import Text from 'antd/lib/typography/Text';
@@ -15,6 +15,7 @@ import { CombinedState, StorageLocation } from 'reducers';
 import { exportActions, exportBackupAsync } from 'actions/export-actions';
 import { getCore, Storage, StorageData } from 'cvat-core-wrapper';
 
+import CVATMarkdown from 'components/common/cvat-markdown';
 import TargetStorageField from 'components/storage/target-storage-field';
 
 const core = getCore();
@@ -36,6 +37,7 @@ const initialValues: FormValues = {
 
 function ExportBackupModal(): JSX.Element {
     const dispatch = useDispatch();
+    const history = useHistory();
     const [form] = Form.useForm();
     const [instanceType, setInstanceType] = useState('');
     const [useDefaultStorage, setUseDefaultStorage] = useState(true);
@@ -100,11 +102,11 @@ function ExportBackupModal(): JSX.Element {
             );
             closeModal();
 
-            const description = 'Backup export was started. You can check progress [here](/requests)';
+            const description = 'Backup export was started. You can check progress [here](/requests).';
             Notification.info({
                 message: 'Backup export started',
                 description: (
-                    <ReactMarkdown>{description}</ReactMarkdown>
+                    <CVATMarkdown history={history}>{description}</CVATMarkdown>
                 ),
                 className: 'cvat-notification-notice-export-backup-start',
             });

cvat-ui/src/components/export-dataset/export-dataset-modal.tsx

@@ -6,6 +6,7 @@
 import './styles.scss';
 import React, { useState, useEffect, useCallback } from 'react';
 import { connect, useDispatch } from 'react-redux';
+import { useHistory } from 'react-router';
 import Modal from 'antd/lib/modal';
 import Notification from 'antd/lib/notification';
 import { DownloadOutlined } from '@ant-design/icons';
@@ -16,12 +17,12 @@ import Form from 'antd/lib/form';
 import Switch from 'antd/lib/switch';
 import Space from 'antd/lib/space';
 import TargetStorageField from 'components/storage/target-storage-field';
+import CVATMarkdown from 'components/common/cvat-markdown';
 import { CombinedState, StorageLocation } from 'reducers';
 import { exportActions, exportDatasetAsync } from 'actions/export-actions';
 import {
     Dumper, ProjectOrTaskOrJob, Job, Project, Storage, StorageData, Task,
 } from 'cvat-core-wrapper';
-import ReactMarkdown from 'react-markdown';
 
 type FormValues = {
     selectedFormat: string | undefined;
@@ -59,6 +60,7 @@ function ExportDatasetModal(props: StateToProps): JSX.Element {
     const [defaultStorageCloudId, setDefaultStorageCloudId] = useState<number>();
     const [helpMessage, setHelpMessage] = useState('');
     const dispatch = useDispatch();
+    const history = useHistory();
 
     useEffect(() => {
         if (instance instanceof Project) {
@@ -121,7 +123,7 @@ function ExportDatasetModal(props: StateToProps): JSX.Element {
             Notification.info({
                 message: `${resource} export started`,
                 description: (
-                    <ReactMarkdown>{description}</ReactMarkdown>
+                    <CVATMarkdown history={history}>{description}</CVATMarkdown>
                 ),
                 className: `cvat-notification-notice-export-${instanceType.split(' ')[0]}-start`,
             });

cvat-ui/src/components/import-dataset/import-dataset-modal.tsx

@@ -6,7 +6,7 @@
 import './styles.scss';
 import React, { useCallback, useEffect, useReducer } from 'react';
 import { connect, useDispatch } from 'react-redux';
-import ReactMarkdown from 'react-markdown';
+import { useHistory } from 'react-router';
 import Modal from 'antd/lib/modal';
 import Form, { RuleObject } from 'antd/lib/form';
 import Text from 'antd/lib/typography/Text';
@@ -19,6 +19,7 @@ import {
     UploadOutlined, InboxOutlined, QuestionCircleOutlined,
 } from '@ant-design/icons';
 import CVATTooltip from 'components/common/cvat-tooltip';
+import CVATMarkdown from 'components/common/cvat-markdown';
 import { CombinedState, StorageLocation } from 'reducers';
 import { importActions, importDatasetAsync } from 'actions/import-actions';
 import Space from 'antd/lib/space';
@@ -278,6 +279,7 @@ function ImportDatasetModal(props: StateToProps): JSX.Element {
     } = props;
     const [form] = Form.useForm();
     const appDispatch = useDispatch();
+    const history = useHistory();
 
     const [state, dispatch] = useReducer(reducer, {
         instanceType: '',
@@ -462,11 +464,11 @@ function ImportDatasetModal(props: StateToProps): JSX.Element {
                 ));
             const resToPrint = uploadParams.resource.charAt(0).toUpperCase() + uploadParams.resource.slice(1);
             const description = `${resToPrint} import was started for ${instanceType}.` +
-            ' You can check progress [here](/requests)';
+            ' You can check progress [here](/requests).';
             Notification.info({
                 message: `${resToPrint} import started`,
                 description: (
-                    <ReactMarkdown>{description}</ReactMarkdown>
+                    <CVATMarkdown history={history}>{description}</CVATMarkdown>
                 ),
                 className: `cvat-notification-notice-import-${uploadParams.resource}-start`,
             });

cvat-ui/src/components/requests-page/request-card.tsx

@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
-import React, { useState } from 'react';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Row, Col } from 'antd/lib/grid';
@@ -20,10 +20,12 @@ import { RQStatus, Request } from 'cvat-core-wrapper';
 
 import moment from 'moment';
 import { cancelRequestAsync } from 'actions/requests-async-actions';
+import { requestsActions } from 'actions/requests-actions';
 import StatusMessage from './request-status';
 
 export interface Props {
     request: Request;
+    disabled: boolean;
 }
 
 function constructLink(request: Request): string | null {
@@ -136,12 +138,11 @@ const dimensions = {
 };
 
 function RequestCard(props: Props): JSX.Element {
-    const { request } = props;
+    const { request, disabled } = props;
     const { operation } = request;
     const { type } = operation;
 
     const dispatch = useDispatch();
-    const [isActive, setIsActive] = useState(true);
 
     const linkToEntity = constructLink(request);
     const percent = request.status === RQStatus.FINISHED ? 100 : request.progress;
@@ -152,7 +153,7 @@ function RequestCard(props: Props): JSX.Element {
     const percentProgress = (request.status === RQStatus.FAILED || !percent) ? '' : `${percent.toFixed(2)}%`;
 
     const style: React.CSSProperties = {};
-    if (!isActive) {
+    if (disabled) {
         style.pointerEvents = 'none';
         style.opacity = 0.5;
     }
@@ -166,7 +167,7 @@ function RequestCard(props: Props): JSX.Element {
                 const downloadAnchor = window.document.getElementById('downloadAnchor') as HTMLAnchorElement;
                 downloadAnchor.href = request.url;
                 downloadAnchor.click();
-                setIsActive(false);
+                dispatch(requestsActions.disableRequest(request));
             },
         });
     }
@@ -178,7 +179,7 @@ function RequestCard(props: Props): JSX.Element {
             label: 'Cancel',
             onClick: () => {
                 dispatch(cancelRequestAsync(request, () => {
-                    setIsActive(false);
+                    dispatch(requestsActions.disableRequest(request));
                 }));
             },
         });