React UI: Displaying public ssh keys in UI (#1375)

* Updated changelog

* Typos

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Increase preview size of a task till 256, 256 on the server
 - Minor style updates
+- Public ssh-keys are displayed in a dedicated window instead of console when create a task with a repository
 
 ### Deprecated
 -

cvat-ui/src/components/create-task-page/create-task-page.tsx

@@ -3,30 +3,65 @@
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React from 'react';
-
-import {
-    Row,
-    Col,
-} from 'antd';
-
+import React, { useEffect } from 'react';
+import { Row, Col } from 'antd/lib/grid';
+import Modal from 'antd/lib/modal';
 import Text from 'antd/lib/typography/Text';
+import Paragraph from 'antd/lib/typography/Paragraph';
+import TextArea from 'antd/lib/input/TextArea';
 
 import CreateTaskContent, { CreateTaskData } from './create-task-content';
 
+
 interface Props {
     onCreate: (data: CreateTaskData) => void;
     status: string;
+    error: string;
     installedGit: boolean;
 }
 
 export default function CreateTaskPage(props: Props): JSX.Element {
     const {
+        error,
         status,
         onCreate,
         installedGit,
     } = props;
 
+    useEffect(() => {
+        if (error) {
+            let errorCopy = error;
+            const sshKeys: string[] = [];
+            while (errorCopy.length) {
+                const startIndex = errorCopy.search(/'ssh/);
+                if (startIndex === -1) break;
+                let sshKey = errorCopy.slice(startIndex + 1);
+                const stopIndex = sshKey.search(/'/);
+                sshKey = sshKey.slice(0, stopIndex);
+                sshKeys.push(sshKey);
+                errorCopy = errorCopy.slice(stopIndex + 1);
+            }
+
+            if (sshKeys.length) {
+                Modal.error({
+                    width: 800,
+                    title: 'Could not clone the repository',
+                    content: (
+                        <>
+                            <Paragraph>
+                                <Text>Please make sure it exists and you have access</Text>
+                            </Paragraph>
+                            <Paragraph>
+                                <Text>Consider adding the following public ssh keys to git: </Text>
+                            </Paragraph>
+                            <TextArea rows={10} value={sshKeys.join('\n\n')} />
+                        </>
+                    ),
+                });
+            }
+        }
+    }, [error]);
+
     return (
         <Row type='flex' justify='center' align='top' className='cvat-create-task-form-wrapper'>
             <Col md={20} lg={16} xl={14} xxl={9}>

cvat-ui/src/containers/create-task-page/create-task-page.tsx

@@ -12,6 +12,7 @@ import { createTaskAsync } from 'actions/tasks-actions';
 
 interface StateToProps {
     status: string;
+    error: string;
     installedGit: boolean;
 }
 

cvat-ui/src/reducers/interfaces.ts

@@ -57,6 +57,7 @@ export interface TasksState {
         };
         creates: {
             status: string;
+            error: string;
         };
     };
 }

cvat-ui/src/reducers/tasks-reducer.ts

@@ -32,6 +32,7 @@ const defaultState: TasksState = {
         deletes: {},
         creates: {
             status: '',
+            error: '',
         },
     },
 };
@@ -238,6 +239,7 @@ export default (state: TasksState = defaultState, action: AnyAction): TasksState
                     ...state.activities,
                     creates: {
                         status: '',
+                        error: '',
                     },
                 },
             };
@@ -276,6 +278,7 @@ export default (state: TasksState = defaultState, action: AnyAction): TasksState
                     creates: {
                         ...state.activities.creates,
                         status: 'FAILED',
+                        error: action.payload.error.toString(),
                     },
                 },
             };