fix(Dashboard): Add border to row when hovering HoverMenu in edit mode

[rtexelm]

SUMMARY

This adds a distinction to the context of the hover menu icons being a full row of the dashboard editor rather than the left most chart. It's purpose is to avoid confusion as to what these icons would affect.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

B:

A:

TESTING INSTRUCTIONS

Edit a dashboard then hover over the menu icons to the left of any row

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Attention: Patch coverage is 71.42857% with 4 lines in your changes are missing coverage. Please review.

Project coverage is 69.77%. Comparing base (349e496) to head (6ab5abd).

Files	Patch %	Lines
...nd/src/dashboard/components/gridComponents/Row.jsx	50.00%	2 Missing and 1 partial ⚠️
...ontend/src/dashboard/components/menu/HoverMenu.tsx	87.50%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #27593      +/-   ##
==========================================
- Coverage   69.77%   69.77%   -0.01%     
==========================================
  Files        1911     1911              
  Lines       75056    75069      +13     
  Branches     8362     8365       +3     
==========================================
+ Hits        52374    52383       +9     
- Misses      20630    20632       +2     
- Partials     2052     2054       +2     

Flag	Coverage Δ
javascript	57.49% <71.42%> (+<0.01%)	⬆️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[eschutho]

/testenv up

[github-actions]

@eschutho Ephemeral environment spinning up at http://34.218.74.166:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[john-bodley]

@rtexelm is there merit in in matching the line color/thickness to be the same as when you hover over a specific dashboard element?

[rtexelm]

@john-bodley I thought making it 2px instead of 1 would hopefully differentiate it from a regular dashboard element, inspired by the styling from WithPopoverMenu but using a dashed border to avoid confusion with that context.
It could go further in that direction, changing the border style and color to be more distinct but I don't think it should be closer to the style of a chart or other dashboard element because rows represent a separate role as a container of those

[rtexelm]

Came across the problem that getByTestId was not finding data-testid but will find data-test. There is an override I found here but I couldn't find it utilized in the codebase. I did find this in babel.config.js:

production: {
      plugins: [
        [
          'babel-plugin-jsx-remove-data-test-id',
          {
            attributes: 'data-test',
          },
        ],
      ],
    },

Does this make sense for the substitution during testing?

[eschutho]

@rtexelm Yeah, this all looks good to me. Thanks for the improvements!

[eschutho]

Lgtm!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.