Add delete button for credential detailed page

Signed-off-by: Yibo Wang <[email protected]>
opensearch-project · Aug 9, 2022 · 69ac7c6 · 69ac7c6
1 parent fec5e3d
commit 69ac7c6
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 3 deletions.
diff --git a/...ential_management/public/components/create_credential_wizard/create_credential_wizard.tsx b/...ential_management/public/components/create_credential_wizard/create_credential_wizard.tsx
@@ -5,7 +5,6 @@
 
 import React from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
-
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import {
   EuiHorizontalRule,

diff --git a/src/plugins/credential_management/public/components/edit_credential/edit_credential.tsx b/src/plugins/credential_management/public/components/edit_credential/edit_credential.tsx
@@ -5,7 +5,6 @@
 
 import React from 'react';
 import { FormattedMessage } from '@osd/i18n/react';
-
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import {
   EuiHorizontalRule,
@@ -20,13 +19,24 @@ import {
   EuiButton,
   EuiPageContent,
   EuiFieldPassword,
+  EuiFlexItem,
+  EuiToolTip,
+  EuiButtonIcon,
+  EuiConfirmModal,
 } from '@elastic/eui';
 import { DocLinksStart } from 'src/core/public';
 import { getCreateBreadcrumbs } from '../breadcrumbs';
 import { CredentialManagmentContextValue } from '../../types';
 // TODO: Add Header https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2051
 import { context as contextType } from '../../../../opensearch_dashboards_react/public';
 import { CredentialEditPageItem } from '../types';
+import { deleteCredentialDescribeMsg } from '../text_content/text_content';
+import { deleteCredentialConfirmMsg } from '../text_content/text_content';
+import { deleteCredentialWarnMsg } from '../text_content/text_content';
+import { confirmTitle } from '../text_content/text_content';
+import { deleteCredentialButtonDescription } from '../text_content/text_content';
+import { cancelButtonText } from '../text_content/text_content';
+import { confirmButtonText } from '../text_content/text_content';
 
 interface EditCredentialState {
   credentialName: string;
@@ -36,6 +46,7 @@ interface EditCredentialState {
   dual: boolean;
   toasts: EuiGlobalToastListToast[];
   docLinks: DocLinksStart;
+  isVisible: boolean;
 }
 
 export interface EditCredentialProps extends RouteComponentProps {
@@ -61,17 +72,89 @@ export class EditCredentialComponent extends React.Component<
       dual: true,
       toasts: [],
       docLinks: context.services.docLinks,
+      isVisible: false,
     };
   }
 
+  confirmDelete = async () => {
+    const { savedObjects } = this.context.services;
+    try {
+      await savedObjects.client.delete('credential', this.props.credential.id);
+      this.props.history.push('');
+    } catch (e) {
+      const deleteCredentialFailMsg = (
+        <FormattedMessage
+          id="credentialManagement.editCredential.deleteCredentialFailMsg"
+          defaultMessage="The credential delete failed with some errors. Please try it again.'"
+        />
+      );
+      this.setState((prevState) => ({
+        toasts: prevState.toasts.concat([
+          {
+            title: deleteCredentialFailMsg,
+            id: deleteCredentialFailMsg.props.id,
+            color: 'warning',
+            iconType: 'alert',
+          },
+        ]),
+      }));
+    }
+  };
+
+  delelteButtonRender() {
+    return (
+      <>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'end',
+          }}
+        >
+          <EuiFlexItem>
+            <EuiToolTip content={deleteCredentialButtonDescription}>
+              <EuiButtonIcon
+                color="danger"
+                onClick={this.removeCredential}
+                iconType="trash"
+                aria-label={deleteCredentialButtonDescription}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+        </div>
+
+        {this.state.isVisible ? (
+          <EuiConfirmModal
+            title={confirmTitle}
+            onCancel={() => {
+              this.setState({ isVisible: false });
+            }}
+            onConfirm={this.confirmDelete}
+            cancelButtonText={cancelButtonText}
+            confirmButtonText={confirmButtonText}
+            defaultFocusedButton="confirm"
+          >
+            <p>{deleteCredentialDescribeMsg}</p>
+            <p>{deleteCredentialConfirmMsg}</p>
+            <p>{deleteCredentialWarnMsg}</p>
+          </EuiConfirmModal>
+        ) : null}
+      </>
+    );
+  }
+  // TODO: add loading spinner showing actual progress
   renderContent() {
     const options = [
-      { value: 'username_password_credential', text: 'Username and Password Credential' },
+      {
+        value: 'username_password_credential',
+        text: 'Username and Password Credential',
+      },
       { value: 'no_auth', text: 'No Auth' },
     ];
 
     return (
       <EuiPageContent>
+        {this.delelteButtonRender()}
         <EuiHorizontalRule />
         <EuiForm component="form">
           <EuiDescribedFormGroup
@@ -165,6 +248,10 @@ export class EditCredentialComponent extends React.Component<
     );
   }
 
+  removeCredential = async () => {
+    this.setState({ isVisible: true });
+  };
+
   updateCredential = async () => {
     const { savedObjects } = this.context.services;
     try {

diff --git a/src/plugins/credential_management/public/components/text_content/text_content.ts b/src/plugins/credential_management/public/components/text_content/text_content.ts
@@ -0,0 +1,56 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+
+export const deleteCredentialDescribeMsg = i18n.translate(
+  'credentialManagement.editCredential.deleteCredentialDescribeMsg',
+  {
+    defaultMessage:
+      'This will also delete their credential materials. All data sources using this credential will be invalid for access, and they must choose new credentials.',
+  }
+);
+
+export const deleteCredentialConfirmMsg = i18n.translate(
+  'credentialManagement.editCredential.deleteCredentialConfirmMsg',
+  {
+    defaultMessage: 'To confirm deletion, click delete button.',
+  }
+);
+
+export const deleteCredentialWarnMsg = i18n.translate(
+  'credentialManagement.editCredential.deleteCredentialWarnMsg',
+  {
+    defaultMessage: 'Note: this action is irrevocable!',
+  }
+);
+
+export const confirmTitle = i18n.translate(
+  'credentialManagement.editCredential.deleteCredentialConfirmTitle',
+  {
+    defaultMessage: 'Delete credential permanently?',
+  }
+);
+
+export const deleteCredentialButtonDescription = i18n.translate(
+  'credentialManagement.editCredential.deleteCredentialButtonDescription',
+  {
+    defaultMessage: 'Remove this credential',
+  }
+);
+
+export const cancelButtonText = i18n.translate(
+  'credentialManagement.editCredential.cancelButtonText',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
+
+export const confirmButtonText = i18n.translate(
+  'credentialManagement.editCredential.confirmButtonText',
+  {
+    defaultMessage: 'Delete',
+  }
+);