fix status class

* wip

* simplifying class applications

* add status to tabs view

* add tests for status API

* fix lint errors

* fix style application in telemetry vue

* CSS and markup refactoring to support addition of 'suspect' telemetry (#3499)

* CSS and markup refactoring to support addition of 'suspect' telemetry

- Significant refactoring of CSS classing: `is-missing` is now
`is-status--missing` and `is-missing__indicator` is now simply
`is-status__indicator`, allowing the wrapping `is-missing--*` class to
control what is displayed;
- New SCSS mixin @isStatus, and changes to mixin @isMissing to support
new `is-status--suspect` class;
- Changed titling for missing objects from 'This item is missing' to
'This item is missing or suspect'. **IMPORTANT NOTE** This is temporary
and should be replaced with a more robust approach to titling that
allows title strings to be defined in configuration and dynamically
applied;
- Refactored computed property `statusClass` across multiple components
to return an empty string when status is undefined - this was
previously erroneously returning `is-undefined` in that circumstance;
- Removed commented code;

* CSS and markup refactoring to support addition of 'suspect' telemetry

- Refinements to broaden capability of `is-status*` mixin;

* fix lint issues

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

src/plugins/displayLayout/components/TelemetryView.vue

@@ -38,7 +38,7 @@
         @contextmenu.prevent="showContextMenu"
     >
         <div class="is-status__indicator"
-             title="This item is missing or suspect"
+             :title="`This item is ${this.status}`"
         ></div>
         <div
             v-if="showLabel"

src/plugins/displayLayout/components/telemetry-view.scss

@@ -27,14 +27,20 @@
         border: 1px solid transparent;
     }
 
-    @include isMissing($absPos: true);
-
     .is-status__indicator {
         top: 0;
         left: 0;
     }
 
     &.is-status--missing {
+        @include isMissing($absPos: true);
+
+        border: $borderMissing;
+    }
+
+    &.is-status--suspect {
+        @include isSuspect($absPos: true);
+
         border: $borderMissing;
     }
 }

src/plugins/folderView/components/grid-view.scss

@@ -52,6 +52,15 @@
         }
     }
 
+    &.is-status--suspect {
+        @include isSuspect();
+
+        [class*='__type-icon'],
+        [class*='__details'] {
+            opacity: $opacityMissing;
+        }
+    }
+
     &__details {
         display: flex;
         flex-flow: column nowrap;

src/styles/_mixins.scss

@@ -145,6 +145,7 @@
         }
 
         @if $absPos {
+            display: block;
             position: absolute;
             z-index: 3;
         }

src/ui/components/ObjectFrame.vue

@@ -41,7 +41,7 @@
                  :class="cssClass"
             >
                 <span class="is-status__indicator"
-                      title="This item is missing or suspect"
+                      :title="`This item is ${status}`"
                 ></span>
             </div>
             <div class="c-object-label__name">

src/ui/components/ObjectLabel.vue

@@ -12,7 +12,7 @@
         :class="typeClass"
     >
         <span class="is-status__indicator"
-              title="This item is missing or suspect"
+              :title="`This item is ${status}`"
         ></span>
     </div>
     <div class="c-tree__item__name c-object-label__name">

src/ui/components/object-frame.scss

@@ -118,6 +118,15 @@
                 left: $interiorMargin;
             }
         }
+
+        &.is-status--suspect {
+            @include isSuspect($absPos: true);
+
+            .is-status__indicator {
+                top: $interiorMargin;
+                left: $interiorMargin;
+            }
+        }
     }
 
     /*************************** OBJECT VIEW */
@@ -149,6 +158,10 @@
         border: $borderMissing;
     }
 
+    &.is-status--suspect {
+        border: $borderMissing;
+    }
+
     &__object-view {
         display: flex;
         flex: 1 1 auto;

src/ui/components/object-label.scss

@@ -35,6 +35,16 @@
             transform: scale(0.7);
         }
     }
+
+    &.is-status--suspect {
+        @include isSuspect($absPos: true);
+
+        .is-status__indicator {
+            right: -3px;
+            top: -3px;
+            transform: scale(0.7);
+        }
+    }
 }
 
 .c-tree .c-object-label {