[Spaces WIP] Additional space management UI (#18607)

Functional space management UI

x-pack/plugins/spaces/index.js

@@ -9,6 +9,7 @@ import { validateConfig } from './server/lib/validate_config';
 import { checkLicense } from './server/lib/check_license';
 import { initSpacesApi } from './server/routes/api/v1/spaces';
 import { mirrorPluginStatus } from '../../server/lib/mirror_plugin_status';
+import mappings from './mappings.json';
 
 export const spaces = (kibana) => new kibana.Plugin({
   id: 'spaces',
@@ -32,6 +33,7 @@ export const spaces = (kibana) => new kibana.Plugin({
       hidden: true,
     }],
     hacks: [],
+    mappings,
     home: ['plugins/spaces/register_feature'],
     injectDefaultVars: function () {
       return { };

x-pack/plugins/spaces/mappings.json

@@ -0,0 +1,12 @@
+{
+  "space": {
+    "properties": {
+      "name": {
+        "type": "text"
+      },
+      "description": {
+        "type": "text"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+/*
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiOverlayMask,
+  EuiConfirmModal,
+} from '@elastic/eui';
+
+export const ConfirmDeleteModal = (props) => {
+  const {
+    spaces
+  } = props;
+
+  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?`;
+
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        buttonColor={'danger'}
+        cancelButtonText={'Cancel'}
+        confirmButtonText={buttonText}
+        onCancel={props.onCancel}
+        onConfirm={props.onConfirm}
+        title={`Confirm Delete`}
+        defaultFocusedButton={'cancel'}
+      >
+        <p>{bodyQuestion}</p>
+        <p>This operation cannot be undone!</p>
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};
+
+ConfirmDeleteModal.propTypes = {
+  spaces: PropTypes.array.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired
+};

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

@@ -0,0 +1,107 @@
+/*
+ * 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 React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { ConfirmDeleteModal } from './confirm_delete_modal';
+import {
+  EuiButton
+} from '@elastic/eui';
+import { toastNotifications } from 'ui/notify';
+
+export class DeleteSpacesButton extends Component {
+  state = {
+    showConfirmModal: false
+  };
+
+  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()}
+      </Fragment>
+    );
+  }
+
+  onDeleteClick = () => {
+    this.setState({
+      showConfirmModal: true
+    });
+  };
+
+  getConfirmDeleteModal = () => {
+    if (!this.state.showConfirmModal) {
+      return null;
+    }
+
+    return (
+      <ConfirmDeleteModal
+        spaces={this.props.spaces}
+        onCancel={() => {
+          this.setState({
+            showConfirmModal: false
+          });
+        }}
+        onConfirm={this.deleteSpaces}
+      />
+    );
+  };
+
+  deleteSpaces = () => {
+    const {
+      httpAgent,
+      chrome,
+      spaces
+    } = this.props;
+
+    console.log(this.props, spaces);
+
+    const deleteOperations = spaces.map(space => {
+      return httpAgent.delete(
+        chrome.addBasePath(`/api/spaces/v1/spaces/${encodeURIComponent(space.id)}`)
+      );
+    });
+
+    Promise.all(deleteOperations)
+      .then(() => {
+        this.setState({
+          showConfirmModal: 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();
+        }
+      })
+      .catch(error => {
+        const {
+          message = ''
+        } = error.data || {};
+
+        toastNotifications.addDanger(`Error deleting space: ${message}`);
+      });
+  };
+}
+
+DeleteSpacesButton.propTypes = {
+  spaces: PropTypes.array.isRequired,
+  httpAgent: PropTypes.func.isRequired,
+  chrome: PropTypes.object.isRequired,
+  onDelete: PropTypes.func
+};