feat: ui for stigs/labels asset selection (#1120)

* feat:  ui for stigs/labels asset selection

* WhatsNew and Docs updates for new label interface

* enable asset field set properly for STIG assignments

* adjust qtip width based on longest STIG string

---------

Co-authored-by: csmig <csmig@csmig.com>
Co-authored-by: cd-rite <61710958+cd-rite@users.noreply.github.com>

client/build.sh

@@ -145,6 +145,7 @@ uglifyjs \
 'SM/Library.js' \
 'SM/StigRevision.js' \
 'SM/Inventory.js' \
+'SM/AssetSelection.js' \
 'library.js' \
 'userAdmin.js' \
 'collectionAdmin.js' \

client/src/css/dark-mode.css

@@ -1365,18 +1365,6 @@ td.sort-asc .x-grid3-hd-inner, td.sort-desc .x-grid3-hd-inner, td.x-grid3-hd-men
     background-color: #181a1b
 }
 
-.x-dd-drop-nodrop .x-dd-drop-icon {
-    background-image: url("../ext/resources/images/default/dd/drop-no.gif")
-}
-
-.x-dd-drop-ok .x-dd-drop-icon {
-    background-image: url("../ext/resources/images/default/dd/drop-yes.gif")
-}
-
-.x-dd-drop-ok-add .x-dd-drop-icon {
-    background-image: url("../ext/resources/images/default/dd/drop-add.gif")
-}
-
 .x-view-selector {
     background-color: #2f3335;
     border-color: #52585c
@@ -3184,3 +3172,10 @@ embed[type="application/pdf"] {
 .sm-diff-del {
     background-color: hsl(0deg 71% 25%)
 }
+.sm-round-panel .x-panel-header.sm-selections-panel-header {
+	background-color: #425722;
+}
+.sm-grabbing *, .sm-grabbing .sm-grid3-draggable .x-grid3-row-selected *, .sm-grabbing .sm-grid3-draggable .x-grid3-row-selected {
+    cursor: url("../img/drag-drop-dark.svg"), grabbing;
+}
+

client/src/css/stigman.css

@@ -330,6 +330,9 @@
   margin-left: 3px;
   white-space: nowrap
 }
+.sm-jumbo-sprite {
+	font-size: 12px;
+}
 .sm-diff-sprite {
   background-color: hsl(207deg 100% 84%);
   color: #000;
@@ -2134,3 +2137,67 @@ td.x-grid3-hd-over .x-grid3-hd-inner {
     margin-top: 0px;
     margin-bottom: 0px;
 }
+.sm-add-assignment-icon {
+  background-image: url(../img/add-assignment.svg);
+  background-size: 32px 32px;
+  background-repeat: no-repeat;
+}
+.x-item-disabled .sm-add-assignment-icon, .x-item-disabled .sm-remove-assignment-icon {
+  filter: grayscale(1);
+}
+.sm-remove-assignment-icon {
+  background-image: url(../img/remove-assignment.svg);
+  background-size: 32px 32px;
+  background-repeat: no-repeat;
+}
+.x-dd-drop-nodrop .x-dd-drop-icon {
+  background-image: url("../img/remove.svg");
+  background-size: 16px 16px;
+}
+.x-dd-drop-ok .x-dd-drop-icon {
+  background-image: url("../img/add.svg");
+  background-size: 16px 16px;
+}
+
+.x-dd-drop-ok-add .x-dd-drop-icon {
+  background-image: url("../img/add.svg");
+  background-size: 16px 16px;
+}
+.sm-round-panel .x-panel-header.sm-selections-panel-header {
+  background-color: #c3deab;
+}
+.sm-fieldset-title-with-icon {
+  background-repeat: no-repeat;
+  background-size: 14px 14px;
+  padding-left: 20px;
+}
+.sm-stig-information-title {
+  background-image: url(../img/shield-green-check.svg);
+  background-repeat: no-repeat;
+  background-size: 14px 14x;
+  padding-left: 20px;
+
+}
+.sm-asset-assignments-title {
+  background-image: url(../img/target.svg);
+  background-repeat: no-repeat;
+  background-size: 14px 14px;
+  padding-left: 20px;
+}
+.sm-label-title {
+  background-image: url(../img/label.svg);
+  background-repeat: no-repeat;
+  background-size: 14px 14px;
+  padding-left: 20px;
+}
+
+.sm-grid3-draggable .x-grid3-row-selected .x-grid3-td-checker *{
+  cursor: default;
+}
+
+.sm-grid3-draggable .x-grid3-row-selected *, .sm-grid3-draggable .x-grid3-row-selected {
+  cursor: grab;
+}
+.sm-grabbing *, .sm-grabbing .sm-grid3-draggable .x-grid3-row-selected *, .sm-grabbing .sm-grid3-draggable .x-grid3-row-selected {
+  cursor: url("../img/drag-drop-light.svg"), grabbing;
+}