Update TagsList and Sidebar to use Ant components

client/app/assets/less/ant.less

@@ -374,4 +374,16 @@
     line-height: 20px;
     margin-top: 9px;
   }
+}
+
+.@{menu-prefix-cls} {
+  // invert stripe position with class .invert-stripe-position
+  &-inline.invert-stripe-position {
+    .@{menu-prefix-cls}-item {
+      &::after {
+        right: auto;
+        left: 0;
+      }
+    }
+  }
 }

client/app/assets/less/inc/list-group.less

@@ -17,31 +17,6 @@
     }
 }
 
-tags-list {
-  a {
-    line-height: 1.1;
-  }
-}
-
-.tags-list__name {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 88%;
-  line-height: 1.3;
-}
-
-.tags-list {
-  .badge-light {
-    background: fade(@redash-gray, 10%);
-    color: fade(@redash-gray, 75%);
-  }
-
-  a:hover {
-    cursor: pointer;
-  }
-}
-
 .max-character {
   .text-overflow();
 }

client/app/components/TagsList.jsx

@@ -2,9 +2,12 @@ import { map } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
-import classNames from 'classnames';
+import Badge from 'antd/lib/badge';
+import Menu from 'antd/lib/menu';
 import getTags from '@/services/getTags';
 
+import './TagsList.less';
+
 export class TagsList extends React.Component {
   static propTypes = {
     tagsUrl: PropTypes.string.isRequired,
@@ -59,17 +62,17 @@ export class TagsList extends React.Component {
     const { allTags, selectedTags } = this.state;
     if (allTags.length > 0) {
       return (
-        <div className="list-group m-t-10 tags-list tiled">
-          {map(allTags, tag => (
-            <a
-              key={tag.name}
-              className={classNames('list-group-item', 'max-character', { active: selectedTags.has(tag.name) })}
-              onClick={event => this.toggleTag(event, tag.name)}
-            >
-              <span className="badge badge-light">{tag.count}</span>
-              <span className="tags-list__name">{tag.name}</span>
-            </a>
-          ))}
+        <div className="m-t-10 tags-list tiled">
+          <Menu className="invert-stripe-position" mode="inline" selectedKeys={[...selectedTags]}>
+            {map(allTags, tag => (
+              <Menu.Item key={tag.name} className="m-0">
+                <a className="d-flex align-items-center justify-content-between" onClick={event => this.toggleTag(event, tag.name)}>
+                  <span className="max-character col-xs-11">{tag.name}</span>
+                  <Badge count={tag.count} />
+                </a>
+              </Menu.Item>
+            ))}
+          </Menu>
         </div>
       );
     }

client/app/components/TagsList.less

@@ -0,0 +1,15 @@
+@import '~@/assets/less/ant';
+
+.tags-list {
+  .ant-badge-count {
+    background-color: fade(@redash-gray, 10%);
+    color: fade(@redash-gray, 75%);
+  }
+
+  .ant-menu-item-selected {
+    .ant-badge-count {
+      background-color: @primary-color;
+      color: white;
+    }
+  }
+}

client/app/components/items-list/components/Sidebar.jsx

@@ -1,8 +1,8 @@
 import { isFunction, isString, filter, map } from 'lodash';
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import Input from 'antd/lib/input';
+import AntdMenu from 'antd/lib/menu';
 import Select from 'antd/lib/select';
 import { TagsList } from '@/components/TagsList';
 
@@ -50,21 +50,21 @@ export function Menu({ items, selected }) {
     return null;
   }
   return (
-    <div className="list-group m-b-10 tags-list tiled">
-      {map(items, item => (
-        <a
-          key={item.key}
-          href={item.href}
-          className={classNames('list-group-item', { active: selected === item.key })}
-        >
-          {
-            isString(item.icon) && (item.icon !== '') &&
-            <span className="btn-favourite m-r-5"><i className={item.icon} aria-hidden="true" /></span>
-          }
-          {isFunction(item.icon) && (item.icon(item) || null)}
-          {item.title}
-        </a>
-      ))}
+    <div className="m-b-10 tags-list tiled">
+      <AntdMenu className="invert-stripe-position" mode="inline" selectable={false} selectedKeys={[selected]}>
+        {map(items, item => (
+          <AntdMenu.Item key={item.key} className="m-0">
+            <a href={item.href}>
+              {
+                isString(item.icon) && (item.icon !== '') &&
+                <span className="btn-favourite m-r-5"><i className={item.icon} aria-hidden="true" /></span>
+              }
+              {isFunction(item.icon) && (item.icon(item) || null)}
+              {item.title}
+            </a>
+          </AntdMenu.Item>
+        ))}
+      </AntdMenu>
     </div>
   );
 }