add option to wrap lines in custom code mirror

[jadami10]

Description

Many of the zookeeper nodes contain quite long metadata, and it's challenging to scroll horizontally to read them.

• Adds a toggle to wrap lines for the CustomCodeMirror
• uses it in the zk browser

Note: i had to test with material-ui: 4.12.3 becuase the zookeeper browser is refusing to load locally due to some makeStyles issue

Edit table looks the same

but zk browser now can wrap lines

Upgrade Notes

Does this PR prevent a zero down-time upgrade? (Assume upgrade order: Controller, Broker, Server, Minion)

• Yes (Please label as backward-incompat, and complete the section below on Release Notes)

Does this PR fix a zero-downtime upgrade introduced earlier?

• Yes (Please label this as backward-incompat, and complete the section below on Release Notes)

Does this PR otherwise need attention when creating release notes? Things to consider:

• New configuration options
• Deprecation of configurations
• Signature changes to public methods/interfaces
• New plugins added or old plugins removed

• Yes (Please label this PR as release-notes and complete the section on Release Notes)

Release Notes

Documentation

[codecov-commenter]

Codecov Report

Merging #7857 (ff5c759) into master (47e49ec) will decrease coverage by 33.15%.
The diff coverage is n/a.

@@              Coverage Diff              @@
##             master    #7857       +/-   ##
=============================================
- Coverage     71.63%   38.47%   -33.16%     
+ Complexity     4088       80     -4008     
=============================================
  Files          1580     1580               
  Lines         81100    81099        -1     
  Branches      12068    12068               
=============================================
- Hits          58093    31200    -26893     
- Misses        19092    47529    +28437     
+ Partials       3915     2370     -1545     

Flag	Coverage Δ
integration1	29.39% <ø> (-0.01%)	⬇️
integration2	27.90% <ø> (+<0.01%)	⬆️
unittests1	?
unittests2	14.53% <ø> (-0.03%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
.../java/org/apache/pinot/spi/utils/BooleanUtils.java	0.00% <0.00%> (-100.00%)	⬇️
...ava/org/apache/pinot/spi/config/table/FSTType.java	0.00% <0.00%> (-100.00%)	⬇️
...ava/org/apache/pinot/spi/data/MetricFieldSpec.java	0.00% <0.00%> (-100.00%)	⬇️
...va/org/apache/pinot/spi/utils/BigDecimalUtils.java	0.00% <0.00%> (-100.00%)	⬇️
...java/org/apache/pinot/common/tier/TierFactory.java	0.00% <0.00%> (-100.00%)	⬇️
...a/org/apache/pinot/spi/config/table/TableType.java	0.00% <0.00%> (-100.00%)	⬇️
.../org/apache/pinot/spi/data/DimensionFieldSpec.java	0.00% <0.00%> (-100.00%)	⬇️
.../org/apache/pinot/spi/data/readers/FileFormat.java	0.00% <0.00%> (-100.00%)	⬇️
...org/apache/pinot/spi/config/table/QuotaConfig.java	0.00% <0.00%> (-100.00%)	⬇️
...org/apache/pinot/spi/config/tenant/TenantRole.java	0.00% <0.00%> (-100.00%)	⬇️
... and 877 more

---

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 47e49ec...ff5c759. Read the comment docs.

[Jackie-Jiang]

@shahsank3t Can you please help take a look at this?

[shahsank3t]

Thank you @jadami10 for this enhancement.
+1, Changes look good to me.
Just one nitpick: should we move the Wrap lines toggle on the right-hand side instead of the left? IMO, it's an action and I think it will be better on left. What do you think?

cc: @Jackie-Jiang

[jadami10]

I liked it better on the left since that puts it closer to the start of the lines. so if i wrap, i can immediately move the mouse down and copy/paste.

that said, it's not a strong opinion. maybe @Jackie-Jiang can be the tie breaker.

[Jackie-Jiang]

@shahsank3t Thanks for the review. I kind of like the way @jadami10 puts it on the left since it requires less mouse movement.