storage listing

app/scripts/comp/app/open-controller.ts

@@ -11,9 +11,10 @@ import { Logger } from 'util/logger';
 import { FileController } from 'comp/app/file-controller';
 import { OpenState } from 'models/ui/open-state';
 import { StorageBase } from 'storage/storage-base';
-import { BrowserAuthStartedError, OAuthRejectedError } from 'storage/types';
+import { BrowserAuthStartedError, OAuthRejectedError, StorageListItem } from 'storage/types';
 import { FunctionComponent, h } from 'preact';
-import { OpenStorageFileList, OpenStorageFileListFile } from 'ui/open/open-storage-file-list';
+import { OpenStorageFileList } from 'ui/open/open-storage-file-list';
+import { UrlFormat } from 'util/formatting/url-format';
 
 const logger = new Logger('open');
 
@@ -220,15 +221,20 @@ class OpenController {
 
     private showStorageFileListAlert(
         storage: StorageBase,
-        files: OpenStorageFileListFile[],
+        files: StorageListItem[],
         currentDir?: string
     ) {
         const listView: FunctionComponent = () => {
-            const fileSelected = (file: OpenStorageFileListFile) => {
+            const fileSelected = (file: StorageListItem) => {
                 if (file.dir) {
                     this.listStorage(storage, file.path, currentDir);
                 } else {
-                    // this.openStorageFile(storage, file);
+                    alert.closeWithResult('');
+                    OpenState.setStorageFile(storage.name, {
+                        path: file.path,
+                        name: UrlFormat.getDataFileName(file.name),
+                        rev: file.rev
+                    });
                 }
             };
 
@@ -238,7 +244,7 @@ class OpenController {
             });
         };
 
-        Alerts.alert({
+        const alert = Alerts.alert({
             header: Locale.openSelectFile,
             body: Locale.openSelectFileBody,
             icon: storage.icon || 'file-alt',

app/scripts/models/ui/open-state.ts

@@ -3,6 +3,7 @@ import { Model } from 'util/model';
 import { StorageFileOptions } from 'storage/types';
 import { FileChalRespConfig, FileInfo } from 'models/file-info';
 import { FileManager } from 'models/file-manager';
+import { UrlFormat } from 'util/formatting/url-format';
 
 export interface OpenParams {
     id?: string;
@@ -231,6 +232,16 @@ class OpenState extends Model implements OpenParams {
             this.storageInProgress = undefined;
         });
     }
+
+    setStorageFile(storage: string, file: { path: string; name: string; rev?: string }) {
+        this.batchSet(() => {
+            this.reset();
+            this.storage = storage;
+            this.path = file.path;
+            this.name = UrlFormat.getDataFileName(file.name);
+            this.rev = file.rev;
+        });
+    }
 }
 
 const instance = new OpenState();

app/scripts/ui-old/open-view.js

@@ -5,15 +5,12 @@ import { Storage } from 'storage';
 import { Alerts } from 'comp/ui/alerts';
 import { UsbListener } from 'comp/app/usb-listener';
 import { YubiKey } from 'comp/app/yubikey';
-import { Features } from 'util/features';
 import { UrlFormat } from 'util/formatting/url-format';
 import { Locale } from 'util/locale';
 import { Logger } from 'util/logger';
 import { OpenConfigView } from 'views/open-config-view';
-import { StorageFileListView } from 'views/storage-file-list-view';
 import { OpenChalRespView } from 'views/open-chal-resp-view';
 import { omit } from 'util/fn';
-import { GeneratorView } from 'views/generator-view';
 import { NativeModules } from 'comp/launcher/native-modules';
 
 const logger = new Logger('open-view');
@@ -71,21 +68,6 @@ class OpenView extends View {
         }
     }
 
-    openStorageFile(storage, file) {
-        if (this.busy) {
-            return;
-        }
-        this.params.id = null;
-        this.params.storage = storage.name;
-        this.params.path = file.path;
-        this.params.name = UrlFormat.getDataFileName(file.name);
-        this.params.rev = file.rev;
-        this.params.fileData = null;
-        this.encryptedPassword = null;
-        this.displayOpenFile();
-        this.displayOpenDeviceOwnerAuth();
-    }
-
     showConfig(storage) {
         if (this.busy) {
             return;
@@ -185,35 +167,6 @@ class OpenView extends View {
         }
     }
 
-    toggleGenerator(e) {
-        e.stopPropagation();
-        if (this.views.gen) {
-            this.views.gen.remove();
-            return;
-        }
-        const el = this.$el.find('.open__icon-generate');
-        const rect = el[0].getBoundingClientRect();
-        const pos = {
-            left: rect.left,
-            top: rect.top
-        };
-        if (Features.isMobile) {
-            pos.left = '50vw';
-            pos.top = '50vh';
-            pos.transform = 'translate(-50%, -50%)';
-        }
-        const generator = new GeneratorView({
-            copy: true,
-            noTemplateEditor: true,
-            pos
-        });
-        generator.render();
-        generator.once('remove', () => {
-            delete this.views.gen;
-        });
-        this.views.gen = generator;
-    }
-
     usbDevicesChanged() {
         if (this.model.settings.canOpenOtpDevice) {
             const hasYubiKeys = !!UsbListener.attachedYubiKeys;

app/scripts/ui/open/open-storage-file-list.ts

@@ -2,17 +2,12 @@ import { h, FunctionComponent } from 'preact';
 import { OpenStorageFileListView } from 'views/open/open-storage-file-list-view';
 import { UrlFormat } from 'util/formatting/url-format';
 import { useState } from 'preact/hooks';
-
-export interface OpenStorageFileListFile {
-    path: string;
-    name: string;
-    dir?: boolean;
-}
+import { StorageListItem } from 'storage/types';
 
 export const OpenStorageFileList: FunctionComponent<{
-    files: OpenStorageFileListFile[];
+    files: StorageListItem[];
 
-    fileSelected: (file: OpenStorageFileListFile) => void;
+    fileSelected: (file: StorageListItem) => void;
 }> = ({ files: inputFiles, fileSelected }) => {
     const [showHiddenFiles, setShowHiddenFiles] = useState(false);
 
@@ -37,13 +32,20 @@ export const OpenStorageFileList: FunctionComponent<{
         setShowHiddenFiles(!showHiddenFiles);
     };
 
+    const filePathSelected = (filePath: string) => {
+        const file = inputFiles.find((f) => f.path === filePath);
+        if (file) {
+            fileSelected(file);
+        }
+    };
+
     return h(OpenStorageFileListView, {
         density,
         files,
         canShowHiddenFiles,
         showHiddenFiles,
 
-        fileSelected,
+        fileSelected: filePathSelected,
         showHiddenFilesChanged
     });
 };

app/scripts/views/open/open-storage-file-list-view.tsx

@@ -16,7 +16,7 @@ export const OpenStorageFileListView: FunctionComponent<{
     canShowHiddenFiles: boolean;
     showHiddenFiles: boolean;
 
-    fileSelected: (file: OpenStorageFileListViewFile) => void;
+    fileSelected: (filePath: string) => void;
     showHiddenFilesChanged: () => void;
 }> = ({
     density,
@@ -35,10 +35,10 @@ export const OpenStorageFileListView: FunctionComponent<{
         if (!(withPath instanceof HTMLElement)) {
             return;
         }
-        const path = withPath.dataset.path;
-        const file = files.find((f) => f.path === path);
-        if (file) {
-            fileSelected(file);
+        const filePath = withPath.dataset.path;
+        if (typeof filePath === 'string') {
+            e.stopPropagation();
+            fileSelected(filePath);
         }
     };