Skip to content

Commit

Permalink
Resolved the comments & fix the multiple call for one operation
Browse files Browse the repository at this point in the history 
Signed-off-by: Yibo Wang <yibow@amazon.com>
  • Loading branch information
@yibow98
yibow98 committed Aug 31, 2022
1 parent 4055dad commit 7c2cec9
Show file tree
Hide file tree
Showing 8 changed files with 173 additions and 195 deletions.
45 changes: 0 additions & 45 deletions ...ins/credential_management/public/components/common/components/header/edit_page_header.tsx
View file

This file was deleted.

79 changes: 46 additions & 33 deletions src/plugins/credential_management/public/components/common/components/header/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,14 @@ export const Header = ({
prompt,
docLinks,
headerTitle,
isBeta = false,
isCreateCredential = false,
}: {
prompt?: React.ReactNode;
docLinks: DocLinksStart;
docLinks?: DocLinksStart;
headerTitle: string;
isBeta?: boolean;
isCreateCredential: boolean;
}) => {
const changeTitle = useOpenSearchDashboards<CredentialManagementContext>().services.chrome
.docTitle.change;
Expand All @@ -32,41 +36,50 @@ export const Header = ({
<EuiTitle>
<h1>
{headerTitle}
<>
{' '}
<EuiBetaBadge
label={i18n.translate('credentialManagement.createCredential.betaLabel', {
defaultMessage: 'Beta',
})}
/>
</>

{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 />
<EuiLink
href={docLinks.links.noDocumentation.indexPatterns.introduction}
target="_blank"
external
>
<FormattedMessage
id="credentialManagement.createCredential.documentation"
defaultMessage="Read documentation"
/>
</EuiLink>
</p>
</EuiText>

{isCreateCredential ? (
<>
<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>
</>
) : null}

{prompt ? (
<>
<EuiSpacer size="m" />
Expand Down
21 changes: 21 additions & 0 deletions src/plugins/credential_management/public/components/common/text_content/text_content.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,24 @@ export const confirmButtonOnDeleteComfirmText = i18n.translate(
defaultMessage: 'Delete',
}
);

export const credentialEditPagePassword = i18n.translate(
'credentialManagement.textContent.credentialEditPagePassword',
{
defaultMessage: '*************',
}
);

export const credentialEditPageAuthTitle = i18n.translate(
'credentialManagement.textContent.credentialEditPageAuthTitle',
{
defaultMessage: 'Authentication Details',
}
);

export const credentialEditPageInfoTitle = i18n.translate(
'credentialManagement.textContent.credentialEditPageAuthTitle',
{
defaultMessage: 'Saved Credential Information',
}
);
65 changes: 28 additions & 37 deletions src/plugins/credential_management/public/components/credential_table/credentials_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,11 @@ import {
EuiBadgeGroup,
EuiPageContent,
EuiTitle,
EuiSearchBar,
EuiConfirmModal,
EuiLoadingSpinner,
EuiOverlayMask,
EuiGlobalToastList,
EuiGlobalToastListToast,
Query,
} from '@elastic/eui';

import {
Expand Down Expand Up @@ -78,11 +76,8 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
const [isDeleting, setIsDeleting] = React.useState(false);
const [confirmDeleteVisible, setConfirmDeleteVisible] = React.useState(false);
const [toasts, setToasts] = React.useState<EuiGlobalToastListToast[]>([]);
const [searchText, setSearchText] = React.useState('');

const { savedObjects, uiSettings } = useOpenSearchDashboards<
CredentialManagementContext
>().services;
const { savedObjects } = useOpenSearchDashboards<CredentialManagementContext>().services;

const columns = [
{
Expand Down Expand Up @@ -136,10 +131,6 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
setSelectedCredentials(selected);
};

const selection = {
onSelectionChange,
};

const renderDeleteButton = () => {
let deleteButtonMsg = 'Delete';

Expand All @@ -162,6 +153,28 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
);
};

const renderToolsRight = () => {
return (
<EuiFlexItem key="delete" grow={false}>
{renderDeleteButton()}
</EuiFlexItem>
);
};

const search = {
toolsRight: renderToolsRight(),
box: {
incremental: true,
schema: {
fields: { title: { type: 'string' } },
},
},
};

const selection = {
onSelectionChange,
};

const onClickDelete = async () => {
try {
setIsDeleting(true);
Expand Down Expand Up @@ -193,24 +206,20 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
}
};

const deleteButton = renderDeleteButton();

React.useEffect(() => {
useEffectOnce(() => {
(async () => {
setIsLoading(true);

const fetchedCredentials: CredentialsTableItem[] = await getCredentials(savedObjects.client);
const fetchedCredentialsResults = fetchedCredentials.filter((row) => {
return row.title.includes(searchText);
});
setCredentials(fetchedCredentials);

setCredentials(fetchedCredentialsResults);
setIsLoading(false);
})();
}, [history.push, credentials.length, uiSettings, savedObjects.client, searchText]);
});

const createButton = canSave ? <CreateButton history={history} /> : <></>;

/* render delete modal*/
const tableRenderDeleteModal = () => {
return confirmDeleteVisible ? (
<EuiConfirmModal
Expand All @@ -232,15 +241,6 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
) : null;
};

const onSearchChange = ({
query,
}: {
query: Query | null;
error: { message: string } | null;
}) => {
setSearchText(query!.text);
};

const removeToast = (id: string) => {
setToasts(toasts.filter((toast) => toast.id !== id));
};
Expand Down Expand Up @@ -272,16 +272,6 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
<EuiFlexItem grow={false}>{createButton}</EuiFlexItem>
</EuiFlexGroup>

<EuiSearchBar
box={{ 'data-test-subj': 'savedObjectSearchBar' }}
onChange={(e) => onSearchChange(e)}
toolsRight={[
<EuiFlexItem key="delete" grow={false}>
{deleteButton}
</EuiFlexItem>,
]}
/>

{tableRenderDeleteModal()}

<EuiSpacer />
Expand All @@ -295,6 +285,7 @@ export const CredentialsTable = ({ canSave, history }: Props) => {
columns={columns}
pagination={pagination}
sorting={sorting}
search={search}
loading={isLoading}
/>
</>
Expand Down
Loading

0 comments on commit 7c2cec9

Please sign in to comment.