[APM] Custom links creation don't work

x-pack/plugins/apm/ftr_e2e/config.ts

@@ -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}`,
       ],

x-pack/plugins/apm/ftr_e2e/cypress/integration/power_user/settings/custom_links.spec.ts

@@ -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();
+  });
+});

x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts

@@ -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(

x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts

@@ -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: {

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/EmptyPrompt.tsx

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

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/FlyoutFooter.tsx

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

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/index.tsx

@@ -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}
-            />
+          <LinkSection
+            label={label}
+            onChangeLabel={setLabel}
+            url={url}
+            onChangeUrl={setUrl}
+          />
 
-            <EuiSpacer size="l" />
+          <EuiSpacer size="l" />
 
-            <FiltersSection filters={filters} onChangeFilters={setFilters} />
+          <FiltersSection filters={filters} onChangeFilters={setFilters} />
 
-            <EuiSpacer size="l" />
+          <EuiSpacer size="l" />
 
-            <LinkPreview label={label} url={url} filters={filters} />
-          </EuiFlyoutBody>
+          <LinkPreview label={label} url={url} filters={filters} />
+        </EuiFlyoutBody>
 
-          <FlyoutFooter
-            isSaveButtonEnabled={isFormValid}
-            onClose={onClose}
-            isSaving={isSaving}
-            onDelete={onDelete}
-            customLinkId={customLinkId}
-          />
-        </EuiFlyout>
-      </form>
-    </EuiPortal>
+        <FlyoutFooter
+          isSaveButtonEnabled={isFormValid}
+          onClose={onClose}
+          isSaving={isSaving}
+          onDelete={onDelete}
+          customLinkId={customLinkId}
+        />
+      </EuiFlyout>
+    </form>
   );
 }

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx

@@ -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);
                 },