[8.16] [Links] Fix link settings not persisting (#211041) (#211107)

# Backport This will backport the following commits from `main` to `8.16`: - [[Links] Fix link settings not persisting (#211041)](https://github.com/elastic/kibana/pull/211041)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
2025-04-24 17:59:23 -04:00 · 2025-02-18 10:18:50 -07:00 · 2025-02-18 10:18:50 -07:00 · 526a7b78d1
commit 526a7b78d1
parent 0488ecd532
3 changed files with 109 additions and 4 deletions
--- a/src/plugins/links/public/components/editor/link_editor.test.tsx
+++ b/src/plugins/links/public/components/editor/link_editor.test.tsx
@ -0,0 +1,105 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { LinkEditor } from './link_editor';
+
+jest.mock('./link_destination', () => {
+  // mock this component to prevent handleDestinationPicked from being called on mount
+  return { LinkDestination: () => <>LinkDestinationMock</> };
+});
+
+describe('LinksEditor', () => {
+  const nonDefaultOptions = {
+    openInNewTab: true,
+    useCurrentDateRange: false,
+    useCurrentFilters: false,
+  };
+
+  const defaultProps = {
+    link: {
+      id: 'foo',
+      type: 'dashboardLink' as const,
+      destination: '123',
+      title: 'dashboard 01',
+    },
+    parentDashboardId: 'test',
+    onSave: jest.fn(),
+    onClose: jest.fn(),
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const getOptionAriaChecked = (option: string): string | null => {
+    return screen
+      .getByTestId(`dashboardDrillDownOptions--${option}--checkbox`)
+      .getAttribute('aria-checked');
+  };
+
+  describe('dashboard link options', () => {
+    test('starts with default when options not provided', async () => {
+      render(<LinkEditor {...defaultProps} />);
+      await waitFor(() => {
+        expect(screen.queryByTestId('dashboardDrillDownOptions')).not.toBeNull(); // wait for lazy load
+      });
+
+      expect(getOptionAriaChecked('useCurrentFilters')).toBe('true');
+      expect(getOptionAriaChecked('useCurrentDateRange')).toBe('true');
+      expect(getOptionAriaChecked('openInNewTab')).toBe('false');
+    });
+
+    test('properly overrides default values when provided', async () => {
+      render(
+        <LinkEditor
+          {...defaultProps}
+          link={{
+            ...defaultProps.link,
+            options: nonDefaultOptions,
+          }}
+        />
+      );
+      await waitFor(() => {
+        expect(screen.queryByTestId('dashboardDrillDownOptions')).not.toBeNull(); // wait for lazy load
+      });
+
+      expect(getOptionAriaChecked('useCurrentFilters')).toBe('false');
+      expect(getOptionAriaChecked('useCurrentDateRange')).toBe('false');
+      expect(getOptionAriaChecked('openInNewTab')).toBe('true');
+    });
+
+    test('options are persisted on edit', async () => {
+      render(
+        <LinkEditor
+          {...defaultProps}
+          link={{
+            ...defaultProps.link,
+            options: nonDefaultOptions,
+          }}
+        />
+      );
+      await waitFor(() => {
+        expect(screen.queryByTestId('dashboardDrillDownOptions')).not.toBeNull(); // wait for lazy load
+      });
+
+      await userEvent.click(screen.getByTestId('links--linkEditor--linkLabel--input'));
+      await userEvent.keyboard('test label');
+      await userEvent.click(screen.getByTestId('links--linkEditor--saveBtn'));
+
+      expect(defaultProps.onSave).toBeCalledWith({
+        ...defaultProps.link,
+        label: 'test label',
+        options: nonDefaultOptions,
+      });
+    });
+  });
+});
--- a/src/plugins/links/public/components/editor/link_editor.tsx
+++ b/src/plugins/links/public/components/editor/link_editor.tsx
@ -54,10 +54,10 @@ export const LinkEditor = ({
  const [selectedLinkType, setSelectedLinkType] = useState<LinkType>(
    link?.type ?? DASHBOARD_LINK_TYPE
  );
-  const [defaultLinkLabel, setDefaultLinkLabel] = useState<string | undefined>();
+  const [defaultLinkLabel, setDefaultLinkLabel] = useState<string | undefined>(link?.title);
  const [currentLinkLabel, setCurrentLinkLabel] = useState<string>(link?.label ?? '');
-  const [linkDescription, setLinkDescription] = useState<string | undefined>();
-  const [linkOptions, setLinkOptions] = useState<LinkOptions | undefined>();
+  const [linkDescription, setLinkDescription] = useState<string | undefined>(link?.description);
+  const [linkOptions, setLinkOptions] = useState<LinkOptions | undefined>(link?.options);
  const [linkDestination, setLinkDestination] = useState<string | undefined>(link?.destination);

  const linkTypes: EuiRadioGroupOption[] = useMemo(() => {
--- a/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx
+++ b/src/plugins/presentation_util/public/components/dashboard_drilldown_options/dashboard_drilldown_options.tsx
@ -24,7 +24,7 @@ export const DashboardDrilldownOptionsComponent = ({
 }: DashboardDrilldownOptionsProps) => {
  return (
    <>
-      <EuiFormRow hasChildLabel={false}>
+      <EuiFormRow hasChildLabel={false} data-test-subj="dashboardDrillDownOptions">
        <EuiSwitch
          name="useCurrentFilters"
          label={dashboardDrilldownConfigStrings.component.getUseCurrentFiltersLabel()}