[Spaces] - Handle space renaming and deleting

x-pack/plugins/spaces/index.js

@@ -42,10 +42,11 @@ export const spaces = (kibana) => new kibana.Plugin({
     hacks: [],
     mappings,
     home: ['plugins/spaces/register_feature'],
-    injectDefaultVars: function () {
+    injectDefaultVars: function (server) {
       return {
         spaces: [],
-        activeSpace: null
+        activeSpace: null,
+        rootBasePath: server.config().get('server.basePath'),
       };
     },
     replaceInjectedVars: async function (vars, request, server) {

x-pack/plugins/spaces/public/lib/index.js → x-pack/plugins/spaces/public/lib/index.ts

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { SpacesManager } from './spaces_manager';
+export { SpacesManager } from './spaces_manager';

x-pack/plugins/spaces/public/lib/spaces_manager.ts

@@ -12,11 +12,13 @@ import { Space } from '../../common/model/space';
 export class SpacesManager extends EventEmitter {
   private httpAgent: any;
   private baseUrl: any;
+  private rootBasePath: string;
 
-  constructor(httpAgent: any, chrome: any) {
+  constructor(httpAgent: any, chrome: any, rootBasePath: string) {
     super();
     this.httpAgent = httpAgent;
     this.baseUrl = chrome.addBasePath(`/api/spaces/v1`);
+    this.rootBasePath = rootBasePath;
   }
 
   public async getSpaces(): Promise<Space[]> {
@@ -54,6 +56,10 @@ export class SpacesManager extends EventEmitter {
       .catch(() => this._displayError());
   }
 
+  public redirectToSpaceSelector() {
+    window.location.href = this.rootBasePath;
+  }
+
   public async requestRefresh() {
     this.emit('request_refresh');
   }

x-pack/plugins/spaces/public/views/management/components/confirm_delete_modal.js → x-pack/plugins/spaces/public/views/management/components/confirm_delete_modal.tsx

@@ -4,26 +4,26 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+// @ts-ignore
+import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Space } from '../../../../common/model/space';
 
-import {
-  EuiOverlayMask,
-  EuiConfirmModal,
-} from '@elastic/eui';
+interface Props {
+  spaces: Space[];
+  onCancel: () => void;
+  onConfirm: () => void;
+}
 
-export const ConfirmDeleteModal = (props) => {
-  const {
-    spaces
-  } = props;
+export const ConfirmDeleteModal = (props: Props) => {
+  const { spaces } = props;
 
-  const buttonText = spaces.length > 1
-    ? `Delete ${spaces.length} spaces`
-    : `Delete space`;
+  const buttonText = spaces.length > 1 ? `Delete ${spaces.length} spaces` : `Delete space`;
 
-  const bodyQuestion = spaces.length > 1
-    ? `Are you sure you want to delete these ${spaces.length} spaces?`
-    : `Are you sure you want to delete this space?`;
+  const bodyQuestion =
+    spaces.length > 1
+      ? `Are you sure you want to delete these ${spaces.length} spaces?`
+      : `Are you sure you want to delete this space?`;
 
   return (
     <EuiOverlayMask>
@@ -42,9 +42,3 @@ export const ConfirmDeleteModal = (props) => {
     </EuiOverlayMask>
   );
 };
-
-ConfirmDeleteModal.propTypes = {
-  spaces: PropTypes.array.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired
-};

x-pack/plugins/spaces/public/views/management/components/confirm_redirect_modal.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// @ts-ignore
+import { EuiConfirmModal, EuiOverlayMask } from '@elastic/eui';
+import React from 'react';
+import { Space } from '../../../../common/model/space';
+
+interface Props {
+  space?: Space;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export const ConfirmRedirectModal = (props: Props) => {
+  const { space } = props;
+
+  const buttonText = `Delete current space`;
+
+  const bodyQuestion =
+    `You are about to delete your current space ` +
+    `(${space.name}). If you continue, you will be redirected to select a different space.`;
+
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        buttonColor={'danger'}
+        cancelButtonText={'Cancel'}
+        confirmButtonText={buttonText}
+        onCancel={props.onCancel}
+        onConfirm={props.onConfirm}
+        title={`Delete your current space?`}
+        defaultFocusedButton={'cancel'}
+      >
+        <p>{bodyQuestion}</p>
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};

x-pack/plugins/spaces/public/views/management/components/delete_spaces_button.tsx

@@ -0,0 +1,150 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiButton } from '@elastic/eui';
+import React, { Component, Fragment } from 'react';
+import { toastNotifications } from 'ui/notify';
+import { Space } from '../../../../common/model/space';
+import { SpacesManager } from '../../../lib/spaces_manager';
+import { ConfirmDeleteModal } from './confirm_delete_modal';
+import { ConfirmRedirectModal } from './confirm_redirect_modal';
+
+interface Props {
+  spaces: Space[];
+  spacesManager: SpacesManager;
+  spacesNavState: any;
+  onDelete: () => void;
+}
+
+interface State {
+  showConfirmDeleteModal: boolean;
+  showConfirmRedirectModal: boolean;
+}
+
+export class DeleteSpacesButton extends Component<Props, State> {
+  public state = {
+    showConfirmDeleteModal: false,
+    showConfirmRedirectModal: false,
+  };
+
+  public render() {
+    const numSpaces = this.props.spaces.length;
+
+    const buttonText = numSpaces > 1 ? `Delete ${numSpaces} spaces` : `Delete space`;
+
+    return (
+      <Fragment>
+        <EuiButton color={'danger'} onClick={this.onDeleteClick}>
+          {buttonText}
+        </EuiButton>
+        {this.getConfirmDeleteModal()}
+        {this.getConfirmRedirectModal()}
+      </Fragment>
+    );
+  }
+
+  public onDeleteClick = () => {
+    this.setState({
+      showConfirmDeleteModal: true,
+    });
+  };
+
+  public getConfirmDeleteModal = () => {
+    if (!this.state.showConfirmDeleteModal) {
+      return null;
+    }
+
+    const { spaces, spacesNavState } = this.props;
+
+    const isDeletingCurrentSpace = !!this.locateCurrentSpace();
+
+    const performDelete = () => {
+      this.deleteSpaces(() => {
+        this.setState({
+          showConfirmDeleteModal: false,
+        });
+
+        const message =
+          spaces.length > 1
+            ? `Deleted ${spaces.length} spaces.`
+            : `Deleted "${spaces[0].name}" space.`;
+
+        toastNotifications.addSuccess(message);
+
+        if (this.props.onDelete) {
+          this.props.onDelete();
+        }
+
+        spacesNavState.refreshSpacesList();
+      });
+    };
+
+    const nextStep = isDeletingCurrentSpace ? this.showConfirmRedirectModal : performDelete;
+
+    return (
+      <ConfirmDeleteModal
+        spaces={this.props.spaces}
+        onCancel={() => {
+          this.setState({
+            showConfirmDeleteModal: false,
+          });
+        }}
+        onConfirm={nextStep}
+      />
+    );
+  };
+
+  public showConfirmRedirectModal = () => {
+    this.setState({
+      showConfirmDeleteModal: false,
+      showConfirmRedirectModal: true,
+    });
+  };
+
+  public getConfirmRedirectModal = () => {
+    if (!this.state.showConfirmRedirectModal) {
+      return null;
+    }
+
+    const performDelete = () => {
+      this.deleteSpaces(() => {
+        this.props.spacesManager.redirectToSpaceSelector();
+      });
+    };
+
+    return (
+      <ConfirmRedirectModal
+        space={this.locateCurrentSpace()}
+        onCancel={() => {
+          this.setState({
+            showConfirmRedirectModal: false,
+          });
+        }}
+        onConfirm={performDelete}
+      />
+    );
+  };
+
+  public deleteSpaces = (onComplete: () => void) => {
+    const { spacesManager, spaces } = this.props;
+
+    const deleteOperations = spaces.map(space => spacesManager.deleteSpace(space));
+
+    Promise.all(deleteOperations)
+      .then(onComplete)
+      .catch(error => {
+        const { message = '' } = error.data || {};
+
+        toastNotifications.addDanger(`Error deleting space: ${message}`);
+      });
+  };
+
+  private locateCurrentSpace = () => {
+    return this.props.spaces.find(
+      space => space.id === this.props.spacesNavState.getActiveSpace().id
+    );
+  };
+}