From 0643532d5a5adeebf712fb7e0fecf5181baf8e77 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 13:42:44 +0100
Subject: Use built-in Sass support from Create React App

This change updates the frontend to use the built-in Sass support
provided by Create React App to simplify the development pipeline.
---
 frontend/src/components/app/map/controls/ScaleIndicatorComponent.js     | 2 +-
 frontend/src/components/app/map/controls/ToolPanelComponent.js          | 2 +-
 frontend/src/components/app/sidebars/Sidebar.js                         | 2 +-
 .../src/components/app/sidebars/topology/rack/MachineListComponent.js   | 2 +-
 .../src/components/app/sidebars/topology/rack/RackSidebarComponent.js   | 2 +-
 frontend/src/components/home/ContactSection.js                          | 2 +-
 frontend/src/components/home/ContentSection.js                          | 2 +-
 frontend/src/components/home/JumbotronHeader.js                         | 2 +-
 frontend/src/components/home/ScreenshotSection.js                       | 2 +-
 frontend/src/components/navigation/AppNavbarComponent.js                | 2 +-
 frontend/src/components/navigation/HomeNavbar.js                        | 2 +-
 frontend/src/components/navigation/Navbar.js                            | 2 +-
 frontend/src/components/not-found/BlinkingCursor.js                     | 2 +-
 frontend/src/components/not-found/CodeBlock.js                          | 2 +-
 frontend/src/components/not-found/TerminalWindow.js                     | 2 +-
 frontend/src/components/projects/FilterPanel.js                         | 2 +-
 16 files changed, 16 insertions(+), 16 deletions(-)

(limited to 'frontend/src/components')

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/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">
-- 
cgit v1.2.3


From d6c06be32c5e6c9381a1105b5484152d91ebebbb Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 28 Oct 2020 16:54:39 +0100
Subject: Convert UnitTabs to Reactstrap

---
 .../sidebars/topology/machine/UnitTabsComponent.js | 116 +++++++++++++--------
 1 file changed, 72 insertions(+), 44 deletions(-)

(limited to 'frontend/src/components')

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
-- 
cgit v1.2.3