[MD][Cred Mgr]PoC delete credentials (#10)

1. PoC delete credentials
2. Resolve some UI feedbacks in #9

src/plugins/credential_management/public/components/breadsrumbs.ts

@@ -1,3 +1,14 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
 import { i18n } from '@osd/i18n';
 
 export function getListBreadcrumbs() {

src/plugins/credential_management/public/components/create_credential_wizard/components/header/header.tsx

@@ -30,7 +30,7 @@ export const Header = ({
     .docTitle.change;
   const createCredentialHeader = i18n.translate('credentialManagement.createIndexPatternHeader',
     {
-      defaultMessage: 'Create Credential',
+      defaultMessage: 'Save Your Credential',
     }
   );
 

src/plugins/credential_management/public/components/create_credential_wizard/create_credential_wizard.tsx

@@ -21,9 +21,10 @@ import {
   EuiFieldText,
   EuiSelect,
   EuiLink,
-  EuiFilePicker,
+  // EuiFilePicker,
   EuiButton,
   EuiPageContent,
+  EuiFieldPassword,
 } from '@elastic/eui';
 import { DocLinksStart } from 'src/core/public';
 import { getCreateBreadcrumbs } from '../breadsrumbs';
@@ -37,6 +38,7 @@ interface CreateCredentialWizardState {
   credentialType: string;
   user_name: string;
   password: string;
+  dual: boolean;
   toasts: EuiGlobalToastListToast[];
   docLinks: DocLinksStart;
 }
@@ -49,7 +51,7 @@ export class CreateCredentialWizard extends React.Component<
 > {
   static contextType = contextType;
   public readonly context!: CredentialManagmentContextValue;
-
+  
   constructor(props: RouteComponentProps, context: CredentialManagmentContextValue) {
     super(props, context);
 
@@ -60,6 +62,7 @@ export class CreateCredentialWizard extends React.Component<
       credentialType: USERNAME_PASSWORD_TYPE,
       user_name: '',
       password: '',
+      dual: true,
       toasts: [],
       docLinks: context.services.docLinks,
     };
@@ -142,18 +145,19 @@ export class CreateCredentialWizard extends React.Component<
               />
             </EuiFormRow>
             <EuiFormRow label="Password">
-              <EuiFieldText
+              <EuiFieldPassword
                 placeholder="Your Password"
-                value={this.redact(this.state.password.length) || ''}
+                type={this.state.dual ? 'dual' : undefined}
+                value={this.state.password || ''}
                 onChange={(e) => this.setState({ password: e.target.value })}
               />
             </EuiFormRow>
-            <EuiFormRow label="Upload Credential File">
+            {/* <EuiFormRow label="Upload Credential File">
               <EuiFilePicker />
-            </EuiFormRow>
+            </EuiFormRow> */}
           </EuiDescribedFormGroup>
           <EuiButton type="submit" fill onClick={this.createCredential}>
-            Create
+            Save
           </EuiButton>
         </EuiForm>
       </EuiPageContent>
@@ -165,6 +169,7 @@ export class CreateCredentialWizard extends React.Component<
       toasts: prevState.toasts.filter((toast) => toast.id !== id),
     }));
   };
+
   render() {
     const content = this.renderContent();
 
@@ -182,10 +187,6 @@ export class CreateCredentialWizard extends React.Component<
     );
   }
 
-  redact = (len: number) => {
-    return '*'.repeat(len);
-  };
-
   createCredential = async () => {
     const { http } = this.context.services;
     try {
@@ -202,6 +203,8 @@ export class CreateCredentialWizard extends React.Component<
           }),
         })
         .then((res) => {
+          // TODO: Fix routing
+          this.props.history.push('');
           console.log(res);
         });
     } catch (e) {

src/plugins/credential_management/public/components/credential_table/credentials_table.tsx

@@ -18,6 +18,7 @@ import { FormattedMessage } from '@osd/i18n/react';
 import {
   EuiBadge,
   EuiButtonEmpty,
+  EuiButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiInMemoryTable,
@@ -34,7 +35,7 @@ import {
 } from '../../../../opensearch_dashboards_react/public';
 
 import { CredentialManagementContext } from '../../types';
-import { getCredentials } from '../utils';
+import { deleteCredentials, getCredentials } from '../utils';
 import { CredentialsTableItem } from '../types';
 import { CredentialCreationOption } from '../../service';
 import { CreateButton } from '../create_button';
@@ -75,6 +76,7 @@ interface Props extends RouteComponentProps {
 export const CredentialsTable = ({ canSave, history }: Props) => {
   const [credentials, setCredentials] = React.useState<CredentialsTableItem[]>([]);
   const [creationOptions, setCreationOptions] = React.useState<CredentialCreationOption[]>([]);
+  const [selectedCredentials, setSelectedCredentials] = React.useState<CredentialsTableItem[]>([]);
 
   const {
     savedObjects,
@@ -85,7 +87,7 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
   const columns = [
     {
       field: 'credentialName',
-      name: 'Credential',
+      name: 'Credential Name',
       render: (
         name: string,
         index: {
@@ -112,8 +114,46 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
       dataType: 'string' as const,
       sortable: ({ sort }: { sort: string }) => sort,
     },
+    {
+      field: 'credentialType',
+      name: 'Credential Type',
+      truncateText: true,
+      mobileOptions: {
+        show: false,
+      },
+    },
   ];
 
+  const onSelectionChange = (selectedCredentials: CredentialsTableItem[]) => {
+    setSelectedCredentials(selectedCredentials);
+  };
+
+  const selection = {
+    onSelectionChange,
+  };
+
+  const renderDeleteButton = () => {
+    if (selectedCredentials.length === 0) {
+      return;
+    }
+
+    return (
+      <EuiButton color="danger" iconType="trash" onClick={onClickDelete}>
+        Delete {selectedCredentials.length} Credentials
+      </EuiButton>
+    );
+  };
+
+  const onClickDelete = () => {
+    Promise.resolve(deleteCredentials(savedObjects.client, selectedCredentials)).then(function () {
+      setSelectedCredentials([]);
+      // TODO: Fix routing
+      history.push('');
+    });
+  };
+
+  const deleteButton = renderDeleteButton();
+
   React.useEffect(() => {
     (async function () {
       const options = await credentialManagementStart.creation.getCredentialCreationOptions(
@@ -138,7 +178,7 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
     <CreateButton options={creationOptions}>
       <FormattedMessage
         id="credentialManagement.credentialsTable.createBtn"
-        defaultMessage="Create credential"
+        defaultMessage="Save your credential"
       />
     </CreateButton>
   ) : (
@@ -163,12 +203,14 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>{createButton}</EuiFlexItem>
+        {deleteButton}
       </EuiFlexGroup>
       <EuiSpacer />
       <EuiInMemoryTable
         allowNeutralSort={false}
         itemId="id"
-        isSelectable={false}
+        isSelectable={true}
+        selection={selection}
         items={credentials}
         columns={columns}
         pagination={pagination}

src/plugins/credential_management/public/components/utils.ts

@@ -11,15 +11,13 @@
 
 import { SavedObjectsClientContract } from 'src/core/public';
 import { Credential } from '../../common';
-// import { CredentialManagementStart } from '../plugin';
+import { CredentialsTableItem } from './types';
 
 export async function getCredentials(
   savedObjectsClient: SavedObjectsClientContract,
   defaultIndex: string
-  // credentialManagementStart: CredentialManagementStart
 ) {
-return await (
-  savedObjectsClient
+  return await (savedObjectsClient
     .find<Credential.ICredential>({
       type: 'credential',
       fields: ['id', 'credential_name', 'credential_type'],
@@ -49,6 +47,13 @@ return await (
             return 0;
           }
         })
-    ) || []
-  );
+    ) || []);
+}
+
+export async function deleteCredentials(
+  savedObjectsClient: SavedObjectsClientContract,
+  selectedCredentials: CredentialsTableItem[]) {
+  selectedCredentials.forEach(function (selectedCredential) {
+    savedObjectsClient.delete('credential', selectedCredential.id);
+  });
 }

src/plugins/credential_management/server/routes/create.ts

@@ -12,6 +12,10 @@
 import { IRouter } from '../../../../core/server';
 import { schema } from '@osd/config-schema';
 import { createHandler } from '../credential';
+import { Credential } from '../../common';
+
+const USERNAME_PASSWORD_TYPE: Credential.USERNAME_PASSWORD_TYPE = 'username_password_credential';
+const AWS_IAM_TYPE: Credential.AWS_IAM_TYPE = 'aws_iam_credential';
 
 export function registerCreateRoute(router: IRouter) {
   router.post(
@@ -21,8 +25,8 @@ export function registerCreateRoute(router: IRouter) {
         body: schema.object({
           credential_name: schema.string(),
           credential_type: schema.oneOf([
-            schema.literal('username_password_credential'),
-            schema.literal('aws_iam_credential'),
+            schema.literal(USERNAME_PASSWORD_TYPE),
+            schema.literal(AWS_IAM_TYPE),
           ]),
           username_password_credential_materials: schema.maybe(
             schema.object({

src/plugins/credential_management/server/saved_objects/credential_saved_object_type.ts

@@ -21,6 +21,9 @@ export const credentialSavedObjectType: SavedObjectsType = {
     getCredentialName(obj) {
       return obj.attributes.credential_name;
     },
+    getCredentialType(obj) {
+      return obj.attributes.credential_type;
+    },
     getUserName(obj) {
       return obj.attributes.user_name;
     },