Add a view action button to toggle on class to control fixed layout (#6465)

* Add a view action buttons to toggle on class to control fixed layout
* Add configuration watcher and initial view action
* Added next tick in mount and updated action key
* Updated the view action key

src/plugins/LADTable/LADTableConfiguration.js

@@ -36,6 +36,7 @@ export default class LADTableConfiguration extends EventEmitter {
     getConfiguration() {
         const configuration = this.domainObject.configuration || {};
         configuration.hiddenColumns = configuration.hiddenColumns || {};
+        configuration.isFixedLayout = configuration.isFixedLayout ?? true;
 
         return configuration;
     }

src/plugins/LADTable/ViewActions.js

@@ -0,0 +1,63 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const expandColumns = {
+    name: 'Expand Columns',
+    key: 'lad-expand-columns',
+    description: "Increase column widths to fit currently available data.",
+    cssClass: 'icon-arrows-right-left labeled',
+    invoke: (objectPath, view) => {
+        view.getViewContext().toggleFixedLayout();
+    },
+    showInStatusBar: true,
+    group: 'view'
+};
+
+const autosizeColumns = {
+    name: 'Autosize Columns',
+    key: 'lad-autosize-columns',
+    description: "Automatically size columns to fit the table into the available space.",
+    cssClass: 'icon-expand labeled',
+    invoke: (objectPath, view) => {
+        view.getViewContext().toggleFixedLayout();
+    },
+    showInStatusBar: true,
+    group: 'view'
+};
+
+const viewActions = [
+    expandColumns,
+    autosizeColumns
+];
+
+viewActions.forEach(action => {
+    action.appliesTo = (objectPath, view = {}) => {
+        const viewContext = view.getViewContext && view.getViewContext();
+        if (!viewContext) {
+            return false;
+        }
+
+        return viewContext.type === 'lad-table';
+    };
+});
+
+export default viewActions;

src/plugins/LADTable/components/LADTable.vue

@@ -25,7 +25,10 @@
     class="c-lad-table-wrapper u-style-receiver js-style-receiver"
     :class="staleClass"
 >
-    <table class="c-table c-lad-table">
+    <table
+        class="c-table c-lad-table"
+        :class="applyLayoutClass"
+    >
         <thead>
             <tr>
                 <th>Name</th>
@@ -52,7 +55,7 @@
 </template>
 
 <script>
-
+import Vue from 'vue';
 import LadRow from './LADRow.vue';
 import StalenessUtils from '@/utils/staleness';
 
@@ -102,10 +105,33 @@ export default {
                 return 'is-stale';
             }
 
+            return '';
+        },
+        applyLayoutClass() {
+            if (this.configuration.isFixedLayout) {
+                return 'fixed-layout';
+            }
+
             return '';
         }
     },
-    mounted() {
+    watch: {
+        configuration: {
+            handler(newVal) {
+                if (this.viewActionsCollection) {
+                    if (newVal.isFixedLayout) {
+                        this.viewActionsCollection.show(['lad-expand-columns']);
+                        this.viewActionsCollection.hide(['lad-autosize-columns']);
+                    } else {
+                        this.viewActionsCollection.show(['lad-autosize-columns']);
+                        this.viewActionsCollection.hide(['lad-expand-columns']);
+                    }
+                }
+            },
+            deep: true
+        }
+    },
+    async mounted() {
         this.ladTableConfiguration.on('change', this.handleConfigurationChange);
         this.composition = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addItem);
@@ -113,6 +139,9 @@ export default {
         this.composition.on('reorder', this.reorder);
         this.composition.load();
         this.stalenessSubscription = {};
+        await Vue.nextTick();
+        this.viewActionsCollection = this.openmct.actions.getActionsCollection(this.objectPath, this.currentView);
+        this.initializeViewActions();
     },
     destroyed() {
         this.ladTableConfiguration.off('change', this.handleConfigurationChange);
@@ -189,7 +218,25 @@ export default {
             this.viewContext.row = rowContext;
         },
         getViewContext() {
-            return this.viewContext;
+            return {
+                ...this.viewContext,
+                type: 'lad-table',
+                toggleFixedLayout: this.toggleFixedLayout
+
+            };
+        },
+        toggleFixedLayout() {
+            this.configuration.isFixedLayout = !this.configuration.isFixedLayout;
+        },
+        initializeViewActions() {
+            if (this.configuration.isFixedLayout) {
+                this.viewActionsCollection.show(['lad-expand-columns']);
+                this.viewActionsCollection.hide(['lad-autosize-columns']);
+
+            } else {
+                this.viewActionsCollection.hide(['lad-expand-columns']);
+                this.viewActionsCollection.show(['lad-autosize-columns']);
+            }
         }
     }
 };

src/plugins/LADTable/plugin.js

@@ -23,6 +23,7 @@ import LADTableViewProvider from './LADTableViewProvider';
 import LADTableSetViewProvider from './LADTableSetViewProvider';
 import ladTableCompositionPolicy from './LADTableCompositionPolicy';
 import LADTableConfigurationViewProvider from './LADTableConfigurationViewProvider';
+import LADTableViewActions from './ViewActions';
 
 export default function plugin() {
     return function install(openmct) {
@@ -52,5 +53,9 @@ export default function plugin() {
         });
 
         openmct.composition.addPolicy(ladTableCompositionPolicy(openmct));
+
+        LADTableViewActions.forEach(action => {
+            openmct.actions.register(action);
+        });
     };
 }

src/styles/_table.scss

@@ -199,7 +199,13 @@ div.c-table {
 }
 
 .c-lad-table {
-    table-layout: fixed;
+    &.fixed-layout {
+        table-layout: fixed;
+        td {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
     th, td {
         width: 33%; // Needed to prevent size jumping as values dynamically update
         overflow: hidden;