Merge pull request #61 from gitcomteam/feature/56-import-project-flow

project import flow updated

Author: mx2s

src/Routes.tsx

@@ -10,7 +10,6 @@ import HomeIntegrationsLayout from "./layouts/home/integrations/HomeIntegrations
 import LoginWithGitLabLayout from "./layouts/auth/external/gitlab/logInWith/LoginWithGitLabLayout";
 import LoginWithGitHubLayout from "./layouts/auth/external/github/loginWith/LoginWithGitHubLayout";
 import ExternalRepoLayout from "./layouts/repos/external/default/ExternalRepoLayout";
-import ProjectImportLayout from "./layouts/import/project/ProjectImportLayout";
 import ProjectPage from "./layouts/entity/project/view/ProjectPage";
 import BoardPage from "./layouts/entity/board/page/BoardPage";
 import SubscriptionLayout from "./layouts/account/subscription/SubscriptionLayout";
@@ -62,10 +61,6 @@ class Routes extends React.Component {
                     <Route path="/auth/external/github/login" exact component={LoginWithGitHubLayout}/>
                     <Route path="/auth/external/gitlab/login" exact component={LoginWithGitLabLayout}/>
 
-                    {/* External import routes */}
-
-                    <Route path="/user/repository/import" exact component={ProjectImportLayout}/>
-
                     {/* Project */}
 
                     <Route path="/:owner/:alias" exact component={ProjectPage}/>

src/components/external/external_repo/card/ExternalRepoCard.tsx

@@ -1,43 +1,105 @@
 import React from "react";
-import {Button, Card, Col, Row} from "antd";
+import {Button, Card, Col, notification, Row} from "antd";
+import {ServiceType1} from "../../../../client/models";
+import {ProjectModel} from "../../../../client/bindings";
 import {Link} from "react-router-dom";
-import {buildQuery} from "../../../../classes/utils/url/QueryBuilder";
 
 interface IProps {
     repo: {
         name: string,
         description: string,
-        serviceType: string,
+        serviceType: ServiceType1,
         originId: string
     }
 }
 
-interface IState {}
+interface IState {
+    importButton: {
+        isLoading: boolean,
+        label: string
+    },
+    importedProject: ProjectModel|null
+}
 
 class ExternalRepoCard extends React.Component<IProps, IState> {
-    getImportUrl(): string {
-        return "/user/repository/import?" + buildQuery({
-            origin_id: this.props.repo.originId,
-            service_type: this.props.repo.serviceType
-        });
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            importButton: {
+                isLoading: false,
+                label: "Import"
+            },
+            importedProject: null
+        }
     }
 
+    /* TODO: get repo status and if already imported - show 'go to project' button */
+
     getExternalUrl(): string {
         let repo = this.props.repo;
         return `https://${repo.serviceType}.com/${repo.name}`;
     }
 
+    sendImportRequest() {
+        this.setState({
+            importButton: {
+                label: 'Importing...',
+                isLoading: true
+            }
+        });
+
+        const repo = this.props.repo;
+        window.App.apiClient.postImportRepository(
+            window.App.apiToken,
+            repo.originId,
+            repo.serviceType
+        )
+            .then((res) => {
+                const project = JSON.parse(res._response.bodyAsText).data.project;
+                if (!project.base_uri) return;
+                notification['success']({
+                    message: `Project '${project.name}' imported successfully!`
+                });
+                this.setState({
+                    importedProject: project
+                });
+            })
+            .catch((err) => {
+                const project = JSON.parse(err.response.body).metadata.project;
+                if (!project.base_uri) return;
+                this.setState({
+                    importedProject: project
+                });
+            });
+    }
+
     render() {
+        let importButton = this.state.importButton;
+        const importedProject = this.state.importedProject;
+
         return <Card className="text-left">
             <Row>
                 <Col xs={16}>
                     <b> {this.props.repo.name} </b> <br/>
-                    <b>Description:</b> <p className="inline"> description here </p> <br/>
-                    <b>Status:</b> <p className="inline"> unknown </p>
+                    <b>Description:</b> <p className="inline"> {this.props.repo.description} </p> <br/>
                 </Col>
                 <Col xs={8} className="text-center">
                     <Row>
-                        <Link to={this.getImportUrl()}><Button type={"primary"}>Import</Button></Link>
+                        {
+                            importedProject ?
+                                <div>
+                                    <p>Project imported</p>
+                                    <Link to={`/${importedProject!.base_uri}`}>
+                                        <Button type={"primary"}>Open page</Button>
+                                    </Link>
+                                </div>
+                                :
+                                <Button
+                                    onClick={() => this.sendImportRequest()}
+                                    loading={importButton.isLoading}
+                                    type={"primary"}
+                                >{importButton.label}</Button>
+                        }
                     </Row>
                     <Row className="margin-sm-top">
                         <a target="_blank" rel="noopener noreferrer" href={this.getExternalUrl()}><Button

src/layouts/auth/external/github/loginWith/LoginWithGitHubLayout.tsx

@@ -57,7 +57,7 @@ class LoginWithGitHubLayout extends React.Component<IProps, IState> {
         });
         setTimeout(() => {
             this.setState({
-                redirectBlock: <Redirect to={"/home/integrations"}/>
+                redirectBlock: <Redirect to={"/home"}/>
             });
         }, 1000);
     }

src/layouts/auth/external/gitlab/logInWith/LoginWithGitLabLayout.tsx

@@ -57,7 +57,7 @@ class LoginWithGitLabLayout extends React.Component<IProps, IState> {
         });
         setTimeout(() => {
             this.setState({
-                redirectBlock: <Redirect to={"/home/integrations"}/>
+                redirectBlock: <Redirect to={"/home"}/>
             });
         }, 1000);
     }

src/layouts/import/project/ProjectImportLayout.tsx

@@ -73,7 +73,7 @@ class ExternalRepoLayout extends React.Component<IProps, IState> {
 
             {!this.state.isLoaded ? <Icon type="loading" style={{fontSize: "2em"}}/> : null}
 
-            <Row>
+            <Row type={"flex"}>
                 {this.state.repositories.map((item: any, i: number) => {
                     return <Col key={i} md={12} xs={24} className="padding-sm">
                         <ExternalRepoCard repo={{