Suggestions: Show the relation path for duplicate columns

Icinga · Jul 13, 2022 · 22945cf · 22945cf
1 parent 0de6456
commit 22945cf
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 5 deletions.
diff --git a/asset/css/search-base.less b/asset/css/search-base.less
@@ -42,6 +42,11 @@
     }
   }
 
+  .relation-path {
+    padding: 0 .2em;
+    background-color: var(--suggestions-relation-path-bg, @suggestions-relation-path-bg);
+  }
+
   [type="button"] {
     .appearance(none);
     border: none;
@@ -52,6 +57,10 @@
     background: var(--suggestions-focus-bg, @suggestions-focus-bg);
     color: var(--suggestions-focus-color, @suggestions-focus-color);
     outline: none;
+
+    .relation-path {
+      background-color: var(--suggestions-relation-path-focus-bg, @suggestions-relation-path-focus-bg);
+    }
   }
 
   [type="button"]:not(:focus):hover {
@@ -96,5 +105,19 @@
     &[data-class="operator"], &[data-class="logical_operator"] {
       text-align: center;
     }
+
+    &.has-details {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+    }
+
+    .relation-path {
+      margin-left: .5em;
+
+      &::first-line {
+        font-size: .8em;
+      }
+    }
   }
 }
diff --git a/asset/css/variables.less b/asset/css/variables.less
@@ -95,6 +95,8 @@
 @suggestions-border-color: @base-gray-light;
 @suggestions-separation-bg: @base-gray-lighter;
 @suggestions-failure-message-color: @default-text-color-light;
+@suggestions-relation-path-bg: @base-gray-light;
+@suggestions-relation-path-focus-bg: @base-gray;
 
 @card-border-color: @base-gray-light;
 
@@ -156,6 +158,8 @@
     --suggestions-border-color: var(--base-gray-light);
     --suggestions-separation-bg: var(--base-gray-lighter);
     --suggestions-failure-message-color: var(--default-text-color-light);
+    --suggestions-relation-path-bg: var(--base-gray-lighter);
+    --suggestions-relation-path-focus-bg: var(--base-gray);
 
     --card-border-color: var(--base-gray-light);
   }

diff --git a/src/Control/SearchBar/Suggestions.php b/src/Control/SearchBar/Suggestions.php
@@ -78,6 +78,18 @@ public function setFailureMessage($message)
         return $this;
     }
 
+    /**
+     * Return whether the relation should be shown for the given column
+     *
+     * @param string $column
+     *
+     * @return bool
+     */
+    protected function shouldShowRelationFor(string $column): bool
+    {
+        return false;
+    }
+
     /**
      * Create a filter to provide as default for column suggestions
      *
@@ -246,17 +258,30 @@ protected function assemble()
             if (is_array($meta)) {
                 foreach ($meta as $key => $value) {
                     if ($key === 'label') {
-                        $attributes['value'] = $value;
+                        $label = $value;
                     }
 
                     $attributes['data-' . $key] = $value;
                 }
             } else {
-                $attributes['value'] = $meta;
+                $label = $meta;
                 $attributes['data-label'] = $meta;
             }
 
-            $this->addHtml(new HtmlElement('li', null, new InputElement(null, $attributes)));
+            $button = (new ButtonElement(null, $attributes))
+                ->setAttribute('value', $label)
+                ->addHtml(Text::create($label));
+            if ($this->shouldShowRelationFor($term)) {
+                $relationPath = substr($term, 0, strrpos($term, '.'));
+                $button->getAttributes()->add('class', 'has-details');
+                $button->addHtml(new HtmlElement(
+                    'span',
+                    Attributes::create(['class' => 'relation-path']),
+                    Text::create($relationPath)
+                ));
+            }
+
+            $this->addHtml(new HtmlElement('li', null, $button));
         }
 
         if ($this->hasMore($data, self::DEFAULT_LIMIT)) {
@@ -266,8 +291,8 @@ protected function assemble()
         $showDefault = true;
         if ($this->searchTerm && $this->count() === 1) {
             // The default option is only shown if the user's input does not result in an exact match
-            $input = $this->getFirst('li')->getFirst('input');
-            $showDefault = $input->getValue() != $this->searchTerm
+            $input = $this->getFirst('li')->getFirst('button');
+            $showDefault = $input->getContent() != $this->searchTerm
                 && $input->getAttributes()->get('data-search')->getValue() != $this->searchTerm;
         }