Use Ant Design instead of Semantic UI (#169)

* Shift top nav to ant.design Signed-off-by: Joe Farro <joef@uber.com> * Use the better string comparator Signed-off-by: Joe Farro <joef@uber.com> * Search uses Ant - flow, tests, cleanup are TODO Signed-off-by: Joe Farro <joef@uber.com> * Highlight currently active menu option Signed-off-by: Joe Farro <joef@uber.com> * Using Ant for all pages, flow and tests are TODO Signed-off-by: Joe Farro <joef@uber.com> * Fix bug with text ellipsis in FF Signed-off-by: Joe Farro <joef@uber.com> * Fix flow after moving to ant design Signed-off-by: Joe Farro <joef@uber.com> * Unit tests passing after shift to ant design Signed-off-by: Joe Farro <joef@uber.com> * Fix loss of focus on first change in search form Signed-off-by: Joe Farro <joef@uber.com> * Search page aesthetic tweaks Signed-off-by: Joe Farro <joef@uber.com> * Remove basscss and semantic-ui. Signed-off-by: Joe Farro <joef@uber.com> * Upgrade react-scripts to fix failing unit tests Signed-off-by: Joe Farro <joef@uber.com> * Only bundle icons that are used from react-icons Signed-off-by: Joe Farro <joef@uber.com> * Misc cleanup Signed-off-by: Joe Farro <joef@uber.com> * Fix search form error when deselecting a service Signed-off-by: Joe Farro <joef@uber.com> * Adjust the ant theme to the Jaeger teal color Signed-off-by: Joe Farro <joef@uber.com> * Swith to using a variant of basscss (u-basscss) Signed-off-by: Joe Farro <joef@uber.com>
jaegertracing · Jan 29, 2018 · b7a3e74 · b7a3e74
1 parent da464e5
commit b7a3e74
Show file tree

Hide file tree

Showing 91 changed files with 3,489 additions and 2,121 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -1,9 +1,9 @@
 [ignore]
 # node_module packages that have a .flowconfig in conflict with this file
-.*/node_modules/fbjs/.*
-.*/node_modules/uber-licence/.*
-.*/node_modules/redux-form/.*
-.*/node_modules/react-motion/.*
+<PROJECT_ROOT>/node_modules/uber-licence
+<PROJECT_ROOT>/node_modules/redux-form
+<PROJECT_ROOT>/node_modules/react-motion
+<PROJECT_ROOT>/node_modules/draft-js
 
 [include]
 

diff --git a/config-overrides-ant-variables.less b/config-overrides-ant-variables.less
@@ -0,0 +1,21 @@
+@primary-color: #199;
+
+@font-size-base: 14px;
+@text-color-dark: #e4e4e4;
+@text-color-secondary-dark: #fff;
+
+// Layout
+@layout-body-background      :#fff;
+@layout-header-background    : #404040;
+@layout-footer-background    : @layout-body-background;
+@layout-header-height        : 64px;
+@layout-header-padding       : 0 50px;
+@layout-footer-padding       : 24px 50px;
+@layout-sider-background     : @layout-header-background;
+@layout-trigger-height       : 48px;
+@layout-trigger-background   : tint(@heading-color, 20%);
+@layout-trigger-color        : #fff;
+@layout-zero-trigger-width   : 36px;
+@layout-zero-trigger-height  : 42px;
+
+@menu-dark-bg: #151515;
diff --git a/config-overrides.js b/config-overrides.js
@@ -0,0 +1,33 @@
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/* eslint-disable import/no-extraneous-dependencies */
+
+const fs = require('fs');
+const { injectBabelPlugin } = require('react-app-rewired');
+const rewireLess = require('react-app-rewire-less');
+const lessToJs = require('less-vars-to-js');
+
+// Read the less file in as string
+const loadedVarOverrides = fs.readFileSync('config-overrides-ant-variables.less', 'utf8');
+
+// Pass in file contents
+const modifyVars = lessToJs(loadedVarOverrides);
+
+module.exports = function override(_config, env) {
+  let config = _config;
+  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
+  config = rewireLess.withLoaderOptions({ modifyVars })(config, env);
+  return config;
+};
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   "homepage": null,
   "devDependencies": {
     "babel-eslint": "^7.2.3",
+    "babel-plugin-import": "^1.6.3",
     "bluebird": "^3.5.0",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
@@ -29,14 +30,17 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.2.1",
     "husky": "^0.14.3",
+    "less-vars-to-js": "^1.2.1",
     "lint-staged": "^4.0.3",
     "prettier": "^1.5.3",
+    "react-app-rewire-less": "^2.1.0",
+    "react-app-rewired": "^1.4.0",
     "react-scripts": "^1.0.11",
     "react-test-renderer": "^15.6.1",
     "sinon": "^3.2.1"
   },
   "dependencies": {
-    "basscss": "^8.0.3",
+    "antd": "^3.0.3",
     "chance": "^1.0.10",
     "classnames": "^2.2.5",
     "combokeys": "^3.0.0",
@@ -59,15 +63,16 @@
     "prop-types": "^15.5.10",
     "query-string": "^5.0.0",
     "react": "^16.0.0",
-    "react-addons-perf": "^15.4.2",
     "react-dimensions": "^1.3.0",
     "react-dom": "^16.0.0",
     "react-ga": "^2.2.0",
     "react-helmet": "^5.1.3",
+    "react-icons": "^2.2.7",
     "react-metrics": "^2.3.2",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.1.2",
     "react-router-redux": "5.0.0-alpha.6",
+    "react-virtualized-select": "^3.1.0",
     "react-vis": "^1.7.2",
     "react-vis-force": "^0.3.1",
     "recompose": "^0.25.0",
@@ -77,18 +82,17 @@
     "redux-form": "^7.0.3",
     "redux-promise-middleware": "^4.3.0",
     "reselect": "^3.0.1",
-    "semantic-ui-css": "^2.2.12",
-    "semantic-ui-react": "^0.71.4",
     "store": "^2.0.12",
-    "tween-functions": "^1.2.0"
+    "tween-functions": "^1.2.0",
+    "u-basscss": "2.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
     "start:docs": "REACT_APP_DEMO=true react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
     "eject": "react-scripts eject",
-    "test": "CI=1 react-scripts test --env=jsdom --color",
-    "test-dev": "react-scripts test --env=jsdom",
+    "test": "CI=1 react-app-rewired test --env=jsdom --color",
+    "test-dev": "react-app-rewired test --env=jsdom",
     "coverage": "npm run test -- --coverage",
     "lint": "npm run eslint && npm run prettier && npm run flow && npm run check-license",
     "eslint": "eslint src",

diff --git a/src/components/App/App.css b/src/components/App/App.css
diff --git a/src/components/App/NotFound.js b/src/components/App/NotFound.js
@@ -26,16 +26,10 @@ type NotFoundProps = {
 
 export default function NotFound({ error }: NotFoundProps) {
   return (
-    <section className="ui container">
-      <div className="ui basic segment">
-        <div className="ui center aligned basic segment">
-          <h1>Error</h1>
-        </div>
-        {error && <ErrorMessage error={error} />}
-        <div className="ui center aligned basic segment">
-          <Link to={prefixUrl('/')}>{'Back home'}</Link>
-        </div>
-      </div>
+    <section className="ub-m3">
+      <h1>Error</h1>
+      {error && <ErrorMessage error={error} />}
+      <Link to={prefixUrl('/')}>{'Back home'}</Link>
     </section>
   );
 }
diff --git a/src/components/App/Page.css b/src/components/App/Page.css
@@ -14,11 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.jaeger-ui-page {
-  height: 100%;
+.Page--topNav {
+  height: auto;
+  padding: 0;
+  position: fixed;
+  width: 100%;
+  z-index: 3;
 }
 
-.jaeger-ui--content {
-  height: 100%;
-  padding-top: 50px;
+.Page--content {
+  padding-top: 47px;
 }
diff --git a/src/components/App/Page.js b/src/components/App/Page.js
@@ -15,6 +15,7 @@
 // limitations under the License.
 
 import * as React from 'react';
+import { Layout } from 'antd';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
 import type { Location } from 'react-router-dom';
@@ -32,6 +33,8 @@ type PageProps = {
   config: Config,
 };
 
+const { Header, Content } = Layout;
+
 // export for tests
 export class PageImpl extends React.Component<PageProps> {
   props: PageProps;
@@ -50,14 +53,18 @@ export class PageImpl extends React.Component<PageProps> {
   }
 
   render() {
-    const { children, config } = this.props;
+    const { children, config, location } = this.props;
     const menu = config && config.menu;
     return (
-      <section className="jaeger-ui-page" id="jaeger-ui">
+      <div>
         <Helmet title="Jaeger UI" />
-        <TopNav menuConfig={menu} />
-        <div className="jaeger-ui--content">{children}</div>
-      </section>
+        <Layout>
+          <Header className="Page--topNav">
+            <TopNav activeKey={location.pathname} menuConfig={menu} />
+          </Header>
+          <Content className="Page--content">{children}</Content>
+        </Layout>
+      </div>
     );
   }
 }