From f54b0e729a5fa8d223df03f824e767ca413b0127 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Tue, 3 Mar 2020 10:02:19 -0500
Subject: [PATCH] Fix data manager table slot usage; this makes the header with
 the name and 'reload' icon display again.  Also refactor a few computed
 props. Should add this to eslint to catch these easier.

---
 .../admin/DataManager/DataManagerTable.vue    | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/client/galaxy/scripts/components/admin/DataManager/DataManagerTable.vue b/client/galaxy/scripts/components/admin/DataManager/DataManagerTable.vue
index fa1139df378..f749b464514 100644
--- a/client/galaxy/scripts/components/admin/DataManager/DataManagerTable.vue
+++ b/client/galaxy/scripts/components/admin/DataManager/DataManagerTable.vue
@@ -13,22 +13,24 @@
             <b-row>
                 <b-col>
                     <b-card id="data-table-card" flush>
-                        <b-container v-slot:header>
-                            <b-row align-v="center">
-                                <b-col cols="auto">
-                                    <b-button
-                                        @click="reload()"
-                                        v-b-tooltip.hover
-                                        :title="'Reload ' + this.dataTable['name'] + ' tool data table'"
-                                    >
-                                        <span class="fa fa-refresh" />
-                                    </b-button>
-                                </b-col>
-                                <b-col>
-                                    <b>{{ this.dataTable["name"] }}</b>
-                                </b-col>
-                            </b-row>
-                        </b-container>
+                        <template v-slot:header>
+                            <b-container>
+                                <b-row align-v="center">
+                                    <b-col cols="auto">
+                                        <b-button
+                                            @click="reload()"
+                                            v-b-tooltip.hover
+                                            :title="buttonLabel"
+                                        >
+                                            <span class="fa fa-refresh" />
+                                        </b-button>
+                                    </b-col>
+                                    <b-col>
+                                        <b>{{ dataTableName }}</b>
+                                    </b-col>
+                                </b-row>
+                            </b-container>
+                        </template>
                         <b-table
                             :fields="fields(this.dataTable['columns'])"
                             :items="dataTable['data']"
@@ -68,6 +70,12 @@ export default {
         };
     },
     computed: {
+        dataTableName() {
+            return this.dataTable && this.dataTable.name ? this.dataTable.name : 'null';
+        },
+        buttonLabel() {
+            return `Reload ${this.dataTableName} tool data table`;
+        },
         breadcrumbItems() {
             return [
                 {
@@ -75,7 +83,7 @@ export default {
                     to: "/"
                 },
                 {
-                    text: this.dataTable["name"]
+                    text: this.dataTableName
                 }
             ];
         }
@@ -88,7 +96,7 @@ export default {
         },
         reload() {
             axios
-                .get(`${getAppRoot()}data_manager/reload_tool_data_tables?table_name=${this.dataTable["name"]}`)
+                .get(`${getAppRoot()}data_manager/reload_tool_data_tables?table_name=${this.dataTableName}`)
                 .then(response => {
                     if (response.data.dataTable) {
                         this.dataTable = response.data.dataTable;