threshold-ui/ui/admin/app/components/form/role/manage-custom-scopes/index.hbs

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

{{#if @model.totalItemsCount}}
  <Rose::Form
    class='full-width role-manage-custom-scopes-form'
    @onSubmit={{@submit}}
    @cancel={{@cancel}}
    @disabled={{@model.role.isSaving}}
    as |form|
  >
    <Hds::SegmentedGroup as |S|>
      <S.TextInput
        @value={{@search}}
        @type='search'
        placeholder={{t 'actions.search'}}
        aria-label={{t 'actions.search'}}
        {{on 'input' @handleSearchInput}}
      />
    </Hds::SegmentedGroup>
    {{#if @model.orgScopes}}
      {{#if @model.role.grantScopeOrgIDs.length}}
        <div class='table-selected-items-text'>
          <Hds::Text::Body @tag='p' @color='faint'>
            {{t
              'resources.role.scope.titles.selected'
              items=@model.role.grantScopeOrgIDs.length
              total=@model.totalItemsCount
            }}
          </Hds::Text::Body>
        </div>
      {{/if}}
      <Hds::Table
        @columns={{array
          (hash label=(t 'resources.role.scope.title'))
          (hash label=(t 'form.id.label'))
          (hash label=(t 'resources.role.scope.titles.projects_selected'))
        }}
        @model={{@model.orgScopes}}
        @isSelectable={{true}}
        @onSelectionChange={{this.selectionChange}}
        @valign='middle'
      >
        <:body as |B|>
          <B.Tr
            @selectionKey={{B.data.id}}
            @isSelected={{includes B.data.id @model.role.grantScopeOrgIDs}}
            @selectionAriaLabelSuffix='row {{B.data.id}}'
            data-test-org-scopes-table-row={{B.data.id}}
          >
            <B.Td>
              <Hds::Text::Body @tag='p'>
                {{B.data.displayName}}
              </Hds::Text::Body>
            </B.Td>
            <B.Td>
              <Hds::Copy::Snippet
                @textToCopy={{B.data.id}}
                @color='secondary'
              />
            </B.Td>
            <B.Td>
              {{#let (get @model.projectTotals B.data.id) as |projectTotals|}}
                {{#if projectTotals}}
                  <Hds::Link::Standalone
                    @icon='arrow-right'
                    @iconPosition='trailing'
                    @text={{t
                      'resources.role.scope.actions.view-projects'
                      selected=projectTotals.selected.length
                      total=projectTotals.total
                    }}
                    @route='scopes.scope.roles.role.manage-scopes.manage-org-projects'
                    @model={{B.data.id}}
                  />
                {{/if}}
              {{/let}}
            </B.Td>
          </B.Tr>
        </:body>
      </Hds::Table>
      <Rose::Pagination
        @model={{@model.role.id}}
        @totalItems={{@model.totalItems}}
        @currentPage={{@page}}
        @currentPageSize={{@pageSize}}
      />

      <form.actions
        @submitText={{t 'actions.save'}}
        @cancelText={{t 'actions.cancel'}}
      />
    {{else}}
      <Hds::ApplicationState data-test-no-grant-scope-results as |A|>
        <A.Header @title={{t 'titles.no-results-found'}} />
        <A.Body
          @text={{t
            'descriptions.no-search-results'
            query=@search
            resource=(t 'resources.scope.title_plural')
          }}
        />
      </Hds::ApplicationState>
    {{/if}}
  </Rose::Form>
{{else}}
  <Hds::ApplicationState as |A|>
    <A.Header
      @title={{t
        'resources.role.scope.messages.no-scopes.title'
        type=(t 'resources.org.title')
      }}
    />
    <A.Body
      @text={{t
        'resources.role.scope.messages.no-scopes.description'
        type=(t 'resources.org.title')
      }}
    />
    <A.Footer as |F|>
      <F.LinkStandalone
        @icon='arrow-left'
        @text={{t 'actions.back'}}
        @route='scopes.scope.roles.role.manage-scopes'
      />
    </A.Footer>
  </Hds::ApplicationState>
{{/if}}

{{#if this.selectedOrg}}
  <Hds::Modal
    @onClose={{this.toggleRemoveOrgModal}}
    data-test-manage-scopes-remove-org-modal
    as |M|
  >
    <M.Header>{{t 'resources.role.scope.remove-org.title'}}</M.Header>
    <M.Body>
      <Hds::Text::Body @tag='p' @color='primary'>
        {{t
          'resources.role.scope.remove-org.description'
          orgDisplayName=this.orgDisplayName
        }}
      </Hds::Text::Body>
    </M.Body>
    <M.Footer as |F|>
      <Hds::ButtonSet>
        <Hds::Button
          @text={{t 'resources.role.scope.actions.remove-org-and-projects'}}
          {{on 'click' (fn this.removeProjects false)}}
        />
        <Hds::Button
          @color='secondary'
          @text={{t 'resources.role.scope.actions.remove-org-only'}}
          {{on 'click' F.close}}
        />
      </Hds::ButtonSet>
    </M.Footer>
  </Hds::Modal>
{{/if}}

{{#if this.selectedOrgs}}
  <Hds::Modal
    @onClose={{this.toggleRemoveAllModal}}
    data-test-manage-scopes-remove-all-orgs-modal
    as |M|
  >
    <M.Header>{{t 'resources.role.scope.remove-all-orgs.title'}}</M.Header>
    <M.Body>
      <Hds::Text::Body @tag='p' @color='primary'>
        {{t 'resources.role.scope.remove-all-orgs.description'}}
      </Hds::Text::Body>
    </M.Body>
    <M.Footer as |F|>
      <Hds::ButtonSet>
        <Hds::Button
          @text={{t 'resources.role.scope.actions.remove-orgs-and-projects'}}
          {{on 'click' (fn this.removeProjects true)}}
        />
        <Hds::Button
          @color='secondary'
          @text={{t 'resources.role.scope.actions.remove-orgs-only'}}
          {{on 'click' F.close}}
        />
      </Hds::ButtonSet>
    </M.Footer>
  </Hds::Modal>
{{/if}}