Removing react-related components

src/app/app-routing.module.ts

@@ -3,7 +3,6 @@ import { RouterModule, Routes } from '@angular/router';
 import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component';
 import { DirectLinkComponent } from './components/direct-link/direct-link.component';
 import { HelpComponent } from './components/help/help.component';
-import { ReportIssueComponent } from './components/help/report-issue/report-issue.component';
 import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 import { BuiltInPreferencesComponent } from './components/preferences/built-in/built-in-preferences.component';
@@ -69,7 +68,6 @@ const routes: Routes = [
         resolve: { server: ServerResolve },
       },
       { path: 'help', component: HelpComponent },
-      { path: 'help/reportissue', component: ReportIssueComponent },
       { path: 'settings', component: SettingsComponent },
       { path: 'settings/console', component: ConsoleComponent },
       { path: 'installed-software', component: InstalledSoftwareComponent },

src/app/app.module.ts

@@ -1,4 +1,3 @@
-import { AngularReactBrowserModule } from '@angular-react/core';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
@@ -43,7 +42,6 @@ import { NodeLabelDraggedComponent } from './components/drawings-listeners/node-
 import { TextAddedComponent } from './components/drawings-listeners/text-added/text-added.component';
 import { TextEditedComponent } from './components/drawings-listeners/text-edited/text-edited.component';
 import { HelpComponent } from './components/help/help.component';
-import { ReportIssueComponent } from './components/help/report-issue/report-issue.component';
 import { InstallSoftwareComponent } from './components/installed-software/install-software/install-software.component';
 import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
 import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
@@ -456,11 +454,9 @@ import { RotationValidator } from './validators/rotation-validator';
     InformationDialogComponent,
     TemplateNameDialogComponent,
     ConfigureCustomAdaptersDialogComponent,
-    EditNetworkConfigurationDialogComponent,
-    ReportIssueComponent,
+    EditNetworkConfigurationDialogComponent
   ],
   imports: [
-    AngularReactBrowserModule,
     BrowserModule,
     HttpClientModule,
     AppRoutingModule,

src/app/components/help/help.component.html

@@ -34,6 +34,5 @@
     <button mat-button class="full-width">
       <a href="https://docs.gns3.com/docs/"> Go to documentation </a>
     </button>
-    <button mat-button routerLink="/help/reportissue" class="full-width">Report an issue</button>
   </div>
 </div>

src/app/components/help/report-issue/filter.tsx

@@ -1,24 +0,0 @@
-import React, {Component} from "react";
-import Form from 'react-bootstrap/Form';
-
-const formGroupStyle = {
-    margin: '20px'
-};
-
-class FilterComponent extends Component<any, any> {
-    constructor(props) {
-        super(props);
-    }
-
-    render() {
-        return (
-            <div>
-                <Form.Group style={formGroupStyle}>
-                    <Form.Control size="lg" type="text" placeholder="Search by keyword" value={this.props.filter} onChange={this.props.handleChange} />
-                </Form.Group>
-            </div>
-        )
-    }
-}
-
-export default FilterComponent;

src/app/components/help/report-issue/issue-list.tsx

@@ -1,95 +0,0 @@
-import React, { Component } from "react";
-import Card from 'react-bootstrap/Card';
-import Spinner from 'react-bootstrap/Spinner';
-import IssueComponent from './issue';
-import FilterComponent from './filter';
-import e from '../../../event-bus';
-
-const wrapperStyle = { 
-    justifyContent: 'center' as 'center', 
-    display: 'flex', 
-    flex: 1, 
-    flexDirection: 'row' as 'row', 
-    flexWrap: 'wrap' as 'wrap',  
-    margin: '20px' 
-};
-
-const cardStyle = { 
-    width: '300px', 
-    margin: '20px' 
-};
-
-const cardTitleStyle = { 
-    color: 'red' 
-};
-const message = 'Thank you for reporting the issue!';
-const apiUrl = 'https://api.github.com/repos/GNS3/gns3-web-ui/issues';
-const newIssueLink = 'https://github.com/GNS3/gns3-web-ui/issues/new';
-
-class IssueListComponent extends Component<any, any> {
-    constructor(props) {
-        super(props);
-        this.state = {
-            issues: [],
-            filteredIssues: [],
-            isFetching: true
-        };
-    }
-
-    componentDidMount() {
-        fetch(apiUrl)
-            .then(response => response.json())
-            .then(data => this.setState({ 
-                issues: data, 
-                filteredIssues: data,
-                isFetching: false 
-            }));
-    }
-
-    handleChange = (event) => {
-        let filter = event.target.value;
-        let filteredIssues = this.state.issues;
-
-        filteredIssues = filteredIssues.filter((issue) => {
-            return issue.title.toLowerCase().includes(filter.toLowerCase())
-        });
-
-        this.setState({
-            filteredIssues: filteredIssues
-        });
-    }
-
-    newIssueOpened = (event) => {
-        e.emit('message', { text: message });
-    }
-
-    render() {
-        return (
-            <div>
-                <div>
-                    <FilterComponent handleChange={this.handleChange} filter={this.state.filter} />
-                </div>
-                
-                {this.state.isFetching ? (
-                    <div style={wrapperStyle}>
-                        <Spinner animation="grow" />
-                    </div>
-                ) : (
-                    <div style={wrapperStyle}>
-                    {this.state.filteredIssues.map(issue =>
-                        <IssueComponent key={issue.html_url} data={issue}/>
-                    )}
-                    <Card style={cardStyle}>
-                        <Card.Body>
-                            <Card.Title style={cardTitleStyle}>Don't see your issue here?</Card.Title>
-                            <Card.Link onClick={this.newIssueOpened} href={newIssueLink} target = "_blank">Open new issue</Card.Link>
-                        </Card.Body>
-                    </Card>
-                    </div>
-                )}
-            </div>
-        );
-    }
-};
-
-export default IssueListComponent;

src/app/components/help/report-issue/issue.tsx

@@ -1,42 +0,0 @@
-import React, { Component } from "react";
-import Card from 'react-bootstrap/Card';
-
-const cardStyle = { 
-    width: '300px', 
-    margin: '20px' 
-};
-
-const cardTitleStyle = { 
-    color: 'black' 
-};
-
-const cardTextStyle = { 
-    color: 'black', 
-    overflow: 'auto', 
-    height: '100px' 
-};
-
-class IssueComponent extends Component<any, any> {
-    constructor(props) {
-        super(props);
-        this.state = {
-            data: this.props.data
-        }
-    }
-
-    render() {
-        const issue = this.state.data;
-        return (
-            <Card key={issue.html_url} style={cardStyle}>
-                <Card.Body>
-                    <Card.Title style={cardTitleStyle}>{issue.title}</Card.Title>
-                    <Card.Subtitle className="mb-2 text-muted">Status: {issue.state}</Card.Subtitle>
-                    <Card.Text style={cardTextStyle}>{issue.body}</Card.Text>
-                    <Card.Link href={issue.html_url} target = "_blank">{issue.html_url}</Card.Link>
-                </Card.Body>
-            </Card>
-        );
-    }
-};
-
-export default IssueComponent;

src/app/components/help/report-issue/report-issue.component.html

@@ -1 +0,0 @@
-<span #issueListComponentContainer></span>

src/app/components/help/report-issue/report-issue.component.tsx

@@ -1,52 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnInit,
-    OnChanges,
-    OnDestroy,
-    Output,
-    SimpleChanges,
-    ViewChild,
-    ViewEncapsulation,
-    AfterContentInit
-  } from '@angular/core';
-import IssueListComponent from '../report-issue/issue-list';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import e from '../../../event-bus';
-import { ToasterService } from '../../../services/toaster.service';
-
-@Component({
-selector: 'app-report-issue',
-templateUrl: './report-issue.component.html',
-styleUrls: ['./report-issue.component.scss']
-})
-export class ReportIssueComponent implements OnDestroy, AfterViewInit, AfterContentInit  {
-    @ViewChild('issueListComponentContainer') containerRef: ElementRef;
-
-    constructor(private toasterService: ToasterService) {}
-
-    ngAfterViewInit() {
-        this.render();
-    }
-
-    ngAfterContentInit() {
-        e.on('message', message => {
-            this.toasterService.success(message.text);
-        });
-    }
-
-    ngOnDestroy() {
-        ReactDOM.unmountComponentAtNode(this.containerRef.nativeElement);
-    }
-
-    private render() {
-        ReactDOM.render(<div>
-            <IssueListComponent />
-        </div>, this.containerRef.nativeElement);
-    }
-}