Skip to content

Commit

Permalink
[MD] Revamped UX for data source management (#2239)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
mpabba3003 authored Sep 1, 2022
1 parent ab9aa8d commit 5b164b2
Show file tree
Hide file tree
Showing 24 changed files with 1,791 additions and 615 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
EuiFieldText,
EuiButton,
EuiFieldPassword,
EuiPageContent,
EuiHorizontalRule,
EuiSpacer,
EuiText,
Expand All @@ -28,6 +27,8 @@ import { Header } from '../header';
export interface CredentialFormProps {
docLinks: DocLinksStart;
handleSubmit: (formValues: CreateCredentialItem) => void;
hideSubmit?: boolean;
callSubmit?: boolean;
}

export interface CredentialFormState {
Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -165,7 +176,7 @@ export class CredentialForm extends React.Component<CredentialFormProps, Credent
const header = this.renderHeader();

return (
<EuiPageContent>
<>
{header}
<EuiHorizontalRule />
<EuiForm
Expand Down Expand Up @@ -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>
</>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
EuiGlobalToastListToast,
EuiLoadingSpinner,
EuiOverlayMask,
EuiPageContent,
} from '@elastic/eui';
import { DocLinksStart } from 'src/core/public';

Expand Down Expand Up @@ -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 }) => {
Expand Down
2 changes: 2 additions & 0 deletions src/plugins/credential_management/public/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
2 changes: 0 additions & 2 deletions src/plugins/data_source_management/common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@
"ui": true,
"requiredPlugins": ["management", "dataSource"],
"optionalPlugins": [],
"requiredBundles": ["opensearchDashboardsReact"]
"requiredBundles": ["opensearchDashboardsReact", "credentialManagement"]
}
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const CreateButton = ({ history }: Props) => {
>
<FormattedMessage
id="dataSourcesManagement.dataSourcesTable.createBtn"
defaultMessage="Create Data Source"
defaultMessage="Create data source connection"
/>
</EuiButton>
);
Expand Down
Loading

0 comments on commit 5b164b2

Please sign in to comment.