@api-client/ui 0.0.11 → 0.0.13

package/src/http-client/idb/Arc18DataUpgrade.ts

@@ -1,14 +1,14 @@
 /* eslint-disable class-methods-use-this */
 import 'pouchdb/dist/pouchdb.js';
-import { get, set } from 'idb-keyval';
-import { IAuthorizationData, IHostRule, HostRuleKind, } from '@api-client/core/build/browser.js'; // Certificate, HttpProject
-import { ARCAuthData, HostRule as LegacyHostRule } from '@api-client/core/build/legacy.js'; // Normalizer, ARCProject, ARCSavedRequest, ARCCertificateIndex, ARCRequestCertificate,
+import { get } from 'idb-keyval';
+// import { IAuthorizationData, IHostRule, HostRuleKind, } from '@api-client/core/build/browser.js'; // Certificate, HttpProject
+// import { ARCAuthData, HostRule as LegacyHostRule } from '@api-client/core/build/legacy.js'; // Normalizer, ARCProject, ARCSavedRequest, ARCCertificateIndex, ARCRequestCertificate,
 // import { LegacyBodyProcessor } from './LegacyBodyProcessor.js';
 // import { HistoryModel } from './HistoryModel.js';
 // import { ProjectModel } from './ProjectModel.js';
-import { AuthDataModel } from './AuthDataModel.js';
+// import { AuthDataModel } from './AuthDataModel.js';
 // import { CertificateModel } from './CertificateModel.js';
-import { HostsModel } from './HostsModel.js';
+// import { HostsModel } from './HostsModel.js';
 
 const upgradeKey = 'CHL5v3fUMx';
 
@@ -27,38 +27,38 @@ export default class Arc18DataUpgrade {
   }
 
   static async runIfNeeded(): Promise<void> {
-    const needed = await Arc18DataUpgrade.needsUpgrade();
-    if (!needed) {
-      return undefined;
-    }
-    const instance = new Arc18DataUpgrade();
-    return instance.run();
+    // const needed = await Arc18DataUpgrade.needsUpgrade();
+    // if (!needed) {
+    //   return undefined;
+    // }
+    // const instance = new Arc18DataUpgrade();
+    // return instance.run();
   }
 
-  /**
-   * Sets a flag sealing the upgrade. Next call to the `run()` will result with no operation.
-   */
-  async seal(): Promise<void> {
-    await set(upgradeKey, true);
-  }
+  // /**
+  //  * Sets a flag sealing the upgrade. Next call to the `run()` will result with no operation.
+  //  */
+  // async seal(): Promise<void> {
+  //   await set(upgradeKey, true);
+  // }
 
-  async run(): Promise<void> {
-    await this.upgradeHistory();
-    // await this.upgradeProjects();
-    // await this.upgradeSaved();
-    await this.upgradeAuthData();
-    // await this.upgradeCertificates();
-    await this.hostRules();
+  // async run(): Promise<void> {
+  //   await this.upgradeHistory();
+  //   await this.upgradeProjects();
+  //   await this.upgradeSaved();
+  //   await this.upgradeAuthData();
+  //   await this.upgradeCertificates();
+  //   await this.hostRules();
 
-    await this.seal();
-  }
+  //   await this.seal();
+  // }
 
-  async upgradeHistory(): Promise<void> {
-    const sourceDb = new PouchDB('history-requests');
-    await sourceDb.compact();
-    // const targetDb = new HistoryModel();
-    // await this._upgradeHistoryPage(sourceDb, targetDb);
-  }
+  // async upgradeHistory(): Promise<void> {
+  //   const sourceDb = new PouchDB('history-requests');
+  //   await sourceDb.compact();
+  //   const targetDb = new HistoryModel();
+  //   await this._upgradeHistoryPage(sourceDb, targetDb);
+  // }
 
   // async upgradeProjects(): Promise<void> {
   //   const projectsDb = new PouchDB<ARCProject>('legacy-projects');
@@ -128,32 +128,32 @@ export default class Arc18DataUpgrade {
   //   await targetDb.put(project.toJSON());
   // }
 
-  async upgradeAuthData(): Promise<void> {
-    const src = new PouchDB<ARCAuthData>('auth-data');
-    const response = await src.allDocs({ include_docs: true });
-    const items: IAuthorizationData[] = [];
-    response.rows.forEach(item => {
-      const { doc } = item;
-      if (!doc) {
-        return;
-      }
-      const transformed: IAuthorizationData = {
-        key: doc._id,
-      };
-      if (doc.domain) {
-        transformed.domain = doc.domain;
-      }
-      if (doc.password) {
-        transformed.password = doc.password;
-      }
-      if (doc.password) {
-        transformed.password = doc.password;
-      }
-      items.push(transformed);
-    });
-    const model = new AuthDataModel();
-    await model.putBulk(items);
-  }
+  // async upgradeAuthData(): Promise<void> {
+  //   const src = new PouchDB<ARCAuthData>('auth-data');
+  //   const response = await src.allDocs({ include_docs: true });
+  //   const items: IAuthorizationData[] = [];
+  //   response.rows.forEach(item => {
+  //     const { doc } = item;
+  //     if (!doc) {
+  //       return;
+  //     }
+  //     const transformed: IAuthorizationData = {
+  //       key: doc._id,
+  //     };
+  //     if (doc.domain) {
+  //       transformed.domain = doc.domain;
+  //     }
+  //     if (doc.password) {
+  //       transformed.password = doc.password;
+  //     }
+  //     if (doc.password) {
+  //       transformed.password = doc.password;
+  //     }
+  //     items.push(transformed);
+  //   });
+  //   const model = new AuthDataModel();
+  //   await model.putBulk(items);
+  // }
 
   // protected async _upgradeHistoryPage(sourceDb: PouchDB.Database, targetDb: HistoryModel, lastKey?: string): Promise<void> {
   //   const opts: PouchDB.Core.AllDocsOptions | PouchDB.Core.AllDocsWithinRangeOptions = {
@@ -216,30 +216,30 @@ export default class Arc18DataUpgrade {
   //   await model.putBulk(upgrades);
   // }
 
-  async hostRules(): Promise<void> {
-    const srcDb = new PouchDB<LegacyHostRule>('host-rules');
-    const response = await srcDb.allDocs({ include_docs: true });
-    const items: IHostRule[] = [];
-    response.rows.forEach(item => {
-      const { doc } = item;
-      if (!doc) {
-        return;
-      }
-      const transformed: IHostRule = {
-        kind: HostRuleKind,
-        from: doc.from,
-        to: doc.to,
-        key: doc._id,
-      };
-      if (doc.comment) {
-        transformed.comment = doc.comment;
-      }
-      if (typeof doc.enabled === 'boolean') {
-        transformed.enabled = doc.enabled;
-      }
-      items.push(transformed);
-    });
-    const model = new HostsModel();
-    await model.putBulk(items);
-  }
+  // async hostRules(): Promise<void> {
+  //   const srcDb = new PouchDB<LegacyHostRule>('host-rules');
+  //   const response = await srcDb.allDocs({ include_docs: true });
+  //   const items: IHostRule[] = [];
+  //   response.rows.forEach(item => {
+  //     const { doc } = item;
+  //     if (!doc) {
+  //       return;
+  //     }
+  //     const transformed: IHostRule = {
+  //       kind: HostRuleKind,
+  //       from: doc.from,
+  //       to: doc.to,
+  //       key: doc._id,
+  //     };
+  //     if (doc.comment) {
+  //       transformed.comment = doc.comment;
+  //     }
+  //     if (typeof doc.enabled === 'boolean') {
+  //       transformed.enabled = doc.enabled;
+  //     }
+  //     items.push(transformed);
+  //   });
+  //   const model = new HostsModel();
+  //   await model.putBulk(items);
+  // }
 }

package/src/http-client/store/StoreBroadcast.ts

@@ -55,14 +55,6 @@ export class StoreBroadcast {
     return '/store/history/ws';
   }
 
-  /**
-   * The path used to construct a `BroadcastChannel` (or similar) 
-   * to communicate changes between contexts for the Certificates store.
-   */
-  static get certificates(): string {
-    return '/store/certificates';
-  }
-
   /**
    * The path used to construct a `BroadcastChannel` (or similar) 
    * to communicate changes between contexts for the History store.

package/src/lib/files/FileUtils.ts

@@ -0,0 +1,12 @@
+export class FileUtils {
+  /**
+   * Reads the last segment of the file path and returns it as a file name.
+   * 
+   * @param path THe file path.
+   */
+  static getFileName(path: string): string {
+    const delimiter = path.includes('/') ? '/' : '\\';
+    const last = path.split(delimiter).pop();
+    return last || '';
+  }
+}

package/src/mixins/RouteMixin.ts

@@ -101,6 +101,11 @@ export declare class RouteMixinInterface {
    */
   static get routes(): IRoute[];
 
+  /**
+   * The current route parameters. This is the same what is passed to the route handler.
+   */
+  protected currentRoute?: IRouteResult;
+
   /**
    * Initializes the routing.
    */
@@ -119,6 +124,8 @@ export function RouteMixin<T extends Constructor<Object>>(superClass: T): Constr
       return []
     }
 
+    protected currentRoute?: IRouteResult;
+
     constructor(...args: any[]) {
       super(...args);
       this._routeHandler = this._routeHandler.bind(this);
@@ -159,7 +166,7 @@ export function RouteMixin<T extends Constructor<Object>>(superClass: T): Constr
           argument.params = params;
         }
       }
-
+      this.currentRoute = argument;
       this._callRoute(activeRoute, argument);
       if (activeRoute.title) {
         document.title = activeRoute.title;

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

@@ -6,6 +6,7 @@ import { IRoute, IRouteResult } from '../../mixins/RouteMixin.js';
 import pageStyles from './ApiClient.styles.js';
 import globalStyles from '../../styles/global-styles.js';
 import typography from '../../styles/m3/typography.module.js';
+import surface from '../../styles/m3/surface.module.js';
 import dialogStyles from '../../styles/m3/dialog.module.js';
 import { navigate } from '../../lib/route.js';
 import { reactive } from '../../lib/decorators.js';
@@ -27,6 +28,7 @@ import '../../define/ui/ui-icon-button.js';
 import '../../define/ui/ui-text-field.js';
 import '../../define/ui/ui-dropdown-list.js';
 import '../../define/ui/ui-divider.js';
+import '../../define/http/certificate-add.js';
 
 export interface PageInit extends ApplicationInit {
   idb: HttpClientStoreBindings;
@@ -48,11 +50,12 @@ export default class ApiClientScreen extends ApplicationScreen {
       { pattern: '/shared/(?<key>.*)', method: 'sharedRoute', name: 'Shares', title: 'Shared with you' },
       { pattern: '/trash', method: 'trashRoute', name: 'Trash', title: 'Trash' },
       { pattern: '/settings', method: 'settingsRoute', name: 'Settings', title: 'Settings' },
+      { pattern: '/certificates/add/?(?<parent>.*)', method: 'addCertRoute', name: 'Add certificate', title: 'Add certificate' },
     ];
   }
 
   static get styles(): CSSResult[] {
-    return [globalStyles, pageStyles, typography, dialogStyles, DataTable.styles];
+    return [globalStyles, pageStyles, typography, dialogStyles, DataTable.styles, surface];
   }
 
   /**
@@ -99,8 +102,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 +137,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 +146,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 +249,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 +279,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 +331,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 +345,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();
     }
   }
 
@@ -380,6 +368,15 @@ export default class ApiClientScreen extends ApplicationScreen {
     this.page = 'settings';
   }
 
+  protected addCertRoute(): void {
+    this.resetRoute();
+    this.page = 'add-cert';
+  }
+
+  protected handleCertificateClose(): void {
+    window.history.back();
+  }
+
   protected mainNavHandler(e: Event): void {
     const target = e.target as HTMLElement;
     const { page } = target.dataset;
@@ -637,7 +634,7 @@ export default class ApiClientScreen extends ApplicationScreen {
   protected override mainTemplate(): TemplateResult {
     return html`
     <main class="body-medium">
-      <div class="content">
+      <div class="content surface1">
         ${this.renderPage()}
       </div>
     </main>
@@ -653,6 +650,7 @@ export default class ApiClientScreen extends ApplicationScreen {
       case 'shared': return this.shared.render();
       case 'trash': return this.trash.render();
       case 'settings': return this.settings.render();
+      case 'add-cert': return this.renderAddCertificate();
       default: return this.render404();
     }
   }
@@ -739,4 +737,15 @@ export default class ApiClientScreen extends ApplicationScreen {
     </dialog>
     `;
   }
+
+  protected renderAddCertificate(): TemplateResult {
+    const { currentRoute, currentSpace } = this;
+    const parent = currentRoute && currentRoute.params && currentRoute.params.parent as string | undefined;
+    const space = currentSpace && currentSpace.key;
+    return html`
+    <h2 class="headline-small">Add Certificate</h2>
+    <p class="body-medium">Import a certificate to use it in your HTTP projects. Note, imported certificate cannot be changed.</p>
+    <certificate-add .folder="${parent}" .space="${space}" @close="${this.handleCertificateClose}"></certificate-add>
+    `;
+  }
 }

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

@@ -174,8 +174,6 @@ main {
 
 main .content {
   padding: 20px;
-  position: relative;
-  z-index: 0;
   border-radius: inherit;
 
   flex: 1;
@@ -184,16 +182,6 @@ main .content {
 
   overflow: hidden;
 }
-
-main .content::before {
-  content: '';
-  background-color: var(--md-sys-color-primary);
-  opacity: .05;
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-}
-
 main .content > * {
   position: relative;
   z-index: 1;

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>
     `;