Fixed disabling the requests, improved notification links (#8197)

<!-- Raise an issue to propose your change
(https://github.com/cvat-ai/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution guide](https://docs.cvat.ai/docs/contributing/).
-->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->
The pr adresses two problems:
1. If we download something from requests page, the card will be
disabled. But if we go to another page after it, it will be enabled
again. The pr adds storing of disabled requests to global store
2. Improved links that are shown by requests notifications. We render
them as buttons that operate with react router instead of plain `<a>`
tags, using which reloads the page.

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->
Manual

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [ ] I have created a changelog fragment <!-- see top comment in
CHANGELOG.md -->
- ~~[ ] I have updated the documentation accordingly~~
- ~~[ ] I have added tests to cover my changes~~
- ~~[ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))~~
- [x] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/cvat-ai/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/cvat-ai/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/cvat-ai/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/cvat-ai/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/cvat-ai/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new action to disable requests, expanding request
management functionality.
- Added a new `CVATMarkdown` component for improved rendering of
markdown content in error notifications.

- **Enhancements**
- Replaced `ReactMarkdown` with `CVATMarkdown` across various components
for consistent error message formatting.
- Added a `disabled` prop to `RequestCard` component to manage
interactive states.

- **Bug Fixes**
- Improved notification message formatting by adding punctuation to the
end of sentences.

- **Styles**
	- Added a new CSS class for better styling of notification links.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Boris Sekachev <boris.sekachev@yandex.ru>

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,45 @@
+// Copyright (C) 2024 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+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`,
             });