[Fleet] Cosmetic fixes #111725

juliaElastic · 2021-09-09T13:22:32Z

Summary

Fixes for https://github.com/elastic/observability-design/issues/80
Should be all done now, see latest comments.

Bugs

Wrong icon CTA in the Default policies screen
Made Add Integration button filled

Enhancements

CTAs inconsistency

View screens
The Create/Add... button should always be filled
Actions should be unfilled

CTA not displayed correctly

The UI of CTA in the Add agent flow looks broken

Julia: the right padding seemed missing, fixed that

Warning button for Assign policy

Replace the warning button with a filled one.

Consider replacing Copy policy with Duplicate policy/Make a copy

Using fleet for the first time I thought that Copy policy copied the policy to the clipboard because this is a pattern that I saw and I was familiar with. I think we should replace it with Duplicate, or if we want to keep Copy consider replacing the Copy policy CTA in the following modal with Make a copy or something similar

Julia: renamed button labels, though haven't renamed internal ids, let me know what you think. Changing ids might impact functional tests.

Full stop missing

Add the full stop that is missing in the description (Fleet)

Name field shows an error by default

Name field shows an error by default but the field is not mandatory and clicking on Create it will create a token giving a random name. This can be confusing. Consider adding a help text that explains what happens and why

Made Add integration button filled

Filled button fixes

3. Assign policy button

4. Duplicate policy

5. full stop

6. enrollment token name

elasticmachine · 2021-09-09T13:22:34Z

Pinging @elastic/fleet (Team:Fleet)

2. auth settings

nchaulet · 2021-09-09T14:22:20Z

...eet/public/applications/fleet/sections/agents/agent_details_page/components/actions_menu.tsx

@@ -86,7 +86,7 @@ export const AgentDetailsActionMenu: React.FunctionComponent<{
      )}
      <ContextMenuActions
        button={{
-          props: { iconType: 'arrowDown', iconSide: 'right', color: 'primary', fill: true },
+          props: { iconType: 'arrowDown', iconSide: 'right', color: 'primary', fill: false },


nitpick do we need fill false or it's the default for the property?

nchaulet · 2021-09-09T14:23:41Z

x-pack/plugins/fleet/public/components/new_enrollment_key_modal.tsx

+              placeholder="Enter a token name"
+              {...form.apiKeyNameInput.props}
+            />
+            <EuiFormHelpText>Token id will be used when this is left empty.</EuiFormHelpText>


We probably want to translate that you can use the <FormattedMessage> component for that.

Also I think we can define helpText= on the Form row component too https://elastic.github.io/eui/#/forms/form-layouts#form-and-form-rows

thanks, will update

nchaulet · 2021-09-09T14:24:01Z

x-pack/plugins/fleet/public/components/new_enrollment_key_modal.tsx

+            <EuiFieldText
+              name="name"
+              autoComplete="off"
+              placeholder="Enter a token name"


We probably want to translate that you can use i18n.translate() here

okay, I wasn't sure where is it needed, as I don't see it used everywhere.
is there a way to find out which components translate out of the box?

No components translate out of the box, so if there is not translation we missed something previously

review fixes

Responsive fix fleet broken icons

juliaElastic · 2021-09-10T09:36:11Z

x-pack/plugins/fleet/public/components/agent_policy_package_badges.tsx

@@ -91,7 +91,7 @@ export const AgentPolicyPackageBadges: React.FunctionComponent<Props> = ({
            color="hollow"
            isDisabled={excludeFleetServer && pkg.name === FLEET_SERVER_PACKAGE}
          >
-            <EuiFlexGroup direction="row" gutterSize="xs" alignItems="center">
+            <EuiFlexGroup direction="row" gutterSize="xs" alignItems="center" responsive={false}>


Fixing broken fleet icons on small resolution

8. data streams table layout auto

juliaElastic · 2021-09-10T11:51:57Z

x-pack/plugins/fleet/public/applications/fleet/sections/data_stream/list_page/index.tsx

@@ -202,6 +202,7 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
    <EuiInMemoryTable
      loading={isLoading}
      hasActions={true}
+      tableLayout="auto"


this line improves wrapping on data streams table - makes it less likely to wrap.
8. Text in the table should wrap correctly

responsive 2. fixed icon overlap

juliaElastic · 2021-09-10T13:23:46Z

...fleet/public/applications/integrations/sections/epm/screens/detail/components/icon_panel.tsx

@@ -13,17 +13,10 @@ import type { UsePackageIconType } from '../../../../../hooks';
 import { usePackageIconType } from '../../../../../hooks';
 import { Loading } from '../../../../../components';

-const PanelWrapper = styled.div`


Fix for responsive layout (icon overlap) 2. Integration layout broken 480px, 768px breakpoints
See this comment https://github.com/elastic/observability-design/issues/80#issuecomment-916880833

reduced empty space in header

fix add integration form

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.scss

joshdover

I'm adding the 7.15.0 label so we can try to get these fixes in for the next build candidate for that release.

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.scss

kpollich

LGTM 🚀

juliaElastic · 2021-09-13T11:45:26Z

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.scss

+
+@media (max-width: 767px) {
+  .header_container .euiFlexGroup--responsive > .euiFlexItem {
+    margin-bottom: 0 !important;


this is to reduce empty space in integrations header as suggested here https://github.com/elastic/observability-design/issues/80#issuecomment-917961482

juliaElastic · 2021-09-14T08:11:02Z

...ations/fleet/sections/agent_policy/create_package_policy_page/step_define_package_policy.tsx

+const FormGroupResponsiveFields = styled(EuiDescribedFormGroup)`
+  @media (max-width: 767px) {
+    .euiFlexGroup--responsive {
+      align-items: flex-start;


fix for form fields layout on add integration page (they were not wrapped in multiple lines)

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.scss

juliaElastic · 2021-09-14T12:03:54Z

x-pack/plugins/fleet/public/components/header.tsx

+
+  @media (max-width: 767px) {
+    .euiFlexItem {
+      margin-bottom: 0 !important;


moved this to styled component, important is needed, because the original margin in eui has it too.

kibanamachine · 2021-09-14T14:16:22Z

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id	before	after	diff
`fleet`	1020.5KB	1021.1KB	+633.0B

History

💚 Build #153130 succeeded 8c6efc0
💚 Build #153111 succeeded 96aabd9
💚 Build #152799 succeeded 58b6490
💚 Build #152733 succeeded 53f5f8a
💚 Build #152503 succeeded 158b4d6

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

* [Fleet] Cosmetic fixes Made Add integration button filled * [Fleet] Cosmetic fixes Filled button fixes * [Fleet] Cosmetic fixes 3. Assign policy button * [Fleet] Cosmetic fixes 4. Duplicate policy * [Fleet] Cosmetic fixes 5. full stop * [Fleet] Cosmetic fixes 6. enrollment token name * [Fleet] Cosmetic fixes 2. auth settings * [Fleet] Cosmetic fixes review fixes * [Fleet] Cosmetic fixes Responsive fix fleet broken icons * [Fleet] Cosmetic fixes 8. data streams table layout auto * [Fleet] Cosmetic fixes responsive 2. fixed icon overlap * [Fleet] Cosmetic fixes reduced empty space in header * [Fleet] Cosmetic fixes fix add integration form * improve css selector * moved css to styled component

kibanamachine · 2021-09-14T14:42:39Z

💚 Backport successful

Status	Branch	Result
✅	7.15
✅	7.x

The backport PRs will be merged automatically after passing CI.

* [Fleet] Cosmetic fixes Made Add integration button filled * [Fleet] Cosmetic fixes Filled button fixes * [Fleet] Cosmetic fixes 3. Assign policy button * [Fleet] Cosmetic fixes 4. Duplicate policy * [Fleet] Cosmetic fixes 5. full stop * [Fleet] Cosmetic fixes 6. enrollment token name * [Fleet] Cosmetic fixes 2. auth settings * [Fleet] Cosmetic fixes review fixes * [Fleet] Cosmetic fixes Responsive fix fleet broken icons * [Fleet] Cosmetic fixes 8. data streams table layout auto * [Fleet] Cosmetic fixes responsive 2. fixed icon overlap * [Fleet] Cosmetic fixes reduced empty space in header * [Fleet] Cosmetic fixes fix add integration form * improve css selector * moved css to styled component Co-authored-by: juliaElastic <[email protected]>

dikshachauhan-qasource · 2021-10-07T12:53:45Z

Hi @EricDavisX @juliaElastic

We have validated this PR UI related changes on 8.0 and 7.16 snapshot and found them working fine.

Build Details :

VERSION: 8.0 SNAPSHOT
BUILD 46587
COMMIT 9217be3287d9a4efa362900f8adcdd7aa7260459

VERSION: 7.16.0 SNAPSHOT
BUILD: 44811
COMMIT: 53fa6f53a005b244e70b5a696a8742d2fd1706f0

We only found one issue here related to Add agent button consistency reported at Add Agent button is inconsistent on Fleet UI under Integrations'>Policies tab. #114260

Further, observations made are as follows:

CTAs button are consistent under Fleet section>Agent tab/Policy tab/Enrollment token tab.
Warning button for Assign policy is filled now.
Full stop is available in the Fleet description.
Duplicate policy option is now displayed.
A help text is displayed under create enrollment token button.
Fleet icons working fine on small resolution.
Text in the table wraps correctly on small resolution.
Form fields layout on add integration page are not wrapped in multiple lines.

However, @juliaElastic Could you please share the lowest supported resolution with us so that we can validate is more precisely.

Thanks
QAS

juliaElastic added 6 commits September 9, 2021 11:16

[Fleet] Cosmetic fixes

1dcdec8

Made Add integration button filled

[Fleet] Cosmetic fixes

25e19dd

Filled button fixes

[Fleet] Cosmetic fixes

71ce8a3

3. Assign policy button

[Fleet] Cosmetic fixes

b632fb3

4. Duplicate policy

[Fleet] Cosmetic fixes

d4ae383

5. full stop

[Fleet] Cosmetic fixes

c0b8f69

6. enrollment token name

juliaElastic added v8.0.0 release_note:skip Skip the PR/issue when compiling release notes Team:Fleet Team label for Observability Data Collection Fleet team auto-backport Deprecated - use backport:version if exact versions are needed v7.16.0 labels Sep 9, 2021

juliaElastic requested a review from a team as a code owner September 9, 2021 13:22

juliaElastic and others added 2 commits September 9, 2021 15:40

[Fleet] Cosmetic fixes

b46941b

2. auth settings

Merge branch 'elastic:master' into cosmetic

a84da73

nchaulet reviewed Sep 9, 2021

View reviewed changes

juliaElastic added 2 commits September 10, 2021 09:57

[Fleet] Cosmetic fixes

e626cb6

review fixes

[Fleet] Cosmetic fixes

dcd9fcb

Responsive fix fleet broken icons

juliaElastic commented Sep 10, 2021

View reviewed changes

[Fleet] Cosmetic fixes

158b4d6

8. data streams table layout auto

juliaElastic commented Sep 10, 2021

View reviewed changes

[Fleet] Cosmetic fixes

e50a302

responsive 2. fixed icon overlap

juliaElastic commented Sep 10, 2021

View reviewed changes

juliaElastic and others added 3 commits September 13, 2021 08:25

Merge branch 'elastic:master' into cosmetic

53f5f8a

[Fleet] Cosmetic fixes

58b6490

reduced empty space in header

[Fleet] Cosmetic fixes

96aabd9

fix add integration form

hop-dev reviewed Sep 14, 2021

View reviewed changes

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.scss Outdated Show resolved Hide resolved

improve css selector

8c6efc0

joshdover reviewed Sep 14, 2021

View reviewed changes

x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/index.scss Outdated Show resolved Hide resolved

joshdover added the v7.15.0 label Sep 14, 2021

joshdover approved these changes Sep 14, 2021

View reviewed changes

kpollich approved these changes Sep 14, 2021

View reviewed changes

moved css to styled component

37e14f6

juliaElastic commented Sep 14, 2021

View reviewed changes

juliaElastic merged commit b35b642 into elastic:master Sep 14, 2021

juliaElastic deleted the cosmetic branch September 14, 2021 14:40

kibanamachine mentioned this pull request Sep 14, 2021

[7.15] [Fleet] Cosmetic fixes (#111725) #112119

Merged

kibanamachine mentioned this pull request Sep 14, 2021

[7.x] [Fleet] Cosmetic fixes (#111725) #112120

Merged

This was referenced Sep 16, 2021

[Fleet]: Extra large header under Integrations tab on 7.15 BC-6. #112374

Closed

[Fleet] fixed big header #112380

Merged

jen-huang assigned juliaElastic Sep 20, 2021

jen-huang added v7.15.1 and removed v7.15.0 labels Sep 20, 2021

dikshachauhan-qasource mentioned this pull request Oct 7, 2021

Add Agent button is inconsistent on Fleet UI under Integrations'>Policies tab. #114260

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fleet] Cosmetic fixes #111725

[Fleet] Cosmetic fixes #111725

juliaElastic commented Sep 9, 2021 •

edited

Loading

elasticmachine commented Sep 9, 2021

nchaulet Sep 9, 2021

nchaulet Sep 9, 2021

nchaulet Sep 9, 2021

juliaElastic Sep 9, 2021

nchaulet Sep 9, 2021

juliaElastic Sep 9, 2021

nchaulet Sep 9, 2021

juliaElastic Sep 10, 2021

juliaElastic Sep 10, 2021

juliaElastic Sep 10, 2021

juliaElastic Sep 10, 2021

joshdover left a comment

kpollich left a comment

juliaElastic Sep 13, 2021

juliaElastic Sep 14, 2021

juliaElastic Sep 14, 2021

kibanamachine commented Sep 14, 2021

kibanamachine commented Sep 14, 2021

dikshachauhan-qasource commented Oct 7, 2021 •

edited

Loading

[Fleet] Cosmetic fixes #111725

[Fleet] Cosmetic fixes #111725

Conversation

juliaElastic commented Sep 9, 2021 • edited Loading

Summary

elasticmachine commented Sep 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

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

Choose a reason for hiding this comment

joshdover left a comment

Choose a reason for hiding this comment

kpollich left a 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

kibanamachine commented Sep 14, 2021

💚 Build Succeeded

Metrics [docs]

Async chunks

History

kibanamachine commented Sep 14, 2021

💚 Backport successful

dikshachauhan-qasource commented Oct 7, 2021 • edited Loading

juliaElastic commented Sep 9, 2021 •

edited

Loading

dikshachauhan-qasource commented Oct 7, 2021 •

edited

Loading