diff --git a/static/icons/ellipsis.svg b/static/icons/ellipsis.svg new file mode 100644 index 00000000..53c45a18 --- /dev/null +++ b/static/icons/ellipsis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index 5508bf43..9a32c009 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -94,6 +94,10 @@ border-right: 10px solid transparent; border-bottom: 10px solid $color-blue-light; } + + &--active { + background-color: $color-gray-lightest; + } } &-toggle-content { diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 2102cc2e..4b2b3c65 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -149,6 +149,7 @@ .member-list { .responsive-table-wrapper { margin-bottom: 0; + overflow: visible; table.atat-table { table-layout: fixed; @@ -213,12 +214,13 @@ } .env_role { - width: 50%; - } + &--th { + width: 50%; + } - .form-col--two-thirds { - width: 66.66%; - flex-basis: unset; + &--td { + position: relative; + } } .row { @@ -236,6 +238,47 @@ .env-role__role { white-space: nowrap; display: inline-block; + margin-right: $gap * 6; + } + } + + .app-member-menu { + position: absolute; + top: $gap; + right: $gap * 2; + + .accordion-table__item__toggler { + padding: $gap / 3; + border: 1px solid $color-gray-lighter; + border-radius: 3px; + cursor: pointer; + + .icon { + margin: $gap / 2; + } + } + + &__toggle { + position: absolute; + right: 0; + top: 30px; + background-color: $color-white; + border: 1px solid $color-gray-light; + z-index: 1; + margin-top: 0; + + a { + display: block; + padding: $gap; + border-bottom: 1px solid $color-gray-lighter; + text-decoration: none; + color: $color-black; + cursor: pointer; + + &:last-child { + border-bottom: 0; + } + } } } } diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss index 1086215b..f313756c 100644 --- a/styles/elements/_tables.scss +++ b/styles/elements/_tables.scss @@ -12,6 +12,8 @@ table.atat-table { border-collapse: separate; } + background: $color-white; + th, td { &.table-cell { @@ -46,7 +48,7 @@ table.atat-table { tr { th, td { - background-color: $color-white; + background: none; margin: 0; padding: $gap * 2; border: 1px solid $color-gray-lighter; diff --git a/styles/sections/_application_edit.scss b/styles/sections/_application_edit.scss index 9ee0e671..1c1c395d 100644 --- a/styles/sections/_application_edit.scss +++ b/styles/sections/_application_edit.scss @@ -118,69 +118,6 @@ } } -.environment-role { - padding: ($gap * 2) 0; - - h4 { - margin-bottom: $gap / 4; - } - - &__users { - background-color: $color-gray-lightest; - padding: ($gap * 1.2) ($gap * 0.6); - font-size: $small-font-size; - display: flex; - flex-wrap: wrap; - - .environment-role__user { - background-color: $color-white; - border-radius: 0.5rem; - padding: ($gap / 2) $gap; - border: solid 2px $color-blue; - margin: $gap; - white-space: nowrap; - width: 20rem; - position: relative; - height: 3.6rem; - - &-field { - position: absolute; - background-color: $color-white; - margin-top: $gap * 2; - padding: $gap; - left: -0.1rem; - border: solid 1px $color-gray-light; - width: 20rem; - z-index: 3; - - .usa-input { - margin: 0; - - li { - background-color: $color-white; - border: none; - } - } - } - - &.unassigned { - border: solid 1px $color-gray-light; - } - - .icon-link { - padding: 0; - } - } - - .environment-role__no-user { - margin: $gap; - padding: ($gap / 2) $gap; - font-weight: $font-normal; - height: 3.6rem; - } - } -} - .environment-name--gray { font-weight: $font-normal; color: $color-gray-medium; diff --git a/templates/applications/fragments/members.html b/templates/applications/fragments/members.html index 496469d0..ac4aaffb 100644 --- a/templates/applications/fragments/members.html +++ b/templates/applications/fragments/members.html @@ -6,6 +6,7 @@ {% from "components/modal.html" import Modal %} {% from "components/multi_step_modal_form.html" import MultiStepModalForm %} {% from "components/save_button.html" import SaveButton %} +{% from "components/toggle_list.html" import ToggleButton, ToggleSection %} {% macro MemberManagementTemplate( application, @@ -54,7 +55,7 @@ {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} {% call Modal(resend_invite_modal, classes="form-content--app-mem") %} @@ -90,67 +91,84 @@
- - - - - - - - - - {% for member in members %} - {% set modal_name = "edit_member-{}".format(loop.index) %} + +
NameApplication PermissionsEnvironment Access
+ - - - - + + + - {% endfor %} - -
- {{ member.user_name }} - - {{ Icon('edit') }} - -
- {% if member.role_status == 'pending' %} - {{ Label('envelope', 'invite pending', 'success', classes='label--below') }} - {% endif %} - -
- {% for perm, value in member.permission_sets.items() %} -
- {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }} -
- {% endfor %} -
-
-
- {% for env in member.environment_roles %} -
- - {{ env.environment_name }} - - - : {{ env.role }} - -
- {% endfor %} -
-
- {% if member.role_status == 'pending' -%} - {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %} - {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} - Resend Invite
- {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%} - {{ 'invites.revoke' | translate }} - {%- endif %} - {%- endif %} -
-
-
{{ "common.name" | translate }}{{ "portfolios.applications.members.form.app_perms.title" | translate }}{{ 'portfolios.applications.members.form.env_access.table_header' | translate }}
+ + + {% for member in members %} + {% set perms_modal = "edit_member-{}".format(loop.index) %} + + + {{ member.user_name }} + {% if member.role_status == 'pending' %} +
+ {{ Label('envelope', 'invite pending', 'success', classes='label--below') }} + {% endif %} + + + + + {% for perm, value in member.permission_sets.items() %} +
+ {{ ("portfolios.applications.members.{}.{}".format(perm, value)) | translate }} +
+ {% endfor %} + + + {% for env in member.environment_roles %} +
+ + {{ env.environment_name }} + + + : {{ env.role }} + +
+ {% endfor %} +
+ {% set toggle_button -%} + {{ Icon('ellipsis')}} + {%- endset %} + {% set section = "app_member_edit-{}".format(member.role_id) %} + + {{ + ToggleButton( + open_html=toggle_button, + close_html=toggle_button, + section_name=section, + active_style=True + ) + }} + {% call ToggleSection(section_name=section, classes="app-member-menu__toggle") %} + {% if user_can(permissions.EDIT_APPLICATION_MEMBER) -%} + + {{ "portfolios.applications.members.menu.edit" | translate }} + + {%- endif %} + {% if member.role_status == 'pending' -%} + {% set revoke_invite_modal = "revoke_invite_{}".format(member.role_id) %} + {% set resend_invite_modal = "resend_invite-{}".format(member.role_id) %} + + {{ "portfolios.applications.members.menu.resend" | translate }} + + {% if user_can(permissions.DELETE_APPLICATION_MEMBER) -%} + {{ 'invites.revoke' | translate }} + {%- endif %} + {%- endif %} + {% endcall %} +
+ + + {% endfor %} + + +
{% endif %} diff --git a/templates/components/toggle_list.html b/templates/components/toggle_list.html index 16556720..eddd3e1d 100644 --- a/templates/components/toggle_list.html +++ b/templates/components/toggle_list.html @@ -1,9 +1,9 @@ -{% macro ToggleButton(action, open_html, close_html, section_name, classes="") %} - - +{% macro ToggleButton(action, open_html, close_html, section_name, classes="", active_style=False) %} + + {{ close_html }} - + {{ open_html }} diff --git a/translations.yaml b/translations.yaml index 85d1f9fb..360d1daa 100644 --- a/translations.yaml +++ b/translations.yaml @@ -107,7 +107,7 @@ email: environment_ready: JEDI cloud environment ready flash: application: - created: + created: title: Application Saved message: '{application_name} has been successfully created. You may continue on to provision environments and assign team members now, or come back and complete these tasks at a later time.' updated: 'You have successfully updated the {application_name} application.' @@ -121,7 +121,7 @@ flash: new_ppoc_message: 'You have successfully added {ppoc_name} as the primary point of contact. You are no longer the PPoC.' new_ppoc_title: Primary point of contact updated success: Success! - new_application_member: + new_application_member: title: "{user_name}'s invitation has been sent" message: "{user_name}'s access to this Application is pending until they sign in for the first time." updated_application_team_settings: 'You have updated the {application_name} team settings.' @@ -342,7 +342,7 @@ portfolios:

step_2_header: Add Environments to {application_name} - step_2_description: Development, Testing, Staging, and Production environments are included by default. However, you can add, edit, and delete environments based on the needs of your Application. + step_2_description: Development, Testing, Staging, and Production environments are included by default. However, you can add, edit, and delete environments based on the needs of your Application. step_2_button_text: "Next: Add Members" step_3_header: Add Members to {application_name} step_3_description: "To proceed, you will need each member's email address and DOD ID. Within this section, you will also assign Application-level permissions and environment-level roles for each member." @@ -401,14 +401,18 @@ portfolios: del_env: label: Delete Application description: Delete this application. - env_access: + env_access: title: Environment Roles + table_header: Environment Access description: Additional role controls are available in the CSP console. Learn More next_button: "Next: Permissions" app_perms: title: Application Permissions description: Application permissions allow users to provision and modify applications and teams. Learn More add_member: Add Member + menu: + edit: Edit Roles and Permissions + resend: Resend Invite new: assign_roles: Assign Member Environments and Roles learn_more: Learn more about these roles @@ -416,6 +420,7 @@ portfolios: manage_envs: 'Allow member to add and rename environments within the application.' delete_envs: 'Allow member to delete environments within the application.' manage_team: 'Allow member to add, update, and remove members from the application team.' + verify: Verify Member Information perms_team_mgmt: 'False': View Team 'True': Edit Team