[APM] Custom links creation don't work (#110676)

* fixing custom links issue

* Removing unused imports
This commit is contained in:
Cauê Marcondes 2021-08-31 23:56:47 -04:00 committed by GitHub
parent ff73025533
commit 5b6588d8cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 100 additions and 62 deletions

View file

@ -35,6 +35,7 @@ async function config({ readConfigFile }: FtrConfigProviderContext) {
...xpackFunctionalTestsConfig.get('kbnTestServer.serverArgs'),
'--home.disableWelcomeScreen=true',
'--csp.strict=false',
'--csp.warnLegacyBrowsers=false',
// define custom kibana server args here
`--elasticsearch.ssl.certificateAuthorities=${CA_CERT_PATH}`,
],

View file

@ -0,0 +1,37 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
const basePath = '/app/apm/settings/customize-ui';
describe('Custom links', () => {
beforeEach(() => {
cy.loginAsPowerUser();
});
it('shows empty message and create button', () => {
cy.visit(basePath);
cy.contains('No links found');
cy.contains('Create custom link');
});
it('creates custom link', () => {
cy.visit(basePath);
const emptyPrompt = cy.get('[data-test-subj="customLinksEmptyPrompt"]');
cy.contains('Create custom link').click();
cy.contains('Create link');
cy.contains('Save').should('be.disabled');
cy.get('input[name="label"]').type('foo');
cy.get('input[name="url"]').type('https://foo.com');
cy.contains('Save').should('not.be.disabled');
cy.contains('Save').click();
emptyPrompt.should('not.exist');
cy.contains('foo');
cy.contains('https://foo.com');
cy.get('[data-test-subj="editCustomLink"]').click();
cy.contains('Delete').click();
});
});

View file

@ -11,8 +11,8 @@ Cypress.Commands.add('loginAsReadOnlyUser', () => {
cy.loginAs({ username: 'apm_read_user', password: 'changeme' });
});
Cypress.Commands.add('loginAsSuperUser', () => {
cy.loginAs({ username: 'elastic', password: 'changeme' });
Cypress.Commands.add('loginAsPowerUser', () => {
cy.loginAs({ username: 'apm_power_user', password: 'changeme' });
});
Cypress.Commands.add(

View file

@ -8,7 +8,7 @@
declare namespace Cypress {
interface Chainable {
loginAsReadOnlyUser(): void;
loginAsSuperUser(): void;
loginAsPowerUser(): void;
loginAs(params: { username: string; password: string }): void;
changeTimeRange(value: string): void;
expectAPIsToHaveBeenCalledWith(params: {

View file

@ -17,6 +17,7 @@ export function EmptyPrompt({
}) {
return (
<EuiEmptyPrompt
data-test-subj="customLinksEmptyPrompt"
iconType="link"
iconColor=""
title={

View file

@ -47,6 +47,7 @@ export function FlyoutFooter({
<DeleteButton customLinkId={customLinkId} onDelete={onDelete} />
)}
<EuiButton
form="customLink_form"
fill
type="submit"
isLoading={isSaving}

View file

@ -9,7 +9,6 @@ import {
EuiFlyout,
EuiFlyoutBody,
EuiFlyoutHeader,
EuiPortal,
EuiSpacer,
EuiText,
EuiTitle,
@ -76,69 +75,67 @@ export function CreateEditCustomLinkFlyout({
};
return (
<EuiPortal>
<form onSubmit={onSubmit}>
<EuiFlyout ownFocus onClose={onClose} size="m">
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h2>
{i18n.translate(
'xpack.apm.settings.customizeUI.customLink.flyout.title',
<form onSubmit={onSubmit} id="customLink_form">
<EuiFlyout ownFocus onClose={onClose} size="m">
<EuiFlyoutHeader hasBorder>
<EuiTitle size="s">
<h2>
{i18n.translate(
'xpack.apm.settings.customizeUI.customLink.flyout.title',
{
defaultMessage: 'Create link',
}
)}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiText>
<p>
{i18n.translate(
'xpack.apm.settings.customizeUI.customLink.flyout.label',
{
defaultMessage:
'Links will be available in the context of transaction details throughout the APM app. You can create an unlimited number of links. You can refer to dynamic variables by using any of the transaction metadata to fill in your URLs. More information, including examples, are available in the',
}
)}{' '}
<Documentation
label={i18n.translate(
'xpack.apm.settings.customizeUI.customLink.flyout.label.doc',
{
defaultMessage: 'Create link',
defaultMessage: 'documentation.',
}
)}
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiText>
<p>
{i18n.translate(
'xpack.apm.settings.customizeUI.customLink.flyout.label',
{
defaultMessage:
'Links will be available in the context of transaction details throughout the APM app. You can create an unlimited number of links. You can refer to dynamic variables by using any of the transaction metadata to fill in your URLs. More information, including examples, are available in the',
}
)}{' '}
<Documentation
label={i18n.translate(
'xpack.apm.settings.customizeUI.customLink.flyout.label.doc',
{
defaultMessage: 'documentation.',
}
)}
/>
</p>
</EuiText>
/>
</p>
</EuiText>
<EuiSpacer size="l" />
<EuiSpacer size="l" />
<LinkSection
label={label}
onChangeLabel={setLabel}
url={url}
onChangeUrl={setUrl}
/>
<EuiSpacer size="l" />
<FiltersSection filters={filters} onChangeFilters={setFilters} />
<EuiSpacer size="l" />
<LinkPreview label={label} url={url} filters={filters} />
</EuiFlyoutBody>
<FlyoutFooter
isSaveButtonEnabled={isFormValid}
onClose={onClose}
isSaving={isSaving}
onDelete={onDelete}
customLinkId={customLinkId}
<LinkSection
label={label}
onChangeLabel={setLabel}
url={url}
onChangeUrl={setUrl}
/>
</EuiFlyout>
</form>
</EuiPortal>
<EuiSpacer size="l" />
<FiltersSection filters={filters} onChangeFilters={setFilters} />
<EuiSpacer size="l" />
<LinkPreview label={label} url={url} filters={filters} />
</EuiFlyoutBody>
<FlyoutFooter
isSaveButtonEnabled={isFormValid}
onClose={onClose}
isSaving={isSaving}
onDelete={onDelete}
customLinkId={customLinkId}
/>
</EuiFlyout>
</form>
);
}

View file

@ -79,6 +79,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) {
icon: 'pencil',
color: 'primary',
type: 'icon',
'data-test-subj': 'editCustomLink',
onClick: (customLink: CustomLink) => {
onCustomLinkSelected(customLink);
},