Fleet UI: Fix packs target details to show on click (#9155)

changes/9107-fix-show-packs-target-details

@@ -0,0 +1 @@
+- Pack target details show on right side of dropdown

frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/SelectTargetsMenu.jsx

@@ -130,11 +130,13 @@ const SelectTargetsMenuWrapper = (
             </>
           )}
         </div>
-        <TargetDetails
-          target={moreInfoTarget}
-          className={`${baseClass}__spotlight`}
-          handleBackToResults={handleBackToResults}
-        />
+        <div className={`${baseClass}__option-details`}>
+          <TargetDetails
+            target={moreInfoTarget}
+            className={`${baseClass}__spotlight`}
+            handleBackToResults={handleBackToResults}
+          />
+        </div>
       </div>
     );
   };

frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss

@@ -1,4 +1,6 @@
 .target-list {
+  max-height: 100%;
+
   &__type {
     padding: 0 8px $pad-xsmall;
     margin: $pad-medium 0 0;
@@ -18,15 +20,21 @@
   &__options {
     width: 50%;
     float: left;
-    overflow-y: auto;
-    min-height: 500px;
     position: relative;
-    z-index: 2;
+    overflow-y: scroll;
+    max-height: 100%;
     padding: 0 $pad-large;
     border-right: 1px solid $ui-fleet-blue-15;
     background-color: $core-white;
   }
 
+  &__option-details {
+    width: 50%;
+    height: 100%;
+    float: right;
+    padding: 0 $pad-large;
+  }
+
   &__no-hosts {
     font-size: $x-small;
     padding: $pad-large;
@@ -43,7 +51,8 @@
     float: right;
     overflow-y: auto;
     background-color: $core-white;
-    min-height: 500px;
+    min-height: 450px;
+    padding-top: $pad-large;
     position: relative;
     z-index: 1;
   }

frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx

@@ -192,6 +192,31 @@ class TargetDetails extends Component {
     );
   };
 
+  renderTeam = () => {
+    const { className, target } = this.props;
+    const { count, display_text: displayText } = target;
+    const labelBaseClass = "label-target";
+
+    return (
+      <div className={`${labelBaseClass} ${className}`}>
+        <p className={`${labelBaseClass}__display-text`}>
+          <FleetIcon
+            name="all-hosts"
+            fw
+            className={`${labelBaseClass}__icon`}
+          />
+          <span>{displayText}</span>
+        </p>
+
+        <p className={`${labelBaseClass}__hosts`}>
+          <span className={`${labelBaseClass}__hosts-count`}>
+            <strong>{count}</strong>HOSTS
+          </span>
+        </p>
+      </div>
+    );
+  };
+
   render() {
     const { target } = this.props;
 
@@ -200,12 +225,16 @@ class TargetDetails extends Component {
     }
 
     const { target_type: targetType } = target;
-    const { renderHost, renderLabel } = this;
+    const { renderHost, renderLabel, renderTeam } = this;
 
     if (targetType === "labels") {
       return renderLabel();
     }
 
+    if (targetType === "teams") {
+      return renderTeam();
+    }
+
     return renderHost();
   }
 }

frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/_styles.scss

@@ -1,23 +1,11 @@
 .host-target,
 .label-target {
-  padding: $pad-large;
+  width: 100%;
 
   &__back {
     color: $core-fleet-black;
     font-size: $xx-small;
     display: none;
-
-    @include breakpoint(ltdesktop) {
-      display: inline-block;
-      position: absolute;
-      top: 10px;
-      left: 10px;
-      padding: 10px;
-
-      &:active {
-        top: 10px;
-      }
-    }
   }
 
   @include breakpoint(ltdesktop) {
@@ -81,7 +69,6 @@
   &__labels-list {
     font-size: $small;
     font-weight: $regular;
-    line-height: 1.85;
     letter-spacing: 0.5px;
     color: $core-fleet-black;
     list-style: none;
@@ -126,7 +113,7 @@
   &__icon {
     color: $core-fleet-blue;
     margin-right: $pad-small;
-    width: 21px;
+    width: 30px;
   }
 
   &__hosts {
@@ -156,7 +143,6 @@
   &__description {
     font-size: $pad-medium;
     font-weight: $regular;
-    line-height: 1.71;
     color: $core-fleet-black;
     margin: 0 0 $pad-small;
   }
@@ -173,7 +159,6 @@
 
     th {
       font-weight: $bold;
-      line-height: 2.3;
       color: $core-fleet-black;
       padding-right: $pad-small;
     }

frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss

@@ -210,31 +210,4 @@
       padding: 0 $pad-medium;
     }
   }
-
-  @include breakpoint(ltdesktop) {
-    .Select-menu-outer {
-      .Select-menu {
-        min-width: 665px;
-
-        &::after {
-          display: none;
-        }
-      }
-    }
-
-    &.show-preview {
-      .Select-menu-outer {
-        .Select-menu {
-          left: auto;
-          right: 0;
-        }
-      }
-
-      .Select-menu {
-        left: 0;
-        right: auto;
-        position: absolute;
-      }
-    }
-  }
 }