working commit

atst/forms/data.py

@@ -187,17 +187,18 @@ ENVIRONMENT_ROLES = [
 ]
 
 ENVIRONMENT_ROLES = [
+    (None, {"name": "No access", "description": "No environment access."}),
     (
-        "developer",
+        "meow",
         {
-            "name": "Developer",
+            "name": "Meow",
             "description": "Configures cloud-based IaaS and PaaS computing, networking, and storage services.",
         },
     ),
     (
-        "owner",
+        "woof",
         {
-            "name": "Workspace Owner",
+            "name": "Woof",
             "description": "Can add, edit, deactivate access to all projects, environments, and members. Can view budget reports. Can start and edit JEDI Cloud requests.",
         },
     ),

atst/routes/workspaces.py

@@ -214,7 +214,7 @@ def view_member(workspace_id, member_id):
         "edit this workspace user",
     )
     member = WorkspaceUsers.get(workspace_id, member_id)
-    form = EditMemberForm(workspace_role=member.role)
+    form = EditMemberForm(workspace_role=member.role, environment_role="")
     return render_template(
         "workspaces/members/edit.html", form=form, workspace=workspace, member=member
     )

templates/workspaces/members/edit.html

@@ -3,10 +3,12 @@
 {% from "components/icon.html" import Icon %}
 {% from "components/modal.html" import Modal %}
 {% from "components/selector.html" import Selector %}
+{% from "components/options_input.html" import OptionsInput %}
 
 {% block content %}
 
-<form method="POST" action="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=member.user_id) }}" autocomplete="false">
+<edit-workspace-member inline-template v-bind:initial-data='{{ form.data|tojson }}' v-bind:choices='{{ form.environment_role.choices | tojson }}'>
+  <form method="POST" action="{{ url_for('workspaces.update_member', workspace_id=workspace.id, member_id=member.user_id) }}" autocomplete="false">
     {{ form.csrf_token }}
 
     <div class='panel member-card'>
@@ -48,100 +50,59 @@
         </button>
       </div>
     </div>
+      {{ Selector(form.environment_role) }}
 
     {% call Modal(name='rolesModal', dismissable=False) %}
-  <div class="block-list">
+      <div class='block-list'>
-    <header class="block-list__header">
-      <h2 class="block-list__title">
-        Environment access for {{ member.user.full_name }}
-        <div class='subtitle'>Project Name - Environment Name</div>
-      </h2>
-    </header>
-
         <ul>
+          {% for choice in form.environment_role.choices %}
           <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='developer' />
-        <label for='developer'>
-          <dl>
-            <dt>Developer</dt>
-            <dd>Configures cloud-based IaaS and PaaS computing, networking, and storage services.</dd>
-          </dl>
-        </label>
-      </li>
 
-      <li class='block-list__item block-list__item--selectable'>
+            {% if choice[0] != ""  %}
-        <input type='radio' name='radio' id='database_admin' />
+              <input
-        <label for='database_admin'>
+                name='env'
+                v-on:change='change'
+                type='radio'
+                id="env_{{ choice[0] }}"
+                value='{{ choice[0] }}'
+                {% if role == choice[0] %}
+                  checked='checked'
+                {% endif %}
+              />
+              <label for="env_{{ choice[0] }}">
+                {% if choice[1].description %}
                   <dl>
-            <dt>Database Administrator</dt>
+                    <dt>{{ choice[1].name }}</dt>
-            <dd>Configures cloud-based database services.</dd>
+                    <dd>{{ choice[1].description }}</dd>
-          </dl>
-        </label>
-      </li>
-
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='devops' />
-        <label for='devops'>
-          <dl>
-            <dt>DevOps</dt>
-            <dd>Provisions, deprovisions, and deploys cloud-based IaaS and PaaS computing, networking, and storage services, including pre-configured machine images.</dd>
-          </dl>
-        </label>
-      </li>
-
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='billing_admin' />
-        <label for='billing_admin'>
-          <dl>
-            <dt>Billing Administrator</dt>
-            <dd>Views cloud resource usage, budget reports, and invoices; Tracks budgets, including spend reports, cost planning and projections, and sets limits based on cloud service usage.</dd>
-          </dl>
-        </label>
-      </li>
-
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='security_admin' />
-        <label for='security_admin'>
-          <dl>
-            <dt>Security Administrator</dt>
-            <dd>Accesses information security and control tools of cloud resources which include viewing cloud resource usage logging, user roles and permissioning history.</dd>
-          </dl>
-        </label>
-      </li>
-
-      <li class='block-list__item block-list__item--selectable'>
-        <input type='radio' name='radio' id='financial_auditor' />
-        <label for='financial_auditor'>
-          <dl>
-            <dt>Financial Auditor</dt>
-            <dd>Views cloud resource usage and budget reports.</dd>
                   </dl>
+                {% else %}
+                  {{ choice[1].name }}
+                {% endif %}
               </label>
+              {% endif %}
           </li>
+          {% endfor %}
         </ul>
-
         <div class='block-list__footer'>
           <div class='action-group'>
             <a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
-        <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
+            <a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">Cancel</a>
           </div>
         </div>
-
       </div>
-
     {% endcall %}
 
     <div is='toggler' default-visible class='block-list project-list-item'>
-    <template slot-scope='props'>
+      <template slot-scope='{ isVisible, toggle }'>
         <header class='block-list__header'>
-      <button type='button' v-on:click='props.toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
+        <button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
-          <template v-if='props.isVisible'>{{ Icon('caret_down') }}</template>
+            <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
             <template v-else>{{ Icon('caret_right') }}</template>
             <h3 class="block-list__title">Code.mil</h3>
           </button>
           <span><a href="#" class="icon-link icon-link--danger">revoke all access</a></span>
         </header>
-      <ul v-show='props.isVisible'>
+        <ul v-show='isVisible'>
           <li class='block-list__item project-list-item__environment'>
             <span class='project-list-item__environment'>
               Development
@@ -171,16 +132,16 @@
     </div>
 
     <div is="toggler" class='block-list project-list-item'>
-    <template slot-scope='props'>
+      <template slot-scope='{ isVisible, toggle }'>
         <header class='block-list__header'>
-      <button type='button' v-on:click='props.toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
+        <button v-on:click='toggle' class='icon-link icon-link--large icon-link--default spend-table__project__toggler'>
-          <template v-if='props.isVisible'>{{ Icon('caret_down') }}</template>
+            <template v-if='isVisible'>{{ Icon('caret_down') }}</template>
             <template v-else>{{ Icon('caret_right') }}</template>
             <h3 class="block-list__title">Digital Dojo</h3>
           </button>
           <span class="label">no access</span>
         </header>
-      <ul v-show='props.isVisible'>
+        <ul v-show='isVisible'>
           <li class='block-list__item project-list-item__environment'>
             <span class='project-list-item__environment'>
               Development
@@ -219,7 +180,8 @@
       </a>
     </div>
 
-</form>
+  </form>
+</edit-workspace-member>