PXD-1310 Fix/css refactor 3

src/DataDictionary/DataDictionaryNode.jsx

@@ -285,8 +285,6 @@ const DataDictionaryNode = ({ params, submission }) => {
       <Link to='/dd'>{'< top level dictionary'}</Link>
       <h3> {dictionary[node].title} </h3>
       Download template: <a className='data-dictionary__download-button' href={`/api/v0/submission/template/${node}?format=json`}>{'JSON'}</a> | <a className='data-dictionary__download-button' href={`/api/v0/submission/template/${node}`}>{'TSV'}</a>
-
-
       <h4> Summary </h4>
       <NodeTable node={dictionary[node]} />
 

src/Explorer/ExplorerTable.jsx

@@ -131,15 +131,15 @@ class ExplorerTableComponent extends Component {
         </tbody>
         <tfoot className='explorer-table__table-foot'>
           <tr className='explorer-table__table-row'>
-            <td className='explorer-table__table-data explorer-table__table-data--foot-cell explorer-table__table-data--foot-column-0'>
+            <td className='explorer-table__table-data explorer-table__table-data--foot-column-0'>
               {
                 (this.state.originalPage > 0) &&
                 <button className='explorer-table__arrow-button' onClick={() => this.loadMorePrev()}>
                   Prev {this.props.pageCount}
                 </button>
               }
             </td>
-            <td className='explorer-table__table-data explorer-table__table-data--foot-cell explorer-table__table-data--foot-column-1'>
+            <td className='explorer-table__table-data explorer-table__table-data--foot-column-1'>
               {
                 pages.map(item => (
                   <button
@@ -158,15 +158,15 @@ class ExplorerTableComponent extends Component {
                 ))
               }
             </td>
-            <td className='explorer-table__table-data explorer-table__table-data--foot-cell explorer-table__table-data--foot-column-2'>
+            <td className='explorer-table__table-data explorer-table__table-data--foot-column-2'>
               <SelectComponent
                 values={pageSizeValues}
                 title={'Page size: '}
                 selectedValue={this.props.pageSize}
                 onChange={value => this.props.onPageSizeChange(value)}
               />
             </td>
-            <td className='explorer-table__table-data explorer-table__table-data--foot-cell explorer-table__table-data--foot-column-3'>
+            <td className='explorer-table__table-data explorer-table__table-data--foot-column-3'>
               {
                 (this.props.lastPageSize === 0) &&
                 <button className='explorer-table__arrow-button' onClick={() => this.loadMoreNext()}>

src/Explorer/ExplorerTable.less

@@ -96,10 +96,6 @@
   text-align: center;
 }
 
-.explorer-table__table-data--foot-cell {
-
-}
-
 .explorer-table__table-data--foot-column-0 {
   width: 20%;
 }

src/Submission/AnyOfInput.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TextInput from './TextInput';
+import './AnyOfInput.less';
+
+const AnyOfInput = ({
+  name,
+  values,
+  node,
+  properties,
+  required,
+  requireds,
+  onChange,
+}) => {
+  // this is smelly code because it reuses logic from SubmitNodeForm,
+  // I'd like to extract some of the code into another function
+
+  const onChangeAnyOfWrapper = (event) => {
+    onChange(name, event, properties);
+  };
+
+  return (
+    <div>
+      <h6 className='any-of-input__name'>{name}:</h6>
+      {required && <span className='any-of-input__required-notification'> {'*'} </span>}
+      <div className='any-of-input__sub-props'>
+        {properties.map((property) => {
+          let description = ('description' in node.properties[property]) ? node.properties[property].description : '';
+          if (description === '') {
+            description = ('term' in node.properties[property]) ? node.properties[property].term.description : '';
+          }
+          const requiredSubprop = (requireds.indexOf(property) > -1);
+          // we use index 0 of values because AnyOfInput is hardcoded
+          // to be an array of length 1, an upcoming feature should be to add to this array
+          return (
+            <TextInput
+              key={property}
+              name={property}
+              value={values ? values[0][property] : ''}
+              required={required && requiredSubprop}
+              description={description}
+              onChange={onChangeAnyOfWrapper}
+            />);
+        })}
+      </div>
+    </div>
+  );
+};
+
+AnyOfInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  values: PropTypes.object.isRequired,
+  node: PropTypes.any.isRequired,
+  properties: PropTypes.array.isRequired,
+  required: PropTypes.bool.isRequired,
+  requireds: PropTypes.array,
+  onChange: PropTypes.func.isRequired,
+};
+
+AnyOfInput.defaultProps = {
+  requireds: [],
+};
+
+export default AnyOfInput;

src/Submission/AnyOfInput.less

@@ -0,0 +1,13 @@
+.any-of-input__required-notification {
+  color: #d45252;
+  margin: 5px 0 0 0;
+  display: inline;
+}
+
+.any-of-input__sub-props {
+  margin-left: 50px;
+}
+
+.any-of-input__name {
+  display: inline;
+}

src/Submission/EnumInput.jsx

@@ -1,20 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Dropdown, Label } from '../theme';
-
-const RequiredNotification = styled.span`
-  color:#d45252;
-  margin:5px 0 0 0;
-  display:inline;
-  float: ${props => (props.istext ? 'right' : '')};
-`;
-
-const InputDescription = styled.span`
-  font-size: 1rem;
-  display:inline-block;
-  width: 750px;
-`;
+import Select from 'react-select';
+import './EnumInput.less';
 
 class EnumInput extends Component {
   static propTypes = {
@@ -50,17 +37,18 @@ class EnumInput extends Component {
     };
     return (
       <div>
-        <Label htmlFor={this.props.name}> {this.props.name}: </Label>
-        {this.props.description !== '' && <InputDescription>{this.props.description}</InputDescription>}
+        <label className='enum-input__label' htmlFor={this.props.name}> {this.props.name}: </label>
+        {this.props.description !== '' && <span className='enum-input__input-description'>{this.props.description}</span>}
         <br />
-        <Dropdown
+        <Select
           name={this.props.name}
           options={options}
           required={this.props.required}
           value={this.state.chosenEnum}
           onChange={onChangeEnumWrapper}
+          className='enum-input__select'
         />
-        {this.props.required && <RequiredNotification> {'*'} </RequiredNotification>}
+        {this.props.required && <span className='enum-input__required-notification'> {'*'} </span>}
         <br />
       </div>
     );

src/Submission/EnumInput.less

@@ -0,0 +1,23 @@
+.enum-input__select {
+  width: 40%;
+  margin-right: 1em;
+  display: inline-block;
+  z-index: 10;
+}
+
+.enum-input__label {
+  margin: 3px;
+  display: inline-block;
+}
+
+.enum-input__input-description {
+  font-size: 1rem;
+  display: inline-block;
+  width: 750px;
+}
+
+.enum-input__required-notification {
+  color: #d45252;
+  margin: 5px 0 0 0;
+  display: inline;
+}

src/Submission/ProjectSubmission.jsx

@@ -1,27 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
-
 import SubmitTSV from './SubmitTSV';
 import DataModelGraph from '../DataModelGraph/DataModelGraph';
 import SubmitForm from './SubmitForm';
 import Spinner from '../components/Spinner';
-
-const Browse = styled(Link)`
-  display: inline-block;
-  font-style: italic;
-  padding: 0px 5px;
-  vertical-align: sub;
-  background: #e1f7e3
-  margin-bottom: 15px;
-`;
-export const Title = styled.h2`
-  display: inline-block;
-  vertical-align: middle;
-  margin: 15px 0px;
-  margin-right: 0.5em;
-`;
+import './ProjectSubmission.less';
 
 const ProjectSubmission = (props) => {
   // hack to detect if dictionary data is available, and to trigger fetch if not
@@ -46,9 +30,9 @@ const ProjectSubmission = (props) => {
 
   return (
     <div>
-      <Title>{props.project}</Title>
+      <h2 className='project-submission__title'>{props.project}</h2>
       {
-        <Browse to={`/${props.project}/search`}>browse nodes</Browse>
+        <Link className='project-submission__link' to={`/${props.project}/search`}>browse nodes</Link>
       }
       <MySubmitForm />
       <MySubmitTSV project={props.project} />

src/Submission/ProjectSubmission.less

@@ -0,0 +1,15 @@
+.project-submission__link {
+  display: inline-block;
+  font-style: italic;
+  padding: 0 5px;
+  vertical-align: sub;
+  background: #e1f7e3;
+  margin-bottom: 15px;
+}
+
+.project-submission__title {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 15px 0;
+  margin-right: 0.5em;
+}

src/Submission/SubmissionResult.jsx

@@ -1,37 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
 import brace from 'brace'; // needed by AceEditor
 import 'brace/mode/json';
 import 'brace/theme/kuroir';
 import AceEditor from 'react-ace';
 import PropTypes from 'prop-types';
 import FlatButton from 'material-ui/FlatButton';
-
-import { button } from '../theme';
-
-const Container = styled.div`
-border-top: 1px dashed ${props => props.theme.mid_gray};
-padding-top: 1em;
-padding-bottom: 1em;
-margin-top: 1em;
-`;
-
-const Status = styled.div`
-${button};
-background-color: ${props => ((props.status === 200) ? '#168616' : 'gray')};
-color: white;
-margin-bottom: 1em;
-`;
-
-const summaryDivStyle = {
-  maxHeight: '250px',
-  overflow: 'auto',
-};
-
-const summaryListStyle = {
-  listStyle: 'disc',
-  padding: '0px 0px 25px 25px',
-};
+import './SubmissionResult.less';
 
 /**
  * Present summary of a submission success or failure given
@@ -73,9 +47,9 @@ class SubmissionResult extends React.Component {
           const res = db; res[type] = (res[type] || 0) + 1;
           return res;
         }, {});
-      summary = (<div id='cd-summary__result_200' style={summaryDivStyle}>
+      summary = (<div id='cd-summary__result_200' className='submission-result__summary'>
         <p>Successfully created entities:</p>
-        <ul style={summaryListStyle}>
+        <ul className='submission-result__list'>
           {Object.keys(entityType2Count).sort()
             .map(type => <li key={type}>{entityType2Count[type]} of {type}</li>)}
         </ul>
@@ -104,11 +78,16 @@ class SubmissionResult extends React.Component {
     }
 
     return (
-      <Container id='cd-submit-tsv__result'>
-        <Status status={status}>{status === 200 ? `succeeded: ${status}` : `failed: ${status}`}</Status>
+      <div className='submission-result' id='cd-submit-tsv__result'>
+        <div
+          className={`submission-result__status submission-result__status--${status === 200 ? 'succeeded' : 'failed'}`}
+          status={status}
+        >
+          {status === 200 ? `succeeded: ${status}` : `failed: ${status}`}
+        </div>
         {summary}
         {fullResponse}
-      </Container>
+      </div>
     );
   }
 }

src/Submission/SubmissionResult.less

@@ -0,0 +1,29 @@
+.submission-result {
+  border-top: 1px dashed #8F8F8F;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  margin-top: 1em;
+}
+
+.submission-result__status {
+  color: white;
+  margin-bottom: 1em;
+}
+
+.submission-result__status--succeeded {
+  background-color: #168616;
+}
+
+.submission-result__status--failed {
+  background-color: gray;
+}
+
+.submission-result__summary {
+  max-height: 250px;
+  overflow: auto;
+}
+
+.submission-result__list {
+  list-style: disc;
+  padding: 0 0 25px 25px;
+}