[MD] Add delete an existing credential page button

src/plugins/credential_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,

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,18 @@ 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 * as localizedContent from '../text_content/text_content';
 
 interface EditCredentialState {
   credentialName: string;
@@ -36,6 +40,7 @@ interface EditCredentialState {
   dual: boolean;
   toasts: EuiGlobalToastListToast[];
   docLinks: DocLinksStart;
+  isVisible: boolean;
 }
 
 export interface EditCredentialProps extends RouteComponentProps {
@@ -61,17 +66,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={localizedContent.deleteCredentialButtonDescription}>
+              <EuiButtonIcon
+                color="danger"
+                onClick={this.removeCredential}
+                iconType="trash"
+                aria-label={localizedContent.deleteCredentialButtonDescription}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+        </div>
+
+        {this.state.isVisible ? (
+          <EuiConfirmModal
+            title={localizedContent.deleteButtonOnConfirmText}
+            onCancel={() => {
+              this.setState({ isVisible: false });
+            }}
+            onConfirm={this.confirmDelete}
+            cancelButtonText={localizedContent.cancelButtonOnDeleteCancelText}
+            confirmButtonText={localizedContent.confirmButtonOnDeleteComfirmText}
+            defaultFocusedButton="confirm"
+          >
+            <p>{localizedContent.deleteCredentialDescribeMsg}</p>
+            <p>{localizedContent.deleteCredentialConfirmMsg}</p>
+            <p>{localizedContent.deleteCredentialWarnMsg}</p>
+          </EuiConfirmModal>
+        ) : null}
+      </>
+    );
+  }
+  // TODO: Add rendering spanner https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2050
   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,10 +242,13 @@ export class EditCredentialComponent extends React.Component<
     );
   }
 
+  removeCredential = async () => {
+    this.setState({ isVisible: true });
+  };
+
   updateCredential = async () => {
     const { savedObjects } = this.context.services;
     try {
-      // TODO: Add rendering spanner https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2050
       await savedObjects.client.update('credential', this.props.credential.id, {
         title: this.state.credentialName,
         credentialMaterials: {

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.textContent.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.textContent.deleteCredentialConfirmMsg',
+  {
+    defaultMessage: 'To confirm deletion, click delete button.',
+  }
+);
+
+export const deleteCredentialWarnMsg = i18n.translate(
+  'credentialManagement.textContent.deleteCredentialWarnMsg',
+  {
+    defaultMessage: 'Note: this action is irrevocable!',
+  }
+);
+
+export const deleteButtonOnConfirmText = i18n.translate(
+  'credentialManagement.textContent.deleteButtonOnConfirmText',
+  {
+    defaultMessage: 'Delete credential permanently?',
+  }
+);
+
+export const deleteCredentialButtonDescription = i18n.translate(
+  'credentialManagement.textContent.deleteCredentialButtonDescription',
+  {
+    defaultMessage: 'Remove this credential',
+  }
+);
+
+export const cancelButtonOnDeleteCancelText = i18n.translate(
+  'credentialManagement.textContent.cancelButtonOnDeleteCancelText',
+  {
+    defaultMessage: 'Cancel',
+  }
+);
+
+export const confirmButtonOnDeleteComfirmText = i18n.translate(
+  'credentialManagement.textContent.confirmButtonOnDeleteComfirmText',
+  {
+    defaultMessage: 'Delete',
+  }
+);