Merge pull request #1060 from dod-ccpo/app-settings-redesign
App settings redesign
This commit is contained in:
leigh-mil
GitHub
@@ -1,12 +1,23 @@
|
||||
{% macro StickyCTA(text) -%}
|
||||
{% from 'components/icon.html' import Icon %}
|
||||
|
||||
{% macro StickyCTA(text, return_link_url=None, return_link_text=None) -%}
|
||||
<div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
|
||||
<div class="sticky-cta-container">
|
||||
<div class="sticky-cta-text">
|
||||
{% if return_link_url and return_link_text %}
|
||||
<div class="sticky-cta-return-link">
|
||||
<a href="{{ return_link_url }}">
|
||||
{{ Icon('caret_left', classes="icon--tiny icon--blue") }} {{ return_link_text}}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<h3>{{ text }}</h3>
|
||||
</div>
|
||||
<div class="sticky-cta-buttons">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% if caller %}
|
||||
<div class="sticky-cta-buttons">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
@@ -18,25 +18,17 @@
|
||||
</div>
|
||||
<div class="panel__footer">
|
||||
<div class="action-group">
|
||||
<div class='action-group-cancel'>
|
||||
<a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggle">
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
{{ SaveButton(text=('common.save' | translate), element="input", form="add-new-env") }}
|
||||
</div>
|
||||
{{ SaveButton(text=('common.save' | translate), element="input", form="add-new-env") }}
|
||||
<a class='action-group__action icon-link icon-link--default' v-on:click="toggle">
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-else class="panel__footer">
|
||||
<div class="action-group">
|
||||
<a class='icon-link' v-on:click="toggle">
|
||||
{{ "portfolios.applications.add_environment" | translate }}
|
||||
{{ Icon('plus') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class='icon-link icon-link__add' v-on:click="toggle">
|
||||
{{ Icon('plus') }}
|
||||
{{ "portfolios.applications.add_environment" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
</new-environment>
|
||||
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/save_button.html" import SaveButton %}
|
||||
|
||||
|
||||
{% for env_form in members_form.envs %}
|
||||
{% if env_form.env_id.data == env['id'] %}
|
||||
<div class='app-team-settings-link'>
|
||||
{{ 'fragments.edit_environment_team_form.add_new_member_text' | translate }}
|
||||
<a href='{{ url_for("applications.team", application_id=application.id) }}'>
|
||||
{{ 'fragments.edit_environment_team_form.add_new_member_link' | translate }}
|
||||
</a>
|
||||
</div>
|
||||
<form
|
||||
action="{{ url_for('applications.update_env_roles', environment_id=env['id']) }}"
|
||||
method="post">
|
||||
{{ members_form.csrf_token }}
|
||||
{{ env_form.env_id() }}
|
||||
<edit-environment-role
|
||||
inline-template
|
||||
v-bind:initial-role-categories='{{ env_form.team_roles.data | tojson }}'>
|
||||
<div>
|
||||
<div v-for='(roleCategory, roleindex) in roleCategories' class='environment-role'>
|
||||
<h4 v-if='checkNoAccess(roleCategory.role)'>
|
||||
{{ 'fragments.edit_environment_team_form.unassigned_title' | translate }}
|
||||
</h4>
|
||||
<h4 v-else v-html='roleCategory.role'></h4>
|
||||
<ul class='environment-role__users'>
|
||||
<div
|
||||
v-if="roleCategory.members && !roleCategory.members.length"
|
||||
class='environment-role__no-user'>
|
||||
{{ 'fragments.edit_environment_team_form.no_members' | translate }}
|
||||
</div>
|
||||
<li
|
||||
v-for='(member, memberindex) in roleCategory.members'
|
||||
class="environment-role__user"
|
||||
v-bind:class="{'unassigned': checkNoAccess(member.role_name)}">
|
||||
<span v-html='member.user_name'>
|
||||
</span>
|
||||
<span v-on:click="toggleSection(member.application_role_id)" class="icon-link right">
|
||||
{{ Icon('edit', classes="icon--medium") }}
|
||||
</span>
|
||||
<div
|
||||
v-show="selectedSection === member.application_role_id"
|
||||
class='environment-role__user-field'>
|
||||
<div class="usa-input">
|
||||
<fieldset
|
||||
data-ally-disabled="true"
|
||||
class="usa-input__choices"
|
||||
v-on:change="onInput">
|
||||
<ul
|
||||
v-for='(roleCategory, roleinputindex) in roleCategories'
|
||||
v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name'">
|
||||
<li>
|
||||
<input
|
||||
v-bind:checked="member.role_name === roleCategory.role"
|
||||
v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name'"
|
||||
v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name-' + roleinputindex"
|
||||
type="radio"
|
||||
v-bind:user-id='member.application_role_id'
|
||||
v-bind:value='roleCategory.role'>
|
||||
<label
|
||||
v-bind:for="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-role_name-' + roleinputindex">
|
||||
<span v-if='checkNoAccess(roleCategory.role)'>
|
||||
{{ 'fragments.edit_environment_team_form.no_access' | translate }}
|
||||
</span>
|
||||
<span v-else v-html='roleCategory.role'></span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-bind:id="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-application_role_id'"
|
||||
v-bind:name="'envs-{{ loop.index0 }}-team_roles-' + roleindex + '-members-' + memberindex + '-application_role_id'"
|
||||
type="hidden"
|
||||
v-bind:value='member.application_role_id'>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='action-group'>
|
||||
{{
|
||||
SaveButton(
|
||||
text=("common.save" | translate)
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</edit-environment-role>
|
||||
<div class='action-group-cancel'>
|
||||
<a class='action-group-cancel__action icon-link icon-link--default' v-on:click="toggleSection('members')">
|
||||
{{ "common.cancel" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
@@ -1,128 +0,0 @@
|
||||
{% from "components/delete_confirmation.html" import DeleteConfirmation %}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
{% from "components/options_input.html" import OptionsInput %}
|
||||
{% from "components/save_button.html" import SaveButton %}
|
||||
{% from "components/text_input.html" import TextInput %}
|
||||
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
|
||||
|
||||
|
||||
<div class="application-list-item application-list">
|
||||
<header>
|
||||
<div class="responsive-table-wrapper__header">
|
||||
<div class='responsive-table-wrapper__title'>
|
||||
<div class='h3'>{{ 'portfolios.applications.environments_heading' | translate }}</div>
|
||||
</div>
|
||||
<a class='icon-link'>
|
||||
{{ Icon('info') }}
|
||||
{{ "portfolios.admin.settings_info" | translate }}
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="accordion-table accordion-table-list">
|
||||
<div class="accordion-table__head row">
|
||||
<div class="col col--grow">{{ "portfolios.applications.environments.name" | translate }}</div>
|
||||
<div class="col col--grow">{{ "portfolios.applications.environments.edit_name" | translate }}</div>
|
||||
<div class="col col--grow">{{ "common.delete" | translate }}</div>
|
||||
<div class="col col--grow">{{ "common.members" | translate }}</div>
|
||||
</div>
|
||||
|
||||
<ul class="accordion-table__items">
|
||||
{% for env in environments_obj %}
|
||||
{% set delete_environment_modal_id = "delete_modal_environment{}".format(env['id']) %}
|
||||
{% set edit_form = env['edit_form'] %}
|
||||
|
||||
<toggler inline-template {% if active_toggler == (env['id'] | safe) %}initial-selected-section="{{ active_toggler_section }}"{% endif %}>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content row">
|
||||
<div class="col col--grow">
|
||||
{{ env['name'] }}
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
<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>
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
<span class="icon-link icon-link--danger" alt="Delete environment" v-on:click="openModal('{{ delete_environment_modal_id }}')">
|
||||
{{ Icon('trash') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
|
||||
{% set open_members_button %}
|
||||
{{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_down') }}
|
||||
{% endset %}
|
||||
|
||||
{% set close_members_button %}
|
||||
{{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_up') }}
|
||||
{% endset %}
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=open_members_button,
|
||||
close_html=close_members_button,
|
||||
section_name="members"
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% call ToggleSection(section_name="members", classes="environment-roles") %}
|
||||
{% include 'fragments/applications/edit_environment_team_form.html' %}
|
||||
{% 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>
|
||||
|
||||
{% call Modal(name=delete_environment_modal_id) %}
|
||||
<h1>
|
||||
{{ 'fragments.edit_environment_team_form.delete_environment_title' | translate }}
|
||||
</h1>
|
||||
|
||||
{{
|
||||
Alert(
|
||||
level="warning",
|
||||
title=('components.modal.destructive_title' | translate),
|
||||
message=('components.modal.destructive_message' | translate({"resource": "environment"})),
|
||||
)
|
||||
}}
|
||||
|
||||
{{
|
||||
DeleteConfirmation(
|
||||
modal_id=delete_environment_modal_id,
|
||||
delete_text=('portfolios.applications.environments.delete.button' | translate),
|
||||
delete_action= url_for('applications.delete_environment', environment_id=env['id']),
|
||||
form=edit_form
|
||||
)
|
||||
}}
|
||||
{% endcall %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,88 +0,0 @@
|
||||
{% from "components/options_input.html" import OptionsInput %}
|
||||
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
|
||||
|
||||
{{ team_form.csrf_token }}
|
||||
|
||||
{% for member_form in team_form.members %}
|
||||
{% set delete_modal_id = "delete-user-{}".format(member_form.id) %}
|
||||
{% set environment_roles_form = member_form.environment_roles %}
|
||||
{% set permissions_form = member_form.permission_sets %}
|
||||
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content row">
|
||||
<div class="col col--grow">
|
||||
<div class="member-list__name">
|
||||
{{ member_form.user_name.data }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}</div>
|
||||
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}</div>
|
||||
<div class="col col--grow">{{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}</div>
|
||||
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
|
||||
{% set open_html %}
|
||||
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_down') }}
|
||||
{% endset %}
|
||||
|
||||
{% set close_html %}
|
||||
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ environment_roles_form | length }}) {{ Icon('caret_up') }}
|
||||
{% endset %}
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=open_html,
|
||||
close_html=close_html,
|
||||
section_name="environments"
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
{% call ToggleSection(section_name="environments") %}
|
||||
<ul>
|
||||
{% for environment_form in environment_roles_form %}
|
||||
<li class="accordion-table__item__expanded">
|
||||
<environment-role inline-template v-bind:initial-role="'{{ environment_form.role.data }}'">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col col--grow">
|
||||
{{ environment_form.environment_name.data }}
|
||||
</div>
|
||||
<div class="accordion-table__item__expanded-role col col--grow">
|
||||
<div class="right">
|
||||
<span v-html="role">
|
||||
</span>
|
||||
<div class="icon-link" v-on:click="toggle">
|
||||
{{ Icon("edit") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-list__role-select" v-show="expanded">
|
||||
{{ environment_form.role.label }}
|
||||
{{ environment_form.role(**{"v-on:change": "radioChange", "class": "member-list____role-select__radio"}) }}
|
||||
<button
|
||||
class="usa-button"
|
||||
type="button"
|
||||
v-on:click="toggle"
|
||||
>
|
||||
{{ "common.close" | translate }}
|
||||
</button>
|
||||
{{ environment_form.environment_id() }}
|
||||
</div>
|
||||
</div>
|
||||
</environment-role>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="accordion-table__item__action-group">
|
||||
{% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
|
||||
<a class="usa-button button-danger" v-on:click="openModal('{{ delete_modal_id }}')">
|
||||
{{ "portfolios.applications.remove_member.button" | translate }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endcall %}
|
||||
{{ member_form.role_id() }}
|
||||
</li>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
@@ -1,76 +0,0 @@
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
|
||||
|
||||
<div class="application-list-item">
|
||||
<header>
|
||||
<div class="responsive-table-wrapper__header">
|
||||
<div class='responsive-table-wrapper__title'>
|
||||
<div class='h3'>{{ 'portfolios.applications.environments_heading' | translate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="accordion-table accordion-table-list">
|
||||
<div class="accordion-table__head">
|
||||
<span>{{ "portfolios.applications.environments.name" | translate }}</span>
|
||||
</div>
|
||||
|
||||
<ul class="accordion-table__items">
|
||||
{% for env in environments_obj %}
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content">
|
||||
<span>
|
||||
{{ env['name'] }}
|
||||
</span>
|
||||
|
||||
<span class="icon-link icon-link--large accordion-table__item__toggler">
|
||||
{% set open_members_button %}
|
||||
{{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_down') }}
|
||||
{% endset %}
|
||||
|
||||
{% set close_members_button %}
|
||||
{{ "common.members" | translate }} ({{ env['member_count'] }}) {{ Icon('caret_up') }}
|
||||
{% endset %}
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=open_members_button,
|
||||
close_html=close_members_button,
|
||||
section_name="members"
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{% call ToggleSection(section_name="members") %}
|
||||
<ul>
|
||||
{% for member in env['members'] %}
|
||||
<li class="accordion-table__item__expanded">
|
||||
<div class="accordion-table__item__expanded_first">{{ member }}</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcall %}
|
||||
|
||||
{% call ToggleSection(section_name="edit") %}
|
||||
<ul>
|
||||
<li class="accordion-table__item__expanded">
|
||||
<div>
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="form-col form-col--half">
|
||||
Row here
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
{% endcall %}
|
||||
</li>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,47 +0,0 @@
|
||||
{% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
|
||||
|
||||
{% for member in team_form.members %}
|
||||
{% set user_permissions = [member.permission_sets.perms_team_mgmt, member.permission_sets.perms_env_mgmt, member.permission_sets.perms_del_env] %}
|
||||
|
||||
{% macro PermissionField(value) %}
|
||||
<div class="col col--grow user-permission{% if "Edit" in value or "Yes" in value %} green{% endif %}">{{ value }}</div>
|
||||
{% endmacro %}
|
||||
|
||||
<toggler inline-template>
|
||||
<li class="accordion-table__item">
|
||||
<div class="accordion-table__item-content row">
|
||||
<div class="col col--grow">{{ member.user_name.data }}</div>
|
||||
{% for permission in user_permissions %}
|
||||
{% set perm = dict(permission.choices).get(permission.data) %}
|
||||
{{ PermissionField(perm) }}
|
||||
{% endfor %}
|
||||
<div class="col col--grow icon-link icon-link--large accordion-table__item__toggler">
|
||||
{% set open_html %}
|
||||
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ member.environment_roles | length }}) {{ Icon('caret_down') }}
|
||||
{% endset %}
|
||||
|
||||
{% set close_html %}
|
||||
{{ "portfolios.applications.team_settings.environments" | translate }} ({{ member.environment_roles | length }}) {{ Icon('caret_up') }}
|
||||
{% endset %}
|
||||
|
||||
{{
|
||||
ToggleButton(
|
||||
open_html=open_html,
|
||||
close_html=close_html,
|
||||
section_name="environments"
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
{% call ToggleSection(section_name="environments") %}
|
||||
<ul>
|
||||
{% for environment in member.environment_roles %}
|
||||
<li class="accordion-table__item__expanded">
|
||||
{{ environment.environment_name.data }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endcall %}
|
||||
</li>
|
||||
</toggler>
|
||||
{% endfor %}
|
||||
@@ -1,11 +1,11 @@
|
||||
{% extends "portfolios/base.html" %}
|
||||
|
||||
{% from "components/sticky_cta.html" import StickyCTA %}
|
||||
|
||||
{% block portfolio_header %}
|
||||
<div class='portfolio-header'>
|
||||
<div class='portfolio-header__name'>
|
||||
{{ secondary_breadcrumb }}
|
||||
</div>
|
||||
</div>
|
||||
{% if application %}
|
||||
{{ StickyCTA(text=application.name, return_link_url=url_for('applications.portfolio_applications', portfolio_id=application.portfolio_id), return_link_text="BACK TO APPLICATIONS") }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block portfolio_content %}
|
||||
|
||||
@@ -51,12 +51,6 @@
|
||||
<span>{{ "portfolios.applications.app_settings_text" | translate }}</span>
|
||||
</a>
|
||||
<div class='separator'></div>
|
||||
<a
|
||||
href="{{ url_for('applications.team', application_id=application.id) }}"
|
||||
class='icon-link'>
|
||||
<span>{{ "portfolios.applications.team_text" | translate }} ({{ application.members | length }})</span>
|
||||
</a>
|
||||
<div class='separator'></div>
|
||||
{% set has_environments = 0 < (application.environments|length) %}
|
||||
<a class='icon-link triangle-box' v-on:click="toggleSection('{{ section_name }}')" disabled="{{ not has_environments }}">
|
||||
<span>Environments ({{ application.environments|length }})</span>
|
||||
|
||||
@@ -3,16 +3,19 @@
|
||||
{% 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 %}
|
||||
|
||||
{% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %}
|
||||
|
||||
{% block application_content %}
|
||||
|
||||
<div class='subheading'>{{ 'portfolios.applications.settings_heading' | translate }}</div>
|
||||
<div class='subheading'>{{ 'portfolios.applications.settings.name_description' | translate }}</div>
|
||||
|
||||
{% if user_can(permissions.EDIT_APPLICATION) %}
|
||||
<base-form inline-template>
|
||||
@@ -20,32 +23,16 @@
|
||||
<div class="panel">
|
||||
<div class="panel__content">
|
||||
{{ application_form.csrf_token }}
|
||||
<p>
|
||||
{{ "fragments.edit_application_form.explain" | translate }}
|
||||
</p>
|
||||
<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 class="form-col form-col--third">
|
||||
{% if user_can(permissions.DELETE_APPLICATION) %}
|
||||
<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>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel__footer">
|
||||
<div class="action-group">
|
||||
{{ SaveButton('common.save'|translate) }}
|
||||
{{ SaveButton('common.save_changes'|translate) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,26 +68,221 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="application-environments">
|
||||
<div class="accordion-table responsive-table-wrapper panel">
|
||||
{% if g.matchesPath("application-environments") %}
|
||||
{% include "fragments/flash.html" %}
|
||||
{% 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(permissions.EDIT_ENVIRONMENT) %}
|
||||
{% include "fragments/applications/edit_environments.html" %}
|
||||
{% 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>
|
||||
|
||||
{% if user_can(permissions.CREATE_ENVIRONMENT) %}
|
||||
{% include "fragments/applications/add_new_environment.html" %}
|
||||
{% 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 %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Member</th>
|
||||
<th>Project Permissions</th>
|
||||
<th>Environment Access</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for member in members %}
|
||||
<tr>
|
||||
<td>{{ member.user_name }}</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>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% elif user_can(permissions.VIEW_ENVIRONMENT) %}
|
||||
{% include "fragments/applications/read_only_environments.html" %}
|
||||
{% 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'] %}
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
||||
@@ -1,154 +0,0 @@
|
||||
{% extends "portfolios/applications/base.html" %}
|
||||
|
||||
{% from "components/icon.html" import Icon %}
|
||||
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
|
||||
{% from 'components/save_button.html' import SaveButton %}
|
||||
{% import "fragments/applications/new_member_modal_content.html" as member_steps %}
|
||||
{% from "components/alert.html" import Alert %}
|
||||
{% from "components/delete_confirmation.html" import DeleteConfirmation %}
|
||||
{% from "components/modal.html" import Modal %}
|
||||
|
||||
{% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %}
|
||||
|
||||
{% block application_content %}
|
||||
{% 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.team_settings.subheading' | translate }}
|
||||
</div>
|
||||
|
||||
<section class="member-list application-list" id="application-members">
|
||||
<base-form inline-template>
|
||||
<form method='POST' id="team" action='{{ url_for("applications.update_team", application_id=application.id) }}' autocomplete="off" enctype="multipart/form-data">
|
||||
<div class='responsive-table-wrapper panel'>
|
||||
{% if g.matchesPath("application-members") %}
|
||||
{% include "fragments/flash.html" %}
|
||||
{% endif %}
|
||||
<header>
|
||||
<div class="responsive-table-wrapper__header">
|
||||
<div class="responsive-table-wrapper__title row">
|
||||
<div class="h3">
|
||||
{{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
|
||||
<p class="member-list__subhead">Members ({{ team_form.members | length }})</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="accordion-table accordion-table-list">
|
||||
<div class="accordion-table__head row">
|
||||
<div class="col col--grow">
|
||||
{{ "common.name" | translate }}
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
{{ "portfolios.applications.team_settings.section.table.team_management" | translate }}
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
{{ "portfolios.applications.team_settings.section.table.environment_management" | translate }}
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
{{ "portfolios.applications.team_settings.section.table.delete_access" | translate }}
|
||||
</div>
|
||||
<div class="col col--grow">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<ul class="accordion-table__items">
|
||||
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
|
||||
{% include "fragments/applications/edit_team.html" %}
|
||||
{% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
|
||||
{% include "fragments/applications/read_only_team.html" %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="panel__footer">
|
||||
<div class="action-group save">
|
||||
{% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
|
||||
{{ SaveButton(text=('common.save' | translate), element="input", form="team") }}
|
||||
{% endif %}
|
||||
|
||||
{% set new_member_modal_name = "add-app-mem" %}
|
||||
{% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
|
||||
<a class="icon-link modal-link" v-on:click="openModal('{{ new_member_modal_name }}')">
|
||||
{{ "portfolios.admin.add_new_member" | translate }}
|
||||
{{ Icon("plus") }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</base-form>
|
||||
|
||||
{% if user_can(permissions.DELETE_APPLICATION_MEMBER) %}
|
||||
{% for member_form in team_form.members %}
|
||||
{% set delete_modal_id = "delete-user-{}".format(member_form.id) %}
|
||||
{% call Modal(name=delete_modal_id) %}
|
||||
<h1>
|
||||
{{ "portfolios.applications.remove_member.header" | translate }}
|
||||
</h1>
|
||||
|
||||
{{
|
||||
Alert(
|
||||
title=("components.modal.destructive_title" | translate),
|
||||
message=("portfolios.applications.remove_member.alert.message" | translate({"user_name": member_form.user_name.data})),
|
||||
level="warning"
|
||||
)
|
||||
}}
|
||||
|
||||
{{
|
||||
DeleteConfirmation(
|
||||
modal_id=delete_modal_id,
|
||||
delete_text=('portfolios.applications.remove_member.button' | translate),
|
||||
delete_action=url_for('applications.remove_member', application_id=application.id, application_role_id=member_form.data.role_id),
|
||||
form=member_form
|
||||
)
|
||||
}}
|
||||
{% endcall %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% 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 %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user