[Dashboard navigation] Functional tests for links panel

.buildkite/ftr_configs.yml

@@ -100,6 +100,7 @@ enabled:
   - test/functional/apps/dashboard_elements/controls/options_list/config.ts
   - test/functional/apps/dashboard_elements/image_embeddable/config.ts
   - test/functional/apps/dashboard_elements/input_control_vis/config.ts
+  - test/functional/apps/dashboard_elements/links/config.ts
   - test/functional/apps/dashboard_elements/markdown/config.ts
   - test/functional/apps/dashboard/group1/config.ts
   - test/functional/apps/dashboard/group2/config.ts

packages/kbn-test/src/kbn_client/kbn_client_saved_objects.ts

@@ -96,6 +96,7 @@ const STANDARD_LIST_TYPES = [
   'dashboard',
   'search',
   'lens',
+  'links',
   'map',
   'cases',
   // synthetics based objects

src/plugins/links/public/components/dashboard_link/dashboard_link_component.tsx

@@ -133,13 +133,11 @@ export const DashboardLinkComponent = ({
     };
   }, [link]);
 
+  const id = `dashboardLink--${link.id}`;
+
   return loadingDestinationDashboard ? (
-    <li id={`dashboardLink--${link.id}--loading`}>
-      <EuiButtonEmpty
-        size="s"
-        isLoading={true}
-        data-test-subj={`dashboardLink--${link.id}--loading`}
-      >
+    <li id={`${id}--loading`}>
+      <EuiButtonEmpty size="s" isLoading={true} data-test-subj={`${id}--loading`}>
         {DashboardLinkStrings.getLoadingDashboardLabel()}
       </EuiButtonEmpty>
     </li>
@@ -156,7 +154,7 @@ export const DashboardLinkComponent = ({
         position: layout === LINKS_VERTICAL_LAYOUT ? 'right' : 'bottom',
         repositionOnScroll: true,
         delay: 'long',
-        'data-test-subj': `dashboardLink--${link.id}--tooltip`,
+        'data-test-subj': `${id}--tooltip`,
       }}
       iconType={error ? 'warning' : undefined}
       iconProps={{ className: 'dashboardLinkIcon' }}
@@ -167,7 +165,7 @@ export const DashboardLinkComponent = ({
         'dashboardLinkError--noLabel': !link.label,
       })}
       label={linkLabel}
-      data-test-subj={error ? `dashboardLink--${link.id}--error` : `dashboardLink--${link.id}`}
+      data-test-subj={error ? `${id}--error` : `${id}`}
     />
   );
 };

src/plugins/links/public/components/dashboard_link/dashboard_link_destination_picker.tsx

@@ -143,6 +143,7 @@ export const DashboardLinkDestinationPicker = ({
           onDestinationPicked(undefined);
         }
       }}
+      data-test-subj="links--linkEditor--dashboardLink--comboBox"
     />
   );
 };

src/plugins/links/public/components/editor/link_destination.tsx

@@ -45,11 +45,14 @@ export const LinkDestination = ({
     link && link.type === EXTERNAL_LINK_TYPE ? link.destination : undefined
   );
 
+  const isInvalid = Boolean(destinationError);
+
   return (
     <EuiFormRow
       error={destinationError}
-      isInvalid={Boolean(destinationError)}
+      isInvalid={isInvalid}
       label={LinksStrings.editor.linkEditor.getLinkDestinationLabel()}
+      data-test-subj={`links--linkDestination${isInvalid ? '--error' : ''}`}
     >
       {selectedLinkType === DASHBOARD_LINK_TYPE ? (
         <DashboardLinkDestinationPicker

src/plugins/links/public/components/editor/links_editor.tsx

@@ -53,10 +53,12 @@ const layoutOptions: EuiButtonGroupOptionProps[] = [
   {
     id: LINKS_VERTICAL_LAYOUT,
     label: LinksLayoutInfo[LINKS_VERTICAL_LAYOUT].displayName,
+    'data-test-subj': `links--panelEditor--${LINKS_VERTICAL_LAYOUT}LayoutBtn`,
   },
   {
     id: LINKS_HORIZONTAL_LAYOUT,
     label: LinksLayoutInfo[LINKS_HORIZONTAL_LAYOUT].displayName,
+    'data-test-subj': `links--panelEditor--${LINKS_HORIZONTAL_LAYOUT}LayoutBtn`,
   },
 ];
 
@@ -200,6 +202,7 @@ const LinksEditor = ({
                     <EuiDroppable
                       className="linksDroppableLinksArea"
                       droppableId="linksDroppableLinksArea"
+                      data-test-subj="links--panelEditor--linksAreaDroppable"
                     >
                       {orderedLinks.map((link, idx) => (
                         <EuiDraggable
@@ -229,6 +232,7 @@ const LinksEditor = ({
                     size="s"
                     iconType="plusInCircle"
                     onClick={() => addOrEditLink()}
+                    data-test-subj="links--panelEditor--addLinkBtn"
                   >
                     {LinksStrings.editor.getAddButtonLabel()}
                   </EuiButtonEmpty>

src/plugins/links/public/components/editor/links_editor_empty_prompt.tsx

@@ -24,7 +24,12 @@ export const LinksEditorEmptyPrompt = ({ addLink }: { addLink: () => Promise<voi
             <>
               <EuiText size="s">{LinksStrings.editor.panelEditor.getEmptyLinksMessage()}</EuiText>
               <EuiSpacer size="m" />
-              <EuiButton size="s" onClick={addLink} iconType="plusInCircle">
+              <EuiButton
+                size="s"
+                onClick={addLink}
+                iconType="plusInCircle"
+                data-test-subj="links--panelEditor--addLinkBtn"
+              >
                 {LinksStrings.editor.getAddButtonLabel()}
               </EuiButton>
             </>

src/plugins/links/public/components/editor/links_editor_link.tsx

@@ -72,6 +72,7 @@ export const LinkEditor = ({
             <EuiFlexItem>{LinkInfo[type].displayName}</EuiFlexItem>
           </EuiFlexGroup>
         ),
+        'data-test-subj': `links--linkEditor--${type}--radioBtn`,
       };
     });
   }, []);
@@ -89,7 +90,7 @@ export const LinkEditor = ({
   );
 
   return (
-    <EuiFocusTrap className={'linkEditor in'}>
+    <EuiFocusTrap className={'linkEditor in'} data-test-subj="links--linkEditor--flyout">
       <EuiFlyoutHeader hasBorder>
         <EuiButtonEmpty
           className="linkEditorBackButton"
@@ -135,6 +136,7 @@ export const LinkEditor = ({
               }
               value={currentLinkLabel}
               onChange={(e) => setCurrentLinkLabel(e.target.value)}
+              data-test-subj="links--linkEditor--linkLabel--input"
             />
           </EuiFormRow>
           <LinkOptionsComponent
@@ -147,7 +149,11 @@ export const LinkEditor = ({
       <EuiFlyoutFooter>
         <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={() => onClose()} iconType="cross">
+            <EuiButtonEmpty
+              onClick={() => onClose()}
+              iconType="cross"
+              data-test-subj="links--linkEditor--closeBtn"
+            >
               {LinksStrings.editor.getCancelButtonLabel()}
             </EuiButtonEmpty>
           </EuiFlexItem>
@@ -168,6 +174,7 @@ export const LinkEditor = ({
                   onClose();
                 }
               }}
+              data-test-subj="links--linkEditor--saveBtn"
             >
               {link
                 ? LinksStrings.editor.getUpdateButtonLabel()

src/plugins/links/public/components/editor/panel_editor_link.tsx

@@ -143,6 +143,7 @@ export const PanelEditorLink = ({
             paddingSize="none"
             {...dragHandleProps}
             aria-label={LinksStrings.editor.panelEditor.getDragHandleAriaLabel()}
+            data-test-subj="panelEditorLink--dragHandle"
           >
             <EuiIcon type="grab" />
           </EuiPanel>
@@ -160,6 +161,7 @@ export const PanelEditorLink = ({
                   iconType="pencil"
                   onClick={editLink}
                   aria-label={LinksStrings.editor.getEditLinkTitle()}
+                  data-test-subj="panelEditorLink--editBtn"
                 />
               </EuiToolTip>
             </EuiFlexItem>
@@ -171,6 +173,7 @@ export const PanelEditorLink = ({
                   aria-label={LinksStrings.editor.getDeleteLinkTitle()}
                   color="danger"
                   onClick={deleteLink}
+                  data-test-subj="panelEditorLink--deleteBtn"
                 />
               </EuiToolTip>
             </EuiFlexItem>

src/plugins/links/public/components/external_link/external_link_component.tsx

@@ -47,6 +47,8 @@ export const ExternalLinkComponent = ({
       : link.destination;
   }, [linkOptions, link.destination]);
 
+  const id = `externalLink--${link.id}`;
+
   return (
     <EuiListGroupItem
       size="s"
@@ -59,12 +61,12 @@ export const ExternalLinkComponent = ({
         position: layout === LINKS_VERTICAL_LAYOUT ? 'right' : 'bottom',
         repositionOnScroll: true,
         delay: 'long',
-        'data-test-subj': `externalLink--${link.id}--tooltip`,
+        'data-test-subj': `${id}--tooltip`,
       }}
       iconType={error ? 'warning' : undefined}
-      id={`externalLink--${link.id}`}
+      id={id}
       label={link.label || link.destination}
-      data-test-subj={error ? `externalLink--${link.id}--error` : `externalLink--${link.id}`}
+      data-test-subj={error ? `${id}--error` : `${id}`}
       href={destination}
       onClick={async (event) => {
         if (!destination) return;

src/plugins/links/public/components/external_link/external_link_destination_picker.tsx

@@ -78,6 +78,7 @@ export const ExternalLinkDestinationPicker = ({
             setDestinationError(message);
           }
         }}
+        data-test-subj="links--linkEditor--externalLink--input"
       />
     </div>
   );

src/plugins/links/public/components/links_component.tsx

@@ -61,8 +61,13 @@ export const LinksComponent = () => {
         layout === LINKS_HORIZONTAL_LAYOUT ? 'eui-xScroll' : 'eui-yScroll'
       }`}
       paddingSize="xs"
+      data-test-subj="links--component"
     >
-      <EuiListGroup maxWidth={false} className={`${layout}LayoutWrapper`}>
+      <EuiListGroup
+        maxWidth={false}
+        className={`${layout}LayoutWrapper`}
+        data-test-subj="links--component--listGroup"
+      >
         {orderedLinks.map((link) => linkItems[link.id].content)}
       </EuiListGroup>
     </EuiPanel>

src/plugins/links/public/editor/open_editor_flyout.tsx

@@ -118,6 +118,7 @@ export async function openEditorFlyout(
         outsideClickCloses: false,
         onClose: onCancel,
         className: 'linksPanelEditor',
+        'data-test-subj': 'links--panelEditor--flyout',
       }
     );
 

src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx

@@ -29,6 +29,7 @@ export const DashboardDrilldownOptionsComponent = ({
           label={dashboardDrilldownConfigStrings.component.getUseCurrentFiltersLabel()}
           checked={options.useCurrentFilters}
           onChange={() => onOptionChange({ useCurrentFilters: !options.useCurrentFilters })}
+          data-test-subj="dashboardDrillDownOptions--useCurrentFilters--checkbox"
         />
       </EuiFormRow>
       <EuiFormRow hasChildLabel={false}>
@@ -37,6 +38,7 @@ export const DashboardDrilldownOptionsComponent = ({
           label={dashboardDrilldownConfigStrings.component.getUseCurrentDateRange()}
           checked={options.useCurrentDateRange}
           onChange={() => onOptionChange({ useCurrentDateRange: !options.useCurrentDateRange })}
+          data-test-subj="dashboardDrillDownOptions--useCurrentDateRange--checkbox"
         />
       </EuiFormRow>
       <EuiFormRow hasChildLabel={false}>
@@ -45,6 +47,7 @@ export const DashboardDrilldownOptionsComponent = ({
           label={dashboardDrilldownConfigStrings.component.getOpenInNewTab()}
           checked={options.openInNewTab}
           onChange={() => onOptionChange({ openInNewTab: !options.openInNewTab })}
+          data-test-subj="dashboardDrillDownOptions--openInNewTab--checkbox"
         />
       </EuiFormRow>
     </>

src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_options.tsx

@@ -50,6 +50,7 @@ export const UrlDrilldownOptionsComponent = ({
           }
           checked={options.encodeUrl}
           onChange={() => onOptionChange({ encodeUrl: !options.encodeUrl })}
+          data-test-subj="urlDrilldownEncodeUrl"
         />
       </EuiFormRow>
     </>

test/functional/apps/dashboard_elements/links/config.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FtrConfigProviderContext } from '@kbn/test';
+
+export default async function ({ readConfigFile }: FtrConfigProviderContext) {
+  const commonConfig = await readConfigFile(require.resolve('../../../../common/config.js'));
+  const functionalConfig = await readConfigFile(require.resolve('../../../config.base.js'));
+
+  return {
+    ...functionalConfig.getAll(),
+    testFiles: [require.resolve('.')],
+    junit: {
+      reportName: 'Dashboard Elements - Links panel tests',
+    },
+    kbnTestServer: {
+      ...commonConfig.get('kbnTestServer'),
+      serverArgs: [
+        ...commonConfig.get('kbnTestServer.serverArgs'),
+        `--externalUrl.policy=${JSON.stringify([
+          {
+            allow: false,
+            host: 'danger.example.com',
+          },
+          {
+            allow: true,
+            host: 'example.com',
+          },
+        ])}`,
+      ],
+    },
+  };
+}

test/functional/apps/dashboard_elements/links/index.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ loadTestFile, getService, getPageObjects }: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
+  const security = getService('security');
+
+  const { dashboard } = getPageObjects(['dashboardControls', 'dashboard']);
+
+  async function setup() {
+    await esArchiver.loadIfNeeded('test/functional/fixtures/es_archiver/dashboard/current/data');
+    await kibanaServer.savedObjects.cleanStandardList();
+    await kibanaServer.importExport.load(
+      'test/functional/fixtures/kbn_archiver/dashboard/current/kibana'
+    );
+    await security.testUser.setRoles(['kibana_admin', 'test_logstash_reader', 'animals']);
+    await kibanaServer.uiSettings.replace({
+      defaultIndex: '0bf35f60-3dc9-11e8-8660-4d65aa086b3c',
+    });
+
+    await dashboard.navigateToApp();
+    await dashboard.preserveCrossAppState();
+  }
+
+  async function teardown() {
+    await esArchiver.unload('test/functional/fixtures/es_archiver/dashboard/current/data');
+    await security.testUser.restoreDefaults();
+    await kibanaServer.savedObjects.cleanStandardList();
+  }
+
+  describe('links panel', function () {
+    before(setup);
+    after(teardown);
+    loadTestFile(require.resolve('./links_create_edit'));
+    loadTestFile(require.resolve('./links_navigation'));
+  });
+}