Add Save Button to edit version of team table

-adds base form component
-Save button does not function properly yet
-alphabetizes imports on base-form

js/components/forms/base_form.js

@@ -1,26 +1,28 @@
 import ally from 'ally.js'
 
-import FormMixin from '../../mixins/form'
-import textinput from '../text_input'
-import optionsinput from '../options_input'
-import DateSelector from '../date_selector'
-import MultiStepModalForm from './multi_step_modal_form'
-import multicheckboxinput from '../multi_checkbox_input'
 import checkboxinput from '../checkbox_input'
+import DateSelector from '../date_selector'
+import FormMixin from '../../mixins/form'
 import levelofwarrant from '../levelofwarrant'
 import Modal from '../../mixins/modal'
+import multicheckboxinput from '../multi_checkbox_input'
+import MultiStepModalForm from './multi_step_modal_form'
+import optionsinput from '../options_input'
+import textinput from '../text_input'
+import toggler from '../toggler'
 
 export default {
   name: 'base-form',
   components: {
-    textinput,
-    optionsinput,
-    DateSelector,
-    MultiStepModalForm,
-    multicheckboxinput,
     checkboxinput,
+    DateSelector,
     levelofwarrant,
     Modal,
+    multicheckboxinput,
+    MultiStepModalForm,
+    optionsinput,
+    textinput,
+    toggler,
   },
   mixins: [FormMixin],
 }

templates/portfolios/applications/team.html

@@ -2,6 +2,7 @@
 
 {% from "components/empty_state.html" import EmptyState %}
 {% from "components/icon.html" import Icon %}
+{% from 'components/save_button.html' import SaveButton %}
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
 
 {% set secondary_breadcrumb = 'portfolios.applications.team_settings.title' | translate({ "application_name": application.name }) %}
@@ -24,60 +25,65 @@
     </div>
 
     <section class="member-list application-list" id="application-members">
-      <div class='responsive-table-wrapper panel'>
+      <base-form inline-template>
-        {% if g.matchesPath("application-members") %}
+        <div class='responsive-table-wrapper panel'>
-          {% include "fragments/flash.html" %}
+          {% if g.matchesPath("application-members") %}
-        {% endif %}
+            {% include "fragments/flash.html" %}
-        <header>
+          {% endif %}
-          <div class="responsive-table-wrapper__header">
+          <header>
-            <div class="responsive-table-wrapper__title">
+            <div class="responsive-table-wrapper__header">
-              <div class="h3">
+              <div class="responsive-table-wrapper__title">
-                {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
+                <div class="h3">
+                  {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }}
+                </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">
+                {{ "common.name" | translate }}
+              </div>
+              <div class="col col--grow">
+                {{ "portfolios.applications.team_settings.section.table.delete_access" | 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.team_management" | translate }}
+              </div>
+              <div class="col col--grow">
+                &nbsp;
               </div>
             </div>
-            <a class='icon-link'>
+            <ul class="accordion-table__items">
-              {{ Icon('info') }}
+              {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
-              {{ "portfolios.admin.settings_info" | translate }}
+                {% include "fragments/applications/edit_team.html" %}
-            </a>
+              {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %}
+                {% include "fragments/applications/read_only_team.html" %}
+              {% endif %}
+            </ul>
           </div>
-        </header>
 
-        <div class="accordion-table accordion-table-list">
+          <div class="panel__footer">
-          <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.delete_access" | 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.team_management" | translate }}
-            </div>
-            <div class="col col--grow">
-              &nbsp;
-            </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="members-table-footer">
             <div class="action-group save">
+              {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %}
+                {{ SaveButton(text=('common.save' | translate), element="input", form="member-perms") }}
+              {% endif %}
+
               {% if user_can(permissions.CREATE_APPLICATION_MEMBER) %}
                 {% include "fragments/applications/add_new_application_member.html" %}
               {% endif %}
             </div>
           </div>
-        </form>
+
-      </div>
+        </div>
+      </base-form>
     </section>
   {% endif %}
 {% endblock %}