Fix "Assign object to spaces" flyout UX problems

[jportner]

Resolves #128916.

This PR makes several changes to the "Assign object to spaces" flyout.

• Increase title icon size
• Space selector now shows total number of spaces in addition to the number that are currently selected
• Improve "All spaces" selection -- now, when this option is enabled:
  • Each space appears to be checked
  • The list always shows all spaces that the user is authorized to view (even those in which the current feature is disabled -- the only consumer that takes advantage of this functionality right now is ML)
  • Hides "Need more privileges to select/deselect" tooltip icon
• Fix horizontal responsiveness (the layout is now unresponsive, so it doesn't go crazy when you have a narrow viewport)
• Fix vertical responsiveness (the space selector list now has a minimum height so it doesn't go
• Slightly changes how "hidden space" count is displayed to the user
• Ensures that users cannot click the space list (to render the flyout) if they only have Read access in the current space

Testing

• Start Kibana
• Import one of the sample datasets
• Create an ML job using the sample data
• Create a bunch of spaces
• Navigate to Saved Object Management and/or ML Job Management, find a shareable object, and click the space list to open the "Assign object to spaces" flyout

Minimal privilege testing:

• Share an object to each space (individually, not using the "All spaces" option)
• Create a role that gives the user Read access to some spaces and All access to some other spaces
• Test out the differences (the UI will change depending on whether the user has Read or All access for that object type in the current space)

Click to see script to create 26 extra spaces

curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "alpha", "name": "Alpha"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "bravo", "name": "Bravo"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "charlie", "name": "Charlie"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "delta", "name": "Delta"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "echo", "name": "Echo"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "foxtrot", "name": "Foxtrot"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "golf", "name": "Golf"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "hotel", "name": "Hotel"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "india", "name": "India"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "juliet", "name": "Juliet"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "kilo", "name": "Kilo"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "lima", "name": "Lima"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "mike", "name": "Mike"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "november", "name": "November"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "oscar", "name": "Oscar"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "papa", "name": "Papa"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "quebec", "name": "Quebec"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "romeo", "name": "Romeo"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "sierra", "name": "Sierra"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "tango", "name": "Tango"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "uniform", "name": "Uniform"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "victor", "name": "Victor"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "whiskey", "name": "Whiskey"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "xray", "name": "X-Ray"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "yankee", "name": "Yankee"}'
curl -k -u elastic:changeme -X POST "http://localhost:5601/api/spaces/space" -H 'kbn-xsrf: true' -H 'Content-Type: application/json' -d '{"id": "zulu", "name": "Zulu"}'

Screen recording

In this example, an ML job was created in the Default space and then added to the Bravo space.
After that, the ML feature was disabled in the Bravo and Charlie spaces.
When the user views the "Assign object to spaces" flyout for this job:

• If "Select spaces" is enabled, Bravo is visible but Charlie is not
• If "All spaces" is enabled, Bravo and Charlie are both visible

Screen.Recording.2022-03-30.at.11.46.42.AM.mov

Screenshots

Minimally-privileged user ("Read" access to Bravo, and "All" access to 10 other spaces) viewing an object that has been assigned to All spaces:

The same user viewing the same object after someone else has changed its assignment to only the Default space (now the "Need more privileges" tooltip icon is displayed):

Viewing the flyout with a narrow viewport:

Viewing the flyout with a short viewport (the spaces list has a minimum height, and an additional vertical scroll bar appears):

When the user only has Read access in the active space, they cannot click on the space list:

When the object is shared to additional spaces that the user doesn't have access to view, the number of hidden spaces is now shown below the space selector:

[cchaos]

Thank you for fixing these! I just had one more suggestion where it was a bit of an odd layout.

[jportner]

@elasticmachine merge upstream

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: f1b815c
• Storybooks Preview
• Webpack Bundle Analyzer

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
dataViewManagement	123.7KB	123.9KB	+201.0B
spaces	257.5KB	257.5KB	-55.0B
total			+146.0B

Page load bundle

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

id	before	after	diff
savedObjectsManagement	19.0KB	19.2KB	+213.0B

Unknown metric groups

API count

id	before	after	diff
spaces	259	260	+1

History

• 💔 Build #35070 failed f8fb7b8
• 💔 Build #35061 failed 8324722
• 💔 Build #34994 failed f28bc41
• 💚 Build #34950 succeeded 6fabb39

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

[mattkime]

changes look good and work well!

[azasypkin]

ACK: will review today

[azasypkin]

Code LGTM and everything seems to work as expected, thanks for the detailed "testing" steps!

[cchaos]

Thanks for fixing these! I checked in Chrome, FF, and Safari. I also double checked some of the different privilege scenarios. I didn't come across any more obvious bugs.

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	8.2

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation