[MD][Cred mngment] - PoC Create credential (#9)

[MD][Cred mngment] - PoC Create credential
1. Add UX page for credential creation, with create button call server side creation API
2. Add frontend routing to the UX page

src/plugins/credential_management/common/index.ts

@@ -9,9 +9,9 @@
  * GitHub history for details.
  */
 
-import { ICredential, IBasicAuthCredentialMaterial, IAWSIAMCredentialMaterial } from './types';
+import * as Credential from './types';
 
 export const PLUGIN_ID = 'credentialManagement';
 export const PLUGIN_NAME = 'Credential Management';
 
-export { ICredential, IBasicAuthCredentialMaterial, IAWSIAMCredentialMaterial };
+export { Credential };

src/plugins/credential_management/common/types.ts

@@ -9,19 +9,25 @@
  * GitHub history for details.
  */
 
-interface ICredential {
+// TODO: refactor the credential in heritance:
+// Credential -> USERNAMEANDPASSWORDCredential
+//            -> AWSIAMCredential
+export interface ICredential {
   readonly credential_name: string;
-  readonly credential_type: string;
+  readonly credential_type: CredentialType;
   readonly credential_material: IBasicAuthCredentialMaterial | IAWSIAMCredentialMaterial;
 }
 
-interface IBasicAuthCredentialMaterial {
+export type CredentialType = USERNAME_PASSWORD_TYPE | AWS_IAM_TYPE;
+// TODO: Update server side
+export type USERNAME_PASSWORD_TYPE = 'username_password_credential';
+export type AWS_IAM_TYPE = 'aws_iam_credential';
+
+export interface IBasicAuthCredentialMaterial {
   readonly user_name: string;
   readonly password: string;
 }
 
-interface IAWSIAMCredentialMaterial {
+export interface IAWSIAMCredentialMaterial {
   readonly encrypted_aws_iam_credential: string;
 }
-
-export { ICredential, IBasicAuthCredentialMaterial, IAWSIAMCredentialMaterial };

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

@@ -0,0 +1,24 @@
+import { i18n } from '@osd/i18n';
+
+export function getListBreadcrumbs() {
+  return [
+    {
+      text: i18n.translate('credentialManagement.credentials.listBreadcrumb', {
+        defaultMessage: 'Credentials',
+      }),
+      href: `/`,
+    },
+  ];
+}
+
+export function getCreateBreadcrumbs() {
+  return [
+    ...getListBreadcrumbs(),
+    {
+      text: i18n.translate('credentialManagement.credentials.createBreadcrumb', {
+        defaultMessage: 'Create credentials',
+      }),
+      href: `/create`,
+    },
+  ];
+}

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

@@ -11,7 +11,7 @@
 
 // @ts-ignore
 import { euiColorAccent } from '@elastic/eui/dist/eui_theme_light.json';
-import React, { Component, Fragment } from 'react';
+import React from 'react';
 
 import {
   EuiBadge,
@@ -40,7 +40,7 @@ interface Props {
   }>;
 }
 
-export class CreateButton extends Component<Props, State> {
+export class CreateButton extends React.Component<Props, State> {
   public state = {
     isPopoverOpen: false,
   };
@@ -100,7 +100,7 @@ export class CreateButton extends Component<Props, State> {
                   <EuiDescriptionList style={{ whiteSpace: 'nowrap' }}>
                     <EuiDescriptionListTitle>
                       {option.text}
-                      {option.isBeta ? <Fragment> {this.renderBetaBadge()}</Fragment> : null}
+                      {option.isBeta ? <React.Fragment> {this.renderBetaBadge()}</React.Fragment> : null}
                     </EuiDescriptionListTitle>
                     <EuiDescriptionListDescription>
                       {option.description}

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

@@ -0,0 +1,90 @@
+/*
+ * 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 React from 'react';
+
+import { EuiBetaBadge, EuiSpacer, EuiTitle, EuiText, EuiCode, EuiLink } from '@elastic/eui';
+
+import { i18n } from '@osd/i18n';
+import { FormattedMessage } from '@osd/i18n/react';
+import { DocLinksStart } from 'opensearch-dashboards/public';
+import { useOpenSearchDashboards } from '../../../../../../opensearch_dashboards_react/public';
+import { CredentialManagementContext } from '../../../../types';
+// TODO: Update the header content
+export const Header = ({
+  isBeta = true,
+  docLinks,
+}: {
+  isBeta?: boolean;
+  docLinks: DocLinksStart;
+}) => {
+  const changeTitle = useOpenSearchDashboards<CredentialManagementContext>().services.chrome
+    .docTitle.change;
+  const createCredentialHeader = i18n.translate('credentialManagement.createIndexPatternHeader',
+    {
+      defaultMessage: 'Create Credential',
+    }
+  );
+
+  changeTitle(createCredentialHeader);
+
+  return (
+    <div>
+      <EuiTitle>
+        <h1>
+          {createCredentialHeader}
+          {isBeta ? (
+            <>
+              {' '}
+              <EuiBetaBadge
+                label={i18n.translate('credentialManagement.createCredential.betaLabel', {
+                  defaultMessage: 'Beta',
+                })}
+              />
+            </>
+          ) : null}
+        </h1>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiText>
+        <p>
+          <FormattedMessage
+            id="credentialManagement.createCredential.description"
+            defaultMessage="A credential can be attached to multiple sources. For example, {credential} can be attached to two data sources {first} and {second}."
+            values={{
+              credential: <EuiCode>username-password-credential</EuiCode>,
+              first: <EuiCode>os-service-log</EuiCode>,
+              second: <EuiCode>os-application-log</EuiCode>,
+            }}
+          />
+          <br />
+          {/* // <HeaderBreadcrumbs /> */}
+          <EuiLink
+            href={docLinks.links.noDocumentation.indexPatterns.introduction}
+            target="_blank"
+            external
+          >
+            <FormattedMessage
+              id="credentialManagement.createCredential.documentation"
+              defaultMessage="Read documentation"
+            />
+          </EuiLink>
+        </p>
+      </EuiText>
+      {prompt ? (
+        <>
+          <EuiSpacer size="m" />
+          {prompt}
+        </>
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export { Header } from './header';