refactor(CSS): Remove CSS files from pages. (LearningLocker#1464 - [L…

…L-204](https://learningpool.atlassian.net/browse/LL-204))

.eslintrc

@@ -8,6 +8,7 @@
   },
   "parser": "babel-eslint",
   "rules": {
+    "import/prefer-default-export": 0,
     "max-len": 0,
     "linebreak-style": 0,
     "array-callback-return": 0,

api/src/routes/HttpRoutes.js

@@ -359,9 +359,7 @@ restify.serve(router, QueryBuilderCache);
 restify.serve(router, QueryBuilderCacheValue);
 restify.serve(router, Role);
 restify.serve(router, PersonaAttribute, {
-  preDelete: async (req, res, next) => {
-    return next();
-  },
+  preDelete: async (req, res, next) => next(),
 });
 restify.serve(router, PersonasImport);
 restify.serve(router, PersonasImportTemplate);

package.json

@@ -160,6 +160,7 @@
     "source-map-support": "^0.4.10",
     "sqs-consumer": "^3.6.1",
     "stats-webpack-plugin": "^0.4.3",
+    "styled-components": "^4.4.0",
     "supertest": "^1.2.0",
     "tincanjs": "^0.41.1",
     "url-loader": "^0.5.7",

ui/src/pages/DataSourcePage/ExportManager/AddModelPrompt/index.js → ui/src/pages/DataSourcePage/ExportManager/AddModelPrompt.js

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import styles from './styles.css';
 
 class AddModelPrompt extends Component {
   static propTypes = {
@@ -10,19 +8,21 @@ class AddModelPrompt extends Component {
   }
 
   static defaultProps = {
-    onAdd: () => {}
+    onAdd: () => { }
   }
 
   render = () => {
     const { message } = this.props;
 
     return (
       <h4>
-        { message }
-        <a className={styles.addNew} onClick={this.props.onAdd}><i className="ion ion-plus-circled" /></a>
+        {message}
+        <a style={{ marginLeft: 8 }} onClick={this.props.onAdd}>
+          <i className="ion ion-plus-circled" />
+        </a>
       </h4>
     );
   }
 }
 
-export default withStyles(styles)(AddModelPrompt);
+export default AddModelPrompt;

ui/src/pages/DataSourcePage/ExportManager/ExportForm/ExportOutputPreview/index.js → ui/src/pages/DataSourcePage/ExportManager/ExportForm/ExportOutputPreview.js

@@ -1,16 +1,36 @@
 /* eslint-disable react/jsx-indent */
 import { isString } from 'lodash';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import React from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { Map } from 'immutable';
 import { withProps, compose, setPropTypes, shouldUpdate, defaultProps } from 'recompose';
 import { MultiGrid, AutoSizer } from 'react-virtualized';
 import { withModels } from 'ui/utils/hocs';
-import styles from './styles.css';
+
+const Cell = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: baseline;
+  text-align: left;
+  padding: 0 1em 0 0;
+  white-space: nowrap;
+`;
+
+const CellWrapper = styled.div`
+  overflow: hidden;
+  width: 100%;
+`;
+
+const HeaderCell = styled(Cell)`
+  border-bottom: 2px solid #ddd;
+  font-weight: bold;
+`;
 
 const enhance = compose(
-  withStyles(styles),
   setPropTypes({
     filter: PropTypes.instanceOf(Map).isRequired,
     project: PropTypes.instanceOf(Map).isRequired,
@@ -29,8 +49,8 @@ const enhance = compose(
     const results = models.map(model =>
       project.map((value, key) => (
         isString(value) ?
-        model.getIn(value.replace('$', '').split('.')) :
-        model.getIn(key.split('.'))
+          model.getIn(value.replace('$', '').split('.')) :
+          model.getIn(key.split('.'))
       ))
     ).toList();
     const headings = project.keySeq();
@@ -53,9 +73,9 @@ const renderHeading = headings =>
   ({ columnIndex, style, key }) => {
     const heading = headings.get(columnIndex);
     return (
-      <div className={`${styles.cell} ${styles.header}`} style={style} key={key}>
-        { heading }
-      </div>
+      <HeaderCell style={style} key={key}>
+        {heading}
+      </HeaderCell>
     );
   };
 
@@ -67,11 +87,11 @@ const renderResultContent = (results, headings) =>
     const display = value && value.toJS ? JSON.stringify(value.toJS()) : value;
 
     return (
-      <div className={styles.cell} key={key} style={style}>
-        <div className={styles.cellWrapper} title={display}>
+      <Cell key={key} style={style}>
+        <CellWrapper title={display}>
           {display}
-        </div>
-      </div>
+        </CellWrapper>
+      </Cell>
     );
   };
 
@@ -81,8 +101,8 @@ const renderCell = (results, headings) => {
   return ({ columnIndex, rowIndex, key, style }) =>
     (
       rowIndex === 0
-      ? renderHeadingCell({ columnIndex, style, key })
-      : renderResultContentCell({ columnIndex, rowIndex: rowIndex - 1, style, key })
+        ? renderHeadingCell({ columnIndex, style, key })
+        : renderResultContentCell({ columnIndex, rowIndex: rowIndex - 1, style, key })
     );
 };
 

ui/src/pages/DataSourcePage/ExportManager/ExportForm/ProjectionInput/index.js → ui/src/pages/DataSourcePage/ExportManager/ExportForm/ProjectionInput.js

@@ -1,12 +1,10 @@
 /* eslint-disable react/jsx-indent */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import withStyles from 'isomorphic-style-loader/lib/withStyles';
 import { Map } from 'immutable';
 import JsonTextArea from 'ui/components/JsonTextArea';
 import toString from 'lodash/toString';
 import TableInput from 'ui/components/TableInput';
-import styles from './projectionbuilder.css';
 import CacheKeysAutoComplete from './CacheKeysAutoComplete';
 
 const stripDollar = string => string.replace(/^(\$)/, '');
@@ -52,20 +50,20 @@ class ProjectionInput extends Component {
 
     return (
       <div style={{ marginTop: '10px' }} >
-        { rawMode ? (
+        {rawMode ? (
           <span>
             <JsonTextArea value={projection} onChange={onChange} setReviver={setReviver} />
           </span>
         ) : (
-          <TableInput
-            values={projection}
-            onChange={this.onChange}
-            onValueChange={this.onEditFieldVal}
-            inputComponent={this.renderInputComponent} />
-        )}
+            <TableInput
+              values={projection}
+              onChange={this.onChange}
+              onValueChange={this.onEditFieldVal}
+              inputComponent={this.renderInputComponent} />
+          )}
       </div>
     );
   }
 }
 
-export default withStyles(styles)(ProjectionInput);
+export default ProjectionInput;