add uiFind icons, scroll to first match

packages/jaeger-ui/src/components/TracePage/ScrollManager.test.js

@@ -21,15 +21,14 @@ import ScrollManager from './ScrollManager';
 const SPAN_HEIGHT = 2;
 
 function getTrace() {
-  let nextSpanID = 0;
   const spans = [];
   const trace = {
     spans,
     duration: 2000,
     startTime: 1000,
   };
   for (let i = 0; i < 10; i++) {
-    spans.push({ duration: 1, startTime: 1000, spanID: nextSpanID++ });
+    spans.push({ duration: 1, startTime: 1000, spanID: i + 1 });
   }
   return trace;
 }
@@ -106,6 +105,9 @@ describe('ScrollManager', () => {
   });
 
   describe('_scrollToVisibleSpan()', () => {
+    function getRefs(spanID) {
+      return [{ refType: 'CHILD_OF', spanID }];
+    }
     let scrollPastMock;
 
     beforeEach(() => {
@@ -142,7 +144,7 @@ describe('ScrollManager', () => {
 
     it('skips spans that are out of view', () => {
       trace.spans[4].startTime = trace.startTime + trace.duration * 0.5;
-      accessors.getViewRange = jest.fn(() => [0.4, 0.6]);
+      accessors.getViewRange = () => [0.4, 0.6];
       accessors.getTopRowIndexVisible.mockReturnValue(trace.spans.length - 1);
       accessors.getBottomRowIndexVisible.mockReturnValue(0);
       manager._scrollToVisibleSpan(1);
@@ -154,18 +156,41 @@ describe('ScrollManager', () => {
     it('skips spans that do not match the text search', () => {
       accessors.getTopRowIndexVisible.mockReturnValue(trace.spans.length - 1);
       accessors.getBottomRowIndexVisible.mockReturnValue(0);
-      accessors.getSearchedSpanIDs = jest.fn(() => new Set([trace.spans[4].spanID]));
+      accessors.getSearchedSpanIDs = () => new Set([trace.spans[4].spanID]);
       manager._scrollToVisibleSpan(1);
       expect(scrollPastMock).lastCalledWith(4, 1);
       manager._scrollToVisibleSpan(-1);
       expect(scrollPastMock).lastCalledWith(4, -1);
     });
 
-    describe('scrollToNextVisibleSpan() and scrollToPrevVisibleSpan()', () => {
-      function getRefs(spanID) {
-        return [{ refType: 'CHILD_OF', spanID }];
-      }
+    it('scrolls to boundary when scrolling away from closest spanID in findMatches', () => {
+      const closetFindMatchesSpanID = 4;
+      accessors.getTopRowIndexVisible.mockReturnValue(closetFindMatchesSpanID - 1);
+      accessors.getBottomRowIndexVisible.mockReturnValue(closetFindMatchesSpanID + 1);
+      accessors.getSearchedSpanIDs = () => new Set([trace.spans[closetFindMatchesSpanID].spanID]);
+
+      manager._scrollToVisibleSpan(1);
+      expect(scrollPastMock).lastCalledWith(trace.spans.length - 1, 1);
+
+      manager._scrollToVisibleSpan(-1);
+      expect(scrollPastMock).lastCalledWith(0, -1);
+    });
+
+    it('scrolls to last visible row when boundary is hidden', () => {
+      const parentOfLastRowWithHiddenChildrenIndex = trace.spans.length - 2;
+      accessors.getBottomRowIndexVisible.mockReturnValue(0);
+      accessors.getCollapsedChildren = () =>
+        new Set([trace.spans[parentOfLastRowWithHiddenChildrenIndex].spanID]);
+      accessors.getSearchedSpanIDs = () => new Set([trace.spans[0].spanID]);
+      trace.spans[trace.spans.length - 1].references = getRefs(
+        trace.spans[parentOfLastRowWithHiddenChildrenIndex].spanID
+      );
+
+      manager._scrollToVisibleSpan(1);
+      expect(scrollPastMock).lastCalledWith(parentOfLastRowWithHiddenChildrenIndex, 1);
+    });
 
+    describe('scrollToNextVisibleSpan() and scrollToPrevVisibleSpan()', () => {
       beforeEach(() => {
         // change spans so 0 and 4 are top-level and their children are collapsed
         const spans = trace.spans;
@@ -213,6 +238,17 @@ describe('ScrollManager', () => {
         expect(scrollPastMock).lastCalledWith(4, -1);
       });
     });
+
+    describe('scrollToFirstVisibleSpan', () => {
+      beforeEach(() => {
+        jest.spyOn(manager, '_scrollToVisibleSpan').mockImplementationOnce();
+      });
+
+      it('calls _scrollToVisibleSpan searching downwards from first span', () => {
+        manager.scrollToFirstVisibleSpan();
+        expect(manager._scrollToVisibleSpan).toHaveBeenCalledWith(1, 0);
+      });
+    });
   });
 
   describe('scrollPageDown() and scrollPageUp()', () => {

packages/jaeger-ui/src/components/TracePage/ScrollManager.tsx

@@ -120,7 +120,7 @@ export default class ScrollManager {
     this._scroller.scrollTo(y);
   }
 
-  _scrollToVisibleSpan(direction: 1 | -1) {
+  _scrollToVisibleSpan(direction: 1 | -1, startRow?: number) {
     const xrs = this._accessors;
     /* istanbul ignore next */
     if (!xrs) {
@@ -132,7 +132,7 @@ export default class ScrollManager {
     const { duration, spans, startTime: traceStartTime } = this._trace;
     const isUp = direction < 0;
     const boundaryRow = isUp ? xrs.getTopRowIndexVisible() : xrs.getBottomRowIndexVisible();
-    const spanIndex = xrs.mapRowIndexToSpanIndex(boundaryRow);
+    const spanIndex = xrs.mapRowIndexToSpanIndex(startRow != null ? startRow : boundaryRow);
     if ((spanIndex === 0 && isUp) || (spanIndex === spans.length - 1 && !isUp)) {
       return;
     }
@@ -184,7 +184,7 @@ export default class ScrollManager {
 
       // If there are hidden children, scroll to the last visible span
       if (childrenAreHidden) {
-        let isFallbackHidden: boolean | TNil;
+        let isFallbackHidden: boolean;
         do {
           const { isHidden, parentIDs } = isSpanHidden(spans[nextSpanIndex], childrenAreHidden, spansMap);
           if (isHidden) {
@@ -255,6 +255,10 @@ export default class ScrollManager {
     this._scrollToVisibleSpan(-1);
   };
 
+  scrollToFirstVisibleSpan = () => {
+    this._scrollToVisibleSpan(1, 0);
+  };
+
   destroy() {
     this._trace = undefined;
     this._scroller = undefined as any;

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.test.js

@@ -14,6 +14,7 @@
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
+import { Link } from 'react-router-dom';
 
 import AltViewOptions from './AltViewOptions';
 import KeyboardShortcutsHelp from './KeyboardShortcutsHelp';
@@ -110,6 +111,14 @@ describe('<TracePageHeader>', () => {
       expect(wrapper.find(AltViewOptions).length).toBe(0);
     });
 
+    it('renders the link to search', () => {
+      expect(wrapper.find(Link).length).toBe(0);
+
+      const toSearch = 'some-link';
+      wrapper.setProps({ toSearch });
+      expect(wrapper.find({ to: toSearch }).length).toBe(1);
+    });
+
     it('toggles the standalone link', () => {
       const linkToStandalone = 'some-link';
       const props = {

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx

@@ -40,6 +40,7 @@ import './TracePageHeader.css';
 type TracePageHeaderEmbedProps = {
   canCollapse: boolean;
   clearSearch: () => void;
+  focusUiFindMatches: () => void;
   hideMap: boolean;
   hideSummary: boolean;
   linkToStandalone: string;
@@ -95,6 +96,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
   const {
     canCollapse,
     clearSearch,
+    focusUiFindMatches,
     forwardedRef,
     hideMap,
     hideSummary,
@@ -161,17 +163,17 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
         ) : (
           title
         )}
-        {showShortcutsHelp && <KeyboardShortcutsHelp className="ub-mr2" />}
         <TracePageSearchBar
           clearSearch={clearSearch}
+          focusUiFindMatches={focusUiFindMatches}
           nextResult={nextResult}
           prevResult={prevResult}
           ref={forwardedRef}
           resultCount={resultCount}
           textFilter={textFilter}
           navigable={!traceGraphView}
         />
-
+        {showShortcutsHelp && <KeyboardShortcutsHelp className="ub-m2" />}
         {showViewOptions && (
           <AltViewOptions
             onTraceGraphViewClicked={onTraceGraphViewClicked}

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.css

@@ -15,11 +15,19 @@ limitations under the License.
 */
 
 .TracePageSearchBar {
-  max-width: 20rem;
+  width: 40%;
+}
+
+.TracePageSearchBar--InputGroup {
+  justify-content: flex-end;
 }
 
 .TracePageSearchBar--bar {
-  display: flex;
+  max-width: 100%;
+  transition: max-width 1.5s;
+}
+
+.TracePageSearchBar--bar:not(:focus-within) {
   max-width: 20rem;
 }
 
@@ -28,6 +36,7 @@ limitations under the License.
 }
 
 .TracePageSearchBar--btn {
+  border-left: none;
   transition: 0.2s;
 }
 

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.test.js

@@ -16,20 +16,20 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import * as markers from './TracePageSearchBar.markers';
-import { TracePageSearchBarFn as TracePageSearchBar } from './TracePageSearchBar';
+import DefaultTracePageSearchBar, { TracePageSearchBarFn as TracePageSearchBar } from './TracePageSearchBar';
 import { trackFilter } from '../index.track';
 import UiFindInput from '../../common/UiFindInput';
 
-describe('<TracePageSearchBar>', () => {
-  const defaultProps = {
-    forwardedRef: React.createRef(),
-    navigable: true,
-    nextResult: () => {},
-    prevResult: () => {},
-    resultCount: 0,
-    textFilter: 'something',
-  };
+const defaultProps = {
+  forwardedRef: React.createRef(),
+  navigable: true,
+  nextResult: () => {},
+  prevResult: () => {},
+  resultCount: 0,
+  textFilter: 'something',
+};
 
+describe('<TracePageSearchBar>', () => {
   let wrapper;
 
   beforeEach(() => {
@@ -55,7 +55,7 @@ describe('<TracePageSearchBar>', () => {
 
     it('renders buttons', () => {
       const buttons = wrapper.find('Button');
-      expect(buttons.length).toBe(3);
+      expect(buttons.length).toBe(4);
       buttons.forEach(button => {
         expect(button.hasClass('TracePageSearchBar--btn')).toBe(true);
         expect(button.hasClass('is-disabled')).toBe(false);
@@ -66,15 +66,11 @@ describe('<TracePageSearchBar>', () => {
       expect(wrapper.find('Button[icon="close"]').prop('onClick')).toBe(defaultProps.clearSearch);
     });
 
-    it('disables navigation buttons when not navigable', () => {
+    it('hides navigation buttons when not navigable', () => {
       wrapper.setProps({ navigable: false });
-      const buttons = wrapper.find('Button');
-      expect(buttons.length).toBe(3);
-      buttons.forEach((button, i) => {
-        expect(button.hasClass('TracePageSearchBar--btn')).toBe(true);
-        expect(button.hasClass('is-disabled')).toBe(i !== 2);
-        expect(button.prop('disabled')).toBe(i !== 2);
-      });
+      const button = wrapper.find('Button');
+      expect(button.length).toBe(1);
+      expect(button.prop('icon')).toBe('close');
     });
   });
 
@@ -89,7 +85,7 @@ describe('<TracePageSearchBar>', () => {
 
     it('renders buttons', () => {
       const buttons = wrapper.find('Button');
-      expect(buttons.length).toBe(3);
+      expect(buttons.length).toBe(4);
       buttons.forEach(button => {
         expect(button.hasClass('TracePageSearchBar--btn')).toBe(true);
         expect(button.hasClass('is-disabled')).toBe(true);
@@ -98,3 +94,12 @@ describe('<TracePageSearchBar>', () => {
     });
   });
 });
+
+describe('<DefaultTracePageSearchBar>', () => {
+  const { forwardedRef: ref, ...propsWithoutRef } = defaultProps;
+
+  it('forwardsRef correctly', () => {
+    const wrapper = shallow(<DefaultTracePageSearchBar {...propsWithoutRef} ref={ref} />);
+    expect(wrapper.find(TracePageSearchBar).props()).toEqual(defaultProps);
+  });
+});