[Cases] ServiceNow connectors UI changes by semd · Pull Request #114234 · elastic/kibana

semd · 2021-10-07T08:17:07Z

Summary

Design improvements for #105440
Design ticket: https://github.com/elastic/stack-design-team/issues/109
Design Round 2: https://whimsical.com/servicenow-certification-ux-updates-FtUbWGLgxXppnWNSnwabwu

Note: this branch was created from #105440 branch so it contains all of its commits, though they are all already in master.

List of changes:

Connector's list:

icon margin fixed

Edit connector form:

Reduced distance between "Authenticate" title and info callout below

Update connector form:

From a modal to a flyout (on top of "Edit connector" flyout)
Warning flyout banner added

Dropdown deprecated connectors updated:

icon margin fixed
(deprecated) text added

Edit connector in case:

warning color changed from danger to warning in the form callout
connector icon moved from the left (EuiCard icon) to a new column aligned to the right

Connector's parameters form:

After talking with the Alerting team the toggle/checkbox to update incident has been removed and got replaced by a text field (Correlation ID)
Add Correlation display text field
Remove observables fields from SIR (destination IP, source IP, malware hash and malware URL)

ITSM:

SIR:

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

mdefazio

Thanks for making those edits!

jonathan-buttner · 2021-10-14T18:28:16Z

@elasticmachine merge upstream

gchaps

Other copy suggestions:

Deprecation callout

Title: This connector type is deprecated
Description: Update this connector or create a new one.

ServiceNowInstance URL

Add ending period to this sentence: Include the full URL.

Authentication

You must authenticate each time you edit the connector.

Malware Hashes

Sentence case? Malware hashes

...ons_ui/public/application/components/builtin_action_types/servicenow/credentials_api_url.tsx

...ers_actions_ui/public/application/components/builtin_action_types/servicenow/translations.ts

...ctions_ui/public/application/components/builtin_action_types/servicenow/update_connector.tsx

gchaps · 2021-10-14T22:05:11Z

...ctions_ui/public/application/components/builtin_action_types/servicenow/update_connector.tsx

+                children: (
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.components.builtinActionTypes.serviceNowAction.serviceNowAppRunning"
+                    defaultMessage="The Elastic App from the ServiceNow App Store must be installed prior to running the update. {visitLink} to install the app"


How about:

Go to the ServiceNow app store to install the Elastic app.

where "ServiceNow app store" is the link.

Hi! The design team wanted to be like this (a text and a button at the bottom):

Thanks for the comments here @gchaps , our thinking for this was to provide the link to the app store prominently since it's a requirement to use the connector—so I'd like to try and keep that if possible.
Are you ok merging this as is and then doing a fix post FF so we don't block them?

Oh, i like this design. Here is a suggestion for the text, including ending period and consistent capitalization for ServiceNow App Store.

To use this connector, first install the Elastic app from the ServiceNow app store.

gchaps · 2021-10-14T22:10:57Z

...i/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx

+          color="warning"
+          title={i18n.translate(
+            'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.legacyConnectorTitle',
+            { defaultMessage: 'Deprecated connector' }


how about making this text similar to the deprecation message in the callout. Also as this is a tooltip, how about putting it all together instead of title & description.

This connector is deprecated. Update it or create a new one.

I will delegate that to @mdefazio 🙂

Sounds good! I'm all for making it more succinct!

…kibana into 1769_connectors_ui_changes

…nto 1769_connectors_ui_changes

gchaps

lgtm with a few comments

x-pack/plugins/cases/public/components/configure_cases/translations.ts

x-pack/plugins/cases/public/components/connectors/deprecated_callout.tsx

...ers_actions_ui/public/application/components/builtin_action_types/servicenow/translations.ts

gchaps · 2021-10-15T18:00:11Z

...ctions_ui/public/application/components/builtin_action_types/servicenow/update_connector.tsx

+                children: (
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.components.builtinActionTypes.serviceNowAction.serviceNowAppRunning"
+                    defaultMessage="The Elastic App from the ServiceNow App Store must be installed prior to running the update. {visitLink} to install the app"


Oh, i like this design. Here is a suggestion for the text, including ending period and consistent capitalization for ServiceNow App Store.

To use this connector, first install the Elastic app from the ServiceNow app store.

...i/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx

kibanamachine · 2021-10-18T12:49:59Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`triggersActionsUi`	378	379	+1

Async chunks

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

id	before	after	diff
`cases`	316.6KB	317.5KB	+900.0B
`triggersActionsUi`	793.5KB	789.4KB	-4.1KB
total			-3.2KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`core`	302.8KB	302.9KB	+58.0B

History

💔 Build #161895 failed 58eb4ab
💚 Build #161532 succeeded ad06a2e
💔 Build #161519 failed e801905
💔 Build #161418 failed 14f5aab
💔 Build #161398 failed 0611158

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

cc @semd

* POC * Before and after saving connector callbacks * Draft callbacks on SN * Migrate legacy connectors * Add deprecated connector * Fix callbacks types * Pass isEdit to connector forms * Get application info hook * Validate instance on save * Support both legacy and new app * Seperate SIR * Log application version & and throw otherwise * Deprecated tooltip cases * Deprecated tooltip alerts * Improve message * Improve translation * Change to elastic table & fix types * Add callbacks to add modal * Pass new props to tests * Change health api url to production * Better installation message * Migrate connectors functionality * Change migration version to 7.16 * Fix bug * Improve message * Use feature flag * Create credentials component * Add form to migration modal * Improve installation callout * Improve deprecated callout * Improve modal * Improve application required modal * Improve SN form * Support both connectors * Support correlation attributes * Use same component for SIR * Prevent using legacy connectors when creating a case * Add observables * Unique observables * Push only if there are observables * Change labels to plural * Pass correlation ID and value * Show errors on the callout * Improve alerts tooltip * Improve cases tooltip * Warning callout on cases configuration page * Fix tooltip content * Add help text * Change from string to array * Fix i18n * Fix spelling * Update incidents for ITSM * Update incidents for SIR * Fix types * Fix backend tests * Fix frontend tests * Add service tests * Fix i18n * Fix cypress test * Improve ServiceNow intergration tests * Fix cases integration tests * Fix triggers actions ui end to end test * Fix tests * Rename modal * Show error message on modal * Create useOldConnector helper * Show the update incident toggle only on new connectors * Add observables for old connectors * Fix error when obs are empty * Enable SIR for alerts * Fix types * Improve combineObservables * Add test for the sir api * Add test for the sir service * Add documentation * PR feedback * Improve cases deprecated callouts * Improve observables format * Add integration tests for SIR * Fix doc error * Add config tests * Add getIncident tests * Add util tests * Add migration tests * Add tests for connectors and improve callouts * Add more tests * Add more UI tests * update connector modal to flyout * PR feedback * Test CI * restore auth callout * edit connector form spacing * Improve integration tests * Add 8 pixels to the left of the connector icon * update switch to checkboxes * case detail ui * Seperate ServiceNow integration tests * Remove observables fields * Add correlation values * Fix merge * add deprecated text in the dropdown * update card icon to the right * new update connetor test and other tests fixes * PR feedback * Remove observables from docs * Remove unused translations * Using eui theme for styling * Content feeback * Add more unit tests * Fix i18n * Fix types * Fixes * Fixes * test properly * fix duplicated translation * Simplify tooltip * Writing feedback Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jonathan Buttner <jonathan.buttner@elastic.co>

kibanamachine · 2021-10-18T12:52:46Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

* POC * Before and after saving connector callbacks * Draft callbacks on SN * Migrate legacy connectors * Add deprecated connector * Fix callbacks types * Pass isEdit to connector forms * Get application info hook * Validate instance on save * Support both legacy and new app * Seperate SIR * Log application version & and throw otherwise * Deprecated tooltip cases * Deprecated tooltip alerts * Improve message * Improve translation * Change to elastic table & fix types * Add callbacks to add modal * Pass new props to tests * Change health api url to production * Better installation message * Migrate connectors functionality * Change migration version to 7.16 * Fix bug * Improve message * Use feature flag * Create credentials component * Add form to migration modal * Improve installation callout * Improve deprecated callout * Improve modal * Improve application required modal * Improve SN form * Support both connectors * Support correlation attributes * Use same component for SIR * Prevent using legacy connectors when creating a case * Add observables * Unique observables * Push only if there are observables * Change labels to plural * Pass correlation ID and value * Show errors on the callout * Improve alerts tooltip * Improve cases tooltip * Warning callout on cases configuration page * Fix tooltip content * Add help text * Change from string to array * Fix i18n * Fix spelling * Update incidents for ITSM * Update incidents for SIR * Fix types * Fix backend tests * Fix frontend tests * Add service tests * Fix i18n * Fix cypress test * Improve ServiceNow intergration tests * Fix cases integration tests * Fix triggers actions ui end to end test * Fix tests * Rename modal * Show error message on modal * Create useOldConnector helper * Show the update incident toggle only on new connectors * Add observables for old connectors * Fix error when obs are empty * Enable SIR for alerts * Fix types * Improve combineObservables * Add test for the sir api * Add test for the sir service * Add documentation * PR feedback * Improve cases deprecated callouts * Improve observables format * Add integration tests for SIR * Fix doc error * Add config tests * Add getIncident tests * Add util tests * Add migration tests * Add tests for connectors and improve callouts * Add more tests * Add more UI tests * update connector modal to flyout * PR feedback * Test CI * restore auth callout * edit connector form spacing * Improve integration tests * Add 8 pixels to the left of the connector icon * update switch to checkboxes * case detail ui * Seperate ServiceNow integration tests * Remove observables fields * Add correlation values * Fix merge * add deprecated text in the dropdown * update card icon to the right * new update connetor test and other tests fixes * PR feedback * Remove observables from docs * Remove unused translations * Using eui theme for styling * Content feeback * Add more unit tests * Fix i18n * Fix types * Fixes * Fixes * test properly * fix duplicated translation * Simplify tooltip * Writing feedback Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Jonathan Buttner <jonathan.buttner@elastic.co> Co-authored-by: Sergi Massaneda <sergi.massaneda@elastic.co> Co-authored-by: Christos Nasikas <christos.nasikas@elastic.co> Co-authored-by: Jonathan Buttner <jonathan.buttner@elastic.co>

cnasikas added 30 commits September 27, 2021 15:42

POC

066f9b0

Before and after saving connector callbacks

0cd0027

Draft callbacks on SN

ed3f37f

Migrate legacy connectors

48c9144

Add deprecated connector

e0537c6

Fix callbacks types

2ea1e10

Pass isEdit to connector forms

c16d69d

Get application info hook

5689c65

Validate instance on save

748204e

Support both legacy and new app

09be958

Seperate SIR

518011f

Log application version & and throw otherwise

503755b

Deprecated tooltip cases

8962a49

Deprecated tooltip alerts

3685dd1

Improve message

0fb1807

Improve translation

6e677e1

Change to elastic table & fix types

fdb8fc8

Add callbacks to add modal

688f83d

Pass new props to tests

44f0e23

Change health api url to production

4775d62

Better installation message

9e56803

Migrate connectors functionality

b5eef2f

Change migration version to 7.16

f4ca823

Fix bug

8651cc7

Improve message

484156b

Use feature flag

1d1b4e7

Create credentials component

1c1ea44

Add form to migration modal

bbcdf03

Improve installation callout

569c5fc

Improve deprecated callout

d29e4a7

mdefazio self-requested a review October 14, 2021 17:00

mdefazio approved these changes Oct 14, 2021

View reviewed changes

Merge branch 'master' into 1769_connectors_ui_changes

271ed07

gchaps reviewed Oct 14, 2021

View reviewed changes

cnasikas added 5 commits October 15, 2021 12:12

Content feeback

4e7c3da

Add more unit tests

0611158

Fix i18n

d05ec41

Fix types

14f5aab

Fixes

2937675

cnasikas force-pushed the 1769_connectors_ui_changes branch from b35ae77 to 2937675 Compare October 15, 2021 15:24

cnasikas and others added 6 commits October 15, 2021 18:27

Fixes

61bd516

test properly

0e8a733

Merge branch '1769_connectors_ui_changes' of https://github.com/semd/…

e801905

…kibana into 1769_connectors_ui_changes

fix duplicated translation

ca267fb

Merge branch '1769_connectors_ui_changes' of github.com:semd/kibana i…

a2a60b9

…nto 1769_connectors_ui_changes

Simplify tooltip

ad06a2e

gchaps approved these changes Oct 15, 2021

View reviewed changes

cnasikas added 2 commits October 18, 2021 11:02

Writing feedback

dddfee4

Merge branch 'master' into 1769_connectors_ui_changes

58eb4ab

semd enabled auto-merge (squash) October 18, 2021 08:23

cnasikas added the auto-backport Deprecated - use backport:version if exact versions are needed label Oct 18, 2021

Fix test

f17f629

semd merged commit c80b96c into elastic:master Oct 18, 2021

kibanamachine mentioned this pull request Oct 18, 2021

[7.x] [Cases] ServiceNow connectors UI changes (#114234) #115358

Merged

jonathan-buttner mentioned this pull request Dec 1, 2021

[Cases] Adding deprecated icon to additional actions dropdown selectors #115287

Merged

Conversation

semd commented Oct 7, 2021 • edited by cnasikas Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of changes:

Connector's list:

Edit connector form:

Update connector form:

Dropdown deprecated connectors updated:

Edit connector in case:

Connector's parameters form:

Checklist

For maintainers

Uh oh!

mdefazio left a comment

Choose a reason for hiding this comment

Uh oh!

jonathan-buttner commented Oct 14, 2021

Uh oh!

gchaps left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cnasikas Oct 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gchaps left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kibanamachine commented Oct 18, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

kibanamachine commented Oct 18, 2021

💚 Backport successful

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

semd commented Oct 7, 2021 •

edited by cnasikas

Loading

cnasikas Oct 15, 2021 •

edited

Loading