Further working on the feature

kopia · Jan 7, 2024 · 4b6712a · 4b6712a
1 parent fc4bc40
commit 4b6712a
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 39 deletions.
diff --git a/src/forms/OptionalDirectory.jsx b/src/forms/OptionalDirectory.jsx
@@ -1,27 +1,45 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
-import { Col, FormGroup } from 'react-bootstrap';
-import FormControl from 'react-bootstrap/FormControl';
-import InputGroup from 'react-bootstrap/InputGroup';
+import { Col, FormGroup, FormControl, InputGroup } from 'react-bootstrap';
 import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { stateProperty } from '.';
+import { setDeepStateProperty } from '../utils/deepstate';
 
-export function OptionalDirectory(component, label, name, props = {}, helpText = null) {
-    let { onDirectorySelected, ...inputProps } = props;
+/**
+ * This functions returns a directory selector that allows the user to select a directory. 
+ * The selections is invoked using a button that calls a functions within the electron app. 
+ * If the electron app is not present, the button is not visible. 
+ * 
+ * @param {The component that this function is called from} component 
+ * @param {Label, that is added before the input field} label 
+ * @param {Name of the variable in which the directory path is stored} name 
+ * @param {Additional properties of the component} props 
+ * @returns The form group with the components
+ */
+export function OptionalDirectory(component, label, name, props = {}) {
+    /**
+     * Saves the selected path as a deepstate variable within the component
+     * @param {The path that has been selected} path 
+     */
+    function onDirectorySelected(path) {
+        setDeepStateProperty(component, name, path)
+    }
+
     return <FormGroup>
-        {label ? <Form.Label htmlFor='directoryInput' className="required">{label}</Form.Label> : <></>}
+        {label && <Form.Label htmlFor='directoryInput' className="required">{label}</Form.Label>}
         <InputGroup as={Col}>
-            <FormControl name={name} size="sm" id='directoryInput'
+            <FormControl
+                id='directoryInput'
+                size="sm"
+                name={name}
                 value={stateProperty(component, name)}
-                onDirectorySelected={p => component.setState({ name: p })}
-                onChange={component.handleChange}{...inputProps}></FormControl>
-            {window.kopiaUI ?
+                onChange={component.handleChange}{...props}></FormControl>
+            {window.kopiaUI &&
                 <Button size="sm" onClick={() => window.kopiaUI.selectDirectory(onDirectorySelected)}>
                     <FontAwesomeIcon icon={faFolderOpen} />
-                </Button> : <></>}
-            {helpText && <Form.Text className="text-muted">{helpText}</Form.Text>}
+                </Button>}
         </InputGroup>
     </FormGroup>
 }
diff --git a/src/forms/OptionalField.jsx b/src/forms/OptionalField.jsx
@@ -3,7 +3,7 @@ import Form from 'react-bootstrap/Form';
 import Col from 'react-bootstrap/Col';
 import { stateProperty } from '.';
 
-export function OptionalField(component, label, name, props = {}, helpText = null, invalidFeedback = null) {
+export function OptionalField(component, label, name, props = {}, helpText = null) {
     return <Form.Group as={Col}>
         <Form.Label>{label}</Form.Label>
         <Form.Control
@@ -14,6 +14,5 @@ export function OptionalField(component, label, name, props = {}, helpText = nul
             onChange={component.handleChange}
             {...props} />
         {helpText && <Form.Text className="text-muted">{helpText}</Form.Text>}
-        {invalidFeedback && <Form.Control.Feedback type="invalid">{invalidFeedback}</Form.Control.Feedback>}
     </Form.Group>;
 }
diff --git a/src/forms/RequiredDirectory.jsx b/src/forms/RequiredDirectory.jsx
@@ -1,28 +1,46 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
-import { Col, FormGroup } from 'react-bootstrap';
-import FormControl from 'react-bootstrap/FormControl';
-import InputGroup from 'react-bootstrap/InputGroup';
+import { Col, FormGroup, FormControl, InputGroup } from 'react-bootstrap';
 import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { stateProperty } from '.';
+import { setDeepStateProperty } from '../utils/deepstate';
 
-export function RequiredDirectory(component, label, name, props = {}, helpText = null) {
-    let { onDirectorySelected, ...inputProps } = props;
+/**
+ * This functions returns a directory selector that allows the user to select a directory. 
+ * The selections is invoked using a button that calls a functions within the electron app. 
+ * If the electron app is not present, the button is not visible. The path is required.
+ * 
+ * @param {The component that this function is called from} component 
+ * @param {Label, that is added before the input field} label 
+ * @param {Name of the variable in which the directory path is stored} name 
+ * @param {Additional properties of the component} props 
+ * @returns The form group with the components
+ */
+export function RequiredDirectory(component, label, name, props = {}) {
+    /**
+    * Saves the selected path as a deepstate variable within the component
+    * @param {The path that has been selected} path 
+    */
+    function onDirectorySelected(path) {
+        setDeepStateProperty(component, name, path)
+    }
+
     return <FormGroup>
-        {label ? <Form.Label className="required">{label}</Form.Label> : <></>}
+        {label && <Form.Label className="required">{label}</Form.Label>}
         <InputGroup as={Col}>
-            <FormControl name={name} size="sm" id='directoryInput'
+            <FormControl
+                id='directoryInput'
+                size="sm"
+                name={name}
                 isInvalid={stateProperty(component, name, null) === ''}
                 value={stateProperty(component, name)}
-                onDirectorySelected={p => component.setState({ name: p })}
-                onChange={component.handleChange}{...inputProps}></FormControl>
-            {window.kopiaUI ? 
-            <Button size="sm" onClick={() => window.kopiaUI.selectDirectory(onDirectorySelected)}>
-                <FontAwesomeIcon icon={faFolderOpen} />
-            </Button> : <></>}
-            {helpText && <Form.Text className="text-muted">{helpText}</Form.Text>}
+                onChange={component.handleChange}{...props}></FormControl>
+            {window.kopiaUI &&
+                <Button size="sm" onClick={() => window.kopiaUI.selectDirectory(onDirectorySelected)}>
+                    <FontAwesomeIcon icon={faFolderOpen} />
+                </Button>}
             <Form.Control.Feedback type="invalid">Required field</Form.Control.Feedback>
         </InputGroup>
     </FormGroup>

diff --git a/src/pages/SnapshotCreate.jsx b/src/pages/SnapshotCreate.jsx
@@ -148,15 +148,15 @@ export class SnapshotCreate extends Component {
 
     render() {
         return <>
-                <Form.Group>
-                    <GoBackButton onClick={this.props.history.goBack} />
-                </Form.Group>
-                <br/>
-                <h4>New Snapshot</h4>
+            <Form.Group>
+                <GoBackButton onClick={this.props.history.goBack} />
+            </Form.Group>
+            <br />
+            <h4>New Snapshot</h4>
             <br />
             <Row>
                 <Col>
-                    {RequiredDirectory(this, "Directory Path", "path", { autoFocus: true, placeholder: "enter path to snapshot" })}
+                    {RequiredDirectory(this, null, "path", { autoFocus: true, placeholder: "enter path to snapshot" })}
                 </Col>
                 <Col xs="auto">
                     <Button
@@ -179,21 +179,17 @@ export class SnapshotCreate extends Component {
                 <SnapshotEstimation taskID={this.state.estimateTaskID} hideDescription={true} showZeroCounters={true} />
             }
             <br />
-
             {this.state.resolvedSource && <Row><Col xs={12}>
                 <Form.Text>
                     {this.state.resolvedSource ? this.state.resolvedSource.path : this.state.path}
                 </Form.Text>
-
                 <PolicyEditor ref={this.policyEditorRef}
                     embedded
                     host={this.state.resolvedSource.host}
                     userName={this.state.resolvedSource.userName}
                     path={this.state.resolvedSource.path} />
             </Col></Row>}
-
-            <Row><Col>&nbsp;</Col></Row>
-
+            <br />
             <CLIEquivalent command={`snapshot create ${this.state.resolvedSource ? this.state.resolvedSource.path : this.state.path}`} />
         </>;
     }