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

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

<Rose::Form
  @onSubmit={{@submit}}
  @cancel={{@cancel}}
  @disabled={{@model.isSaving}}
  @showEditToggle={{if @model.isNew false true}}
  as |form|
>

  <Hds::Form::TextInput::Field
    @isOptional={{true}}
    @value={{@model.name}}
    @isInvalid={{@model.errors.name}}
    @type='text'
    name='name'
    disabled={{form.disabled}}
    {{on 'input' (set-from-event @model 'name')}}
    as |F|
  >
    <F.Label>{{t 'form.name.label'}}</F.Label>
    <F.HelperText>{{t 'form.name.help'}}</F.HelperText>
    {{#if @model.errors.name}}
      <F.Error as |E|>
        {{#each @model.errors.name as |error|}}
          <E.Message>{{error.message}}</E.Message>
        {{/each}}
      </F.Error>
    {{/if}}
  </Hds::Form::TextInput::Field>

  <Hds::Form::Textarea::Field
    @isOptional={{true}}
    @value={{@model.description}}
    @isInvalid={{@model.errors.description}}
    name='description'
    disabled={{form.disabled}}
    as |F|
  >
    <F.Label>{{t 'form.description.label'}}</F.Label>
    <F.HelperText>{{t 'form.description.help'}}</F.HelperText>
    {{#if @model.errors.description}}
      <F.Error as |E|>
        {{#each @model.errors.description as |error|}}
          <E.Message>{{error.message}}</E.Message>
        {{/each}}
      </F.Error>
    {{/if}}
  </Hds::Form::Textarea::Field>

  {{#unless @model.isNew}}
    <fieldset
      aria-labelledby='legend-text-grant-scope'
      aria-describedby='helper-text-grant-scope'
    >
      <legend id='legend-text-grant-scope'>
        {{t 'form.grant_scope.label'}}
      </legend>
      <Rose::Form::HelperText
        @id='helper-text-grant-scope'
        @error={{@model.errors.grant_scope_id}}
      >
        {{t 'form.grant_scope.help'}}
      </Rose::Form::HelperText>
      <form.radioGroup
        @name='grant_scope_id'
        @selectedValue={{@model.grant_scope_id}}
        @changed={{this.updateGrantScopeID}}
        as |radioGroup|
      >
        <Rose::Dropdown
          @text={{@model.grantScope.displayName}}
          @icon={{if
            @model.grantScope.isProject
            'flight-icons/svg/grid-16'
            (if
              @model.grantScope.isOrg
              'flight-icons/svg/org-16'
              'flight-icons/svg/globe-16'
            )
          }}
          as |dropdown|
        >
          <ul>
            {{#each @grantScopes as |grantScope|}}
              <li class={{if grantScope.model.isProject 'is-project'}}>
                <dropdown.item>
                  <radioGroup.radio
                    @label={{grantScope.model.displayName}}
                    @value={{grantScope.model.id}}
                    @icon={{concat 'app-icons/' grantScope.model.type}}
                  />
                </dropdown.item>
                <ul class='indent-label-1'>
                  {{#each grantScope.subScopes as |subScope|}}
                    <li class={{if subScope.model.isProject 'is-project'}}>
                      <dropdown.item>
                        <radioGroup.radio
                          @label={{subScope.model.displayName}}
                          @value={{subScope.model.id}}
                          @icon={{concat 'app-icons/' subScope.model.type}}
                        />
                      </dropdown.item>
                      <ul class='indent-label-2'>
                        {{#each subScope.subScopes as |subSubScope|}}
                          <li class={{if subSubScope.isProject 'is-project'}}>
                            <dropdown.item>
                              <radioGroup.radio
                                @label={{subSubScope.displayName}}
                                @value={{subSubScope.id}}
                                @icon={{concat 'app-icons/' subSubScope.type}}
                              />
                            </dropdown.item>
                          </li>
                        {{/each}}
                      </ul>
                    </li>
                  {{/each}}
                </ul>
              </li>
            {{/each}}
          </ul>
        </Rose::Dropdown>
      </form.radioGroup>
    </fieldset>
    <br />
  {{/unless}}
  {{#if (can 'save model' @model)}}
    <form.actions
      @enableEditText={{t 'actions.edit-form'}}
      @submitText={{t 'actions.save'}}
      @cancelText={{t 'actions.cancel'}}
    />
  {{/if}}
</Rose::Form>