Teams grouping in Select Targets Dropdown (#873)

* Renders targets by team * Conditional rendering for no hosts available * Update styling to match figma
2021-06-04 12:37:56 -04:00
parent af301be81c
commit e4c866cf7c
9 changed files with 60 additions and 19 deletions
@@ -99,12 +99,31 @@ const SelectTargetsMenuWrapper = (
      return targetsOutput;
    };

+    const hasHostTargets = () => {
+      return options.find((option) => option.count !== 0) !== undefined;
+    };
+
    return (
      <div className={baseClass}>
        <div className={`${baseClass}__options`}>
-          {renderTargets("all")}
-          {renderTargets("labels")}
-          {renderTargets("hosts")}
+          {hasHostTargets ? (
+            <>
+              {renderTargets("all")}
+              {renderTargets("teams")}
+              {renderTargets("labels")}
+              {renderTargets("hosts")}
+            </>
+          ) : (
+            <>
+              <div className={`${baseClass}__no-hosts`}>
+                <div className={`${baseClass}__no-hosts-heading`}>
+                  You have no hosts to run this query against.
+                </div>
+                Expecting to see hosts? Try again in a few seconds as the system
+                catches up.
+              </div>
+            </>
+          )}
        </div>
        <TargetDetails
          target={moreInfoTarget}
@@ -1,16 +1,17 @@
 .target-list {
  &__type {
    padding: 0 8px $pad-xsmall;
-    margin: $pad-xxlarge 0 0;
-    text-transform: uppercase;
+    margin: $pad-medium 0 0;
    font-weight: $bold;
-    font-size: $xx-small;
+    font-size: $x-small;
    color: $core-fleet-black;
-    letter-spacing: 0.5px;
    border-bottom: 1px solid $ui-fleet-blue-15;

+    &::first-letter {
+      text-transform: uppercase;
+    }
    &:first-child {
-      margin: 0;
+      margin: $pad-large 0 $pad-small 0;
    }
  }

@@ -21,11 +22,22 @@
    min-height: 500px;
    position: relative;
    z-index: 2;
-    padding: $pad-large $pad-medium;
+    padding: 0 $pad-large;
    border-right: 1px solid $ui-fleet-blue-15;
    background-color: $core-white;
  }

+  &__no-hosts {
+    font-size: $x-small;
+    padding: $pad-large;
+  }
+
+  &__no-hosts-heading {
+    font-weight: $bold;
+    font-size: $small;
+    padding-bottom: $pad-medium;
+  }
+
  &__spotlight {
    width: 50%;
    float: right;
@@ -3,7 +3,7 @@ export const targetFilter = (targetType) => {
    return { name: "All Hosts" };
  }

-  if (targetType === "labels") {
+  if (targetType === "labels" || targetType === "teams") {
    return (option) => {
      return option.target_type === targetType && option.name !== "All Hosts";
    };
@@ -48,6 +48,7 @@ class TargetOption extends Component {
    const { display_text: displayText, target_type: targetType } = target;
    const { handleSelect, renderTargetDetail } = this;
    const wrapperClassName = classnames(`${baseClass}__wrapper`, {
+      "is-team": targetType === "teams",
      "is-label": targetType === "labels",
      "is-host": targetType === "hosts",
    });
@@ -60,7 +61,9 @@ class TargetOption extends Component {
        >
          <div>
            <TargetIcon target={target} />
-            <span className={`${baseClass}__label-label`}>{displayText}</span>
+            <span className={`${baseClass}__label-label`}>
+              {displayText !== "All Hosts" ? displayText : "All hosts"}
+            </span>
          </div>
          {renderTargetDetail()}
        </button>
@@ -13,12 +13,11 @@
    align-content: stretch;
    cursor: default;
    border-radius: 8px;
-    padding: $pad-xsmall 8px;
+    padding: 0 $pad-xsmall;
  }

  &__target-content,
  &__add-btn {
-    line-height: 34px;
    font-size: $small;
    font-weight: $regular;
    text-transform: none;
@@ -28,7 +27,6 @@
  &__add-btn::after {
    content: url("../assets/images/icon-plus-circle-16x16@2x.png");
    transform: scale(0.5);
-    margin-top: 8px;
    border: none;
  }

@@ -47,12 +45,12 @@
    line-height: 16px;
    font-weight: bold;
    padding: 2px 10px;
-    margin-right: 12px;
  }

  &__icon {
    color: $core-fleet-black;
    font-size: $small;
+    margin-left: $pad-small;

    &--online {
      color: $core-fleet-black;
@@ -80,7 +78,7 @@

  &__label-label {
    color: $core-fleet-black;
-    font-size: $x-small;
+    font-size: $xx-small;
    margin-left: $pad-small;

    .all-hosts {
@@ -69,7 +69,8 @@

    .Select-input {
      height: 46px;
-      margin: 0 0 0 $pad-medium;
+      margin: 0;
+      padding: 0 0 0 $pad-medium;

      > input {
        line-height: 30px;
@@ -8,7 +8,7 @@ export class KolideIcon extends Component {
  static propTypes = {
    className: PropTypes.string,
    fw: PropTypes.bool,
-    name: PropTypes.string.isRequired,
+    name: PropTypes.string,
    size: PropTypes.string,
    title: PropTypes.string,
  };
@@ -1,5 +1,12 @@
 import PropTypes from "prop-types";
 import hostInterface from "interfaces/host";
 import labelInterface from "interfaces/label";
+// teamInterface added 5/26
+import teamInterface from "interfaces/team";

-export default PropTypes.oneOfType([hostInterface, labelInterface]);
+// teamInterface added 5/26
+export default PropTypes.oneOfType([
+  hostInterface,
+  labelInterface,
+  teamInterface,
+]);
@@ -24,6 +24,7 @@ export default (client) => {
            targets: [
              ...appendTargetTypeToTargets(targets.hosts, "hosts"),
              ...appendTargetTypeToTargets(targets.labels, "labels"),
+              ...appendTargetTypeToTargets(targets.teams, "teams"),
            ],
          };
        });