Fix breadcrumb on listing page and update saved object mapping (#2069)

Signed-off-by: Louis Chu <clingzhi@amazon.com>
opensearch-project · Aug 4, 2022 · fec5e3d · fec5e3d
1 parent 58a3319
commit fec5e3d
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 27 deletions.
diff --git a/src/plugins/credential_management/public/components/breadcrumbs.ts b/src/plugins/credential_management/public/components/breadcrumbs.ts
@@ -22,19 +22,19 @@ export function getCreateBreadcrumbs() {
     ...getListBreadcrumbs(),
     {
       text: i18n.translate('credentialManagement.credentials.createBreadcrumb', {
-        defaultMessage: 'Create credentials',
+        defaultMessage: 'Create Stored Credential',
       }),
       href: `/create`,
     },
   ];
 }
 
-export function getEditBreadcrumbs(credentials: CredentialEditPageItem) {
+export function getEditBreadcrumbs(credential: CredentialEditPageItem) {
   return [
     ...getListBreadcrumbs(),
     {
-      text: credentials.title,
-      href: `/${credentials.id}`,
+      text: credential.title,
+      href: `/${credential.id}`,
     },
   ];
 }
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
@@ -29,7 +29,8 @@ import { context as contextType } from '../../../../opensearch_dashboards_react/
 
 interface CreateCredentialWizardState {
   credentialName: string;
-  credentialType: string;
+  authType: string;
+  credentialMaterialsType: string;
   userName: string;
   password: string;
   dual: boolean;
@@ -50,7 +51,8 @@ export class CreateCredentialWizard extends React.Component<
 
     this.state = {
       credentialName: '',
-      credentialType: 'username_password_credential',
+      authType: 'shared',
+      credentialMaterialsType: 'username_password_credential',
       userName: '',
       password: '',
       dual: true,
@@ -119,7 +121,7 @@ export class CreateCredentialWizard extends React.Component<
           >
             <EuiFormRow label="Credential Type">
               <EuiSelect
-                onChange={(e) => this.setState({ credentialType: e.target.value })}
+                onChange={(e) => this.setState({ credentialMaterialsType: e.target.value })}
                 options={options}
               />
             </EuiFormRow>
@@ -176,9 +178,9 @@ export class CreateCredentialWizard extends React.Component<
       // TODO: Add rendering spanner https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2050
       await savedObjects.client.create('credential', {
         title: this.state.credentialName,
-        credentialType: this.state.credentialType,
+        authType: this.state.authType,
         credentialMaterials: {
-          credentialMaterialsType: this.state.credentialType,
+          credentialMaterialsType: this.state.credentialMaterialsType,
           credentialMaterialsContent: {
             userName: this.state.userName,
             password: this.state.password,
@@ -190,7 +192,7 @@ export class CreateCredentialWizard extends React.Component<
       const createCredentialFailMsg = (
         <FormattedMessage
           id="credentialManagement.createCredential.loadCreateCredentialFailMsg"
-          defaultMessage="The credential saved object creation failed with some errors. Please try it again.'"
+          defaultMessage="The credential saved object creation failed with some errors. Please configure data_source.enabled and try it again."
         />
       );
       this.setState((prevState) => ({

diff --git a/src/plugins/credential_management/public/components/credential_table/credentials_table.tsx b/src/plugins/credential_management/public/components/credential_table/credentials_table.tsx
@@ -28,6 +28,7 @@ import {
   useOpenSearchDashboards,
 } from '../../../../opensearch_dashboards_react/public';
 
+import { getListBreadcrumbs } from '../breadcrumbs';
 import { CredentialManagementContext } from '../../types';
 import { deleteCredentials, getCredentials } from '../utils';
 import { CredentialsTableItem } from '../types';
@@ -66,6 +67,9 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
   const [credentials, setCredentials] = React.useState<CredentialsTableItem[]>([]);
   const [selectedCredentials, setSelectedCredentials] = React.useState<CredentialsTableItem[]>([]);
 
+  const { setBreadcrumbs } = useOpenSearchDashboards<CredentialManagementContext>().services;
+  setBreadcrumbs(getListBreadcrumbs());
+
   const { savedObjects, uiSettings } = useOpenSearchDashboards<
     CredentialManagementContext
   >().services;
@@ -101,7 +105,7 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
       sortable: ({ sort }: { sort: string }) => sort,
     },
     {
-      field: 'credentialType',
+      field: 'credentialMaterialsType',
       name: 'Credential Type',
       truncateText: true,
       mobileOptions: {

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
@@ -30,7 +30,7 @@ import { CredentialEditPageItem } from '../types';
 
 interface EditCredentialState {
   credentialName: string;
-  credentialType: string;
+  credentialMaterialsType: string;
   userName: string;
   password: string;
   dual: boolean;
@@ -55,7 +55,7 @@ export class EditCredentialComponent extends React.Component<
 
     this.state = {
       credentialName: props.credential.title,
-      credentialType: props.credential.credentialType,
+      credentialMaterialsType: props.credential.credentialMaterialsType,
       userName: '',
       password: '',
       dual: true,
@@ -114,7 +114,7 @@ export class EditCredentialComponent extends React.Component<
           >
             <EuiFormRow label="Credential Type">
               <EuiSelect
-                onChange={(e) => this.setState({ credentialType: e.target.value })}
+                onChange={(e) => this.setState({ credentialMaterialsType: e.target.value })}
                 options={options}
               />
             </EuiFormRow>
@@ -171,9 +171,8 @@ export class EditCredentialComponent extends React.Component<
       // 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,
-        credentialType: this.state.credentialType,
         credentialMaterials: {
-          credentialMaterialsType: this.state.credentialType,
+          credentialMaterialsType: this.state.credentialMaterialsType,
           credentialMaterialsContent: {
             userName: this.state.userName,
             password: this.state.password,
@@ -185,7 +184,7 @@ export class EditCredentialComponent extends React.Component<
       const editCredentialFailMsg = (
         <FormattedMessage
           id="credentialManagement.editCredential.loadEditCredentialFailMsg"
-          defaultMessage="The credential saved object edit failed with some errors. Please try it again.'"
+          defaultMessage="The credential saved object edit failed with some errors. Please configure data_source.enabled and try it again."
         />
       );
       this.setState((prevState) => ({

diff --git a/src/plugins/credential_management/public/components/edit_credential/edit_credential_page.tsx b/src/plugins/credential_management/public/components/edit_credential/edit_credential_page.tsx
@@ -21,7 +21,7 @@ const EditCredentialPage: React.FC<RouteComponentProps<{ id: string }>> = ({ ...
       const object = {
         id: savedObject.id,
         title: savedObject.attributes.title,
-        credentialType: savedObject.attributes.credentialType,
+        credentialMaterialsType: savedObject.attributes.credentialMaterials.credentialMaterialsType,
       };
       setCredential(object);
       setBreadcrumbs(getEditBreadcrumbs(object));

diff --git a/src/plugins/credential_management/public/components/types.ts b/src/plugins/credential_management/public/components/types.ts
@@ -6,11 +6,12 @@
 export interface CredentialsTableItem {
   id: string;
   title: string;
+  credentialMaterialsType: string;
   sort: string;
 }
 
 export interface CredentialEditPageItem {
   id: string;
   title: string;
-  credentialType: string;
+  credentialMaterialsType: string;
 }
diff --git a/src/plugins/credential_management/public/components/utils.ts b/src/plugins/credential_management/public/components/utils.ts
@@ -10,19 +10,19 @@ export async function getCredentials(savedObjectsClient: SavedObjectsClientContr
   return await (savedObjectsClient
     .find({
       type: 'credential',
-      fields: ['id', 'title', 'credentialType'],
+      fields: ['id', 'title', 'credentialMaterials'],
       perPage: 10000,
     })
     .then((response) =>
       response.savedObjects
         .map((source) => {
           const id = source.id;
           const title = source.get('title');
-          const credentialType = source.get('credentialType');
+          const credentialMaterialsType = source.get('credentialMaterials').credentialMaterialsType;
           return {
             id,
             title,
-            credentialType,
+            credentialMaterialsType,
             sort: `${title}`,
           };
         })

diff --git a/src/plugins/credential_management/public/management_app/mount_management_section.tsx b/src/plugins/credential_management/public/management_app/mount_management_section.tsx
@@ -6,6 +6,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Switch, Route } from 'react-router-dom';
+import { i18n } from '@osd/i18n';
 import { I18nProvider } from '@osd/i18n/react';
 
 import { StartServicesAccessor } from 'src/core/public';
@@ -38,6 +39,13 @@ export async function mountManagementSection(
     setBreadcrumbs: params.setBreadcrumbs,
   };
 
+  /* Browser - Page Title */
+  const title = i18n.translate('credentialManagement.objects.credentialsTitle', {
+    defaultMessage: 'Credentials',
+  });
+
+  chrome.docTitle.change(title);
+
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={deps}>
       <I18nProvider>

diff --git a/src/plugins/data_source/server/saved_objects/credential_saved_objects_type.ts b/src/plugins/data_source/server/saved_objects/credential_saved_objects_type.ts
@@ -11,7 +11,8 @@ export const credential: SavedObjectsType = {
   namespaceType: 'agnostic',
   management: {
     defaultSearchField: 'title',
-    importableAndExportable: true,
+    // TODO: Support import / export https://github.com/opensearch-project/OpenSearch-Dashboards/issues/1872
+    importableAndExportable: false,
     getTitle(obj) {
       return obj.attributes.title;
     },
@@ -28,10 +29,8 @@ export const credential: SavedObjectsType = {
   mappings: {
     dynamic: false,
     properties: {
-      title: { type: 'text', index: false },
-      credentialType: { type: 'keyword', index: false },
-      credentialMaterials: { type: 'object' },
-      description: { type: 'text', index: false },
+      title: { type: 'text' },
+      authType: { type: 'keyword' },
     },
   },
   migrations: {},