Lock views and prevent editing (#3094)

* working lock and unlock

* prevent flexible layout drop hints from showing

* fix lint issue

* wip

* disable mousedown when not editing in DisplayLayout

* continued wip

* Cherrypick new glyphs from add-new-glyphs-062320

* More new glyphs, updated art

- New glyphs: icon-unlocked and icon-target;
- Updated art for icon-lock glyph;

* Edit toggle refinements WIP

- Markup, CSS in BrowseBar.vue;

* More new glyphs, updated art

- New glyphs: icon-unlocked and icon-target;
- Updated art for icon-lock glyph;

* Edit toggle refinements

- Replaced toggle switch with button;

* prevent styling changes when locked

* fix lint issues

* fix tests

* make reviewer suggested changes

Co-authored-by: charlesh88 <charlesh88@gmail.com>

src/ui/layout/BrowseBar.vue

@@ -41,7 +41,17 @@
         />
         <div class="l-browse-bar__actions">
             <button
-                v-if="isViewEditable & !isEditing"
+                v-if="isViewEditable && !isEditing"
+                :title="lockedOrUnlocked"
+                class="c-button"
+                :class="{
+                    'icon-lock': domainObject.locked,
+                    'icon-unlocked': !domainObject.locked
+                }"
+                @click="toggleLock(!domainObject.locked)"
+            ></button>
+            <button
+                v-if="isViewEditable && !isEditing && !domainObject.locked"
                 class="l-browse-bar__actions__edit c-button c-button--major icon-pencil"
                 title="Edit"
                 @click="edit()"
@@ -161,6 +171,13 @@ export default {
                 return currentViewProvider.canEdit && currentViewProvider.canEdit(this.domainObject);
             }
             return false;
+        },
+        lockedOrUnlocked() {
+            if (this.domainObject.locked) {
+                return 'Locked for editing - click to unlock.';
+            } else {
+                return 'Unlocked for editing - click to lock.';
+            }
         }
     },
     watch: {
@@ -271,6 +288,9 @@ export default {
         },
         goToParent() {
             window.location.hash = this.parentUrl;
+        },
+        toggleLock(flag) {
+            this.openmct.objects.mutate(this.domainObject, 'locked', flag);
         }
     }
 }