From d0d4579f134b1ef16df33d57f53d8e4aa8de45d0 Mon Sep 17 00:00:00 2001
From: Deep Tailor <deep.j.tailor@nasa.gov>
Date: Fri, 5 Jun 2020 15:09:59 -0700
Subject: [PATCH] Give users the option to hide table headers (#3085)

* working hide header config

* Simplified Inspector UI layout

* fix lint errors

Co-authored-by: charlesh88 <charlesh88@gmail.com>
---
 .../components/table-configuration.vue        | 24 ++++++++++++++++++-
 .../telemetryTable/components/table.vue       |  5 +++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/plugins/telemetryTable/components/table-configuration.vue b/src/plugins/telemetryTable/components/table-configuration.vue
index 364d287393..105f8a0995 100644
--- a/src/plugins/telemetryTable/components/table-configuration.vue
+++ b/src/plugins/telemetryTable/components/table-configuration.vue
@@ -2,7 +2,7 @@
 <div class="c-inspect-properties">
     <template v-if="isEditing">
         <div class="c-inspect-properties__header">
-            Table Column Size
+            Table Layout
         </div>
         <ul class="c-inspect-properties__section">
             <li class="c-inspect-properties__row">
@@ -21,6 +21,22 @@
                     >
                 </div>
             </li>
+            <li class="c-inspect-properties__row">
+                <div
+                    class="c-inspect-properties__label"
+                    title="Show or hide headers"
+                >
+                    <label for="header-visibility">Hide Header</label>
+                </div>
+                <div class="c-inspect-properties__value">
+                    <input
+                        id="header-visibility"
+                        type="checkbox"
+                        :checked="configuration.hideHeaders === true"
+                        @change="toggleHeaderVisibility"
+                    >
+                </div>
+            </li>
         </ul>
         <div class="c-inspect-properties__header">
             Table Column Visibility
@@ -120,6 +136,12 @@ export default {
                 let column = new TelemetryTableColumn(this.openmct, metadatum);
                 this.tableConfiguration.addSingleColumnForObject(telemetryObject, column);
             });
+        },
+        toggleHeaderVisibility() {
+            let hideHeaders = this.configuration.hideHeaders;
+
+            this.configuration.hideHeaders = !hideHeaders;
+            this.tableConfiguration.updateConfiguration(this.configuration);
         }
     }
 }
diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue
index c92d6f8115..e64acd8464 100644
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@@ -139,6 +139,7 @@
         ></div>
         <!-- Headers table -->
         <div
+            v-show="!hideHeaders"
             ref="headersTable"
             class="c-telemetry-table__headers-w js-table__headers-w"
             :style="{ 'max-width': widthWithScroll}"
@@ -336,7 +337,8 @@ export default {
             markCounter: 0,
             paused: false,
             markedRows: [],
-            isShowingMarkedRowsOnly: false
+            isShowingMarkedRowsOnly: false,
+            hideHeaders: configuration.hideHeaders
         }
     },
     computed: {
@@ -615,6 +617,7 @@ export default {
         },
         updateConfiguration(configuration) {
             this.isAutosizeEnabled = configuration.autosize;
+            this.hideHeaders = configuration.hideHeaders;
 
             this.updateHeaders();
             this.$nextTick().then(this.calculateColumnWidths);