@api-client/ui 0.0.17 → 0.1.0

package/src/apps/activities/CreateFolderDialogActivity.ts

@@ -1,128 +0,0 @@
-import { html, css, type TemplateResult, CSSResult } from 'lit'
-import { ModalActivity } from '../../core/ModalActivity.js'
-import { ActivityState, Intent, IntentResult } from '../../core/ActivityManager.js'
-import state from '../../decorators/state.js'
-import { adaptStatic } from '../../decorators/styles.js'
-import services from '../api_service.js'
-import { CREATE_FOLDER } from '../quick-api/Intents.js'
-
-import '@material/web/progress/circular-progress.js'
-import '@material/web/textfield/outlined-text-field.js'
-
-const dialogStyles = css`
-  .centered {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-`
-
-export default class CreateFolderDialogActivity extends ModalActivity {
-  static override action = CREATE_FOLDER
-
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [dialogStyles]
-  }
-
-  /**
-   * The parent folder we create this folder for.
-   */
-  parentFolder: string | undefined
-
-  /**
-   * A flag set when making API request.
-   */
-  @state() accessor loading = false
-
-  override async onCreate(intent?: Intent): Promise<void> {
-    if (!intent) {
-      // No intent, no dialog.
-      return this.finish()
-    }
-    this.setupIntent(intent)
-    if (this.state === ActivityState.Destroyed) {
-      return
-    }
-    await super.onCreate(intent)
-  }
-
-  override onNewIntent(intent: Intent): void | Promise<void> {
-    if (!intent) {
-      // No intent, no dialog.
-      return this.finish()
-    }
-    super.onNewIntent(intent)
-    this.setupIntent(intent)
-  }
-
-  private setupIntent(intent: Intent): void {
-    const { data } = intent
-    if (!data) {
-      return
-    }
-    const definition = data as { parent?: string }
-    this.parentFolder = definition.parent
-  }
-
-  override handleSubmit(e: SubmitEvent): void {
-    e.preventDefault()
-    const form = e.target as HTMLFormElement
-    const data = new FormData(form)
-    const name = data.get('name') as string
-    if (!name) {
-      return
-    }
-    this.loading = true
-    this.create(name)
-  }
-
-  /**
-   * Updates a name on a file. This includes renaming the contents.
-   * @param file The file object
-   * @param name The new name of the file.
-   */
-  async create(name: string): Promise<void> {
-    const sdk = await services.get('sdk')
-    const org = await services.get('org')
-    const currentOrganization = await org.currentOrganization()
-    if (!currentOrganization) {
-      return
-    }
-    const { parentFolder } = this
-    const result = await sdk.file.createFolder(name, currentOrganization.key, {
-      parent: parentFolder,
-    })
-    this.setResult(IntentResult.RESULT_OK, result)
-    this.finish()
-  }
-
-  override render(): TemplateResult {
-    const { loading = false } = this
-    if (loading) {
-      return this.#renderContent(this.#renderLoader())
-    }
-    return this.#renderContent(this.#renderForm())
-  }
-
-  #renderContent(content: TemplateResult): TemplateResult {
-    return html`${this.renderTitle('Add folder')} ${content} ${this.renderNegativeButton()}
-    ${this.renderPositiveButton({ label: 'Create' })}`
-  }
-
-  #renderForm(): TemplateResult {
-    return this.renderForm(
-      html`<md-outlined-text-field label="Folder name" required name="name"></md-outlined-text-field>`
-    )
-  }
-
-  #renderLoader(): TemplateResult {
-    return html`
-      <div class="rename-dialog centered">
-        <md-circular-progress indeterminate></md-circular-progress>
-        <p>One second...</p>
-      </div>
-    `
-  }
-}

package/src/apps/activities/DeleteDataDomainActivity.ts

@@ -1,150 +0,0 @@
-import { CSSResult, type TemplateResult, html, nothing } from 'lit'
-import { DomainImpactItem, type DomainImpactReport } from '@api-client/core/browser.js'
-import { classMap } from 'lit/directives/class-map.js'
-import { Intent, IntentResult } from '../../core/ActivityManager.js'
-import { DATA_DOMAIN_DELETE } from '../../apps/quick-api/Intents.js'
-import { ModalActivity } from '../../core/ModalActivity.js'
-import MisconfigurationException from '../../exceptions/MisconfigurationException.js'
-import state from '../../decorators/state.js'
-import { adaptStatic } from '../../decorators/styles.js'
-import dialogStyles from './styles/DeleteDataDomain.styles.js'
-import type { MdSwitch } from '@material/web/switch/switch.js'
-
-import '@material/web/list/list.js'
-import '@material/web/list/list-item.js'
-import '@material/web/icon/icon.js'
-import '@material/web/switch/switch.js'
-import '../../md/icons/ui-icon.js'
-
-export interface DeleteDataDomainIntent {
-  report: DomainImpactReport
-}
-
-export default class DeleteDataDomainActivity extends ModalActivity {
-  /**
-   * The action name for this activity.
-   * @static
-   */
-  static override action = DATA_DOMAIN_DELETE
-
-  /**
-   * The currently rendered report.
-   */
-  @state() accessor report: DomainImpactReport | undefined
-
-  /**
-   * The styles for this activity.
-   * @static
-   */
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [dialogStyles]
-  }
-
-  /**
-   * Whether to show only blockers.
-   */
-  @state() accessor blockersOnly = true
-
-  override async onCreate(intent?: Intent): Promise<void> {
-    if (!intent || !intent.data) {
-      // No intent, no dialog.
-      return this.finish()
-    }
-    this.setIntentData(intent.data)
-    await super.onCreate(intent)
-  }
-
-  override onNewIntent(intent: Intent): void | Promise<void> {
-    if (!intent) {
-      // No intent, no dialog.
-      return this.finish()
-    }
-    super.onNewIntent(intent)
-    this.setIntentData(intent.data)
-  }
-
-  /**
-   * Sets the intent data for this activity.
-   * @private
-   * @param input - The intent data.
-   */
-  private setIntentData(input: unknown): void {
-    const typed = input as DeleteDataDomainIntent
-    if (!typed || !typed.report) {
-      return
-    }
-    if (typed.report) {
-      this.report = typed.report
-    } else {
-      throw new MisconfigurationException()
-    }
-  }
-
-  protected override handlePositiveAction(): void {
-    const { report } = this
-    if (report) {
-      const result: DeleteDataDomainIntent = {
-        report,
-      }
-      this.setResult(IntentResult.RESULT_OK, result)
-    }
-    this.finish()
-  }
-
-  protected handleBlockersOnlyChange(e: Event): void {
-    this.blockersOnly = (e.target as MdSwitch).selected
-  }
-
-  override render(): TemplateResult {
-    return html`${this.renderTitle('Confirm Delete')} ${this.renderReport()} ${this.renderNegativeButton()}
-    ${this.renderPositiveButton({ label: 'Confirm' })} `
-  }
-
-  renderReport(): TemplateResult | typeof nothing {
-    const { report } = this
-    if (!report) {
-      return nothing
-    }
-    return html`<div class="report">
-      <p class="body-medium">
-        Deleting this data domain object will affect other related items due to dependencies. The items listed below
-        will be impacted. Are you sure you want to delete this object?
-      </p>
-      ${this.renderBlockersToggle()}
-      <md-list>${this.renderImact(report.impact)}</md-list>
-    </div>`
-  }
-
-  renderImact(items: DomainImpactItem[]): TemplateResult[] {
-    const rendered = this.blockersOnly ? items.filter((item) => item.blocking) : items
-    return rendered.map((item) => {
-      const icon = item.blocking ? 'warning' : 'checkCircle'
-      const classes = {
-        'resilution-item': true,
-        'blocker': !!item.blocking,
-        'non-blocker': !item.blocking,
-      }
-      return html`<md-list-item class="${classMap(classes)}">
-        <ui-icon slot="start" class="icon" icon="${icon}"></ui-icon>
-        <div slot="headline">${item.impact}</div>
-        ${item.resolution ? html`<div slot="supporting-text">${item.resolution}</div>` : nothing}
-      </md-list-item>`
-    })
-  }
-
-  renderBlockersToggle(): TemplateResult {
-    const { blockersOnly } = this
-    return html`<div class="blockers-toggle">
-      <label class="switch-label">
-        <md-switch
-          class="blockers-only"
-          aria-label="Toggle swow blockers only"
-          ?selected="${blockersOnly}"
-          @change="${this.handleBlockersOnlyChange}"
-        ></md-switch>
-        Show blockers only
-      </label>
-    </div> `
-  }
-}

package/src/apps/activities/LoadingActivity.ts

@@ -1,90 +0,0 @@
-import { TemplateResult, html } from 'lit'
-import { Activity } from '../../core/Activity.js'
-import { Intent } from '../../core/ActivityManager.js'
-
-type SupportedTypes = 'init' | 'user-init'
-
-export interface LoaderIntentData {
-  /**
-   * The name of the loader to use.
-   */
-  loader?: SupportedTypes
-  /**
-   * The status message to render.
-   */
-  status?: string
-}
-
-/**
- * An activity that only renders the application loading state.
- */
-export default class LoadingActivity extends Activity {
-  static override action = 'system/loader'
-
-  #loader = 'init'
-
-  #status = 'Initializing the application...'
-
-  override onCreate(intent?: Intent): void | Promise<void> {
-    if (!intent) {
-      return
-    }
-    this.#processIntentData(intent.data)
-  }
-
-  override onNewIntent(intent: Intent): void | Promise<void> {
-    if (!intent) {
-      return
-    }
-    this.#processIntentData(intent.data)
-  }
-
-  #processIntentData(data?: unknown): void {
-    if (!data) {
-      return
-    }
-    const typed = data as LoaderIntentData
-    if (typed.loader) {
-      this.#loader = typed.loader
-      this.requestUpdate({ app: false, fragment: false })
-    }
-  }
-
-  override render(): TemplateResult {
-    const loader = this.#loader as SupportedTypes
-    switch (loader) {
-      case 'init':
-        return this.#renderInit()
-      case 'user-init':
-        return this.#renderUserInit()
-      default:
-        return this.#renderNotFound()
-    }
-  }
-
-  #renderNotFound(): TemplateResult {
-    return html`
-      <div class="app-loader body-large">
-        <p class="message">Loader not found</p>
-      </div>
-    `
-  }
-
-  #renderInit(): TemplateResult {
-    return html`
-      <div class="app-loader body-large">
-        <p class="message">Preparing something spectacular</p>
-        <p class="sub-message">${this.#status}</p>
-      </div>
-    `
-  }
-
-  #renderUserInit(): TemplateResult {
-    return html`
-      <div class="app-loader body-large">
-        <p class="message">Preparing something spectacular</p>
-        <p class="sub-message">Checking for a session....</p>
-      </div>
-    `
-  }
-}

package/src/apps/activities/LoginActivity.ts

@@ -1,193 +0,0 @@
-import { type CSSResult, html, type TemplateResult } from 'lit'
-import ApiActivity from './ApiActivity.js'
-import type { AuthProviders } from '@api-client/core/browser.js'
-import { adaptStatic } from '../../decorators/styles.js'
-import styles from './styles/login.js'
-import { APP_LOGIN } from '../quick-api/Intents.js'
-
-import '@material/web/progress/linear-progress.js'
-import '../../md/button/ui-outlined-button.js'
-
-enum State {
-  Initializing,
-  Login,
-  Loading,
-}
-
-export default class LoginActivity extends ApiActivity {
-  static override action = APP_LOGIN
-
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [styles]
-  }
-
-  #state = State.Initializing
-
-  #popup?: Window
-
-  override async onCreate(): Promise<void> {
-    await super.onCreate()
-    if (this.services.user.isLoggedIn) {
-      // just in case, if the user is logged in we can kill this activity
-      // and return to the previous one.
-      this.finish()
-    } else {
-      this.#state = State.Login
-    }
-    globalThis.addEventListener('message', this.#messageHandler)
-  }
-
-  override onStop(): void | Promise<void> {
-    globalThis.removeEventListener('message', this.#messageHandler)
-  }
-
-  #messageHandler = this.handleWindowMessage.bind(this)
-
-  handleWindowMessage(event: MessageEvent): void {
-    if (event.source !== this.#popup) {
-      return
-    }
-    const info = event.data as { cmd: string; data?: string }
-    if (info.cmd !== 'callback') {
-      return
-    }
-    try {
-      this.#popup?.close()
-    } catch {
-      // ...
-    }
-    this.#popup = undefined
-    this.finish()
-  }
-
-  prepareOauthRedirect(): URL {
-    const url = new URL('./auth-callback.html', window.location.href)
-    return url
-  }
-
-  authenticateGoogle(): void {
-    const url = this.prepareOauthRedirect()
-    this.startAuth('google', url)
-  }
-
-  authenticateGithub(): void {
-    const url = this.prepareOauthRedirect()
-    this.startAuth('github', url)
-  }
-
-  authenticateLinkedin(): void {
-    const url = this.prepareOauthRedirect()
-    this.startAuth('linkedin', url)
-  }
-
-  async startAuth(provider: AuthProviders, url: URL): Promise<void> {
-    this.#popup = this.services.sdk.auth.oauthRedirect(provider, { redirect: url.toString(), type: 'tab' }) as Window
-  }
-
-  override render(): TemplateResult {
-    return html`
-      <main class="body-medium">
-        <div class="content">
-          <div class="slide login-slide">${this.renderInto()} ${this.renderLoginForm()}</div>
-        </div>
-      </main>
-    `
-  }
-
-  private renderInto(): TemplateResult {
-    return html` <div class="intro">
-      <h1 class="display-medium">Welcome to Quick API</h1>
-      <p class="title-large">Sign in to your account.</p>
-    </div>`
-  }
-
-  private renderLoginForm(): TemplateResult {
-    if (this.#state === State.Loading) {
-      return this.renderCheckingUser()
-    }
-    return html` <div class="login">
-      <p class="body-large">Sign up using</p>
-      <div class="login-option">${this.renderGoogleButton()}</div>
-      <div class="login-option">${this.renderGithubButton()}</div>
-      <div class="login-option">${this.renderLinkedinButton()}</div>
-    </div>`
-  }
-
-  private renderCheckingUser(): TemplateResult {
-    return html` <div class="login">
-      <p class="body-large">Loading...</p>
-      <md-linear-progress indeterminate class="login-progress"></md-linear-progress>
-    </div>`
-  }
-
-  private renderGoogleButton(): TemplateResult {
-    return html`
-      <ui-outlined-button @click="${this.authenticateGoogle}">
-        <svg
-          slot="icon"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 48 48"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          style="display: block;"
-        >
-          <path
-            fill="#EA4335"
-            d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-          ></path>
-          <path
-            fill="#4285F4"
-            d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-          ></path>
-          <path
-            fill="#FBBC05"
-            d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-          ></path>
-          <path
-            fill="#34A853"
-            d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-          ></path>
-          <path fill="none" d="M0 0h48v48H0z"></path>
-        </svg>
-        Google
-      </ui-outlined-button>
-    `
-  }
-
-  private renderGithubButton(): TemplateResult {
-    return html`
-      <ui-outlined-button @click="${this.authenticateGithub}">
-        <svg slot="icon" viewBox="0 0 98 98" xmlns="http://www.w3.org/2000/svg">
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-            fill="#24292f"
-          />
-        </svg>
-        Github
-      </ui-outlined-button>
-    `
-  }
-
-  private renderLinkedinButton(): TemplateResult {
-    return html`
-      <ui-outlined-button @click="${this.authenticateLinkedin}">
-        <svg slot="icon" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fill-rule="evenodd">
-            <path
-              d="M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z"
-              fill="#007EBB"
-            />
-            <path
-              d="M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z"
-              fill="#FFF"
-            />
-          </g>
-        </svg>
-        LinkedIn
-      </ui-outlined-button>
-    `
-  }
-}

package/src/apps/activities/OrganizationSelectionActivity.ts

@@ -1,102 +0,0 @@
-import { html, type TemplateResult, type CSSResult } from 'lit'
-import ApiActivity from './ApiActivity.js'
-import { adaptStatic } from '../../decorators/styles.js'
-import { DialogBuilder } from '../../builders/DialogBuilder.js'
-import type { IOrganization } from '@api-client/core/browser.js'
-import styles from './styles/login.js'
-import state from '../../decorators/state.js'
-import { CurrentOrganizationKey } from '../../lib/StoreKeys.js'
-
-import '@material/web/progress/linear-progress.js'
-import '@material/web/select/outlined-select.js'
-import '@material/web/select/select-option.js'
-import '../../md/button/ui-filled-button.js'
-
-enum SetupStep {
-  Initializing,
-  Selection,
-  Loading,
-}
-
-export default class OrganizationSelectionActivity extends ApiActivity {
-  static override action = 'app/select-organization'
-
-  /**
-   * Currently rendered error dialog.
-   */
-  errorDialog?: DialogBuilder
-
-  @state({ app: false }) accessor step = SetupStep.Initializing
-  organizations?: IOrganization[]
-
-  @adaptStatic
-  static get styles(): CSSResult[] {
-    return [styles]
-  }
-
-  protected async handleOrgSelection(e: SubmitEvent): Promise<void> {
-    e.preventDefault()
-    const form = e.target as HTMLFormElement
-    const organization = String(form.org.value).trim()
-    if (!organization) {
-      return
-    }
-    this.selectOrganization(organization)
-  }
-
-  /**
-   * Selects the organization and persists the state.
-   * @param organization The organization key to select
-   */
-  async selectOrganization(organization: string): Promise<void> {
-    this.step = SetupStep.Loading
-    await this.services.config.local.set(CurrentOrganizationKey, organization)
-    this.finish()
-  }
-
-  override async onStart(): Promise<void> {
-    this.organizations = this.services.org.organizations
-    super.onStart()
-  }
-
-  override render(): TemplateResult {
-    return html`
-      <main class="body-medium">
-        <div class="content">
-          <div class="slide account-setup-slide">
-            <h1 class="display-medium">Select your organization.</h1>
-            ${this.step === SetupStep.Loading ? this.renderLoader() : this.renderForm()}
-          </div>
-        </div>
-      </main>
-    `
-  }
-
-  renderForm(): TemplateResult {
-    const { organizations = [] } = this
-    return html`
-      <form class="organization-selector" @submit=${this.handleOrgSelection}>
-        <md-outlined-select name="org" required>
-          ${organizations.map(
-            (i) => html`
-              <md-select-option value="${i.key}">
-                <div slot="headline">${i.name}</div>
-              </md-select-option>
-            `
-          )}
-        </md-outlined-select>
-        <ui-filled-button type="submit">Continue</ui-filled-button>
-      </form>
-    `
-  }
-
-  renderLoader(): TemplateResult {
-    return html`
-      <md-linear-progress
-        indeterminate
-        class="login-progress"
-        aria-label="Setting up organization"
-      ></md-linear-progress>
-    `
-  }
-}