Files
atst/templates/portfolios/applications/settings.html
2019-09-18 11:16:54 -04:00

397 lines
16 KiB
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.permission_sets.perms_team_mgmt, classes="input__inline-fields", key=team_mgmt, id=team_mgmt) }}
{{ CheckboxInput(member.form.permission_sets.perms_env_mgmt, classes="input__inline-fields", key=env_mgmt, id=env_mgmt) }}
{{ CheckboxInput(member.form.permission_sets.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 %}