@api-client/ui 0.0.12 → 0.0.14

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/Cursor.ts

@@ -12,7 +12,7 @@ export class Cursor {
   async decodeCursor(cursor: string): Promise<IListState> {
     let result: IListState;
     try {
-      const decoded = atob(cursor);
+      const decoded = window.atob(cursor);
       result = JSON.parse(decoded);
     } catch (e) {
       throw new ApiError(`Invalid page cursor.`, 400);
@@ -27,6 +27,6 @@ export class Cursor {
    */
   async encodeCursor(state: object): Promise<string> {
     const str = JSON.stringify(state);
-    return btoa(str);
+    return window.btoa(str);
   }
 }

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

@@ -3,7 +3,7 @@ import { ContextListOptions } from '@api-client/core/build/browser.js';
 import { HttpClientPersistance } from "./HttpClientPersistance.js";
 import { Cursor } from './Cursor.js';
 import { IListState } from './State.js';
-import { HttpClientDB, SpaceStoreNames, StoreName } from './types.js';
+import { HttpClientDB, StoreName } from './types.js';
 import { IdbUrlHistory } from './idb/IdbUrlHistory.js';
 import { IdbWsHistory } from './idb/IdbWsHistory.js';
 import { IdbProjectUi } from './idb/IdbProjectUi.js';
@@ -132,9 +132,7 @@ export class HttpClientIdbDatabase implements HttpClientPersistance {
     const dbResult = await openDB<HttpClientDB>('HttpClient', 1, {
       upgrade: (db) => {
         const stores: StoreName[] = [
-          'UrlHistory', 'WsHistory',
-          'AuthCache', 'Hosts', 'Environments', 
-          'ProjectUi', 
+          'UrlHistory', 'WsHistory', 'ProjectUi', 
         ];
         const names = db.objectStoreNames;
         for (const name of stores) {
@@ -143,7 +141,7 @@ export class HttpClientIdbDatabase implements HttpClientPersistance {
           if (typeof this[fnName] === 'function') {
             this[fnName](db, exists);
           } else if (!exists) {
-            this._defaultUpgradeHandler(name as SpaceStoreNames, db, exists);
+            this._defaultUpgradeHandler(name as StoreName, db, exists);
           }
         }
       },
@@ -157,13 +155,11 @@ export class HttpClientIdbDatabase implements HttpClientPersistance {
    * @param name The store name to create
    * @param db The handler to the database
    */
-  private _defaultUpgradeHandler(name: SpaceStoreNames, db: IDBPDatabase<HttpClientDB>, storeExists: boolean): void {
+  private _defaultUpgradeHandler(name: StoreName, db: IDBPDatabase<HttpClientDB>, storeExists: boolean): void {
     if (storeExists) {
       return;
     }
-    const store = db.createObjectStore(name, { keyPath: 'data.key' });
-    const typed = store as IDBPObjectStore<HttpClientDB, SpaceStoreNames[], SpaceStoreNames, 'versionchange'>;
-    typed.createIndex('space', 'meta.space', { unique: false });
+    db.createObjectStore(name, { keyPath: 'data.key' });
   }
 
   private _UrlHistoryUpgradeHandler(db: IDBPDatabase<HttpClientDB>, storeExists: boolean): void {

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

@@ -1,4 +1,4 @@
-import { ContextSpaceListOptions, HistoryListOptions, IProjectExecutionListOptions } from "@api-client/core/build/browser.js";
+import { ContextSpaceListOptions } from "@api-client/core/build/browser.js";
 
 export interface CursorState {
   /**
@@ -14,7 +14,3 @@ export interface CursorState {
 }
 
 export type IListState = ContextSpaceListOptions & CursorState;
-
-export type HistoryState = HistoryListOptions & CursorState;
-
-export type ProjectRunsState = IProjectExecutionListOptions & CursorState;

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/http-client/store/idb/IdbStore.ts

@@ -1,6 +1,5 @@
 import { IDBPDatabase } from "idb";
-import { HttpClientDB, IStoredEntity, StoreName } from "../types.js";
-import { IListState } from "../State.js";
+import { HttpClientDB } from "../types.js";
 import { HttpClientIdbDatabase } from "../HttpClientIdbDatabase.js";
 
 export abstract class IdbStore {
@@ -24,53 +23,4 @@ export abstract class IdbStore {
   async cleanup(): Promise<void> {
     // 
   }
-
-  /**
-   * Lists entities that uses `IStoredEntity` format.
-   * @param db A reference to the database 
-   * @param storeName The name of the store to query.
-   * @param opts Query options.
-   * @returns The list of listed objects. 
-   */
-  protected async listStoredEntities(db: IDBPDatabase<HttpClientDB>, storeName: StoreName, opts: IListState): Promise<unknown[]> {
-    let adv = opts.skip || 0;
-    const { descending, limit = this.parent.defaultLimit, lastKey, space } = opts;
-    const tx = db.transaction(storeName, 'readonly');
-    const dir = descending === true ? 'prev' : 'next';
-    let keyFound = false;
-    const items: unknown[] = [];
-    for await (const cursor of tx.store.iterate(null, dir)) {
-      const info = cursor.value as IStoredEntity;
-      if (!info.meta || !info.data) {
-        continue;
-      }
-      const { meta, data } = info;
-      if (space && meta.space !== space) {
-        continue;
-      }
-      const { key } = data as { key: string };
-      if (!key) {
-        continue;
-      }
-      if (lastKey && !keyFound) {
-        if (key !== lastKey) {
-          continue;
-        }
-        keyFound = true;
-      }
-      if (adv) {
-        cursor.advance(adv);
-        adv = 0;
-        continue;
-      }
-      if (meta.deleted) {
-        continue;
-      }
-      items.push(data);
-      if (items.length >= limit) {
-        break;
-      }
-    }
-    return items;
-  }
 }

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

@@ -1,52 +1,12 @@
-import { 
-  IAuthorizationData, IEnvironment, IHostRule, 
-  IRequestUiMeta, IUrl,
-} from '@api-client/core/build/browser.js';
+import {  IRequestUiMeta, IUrl } from '@api-client/core/build/browser.js';
 import { DBSchema } from 'idb/with-async-ittr';
 
-export interface IEntityMeta {
-  /**
-   * The space this object belongs to.
-   */
-  space: string;
-  /**
-   * Whether the entity is deleted.
-   */
-  deleted?: boolean;
-  /**
-   * A timestamp when the entity was deleted.
-   * Can be used to cleanup the store after some time.
-   */
-  deleteTime?: number;
-}
-
-export interface IStoredEntity<T = unknown> {
-  meta: IEntityMeta;
-  data: T;
-}
-
-export interface IGetOptions {
-  /**
-   * Whether to return a deleted document.
-   */
-  deleted?: boolean;
-}
-
-export interface IStoredMedia<T = unknown> {
-  key: string;
-  value: T;
-  mime: string;
-  deleted?: boolean;
-}
-
 export interface IStoredRequestUi {
   data: IRequestUiMeta;
   meta: { key: string; project: string; }
 }
 
-export type SpaceStoreNames = 'AuthCache' | 'Hosts' | 'Environments';
-export type GeneralStoreNames = 'UrlHistory' | 'WsHistory' | 'ProjectUi';
-export type StoreName = GeneralStoreNames | SpaceStoreNames;
+export type StoreName = 'UrlHistory' | 'WsHistory' | 'ProjectUi';
 
 export interface HttpClientDB extends DBSchema {
   UrlHistory: {
@@ -57,21 +17,6 @@ export interface HttpClientDB extends DBSchema {
     key: string;
     value: IUrl;
   }
-  AuthCache: {
-    key: string;
-    value: IStoredEntity<IAuthorizationData>;
-    indexes: { 'space': string };
-  }
-  Hosts: {
-    key: string;
-    value: IStoredEntity<IHostRule>;
-    indexes: { 'space': string };
-  }
-  Environments: {
-    key: string;
-    value: IStoredEntity<IEnvironment>;
-    indexes: { 'space': string };
-  }
   ProjectUi: {
     key: string[];
     value: IStoredRequestUi;

package/src/index.ts

@@ -31,6 +31,9 @@ export * from './bindings/base/ProxyBindings.js';
 export * from './bindings/base/SharedWorkerThread.js';
 export * from './bindings/base/StoreBindings.js';
 
+// HTTP Client IDB
+export * from './http-client/store/HttpClientIdbDatabase.js';
+
 // Events
 
 export { Events } from './events/Events.js';

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

@@ -2,23 +2,24 @@
 import { html, TemplateResult, CSSResult, nothing } from 'lit';
 import { BroadcastCreatedEvent, BroadcastEvent, IFile, ISpace, uuidV4 } from '@api-client/core/build/browser.js';
 import { ApplicationInit, ApplicationScreen } from '../ApplicationScreen.js';
-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';
 import { DataTable } from '../../ui/table/DataTable.js';
-import Input from '../../ui/input/Input.js';
 import { FilesPage } from './pages/Files.page.js';
 import { SharedPage } from './pages/Shared.page.js';
 import { TrashPage } from './pages/Trash.page.js';
 import { SettingsPage } from './pages/Settings.page.js';
-import { HttpClientStoreBindings } from '../../bindings/base/HttpClientStoreBindings.js';
+import type { IRoute, IRouteResult } from '../../mixins/RouteMixin.js';
+import type Input from '../../ui/input/Input.js';
+import type { HttpClientStoreBindings } from '../../bindings/base/HttpClientStoreBindings.js';
+import type { NavigationBindings } from '../../bindings/base/NavigationBindings.js';
+import type { FileBindings } from '../../bindings/base/FileBindings.js';
 import { StoreBroadcast } from '../../http-client/store/StoreBroadcast.js';
-import { NavigationBindings } from '../../bindings/base/NavigationBindings.js';
-import { FileBindings } from '../../bindings/base/FileBindings.js';
 import AppInfo from './AppInfo.js';
 import '../../define/ui/ui-button.js';
 import '../../define/app-navigation-item.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];
   }
 
   /**
@@ -193,7 +196,7 @@ export default class ApiClientScreen extends ApplicationScreen {
   protected async createLastSpaceStoreKey(): Promise<string | undefined> {
     try {
       const env = await this.bindings.store.global.get();
-      return `http-client.latest.space.${env.key}`;
+      return `api-client.latest.space.${env.key}`;
     } catch (_) {
       return undefined;
     }
@@ -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;
@@ -535,7 +547,7 @@ export default class ApiClientScreen extends ApplicationScreen {
     const { page, isSingleUser } = this;
     return html`
     <nav aria-label="Main">
-      <h1 class="title-small nav-title">HTTP Client</h1>
+      <h1 class="title-small nav-title">API Client</h1>
       <ol class="nav-list">
         <li>
           <app-navigation-item data-page="files" .selected=${page === 'files'} @click="${this.mainNavHandler}">
@@ -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>