Three Dot Menu Prototype (#3325)

* Three dot menu implementation

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov>

src/ui/preview/preview-header.vue

@@ -13,13 +13,25 @@
         </div>
     </div>
     <div class="l-browse-bar__end">
+        <view-switcher
+            :v-if="!hideViewSwitcher"
+            :views="views"
+            :current-view="currentView"
+        />
         <div class="l-browse-bar__actions">
-            <view-switcher
-                :v-if="!hideViewSwitcher"
-                :views="views"
-                :current-view="currentView"
-                @setView="setView"
-            />
+            <button
+                v-for="(item, index) in statusBarItems"
+                :key="index"
+                class="c-button"
+                :class="item.cssClass"
+                @click="item.callBack"
+            >
+            </button>
+            <button
+                class="l-browse-bar__actions c-icon-button icon-3-dots"
+                title="More options"
+                @click.prevent.stop="showMenuItems($event)"
+            ></button>
         </div>
     </div>
 </div>
@@ -27,6 +39,11 @@
 
 <script>
 import ViewSwitcher from '../../ui/layout/ViewSwitcher.vue';
+const HIDDEN_ACTIONS = [
+    'remove',
+    'move',
+    'preview'
+];
 
 export default {
     inject: [
@@ -59,16 +76,53 @@ export default {
             default: () => {
                 return [];
             }
+        },
+        actionCollection: {
+            type: Object,
+            default: () => {
+                return undefined;
+            }
         }
     },
     data() {
         return {
-            type: this.openmct.types.get(this.domainObject.type)
+            type: this.openmct.types.get(this.domainObject.type),
+            statusBarItems: [],
+            menuActionItems: []
         };
     },
+    watch: {
+        actionCollection(actionCollection) {
+            if (this.actionCollection) {
+                this.unlistenToActionCollection();
+            }
+
+            this.actionCollection.on('update', this.updateActionItems);
+            this.updateActionItems(this.actionCollection.getActionsObject());
+        }
+    },
+    mounted() {
+        if (this.actionCollection) {
+            this.actionCollection.on('update', this.updateActionItems);
+            this.updateActionItems(this.actionCollection.getActionsObject());
+        }
+    },
     methods: {
         setView(view) {
             this.$emit('setView', view);
+        },
+        unlistenToActionCollection() {
+            this.actionCollection.off('update', this.updateActionItems);
+            delete this.actionCollection;
+        },
+        updateActionItems() {
+            this.actionCollection.hide(HIDDEN_ACTIONS);
+            this.statusBarItems = this.actionCollection.getStatusBarActions();
+            this.menuActionItems = this.actionCollection.getVisibleActions();
+        },
+        showMenuItems(event) {
+            let sortedActions = this.openmct.actions._groupAndSortActions(this.menuActionItems);
+            this.openmct.menus.showMenu(event.x, event.y, sortedActions);
         }
     }
 };