[Security Solution] Enhancement endpoint flyout UI fixes #117987

academo · 2021-11-09T10:14:59Z

Summary

This is a second attempt for #115758

Fixes:

Header font size
Summary rows font size
Align policy name link, revision and out of date badge in a single row.
Consistent columns spacing on different screen sizes.
Replace deprecated date-time API

Before

After

Checklist

Delete any items that are not applicable to this PR.

Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

…t-flyout-ui-fixes

elasticmachine · 2021-11-09T10:15:02Z

Pinging @elastic/security-onboarding-and-lifecycle-mgt (Team:Onboarding and Lifecycle Mgt)

paul-tavares · 2021-11-10T14:43:39Z

...ty_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details_content.tsx

  }
 `;

+const ColumnTitle = ({ children }: { children: React.ReactNode }) => {


Suggest you use memo()

There's no need for memo here. In addition detailsResults (where this component is used) is already memoized.

paul-tavares · 2021-11-10T14:44:57Z

...ty_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details_content.tsx

          description: (
-            <EuiText>
+            <EuiText size="xs">
              {' '}


Not part of your changes, but just wondering if this was intentional or if perhaps it was just the IDE formatter that did it

This is probably some previous PR mistake. I'll remove it.

paul-tavares · 2021-11-10T14:46:00Z

...ty_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details_content.tsx

+              <EndpointPolicyLink
+                policyId={details.Endpoint.policy.applied.id}
+                data-test-subj="policyDetailsValue"
+                style={{ paddingRight: '5px' }}


Consider using a static object for the style value or memoizing it in order to avoid unnecessary re-renders. Same below

There's no need for memo here. this component is literally a link, the win on using memo is probably worse in performance than not using it. Furthermore the variable where this is stored detailsResults is already memoized

I'll use className in this one as David suggested.

paul-tavares · 2021-11-10T14:47:10Z

...ty_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details_content.tsx

+                  color="subdued"
+                  size="xs"
+                  className={'eui-displayInlineBlock'}
+                  style={{ whiteSpace: 'nowrap', paddingRight: '5px' }}


FYI: I think Eui has a class name that can be added to className= prop for no wrap

Also we should avoid using the style prop and use styled components instead

I was wondering what was the go-to approach for this. I'll go for classNane.

@paul-tavares yes I totally forgot about that, thanks!

academo · 2021-11-11T12:59:29Z

@elasticmachine merge upstream

…t-flyout-ui-fixes

academo · 2021-11-11T13:07:51Z

@elasticmachine merge upstream

academo · 2021-11-15T12:20:58Z

@elasticmachine merge upstream

kibana-ci · 2021-11-15T13:57:44Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	2797	2796	-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	4.5MB	4.5MB	+43.0B

History

💚 Build #6188 succeeded 0e6089b
💔 Build #6184 failed a8a1af4
💚 Build #5389 succeeded f1bd61e
💚 Build #5324 succeeded bbeee86

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

) * initial UI changes for font size and deprecated dependency * remove euitext wrapper * Remove unused dependency * Remove import * Add text break word * inline policy, version and icon * Allign icon in the out_of_date component * Remove unncessary wrapper * Replace style attributes with className Co-authored-by: Kibana Machine <[email protected]>

kibanamachine · 2021-11-17T12:05:58Z

💚 Backport successful

Status	Branch	Result
✅	8.0

This backport PR will be merged automatically after passing CI.

…118856) * initial UI changes for font size and deprecated dependency * remove euitext wrapper * Remove unused dependency * Remove import * Add text break word * inline policy, version and icon * Allign icon in the out_of_date component * Remove unncessary wrapper * Replace style attributes with className Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Esteban Beltran <[email protected]>

) * initial UI changes for font size and deprecated dependency * remove euitext wrapper * Remove unused dependency * Remove import * Add text break word * inline policy, version and icon * Allign icon in the out_of_date component * Remove unncessary wrapper * Replace style attributes with className Co-authored-by: Kibana Machine <[email protected]>

* initial UI changes for font size and deprecated dependency * remove euitext wrapper * Remove unused dependency * Remove import * Add text break word * inline policy, version and icon * Allign icon in the out_of_date component * Remove unncessary wrapper * Replace style attributes with className Co-authored-by: Kibana Machine <[email protected]>

Esteban Beltran added 5 commits November 8, 2021 16:17

initial UI changes for font size and deprecated dependency

6b13956

Merge remote-tracking branch 'upstream/main' into enhancement/endpoin…

f5bd9ba

…t-flyout-ui-fixes

remove euitext wrapper

431f7c8

Remove unused dependency

0519580

Remove import

0bf332e

academo added release_note:fix v8.0.0 Team:Defend Workflows “EDR Workflows” sub-team of Security Solution auto-backport Deprecated - use backport:version if exact versions are needed v8.1.0 labels Nov 9, 2021

academo requested a review from a team as a code owner November 9, 2021 10:15

academo requested review from joeypoon and paul-tavares November 9, 2021 10:15

Esteban Beltran added 4 commits November 9, 2021 11:46

Add text break word

bbeee86

inline policy, version and icon

6df6528

Allign icon in the out_of_date component

83add50

Remove unncessary wrapper

f1bd61e

academo requested review from dasansol92 and removed request for joeypoon November 10, 2021 12:34

paul-tavares reviewed Nov 10, 2021

View reviewed changes

Replace style attributes with className

f3cab43

Merge remote-tracking branch 'upstream/main' into enhancement/endpoin…

a8a1af4

…t-flyout-ui-fixes

academo force-pushed the enhancement/endpoint-flyout-ui-fixes branch from 70c4593 to a8a1af4 Compare November 11, 2021 13:01

Merge branch 'main' into enhancement/endpoint-flyout-ui-fixes

0e6089b

Merge branch 'main' into enhancement/endpoint-flyout-ui-fixes

64b673f

elastic deleted a comment from kibanamachine Nov 15, 2021

dasansol92 approved these changes Nov 17, 2021

View reviewed changes

academo merged commit 473d9d6 into elastic:main Nov 17, 2021

kibanamachine mentioned this pull request Nov 17, 2021

[8.0] [Security Solution] Enhancement endpoint flyout UI fixes (#117987) #118856

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] Enhancement endpoint flyout UI fixes #117987

[Security Solution] Enhancement endpoint flyout UI fixes #117987

academo commented Nov 9, 2021 •

edited

Loading

elasticmachine commented Nov 9, 2021

paul-tavares Nov 10, 2021

academo Nov 11, 2021

paul-tavares Nov 10, 2021

academo Nov 11, 2021

paul-tavares Nov 10, 2021

academo Nov 11, 2021 •

edited

Loading

paul-tavares Nov 10, 2021

dasansol92 Nov 11, 2021

academo Nov 11, 2021

academo commented Nov 11, 2021

academo commented Nov 11, 2021

academo commented Nov 15, 2021

kibana-ci commented Nov 15, 2021

kibanamachine commented Nov 17, 2021

[Security Solution] Enhancement endpoint flyout UI fixes #117987

[Security Solution] Enhancement endpoint flyout UI fixes #117987

Conversation

academo commented Nov 9, 2021 • edited Loading

Summary

Checklist

elasticmachine commented Nov 9, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

academo Nov 11, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

academo commented Nov 11, 2021

academo commented Nov 11, 2021

academo commented Nov 15, 2021

kibana-ci commented Nov 15, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

kibanamachine commented Nov 17, 2021

💚 Backport successful

academo commented Nov 9, 2021 •

edited

Loading

academo Nov 11, 2021 •

edited

Loading