[Spaces] - Handle space renaming and deleting

[legrego]

[skip ci]
This PR improves the Space management experience when updating or deleting the user's active space.

1. When a user updates the space they are currently in, the Space Avatar in the Kibana nav will automatically update to match after saving. Fixes [Spaces] Changing the space name is not reflected in the navigation #22537 (cc @alexfrancoeur)

2. When a user deletes the space they are currently in, a secondary confirmation modal is displayed, warning them that they are deleting their active space, and they will be redirected to select another space:

@cchaos I generally don't love the idea of two modals in succession like this, but I was worried if I put it in a single modal that it would get ignored since there'd be a lot of words. What are your thoughts here?

@gchaps Are you able to review the new warning text?

[cchaos]

@legrego What if we did something similar to how Github handles deleting repos, where we ask them to type in the name of the space they are deleting as extra security measure and then if it also happens to be the space they are currently in, you can just throw an extra danger callout in the modal expressing what will happen when it's deleted.

[legrego]

@cchaos that could work for deleting individual spaces, but we allow bulk-deleting from the spaces management screen, and typing the name of each space you want to delete seems like it'd be tedious

[kobelb]

How would you feel about renaming this to "spaceSelectorURL" or something like that?

[legrego]

Good idea -- it better reflects the intent/usage of this variable

[kobelb]

this.rootBasePath can be "" and in that situation, this isn't working, we wanna be using "/" instead.

[cchaos]

Hmmm, are we sure we want to allow for bulk deletion? Deleting is such a destructive action with absolutely now way to undo. It's like deleting an account since all saved objects and index patterns are also obliterated. I think we absolutely should make it a tedious process to delete multiple spaces.

Is there such a thing now in Kibana, where an admin can run a command line script to perform certain high level actions? I'm thinking that the only people who would be deleting multiple spaces are those with these types of privileges and/or know-how. So maybe we could link to some documentation that shows a CLI equivalent to bulk deletion while only allowing single deletion from the UI?

[legrego]

I wouldn't be opposed to limiting bulk actions through a more advanced interface. We are exposing an experimental public API to allow programmatic space management, so Kibana administrators could create a script if they preferred to.

[cchaos]

👍 That would be my recommendation.

[legrego]

Updated screen proposals:

Spaces Grid -- replace multi-select with "Actions" column:

Confirm Delete Modal -- ask user to type the space name before deleting:

Confirm Delete Modal -- callout when deleting the current space:

[spalger]

Why inject this? I think it would make more sense to use chrome.addBasePath('/') clientside

[legrego]

chrome.addBasePath() will include the current space identifier as part of the URL, so if we are in the marketing space, then chrome.addBasePath('/') will result in /serverBasePath/s/marketing, instead of just /serverBasePath

[cchaos]

I like this flow much better.

Comments:

Spaces Grid -- replace multi-select with "Actions" column:

• Can you try to do the background color fix so the gray extends all the way to the bottom of the window?
• Be sure to add restrictWidth to the EuiPage
• Were you also going to display the avatars for spaces in this table?
• I'd go ahead add the pencil/edit action to the actions column as well, even though you also allow them to click on the name to edit them
• It might be nice to change the title of this page from "Spaces" to "Manage spaces".

Confirm Delete Modal -- ask user to type the space name before deleting:

• Hopefully @gchaps can help you more with copy, but this modal is a good place to also express that by deleting a space, you are deleting all saved objects and index-patterns associated with it and that the action cannot be undone.
• I'd change the input label: "Enter the name of the space to confirm"
• The error message should be "The entered name does not match the name of the space to be deleted"
• Second word "Delete" in title should not be capitalized

Confirm Delete Modal -- callout when deleting the current space:

• Since you already express the name of the space to be deleted above, there's no need to repeat it in the callout so you can say something like "You are about to delete the space you are currently in. Upon deletion, you will be redirected to enter a different space."

[gchaps]

@legrego Here's some suggested text. It addresses @cchaos concerns. It also keeps the text to a minimum:

A few notes:

• If possible, include the name of the space in the title. If not, use "Delete space?" as the title and this as the first para "You are about to delete the Sales space and all of its contents. You can't undo this action."
• I'm thinking the part about being redirected isn't necessary here. It could be text that appears when user lands in the new space.

Regarding the page title, I'd keep it as "Spaces." Its consistent with the title of the Saved Objects page.

[legrego]

Thanks for the feedback @gchaps and @cchaos!

@cchaos, when I apply the background height fix, the page spans the entire height, but it looks funny with only a couple of spaces in the list:

Also, the action icons don't seem to be respecting the color that I defined. I set "Edit" to color: "primary", and "Delete" to color: "danger":

{
  name: 'Actions',
  actions: [
    {
      name: 'Edit',
      description: 'Edit this space.',
      onClick: this.onEditSpaceClick,
      type: 'icon',
      icon: 'pencil',
      color: 'primary',
    },
    {
      available: (record: Space) => !isReservedSpace(record),
      name: 'Delete',
      description: 'Delete this space.',
      onClick: this.onDeleteSpaceClick,
      type: 'icon',
      icon: 'trash',
      color: 'danger',
    },
  ],
}

[cchaos]

@legrego You'll need this page setup to get the correct layout:

<EuiPage restrictWidth className="spacesGridPage">
  <EuiPageBody>
    <EuiPageContent horizontalPosition="center">
      ...
    </EuiPageContent>
  </EuiPageBody>
</EuiPage>

Correct, the actions context menu does not pass down colors. There is a PR in EUI right now that will allow up to 2 inline actions (meaning it won't convert to context menu until there are more than 2 actions). That will alleviate this issue.

[legrego]

Thanks, @cchaos, that fixed my problem! I'll learn the correct page component nesting one of these days 😄

[legrego]

@kobelb this is ready for another review, whenever you get a chance

[kobelb]

LGTM