threshold-ui/ui/desktop/app/templates/application.hbs

{{!
  Copyright IBM Corp. 2021, 2026
  SPDX-License-Identifier: BUSL-1.1
}}

{{page-title (app-name)}}

<Hds::AppFrame @hasHeader={{true}} @hasSidebar={{this.showSideNav}} as |Frame|>
  <Frame.Header>
    <Hds::AppHeader
      class='app-header
        {{if this.hasMacOSChrome " header-cushion"}}
        app-header-dark-mode-overrides'
      @a11yRefocusRouteChangeValidator={{this.customRouteChangeValidator}}
    >
      <:logo>
        <Hds::AppHeader::HomeLink
          @icon='boundary'
          @color='var(--token-color-boundary-brand)'
          @text={{(app-name)}}
          @route='index'
          class='app-header__logo home-link-color-override'
        />
      </:logo>

      <:globalActions>
        {{#if this.session.isAuthenticated}}
          <Hds::Dropdown
            class='app-header__global-actions'
            @enableCollisionDetection={{true}}
            @listPosition='bottom-left'
            @height='20rem'
            data-test-header-scope-dropdown
            as |D|
          >
            {{#let this.currentScope as |scope|}}
              <D.ToggleButton
                @text={{scope.name}}
                @icon={{scope.icon}}
                class='dropdown-toggle-color-override'
              />
            {{/let}}

            <D.Checkmark
              @icon='globe'
              @route='scopes.scope'
              @model='global'
              @selected={{this.scope.org.isGlobal}}
            >
              {{t 'titles.global'}}
            </D.Checkmark>

            {{#if this.scope.orgsList}}
              <D.Separator />
            {{/if}}

            {{#each this.scope.orgsList as |org|}}
              <D.Checkmark
                @icon='org'
                @route='scopes.scope'
                @model={{org.id}}
                @selected={{eq this.scope.org.id org.id}}
              >
                {{org.displayName}}
              </D.Checkmark>
            {{/each}}
          </Hds::Dropdown>
        {{/if}}
      </:globalActions>

      <:utilityActions>
        {{#if this.session.username}}
          <Hds::Dropdown class='app-header__utility-actions' as |dd|>
            <dd.ToggleButton
              @icon='user-circle'
              @text={{this.session.username}}
              class='dropdown-toggle-color-override'
            />
            <dd.Interactive
              data-test-nav-signout-btn
              {{on 'click' this.showModalOrLogout}}
            >
              {{t 'actions.deauthenticate'}}
            </dd.Interactive>
          </Hds::Dropdown>
        {{else if this.session.isAuthenticated}}
          <Hds::Dropdown as |dd|>
            <dd.ToggleIcon
              @icon='user-circle'
              @text={{t 'titles.user-menu'}}
              class='dropdown-toggle-color-override'
            />
            <dd.Interactive
              data-test-nav-signout-btn
              {{on 'click' this.showModalOrLogout}}
            >
              {{t 'actions.deauthenticate'}}
            </dd.Interactive>
          </Hds::Dropdown>
        {{/if}}

        {{#if this.showWindowActions}}
          <Hds::Button
            {{on 'click' this.minimize}}
            class='app-header__utility-actions button-window-minimize'
            title={{t 'actions.minimize'}}
            @text={{t 'actions.minimize'}}
            @icon='minus'
            @isIconOnly={{true}}
            @color='secondary'
          />
          <Hds::Button
            {{on 'click' this.toggleFullScreen}}
            class='app-header__utility-actions button-window-fullscreen'
            title={{t 'actions.fullscreen'}}
            @text={{t 'actions.fullscreen'}}
            @icon='square'
            @isIconOnly={{true}}
            @color='secondary'
          />
          <Hds::Button
            {{on 'click' this.close}}
            class='app-header__utility-actions button-window-close'
            title={{t 'actions.close'}}
            @text={{t 'actions.close'}}
            @icon='x'
            @isIconOnly={{true}}
          />
        {{/if}}
      </:utilityActions>

    </Hds::AppHeader>
  </Frame.Header>

  <Frame.Sidebar>
    <Hds::AppSideNav>
      <Hds::AppSideNav::Portal::Target />
    </Hds::AppSideNav>
  </Frame.Sidebar>

  <Frame.Main>
    {{outlet}}
  </Frame.Main>
</Hds::AppFrame>

{{#if this.flashMessages.queue}}
  <div class='ember-notify-cn'>
    {{#each this.flashMessages.queue as |flash|}}
      <div class='ember-notify-show ember-notify'>
        <Hds::Toast
          @color={{flash.color}}
          @onDismiss={{fn flash.dismiss flash}}
          data-test-toast-notification
          as |T|
        >
          <T.Title>{{flash.title}}</T.Title>
          <T.Description>{{flash.message}}</T.Description>

          {{#if flash.button}}
            <T.Button
              @color='secondary'
              @text={{flash.button.label}}
              {{on 'click' (fn flash.button.action flash)}}
            />
          {{/if}}
        </Hds::Toast>
      </div>
    {{/each}}
  </div>
{{/if}}

<PendingConfirmations as |confirmation accept deny|>
  {{#if confirmation.options.isConnectError}}
    <Hds::Modal @color='critical' as |M|>
      <M.Header @icon='alert-diamond' @onDismiss={{deny}}>
        {{t 'states.error'}}
      </M.Header>
      <M.Body>
        <Hds::Text::Body @tag='p'>
          {{confirmation.text}}
        </Hds::Text::Body>
        <br />
        <Hds::Text::Body @tag='p'>
          {{t 'questions.retry-confirm'}}
        </Hds::Text::Body>
      </M.Body>
      <M.Footer>
        <Hds::ButtonSet>
          <Hds::Button
            @text={{t 'actions.retry'}}
            @color='primary'
            {{on 'click' accept}}
          />
          <Hds::Button
            @text={{t 'actions.cancel'}}
            @color='secondary'
            {{on 'click' deny}}
          />
        </Hds::ButtonSet>
      </M.Footer>
    </Hds::Modal>
  {{else}}
    <Hds::Modal @color='warning' as |M|>
      <M.Header @icon='alert-triangle' @onDismiss={{deny}}>
        {{t 'actions.confirm'}}
      </M.Header>
      <M.Body>
        <Hds::Text::Body @tag='p'>
          {{confirmation.text}}
        </Hds::Text::Body>
      </M.Body>
      <M.Footer>
        <Hds::ButtonSet>
          <Hds::Button
            @text={{t 'actions.ok'}}
            @color='primary'
            {{on 'click' accept}}
          />
          <Hds::Button
            @text={{t 'actions.cancel'}}
            @color='secondary'
            {{on 'click' deny}}
          />
        </Hds::ButtonSet>
      </M.Footer>
    </Hds::Modal>
  {{/if}}
</PendingConfirmations>

{{#if (or this.isLoggingOut this.isAppQuitting)}}
  <Hds::Modal @onClose={{this.cancel}} data-test-close-sessions-modal as |M|>
    {{#if this.isAppQuitting}}
      <M.Header>
        {{t 'resources.session.messages.stop-sessions-before-quit.title'}}
      </M.Header>
      <M.Body>
        {{t 'resources.session.messages.stop-sessions-before-quit.description'}}
      </M.Body>
    {{else}}
      {{! If not rendering the isAppQuitting modal, render isLoggingOut modal }}
      <M.Header>
        {{t 'resources.session.messages.stop-sessions-and-signout.title'}}
      </M.Header>
      <M.Body>
        {{t 'resources.session.messages.stop-sessions-and-signout.description'}}
      </M.Body>
    {{/if}}
    <M.Footer>
      <Hds::ButtonSet>
        <Hds::Button
          {{on 'click' this.confirmCloseSessions}}
          type='button'
          @text={{t 'actions.ok'}}
        />
        <Hds::Button
          {{on 'click' this.cancel}}
          type='button'
          @text={{t 'actions.cancel'}}
          @color='secondary'
        />
      </Hds::ButtonSet>
    </M.Footer>
  </Hds::Modal>
{{/if}}