@api-client/ui 0.0.12 → 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/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];
   }
 
   /**
@@ -365,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;
@@ -622,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>
@@ -638,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();
     }
   }
@@ -724,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/pages/Files.page.ts

@@ -241,6 +241,13 @@ export class FilesPage {
       this.screen.openDialog('createProjectDialog');
     } else if (option === 'schema') {
       this.screen.openDialog('createSchemaDialog');
+    } else if (option === 'certificate') {
+      const { parent } = this.fs;
+      if (parent) {
+        navigate('certificates', 'add', parent);
+      } else {
+        navigate('certificates', 'add');
+      }
     }
   }
 
@@ -573,6 +580,10 @@ export class FilesPage {
           <ui-icon icon="schema" slot="start"></ui-icon>
           Data schema
         </ui-list-item>
+        <ui-list-item image="icon" data-option="certificate" role="menuitem">
+          <ui-icon icon="certificate" slot="start"></ui-icon>
+          Certificate
+        </ui-list-item>
         <ui-divider></ui-divider>
         <ui-list-item image="icon" data-option="folder" role="menuitem">
           <ui-icon icon="folder" slot="start"></ui-icon>

package/src/ui/button/SegmentedButtonsSet.ts

@@ -3,6 +3,21 @@ import { property, queryAssignedElements } from "lit/decorators.js";
 import { UiElement } from "../UiElement.js";
 import SegmentedButton from "./SegmentedButton.js";
 
+export interface ISegmentedButtonSelectionDetail {
+  /**
+   * A reference to the selected button.
+   */
+  button: SegmentedButton;
+  /**
+   * Whether the button is selected.
+   */
+  selected: boolean;
+  /**
+   * The index of the selected button.
+   */
+  index: number;
+}
+
 /**
  * @fires select - When button's selection change.
  */
@@ -80,7 +95,7 @@ export default class SegmentedButtonsSet extends UiElement {
   }
 
   private dispatchSelected(index: number): void {
-    this.dispatchEvent(new CustomEvent('select', {
+    this.dispatchEvent(new CustomEvent<ISegmentedButtonSelectionDetail>('select', {
       detail: {
         button: this.buttons[index],
         selected: this.buttons[index].selected,

package/src/ui/notification/SnackNotifications.ts

@@ -199,4 +199,12 @@ export class SnackNotifications {
       }
     }
   }
+
+  static clear(): void {
+    this.stack = [];
+    if (this.current) {
+      this.current.element.parentElement?.removeChild(this.current.element);
+      this.current = undefined;
+    }
+  }
 }