Ddg ui find

[everett980]

Adds UiFind to DDG, with temporary isUiFindMatch styling.

Focused, with query:

Not focused, with query:

Not focused, without query:

Unfortunately antd's Input in UiFindInput made getting this right more time consuming than it should have been. Between some styling conflicts, antd's allowClear prop implementation (in 3.12.0+), and how it handles suffix it probably would've been better to simply use a native input instead.
Due to other work being dependent on this, I figured it'd be best to raise this PR as is. Then we can decide the priority of finalizing these details in this PR versus wrapping up other DDG UI work.

[tiffon]

Did you have to update something? There are a lot of changes to the yarn.lock file.

Also, the packages were fetched from unpm.uberinternal.com which is now in the lock file.

[everett980]

I had tried to use [email protected] because they implemented allowClear, but the aesthetic was lacking and seemed non-configurable. I reverted the package.json, but forgot about the yarn.lock. It should be unchanged now.

[codecov]

Codecov Report

Merging #427 into master will decrease coverage by 0.06%.
The diff coverage is 93.65%.

@@            Coverage Diff            @@
##           master    #427      +/-   ##
=========================================
- Coverage   91.67%   91.6%   -0.07%     
=========================================
  Files         176     176              
  Lines        4012    4039      +27     
  Branches      957     968      +11     
=========================================
+ Hits         3678    3700      +22     
- Misses        292     295       +3     
- Partials       42      44       +2

Impacted Files	Coverage Δ
...aeger-ui/src/components/DeepDependencies/Graph.tsx	100% <100%> (ø)	⬆️
...i/src/components/DeepDependencies/Header/index.tsx	100% <100%> (ø)	⬆️
packages/jaeger-ui/src/model/ddg/Graph.tsx	100% <100%> (ø)	⬆️
...components/DeepDependencies/getNodeLabel/index.tsx	100% <100%> (ø)	⬆️
...nts/DeepDependencies/Header/HopsSelector/index.tsx	100% <100%> (ø)	⬆️
...mponents/DeepDependencies/getNodeLabel/DdgNode.tsx	100% <100%> (ø)	⬆️
...es/jaeger-ui/src/components/common/UiFindInput.tsx	82.35% <40%> (-17.65%)	⬇️
...aeger-ui/src/components/DeepDependencies/index.tsx	98.14% <94.44%> (+0.27%)	⬆️
...eViewer/TimelineHeaderRow/TimelineViewingLayer.tsx	88.13% <0%> (-3.39%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9df691d...0c9330f. Read the comment docs.

[tiffon]

Styling looks great. LMK if any of my comments look awry.

[tiffon]

I don't think undefined is needed when the ? is used:

type T = { a?: string }
const t: T = { a: undefined } // ok

[everett980]

that works but seems off imo. to me, type T means that if Reflect.has(t, a) === true then t.a is a string.

for instance:

 function(pt: T) {
     if (Reflect.has(pt, 'a')) {
         console.log(pt.a.repeat(3));
     }
 }

shouldn't have any TS errors IMO, but it does (pt.a can be undefined so can't repeat off of it).

Oh well, I removed the | undefined

[tiffon]

Added a few comments in the threads of the previous comments.

[tiffon]

LGTM. Great work.