@cardstack/boxel-cli 0.2.0-unstable.448 → 0.3.0-unstable.13

package/bundled-types/host-app/components/operator-mode/syntax-error-display.gts

@@ -0,0 +1,72 @@
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import type { CardError } from '@cardstack/runtime-common';
+
+import type MatrixService from '@cardstack/host/services/matrix-service';
+import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
+
+import ErrorDisplay from './error-display';
+
+interface Signature {
+  Element: HTMLElement;
+  Args: {
+    syntaxErrors: string;
+  };
+}
+
+export default class SyntaxErrorDisplay extends Component<Signature> {
+  @service declare private operatorModeStateService: OperatorModeStateService;
+  @service declare private matrixService: MatrixService;
+
+  get stack() {
+    let maybeCardError = this.removeSourceMappingURL(this.args.syntaxErrors);
+    let json: CardError | undefined;
+    try {
+      json = JSON.parse(maybeCardError);
+    } catch (e) {
+      return maybeCardError;
+    }
+    delete json!.deps; // definitely json exists at this point
+    const stackDepth = 15;
+    // prevent super deep stacks
+    return (json!.stack ?? JSON.stringify(json, null, 2))
+      .split('\n')
+      .slice(0, stackDepth)
+      .join('\n');
+  }
+
+  removeSourceMappingURL(syntaxErrors: string): string {
+    return syntaxErrors.replace(/\/\/# sourceMappingURL=.*/g, '');
+  }
+
+  private get fileToAttach() {
+    let codePath = this.operatorModeStateService.state.codePath?.href;
+    if (!codePath) return undefined;
+
+    return this.matrixService.fileAPI.createFileDef({
+      sourceUrl: codePath,
+      name: codePath.split('/').pop(),
+    });
+  }
+
+  <template>
+    <div class='syntax-error-container' data-test-syntax-error>
+      <ErrorDisplay
+        @type='syntax'
+        @stack={{this.stack}}
+        @fileToAttach={{this.fileToAttach}}
+        @openDetails={{true}}
+      />
+    </div>
+
+    <style scoped>
+      .syntax-error-container {
+        background: var(--boxel-100);
+        padding: var(--boxel-sp);
+        border-radius: var(--boxel-radius);
+        height: 100%;
+      }
+    </style>
+  </template>
+}

package/bundled-types/host-app/components/operator-mode/workspace-chooser/add-workspace.gts

@@ -0,0 +1,282 @@
+import { hash } from '@ember/helper';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+
+import { tracked } from '@glimmer/tracking';
+
+import { task } from 'ember-concurrency';
+import perform from 'ember-concurrency/helpers/perform';
+import ToElsewhere from 'ember-elsewhere/components/to-elsewhere';
+import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
+
+import onKeyMod from 'ember-keyboard/modifiers/on-key';
+
+import {
+  BoxelInput,
+  Button,
+  FieldContainer,
+  LoadingIndicator,
+} from '@cardstack/boxel-ui/components';
+import { IconPlus } from '@cardstack/boxel-ui/icons';
+
+import type MatrixService from '@cardstack/host/services/matrix-service';
+
+import { generateRandomWorkspaceName } from '../../../lib/random-name';
+import {
+  getRandomBackgroundURL,
+  iconURLFor,
+  cleanseString,
+} from '../../../lib/utils';
+
+import ModalContainer from '../../modal-container';
+
+import ItemContainer from './item-container';
+
+interface AddWorkspaceModalSignature {
+  Element: HTMLDivElement;
+  Args: {
+    displayName: string;
+    endpoint: string;
+    setDisplayName: (value: string) => void;
+    setEndpoint: (value: string) => void;
+    createWorkspaceTask?: ReturnType<typeof task>;
+    error: string | null;
+    onClose: () => void;
+  };
+}
+
+class AddWorkspaceModal extends Component<AddWorkspaceModalSignature> {
+  private get isCreateWorkspaceButtonDisabled() {
+    return !this.args.endpoint || !this.args.displayName;
+  }
+  <template>
+    <ModalContainer
+      @title='Add Workspace'
+      @size='medium'
+      @isOpen={{true}}
+      @onClose={{@onClose}}
+      @cardContainerClass='create-workspace'
+      class='create-workspace-modal'
+      {{focusTrap
+        isActive=@createWorkspaceTask.isIdle
+        focusTrapOptions=(hash
+          initialFocus='.create-workspace-modal input' allowOutsideClick=true
+        )
+      }}
+      data-test-create-workspace-modal
+    >
+      <:content>
+        {{#if @createWorkspaceTask.isRunning}}
+          <div class='spinner-container'>
+            <div class='spinner-inner-container'>
+              <LoadingIndicator class='spinner' />
+              <div>
+                Creating workspace...
+              </div>
+            </div>
+          </div>
+        {{else}}
+          <FieldContainer @label='Display Name' @tag='label' class='field'>
+            <BoxelInput
+              data-test-display-name-field
+              placeholder='Workspace Display Name'
+              @value={{@displayName}}
+              @onInput={{@setDisplayName}}
+              @helperText='This is how your workspace will appear in the UI.'
+            />
+          </FieldContainer>
+          <FieldContainer
+            @label='Workspace Endpoint'
+            @tag='label'
+            class='field'
+          >
+            <BoxelInput
+              data-test-endpoint-field
+              placeholder='Workspace Endpoint'
+              @value={{@endpoint}}
+              @onInput={{@setEndpoint}}
+              @helperText='The endpoint is the unique identifier for your workspace. Use letters, numbers, and hyphens only.'
+            />
+          </FieldContainer>
+        {{/if}}
+        {{#if @error}}
+          <div class='error-message' data-test-error-message>
+            {{@error}}
+          </div>
+        {{/if}}
+      </:content>
+      <:footer>
+        {{#unless @createWorkspaceTask.isRunning}}
+          <div class='footer-buttons'>
+            <Button
+              {{on 'click' @onClose}}
+              {{onKeyMod 'Escape'}}
+              @size='tall'
+              data-test-cancel-create-workspace
+            >
+              Cancel
+            </Button>
+            <Button
+              @kind='primary'
+              @size='tall'
+              @loading={{@createWorkspaceTask.isRunning}}
+              @disabled={{this.isCreateWorkspaceButtonDisabled}}
+              {{on 'click' (perform @createWorkspaceTask)}}
+              {{onKeyMod 'Enter'}}
+              data-test-create-workspace-submit
+            >
+              Create
+            </Button>
+          </div>
+        {{/unless}}
+      </:footer>
+    </ModalContainer>
+    <style scoped>
+      .create-workspace-modal > :deep(.boxel-modal__inner) {
+        display: flex;
+      }
+      :deep(.create-workspace) {
+        height: 28rem;
+      }
+      .boxel-field + .boxel-field {
+        margin-top: var(--boxel-sp);
+      }
+      .field {
+        --boxel-field-label-size: 8rem;
+        padding-right: 0;
+      }
+      .footer-buttons {
+        display: flex;
+        margin-left: auto;
+        gap: var(--boxel-sp-xxs);
+      }
+      .error-message {
+        color: var(--boxel-error-100);
+        margin-top: var(--boxel-sp-lg);
+      }
+      .spinner-container {
+        align-items: center;
+        display: flex;
+        height: 12rem;
+        justify-content: center;
+      }
+      .spinner-inner-container {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        justify-content: center;
+        text-align: center;
+      }
+      .spinner {
+        --boxel-loading-indicator-size: 2.5rem;
+      }
+    </style>
+  </template>
+}
+
+interface Signature {
+  Element: HTMLButtonElement;
+}
+
+export default class AddWorkspace extends Component<Signature> {
+  @service declare private matrixService: MatrixService;
+  @tracked private isModalOpen: boolean = false;
+  @tracked private endpoint = '';
+  @tracked private displayName = '';
+  @tracked private hasUserEditedEndpoint = false;
+  @tracked private error: string | null = null;
+  private setEndpoint = (value: string) => {
+    this.hasUserEditedEndpoint = true;
+    this.endpoint = value;
+  };
+  private setDisplayName = (value: string) => {
+    this.displayName = value;
+    // if the user starts typing in the endpoint field, then stop helping them
+    if (!this.hasUserEditedEndpoint) {
+      this.endpoint = cleanseString(value);
+    }
+  };
+  private closeModal = () => {
+    this.isModalOpen = false;
+  };
+  private initializeSuggestedName() {
+    this.hasUserEditedEndpoint = false;
+    this.setDisplayName(generateRandomWorkspaceName());
+  }
+  private createWorkspaceTask = task(async () => {
+    this.error = null;
+    try {
+      await this.matrixService.createPersonalRealmForUser({
+        endpoint: this.endpoint,
+        name: this.displayName,
+        iconURL: iconURLFor(this.displayName),
+        backgroundURL: getRandomBackgroundURL(),
+      });
+      this.closeModal();
+    } catch (e: any) {
+      this.error = e.message;
+    }
+  });
+  private setIsModalOpen = (value: boolean) => {
+    this.isModalOpen = value;
+    if (value) {
+      this.error = null;
+      this.initializeSuggestedName();
+    }
+  };
+  <template>
+    <ItemContainer
+      {{on 'click' (fn this.setIsModalOpen true)}}
+      class='container'
+      title='Create a New Workspace'
+      data-test-add-workspace
+    >
+      <div class='content'>
+        <IconPlus width='32px' height='32px' role='presentation' class='icon' />
+        <br />
+        New Workspace
+      </div>
+    </ItemContainer>
+    {{#if this.isModalOpen}}
+      <ToElsewhere
+        @named='modal-elsewhere'
+        @send={{component
+          AddWorkspaceModal
+          displayName=this.displayName
+          endpoint=this.endpoint
+          setDisplayName=this.setDisplayName
+          setEndpoint=this.setEndpoint
+          createWorkspaceTask=this.createWorkspaceTask
+          error=this.error
+          onClose=(fn this.setIsModalOpen false)
+        }}
+        }}
+      />
+    {{/if}}
+    <style scoped>
+      .container {
+        border-style: none;
+        background: transparent;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .icon {
+        --icon-color: var(--boxel-highlight);
+      }
+      .icon :deep(path) {
+        stroke: none;
+      }
+      .content {
+        color: var(--boxel-light);
+        text-align: center;
+      }
+      .content .icon {
+        color: var(--boxel-highlight);
+      }
+    </style>
+  </template>
+}

package/bundled-types/host-app/components/operator-mode/workspace-chooser/index.gts

@@ -0,0 +1,299 @@
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import Home from '@cardstack/boxel-icons/home';
+import Shapes from '@cardstack/boxel-icons/shapes';
+
+import { BoxelSelect } from '@cardstack/boxel-ui/components';
+import { IconGlobe, Lock, StarFilled } from '@cardstack/boxel-ui/icons';
+import type { Icon } from '@cardstack/boxel-ui/icons';
+
+import config from '@cardstack/host/config/environment';
+import type MatrixService from '@cardstack/host/services/matrix-service';
+import type RealmService from '@cardstack/host/services/realm';
+import type RealmServerService from '@cardstack/host/services/realm-server';
+
+import AddWorkspace from './add-workspace';
+import Workspace from './workspace';
+import WorkspaceLoadingIndicator from './workspace-loading-indicator';
+
+interface SortOption {
+  label: string;
+  icon: Icon;
+  value: 'default' | 'hosted-only';
+}
+
+interface Signature {
+  Element: HTMLDivElement;
+  Args: {
+    topBarCenterElement: Element | null;
+  };
+}
+
+export default class WorkspaceChooser extends Component<Signature> {
+  @service declare matrixService: MatrixService;
+  @service declare realmServer: RealmServerService;
+  @service declare realm: RealmService;
+
+  private sortOptions: SortOption[] = [
+    { label: 'View All', icon: Shapes, value: 'default' },
+    { label: 'Hosted Only', icon: Home, value: 'hosted-only' },
+  ];
+
+  @tracked private selectedSortOption: SortOption = this.sortOptions[0]!;
+
+  @action private onSortChange(option: SortOption) {
+    this.selectedSortOption = option;
+  }
+
+  private get sortOrder(): 'default' | 'hosted-only' {
+    return this.selectedSortOption.value;
+  }
+
+  private get displayCatalogWorkspaces() {
+    return (
+      this.realmServer.displayedCatalogRealmURLs &&
+      this.realmServer.displayedCatalogRealmURLs.length > 0
+    );
+  }
+
+  private get communityRealmURLs() {
+    let realmURLs = this.realmServer.displayedCatalogRealmURLs ?? [];
+    if (config.environment !== 'production') {
+      return realmURLs;
+    }
+    return realmURLs.filter(
+      (realmURL) => !realmURL.includes('/boxel-homepage/'),
+    );
+  }
+
+  private isHosted = (url: string): boolean => {
+    let info = this.realm.info(url);
+    return !!(
+      info.lastPublishedAt &&
+      typeof info.lastPublishedAt === 'object' &&
+      Object.keys(info.lastPublishedAt).length > 0
+    );
+  };
+
+  private filterByHosted(urls: string[]): string[] {
+    if (this.sortOrder === 'hosted-only') {
+      return urls.filter(this.isHosted);
+    }
+    return urls;
+  }
+
+  private get filteredUserRealmURLs() {
+    return this.filterByHosted(this.realmServer.userRealmURLs);
+  }
+
+  private get filteredCatalogRealmURLs() {
+    return this.filterByHosted(this.communityRealmURLs);
+  }
+
+  private get favoriteRealmURLs() {
+    let favorites = this.matrixService.workspaceFavorites;
+    let allURLs = [
+      ...this.realmServer.userRealmURLs,
+      ...(this.realmServer.displayedCatalogRealmURLs ?? []),
+    ];
+    let filtered = favorites.filter((url) => allURLs.includes(url));
+    return this.filterByHosted(filtered);
+  }
+
+  private get userWorkspacesEmptyMessage(): string | null {
+    if (
+      this.sortOrder === 'hosted-only' &&
+      this.filteredUserRealmURLs.length === 0
+    ) {
+      return 'No matching results';
+    }
+    return null;
+  }
+
+  private get catalogEmptyMessage(): string | null {
+    if (
+      this.sortOrder === 'hosted-only' &&
+      this.filteredCatalogRealmURLs.length === 0
+    ) {
+      return 'No matching results';
+    }
+    return null;
+  }
+
+  private get favoritesEmptyMessage(): string | null {
+    if (this.matrixService.workspaceFavorites.length === 0) {
+      return 'You have no favorites yet';
+    }
+    if (this.favoriteRealmURLs.length === 0) {
+      return 'No matching results';
+    }
+    return null;
+  }
+
+  <template>
+    <div class='workspace-chooser' data-test-workspace-chooser>
+      {{#if @topBarCenterElement}}
+        {{#in-element @topBarCenterElement}}
+          <div class='sort-controls'>
+            <BoxelSelect
+              class='sort-select'
+              @options={{this.sortOptions}}
+              @selected={{this.selectedSortOption}}
+              @onChange={{this.onSortChange}}
+              @matchTriggerWidth={{false}}
+              aria-label='Filter workspaces'
+              data-test-sort-dropdown-trigger
+              as |option|
+            >
+              <option.icon width='16' height='16' />
+              {{option.label}}
+            </BoxelSelect>
+          </div>
+        {{/in-element}}
+      {{/if}}
+      <div class='workspace-chooser__content boxel-dark-scrollbar'>
+        <div class='sections-wrapper'>
+          <div class='workspace-section' data-test-favorites-section>
+            <div class='section-header'>
+              <StarFilled width='20' height='20' class='section-header-icon' />
+              <span class='workspace-chooser__title'>Favorites</span>
+            </div>
+            {{#if this.favoritesEmptyMessage}}
+              <span
+                class='section-empty'
+                data-test-favorites-empty
+              >{{this.favoritesEmptyMessage}}</span>
+            {{else}}
+              <div class='workspace-list' data-test-favorites-list>
+                {{#each this.favoriteRealmURLs as |realmURL|}}
+                  <Workspace @realmURL={{realmURL}} />
+                {{/each}}
+              </div>
+            {{/if}}
+          </div>
+          <div class='workspace-section'>
+            <div class='section-header'>
+              <Lock width='20' height='20' class='section-header-icon' />
+              <span class='workspace-chooser__title'>Your Workspaces</span>
+            </div>
+            {{#if this.userWorkspacesEmptyMessage}}
+              <span
+                class='section-empty'
+                data-test-workspaces-empty
+              >{{this.userWorkspacesEmptyMessage}}</span>
+            {{else}}
+              <div class='workspace-list' data-test-workspace-list>
+                {{#each this.filteredUserRealmURLs as |realmURL|}}
+                  <Workspace @realmURL={{realmURL}} @showMenu={{true}} />
+                {{/each}}
+                {{#if this.matrixService.isInitializingNewUser}}
+                  <WorkspaceLoadingIndicator />
+                {{/if}}
+                <AddWorkspace />
+              </div>
+            {{/if}}
+          </div>
+          {{#if this.displayCatalogWorkspaces}}
+            <div class='workspace-section'>
+              <div class='section-header'>
+                <IconGlobe width='20' height='20' class='section-header-icon' />
+                <span class='workspace-chooser__title'>Catalogs</span>
+              </div>
+              {{#if this.catalogEmptyMessage}}
+                <span
+                  class='section-empty'
+                  data-test-catalog-empty
+                >{{this.catalogEmptyMessage}}</span>
+              {{else}}
+                <div class='workspace-list' data-test-catalog-list>
+                  {{#each this.filteredCatalogRealmURLs as |realmURL|}}
+                    <Workspace @realmURL={{realmURL}} />
+                  {{/each}}
+                </div>
+              {{/if}}
+            </div>
+          {{/if}}
+        </div>
+      </div>
+    </div>
+    <style scoped>
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      .workspace-chooser {
+        opacity: 0;
+        position: absolute;
+        background-color: var(--boxel-800);
+        height: 100%;
+        width: 100%;
+        animation: fadeIn 0.5s ease-in forwards;
+        z-index: var(--host-workspace-chooser-z-index);
+      }
+      .sort-controls {
+        display: flex;
+        align-items: center;
+      }
+      .sort-select {
+        --boxel-select-background-color: rgb(42 32 64 / 90%);
+        --boxel-select-border-color: rgba(255 255 255 / 25%);
+        --boxel-select-text-color: var(--boxel-light);
+        --boxel-select-focus-border-color: rgba(255 255 255 / 50%);
+        --icon-color: var(--boxel-light);
+        font: 400 var(--boxel-font-sm);
+        letter-spacing: var(--boxel-lsp);
+      }
+      .workspace-chooser__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--boxel-sp-lg);
+        height: 100%;
+        padding: calc(5rem + 3.75rem) 5rem 5rem;
+        overflow: auto;
+      }
+      .sections-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--boxel-sp-lg) * 2);
+      }
+      .workspace-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--boxel-sp-lg);
+      }
+      .section-header {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-xs);
+      }
+      .section-header-icon {
+        --icon-color: var(--boxel-teal);
+        color: var(--boxel-teal);
+        flex-shrink: 0;
+      }
+      .workspace-chooser__title {
+        color: var(--boxel-light);
+        font: 400 var(--boxel-font-lg);
+        letter-spacing: var(--boxel-lsp);
+      }
+      .workspace-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(var(--boxel-sp-lg) + var(--boxel-sp-lg));
+        padding: var(--boxel-sp-xs) 0;
+      }
+      .section-empty {
+        color: var(--boxel-400);
+        font: 400 var(--boxel-font-sm);
+      }
+    </style>
+  </template>
+}

package/bundled-types/host-app/components/operator-mode/workspace-chooser/item-container.gts

@@ -0,0 +1,50 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+interface Signature {
+  Element: HTMLButtonElement;
+  Blocks: {
+    default: [];
+  };
+}
+
+const WorkspaceChooserItemContainer: TemplateOnlyComponent<Signature> =
+  <template>
+    <button class='workspace' ...attributes>
+      {{yield}}
+    </button>
+    <style scoped>
+      .workspace {
+        min-width: var(--boxel-xxs-container);
+        width: var(--boxel-xxs-container);
+        height: 10.375rem;
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--boxel-border-radius-xl);
+        border: none;
+        overflow: hidden;
+        padding: 0;
+        position: relative;
+      }
+      .workspace::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: var(--boxel-border-radius-xl);
+        border: 1px solid
+          var(--item-container-border-color, rgba(255 255 255 / 15%));
+        pointer-events: none;
+        z-index: 2;
+      }
+      .workspace:hover::after {
+        border-color: var(
+          --item-container-border-hover-color,
+          rgba(255 255 255 / 40%)
+        );
+      }
+      .workspace:focus-visible {
+        outline-offset: -1px;
+      }
+    </style>
+  </template>;
+
+export default WorkspaceChooserItemContainer;