Add a description to env roles modal

atst/forms/data.py

@@ -155,6 +155,11 @@ ENVIRONMENT_ROLES = [
     ),
 ]
 
+ENV_ROLE_MODAL_DESCRIPTION = {
+    "header": "Assign Environment Role",
+    "body": "An environment role determines the permissions a member of the workspace assumes when using the JEDI Cloud.\n\nA member may have different environment roles across different projects. A member can only have one assigned environment role in a given environment.",
+}
+
 FUNDING_TYPES = [
     ("", "- Select -"),
     ("RDTE", "Research, Development, Testing & Evaluation (RDT&E)"),

atst/routes/workspaces.py

@@ -21,7 +21,7 @@ from atst.forms.new_project import NewProjectForm
 from atst.forms.new_member import NewMemberForm
 from atst.forms.edit_member import EditMemberForm
 from atst.forms.workspace import WorkspaceForm
-from atst.forms.data import ENVIRONMENT_ROLES
+from atst.forms.data import ENVIRONMENT_ROLES, ENV_ROLE_MODAL_DESCRIPTION
 from atst.domain.authz import Authorization
 from atst.models.permissions import Permissions
 
@@ -238,6 +238,7 @@ def view_member(workspace_id, member_id):
         projects=projects,
         form=form,
         choices=ENVIRONMENT_ROLES,
+        env_role_modal_description=ENV_ROLE_MODAL_DESCRIPTION,
         EnvironmentRoles=EnvironmentRoles,
     )
 

templates/components/modal.html

@@ -1,11 +1,16 @@
 {% from "components/icon.html" import Icon %}
 
-{% macro Modal(name, dismissable=False) -%}
+{% macro Modal(name, dismissable=False, description=None) -%}
   <div v-show="activeModal === '{{name}}'" v-cloak>
     <div class='modal {% if dismissable %}modal--dismissable{% endif%}'>
       <div class='modal__container'>
         <div class='modal__dialog' role='dialog' aria-modal='true'>
           <div class='modal__body'>
+              {% if description %}
+                <h1>{{ description.header }}</h1>
+                <div>{{ description.body }}</div>
+              {% endif %}
+
               {{ caller() }}
 
               {% if dismissable %}

templates/workspaces/members/edit.html

@@ -76,7 +76,7 @@
             <div class='project-list-item__environment__actions'>
               <span v-bind:class="label_class" v-html:on=displayName></span>
               <button v-on:click="openModal('{{ env.name }}RolesModal')" type="button" class="icon-link">set role</button>
-              {% call Modal(name=env.name + 'RolesModal', dismissable=False) %}
+              {% call Modal(name=env.name + 'RolesModal', dismissable=False, description=env_role_modal_description) %}
                   <div class='block-list'>
                     <ul>
                       {% for choice in choices %}