Added some minor code refactorings.

This PR comes with the following fixes:

- Pastel theme should now be darker
- Added a preference tab
- Font size of the selector has been reduced
- Fixed css
- Moved AppContext under src/contexts
- Renamed themes to provide backwards compatibility

src/App.css

@@ -11,11 +11,8 @@ body {
   color: var(--text-color-body);
 }
 
-.select {
-  color: var(--text-color-selector);
-}
-
-.select select:hover {
+.select_theme {
+  font-size: 90%;
   color: var(--text-color-selector);
 }
 
@@ -50,7 +47,7 @@ body {
 
 .btn-warning {
   background-color: var(--color-warning);
-  border-color: var(--color-primary);
+  border-color: var(--color-warning);
 }
 
 .btn-danger {
@@ -136,6 +133,11 @@ body {
   font-weight: bold;
 }
 
+.label-description {
+  padding-top: 4px;
+  padding-bottom: 8px;
+}
+
 .label-help {
   padding-top: 4px;
   padding-bottom: 8px;

src/App.jsx

@@ -1,10 +1,10 @@
-import axios from 'axios';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import { React, Component } from 'react';
-import { Navbar, Nav, Container} from 'react-bootstrap';
-import { BrowserRouter as Router, NavLink, Redirect, Route, Switch } from 'react-router-dom';
 import './Theme.css';
 import './App.css';
+import axios from 'axios';
+import { React, Component } from 'react';
+import { Navbar, Nav, Container } from 'react-bootstrap';
+import { BrowserRouter as Router, NavLink, Redirect, Route, Switch } from 'react-router-dom';
 import { BeginRestore } from './BeginRestore';
 import { DirectoryObject } from "./DirectoryObject";
 import { PoliciesTable } from "./PoliciesTable";
@@ -15,9 +15,8 @@ import { TaskDetails } from './TaskDetails';
 import { TasksTable } from './TasksTable';
 import { NewSnapshot } from './NewSnapshot';
 import { PolicyEditorPage } from './PolicyEditorPage';
-import { ThemeSelector } from './ThemeSelector';
-import { AppContext } from './AppContext';
-
+import { Preferences } from './Preferences';
+import { AppContext } from './contexts/AppContext';
 import { UIPreferenceProvider } from './contexts/UIPreferencesContext';
 
 export default class App extends Component {
@@ -50,7 +49,6 @@ export default class App extends Component {
     }
 
     this.fetchInitialRepositoryDescription();
-
     this.taskSummaryInterval = window.setInterval(this.fetchTaskSummary, 5000);
   }
 
@@ -61,7 +59,7 @@ export default class App extends Component {
           repoDescription: result.data.description,
         });
       }
-    }).catch(error => { /* ignore */});
+    }).catch(error => { /* ignore */ });
   }
 
   fetchTaskSummary() {
@@ -110,9 +108,7 @@ export default class App extends Component {
                   </>
                   </NavLink>
                   <NavLink data-testid="tab-repo" className="nav-link" activeClassName="active" to="/repo">Repository</NavLink>
-                </Nav>
-                <Nav>
-                  <ThemeSelector/>
+                  <NavLink data-testid="tab-preferences" className="nav-link" activeClassName="active" to="/preferences">Preferences</NavLink>
                 </Nav>
               </Navbar.Collapse>
             </Navbar>
@@ -133,8 +129,9 @@ export default class App extends Component {
                 <Route path="/tasks/:tid" component={TaskDetails} />
                 <Route path="/tasks" component={TasksTable} />
                 <Route path="/repo" component={RepoStatus} />
+                <Route path="/preferences" component={Preferences} />
                 <Route exact path="/">
-                  <Redirect to="/snapshots" />
+                  <Redirect to="/repo" />
                 </Route>
               </Switch>
             </Container>

src/EstimateResults.jsx

@@ -7,7 +7,7 @@ import Button from 'react-bootstrap/Button';
 import Spinner from 'react-bootstrap/esm/Spinner';
 import Form from 'react-bootstrap/Form';
 import { TaskLogs } from './TaskLogs';
-import { cancelTask, redirectIfNotConnected, sizeDisplayName } from './uiutil';
+import { cancelTask, redirect, sizeDisplayName } from './uiutil';
 
 export class EstimateResults extends Component {
     constructor() {
@@ -55,7 +55,7 @@ export class EstimateResults extends Component {
                 this.interval = null;
             }
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             this.setState({
                 error,
                 isLoading: false

src/NewSnapshot.jsx

@@ -7,7 +7,7 @@ import Row from 'react-bootstrap/Row';
 import { handleChange } from './forms';
 import { PolicyEditor } from './PolicyEditor';
 import { EstimateResults } from './EstimateResults';
-import { CLIEquivalent, DirectorySelector, errorAlert, GoBackButton, redirectIfNotConnected } from './uiutil';
+import { CLIEquivalent, DirectorySelector, errorAlert, GoBackButton, redirect } from './uiutil';
 
 export class NewSnapshot extends Component {
     constructor() {
@@ -35,7 +35,7 @@ export class NewSnapshot extends Component {
                 localHost: result.data.localHost,
             });
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
         });
     }
 
@@ -54,7 +54,7 @@ export class NewSnapshot extends Component {
                     // while we were resolving
                     this.maybeResolveCurrentPath(currentPath);
                 }).catch(error => {
-                    redirectIfNotConnected(error);
+                    redirect(error);
                 });
             } else {
                 this.setState({

src/PoliciesTable.jsx

@@ -11,7 +11,7 @@ import Row from 'react-bootstrap/Row';
 import { Link } from 'react-router-dom';
 import { handleChange } from './forms';
 import MyTable from './Table';
-import { CLIEquivalent, compare, DirectorySelector, isAbsolutePath, ownerName, policyEditorURL, redirectIfNotConnected } from './uiutil';
+import { CLIEquivalent, compare, DirectorySelector, isAbsolutePath, ownerName, policyEditorURL, redirect } from './uiutil';
 
 const applicablePolicies = "Applicable Policies"
 const localPolicies = "Local Path Policies"
@@ -68,7 +68,7 @@ export class PoliciesTable extends Component {
                 isLoading: false,
             });
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             this.setState({
                 error,
                 isLoading: false
@@ -87,7 +87,7 @@ export class PoliciesTable extends Component {
                 isLoading: false,
             });
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             this.setState({
                 error,
                 isLoading: false

src/Preferences.jsx

@@ -0,0 +1,41 @@
+import { Component } from 'react';
+import { ThemeSelector } from './ThemeSelector';
+import { UIPreferencesContext } from './contexts/UIPreferencesContext';
+
+export class Preferences extends Component {
+    static contextType = UIPreferencesContext;
+    constructor() {
+        super();
+        this.state = {
+            status: {},
+            error: null,
+        };
+    }
+
+    render() {
+        const { pageSize, bytesStringBase2 } = this.context;
+        return <>
+            <form>
+                <div className='form-group'>
+                    <label className='label-description' id='themeLabel'>Theme</label>
+                    <ThemeSelector />
+                    <small htmlFor='themeLabel' id='themeHelp' className='form-text text-muted'>The current active theme</small>
+                </div>
+                <br />
+                <div className='form-group'>
+                    <label className='label-description'>Bytes to the base of 2</label>
+                    <input className='form-control form-control-sm' id='bytesBaseInput'
+                        type='text' value={bytesStringBase2} disabled={true} />
+                    <small htmlFor='bytesBaseInput' id='bytesHelp' className='form-text text-muted'>Represents bytes to the base of 2</small>
+                </div>
+                <br />
+                <div className='form-group'>
+                    <label className='label-description'>Page size</label>
+                    <input className='form-control form-control-sm' id='pageSizeInput'
+                        type='text' placeholder='Page size' value={pageSize} disabled={true} />
+                    <small hmtlFor="pageSizeInput" id='pageSizeHelp' className='form-text text-muted'>The number of items shown in tables</small>
+                </div>
+            </form>
+        </>
+    }
+}

src/RepoStatus.jsx

@@ -13,7 +13,7 @@ import { cancelTask, CLIEquivalent } from './uiutil';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck, faChevronCircleDown, faChevronCircleUp, faWindowClose } from '@fortawesome/free-solid-svg-icons';
 import { TaskLogs } from './TaskLogs';
-import { AppContext } from './AppContext';
+import { AppContext } from './contexts/AppContext';
 
 export class RepoStatus extends Component {
     constructor() {

src/SetupRepository.jsx

@@ -8,7 +8,7 @@ import Collapse from 'react-bootstrap/Collapse';
 import Form from 'react-bootstrap/Form';
 import Row from 'react-bootstrap/Row';
 import Spinner from 'react-bootstrap/Spinner';
-import { AppContext } from './AppContext';
+import { AppContext } from './contexts/AppContext';
 import { handleChange, validateRequiredFields } from './forms';
 import { RequiredBoolean } from './forms/RequiredBoolean';
 import { RequiredField } from './forms/RequiredField';

src/SnapshotsTable.jsx

@@ -8,7 +8,7 @@ import Col from 'react-bootstrap/Col';
 import Spinner from 'react-bootstrap/Spinner';
 import { Link } from "react-router-dom";
 import MyTable from './Table';
-import { CLIEquivalent, compare, errorAlert, GoBackButton, objectLink, parseQuery, redirectIfNotConnected, rfc3339TimestampForDisplay, sizeWithFailures, sourceQueryStringParams } from './uiutil';
+import { CLIEquivalent, compare, errorAlert, GoBackButton, objectLink, parseQuery, redirect, rfc3339TimestampForDisplay, sizeWithFailures, sourceQueryStringParams } from './uiutil';
 import { faSync, faThumbtack } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Modal from 'react-bootstrap/Modal';
@@ -142,7 +142,7 @@ export class SnapshotsTable extends Component {
                 this.fetchSnapshots();
             }
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             errorAlert(error);
         });
 
@@ -164,7 +164,7 @@ export class SnapshotsTable extends Component {
         axios.post('/api/v1/snapshots/delete', req).then(result => {
             this.props.history.goBack();
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             errorAlert(error);
         });
     }
@@ -307,7 +307,7 @@ export class SnapshotsTable extends Component {
                 editingDescriptionFor: undefined,
                 savingSnapshot: false,
             });
-            redirectIfNotConnected(e);
+            redirect(e);
             errorAlert(e);
         });
     }

src/SourcesTable.jsx

@@ -12,7 +12,7 @@ import Spinner from 'react-bootstrap/Spinner';
 import { Link } from 'react-router-dom';
 import { handleChange } from './forms';
 import MyTable from './Table';
-import { CLIEquivalent, compare, errorAlert, ownerName, policyEditorURL, redirectIfNotConnected, sizeDisplayName, sizeWithFailures, sourceQueryStringParams } from './uiutil';
+import { CLIEquivalent, compare, errorAlert, ownerName, policyEditorURL, redirect, sizeDisplayName, sizeWithFailures, sourceQueryStringParams } from './uiutil';
 
 const localSnapshots = "Local Snapshots"
 const allSnapshots = "All Snapshots"
@@ -60,7 +60,7 @@ export class SourcesTable extends Component {
                 isRefreshing: false,
             });
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             this.setState({
                 error,
                 isRefreshing: false,

src/TaskDetails.jsx

@@ -11,7 +11,7 @@ import Row from 'react-bootstrap/Row';
 import Table from 'react-bootstrap/Table';
 import Spinner from 'react-bootstrap/Spinner';
 import { TaskLogs } from './TaskLogs';
-import { cancelTask, formatDuration, GoBackButton, redirectIfNotConnected, sizeDisplayName } from './uiutil';
+import { cancelTask, formatDuration, GoBackButton, redirect, sizeDisplayName } from './uiutil';
 
 export class TaskDetails extends Component {
     constructor() {
@@ -60,7 +60,7 @@ export class TaskDetails extends Component {
                 this.interval = null;
             }
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             this.setState({
                 error,
                 isLoading: false

src/TaskLogs.jsx

@@ -1,9 +1,8 @@
-
 import axios from 'axios';
 import React, { Component } from 'react';
 import Table from 'react-bootstrap/Table';
 import { handleChange } from './forms';
-import { redirectIfNotConnected } from './uiutil';
+import { redirect } from './uiutil';
 
 export class TaskLogs extends Component {
     constructor() {
@@ -54,7 +53,7 @@ export class TaskLogs extends Component {
                 this.scrollToBottom();
             }
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             this.setState({
                 error,
                 isLoading: false

src/TasksTable.jsx

@@ -12,7 +12,7 @@ import Row from 'react-bootstrap/Row';
 import { Link } from 'react-router-dom';
 import { handleChange } from './forms';
 import MyTable from './Table';
-import { redirectIfNotConnected, taskStatusSymbol } from './uiutil';
+import { redirect, taskStatusSymbol } from './uiutil';
 
 export class TasksTable extends Component {
     constructor() {
@@ -66,7 +66,7 @@ export class TasksTable extends Component {
                 isLoading: false,
             });
         }).catch(error => {
-            redirectIfNotConnected(error);
+            redirect(error);
             this.setState({
                 error,
                 isLoading: false

src/Theme.css

@@ -1,5 +1,5 @@
 /*Supported themes */
-.light-theme {
+.light {
   --background-color: #ffffff;
   --color-primary: #2A7FFF;
   --color-secondary: #23a25a;
@@ -16,7 +16,7 @@
   --color-danger: #d2475a;
 }
 
-.dark-theme {
+.dark {
   --background-color: #343c43;
   --color-primary: #1162b1;
   --color-secondary: #0d9aab;
@@ -33,24 +33,24 @@
   --color-danger: #b31f04;
 }
 
-.pastel-theme {
+.pastel {
   --background-color: #ffffff;
-  --color-primary: #9feae7;
-  --color-secondary: #d7a5e9;
-  --color-warning: #ffe070;
-  --color-success: #d7a5e9;
-  --color-submit: #00B4D8;
+  --color-primary: #9bf6ff;
+  --color-secondary: #bdb2ff;
+  --color-warning: #ffd6a5;
+  --color-success: #bdb2ff;
+  --color-submit: #a0c4ff;
 
   --text-color: #000000;
   --text-color-selector: #000000;
   --text-color-body: #000000;
-  --text-color-nav: #d7a5e9;
+  --text-color-nav: #c095e4;
 
-  --color-error: #b31f04;
-  --color-danger: #b31f04;
+  --color-error: #ffadad;
+  --color-danger: #ffadad;
 }
 
-.ocean-theme {
+.ocean {
   --background-color: #ffffff;
   --color-primary: #03045E;
   --color-secondary: #0077B6;