[Dashboard Navigation] Fix reference extract method (#171360)

Closes https://github.com/elastic/kibana/issues/164212
Closes https://github.com/elastic/kibana/issues/171328

## Summary

In `extractReferences`, the links in the `links` array attribute is [not
extensible](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible)
- this means that we cannot add or delete properties from each
individual link directly. Instead, I've had to create a clone of each
dashboard link via the spread operator so that we aren't modifying the
original link directly.

**How to Test**
1. Create a by-value Links panel
2. Refresh the dashboard
3. Save the Links panel to the library via the panel action
4. The panel should be saved successfully **and** the panel title should
be updated.

[**Flaky Test
Runner**](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/4024)


![image](b8949d44-697d-414a-9e98-14b0a6f67b31)

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/links/common/persistable_state/references.ts

@@ -7,6 +7,7 @@
  */
 
 import { Reference } from '@kbn/content-management-utils';
+import { omit } from 'lodash';
 import { DASHBOARD_LINK_TYPE, LinksAttributes } from '../content_management';
 
 export function extractReferences({
@@ -22,23 +23,24 @@ export function extractReferences({
 
   const { links } = attributes;
   const extractedReferences: Reference[] = [];
-  links.forEach((link) => {
+
+  const newLinks = links.map((link) => {
     if (link.type === DASHBOARD_LINK_TYPE && link.destination) {
       const refName = `link_${link.id}_dashboard`;
-      link.destinationRefName = refName;
       extractedReferences.push({
         name: refName,
         type: 'dashboard',
         id: link.destination,
       });
-      delete link.destination;
+      return { ...omit(link, 'destination'), destinationRefName: refName };
     }
+    return link;
   });
 
   return {
     attributes: {
       ...attributes,
-      links,
+      links: newLinks,
     },
     references: references.concat(extractedReferences),
   };

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

@@ -78,18 +78,33 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await dashboard.clickDiscardChanges();
       });
 
-      it('can create a new by-value links panel', async () => {
-        await dashboardAddPanel.clickEditorMenuButton();
-        await dashboardAddPanel.clickAddNewEmbeddableLink('links');
-        await dashboardLinks.setLayout('horizontal');
-        await createSomeLinks();
-        await dashboardLinks.toggleSaveByReference(false);
-        await dashboardLinks.clickPanelEditorSaveButton();
-        await testSubjects.exists('addObjectToDashboardSuccess');
+      describe('by-value links panel', async () => {
+        it('can create a new by-value links panel', async () => {
+          await dashboardAddPanel.clickEditorMenuButton();
+          await dashboardAddPanel.clickAddNewEmbeddableLink('links');
+          await dashboardLinks.setLayout('horizontal');
+          await createSomeLinks();
+          await dashboardLinks.toggleSaveByReference(false);
+          await dashboardLinks.clickPanelEditorSaveButton();
+          await testSubjects.exists('addObjectToDashboardSuccess');
 
-        expect(await testSubjects.existOrFail('links--component'));
-        expect(await dashboardLinks.getNumberOfLinksInPanel()).to.equal(4);
-        await dashboard.clickDiscardChanges();
+          expect(await testSubjects.existOrFail('links--component'));
+          expect(await dashboardLinks.getNumberOfLinksInPanel()).to.equal(4);
+        });
+
+        it('can save by-value links panel to the library', async () => {
+          /** Navigate away to test non-extensible input */
+          await dashboard.gotoDashboardLandingPage();
+          await dashboard.clickUnsavedChangesContinueEditing(DASHBOARD_NAME);
+
+          await dashboard.waitForRenderComplete();
+          await dashboardPanelActions.saveToLibrary('Some more links');
+          await testSubjects.existOrFail('addPanelToLibrarySuccess');
+        });
+
+        after(async () => {
+          await dashboard.clickDiscardChanges();
+        });
       });
     });