Skip to content

Commit

Permalink
Convert Credentials to new page template
Browse files Browse the repository at this point in the history 
+ add missing ability check around route
  • Loading branch information
@cee-chen
cee-chen committed Jun 18, 2021
1 parent 48b9c1e commit bf5aee3
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 75 deletions.
5 changes: 3 additions & 2 deletions ...erprise_search/public/applications/app_search/components/credentials/credentials.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,15 @@ import React from 'react';

import { shallow } from 'enzyme';

import { EuiCopy, EuiLoadingContent, EuiPageContentBody } from '@elastic/eui';
import { EuiCopy, EuiLoadingContent } from '@elastic/eui';

import { DEFAULT_META } from '../../../shared/constants';
import { externalUrl } from '../../../shared/enterprise_search_url';

import { Credentials } from './credentials';

import { CredentialsFlyout } from './credentials_flyout';
import { CredentialsList } from './credentials_list';

describe('Credentials', () => {
// Kea mocks
Expand All @@ -42,7 +43,7 @@ describe('Credentials', () => {

it('renders', () => {
const wrapper = shallow(<Credentials />);
expect(wrapper.find(EuiPageContentBody)).toHaveLength(1);
expect(wrapper.find(CredentialsList)).toHaveLength(1);
});

it('fetches data on mount', () => {
Expand Down
133 changes: 64 additions & 69 deletions ...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@ import React, { useEffect } from 'react';
import { useActions, useValues } from 'kea';

import {
EuiPageHeader,
EuiTitle,
EuiPageContentBody,
EuiPanel,
EuiCopy,
EuiButtonIcon,
Expand All @@ -25,8 +23,7 @@ import {
import { i18n } from '@kbn/i18n';

import { externalUrl } from '../../../shared/enterprise_search_url/external_url';
import { FlashMessages } from '../../../shared/flash_messages';
import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
import { AppSearchPageTemplate } from '../layout';

import { CREDENTIALS_TITLE } from './constants';
import { CredentialsFlyout } from './credentials_flyout';
Expand All @@ -52,74 +49,72 @@ export const Credentials: React.FC = () => {
}, []);

return (
<>
<SetPageChrome trail={[CREDENTIALS_TITLE]} />
<EuiPageHeader pageTitle={CREDENTIALS_TITLE} />
<EuiPageContentBody>
{shouldShowCredentialsForm && <CredentialsFlyout />}
<EuiPanel hasBorder className="eui-textCenter">
<EuiTitle size="s">
<AppSearchPageTemplate
pageChrome={[CREDENTIALS_TITLE]}
pageHeader={{ pageTitle: CREDENTIALS_TITLE }}
>
{shouldShowCredentialsForm && <CredentialsFlyout />}
<EuiPanel color="subdued" className="eui-textCenter">
<EuiTitle size="s">
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiEndpoint', {
defaultMessage: 'Endpoint',
})}
</h2>
</EuiTitle>
<EuiCopy
textToCopy={externalUrl.enterpriseSearchUrl}
afterMessage={i18n.translate('xpack.enterpriseSearch.appSearch.credentials.copied', {
defaultMessage: 'Copied',
})}
>
{(copy) => (
<>
<EuiButtonIcon
onClick={copy}
iconType="copyClipboard"
aria-label={i18n.translate(
'xpack.enterpriseSearch.appSearch.credentials.copyApiEndpoint',
{
defaultMessage: 'Copy API Endpoint to clipboard.',
}
)}
/>
{externalUrl.enterpriseSearchUrl}
</>
)}
</EuiCopy>
</EuiPanel>
<EuiSpacer size="xxl" />
<EuiPageContentHeader responsive={false}>
<EuiPageContentHeaderSection>
<EuiTitle size="m">
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiEndpoint', {
defaultMessage: 'Endpoint',
{i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiKeys', {
defaultMessage: 'API Keys',
})}
</h2>
</EuiTitle>
<EuiCopy
textToCopy={externalUrl.enterpriseSearchUrl}
afterMessage={i18n.translate('xpack.enterpriseSearch.appSearch.credentials.copied', {
defaultMessage: 'Copied',
})}
>
{(copy) => (
<>
<EuiButtonIcon
onClick={copy}
iconType="copyClipboard"
aria-label={i18n.translate(
'xpack.enterpriseSearch.appSearch.credentials.copyApiEndpoint',
{
defaultMessage: 'Copy API Endpoint to clipboard.',
}
)}
/>
{externalUrl.enterpriseSearchUrl}
</>
)}
</EuiCopy>
</EuiPanel>
<EuiSpacer size="xxl" />
<EuiPageContentHeader responsive={false}>
<EuiPageContentHeaderSection>
<EuiTitle size="m">
<h2>
{i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiKeys', {
defaultMessage: 'API Keys',
})}
</h2>
</EuiTitle>
</EuiPageContentHeaderSection>
<EuiPageContentHeaderSection>
{!dataLoading && (
<EuiButton
color="primary"
data-test-subj="CreateAPIKeyButton"
fill
onClick={() => showCredentialsForm()}
>
{i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
defaultMessage: 'Create a key',
})}
</EuiButton>
)}
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
<EuiSpacer size="m" />
<FlashMessages />
<EuiPanel hasBorder>
{!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}
</EuiPanel>
</EuiPageContentBody>
</>
</EuiPageContentHeaderSection>
<EuiPageContentHeaderSection>
{!dataLoading && (
<EuiButton
color="primary"
data-test-subj="CreateAPIKeyButton"
fill
onClick={() => showCredentialsForm()}
>
{i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
defaultMessage: 'Create a key',
})}
</EuiButton>
)}
</EuiPageContentHeaderSection>
</EuiPageContentHeader>
<EuiSpacer size="m" />
<EuiPanel hasBorder>
{!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}
</EuiPanel>
</AppSearchPageTemplate>
);
};
15 changes: 15 additions & 0 deletions x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { rerender } from '../test_helpers';
jest.mock('./app_logic', () => ({ AppLogic: jest.fn() }));
import { AppLogic } from './app_logic';

import { Credentials } from './components/credentials';
import { EngineRouter, EngineNav } from './components/engine';
import { EngineCreation } from './components/engine_creation';
import { EnginesOverview } from './components/engines';
Expand Down Expand Up @@ -119,6 +120,20 @@ describe('AppSearchConfigured', () => {
});
});

describe('canViewAccountCredentials', () => {
it('renders Credentials when user canViewAccountCredentials is true', () => {
setMockValues({ myRole: { canViewAccountCredentials: true } });
rerender(wrapper);
expect(wrapper.find(Credentials)).toHaveLength(1);
});

it('does not render Credentials when user canViewAccountCredentials is false', () => {
setMockValues({ myRole: { canViewAccountCredentials: false } });
rerender(wrapper);
expect(wrapper.find(Credentials)).toHaveLength(0);
});
});

describe('canViewRoleMappings', () => {
it('renders RoleMappings when canViewRoleMappings is true', () => {
setMockValues({ myRole: { canViewRoleMappings: true } });
Expand Down
16 changes: 12 additions & 4 deletions x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,13 @@ export const AppSearchUnconfigured: React.FC = () => (

export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) => {
const {
myRole: { canManageEngines, canManageMetaEngines, canViewSettings, canViewRoleMappings },
myRole: {
canManageEngines,
canManageMetaEngines,
canViewSettings,
canViewAccountCredentials,
canViewRoleMappings,
},
} = useValues(AppLogic(props));
const { renderHeaderActions } = useValues(KibanaLogic);
const { readOnlyMode } = useValues(HttpLogic);
Expand All @@ -97,6 +103,11 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
<Settings />
</Route>
)}
{canViewAccountCredentials && (
<Route exact path={CREDENTIALS_PATH}>
<Credentials />
</Route>
)}
{canViewRoleMappings && (
<Route path={ROLE_MAPPINGS_PATH}>
<RoleMappings />
Expand All @@ -114,9 +125,6 @@ export const AppSearchConfigured: React.FC<Required<InitialAppData>> = (props) =
<Route path={ENGINE_PATH}>
<EngineRouter />
</Route>
<Route exact path={CREDENTIALS_PATH}>
<Credentials />
</Route>
{canManageEngines && (
<Route exact path={ENGINE_CREATION_PATH}>
<EngineCreation />
Expand Down

0 comments on commit bf5aee3

Please sign in to comment.