From 8c0b76d1da4b7c9f8abdab8c0603ffd3d0881d63 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Sun, 3 Nov 2019 12:47:47 +0100
Subject: [PATCH] React UI: Improve styling of autocomplete sections (#6228)

* React UI: Improve styling of autocomplete sections

I removed the Card-related components and went back to normal <ul>/<li>,
since the style that Cards added just got in the way (like adding extra
borders and rounding, etc.), and from the examples at
https://getbootstrap.com/docs/4.3/components/card/, it doesn't seem like
multiple Cards are meant to be used as part of a larger list
(style-wise).

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Address review feedback

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 web/ui/react-app/src/App.css                  | 23 ++++++++++---------
 web/ui/react-app/src/ExpressionInput.test.tsx |  2 +-
 web/ui/react-app/src/ExpressionInput.tsx      | 20 ++++------------
 3 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/web/ui/react-app/src/App.css b/web/ui/react-app/src/App.css
index 536d959a8d..d8c7f1b9cf 100644
--- a/web/ui/react-app/src/App.css
+++ b/web/ui/react-app/src/App.css
@@ -62,20 +62,21 @@ button.execute-btn {
 .autosuggest-dropdown {
     position: absolute;
     border: 1px solid #ced4da;
-    border-radius: .25rem;
     background-color: #fff;
     color: #495057;
     font-size: 1rem;
     z-index: 1000;
-    min-width: 10rem;
-    top: 100%;
     left: 56px;
-    float: left;
-    margin: -5px;
+    margin-top: -6px;
+}
+
+.autosuggest-dropdown-list {
+    padding: 0;
+    margin: 0;
     list-style: none;
 }
 
-.autosuggest-dropdown li {
+.autosuggest-dropdown-list li {
     width: 100%;
     padding: .25rem 1.5rem;
     clear: both;
@@ -85,12 +86,12 @@ button.execute-btn {
     display: block;
 }
 
-.autosuggest-dropdown .card-header {
-    background: rgba(240, 230, 140, 0.4);
-    height: 30px;
-    display: flex;
-    align-items: center;
+.autosuggest-dropdown-list li.autosuggest-dropdown-header {
+    background-color: #bfdeff;
+    font-size: 10px;
+    line-height: 1.5;
     text-transform: uppercase;
+    text-align: center;
 }
 
 .graph-controls, .table-controls {
diff --git a/web/ui/react-app/src/ExpressionInput.test.tsx b/web/ui/react-app/src/ExpressionInput.test.tsx
index 9c985c7670..12b1422890 100644
--- a/web/ui/react-app/src/ExpressionInput.test.tsx
+++ b/web/ui/react-app/src/ExpressionInput.test.tsx
@@ -127,7 +127,7 @@ describe('ExpressionInput', () => {
       const downshift = expressionInput.find(Downshift);
       downshift.setState({ isOpen: true });
       const ul = downshift.find('ul');
-      expect(ul.prop('className')).toEqual('card list-group');
+      expect(ul.prop('className')).toEqual('autosuggest-dropdown-list');
       const items = ul.find(SanitizeHTML);
       expect(items.map(item => item.text()).join(', ')).toEqual(
         'node_cpu_guest_seconds_total, node_cpu_seconds_total, instance:node_cpu_utilisation:rate1m'
diff --git a/web/ui/react-app/src/ExpressionInput.tsx b/web/ui/react-app/src/ExpressionInput.tsx
index 9487d14c81..e3b0cf5a9b 100644
--- a/web/ui/react-app/src/ExpressionInput.tsx
+++ b/web/ui/react-app/src/ExpressionInput.tsx
@@ -1,15 +1,5 @@
 import React, { Component } from 'react';
-import {
-  Button,
-  InputGroup,
-  InputGroupAddon,
-  InputGroupText,
-  Input,
-  ListGroup,
-  ListGroupItem,
-  Card,
-  CardHeader,
-} from 'reactstrap';
+import { Button, InputGroup, InputGroupAddon, InputGroupText, Input } from 'reactstrap';
 
 import Downshift, { ControllerStateAndHelpers } from 'downshift';
 import fuzzy from 'fuzzy';
@@ -93,8 +83,8 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
               ? acc
               : [
                   ...acc,
-                  <Card tag={ListGroup} key={title}>
-                    <CardHeader style={{ fontSize: 13 }}>{title}</CardHeader>
+                  <ul className="autosuggest-dropdown-list" key={title}>
+                    <li className="autosuggest-dropdown-header">{title}</li>
                     {matches
                       .slice(0, 100) // Limit DOM rendering to 100 results, as DOM rendering is sloooow.
                       .map(({ original, string }) => {
@@ -107,12 +97,12 @@ class ExpressionInput extends Component<ExpressionInputProps, ExpressionInputSta
                           },
                         });
                         return (
-                          <SanitizeHTML tag={ListGroupItem} {...itemProps} allowedTags={['strong']}>
+                          <SanitizeHTML tag="li" {...itemProps} allowedTags={['strong']}>
                             {string}
                           </SanitizeHTML>
                         );
                       })}
-                  </Card>,
+                  </ul>,
                 ];
           },
           [] as JSX.Element[]