atst/templates/portfolios/applications/settings.html

{% extends "portfolios/applications/base.html" %}

{% from "components/alert.html" import Alert %}
{% from "components/delete_confirmation.html" import DeleteConfirmation %}
{% from "components/icon.html" import Icon %}
{% import "fragments/applications/new_member_modal_content.html" as member_steps %}
{% from "components/modal.html" import Modal %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% from "components/pagination.html" import Pagination %}
{% from "components/save_button.html" import SaveButton %}
{% from "components/text_input.html" import TextInput %}
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
{% from "components/icon.html" import Icon %}
{% from "components/text_input.html" import TextInput %}
{% from "components/checkbox_input.html" import CheckboxInput %}
{% from "components/phone_input.html" import PhoneInput %}

{% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}

{% block application_content %}

  <div class='subheading'>{{ 'portfolios.applications.settings.name_description' | translate }}</div>

  {% if user_can(permissions.EDIT_APPLICATION) %}
    <base-form inline-template>
      <form method="POST" action="{{ url_for('applications.update', application_id=application.id) }}">
        <div class="panel">
          <div class="panel__content">
            {{ application_form.csrf_token }}
            <div class="form-row">
              <div class="form-col form-col--two-thirds">
                {{ TextInput(application_form.name, optional=False) }}
                {{ TextInput(application_form.description, paragraph=True, optional=False) }}
              </div>
            </div>
          </div>
          <div class="panel__footer">
            <div class="action-group">
              {{ SaveButton('common.save_changes'|translate) }}
            </div>
          </div>
        </div>
      </form>
    </base-form>
  {% else %}
    <div class="panel">
      <div class="panel__content">
        <p>
          {{ "fragments.edit_application_form.explain" | translate }}
        </p>
        <div class="form-row">
          <div class="form-col">
            <div class="usa-input usa-input__title__view-only">
              {{ application_form.name.label() }}
            </div>
            <p>
              {{ application_form.name.data }}
            </p>
          </div>
        </div>
        <div class="form-row">
          <div class="form-col">
            <div class="usa-input usa-input__title__view-only">
              {{ application_form.description.label() }}
            </div>
            <p>
              {{ application_form.description.data }}
            </p>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  {% if not application.members %}
    {% set user_can_invite = user_can(permissions.CREATE_APPLICATION_MEMBER) %}

    <div class='empty-state'>
      <p class='empty-state__message'>{{ ("portfolios.applications.team_settings.blank_slate.title" | translate) }}</p>

      {{ Icon('avatar') }}

      {% if not user_can_invite %}
        <p class='empty-state__sub-message'>{{ ("portfolios.applications.team_settings.blank_slate.sub_message" | translate) }}</p>
      {% endif %}

      {% if user_can_invite %}
        {% set new_member_modal_name = "add-app-mem" %}
        <a class="usa-button usa-button-big" v-on:click="openModal('{{ new_member_modal_name }}')">
          {{ "portfolios.applications.team_settings.blank_slate.action_label" | translate }}
        </a>
        {{ MultiStepModalForm(
            name=new_member_modal_name,
            form=new_member_form,
            form_action=url_for("applications.create_member", application_id=application.id),
            steps=[
              member_steps.MemberStepOne(new_member_form),
              member_steps.MemberStepTwo(new_member_form, application)
            ],
          ) }}
      {% endif %}
    </div>

  {% else %}
    <div class='subheading'>
      {{ 'portfolios.applications.settings.team_members' | translate }}

      {% set new_member_modal_name = "add-app-mem" %}
      {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
        <a class="icon-link modal-link icon-link__add" v-on:click="openModal('{{ new_member_modal_name }}')">
          {{ Icon("plus") }}
          {{ "portfolios.applications.add_member" | translate }}
        </a>
      {% endif %}
    </div>

    <section class="member-list application-list" id="application-members">
      <div class='responsive-table-wrapper panel'>
        {% if g.matchesPath("application-members") %}
          {% include "fragments/flash.html" %}
        {% endif %}
        {% for member in members %}
          {% set modal_name = "edit_member-{}".format(loop.index) %}
          {% call Modal(modal_name, dismissable=True) %}
            <form id='{{ modal_name }}' method="POST" action="{{ url_for('applications.update_member', application_id=application.id, application_role_id=member.role_id) }}">
              {{ member.form.csrf_token }}
              <h4>{{ "portfolios.applications.members.form.project_perms" | translate }}</h4>
              <div class="application-perms">
                {% set team_mgmt = "perms_team_mgmt-{}".format(member.role_id) %}
                {% set env_mgmt = "perms_env_mgmt-{}".format(member.role_id) %}
                {% set del_env = "perms_del_env-{}".format(member.role_id) %}
                {{ CheckboxInput(member.form.perms_team_mgmt, classes="input__inline-fields", key=team_mgmt, id=team_mgmt) }}
                {{ CheckboxInput(member.form.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt) }}
                {{ CheckboxInput(member.form.perms_del_env, classes="input__inline-fields", key=del_env, id=del_env) }}
              </div>
              <div class="environment-roles-new">
                <h4>{{ "portfolios.applications.members.form.env_access" | translate }}</h4>
                <hr>
                {% for environment_data in member.form.environment_roles %}
                  <optionsinput inline-template
                    v-bind:initial-value="'{{ environment_data.role.data | string }}'"
                    v-bind:name="'{{ environment_data.name | string }}'"
                    v-bind:optional="true">
                    <div class="usa-input">
                      <fieldset data-ally-disabled="true" class="usa-input__choices">
                        <div class="form-row">
                          <div class="form-col form-col--two-thirds">
                            <legend>
                              <div v-bind:class='["usa-input__title-inline", {"environment-name--gray": value === "None" }]'>
                                {{ environment_data.environment_name.data }}
                              </div>
                            </legend>
                          </div>
                          <div class="form-col form-col--third">
                            {{ environment_data.role(**{"v-model": "value"}) }}
                          </div>
                        </div>
                      </fieldset>
                    </div>
                  </optionsinput>
                  {{ environment_data.environment_id() }}
                  <hr>
                {% endfor %}
              </div>
              <input
                type="submit"
                class='action-group__action usa-button'
                value='Update'>
            </form>
          {% endcall %}
        {% endfor %}
        <table>
          <thead>
            <tr>
              <th>Member</th>
              <th>Project Permissions</th>
              <th>Environment Access</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for member in members %}
              {% set modal_name = "edit_member-{}".format(loop.index) %}
              <tr>
                <td>
                  {{ member.user_name }}
                  <a class="icon-link" v-on:click="openModal('{{ modal_name }}')">
                    {{ Icon('edit') }}
                  </a>
                  <br>
                  {% if member.role_status == 'pending' %}
                    <span class='label label--purple'>INVITE PENDING</span>
                  {% endif %}

                </td>

                <td>
                  {% for perm, value in member.permission_sets.items() %}
                    {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }}<br>
                  {% endfor %}
                </td>
                <td>
                  {% for env in member.environment_roles %}
                    {{ env.environment_name }}{% if not env == member.environment_roles[-1]%},{% endif %}
                  {% endfor %}
                </td>
                <td>
                  {% if member.role_status == 'pending' %}
                    <a href="#">Resend Invite</a><br>
                    <a href="#">Revoke Invite</a>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
        {% import "fragments/applications/new_member_modal_content.html" as member_steps %}
        {{ MultiStepModalForm(
            name=new_member_modal_name,
            form=new_member_form,
            form_action=url_for("applications.create_member", application_id=application.id),
            steps=[
              member_steps.MemberStepOne(new_member_form),
              member_steps.MemberStepTwo(new_member_form, application)
            ],
          ) }}
      {% endif %}
    </section>
  {% endif %}

  <div class='subheading'>
    {{ 'common.resource_names.environments' | translate }}

    {% if user_can(permissions.CREATE_ENVIRONMENT) %}
      {% include "fragments/applications/add_new_environment.html" %}
    {% endif %}
  </div>

  <div class="panel">
    {% if g.matchesPath("application-environments") %}
      {% include "fragments/flash.html" %}
    {% endif %}
    <div class="panel__content">
      <div class="accordion-table accordion-table-list">
        <ul class="accordion-table__items">
          {% for env in environments_obj %}
            {% set edit_form = env['edit_form'] %}
            {% set testing_env_name = 'qa' %}
            <toggler inline-template>
              <li class="accordion-table__item">
                <div class="accordion-table__item-content form-row">
                  <div class="form-col form-col--two-thirds">
                    <div class="environment-list__item">
                      <span>
                        {{ env['name'] }}
                      </span>
                      {% if env['name'].lower() == testing_env_name %}
                        <span class='label'>PROCESSING</span>
                      {% endif %}
                      {% if env['name'].lower() != testing_env_name %}
                        <span class="icon-link">
                          {% set edit_environment_button %}
                            {{ Icon('edit') }}
                          {% endset %}

                          {{
                          ToggleButton(
                            open_html=edit_environment_button,
                            close_html=edit_environment_button,
                            section_name="edit"
                            )
                          }}
                        </span>
                      {% endif %}
                      <span class="accordion-table__item__toggler icon-link">
                        {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %}
                        {{
                          ToggleButton(
                            open_html=members_button,
                            close_html=members_button,
                            section_name="members"
                          )
                        }}
                      </span>
                    </div>
                  </div>
                  <div class="form-col form-col--third">
                    {% if env['name'].lower() == testing_env_name %}
                      <em>Cloud service provider link unavailable</em>
                    {% else %}
                      <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link icon-link'>
                        <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>
                      </a>
                    {% endif %}
                  </div>
                </div>

                {% call ToggleSection(section_name="members") %}
                  <ul>
                    {% for member in env['members'] %}
                    <li class="accordion-table__item__expanded">
                      {{ member }}
                    </li>
                    {% endfor %}
                  </ul>
                {% endcall %}

                {% call ToggleSection(section_name="edit") %}
                  <ul>
                    <li class="accordion-table__item__expanded">
                      <form action="{{ url_for('applications.update_environment', environment_id=env['id']) }}" method="post" v-on:submit="handleSubmit">
                        {{ edit_form.csrf_token }}
                        {{ TextInput(edit_form.name, validation='requiredField') }}
                        {{
                          SaveButton(
                            text=("common.save" | translate)
                          )
                        }}
                      </form>
                    </li>
                  </ul>
                {% endcall %}
              </li>
            </toggler>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>

  <hr>

  {% if user_can(permissions.DELETE_APPLICATION) %}
    {% set env_count = application.environments | length %}
    {% if env_count == 1 %}
      {% set pluralized_env = "environment" %}
    {% else %}
      {% set pluralized_env = "environments" %}
    {% endif %}

    <div class='subheading'>
      {{ "portfolios.applications.delete.subheading" | translate }}
    </div>

    <div class="panel">
      <div class="panel__content">
        <div class="form-row">
          <div class="form-col form-col--two-thirds">
            {{ "portfolios.applications.delete.panel_text" | translate({"name": application.name, "env_count": env_count , "pluralized_env": pluralized_env}) | safe }}
          </div>
          <div class="form-col form-col--third">
            <div class="usa-input">
              <input
                id="delete-application"
                type="button"
                v-on:click="openModal('delete-application')"
                class='usa-button button-danger-outline'
                value="{{ 'portfolios.applications.delete.button' | translate }}"
                >
            </div>
          </div>
        </div>
      </div>
    </div>

    {% call Modal(name="delete-application") %}
      <h1>{{ "portfolios.applications.delete.header" | translate }}</h1>

      {{
        Alert(
          title=("components.modal.destructive_title" | translate),
          message=("portfolios.applications.delete.alert.message" | translate),
          level="warning"
        )
      }}

      {{
        DeleteConfirmation(
          modal_id="delete_application",
          delete_text=('portfolios.applications.delete.button' | translate),
          delete_action= url_for('applications.delete', application_id=application.id),
          form=application_form
        )
      }}
    {% endcall %}
  {% endif %}

  {% if user_can(permissions.VIEW_APPLICATION_ACTIVITY_LOG) %}
    {% include "fragments/audit_events_log.html" %}
    {{ Pagination(audit_events, url=url_for('applications.settings', application_id=application.id)) }}
  {% endif %}

{% endblock %}