From 52e30d94b01c4e0b847f16c284c23022f451f9aa Mon Sep 17 00:00:00 2001 From: Christoph Anderson <37236531+lupusA@users.noreply.github.com> Date: Tue, 5 Sep 2023 03:26:58 +0200 Subject: [PATCH] fix(ui): Fixed minor bugs in html-ui and added QOL changes (#177) * - Fixed minor bugs in html-ui - Added placeholders within the policy editor for a unified representation - Added headers for tables in policy and snapshot overview - Minor refactorings * - Fixed test of PolicyEditor due to changed import --------- Co-authored-by: Christoph Anderson --- public/index.css | 4 +++ public/index.html | 3 +- src/PoliciesTable.jsx | 28 +++++++++---------- src/PolicyEditor/index.jsx | 22 ++++++--------- src/PreferencesView.jsx | 4 +-- src/RepoStatus.jsx | 14 +++++----- src/SnapshotsTable.jsx | 4 +-- src/SourcesTable.jsx | 28 +++++++++++++++++-- src/Table.jsx | 16 +++++------ src/forms/StringList.jsx | 5 ++-- src/forms/TimesOfDayList.jsx | 5 ++-- .../PolicyEditor.test.jsx | 2 +- src/uiutil.jsx | 5 ++-- 13 files changed, 82 insertions(+), 58 deletions(-) create mode 100644 public/index.css rename src/{PolicyEditor => tests}/PolicyEditor.test.jsx (99%) diff --git a/public/index.css b/public/index.css new file mode 100644 index 0000000..6c620de --- /dev/null +++ b/public/index.css @@ -0,0 +1,4 @@ +div#appVersion { + display: none + } + \ No newline at end of file diff --git a/public/index.html b/public/index.html index f22fed5..1de80fa 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,7 @@ + @@ -15,7 +16,7 @@
- } - {items.length > 0 ?
-

Found {items.length} policies matching criteria.

- + {policies.length > 0 ?
+

Found {policies.length} policies matching criteria.

+
: ((this.state.selectedOwner === localPolicies && this.state.policyPath) ?

No policy found for directory {this.state.policyPath}. Click Set Policy to define it.

:

No policies found.

)} diff --git a/src/PolicyEditor/index.jsx b/src/PolicyEditor/index.jsx index 5f2d1b6..f2b06f1 100644 --- a/src/PolicyEditor/index.jsx +++ b/src/PolicyEditor/index.jsx @@ -300,8 +300,8 @@ export class PolicyEditor extends Component { - - {StringList(this, "policy.files.ignore")} + List of file and directory names to ignore.
(See documentation on ignoring files).} /> + {StringList(this, "policy.files.ignore", { placeholder: "e.g. /file.txt" })} {EffectiveTextAreaValue(this, "files.ignore")} @@ -311,7 +311,7 @@ export class PolicyEditor extends Component { - {StringList(this, "policy.files.ignoreDotFiles")} + {StringList(this, "policy.files.ignoreDotFiles", { placeholder: "e.g. .kopiaignore" })} {EffectiveTextAreaValue(this, "files.ignoreDotFiles")} @@ -382,14 +382,14 @@ export class PolicyEditor extends Component { - {StringList(this, "policy.compression.onlyCompress")} + {StringList(this, "policy.compression.onlyCompress", { placeholder: "e.g. *.txt" })} {EffectiveTextAreaValue(this, "compression.onlyCompress")} - {StringList(this, "policy.compression.neverCompress")} + {StringList(this, "policy.compression.neverCompress", { placeholder: "e.g. *.mp4" })} {EffectiveTextAreaValue(this, "compression.neverCompress")} @@ -420,19 +420,17 @@ export class PolicyEditor extends Component { {EffectiveValue(this, "scheduling.intervalSeconds")} - + - {TimesOfDayList(this, "policy.scheduling.timeOfDay")} + {TimesOfDayList(this, "policy.scheduling.timeOfDay", { placeholder: "e.g. 17:00" })} {EffectiveTimesOfDayValue(this, "scheduling.timeOfDay")} Snapshot schedules using UNIX crontab syntax (one per line): - 

minute hour day month weekday #comment
- - See supported format details.} /> +
See supported format details.} /> - {StringList(this, "policy.scheduling.cron")} + {StringList(this, "policy.scheduling.cron", { placeholder: "minute hour day month weekday #comment" })} {EffectiveListValue(this, "scheduling.cron")} @@ -572,8 +570,6 @@ export class PolicyEditor extends Component {   } - {/* 
{JSON.stringify(this.state, null, 4)}
-
*/} ; } diff --git a/src/PreferencesView.jsx b/src/PreferencesView.jsx index 8f80918..ea13d2a 100644 --- a/src/PreferencesView.jsx +++ b/src/PreferencesView.jsx @@ -8,7 +8,7 @@ export class PreferencesView extends Component {
- setTheme(e.target.value)}> @@ -19,7 +19,7 @@ export class PreferencesView extends Component {
- setByteStringBase(e.target.value)}> diff --git a/src/RepoStatus.jsx b/src/RepoStatus.jsx index b7dc6e2..c1d9265 100644 --- a/src/RepoStatus.jsx +++ b/src/RepoStatus.jsx @@ -129,10 +129,10 @@ export class RepoStatus extends Component { if (this.state.status.initTaskID) { return <>

 Initializing Repository...

{this.state.showLog ? <> - - - : } -
+ + + : } +
; } @@ -143,7 +143,7 @@ export class RepoStatus extends Component { Connected To Repository

- + @@ -155,7 +155,7 @@ export class RepoStatus extends Component { onChange={this.handleChange} size="sm" />   - + Description Is Required @@ -209,7 +209,7 @@ export class RepoStatus extends Component { Error Correction Algorithm - + Internal Compression diff --git a/src/SnapshotsTable.jsx b/src/SnapshotsTable.jsx index 9d89317..8a0f882 100644 --- a/src/SnapshotsTable.jsx +++ b/src/SnapshotsTable.jsx @@ -328,7 +328,7 @@ export class SnapshotsTable extends Component { const columns = [{ id: 'selected', - Header: '', + Header: 'Selected', width: 20, align: "center", Cell: x =>
this.toggleSelected(x.row.original)} />
, @@ -397,7 +397,7 @@ export class SnapshotsTable extends Component { diff --git a/src/SourcesTable.jsx b/src/SourcesTable.jsx index 0a730d2..e39c6ff 100644 --- a/src/SourcesTable.jsx +++ b/src/SourcesTable.jsx @@ -97,7 +97,31 @@ export class SourcesTable extends Component { }); } + /** + * Sets the header of an cell dynamically based on it's status + * @param x - the cell which status is interpreted + * @returns - the header of the cell + */ + setHeader(x) { + switch (x.cell.value) { + case "IDLE": + case "PAUSED": + return x.cell.column.Header = "Actions" + case "PENDING": + case "UPLOADING": + return x.cell.column.Header = "Status" + default: + return x.cell.column.Header = "" + } + } + + /** + * Sets the content an cell dynamically based on it's status + * @param x - the cell which content is changed + * @returns - the content of the cell + */ statusCell(x, parent, bytesStringBase2) { + this.setHeader(x) switch (x.cell.value) { case "IDLE": case "PAUSED": @@ -262,7 +286,7 @@ export class SourcesTable extends Component { Header: '', width: 300, accessor: x => x.status, - Cell: x => this.statusCell(x, this, bytesStringBase2), + Cell: x => this.statusCell(x, this, bytesStringBase2) }] return <> @@ -288,7 +312,7 @@ export class SourcesTable extends Component { - diff --git a/src/Table.jsx b/src/Table.jsx index 64260de..2efeb88 100644 --- a/src/Table.jsx +++ b/src/Table.jsx @@ -127,17 +127,15 @@ export default function MyTable({ columns, data }) { ))} - {page.map( - (row, i) => { + {page.map((row, i) => { prepareRow(row); return ( - - {row.cells.map(cell => { - return {cell.render('Cell')} - })} - - ) - } + + {row.cells.map(cell => { + return {cell.render('Cell')} + })} + + )} )} diff --git a/src/forms/StringList.jsx b/src/forms/StringList.jsx index 5f8d742..30b3cb2 100644 --- a/src/forms/StringList.jsx +++ b/src/forms/StringList.jsx @@ -20,7 +20,7 @@ function multilineStringToList(target) { return v.split(/\n/); } -export function StringList(component, name) { +export function StringList(component, name, props = {}) { return component.handleChange(e, multilineStringToList)} as="textarea" - rows="5"> + rows="5" + {...props}> ; } diff --git a/src/forms/TimesOfDayList.jsx b/src/forms/TimesOfDayList.jsx index e99f9b7..061c5a0 100644 --- a/src/forms/TimesOfDayList.jsx +++ b/src/forms/TimesOfDayList.jsx @@ -3,7 +3,7 @@ import Form from 'react-bootstrap/Form'; import FormGroup from 'react-bootstrap/FormGroup'; import { stateProperty } from '.'; -export function TimesOfDayList(component, name) { +export function TimesOfDayList(component, name, props = {}) { function parseTimeOfDay(v) { var re = /(\d+):(\d+)/; @@ -65,7 +65,8 @@ export function TimesOfDayList(component, name) { value={toMultilineString(stateProperty(component, name))} onChange={e => component.handleChange(e, fromMultilineString)} as="textarea" - rows="5"> + rows="5" + {...props}> Invalid Times of Day ; diff --git a/src/PolicyEditor/PolicyEditor.test.jsx b/src/tests/PolicyEditor.test.jsx similarity index 99% rename from src/PolicyEditor/PolicyEditor.test.jsx rename to src/tests/PolicyEditor.test.jsx index e81a306..b7a6f4a 100644 --- a/src/PolicyEditor/PolicyEditor.test.jsx +++ b/src/tests/PolicyEditor.test.jsx @@ -1,6 +1,6 @@ import { render, waitFor, logDOM } from '@testing-library/react'; import React from 'react'; -import { PolicyEditor } from '.'; +import { PolicyEditor } from '../PolicyEditor/.'; import { MemoryRouter } from 'react-router-dom'; import { setupAPIMock } from '../tests/api_mocks'; import moment from 'moment'; diff --git a/src/uiutil.jsx b/src/uiutil.jsx index de58838..fef39f1 100644 --- a/src/uiutil.jsx +++ b/src/uiutil.jsx @@ -406,12 +406,11 @@ export function CLIEquivalent(props) { document.execCommand("copy"); } - return <> - {visible && } - {visible && } + {visible && } + {visible && } ; }