Merge pull request #54 from atlarge-research/build/frontend

Simplify and optimize frontend build process

22 files changed, 93 insertions, 71 deletions

diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
index 54709482..7cbb45c0 100644
--- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import './ScaleIndicatorComponent.css'
+import './ScaleIndicatorComponent.sass'
 
 const ScaleIndicatorComponent = ({ scale }) => (
     <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js
index e0e4d554..f372734d 100644
--- a/frontend/src/components/app/map/controls/ToolPanelComponent.js
+++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer'
 import ExportCanvasComponent from './ExportCanvasComponent'
-import './ToolPanelComponent.css'
+import './ToolPanelComponent.sass'
 
 const ToolPanelComponent = () => (
     <div className="tool-panel">
diff --git a/frontend/src/components/app/sidebars/Sidebar.js b/frontend/src/components/app/sidebars/Sidebar.js
index e1760d5e..f7368f54 100644
--- a/frontend/src/components/app/sidebars/Sidebar.js
+++ b/frontend/src/components/app/sidebars/Sidebar.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import React from 'react'
-import './Sidebar.css'
+import './Sidebar.sass'
 
 class Sidebar extends React.Component {
     static propTypes = {
diff --git a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
index c03b826f..569166d8 100644
--- a/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
+++ b/frontend/src/components/app/sidebars/topology/machine/UnitTabsComponent.js
@@ -1,50 +1,78 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap'
 import UnitAddContainer from '../../../../../containers/app/sidebars/topology/machine/UnitAddContainer'
 import UnitListContainer from '../../../../../containers/app/sidebars/topology/machine/UnitListContainer'
 
-const UnitTabsComponent = () => (
-    <div>
-        <ul className="nav nav-tabs mt-2 mb-1" role="tablist">
-            <li className="nav-item">
-                <a className="nav-link active" data-toggle="tab" href="#cpu-units" role="tab">
-                    CPU
-                </a>
-            </li>
-            <li className="nav-item">
-                <a className="nav-link" data-toggle="tab" href="#gpu-units" role="tab">
-                    GPU
-                </a>
-            </li>
-            <li className="nav-item">
-                <a className="nav-link" data-toggle="tab" href="#memory-units" role="tab">
-                    Memory
-                </a>
-            </li>
-            <li className="nav-item">
-                <a className="nav-link" data-toggle="tab" href="#storage-units" role="tab">
-                    Stor.
-                </a>
-            </li>
-        </ul>
-        <div className="tab-content">
-            <div className="tab-pane active" id="cpu-units" role="tabpanel">
-                <UnitAddContainer unitType="cpu" />
-                <UnitListContainer unitType="cpu" />
-            </div>
-            <div className="tab-pane" id="gpu-units" role="tabpanel">
-                <UnitAddContainer unitType="gpu" />
-                <UnitListContainer unitType="gpu" />
-            </div>
-            <div className="tab-pane" id="memory-units" role="tabpanel">
-                <UnitAddContainer unitType="memory" />
-                <UnitListContainer unitType="memory" />
-            </div>
-            <div className="tab-pane" id="storage-units" role="tabpanel">
-                <UnitAddContainer unitType="storage" />
-                <UnitListContainer unitType="storage" />
-            </div>
+const UnitTabsComponent = () => {
+    const [activeTab, setActiveTab] = useState('cpu-units')
+    const toggle = (tab) => {
+        if (activeTab !== tab) setActiveTab(tab)
+    }
+
+    return (
+        <div>
+            <Nav tabs>
+                <NavItem>
+                    <NavLink
+                        className={activeTab === 'cpu-units' && 'active'}
+                        onClick={() => {
+                            toggle('cpu-units')
+                        }}
+                    >
+                        CPU
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink
+                        className={activeTab === 'gpu-units' && 'active'}
+                        onClick={() => {
+                            toggle('gpu-units')
+                        }}
+                    >
+                        GPU
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink
+                        className={activeTab === 'memory-units' && 'active'}
+                        onClick={() => {
+                            toggle('memory-units')
+                        }}
+                    >
+                        Memory
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink
+                        className={activeTab === 'storage-units' && 'active'}
+                        onClick={() => {
+                            toggle('storage-units')
+                        }}
+                    >
+                        Stor.
+                    </NavLink>
+                </NavItem>
+            </Nav>
+            <TabContent activeTab={activeTab}>
+                <TabPane tabId="cpu-units">
+                    <UnitAddContainer unitType="cpu" />
+                    <UnitListContainer unitType="cpu" />
+                </TabPane>
+                <TabPane tabId="gpu-units">
+                    <UnitAddContainer unitType="gpu" />
+                    <UnitListContainer unitType="gpu" />
+                </TabPane>
+                <TabPane tabId="memory-units">
+                    <UnitAddContainer unitType="memory" />
+                    <UnitListContainer unitType="memory" />
+                </TabPane>
+                <TabPane tabId="storage-units">
+                    <UnitAddContainer unitType="storage" />
+                    <UnitListContainer unitType="storage" />
+                </TabPane>
+            </TabContent>
         </div>
-    </div>
-)
+    )
+}
 
 export default UnitTabsComponent
diff --git a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
index aa7a4f8f..12be26bd 100644
--- a/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/MachineListComponent.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import EmptySlotContainer from '../../../../../containers/app/sidebars/topology/rack/EmptySlotContainer'
 import MachineContainer from '../../../../../containers/app/sidebars/topology/rack/MachineContainer'
-import './MachineListComponent.css'
+import './MachineListComponent.sass'
 
 const MachineListComponent = ({ machineIds }) => {
     return (
diff --git a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
index d7127114..ca41bf57 100644
--- a/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
+++ b/frontend/src/components/app/sidebars/topology/rack/RackSidebarComponent.js
@@ -3,7 +3,7 @@ import BackToRoomContainer from '../../../../../containers/app/sidebars/topology
 import DeleteRackContainer from '../../../../../containers/app/sidebars/topology/rack/DeleteRackContainer'
 import MachineListContainer from '../../../../../containers/app/sidebars/topology/rack/MachineListContainer'
 import RackNameContainer from '../../../../../containers/app/sidebars/topology/rack/RackNameContainer'
-import './RackSidebarComponent.css'
+import './RackSidebarComponent.sass'
 import AddPrefabContainer from '../../../../../containers/app/sidebars/topology/rack/AddPrefabContainer'
 
 const RackSidebarComponent = () => {
diff --git a/frontend/src/components/home/ContactSection.js b/frontend/src/components/home/ContactSection.js
index 095fb939..42bdab8a 100644
--- a/frontend/src/components/home/ContactSection.js
+++ b/frontend/src/components/home/ContactSection.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import FontAwesome from 'react-fontawesome'
-import './ContactSection.css'
+import './ContactSection.sass'
 import ContentSection from './ContentSection'
 
 const ContactSection = () => (
diff --git a/frontend/src/components/home/ContentSection.js b/frontend/src/components/home/ContentSection.js
index ba2e4ec3..9d4832d9 100644
--- a/frontend/src/components/home/ContentSection.js
+++ b/frontend/src/components/home/ContentSection.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
-import './ContentSection.css'
+import './ContentSection.sass'
 
 const ContentSection = ({ name, title, children }) => (
     <div id={name} className={classNames(name + '-section', 'content-section')}>
diff --git a/frontend/src/components/home/JumbotronHeader.js b/frontend/src/components/home/JumbotronHeader.js
index f7af4cd9..7b410679 100644
--- a/frontend/src/components/home/JumbotronHeader.js
+++ b/frontend/src/components/home/JumbotronHeader.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import './JumbotronHeader.css'
+import './JumbotronHeader.sass'
 
 const JumbotronHeader = () => (
     <section className="jumbotron-header">
diff --git a/frontend/src/components/home/ScreenshotSection.js b/frontend/src/components/home/ScreenshotSection.js
index d0ff54bd..c987d5d0 100644
--- a/frontend/src/components/home/ScreenshotSection.js
+++ b/frontend/src/components/home/ScreenshotSection.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 import ContentSection from './ContentSection'
-import './ScreenshotSection.css'
+import './ScreenshotSection.sass'
 
 const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => (
     <ContentSection name={name} title={title}>
diff --git a/frontend/src/components/navigation/AppNavbarComponent.js b/frontend/src/components/navigation/AppNavbarComponent.js
index 293049e1..7a1c2462 100644
--- a/frontend/src/components/navigation/AppNavbarComponent.js
+++ b/frontend/src/components/navigation/AppNavbarComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
 import FontAwesome from 'react-fontawesome'
 import { Link } from 'react-router-dom'
 import Navbar, { NavItem } from './Navbar'
-import './Navbar.css'
+import './Navbar.sass'
 
 const AppNavbarComponent = ({ project, fullWidth }) => (
     <Navbar fullWidth={fullWidth}>
diff --git a/frontend/src/components/navigation/HomeNavbar.js b/frontend/src/components/navigation/HomeNavbar.js
index 798d1b97..e22933af 100644
--- a/frontend/src/components/navigation/HomeNavbar.js
+++ b/frontend/src/components/navigation/HomeNavbar.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import Navbar from './Navbar'
-import './Navbar.css'
+import './Navbar.sass'
 
 const ScrollNavItem = ({ id, name }) => (
     <li className="nav-item">
diff --git a/frontend/src/components/navigation/Navbar.js b/frontend/src/components/navigation/Navbar.js
index b1f1f7ae..164a2309 100644
--- a/frontend/src/components/navigation/Navbar.js
+++ b/frontend/src/components/navigation/Navbar.js
@@ -5,7 +5,7 @@ import { userIsLoggedIn } from '../../auth/index'
 import Login from '../../containers/auth/Login'
 import Logout from '../../containers/auth/Logout'
 import ProfileName from '../../containers/auth/ProfileName'
-import './Navbar.css'
+import './Navbar.sass'
 
 export const NAVBAR_HEIGHT = 60
 
diff --git a/frontend/src/components/not-found/BlinkingCursor.js b/frontend/src/components/not-found/BlinkingCursor.js
index bc2d2366..dbdba212 100644
--- a/frontend/src/components/not-found/BlinkingCursor.js
+++ b/frontend/src/components/not-found/BlinkingCursor.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import './BlinkingCursor.css'
+import './BlinkingCursor.sass'
 
 const BlinkingCursor = () => <span className="blinking-cursor">_</span>
 
diff --git a/frontend/src/components/not-found/CodeBlock.js b/frontend/src/components/not-found/CodeBlock.js
index 6783d6a8..bcc522c9 100644
--- a/frontend/src/components/not-found/CodeBlock.js
+++ b/frontend/src/components/not-found/CodeBlock.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import './CodeBlock.css'
+import './CodeBlock.sass'
 
 const CodeBlock = () => {
     const textBlock =
diff --git a/frontend/src/components/not-found/TerminalWindow.js b/frontend/src/components/not-found/TerminalWindow.js
index 490fd4c7..a25e558a 100644
--- a/frontend/src/components/not-found/TerminalWindow.js
+++ b/frontend/src/components/not-found/TerminalWindow.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import BlinkingCursor from './BlinkingCursor'
 import CodeBlock from './CodeBlock'
-import './TerminalWindow.css'
+import './TerminalWindow.sass'
 
 const TerminalWindow = () => (
     <div className="terminal-window">
diff --git a/frontend/src/components/projects/FilterPanel.js b/frontend/src/components/projects/FilterPanel.js
index 0970f573..2b9795d0 100644
--- a/frontend/src/components/projects/FilterPanel.js
+++ b/frontend/src/components/projects/FilterPanel.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import FilterLink from '../../containers/projects/FilterLink'
-import './FilterPanel.css'
+import './FilterPanel.sass'
 
 const FilterPanel = () => (
     <div className="btn-group filter-panel mb-2">
diff --git a/frontend/src/index.js b/frontend/src/index.js
index c49e0b68..0971b1e6 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import { setupSocketConnection } from './api/socket'
-import './index.css'
+import './index.sass'
 import Routes from './routes'
 import configureStore from './store/configure-store'
 
diff --git a/frontend/src/index.sass b/frontend/src/index.sass
index efb2bed5..a78f7a19 100644
--- a/frontend/src/index.sass
+++ b/frontend/src/index.sass
@@ -1,3 +1,5 @@
+@import "~bootstrap/scss/bootstrap"
+
 @import ./style-globals/_mixins.sass
 @import ./style-globals/_variables.sass
 
diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
index 5000ebfe..6fc940c0 100644
--- a/frontend/src/pages/Home.js
+++ b/frontend/src/pages/Home.js
@@ -9,7 +9,7 @@ import StakeholderSection from '../components/home/StakeholderSection'
 import TeamSection from '../components/home/TeamSection'
 import TechnologiesSection from '../components/home/TechnologiesSection'
 import HomeNavbar from '../components/navigation/HomeNavbar'
-import './Home.css'
+import './Home.sass'
 
 function Home() {
     return (
diff --git a/frontend/src/pages/NotFound.js b/frontend/src/pages/NotFound.js
index f72c7d01..72be7342 100644
--- a/frontend/src/pages/NotFound.js
+++ b/frontend/src/pages/NotFound.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import DocumentTitle from 'react-document-title'
 import TerminalWindow from '../components/not-found/TerminalWindow'
-import './NotFound.css'
+import './NotFound.sass'
 
 const NotFound = () => (
     <DocumentTitle title="Page Not Found - OpenDC">
diff --git a/frontend/src/util/jquery.js b/frontend/src/util/jquery.js
deleted file mode 100644
index 4976dd7d..00000000
--- a/frontend/src/util/jquery.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Binding of the global jQuery variable for use within React.
- *
- * This should be used instead of '$', to address ESLint warnings relating to undefined global variables.
- */
-const jQuery = window['$']
-
-export default jQuery