@api-client/ui 0.0.11 → 0.0.12

package/src/elements/store/FilePicker.styles.ts

@@ -0,0 +1,72 @@
+import { css } from "lit";
+import typography from '../../styles/m3/typography.module.js';
+
+export default [typography, css`
+:host {
+  display: block;
+
+  width: 420px;
+  height: 400px;
+
+  background-color: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+}
+
+.content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin: 0 16px;
+}
+
+.header.withIcon {
+  margin: 0 16px 0 4px;
+}
+
+.header .label {
+  display: block;
+}
+
+.progress {
+  position: absolute;
+  bottom: -10px; /* aligns with the divider */
+  width: 100%;
+}
+
+.list {
+  overflow-y: auto;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 0 16px;
+}
+
+.file-icon {
+  margin-right: 12px;
+}
+
+.error {
+  background-color: var(--md-sys-color-error-container);
+  color: var(--md-sys-color-on-error-container);
+  display: block;
+  padding: 8px 12px;
+  border-radius: var(--md-sys-shape-corner-small);
+}
+
+.no-files {
+  flex: 1;
+}
+`];

package/src/elements/store/FilesLib.ts

@@ -0,0 +1,32 @@
+import { CertificateFileKind, DataFileKind, FolderKind, IFile, ProjectKind } from "@api-client/core/build/browser.js";
+import { IconType } from "../../ui/icons/Icons.js";
+
+/**
+ * Sorts files on the list.
+ * 
+ * Folders are always on top.
+ */
+export function filesSortFunction(a: IFile, b: IFile): number {
+  if (a.kind !== b.kind) {
+    if (a.kind === FolderKind) {
+      return -1;
+    }
+    return 1;
+  }
+  if (a.kind === b.kind && a.kind === FolderKind) {
+    return (a.info.name || '').localeCompare(b.info.name || '');
+  }
+  return b.lastModified.time - a.lastModified.time;
+}
+
+export function fileIcon(item: IFile): IconType | undefined {
+  let icon: IconType | undefined;
+  switch (item.kind) {
+    case DataFileKind: icon = 'schema'; break;
+    case FolderKind: icon = 'folder'; break;
+    case ProjectKind: icon = 'collectionsBookmark'; break;
+    case CertificateFileKind: icon = 'certificate'; break;
+    default:
+  }
+  return icon;
+}

package/src/events/EventTypes.ts

@@ -21,6 +21,7 @@ export const EventTypes = Object.freeze({
       delete: 'storefilesdelete',
       patchUsers: 'storefilespatchusers',
       listUsers: 'storefileslistusers',
+      breadcrumbs: 'storefilesbreadcrumbs',
     }),
     User: Object.freeze({
       me: 'storeuserme',

package/src/events/StoreEvents.ts

@@ -2,7 +2,7 @@
 import { 
   IBackendInfo, IFile, IFileCreateOptions,
   ListFileKind, AccessOperation, IUser, IPatchRevision, IApplication, IHttpHistory, IHttpHistoryBulkAdd, HistoryListOptions, 
-  ContextChangeRecord, ContextDeleteEvent, ContextDeleteBulkEvent, ContextListOptions, ContextListResult, IProjectExecution, IProjectExecutionListOptions, IBulkOperationResult,
+  ContextChangeRecord, ContextDeleteEvent, ContextDeleteBulkEvent, ContextListOptions, ContextListResult, IProjectExecution, IProjectExecutionListOptions, IBulkOperationResult, FileBreadcrumb,
 } from '@api-client/core/build/browser.js';
 import { Patch } from '@api-client/json';
 import { IConfigEnvironment, IConfigInit } from '../lib/config/Config.js';
@@ -371,6 +371,26 @@ export const StoreEvents = Object.freeze({
       target.dispatchEvent(e);
       return ((e.detail.result as unknown) as Promise<ContextListResult<IUser>>);
     },
+
+    /**
+     * Lists breadcrumbs to the file.
+     * 
+     * @param fileOrFolder The if of the file or folder to query for.
+     * @param options Optional query options.
+     */
+    breadcrumbs: async (fileOrFolder: string, target: EventTarget = document.body): Promise<ContextListResult<FileBreadcrumb>> => {
+      const e = new CustomEvent(EventTypes.Store.File.breadcrumbs, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          key: fileOrFolder,
+          result: undefined,
+        },
+      });
+      target.dispatchEvent(e);
+      return ((e.detail.result as unknown) as Promise<ContextListResult<FileBreadcrumb>>);
+    },
   }),
   /**
    * Reads the current user.

package/src/pages/ApplicationScreen.ts

@@ -144,7 +144,9 @@ export abstract class ApplicationScreen extends RouteMixin(RenderableMixin(Event
     window.onunhandledrejection = this.unhandledRejectionHandler.bind(this);
     this.initMediaQueries();
     this.initStoreChange();
-    this.configBroadcast.addEventListener('message', this.handleConfigBroadcast.bind(this))
+    this.configBroadcast.addEventListener('message', this.handleConfigBroadcast.bind(this));
+    // this will use the system-default theme until config is read.
+    this.themeActiveCallback();
   }
 
   /**
@@ -325,7 +327,7 @@ export abstract class ApplicationScreen extends RouteMixin(RenderableMixin(Event
    * Called from the initialize store init flow when the user is not authenticated
    * and the auth screen is rendered.
    */
-  protected async _authHandler(): Promise<void> {
+  protected async handleAuthenticate(): Promise<void> {
     const { store } = this.bindings;
     await store.auth.authenticate({ updateEnvironment: true });
     this.authenticated = true;
@@ -509,7 +511,7 @@ export abstract class ApplicationScreen extends RouteMixin(RenderableMixin(Event
     <div class="auth-required-screen">
       <h1 class="display-large">Authentication required</h1>
       <p class="body-large">You are not authenticated. To continue, please, authenticate your account.</p>
-      <ui-button type="tonal" @click="${this._authHandler}">Authenticate</ui-button>
+      <ui-button type="tonal" @click="${this.handleAuthenticate}">Authenticate</ui-button>
     </div>
     `;
   }

package/src/pages/api-client/ApiClient.screen.ts

@@ -99,8 +99,6 @@ export default class ApiClientScreen extends ApplicationScreen {
 
   protected settings = new SettingsPage(this);
 
-  filesChannel = new BroadcastChannel(StoreBroadcast.files);
-
   spacesChannel = new BroadcastChannel(StoreBroadcast.spaces);
 
   trashChannel = new BroadcastChannel(StoreBroadcast.trash);
@@ -136,7 +134,6 @@ export default class ApiClientScreen extends ApplicationScreen {
       await this.bindings.store.observeTrash();
     }
     await this.loadUser();
-    this.filesChannel.addEventListener('message', this.fileMetaMessageHandler.bind(this));
     this.spacesChannel.addEventListener('message', this.spacesMessageHandler.bind(this));
     this.trashChannel.addEventListener('message', this.trashMessageHandler.bind(this));
     this.initializeRouting();
@@ -146,8 +143,8 @@ export default class ApiClientScreen extends ApplicationScreen {
   reset(): void {
     this.spaces = [];
     this.spacesCursor = undefined;
-    this.files.resetList();
-    this.shared.resetList();
+    this.files.fs.resetList();
+    this.shared.fs.resetList();
     this.trash.resetList();
   }
 
@@ -249,16 +246,16 @@ export default class ApiClientScreen extends ApplicationScreen {
     this.bindings.store.space = this.selectedSpace;
 
     this.render();
-    this.files.resetList();
-    this.shared.resetList();
+    this.files.fs.resetList();
+    this.shared.fs.resetList();
     this.trash.resetList();
     if (this.page === 'files') {
-      this.files.readFiles();
+      this.files.fs.debounceQuery();
       navigate('files'); // remove any folder info
     } else if (this.page === 'trash') {
       this.trash.readFiles();
     } else if (this.page === 'shared') {
-      this.shared.readFiles();
+      this.shared.fs.debounceQuery();
     }
     this.storeLastSpaceKey(this.selectedSpace);
   }
@@ -279,18 +276,6 @@ export default class ApiClientScreen extends ApplicationScreen {
     this.spacesCursor = cursor;
   }
 
-  /**
-   * A handler for the broadcast channel message which informs about changes to files meta.
-   * The function distributes changes between pages
-   */
-  protected fileMetaMessageHandler(e: MessageEvent): void {
-    const event = e.data as BroadcastEvent;
-    if (event.space === this.selectedSpace) {
-      this.files.handleFileEvent(event);
-    }
-    this.shared.handleFileEvent(event);
-  }
-
   protected trashMessageHandler(e: MessageEvent): void {
     const event = e.data as BroadcastEvent;
     if (event.space !== this.selectedSpace) {
@@ -343,13 +328,13 @@ export default class ApiClientScreen extends ApplicationScreen {
     this.resetRoute();
     this.page = 'files';
     const folder = info.params && info.params.key as string | undefined;
-    const folderChanged = this.files.folder !== folder;
+    const folderChanged = this.files.fs.parent !== folder;
     if (folderChanged) {
-      this.files.folder = folder;
-      this.files.resetList();
+      this.files.fs.parent = folder;
+      this.files.fs.resetList();
     }
-    if (!this.files.files.length || folderChanged) {
-      this.files.readFiles();
+    if (!this.files.fs.files.length || folderChanged) {
+      this.files.fs.debounceQuery();
     }
   }
 
@@ -357,13 +342,13 @@ export default class ApiClientScreen extends ApplicationScreen {
     this.resetRoute();
     this.page = 'shared';
     const folder = info.params && info.params.key as string | undefined;
-    const folderChanged = this.shared.folder !== folder;
+    const folderChanged = this.shared.fs.parent !== folder;
     if (folderChanged) {
-      this.shared.folder = folder;
-      this.shared.resetList();
+      this.shared.fs.parent = folder;
+      this.shared.fs.resetList();
     }
-    if (!this.shared.files.length || folderChanged) {
-      this.shared.readFiles();
+    if (!this.shared.fs.files.length || folderChanged) {
+      this.shared.fs.debounceQuery();
     }
   }
 

package/src/pages/api-client/Authenticate.screen.ts

@@ -66,7 +66,7 @@ export default class AuthenticateScreen extends ApplicationScreen {
     return env;
   }
 
-  protected handleAuthenticate(): void {
+  protected async handleAuth(): Promise<void> {
     const { environment } = this;
     if (!environment) {
       this.environmentError = 'Environment information not found. Go back to the previous page.';
@@ -146,7 +146,7 @@ export default class AuthenticateScreen extends ApplicationScreen {
     <div class="action">
       <ui-button 
         type="filled"
-        @click="${this.handleAuthenticate}"
+        @click="${this.handleAuth}"
       >Authenticate</ui-button>
     </div>
     `;

package/src/pages/api-client/pages/Files.page.ts

@@ -1,19 +1,13 @@
 import { 
   IFile, HttpProject, Project, Folder, ProjectKind, FolderKind, 
   EventUtils, DataNamespace, DataFile, DataFileKind, 
-  FileAddOptions, FileBreadcrumb, ContextSpaceListOptions, 
-  BroadcastEvent, BroadcastFileData, 
-  FileMetaCreatedBroadcastEvent,
-  DeletedBroadcastEvent,
-  FilePatchBroadcastEvent,
-  ContextListResult,
+  FileAddOptions, FileBreadcrumb, 
   ICapabilities,
 } from "@api-client/core/build/browser.js";
 import { html, nothing, TemplateResult } from "lit";
 import { join } from "lit/directives/join.js";
 import { map } from "lit/directives/map.js";
 import { until } from 'lit/directives/until.js';
-import { Patch } from "@api-client/json";
 import type ApiClientScreen from "../ApiClient.screen.js";
 import { DataTable } from "../../../ui/table/DataTable.js";
 import { NavigationEvents } from "../../../events/NavigationEvents.js";
@@ -22,9 +16,10 @@ import { DataImportProcessor } from "../../../http-client/store/DataImportProces
 import { SnackNotifications } from "../../../ui/notification/SnackNotifications.js";
 import { UiDialogClosingReason } from "../../../ui/dialog/UiDialog.js";
 import { FileBindings } from "../../../bindings/base/FileBindings.js";
-import { IconType } from "../../../ui/icons/Icons.js";
 import UserCache from '../../../store/UserCache.js';
 import AppInfo from '../AppInfo.js';
+import { fileIcon } from "../../../elements/store/FilesLib.js";
+import { FileSystem } from "../../../store/FileSystem.js";
 import '@github/relative-time-element';
 import '../../../define/ui/ui-list.js';
 import '../../../define/ui/ui-list-item.js';
@@ -35,7 +30,7 @@ import '../../../define/ui/ui-button.js';
 import '../../../define/ui/ui-divider.js';
 import '../../../define/ui/ui-text-field.js';
 import '../../../define/dialog/rename-dialog.js';
-import '../../../define/files/share-file.js';
+import '../../../define/store/share-file.js';
 
 enum ImportState {
   Analyzing,
@@ -49,41 +44,20 @@ enum ImportState {
  * A class that specializes in rendering the list of files in HTTP Client.
  */
 export class FilesPage {
+  fs = new FileSystem();
 
-  /**
-   * The list of files to render.
-   * Do not overwrite this property or when you must then update the DataTable's `items` as well.
-   */
-  files: IFile[] = [];
-
-  /**
-   * The pagination cursor for files.
-   * As long there's a cursor, there are more files to request.
-   */
-  cursor?: string;
-
-  /**
-   * The key of the currently rendered folder.
-   */
-  folder?: string;
-
-  breadcrumbs?: FileBreadcrumb[];
-
-  dt = new DataTable(() => this.files, { ariaLabel: 'Your files', active: true, selection: 'single' });
+  dt = new DataTable(() => this.fs.files, { ariaLabel: 'Your files', active: true, selection: 'single' });
 
   importProcessor?: DataImportProcessor;
 
   importState?: ImportState;
 
-  /**
-   * Whether the UI is reading files 
-   */
-  readingFiles?: boolean;
-
   /**
    * A selected in the table item.
    */
   selectedItem?: string;
+
+  errorMessage?: string;
   
   constructor(protected screen: ApiClientScreen) {
     this.createProjectHandler = this.createProjectHandler.bind(this);
@@ -105,122 +79,24 @@ export class FilesPage {
     this.dt.addEventListener('activate', this.itemActivateHandler.bind(this));
     this.dt.addEventListener('render', this.handleTableRender.bind(this));
     this.dt.addEventListener('select', this.handleTableSelect.bind(this));
-  }
+    this.dt.addEventListener('scrollend', this.handleTableScrollEnd.bind(this));
 
-  async refresh(): Promise<void> {
-    this.resetList();
-    this.screen.render();
-    await this.readFiles();
-  }
-
-  resetList(): void {
-    this.files = [];
-    this.cursor = undefined;
-    this.breadcrumbs = undefined;
-  }
-
-  async readFiles(): Promise<void> {
-    const { selectedSpace } = this.screen;
-    if (!selectedSpace) {
-      return;
-    }
-    if (this.readingFiles) {
-      return;
-    }
-    this.readingFiles = true;
-    const { cursor: filesCursor, folder } = this;
-    const opts: ContextSpaceListOptions = {
-      space: selectedSpace,
-      descending: true,
-    };
-    if (filesCursor) {
-      opts.cursor = filesCursor;
-    }
-    if (folder) {
-      opts.parent = folder;
-    }
-    try {
-      const result = await this.listFiles(opts);
-      const { items, cursor } = result;
-      this.files = this.files.concat(items).sort(this.filesSortFunction.bind(this));
-      this.cursor = cursor;
-      if (folder) {
-        const br = await this.screen.bindings.store.files.breadcrumbs(folder);
-        this.breadcrumbs = br.items.reverse();
-      }
-    } finally {
-      this.readingFiles = false;
-    }
-    this.screen.render();
-  }
-
-  protected async listFiles(opts: ContextSpaceListOptions): Promise<ContextListResult<IFile>> {
-    return this.screen.bindings.store.files.list(opts);
-  }
-
-  /**
-   * Sorts files on the list.
-   * 
-   * Folders are always on top.
-   */
-  filesSortFunction(a: IFile, b:IFile): number {
-    if (a.kind !== b.kind) {
-      if (a.kind === FolderKind) {
-        return -1;
-      }
-      return 1;
-    }
-    if (a.kind === b.kind && a.kind === FolderKind) {
-      return (a.info.name || '').localeCompare(b.info.name || '');
-    }
-    return b.lastModified.time - a.lastModified.time;
-  }
-
-  handleFileEvent(event: BroadcastEvent): void {
-    const typed = event as BroadcastEvent & BroadcastFileData;
-    if (typed.parent && typed.parent !== this.folder) {
-      return;
-    }
-    if (typed.alt !== 'meta') {
-      return;
-    }
-    switch (event.operation) {
-      case 'created': this.handleFileCreated((typed as FileMetaCreatedBroadcastEvent).data); break;
-      case 'deleted': this.handleFileDeleted(typed as DeletedBroadcastEvent); break;
-      case 'patch': this.handleFilePatch(typed as FilePatchBroadcastEvent); break;
-      default:
-    }
-  }
-
-  handleFileCreated(file: IFile): void {
-    this.files.push(file);
-    this.files.sort(this.filesSortFunction.bind(this));
-    this.screen.render();
-  }
-
-  handleFileDeleted(event: DeletedBroadcastEvent): void {
-    this.removeFileFromList(event.key);
-  }
-
-  removeFileFromList(key: string): void {
-    const index = this.files.findIndex(i => i.key === key);
-    if (index === -1) {
-      return;
-    }
-    this.files.splice(index, 1);
-    this.screen.render();
+    this.fs.observe();
+    this.fs.addEventListener('change', () => this.screen.render());
+    this.fs.addEventListener('error', (e: Event) => {
+      const event = e as CustomEvent<string>;
+      this.errorMessage = event.detail;
+    });
+    this.fs.addEventListener('querycomplete', () => {
+      document.body.dispatchEvent(new Event('querycomplete', { bubbles: true }));
+    });
   }
 
-  handleFilePatch(event: FilePatchBroadcastEvent): void {
-    const { data, key } = event;
-    const index = this.files.findIndex(i => i.key === key);
-    if (index === -1) {
-      return;
-    }
-    const file = this.files[index];
-    const result = Patch.apply(file, data.patch);
-    this.files[index] = result.doc as IFile;
+  async refresh(): Promise<void> {
+    this.fs.resetList();
     this.screen.render();
+    await this.fs.queryPage();
+    await this.fs.queryBreadcrumbs();
   }
 
   protected cancelCreateProjectDialog(): void {
@@ -331,8 +207,8 @@ export class FilesPage {
       throw new Error('You need to select a space first');
     }
     const opts: FileAddOptions = {};
-    if (this.folder) {
-      opts.parent = this.folder;
+    if (this.fs.parent) {
+      opts.parent = this.fs.parent;
     }
     const result = await this.screen.bindings.store.files.add(file, opts);
     if (media) {
@@ -422,7 +298,7 @@ export class FilesPage {
     this.importState = ImportState.Importing;
     this.screen.render();
     try {
-      await importProcessor.importProject(this.screen.bindings.store, selectedSpace, this.folder);
+      await importProcessor.importProject(this.screen.bindings.store, selectedSpace, this.fs.parent);
       this.importState = ImportState.Done;
       this.screen.render();
     } catch (e) {
@@ -465,8 +341,12 @@ export class FilesPage {
     this.screen.render();
   }
 
+  protected handleTableScrollEnd(): void {
+    this.fs.debounceQuery();
+  }
+
   openProject(key: string): void {
-    const file = this.files.find(i => i.key === key);
+    const file = this.fs.files.find(i => i.key === key);
     if (!file) {
       throw new Error(`Invalid state: file not found`);
     }
@@ -550,7 +430,7 @@ export class FilesPage {
   }
 
   protected renameFile(key: string): void {
-    const file = this.files.find(i => i.key === key);
+    const file = this.fs.files.find(i => i.key === key);
     if (!file) {
       return;
     }
@@ -571,7 +451,7 @@ export class FilesPage {
   }
 
   protected shareFile(key: string): void {
-    const file = this.files.find(i => i.key === key);
+    const file = this.fs.files.find(i => i.key === key);
     if (!file) {
       return;
     }
@@ -582,7 +462,7 @@ export class FilesPage {
     dialog.modal = true;
     document.body.appendChild(dialog);
     dialog.open = true;
-    dialog.addEventListener('closed', () => {
+    dialog.addEventListener('close', () => {
       document.body.removeChild(dialog);
     });
   }
@@ -626,7 +506,7 @@ export class FilesPage {
     if (!selectedItem) {
       return nothing
     }
-    const file = this.files.find(i => i.key === selectedItem);
+    const file = this.fs.files.find(i => i.key === selectedItem);
     if (!file) {
       return nothing;
     }
@@ -726,7 +606,7 @@ export class FilesPage {
   }
 
   protected renderBreadcrumbs(): TemplateResult {
-    const { breadcrumbs=[] } = this;
+    const { breadcrumbs = [] } = this.fs;
     if (!breadcrumbs.length) {
       return html``;
     }
@@ -868,17 +748,10 @@ export class FilesPage {
   }
 
   protected nameCell(item: IFile): TemplateResult {
-    let icon: IconType | undefined;
-    switch (item.kind) {
-      case DataFileKind: icon = 'schema'; break;
-      case FolderKind: icon = 'folder'; break;
-      case ProjectKind: icon = 'collectionsBookmark'; break;
-      default: 
-    }
-
+    const icon = fileIcon(item);
     return this.dt.cell(html`
       ${icon ? html`<ui-icon icon="${icon}" class="cell-icon"></ui-icon>` : nothing}
-      ${item.info.name || 'Unnamed project'}
+      ${item.info.name || 'Unnamed file'}
     `, { class: 'name-cell', data: { kind: item.kind } });
   }
 

package/src/pages/api-client/pages/Shared.page.ts

@@ -1,4 +1,4 @@
-import { BroadcastEvent, BroadcastFileData, ContextListResult, ContextSpaceListOptions, FileAccessBroadcastEvent, IFile } from "@api-client/core/build/browser.js";
+import { IFile } from "@api-client/core/build/browser.js";
 import { html, TemplateResult } from "lit";
 import type ApiClientScreen from "../ApiClient.screen.js";
 import { FilesPage } from "./Files.page.js";
@@ -7,45 +7,7 @@ export class SharedPage extends FilesPage {
   constructor(screen: ApiClientScreen) {
     super(screen);
     this.dt.options.ariaLabel = 'Shared with you';
-  }
-
-  protected override async listFiles(opts: ContextSpaceListOptions): Promise<ContextListResult<IFile>> {
-    return this.screen.bindings.store.shared.list(opts);
-  }
-
-  override handleFileEvent(event: BroadcastEvent): void {
-    const typed = event as BroadcastEvent & BroadcastFileData;
-    if (typed.parent && typed.parent !== this.folder) {
-      return;
-    }
-    // if (typed.alt !== 'meta') {
-    //   return;
-    // }
-    switch (event.operation) {
-      case 'access-granted': this.handleFileAccessGranted(typed as FileAccessBroadcastEvent); break;
-      case 'access-removed': this.handleFileAccessRemoved(typed as FileAccessBroadcastEvent); break;
-      default: super.handleFileEvent(event);
-    }
-  }
-
-  async handleFileAccessGranted(event: FileAccessBroadcastEvent): Promise<void> {
-    const { key } = event;
-    try {
-      const file = await this.screen.bindings.store.files.read(key);
-      const index = this.files.findIndex(i => i.key === key);
-      if (index >= 0) {
-        this.files.splice(index, 1);
-      }
-      this.handleFileCreated(file);
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn(e);
-    }
-  }
-
-  handleFileAccessRemoved(event: FileAccessBroadcastEvent): void {
-    const { key } = event;
-    this.removeFileFromList(key);
+    this.fs.source = 'shared';
   }
 
   override render(): TemplateResult {