[Feature Request]: Allow user to specify Repository Directory Path via OS file browser

[gitname]

Kopia UI v0.10.7 prompts the user to enter a path.

As shown above, the input field is a text field.

I propose that Kopia UI be updated to present the user with a "Browse" button, which, when clicked, would open an OS file browser window that allows the user to select a directory.

According to MDN, the HTML input element supports (to a limited extent) an attribute called webkitdirectory that can be used to tell the web browser to allow the user to select a directory. MDN shows a caveat, though, saying:

Though originally implemented only for WebKit-based browsers, webkitdirectory is also usable in Microsoft Edge as well as Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative.

I don't know whether an alternative exists in this case.

[gitname]

I noticed the "New Snapshot" path field on the "Snapshots" tab does offer a "Browse" button.

That is what I am proposing for the "Directory Path" field shown in my previous comment.

[basldfalksjdf]

As a web developer, it sounds like this is the perfect PR for you to contribute to the community :-)

[gitname]

I was able to clone the kopia and htmlui repositories and run them locally, such that, when I would change the HTML code of the UI, the web browser would reflect those changes.

However, when I began working on this particular issue, I found that the DirectorySelector component (defined in uiutil.js) only renders its browse button when the UI is running as an Electron app (as opposed to as a web page).

I tried running it as an Electron app (by running $ make -C app dev in the root folder of the kopia repo) and got the following error as the Electron app window appeared:

When I clicked OK on the error dialog box, the Electron app window did not change, and the following additional messages appeared in the console:

I checked the app/ folder and confirmed -- as the error claims -- that there is no file named dev-app-update.yml there. I searched both repos for that file name and didn't find any results. I don't know where that file normally comes from. 🤷

So, I haven't been able to run the web UI as an Electron app.

[gitname]

So, I haven't been able to run the web UI as an Electron app.

In the meantime, I have opened a PR in which I have made a few minute aesthetic changes to the "Create New Repository" form. This was partly to "get my feet wet" with the project.

https://github.com/kopia/htmlui/pull/62

The changes I made in that PR aren't dependent upon the UI running as an Electron app.

[gitname]

So, I haven't been able to run the web UI as an Electron app.

I am still blocked by my inability to run the web UI as an Electron app. Do any of you know why the errors in these screenshots occurred?

My environment is:

• OS: Windows 10 Enterprise LTSC version 1809
• node --version: v16.15.1
• go version: version go1.18.3 windows/amd64
• make --version: GNU Make 3.81

[jkowalski]

Testing this with real electron without submitting code is unfortunately quite hard because of multi-repo build dependencies and because of the fact that the UI HTML is embedded in kopia binary that's embedded as part of the Electron build.

Anyway, here's how you can do it:

1. Checkout 3 repositories from kopia organization: side-by-side:

/kopia /htmlui /htmluibuild

2. In htmlui make the changes you want and run:

$ npm run build && ./push_local.sh

3. In kopia, modify go.mod and add this at the very end:

replace github.com/kopia/htmluibuild => ../htmluibuild

4. In kopia repository run:

$ make kopia-ui

5. Electron app with latest HTML is now in ./dist/kopia-ui/.

[gitname]

Thanks, @jkowalski ! I was able to build my locally-modified instance of the web UI as an Electron app by following the instructions in your message. After following those instructions, here's what I got when I ran dist/kopia-ui/win-unpacked/KopiaUI.exe (in the kopia folder):

I'm not blocked on this issue anymore.

[gitname]

When I make changes to the UI (i.e. the React code), here's what I do to re-build the Electron app:

1. Quit/Exit the Kopia UI Electron app
2. Kill the Kopia Go app (i.e. server) via Ctrl+C
3. In the htmlui repo: Build and copy the React app via $ npm run build && ./push_local.sh
4. In the kopia repo: Delete the dist folder via $ rm -rf ./dist
5. In the kopia repo: Run $ make kopia-ui (see step 4 output below)
6. In the kopia repo: Run $ make kopia-ui again (see step 5 output below)

Step 4 output:

λ make kopia-ui
GOOS=windows GOARCH=amd64 go build -ldflags "-s -w -X github.com/kopia/kopia/repo.BuildVersion=20220617.0.0-06c8de08 -X github.com/kopia/kopia/repo.BuildInfo=06c8de08de05c5e7bb01c1328eebeb1114a97750 -X github.com/kopia/kopia/repo.BuildGitHubRepo=" -o dist/kopia_windows_amd64/kopia.exe -tags ""
mkdir -p dist/kopia-20220617.0.0-06c8de08-windows-x64
cp dist/kopia_windows_amd64/kopia.exe LICENSE README.md dist/kopia-20220617.0.0-06c8de08-windows-x64
(cd dist && zip -r kopia-20220617.0.0-06c8de08-windows-x64.zip kopia-20220617.0.0-06c8de08-windows-x64)
/usr/bin/bash: zip: command not found
make: *** [dist/kopia_windows_amd64/kopia.exe] Error 127

Step 5 output:

λ make kopia-ui
C:/My_Program_Files/GnuWin32/bin/make -C app build-electron
make[1]: Entering directory `C:/Temp/kopia/app'
C:\\Temp\\kopia\\tools\\.tools\\node-16.13.0\\npm.cmd --scripts-prepend-node-path=auto run build-electron -- -c.extraMetadata.version=20220617.0.0-06c8de08 -p never

> [email protected] build-electron
> electron-builder "-c.extraMetadata.version=20220617.0.0-06c8de08" "-p" "never"

  • electron-builder  version=22.14.13 os=10.0.17763
  • loaded configuration  file=package.json ("build" field)
  • loaded parent configuration  preset=react-cra
  • writing effective config  file=C:\Temp\kopia\dist\kopia-ui\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=18.2.0 appOutDir=C:\Temp\kopia\dist\kopia-ui\win-unpacked
Not signing C:\Temp\kopia\dist\kopia-ui\win-unpacked\resources\server\kopia.exe  because WINDOWS_CERT_SHA1 is not set
Not signing C:\Temp\kopia\dist\kopia-ui\win-unpacked\KopiaUI.exe  because WINDOWS_CERT_SHA1 is not set
  • building        target=zip arch=x64 file=C:\Temp\kopia\dist\kopia-ui\KopiaUI-20220617.0.0-06c8de08-win.zip
  • building        target=nsis file=C:\Temp\kopia\dist\kopia-ui\KopiaUI-Setup-20220617.0.0-06c8de08.exe archs=x64 oneClick=false perMachine=false
Not signing C:\Temp\kopia\dist\kopia-ui\win-unpacked\resources\elevate.exe  because WINDOWS_CERT_SHA1 is not set
Not signing C:\Temp\kopia\dist\kopia-ui\__uninstaller-nsis-kopia-ui.exe  because WINDOWS_CERT_SHA1 is not set
Not signing C:\Temp\kopia\dist\kopia-ui\KopiaUI-Setup-20220617.0.0-06c8de08.exe  because WINDOWS_CERT_SHA1 is not set
  • building block map  blockMapFile=C:\Temp\kopia\dist\kopia-ui\KopiaUI-Setup-20220617.0.0-06c8de08.exe.blockmap
echo updated > ../dist/kopia-ui/.up-to-date
make[1]: Leaving directory `C:/Temp/kopia/app'

I'm pretty new to Electron (used on only one project before this) and very new to Make (used only once, >10 years ago).

[gitname]

I replaced the original RequiredField element with a DirectorySelector element. Here's what the result looks like:

Here's what the code diff looks like so far:

diff --git a/src/SetupFilesystem.js b/src/SetupFilesystem.js
index a51efa5..c5257b4 100644
--- a/src/SetupFilesystem.js
+++ b/src/SetupFilesystem.js
@@ -1,6 +1,9 @@
 import React, { Component } from 'react';
 import Row from 'react-bootstrap/Row';
-import { handleChange, RequiredField, validateRequiredFields } from './forms';
+import Col from 'react-bootstrap/Col';
+import Form from 'react-bootstrap/Form';
+import { handleChange, validateRequiredFields } from './forms';
+import { DirectorySelector } from './uiutil';


 export class SetupFilesystem extends Component {
@@ -18,9 +21,27 @@ export class SetupFilesystem extends Component {
     }

     render() {
+        const name = "path";
+        const label = "Directory Path";
+
         return <>
             <Row>
-                {RequiredField(this, "Directory Path", "path", { autoFocus: true, placeholder: "enter path to a directory where to store repository files" })}
+                <Form.Group as={Col}>
+                    <Form.Label className="required">{label}</Form.Label>
+                    <DirectorySelector
+                        autoFocus
+                        name={name}
+                        onDirectorySelected={p => this.setState({ path: p })}
+                        placeholder="Path to directory in which you want Kopia to store repository files"
+                        value={this.state.path}
+                        onChange={this.handleChange}
+
+                        // Adapted from `forms.js` > `RequiredField`:
+                        isInvalid={this.state.path === ""}
+                        data-testid={"control-" + name}
+                    />
+                </Form.Group>
             </Row>
         </>;
     }

The only issue I'm aware of is that, when I click "Next" when the field is empty, although the border of the field does turn red and submission does not occur, there is no error message (e.g. "Directory Path Is Required"). I don't completely understand how validation works with the RequiredField component and did not successfully mimic the behavior with the DirectorySelector component.

[basldfalksjdf]

@gitname What do you think about adding the same selector in other places on KopiaUI? The one other place I've identified so far is during the restore screen where it asks you to enter path to restore.

[gitname]

Hi @basldfalksjdf,

I am in favor of adding it to other places on Kopia UI. Although I don't know what all the various screens of Kopia UI are yet (I've only used it a couple times); generally speaking, I'm in favor of replacing every regular text input into which a directory path is the only valid entry, with one of these DirectorySelector widgets.

I plan to finish implementing validation of this first input before moving on to additional screens/inputs.

It will be a few more days until I work on this project (and issue) again.

[gitname]

My work on this project is still on hold. I have some personal matters that will be keeping me busy until the end of the month; then, I will be finishing writing a post-processing script for users of the dupeGuru tool (dupeGuru is a tool people can use to identify duplicate files among a set of folders), which will take me a few hours. After that, I'll return to this project. In case any of you wants to implement this "feature" in the meantime, you're welcome to do so, as far as I'm concerned.

[github-actions[bot]]

Closed due to inactivity. Re-open and remove "stale" label if it should remain open for an additional period of time