Mission editing slang (#483)

* Update GlobalDeploymentTab.tsx

nicer symbol editing

* nicer buttons

Author: gerhean

src/components/incubator/ImportFromFileComponent.tsx

@@ -1,23 +1,30 @@
+import { FileInput } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
 import * as React from 'react';
 import { parseString } from 'xml2js';
 import { IAssessment, IAssessmentOverview } from '../../components/assessment/assessmentShape';
 import { makeEntireAssessment, retrieveLocalAssessment } from '../../utils/xmlParser';
+import { controlButton } from '../commons';
 import { assessmentTemplate, overviewTemplate } from '../incubator/assessmentTemplates';
 
 type Props = {
   newAssessment: (assessment: IAssessment) => void;
   updateEditingOverview: (overview: IAssessmentOverview) => void;
 };
 
-export class ImportFromFileComponent extends React.Component<Props, { isInvalidXml: boolean }> {
+type State = {
+  fileInputText: string;
+};
+
+export class ImportFromFileComponent extends React.Component<Props, State> {
   private fileReader: FileReader;
   public constructor(props: any) {
     super(props);
     this.handleFileRead = this.handleFileRead.bind(this);
     this.handleChangeFile = this.handleChangeFile.bind(this);
     this.makeMission = this.makeMission.bind(this);
     this.state = {
-      isInvalidXml: false
+      fileInputText: 'Import XML'
     };
   }
 
@@ -32,13 +39,14 @@ export class ImportFromFileComponent extends React.Component<Props, { isInvalidX
     return (
       <div>
         <div>Please ensure that the xml uploaded is trustable.</div>
-        <input type="file" id="file" accept=".xml" onChange={this.handleChangeFile} />
-        <button onClick={this.makeMission}>Make New Mission</button>
-        {this.state.isInvalidXml ? (
-          <div>The xml uploaded is invalid.</div>
-        ) : (
-          <div>You can edit this card</div>
-        )}
+        <div>
+          <FileInput
+            text={this.state.fileInputText}
+            inputProps={{ accept: '.xml' }}
+            onChange={this.handleChangeFile}
+          />
+        </div>
+        <div>{controlButton('Make New Mission', IconNames.NEW_OBJECT, this.makeMission)}</div>
       </div>
     );
   }
@@ -57,13 +65,13 @@ export class ImportFromFileComponent extends React.Component<Props, { isInvalidX
           localStorage.setItem('MissionEditingAssessmentSA', JSON.stringify(entireAssessment[1]));
           this.props.newAssessment(entireAssessment[1]);
           this.setState({
-            isInvalidXml: false
+            fileInputText: 'Success!'
           });
         } catch (err) {
           // tslint:disable-next-line:no-console
           console.log(err);
           this.setState({
-            isInvalidXml: true
+            fileInputText: 'Invalid XML!'
           });
         }
       });
@@ -79,7 +87,7 @@ export class ImportFromFileComponent extends React.Component<Props, { isInvalidX
     }
   };
 
-  private makeMission = (e: any) => {
+  private makeMission = () => {
     localStorage.setItem('MissionEditingOverviewSA', JSON.stringify(overviewTemplate));
     this.props.updateEditingOverview(overviewTemplate);
 

src/components/incubator/editingWorkspaceSideContent/GlobalDeploymentTab.tsx

@@ -37,10 +37,10 @@ export class GlobalDeploymentTab extends React.Component<IProps, {}> {
   private deploymentTab = () => {
     const deployment = this.props.assessment.globalDeployment!;
     const symbols = deployment.external.symbols.map((symbol, i) => (
-      <div key={i} className="mcq-option col-xs-12">
-        {this.symbolTextareaContent(i)}
-        <br />
-      </div>
+      <tr key={i}>
+        <td>{this.symbolTextareaContent(i)}</td>
+        <td>{controlButton('Delete', IconNames.MINUS, this.handleSymbolDelete(i))}</td>
+      </tr>
     ));
 
     return (
@@ -61,7 +61,7 @@ export class GlobalDeploymentTab extends React.Component<IProps, {}> {
         Symbols:
         <br />
         <br />
-        {symbols}
+        <table style={{ width: '100%' }}>{symbols}</table>
         {controlButton('New Symbol', IconNames.PLUS, this.handleNewSymbol)}
       </div>
     );
@@ -88,6 +88,13 @@ export class GlobalDeploymentTab extends React.Component<IProps, {}> {
     this.props.updateAssessment(assessment);
   };
 
+  private handleSymbolDelete = (index: number) => () => {
+    const assessment = this.props.assessment;
+    const symbols = assessment.globalDeployment!.external.symbols;
+    symbols.splice(index, 1);
+    this.props.updateAssessment(assessment);
+  };
+
   private handleNewSymbol = () => {
     const assessment = this.props.assessment;
     const symbols = assessment.globalDeployment!.external.symbols;
@@ -104,6 +111,9 @@ export class GlobalDeploymentTab extends React.Component<IProps, {}> {
   private handleExternalSelect = (i: IExternal, e: React.ChangeEvent<HTMLSelectElement>) => {
     const assessment = this.props.assessment;
     assessment.globalDeployment!.external.name = i.name;
+    assessment.globalDeployment!.external.symbols = JSON.parse(
+      JSON.stringify(externalLibraries.get(i.name)!)
+    );
     this.props.updateAssessment(assessment);
   };
 }