Extract global actions from datatable

frontend/admin/vue-components/AccountingView.vue

@@ -1,13 +1,14 @@
 <template>
   <adminlte-box :title="'Accounting for user ' + $route.params.id">
+    <button slot="tools" class="btn btn-primary" @click="newAccountingDialog.visible = true">Create New Policy</button>
+
     <div class="alert alert-danger" v-if="communicationError">
       <strong>Error:</strong> {{communicationError}}
     </div>
 
     <data-table
     :headers.once="table.headers"
     :rows="table.rows"
-    :globalActions="table.globalActions"
     :rowActions="table.rowActions">
     </data-table>
 
@@ -47,10 +48,6 @@
             "ID", "Image", "Workspace", "Vol. source", "Vol. target", "Readonly"
           ],
           rows: [],
-          globalActions: [{
-            label: "Create New Entry",
-            callback: () => {this.newAccountingDialog.visible = true;}
-          }],
           rowActions: [{
             label: "Remove",
             callback: this.removeAction

frontend/admin/vue-components/ApplicationsView.vue

@@ -1,13 +1,14 @@
 <template>
   <adminlte-box title="Applications">
+    <button slot="tools" class="btn btn-primary" @click="newApplicationDialog.visible = true">Add New Application</button>
+
     <div class="alert alert-danger" v-if="communicationError">
       <strong>Error:</strong> {{communicationError}}
     </div>
 
     <data-table
     :headers.once="table.headers"
     :rows="table.rows"
-    :globalActions="table.globalActions"
     :rowActions="table.rowActions">
     </data-table>
 
@@ -43,10 +44,6 @@
         table: {
           headers: ["ID", "Image"],
           rows: [],
-          globalActions: [{
-            label: "Create New Entry",
-            callback: () => {this.newApplicationDialog.visible = true;}
-          }],
           rowActions: [{
             label: "Remove",
             callback: this.removeAction

frontend/admin/vue-components/ContainersView.vue

@@ -6,7 +6,6 @@
     <data-table
     :headers.once="table.headers"
     :rows="table.rows"
-    :globalActions="table.globalActions"
     :rowActions="table.rowActions">
     </data-table>
     <confirm-dialog

frontend/admin/vue-components/UsersView.vue

@@ -1,13 +1,14 @@
 <template>
   <adminlte-box title="Users">
+    <button slot="tools" class="btn btn-primary" @click="newUserDialog.visible = true">Create New User</button>
+
     <div class="alert alert-danger" v-if="communicationError">
       <strong>Error:</strong> {{communicationError}}
     </div>
 
     <data-table
     :headers.once="table.headers"
     :rows="table.rows"
-    :globalActions="table.globalActions"
     :rowActions="table.rowActions">
     </data-table>
     <new-user-dialog
@@ -39,10 +40,6 @@
         table: {
           headers: ["ID", "Username"],
           rows: [],
-          globalActions: [{
-            label: "Create New Entry",
-            callback: () => {this.newUserDialog.visible = true;}
-          }],
           rowActions: [{
             label: "Policies",
             callback: this.showPolicyAction,

frontend/tests/tests/vue/components/test_DataTable.js

@@ -6,13 +6,9 @@ QUnit.test("rendering", function (assert) {
   assert.equal(helpers.getRenderedText(DataTable, {
     headers: ["foo", "bar"],
     rows: [[1,2], [3,4]],
-    globalActions: [{
-      label: "New",
-      callback: function() {}
-    }],
     rowActions: [{
       label: "Remove",
       callback: function() {}
     }]
-  }), "New foobar Actions 12 Remove34 Remove");
+  }), "foobar Actions 12 Remove34 Remove");
 });

frontend/toolkit/DataTable.vue

@@ -1,39 +1,34 @@
 <template>
-  <div class="column-container">
-    <div class="align-right">
-      <button v-for="action in globalActions" class="btn btn-primary" @click="action.callback">{{action.label}}</button>
-    </div>
-    <div class="table-responsive">
-      <table class="table table-hover no-margin">
-        <thead>
-          <tr>
-            <th v-for="header in headers">{{header}}</th>
-            <th v-if="rowActions.length > 0">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, row_index) in rows">
-            <template v-for="(value, col_index) in row">
-              <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
-              <td v-else>{{value}}</td>
-            </template>
-            <td>
-              <button v-for="action in rowActions"
-              :class="buttonClassFromType(action.type)"
-              style="margin-right: 10px"
-              @click="action.callback(row)">{{action.label}}</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+  <div class="table-responsive">
+    <table class="table table-hover no-margin">
+      <thead>
+        <tr>
+          <th v-for="header in headers">{{header}}</th>
+          <th v-if="rowActions.length > 0">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, row_index) in rows">
+          <template v-for="(value, col_index) in row">
+            <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
+            <td v-else>{{value}}</td>
+          </template>
+          <td>
+            <button v-for="action in rowActions"
+            :class="buttonClassFromType(action.type)"
+            style="margin-right: 10px"
+            @click="action.callback(row)">{{action.label}}</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 
 <script>
   module.exports = {
     props: [
-      "headers", "rows", "globalActions", "rowActions"
+      "headers", "rows", "rowActions"
     ],
     methods: {
       isBoolean: function(value) {
@@ -47,14 +42,3 @@
     }
   };
 </script>
-
-<style scoped>
-  .column-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .align-right {
-    align-self: flex-end;
-  }
-</style>

selenium_tests/test_user_accounting.py

@@ -7,13 +7,13 @@ class TestUserAccounting(AdminDriverTest):
     def test_create_new_entry_button(self):
         self.click_first_element_located(By.LINK_TEXT, "Users")
 
-        self.click_first_button("Create New Entry")
+        self.click_first_button("Create New User")
         self.click_modal_footer_button("Cancel")
 
     def test_create_and_remove_user(self):
         self.click_first_element_located(By.LINK_TEXT, "Users")
 
-        self.click_first_button("Create New Entry")
+        self.click_first_button("Create New User")
         self.type_text_in_element_located(By.CSS_SELECTOR, ".modal-body > form > div > input", "mrenou")
         self.click_modal_footer_button("Submit")