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

{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

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

<Rose::Layout::Global as |layout|>

  <layout.header>
    <Rose::Header
      class='{{if (is-loading) " loading"}}
        {{if this.hasMacOSChrome " header-cushion"}}'
      as |header|
    >
      <header.brand @logo='logo-app' @text={{(app-name)}} />

      <header.nav>
        <div id='header-nav'></div>
      </header.nav>

      <header.utilities as |utilities|>
        {{#if this.showWindowActions}}
          <Rose::Button
            @iconOnly='x'
            @style='warning'
            class='button-window-close'
            title={{t 'actions.close'}}
            {{on 'click' this.close}}
          />
          <Rose::Button
            @iconOnly='square'
            @style='secondary'
            class='button-window-fullscreen'
            title={{t 'actions.fullscreen'}}
            {{on 'click' this.toggleFullScreen}}
          />
          <Rose::Button
            @iconOnly='minus'
            @style='secondary'
            class='button-window-minimize'
            title={{t 'actions.minimize'}}
            {{on 'click' this.minimize}}
          />
        {{/if}}

        {{#if this.session.isAuthenticated}}
          <utilities.dropdown
            @text={{this.session.data.authenticated.username}}
            @icon='user-circle'
            as |dropdown|
          >
            <dropdown.button {{on 'click' this.invalidateSession}}>
              {{t 'actions.deauthenticate'}}
            </dropdown.button>
          </utilities.dropdown>
        {{/if}}

      </header.utilities>
    </Rose::Header>
  </layout.header>

  <layout.body>
    {{outlet}}
  </layout.body>

</Rose::Layout::Global>

{{#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={{map-type-to-color flash.notificationType}}
          @onDismiss={{fn flash.dismiss flash}}
          data-test-toast-notification
          as |T|
        >
          <T.Title>{{t (concat 'states.' flash.notificationType)}}</T.Title>
          <T.Description>{{flash.message}}</T.Description>
        </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>