[MD] Revamped UX for data source management (opensearch-project#2239)

* revamped UX for data source management

Signed-off-by: mpabba3003 <[email protected]>

* refactored datasource screens as per PR comments

Signed-off-by: mpabba3003 <[email protected]>

Signed-off-by: mpabba3003 <[email protected]>

src/plugins/credential_management/public/components/common/components/create_credential_form/create_credential_form.tsx

@@ -11,7 +11,6 @@ import {
   EuiFieldText,
   EuiButton,
   EuiFieldPassword,
-  EuiPageContent,
   EuiHorizontalRule,
   EuiSpacer,
   EuiText,
@@ -28,6 +27,8 @@ import { Header } from '../header';
 export interface CredentialFormProps {
   docLinks: DocLinksStart;
   handleSubmit: (formValues: CreateCredentialItem) => void;
+  hideSubmit?: boolean;
+  callSubmit?: boolean;
 }
 
 export interface CredentialFormState {
@@ -72,6 +73,16 @@ export class CredentialForm extends React.Component<CredentialFormProps, Credent
     };
   }
 
+  componentDidUpdate(
+    prevProps: Readonly<CredentialFormProps>,
+    prevState: Readonly<CredentialFormState>,
+    snapshot?: any
+  ) {
+    if (prevProps.callSubmit !== this.props.callSubmit) {
+      this.onClickSubmitForm();
+    }
+  }
+
   /* Validations */
 
   isFormValid = () => {
@@ -165,7 +176,7 @@ export class CredentialForm extends React.Component<CredentialFormProps, Credent
     const header = this.renderHeader();
 
     return (
-      <EuiPageContent>
+      <>
         {header}
         <EuiHorizontalRule />
         <EuiForm
@@ -251,11 +262,13 @@ export class CredentialForm extends React.Component<CredentialFormProps, Credent
           <EuiSpacer size="xl" />
 
           {/* Create Credential button*/}
-          <EuiButton type="submit" fill onClick={this.onClickSubmitForm}>
-            Create stored credential
-          </EuiButton>
+          {this.props.hideSubmit ? null : (
+            <EuiButton type="submit" fill onClick={this.onClickSubmitForm}>
+              Create stored credential
+            </EuiButton>
+          )}
         </EuiForm>
-      </EuiPageContent>
+      </>
     );
   };
 

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

@@ -11,6 +11,7 @@ import {
   EuiGlobalToastListToast,
   EuiLoadingSpinner,
   EuiOverlayMask,
+  EuiPageContent,
 } from '@elastic/eui';
 import { DocLinksStart } from 'src/core/public';
 
@@ -104,10 +105,12 @@ export class CreateCredentialWizard extends React.Component<
       </EuiOverlayMask>
     ) : (
       <>
-        <CredentialForm
-          docLinks={this.context.services.docLinks}
-          handleSubmit={this.createCredential}
-        />
+        <EuiPageContent>
+          <CredentialForm
+            docLinks={this.context.services.docLinks}
+            handleSubmit={this.createCredential}
+          />
+        </EuiPageContent>
         <EuiGlobalToastList
           toasts={this.state.toasts}
           dismissToast={({ id }) => {

src/plugins/credential_management/public/index.ts

@@ -7,6 +7,8 @@ import './index.scss';
 
 import { CredentialManagementPlugin } from './plugin';
 
+export { CredentialForm } from './components/common';
+export { CreateCredentialItem } from './components/types';
 // This exports static code and TypeScript types,
 // as well as, OpenSearch Dashboards Platform `plugin()` initializer.
 export function plugin() {

src/plugins/data_source_management/common/index.ts

@@ -5,5 +5,3 @@
 
 export const PLUGIN_ID = 'dataSourceManagement';
 export const PLUGIN_NAME = 'Data Sources';
-export const MODE_CREATE = 'Create Data Source';
-export const MODE_EDIT = 'Edit Data Source';

src/plugins/data_source_management/opensearch_dashboards.json

@@ -5,5 +5,5 @@
   "ui": true,
   "requiredPlugins": ["management", "dataSource"],
   "optionalPlugins": [],
-  "requiredBundles": ["opensearchDashboardsReact"]
+  "requiredBundles": ["opensearchDashboardsReact", "credentialManagement"]
 }

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

@@ -23,7 +23,7 @@ export const CreateButton = ({ history }: Props) => {
     >
       <FormattedMessage
         id="dataSourcesManagement.dataSourcesTable.createBtn"
-        defaultMessage="Create Data Source"
+        defaultMessage="Create data source connection"
       />
     </EuiButton>
   );