From 47922e8ed27500accc3cce00756db2f1a9d7f8c9 Mon Sep 17 00:00:00 2001 From: Benjamin Zengin Date: Wed, 1 Apr 2020 20:23:03 +0200 Subject: [PATCH 1/2] Adds new features to enter-data-helper - Light/Dark mode switch - Replaces alert() with Snackbar Alert - Scheme selection via list replaces dropdown --- tools/enter-data-helper/package.json | 3 +- tools/enter-data-helper/src/App.js | 53 +++++++++++++++- .../src/components/BaseComponents.js | 60 ++++++++++++++++--- .../src/components/FlavorOverview.js | 39 ++++++------ .../src/components/SchemeOverview.js | 20 ++++--- .../src/components/SelectScheme.js | 24 ++++---- .../enter-data-helper/src/components/Tools.js | 20 ++++++- 7 files changed, 168 insertions(+), 51 deletions(-) diff --git a/tools/enter-data-helper/package.json b/tools/enter-data-helper/package.json index 4fe5f8b8..3cd00e3f 100644 --- a/tools/enter-data-helper/package.json +++ b/tools/enter-data-helper/package.json @@ -1,7 +1,7 @@ { "name": "enter-data-helper", "author": "CryptoEng", - "version": "0.1.0", + "version": "0.1.1", "private": true, "homepage": "./", "build": { @@ -27,6 +27,7 @@ "@jsonforms/react": "^2.4.0-alpha.0", "@material-ui/core": "^4.9.5", "@material-ui/icons": "^4.9.1", + "@material-ui/lab": "^4.0.0-alpha.47", "@material-ui/pickers": "^3.2.10", "electron-is-dev": "^1.1.0", "react": "^16.12.0", diff --git a/tools/enter-data-helper/src/App.js b/tools/enter-data-helper/src/App.js index daf0da45..f04c98b9 100644 --- a/tools/enter-data-helper/src/App.js +++ b/tools/enter-data-helper/src/App.js @@ -1,19 +1,57 @@ import React from 'react'; import { HashRouter as Router, Switch, Route, withRouter } from 'react-router-dom'; -import { Container } from '@material-ui/core'; +import { Container, Snackbar, CssBaseline } from '@material-ui/core'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; import SelectScheme from './components/SelectScheme'; import SchemeOverview from './components/SchemeOverview'; import { FlavorOverview, SubtypeOverview } from './components/FlavorOverview'; import { NavBar } from './components/BaseComponents'; -import { checkRootDir } from './components/Tools' +import { checkRootDir, registerApp } from './components/Tools' import './App.css'; const NavBarRouter = withRouter(props => ); +function getTheme(type) { + return createMuiTheme({ + palette: { + type: type + }, + }); +} + +const themes = { + 'light': getTheme('light'), + 'dark': getTheme('dark') +} + class App extends React.Component { constructor(props) { super(props) this.foundRootDir = checkRootDir(); + registerApp(this); + this.state = { + alertOpen: false, + alertMsg: "", + alertSeverity: "info", + themeId: "light" + }; + } + + setTheme(id) { + this.setState({ themeId: id }); + } + + openAlert(msg, severity) { + this.setState({ alertOpen: true, alertMsg: msg, alertSeverity: severity }); + } + + closeAlert(event, reason) { + if (reason === 'clickaway') { + return; + } + + this.setState({ alertOpen: false, alertMsg: "" }); } render() { @@ -21,9 +59,11 @@ class App extends React.Component { return

Required directories not found. Please specify the correct path to the repository as a command line argument.

; } return ( + + - + @@ -31,9 +71,16 @@ class App extends React.Component { + + + {this.state.alertMsg} + + + ) } } diff --git a/tools/enter-data-helper/src/components/BaseComponents.js b/tools/enter-data-helper/src/components/BaseComponents.js index 9247e47d..e732c1ac 100644 --- a/tools/enter-data-helper/src/components/BaseComponents.js +++ b/tools/enter-data-helper/src/components/BaseComponents.js @@ -2,8 +2,13 @@ import React from 'react'; import { JsonForms, JsonFormsDispatch } from '@jsonforms/react'; import { Generate, schemaMatches, rankWith, resolveSchema } from '@jsonforms/core'; import { materialRenderers, materialCells } from '@jsonforms/material-renderers'; -import { Tooltip, Grid, Button, AppBar, Toolbar, IconButton, Link, Breadcrumbs, Typography } from '@material-ui/core'; -import { Info as InfoIcon, ArrowBack as BackIcon, Home as HomeIcon } from '@material-ui/icons'; +import { + Tooltip, Grid, Button, AppBar, Toolbar, IconButton, Link, Breadcrumbs, Typography, ButtonGroup, Box, + List, ListItem, ListItemIcon, ListItemText, Paper +} from '@material-ui/core'; +import { + Info as InfoIcon, ArrowBack as BackIcon, Home as HomeIcon, ArrowForward as ForwardIcon +} from '@material-ui/icons'; import { Link as RouterLink } from 'react-router-dom'; class TooltipWrapper extends React.Component { @@ -39,7 +44,11 @@ class NavBar extends React.Component { constructor(props) { super(props); this.history = props.history; - this.location = '/'; + this.location = this.history.location.pathname; + } + + selectTheme(theme) { + this.props.setTheme(theme); } componentDidMount() { @@ -91,6 +100,15 @@ class NavBar extends React.Component { {pathLinks.slice(0, last).map(x => {x[1]})} {{pathLinks[last][1]}} + + + + + ); @@ -128,6 +146,32 @@ class JsonFormsContainer extends React.Component { } } +class SelectList extends React.Component { + constructor(props) { + super(props); + this.entries = props.entries; + } + + render() { + return ( + + + { + this.entries.map(entry => ( + this.props.action(entry)}> + + + + + + )) + } + + + ); + } +} + class SelectOrCreate extends JsonFormsContainer { constructor(props) { super(props); @@ -155,16 +199,16 @@ class SelectOrCreate extends JsonFormsContainer { generateSchema() { var schema = { type: "object", properties: { - name: { + identifier: { type: "string", pattern: this.regex } - }, required: ["name"] + }, required: ["identifier"] }; if (this.addNew && this.props.schemes.length > 0) - schema.properties.name.not = { type: "string", enum: this.props.schemes }; + schema.properties.identifier.not = { type: "string", enum: this.props.schemes }; else if (!this.addNew) - schema.properties.name.enum = this.props.schemes; + schema.properties.identifier.enum = this.props.schemes; return schema; } @@ -190,4 +234,4 @@ class SelectOrCreate extends JsonFormsContainer { } export default JsonFormsContainer; -export { JsonFormsContainer, SelectOrCreate, NavBar }; +export { JsonFormsContainer, SelectOrCreate, SelectList, NavBar }; diff --git a/tools/enter-data-helper/src/components/FlavorOverview.js b/tools/enter-data-helper/src/components/FlavorOverview.js index 9cbcaedb..dd427e3c 100644 --- a/tools/enter-data-helper/src/components/FlavorOverview.js +++ b/tools/enter-data-helper/src/components/FlavorOverview.js @@ -1,8 +1,8 @@ import React from 'react'; import { Generate } from '@jsonforms/core'; -import { JsonFormsContainer, SelectOrCreate } from './BaseComponents'; +import { JsonFormsContainer, SelectOrCreate, SelectList } from './BaseComponents'; import { Grid, Button, Paper, Box } from '@material-ui/core'; -import { listFiles, ROOT_DIR, disableUIElements } from './Tools'; +import { listFiles, ROOT_DIR, disableUIElements, showAlert } from './Tools'; const fs = window.require('fs'); const path = require('path'); const yaml = require('js-yaml') @@ -41,9 +41,9 @@ class EditFlavor extends JsonFormsContainer { try { var data = yaml.dump(this.state.data); fs.writeFileSync(this.flavorFile, data); - alert("Saved to " + this.flavorFile); + showAlert("Saved to " + this.flavorFile, "success"); } catch { - alert("Error while saving file."); + showAlert("Error while saving file.", "error"); } } } @@ -78,9 +78,9 @@ class SubtypeOverview extends JsonFormsContainer { } try { fs.writeFileSync(this.targetFile, yaml.dump(data)); - alert("Saved to " + this.targetFile); + showAlert("Saved to " + this.targetFile, "success"); } catch { - alert("Error while saving file."); + showAlert("Error while saving file.", "error"); } } @@ -126,7 +126,7 @@ class FlavorOverview extends React.Component { submitForm(name, type, create) { if (create === fs.existsSync(path.join(this.baseDir, type, name + ".yaml"))) { - alert("Error. Unexpected existance or non-existance of flavor file."); + showAlert('Error. Unexpected existance or non-existance of flavor file.', 'error'); return; } @@ -136,9 +136,9 @@ class FlavorOverview extends React.Component { if (!fs.existsSync(dir)) fs.mkdirSync(dir); var data = (type === 'bench') ? { platform: name.split('_')[2] } : { name: name }; fs.writeFileSync(path.join(dir, name + ".yaml"), yaml.dump(data)); - alert('"' + name + '" was successfully created.'); + showAlert('"' + name + '" was successfully created.', 'success'); } catch { - alert('"' + name + '" could not be created.'); + showAlert('"' + name + '" could not be created.', 'error'); } var newState = {}; @@ -167,10 +167,10 @@ class FlavorOverview extends React.Component {

Parameter Sets

- this.submitForm(data.name, "param", false)} /> + this.submitForm(identifier, "param", false)} /> this.submitForm(data.name, "param", true)} /> + action={(data) => this.submitForm(data.identifier, "param", true)} /> @@ -178,10 +178,10 @@ class FlavorOverview extends React.Component {

Implementations

- this.submitForm(data.name, "impl", false)} /> + this.submitForm(identifier, "impl", false)} /> this.submitForm(data.name, "impl", true)} /> + action={(data) => this.submitForm(data.identifier, "impl", true)} /> @@ -189,14 +189,15 @@ class FlavorOverview extends React.Component {

Benchmarks

- this.submitForm(data.name, "bench", false)} /> + this.submitForm(identifier, "bench", false)} /> this.submitForm(data.name, "bench", true)} /> + action={(data) => this.submitForm(data.identifier, "bench", true)} /> - + + ); } } diff --git a/tools/enter-data-helper/src/components/SchemeOverview.js b/tools/enter-data-helper/src/components/SchemeOverview.js index 86845ce8..c934a548 100644 --- a/tools/enter-data-helper/src/components/SchemeOverview.js +++ b/tools/enter-data-helper/src/components/SchemeOverview.js @@ -1,8 +1,8 @@ import React from 'react'; import { Generate } from '@jsonforms/core'; -import { JsonFormsContainer, SelectOrCreate } from './BaseComponents'; +import { JsonFormsContainer, SelectOrCreate, SelectList } from './BaseComponents'; import { Grid, Button, Paper, Box } from '@material-ui/core'; -import { listDirs, ROOT_DIR, disableUIElements } from './Tools'; +import { listDirs, ROOT_DIR, disableUIElements, showAlert } from './Tools'; const fs = window.require('fs'); const path = require('path'); const yaml = require('js-yaml') @@ -46,9 +46,9 @@ class EditScheme extends JsonFormsContainer { delete data.type; data = yaml.dump(data); fs.writeFileSync(this.schemeFile, data); - alert("Saved to " + this.schemeFile); + showAlert("Saved to " + this.schemeFile, "success"); } catch { - alert("Error while saving file."); + showAlert("Error while saving file.", "error"); } } } @@ -65,7 +65,7 @@ class SchemeOverview extends React.Component { submitForm(name, create) { if (create === fs.existsSync(path.join(this.baseDir, name, name + ".yaml"))) { - alert("Error. Unexpected existance or non-existance of flavor file."); + showAlert("Error. Unexpected existance or non-existance of flavor file.", "error"); return; } @@ -77,9 +77,9 @@ class SchemeOverview extends React.Component { .filter(x => !fs.existsSync(x)).forEach(x => fs.mkdirSync(x)); var data = { name: name }; fs.writeFileSync(path.join(dir, name + ".yaml"), yaml.dump(data)); - alert('Flavor "' + name + '" was successfully created.'); + showAlert('Flavor "' + name + '" was successfully created.', 'success'); } catch { - alert('Flavor "' + name + '" could not be created.'); + showAlert('Flavor "' + name + '" could not be created.', 'error'); } this.setState({ flavors: listDirs(this.baseDir) }); @@ -105,8 +105,10 @@ class SchemeOverview extends React.Component {

Flavours

- this.submitForm(data.name, false)} /> - this.submitForm(data.name, true)} /> + this.submitForm(identifier, false)} /> + this.submitForm(data.identifier, true)} /> diff --git a/tools/enter-data-helper/src/components/SelectScheme.js b/tools/enter-data-helper/src/components/SelectScheme.js index 463241e5..705d3d81 100644 --- a/tools/enter-data-helper/src/components/SelectScheme.js +++ b/tools/enter-data-helper/src/components/SelectScheme.js @@ -1,6 +1,6 @@ import React from 'react'; -import { SelectOrCreate } from './BaseComponents'; -import { listDirs, ROOT_DIR } from './Tools'; +import { SelectOrCreate, SelectList } from './BaseComponents'; +import { listDirs, ROOT_DIR, showAlert } from './Tools'; import { Box, Grid, Paper } from '@material-ui/core'; const fs = window.require('fs'); const path = require('path'); @@ -20,7 +20,7 @@ class SelectScheme extends React.Component { submitForm(type, name, create) { if (create === fs.existsSync(path.join(this.typeDirs[type], name, name + ".yaml"))) { - alert("Error. Unexpected existance or non-existance of scheme file."); + showAlert("Error. Unexpected existance or non-existance of scheme file.", "error"); return; } @@ -30,9 +30,9 @@ class SelectScheme extends React.Component { if (!fs.existsSync(dir)) fs.mkdirSync(dir); var data = { name: name }; fs.writeFileSync(path.join(dir, name + ".yaml"), yaml.dump(data)); - alert('Scheme "' + name + '" was successfully created.'); + showAlert('Scheme "' + name + '" was successfully created.', 'success'); } catch { - alert('Scheme "' + name + '" could not be created.'); + showAlert('Scheme "' + name + '" could not be created.', 'error'); } var newState = {}; @@ -53,17 +53,21 @@ class SelectScheme extends React.Component {

Encryption Schemes

- this.submitForm("enc", data.name, false)} /> - this.submitForm("enc", data.name, true)} /> + this.submitForm("enc", identifier, false)} /> + this.submitForm("enc", data.identifier, true)} /> - +

Signature Schemes

- this.submitForm("sig", data.name, false)} /> - this.submitForm("sig", data.name, true)} /> + this.submitForm("sig", identifier, false)} /> + this.submitForm("sig", data.identifier, true)} /> diff --git a/tools/enter-data-helper/src/components/Tools.js b/tools/enter-data-helper/src/components/Tools.js index 1c9d1bb4..43e32c3e 100644 --- a/tools/enter-data-helper/src/components/Tools.js +++ b/tools/enter-data-helper/src/components/Tools.js @@ -7,6 +7,16 @@ var ROOT_DIR = path.join('..', '..'); if (argv.length === 2 || argv.length === 3) { ROOT_DIR = argv[argv.length - 1]; } +Object.freeze(ROOT_DIR); + +var application = null; +function registerApp(app) { + application = app; +} + +function showAlert(msg, severity) { + application.openAlert(msg, severity); +} function checkRootDir() { return fs.existsSync(ROOT_DIR) && fs.existsSync(path.join(ROOT_DIR, "encryption")) && @@ -34,4 +44,12 @@ function disableUIElements(uiSchema, scopes) { } } -export { disableUIElements, listDirs, listFiles, checkRootDir, ROOT_DIR } +export { + checkRootDir, + disableUIElements, + listDirs, + listFiles, + registerApp, + showAlert, + ROOT_DIR +} From cce2f85b7b160875c64fca77105dd96440d4ebd4 Mon Sep 17 00:00:00 2001 From: Benjamin Zengin Date: Fri, 3 Apr 2020 11:43:06 +0200 Subject: [PATCH 2/2] Only package on master branch --- .github/workflows/enter-data-helper.yml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/enter-data-helper.yml b/.github/workflows/enter-data-helper.yml index e43d1972..fba84182 100644 --- a/.github/workflows/enter-data-helper.yml +++ b/.github/workflows/enter-data-helper.yml @@ -1,6 +1,9 @@ name: Enter Data Helper -on: [push] +on: + push: + branches: + - master jobs: build-and-package: