Rearrange nav controls (#676)

* Rearange nav controls Signed-off-by: yoave23 <[email protected]> * Remove logo and use text Signed-off-by: yoave23 <[email protected]>
jaegertracing · Jan 14, 2021 · e0ee8eb · e0ee8eb
1 parent 1c9a9ba
commit e0ee8eb
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 17 deletions.
diff --git a/packages/jaeger-ui/src/components/App/TopNav.test.js b/packages/jaeger-ui/src/components/App/TopNav.test.js
@@ -71,8 +71,8 @@ describe('<TopNav>', () => {
   });
 
   describe('renders the default menu options', () => {
-    it('renders the "Jaeger UI" button', () => {
-      const items = wrapper.find(Link).findWhere(link => /Jaeger UI/.test(link.text()));
+    it('renders the "JAEGER UI" link', () => {
+      const items = wrapper.find(Link).findWhere(link => /JAEGER UI/.test(link.text()));
       expect(items.length).toBe(1);
     });
 

diff --git a/packages/jaeger-ui/src/components/App/TopNav.tsx b/packages/jaeger-ui/src/components/App/TopNav.tsx
@@ -101,9 +101,13 @@ export function TopNavImpl(props: Props) {
   const { config, router } = props;
   const { pathname } = router.location;
   const menuItems = Array.isArray(config.menu) ? config.menu : [];
+
   return (
     <div>
       <Menu theme="dark" mode="horizontal" selectable={false} className="ub-right" selectedKeys={[pathname]}>
+        <Menu.Item>
+          <TraceIDSearchInput />
+        </Menu.Item>
         {menuItems.map(m => {
           if (isItem(m)) {
             return getItem(m);
@@ -117,10 +121,9 @@ export function TopNavImpl(props: Props) {
       </Menu>
       <Menu theme="dark" mode="horizontal" selectable={false} selectedKeys={[pathname]}>
         <Menu.Item>
-          <Link to={prefixUrl('/')}>Jaeger UI</Link>
-        </Menu.Item>
-        <Menu.Item>
-          <TraceIDSearchInput />
+          <Link to={prefixUrl('/')} style={{ fontSize: '14px', fontWeight: 500 }}>
+            JAEGER UI
+          </Link>
         </Menu.Item>
         {NAV_LINKS.map(({ matches, to, text }) => {
           const url = typeof to === 'string' ? to : to(props);

diff --git a/packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx b/packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Form, Input } from 'antd';
+import { Form, Input, Icon } from 'antd';
 import { RouteComponentProps, Router as RouterHistory, withRouter } from 'react-router-dom';
 
 import { getUrl } from '../TracePage/url';
@@ -37,7 +37,12 @@ class TraceIDSearchInput extends React.PureComponent<Props> {
   render() {
     return (
       <Form layout="horizontal" onSubmit={this.goToTrace} className="TraceIDSearchInput--form">
-        <Input autosize={null} name="idInput" placeholder="Lookup by Trace ID..." />
+        <Input
+          autosize={null}
+          name="idInput"
+          placeholder="Lookup by Trace ID..."
+          prefix={<Icon type="search" />}
+        />
       </Form>
     );
   }

diff --git a/packages/jaeger-ui/src/components/App/__snapshots__/TraceIDSearchInput.test.js.snap b/packages/jaeger-ui/src/components/App/__snapshots__/TraceIDSearchInput.test.js.snap
@@ -5,14 +5,26 @@ exports[`<TraceIDSearchInput /> renders as expected 1`] = `
   className="ant-form ant-form-horizontal TraceIDSearchInput--form"
   onSubmit={[Function]}
 >
-  <input
-    autosize={null}
-    className="ant-input"
-    disabled={false}
-    name="idInput"
-    onKeyDown={[Function]}
-    placeholder="Lookup by Trace ID..."
-    type="text"
-  />
+  <span
+    className="ant-input-affix-wrapper"
+  >
+    <span
+      className="ant-input-prefix"
+    >
+      <i
+        className="anticon anticon-search"
+      />
+    </span>
+    <input
+      autosize={null}
+      className="ant-input"
+      disabled={false}
+      name="idInput"
+      onKeyDown={[Function]}
+      placeholder="Lookup by Trace ID..."
+      style={null}
+      type="text"
+    />
+  </span>
 </form>
 `;