[MD] Add initial credential management CRUD pages (#2040)

* Add credential management CRUD pages

1. List all credentials 
2. Create your saved credential
3. Edit your credential
4. Delete credentials

Signed-off-by: Louis Chu <[email protected]>

src/plugins/credential_management/common/index.ts

@@ -4,4 +4,4 @@
  */
 
 export const PLUGIN_ID = 'credentialManagement';
-export const PLUGIN_NAME = 'credentialManagement';
+export const PLUGIN_NAME = 'credential_management';

src/plugins/credential_management/opensearch_dashboards.json

@@ -1,9 +1,8 @@
 {
   "id": "credentialManagement",
-  "version": "1.0.0",
-  "opensearchDashboardsVersion": "opensearchDashboards",
+  "version": "opensearchDashboards",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["navigation"],
-  "optionalPlugins": []
+  "requiredPlugins": ["management"],
+  "requiredBundles": ["opensearchDashboardsReact"]
 }

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

@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+import { CredentialEditPageItem } from './types';
+
+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`,
+    },
+  ];
+}
+
+export function getEditBreadcrumbs(credentials: CredentialEditPageItem) {
+  return [
+    ...getListBreadcrumbs(),
+    {
+      text: credentials.title,
+      href: `/${credentials.id}`,
+    },
+  ];
+}

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

@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// @ts-ignore
+import { euiColorAccent } from '@elastic/eui/dist/eui_theme_light.json';
+import React from 'react';
+import * as H from 'history';
+
+import { EuiButton } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+
+interface Props {
+  history: H.History;
+}
+
+export const CreateButton = ({ history }: Props) => {
+  return (
+    <EuiButton
+      data-test-subj="createCredentialButton"
+      fill={true}
+      onClick={() => history.push('/create')}
+      iconType="plusInCircle"
+    >
+      <FormattedMessage
+        id="credentialManagement.credentialsTable.createBtn"
+        defaultMessage="Save your credential"
+      />
+    </EuiButton>
+  );
+};

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

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { CreateButton } from './create_button';

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

@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+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';
+export const Header = ({ docLinks }: { docLinks: DocLinksStart }) => {
+  const changeTitle = useOpenSearchDashboards<CredentialManagementContext>().services.chrome
+    .docTitle.change;
+  const createCredentialHeader = i18n.translate('credentialManagement.createIndexPatternHeader', {
+    defaultMessage: 'Save Your Credential',
+  });
+
+  changeTitle(createCredentialHeader);
+
+  return (
+    <div>
+      <EuiTitle>
+        <h1>
+          {createCredentialHeader}
+          <>
+            {' '}
+            <EuiBetaBadge
+              label={i18n.translate('credentialManagement.createCredential.betaLabel', {
+                defaultMessage: 'Beta',
+              })}
+            />
+          </>
+        </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 />
+          <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,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Header } from './header';