Replace some Bootstrap components/classes with Ant analogues

client/app/assets/less/ant.less

@@ -1,33 +1,33 @@
-@import '~antd/lib/style/core/iconfont';
-@import '~antd/lib/style/core/motion';
-@import '~antd/lib/alert/style/index';
-@import '~antd/lib/input/style/index';
-@import '~antd/lib/input-number/style/index';
-@import '~antd/lib/date-picker/style/index';
-@import '~antd/lib/modal/style/index';
-@import '~antd/lib/tooltip/style/index';
-@import '~antd/lib/select/style/index';
-@import '~antd/lib/checkbox/style/index';
-@import '~antd/lib/upload/style/index';
-@import '~antd/lib/form/style/index';
-@import '~antd/lib/button/style/index';
-@import '~antd/lib/radio/style/index';
-@import '~antd/lib/time-picker/style/index';
-@import '~antd/lib/pagination/style/index';
-@import '~antd/lib/table/style/index';
-@import '~antd/lib/popover/style/index';
-@import '~antd/lib/icon/style/index';
-@import '~antd/lib/tag/style/index';
-@import '~antd/lib/grid/style/index';
-@import '~antd/lib/switch/style/index';
-@import '~antd/lib/empty/style/index';
-@import '~antd/lib/drawer/style/index';
-@import '~antd/lib/card/style/index';
-@import '~antd/lib/steps/style/index';
-@import '~antd/lib/divider/style/index';
-@import '~antd/lib/dropdown/style/index';
-@import '~antd/lib/menu/style/index';
-@import '~antd/lib/list/style/index';
+@import "~antd/lib/style/core/iconfont";
+@import "~antd/lib/style/core/motion";
+@import "~antd/lib/alert/style/index";
+@import "~antd/lib/input/style/index";
+@import "~antd/lib/input-number/style/index";
+@import "~antd/lib/date-picker/style/index";
+@import "~antd/lib/modal/style/index";
+@import "~antd/lib/tooltip/style/index";
+@import "~antd/lib/select/style/index";
+@import "~antd/lib/checkbox/style/index";
+@import "~antd/lib/upload/style/index";
+@import "~antd/lib/form/style/index";
+@import "~antd/lib/button/style/index";
+@import "~antd/lib/radio/style/index";
+@import "~antd/lib/time-picker/style/index";
+@import "~antd/lib/pagination/style/index";
+@import "~antd/lib/table/style/index";
+@import "~antd/lib/popover/style/index";
+@import "~antd/lib/icon/style/index";
+@import "~antd/lib/tag/style/index";
+@import "~antd/lib/grid/style/index";
+@import "~antd/lib/switch/style/index";
+@import "~antd/lib/empty/style/index";
+@import "~antd/lib/drawer/style/index";
+@import "~antd/lib/card/style/index";
+@import "~antd/lib/steps/style/index";
+@import "~antd/lib/divider/style/index";
+@import "~antd/lib/dropdown/style/index";
+@import "~antd/lib/menu/style/index";
+@import "~antd/lib/list/style/index";
 @import "~antd/lib/badge/style/index";
 @import "~antd/lib/card/style/index";
 @import "~antd/lib/spin/style/index";
@@ -36,7 +36,7 @@
 @import "~antd/lib/collapse/style/index";
 @import "~antd/lib/progress/style/index";
 @import "~antd/lib/typography/style/index";
-@import 'inc/ant-variables';
+@import "inc/ant-variables";
 
 // Increase z-indexes to avoid conflicts with some other libraries (e.g. Plotly)
 @zindex-modal: 2000;
@@ -237,11 +237,11 @@
   &-item {
     // custom rule
     &.selected {
-      background-color: #F6F8F9;
+      background-color: #f6f8f9;
     }
 
     &.disabled {
-      background-color: fade(#F6F8F9, 40%);
+      background-color: fade(#f6f8f9, 40%);
 
       & > * {
         opacity: 0.4;
@@ -250,6 +250,31 @@
   }
 }
 
+.@{list-prefix-cls}-bordered.@{list-prefix-cls}-sm {
+  .@{list-prefix-cls}-item-link {
+    padding: 0;
+
+    > a {
+      display: block;
+      flex: 1 1 auto;
+      padding: 8px 16px;
+      cursor: pointer;
+      text-decoration: none;
+      color: inherit;
+
+      &:hover,
+      &:active {
+        background: fade(@redash-gray, 5%);
+      }
+
+      &.inactive {
+        cursor: not-allowed;
+        background: fade(@redash-gray, 5%);
+      }
+    }
+  }
+}
+
 .@{dialog-prefix-cls} {
   // styling for short modals (no lines)
   &.shortModal {
@@ -367,7 +392,7 @@
     top: auto !important;
     bottom: 8px;
 
-     // makes the icon white instead of see-through
+    // makes the icon white instead of see-through
     & svg {
       background: white;
       border-radius: 50%;
@@ -394,9 +419,16 @@
 }
 
 // overrides for checkbox
-@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox';
+@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox";
 
 .@{checkbox-prefix-cls}-wrapper + span,
 .@{checkbox-prefix-cls} + span {
   padding-right: 0;
 }
+
+// set some defaults for badge
+.@{badge-prefix-cls} {
+  &-count {
+    background: @processing-color;
+  }
+}

client/app/assets/less/redash/query.less

@@ -72,10 +72,6 @@ body.fixed-layout {
   height: 100% !important;
   width: calc(~"25% - 10px");
   margin-right: 10px;
-
-  .form-control {
-    height: 30px;
-  }
 }
 
 .query-alerts {

client/app/components/ApplicationArea/ApplicationHeader/FavoritesDropdown.jsx

@@ -6,6 +6,7 @@ import Dropdown from "antd/lib/dropdown";
 import Icon from "antd/lib/icon";
 import Menu from "antd/lib/menu";
 
+import FavoritesControl from "@/components/FavoritesControl";
 import HelpTrigger from "@/components/HelpTrigger";
 
 export default function FavoritesDropdown({ fetch, urlTemplate }) {
@@ -41,18 +42,14 @@ export default function FavoritesDropdown({ fetch, urlTemplate }) {
     <Menu className="favorites-dropdown">
       {noItems ? (
         <Menu.Item>
-          <span className="btn-favourite m-r-5">
-            <i className="fa fa-star" />
-          </span>
+          <FavoritesControl className="m-r-5" item={{ is_favorite: true }} readOnly />
           No favorites selected yet <HelpTrigger type="FAVORITES" />
         </Menu.Item>
       ) : (
         items.map(item => (
           <Menu.Item key={item.id}>
             <a href={urlCompiled(item)}>
-              <span className="btn-favourite m-r-5">
-                <i className="fa fa-star" />
-              </span>
+              <FavoritesControl className="m-r-5" item={item} readOnly />
               {item.name}
             </a>
           </Menu.Item>

client/app/components/FavoritesControl.jsx

@@ -1,16 +1,21 @@
 import React from "react";
 import PropTypes from "prop-types";
+import cx from "classnames";
 
 export default class FavoritesControl extends React.Component {
   static propTypes = {
     item: PropTypes.shape({
       is_favorite: PropTypes.bool.isRequired,
     }).isRequired,
+    readOnly: PropTypes.bool,
     onChange: PropTypes.func,
+    className: PropTypes.string,
   };
 
   static defaultProps = {
+    readOnly: false,
     onChange: () => {},
+    className: null,
   };
 
   toggleItem(event, item, callback) {
@@ -25,13 +30,23 @@ export default class FavoritesControl extends React.Component {
   }
 
   render() {
-    const { item, onChange } = this.props;
+    const { item, readOnly, onChange, className, ...props } = this.props;
     const icon = item.is_favorite ? "fa fa-star" : "fa fa-star-o";
     const title = item.is_favorite ? "Remove from favorites" : "Add to favorites";
+
+    if (readOnly) {
+      return (
+        <span {...props} className={cx("favorites-control btn-favourite", className)}>
+          <i className={icon} aria-hidden="true" />
+        </span>
+      );
+    }
+
     return (
       <a
+        {...props}
         title={title}
-        className="favorites-control btn-favourite"
+        className={cx("favorites-control btn-favourite", className)}
         onClick={event => this.toggleItem(event, item, onChange)}>
         <i className={icon} aria-hidden="true" />
       </a>

client/app/components/Parameters.jsx

@@ -1,6 +1,7 @@
 import { size, filter, forEach, extend } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
+import Button from "antd/lib/button";
 import { SortableContainer, SortableElement, DragHandle } from "@/components/sortable";
 import location from "@/services/location";
 import { Parameter, createParameter } from "@/services/parameters";
@@ -123,15 +124,16 @@ export default class Parameters extends React.Component {
     return (
       <div key={param.name} className="di-block" data-test={`ParameterName-${param.name}`}>
         <div className="parameter-heading">
-          <label>{param.title || toHuman(param.name)}</label>
+          <label>
+            <span>{param.title || toHuman(param.name)}</span>
+          </label>
           {editable && (
-            <button
-              className="btn btn-default btn-xs m-l-5"
+            <Button
+              size="small"
+              icon="setting"
               onClick={() => this.showParameterSettings(param, index)}
               data-test={`ParameterSettings-${param.name}`}
-              type="button">
-              <i className="fa fa-cog" />
-            </button>
+            />
           )}
         </div>
         <ParameterValueInput

client/app/components/Parameters.less

@@ -1,4 +1,4 @@
-@import '../assets/less/ant';
+@import "../assets/less/ant";
 
 .parameter-block {
   display: inline-block;
@@ -20,27 +20,43 @@
   }
 
   &.parameter-dragged {
-    box-shadow:  0 4px 9px -3px rgba(102, 136, 153, 0.15);
+    box-shadow: 0 4px 9px -3px rgba(102, 136, 153, 0.15);
   }
 }
 
 .parameter-heading {
   display: flex;
   align-items: center;
+  justify-content: stretch;
   padding-bottom: 4px;
 
   label {
+    flex: 1 1 auto;
     margin-bottom: 1px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: 100%;
-    max-width: 195px;
-    white-space: nowrap;
-
-    .parameter-block[data-editable] & {
-      min-width: calc(100% - 27px); // make room for settings button
-      max-width: 195px - 27px;
+    position: relative;
+
+    &:before {
+      content: "Ij"; // placeholder
+      visibility: hidden;
     }
+
+    span {
+      position: absolute;
+      left: 0;
+      right: 0;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .ant-btn {
+    flex: 0 0 auto;
+    margin-left: 5px;
+    padding: 0 !important;
+    width: 26px;
+    text-align: center;
   }
 }
 
@@ -88,7 +104,9 @@
         height: 27px;
       }
 
-      &:hover, &:focus, &:active {
+      &:hover,
+      &:focus,
+      &:active {
         background-color: #eef7fe;
       }