Further working on the feature

kopia · Jan 6, 2024 · fc4bc40 · fc4bc40
1 parent 2a888f2
commit fc4bc40
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 53 deletions.
diff --git a/src/components/SetupRepositoryFilesystem.jsx b/src/components/SetupRepositoryFilesystem.jsx
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { handleChange, validateRequiredFields } from '../forms';
 import { RequiredDirectory } from '../forms/RequiredDirectory';
-import { Row } from 'react-bootstrap';
 
 export class SetupRepositoryFilesystem extends Component {
     constructor(props) {

diff --git a/src/forms/OptionalDirectory.jsx b/src/forms/OptionalDirectory.jsx
@@ -0,0 +1,27 @@
+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 { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { stateProperty } from '.';
+
+export function OptionalDirectory(component, label, name, props = {}, helpText = null) {
+    let { onDirectorySelected, ...inputProps } = props;
+    return <FormGroup>
+        {label ? <Form.Label htmlFor='directoryInput' className="required">{label}</Form.Label> : <></>}
+        <InputGroup as={Col}>
+            <FormControl name={name} size="sm" id='directoryInput'
+                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>}
+        </InputGroup>
+    </FormGroup>
+}
diff --git a/src/forms/RequiredDirectory.jsx b/src/forms/RequiredDirectory.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
-import { Col } from 'react-bootstrap';
+import { Col, FormGroup } from 'react-bootstrap';
 import FormControl from 'react-bootstrap/FormControl';
 import InputGroup from 'react-bootstrap/InputGroup';
 import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
@@ -10,29 +10,20 @@ import { stateProperty } from '.';
 
 export function RequiredDirectory(component, label, name, props = {}, helpText = null) {
     let { onDirectorySelected, ...inputProps } = props;
-    if (!window.kopiaUI) {
-        return <>
-            <Form.Label className="required">{label}</Form.Label>
-            <InputGroup as={Col}>
-                <Form.Control name={name} size="sm" isInvalid={stateProperty(component, name, null) === ''}
-                    onChange={component.handleChange}
-                    value={stateProperty(component, name)}{...inputProps} /></InputGroup>
-        </>
-    }
-    return <>
-        <Form.Label htmlFor='directoryInput' className="required">{label}</Form.Label>
+    return <FormGroup>
+        {label ? <Form.Label className="required">{label}</Form.Label> : <></>}
         <InputGroup as={Col}>
             <FormControl name={name} size="sm" id='directoryInput'
                 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>
-
+            </Button> : <></>}
             {helpText && <Form.Text className="text-muted">{helpText}</Form.Text>}
             <Form.Control.Feedback type="invalid">Required field</Form.Control.Feedback>
         </InputGroup>
-    </>
+    </FormGroup>
 }
diff --git a/src/pages/Policies.jsx b/src/pages/Policies.jsx
@@ -10,8 +10,9 @@ import Form from 'react-bootstrap/Form';
 import Row from 'react-bootstrap/Row';
 import { Link } from 'react-router-dom';
 import { handleChange } from '../forms';
+import { OptionalDirectory } from '../forms/OptionalDirectory'
 import KopiaTable from '../utils/KopiaTable';
-import { CLIEquivalent, compare, DirectorySelector, isAbsolutePath, ownerName, policyEditorURL, redirect } from '../utils/uiutil';
+import { CLIEquivalent, compare, isAbsolutePath, ownerName, policyEditorURL, redirect } from '../utils/uiutil';
 
 const applicablePolicies = "Applicable Policies"
 const localPolicies = "Local Path Policies"
@@ -274,9 +275,7 @@ export class Policies extends Component {
                         </Col>
                         {(this.state.selectedOwner === localPolicies || this.state.selectedOwner === this.state.localSourceName || this.state.selectedOwner === applicablePolicies) ? <>
                             <Col>
-                                <DirectorySelector autoFocus onDirectorySelected={p => this.setState({ policyPath: p })}
-                                    placeholder="enter directory to find or set policy"
-                                    name="policyPath" value={this.state.policyPath} onChange={this.handleChange} />
+                                {OptionalDirectory(this, null, "policyPath", { autoFocus: true, placeholder: "enter directory to find or set policy" })}
                             </Col>
                             <Col xs="auto">
                                 <Button disabled={!this.state.policyPath} size="sm" type="submit" onClick={this.editPolicyForPath}>Set Policy</Button>
@@ -295,4 +294,4 @@ export class Policies extends Component {
             <CLIEquivalent command="policy list" />
         </>;
     }
-}
+}
diff --git a/src/pages/SnapshotCreate.jsx b/src/pages/SnapshotCreate.jsx
@@ -7,7 +7,8 @@ import Row from 'react-bootstrap/Row';
 import { handleChange } from '../forms';
 import { PolicyEditor } from '../components/policy-editor/PolicyEditor';
 import { SnapshotEstimation } from '../components/SnapshotEstimation';
-import { CLIEquivalent, DirectorySelector, errorAlert, GoBackButton, redirect } from '../utils/uiutil';
+import { RequiredDirectory } from '../forms/RequiredDirectory';
+import { CLIEquivalent, errorAlert, GoBackButton, redirect } from '../utils/uiutil';
 
 export class SnapshotCreate extends Component {
     constructor() {
@@ -147,18 +148,15 @@ export class SnapshotCreate extends Component {
 
     render() {
         return <>
-            <Row>
                 <Form.Group>
                     <GoBackButton onClick={this.props.history.goBack} />
                 </Form.Group>
-                &nbsp;&nbsp;&nbsp;<h4>New Snapshot</h4>
-            </Row>
+                <br/>
+                <h4>New Snapshot</h4>
             <br />
             <Row>
                 <Col>
-                    <Form.Group>
-                        <DirectorySelector onDirectorySelected={p => this.setState({ path: p })} autoFocus placeholder="enter path to snapshot" name="path" value={this.state.path} onChange={this.handleChange} />
-                    </Form.Group>
+                    {RequiredDirectory(this, "Directory Path", "path", { autoFocus: true, placeholder: "enter path to snapshot" })}
                 </Col>
                 <Col xs="auto">
                     <Button
@@ -168,7 +166,6 @@ export class SnapshotCreate extends Component {
                         title="Estimate"
                         variant="secondary"
                         onClick={this.estimate}>Estimate</Button>
-                    &nbsp;
                     <Button
                         data-testid='snapshot-now'
                         size="sm"

diff --git a/src/utils/uiutil.jsx b/src/utils/uiutil.jsx
@@ -1,9 +1,8 @@
-import { faBan, faCheck, faChevronLeft, faCopy, faExclamationCircle, faExclamationTriangle, faFolderOpen, faTerminal, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faBan, faCheck, faChevronLeft, faCopy, faExclamationCircle, faExclamationTriangle, faTerminal, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import axios from 'axios';
 import React, { useState } from 'react';
 import Button from 'react-bootstrap/Button';
-import Form from 'react-bootstrap/Form';
 import FormControl from 'react-bootstrap/FormControl';
 import InputGroup from 'react-bootstrap/InputGroup';
 import Spinner from 'react-bootstrap/Spinner';
@@ -367,27 +366,6 @@ export function errorAlert(err, prefix) {
     }
 }
 
-/**
- * A selector that openes a file browser to select a directory. 
- * The selector checks, if the it is used in the context of the native or web-ui.
- * @param {*} props 
- * @returns 
- */
-export function DirectorySelector(props) {
-    let { onDirectorySelected, ...inputProps } = props;
-
-    if (!window.kopiaUI) {
-        return <Form.Control size="sm" {...inputProps} />
-    }
-
-    return <InputGroup>
-        <FormControl size="sm" {...inputProps} />
-        <Button size="sm" onClick={() => window.kopiaUI.selectDirectory(onDirectorySelected)}>
-            <FontAwesomeIcon icon={faFolderOpen} />
-        </Button>
-    </InputGroup>;
-}
-
 export function CLIEquivalent(props) {
     let [visible, setVisible] = useState(false);
     let [cliInfo, setCLIInfo] = useState({});