[Visualize] Fix embeddable panel title behavior (elastic#200548)

## Summary

This PR adds a fix for a regression bug introduced with the new
embeddable refactor in 8.16 .
I've added an extra 8.16 FTR test to ensure it works.

### 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

(cherry picked from commit 5102b50)

src/plugins/visualizations/public/embeddable/state.ts

@@ -112,6 +112,9 @@ export const deserializeSavedObjectState = async ({
   enhancements,
   uiState,
   timeRange,
+  title: embeddableTitle,
+  description: embeddableDescription,
+  hidePanelTitles,
 }: VisualizeSavedObjectInputState) => {
   // Load a saved visualization from the library
   const {
@@ -137,6 +140,8 @@ export const deserializeSavedObjectState = async ({
     },
     savedObjectId
   );
+  const panelTitle = embeddableTitle ?? title;
+  const panelDescription = embeddableDescription ?? description;
   return {
     savedVis: {
       title,
@@ -149,8 +154,9 @@ export const deserializeSavedObjectState = async ({
         savedSearchId,
       },
     },
-    title,
-    description,
+    title: panelTitle,
+    description: panelDescription,
+    hidePanelTitles,
     savedObjectId,
     savedObjectProperties,
     linkedToLibrary: true,
@@ -188,6 +194,7 @@ export const serializeState: (props: {
   if (linkedToLibrary) {
     return {
       rawState: {
+        ...titlesWithDefaults,
         savedObjectId: id,
         ...(enhancements ? { enhancements } : {}),
         ...(!isEmpty(serializedVis.uiState) ? { uiState: serializedVis.uiState } : {}),

test/functional/apps/visualize/group3/_add_to_dashboard.ts

@@ -13,6 +13,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context';
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const dashboardExpect = getService('dashboardExpect');
   const dashboardPanelActions = getService('dashboardPanelActions');
+  const dashboardCustomizePanel = getService('dashboardCustomizePanel');
   const testSubjects = getService('testSubjects');
   const listingTable = getService('listingTable');
 
@@ -287,5 +288,24 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       await dashboardPanelActions.expectLinkedToLibrary('Neat Saved Vis 2 Copy');
     });
+
+    it('should persist correctly panel title on a by reference visualization', async () => {
+      await dashboard.navigateToApp();
+
+      await dashboard.clickNewDashboard();
+      await dashboard.addVisualizations(['Visualization AreaChart']);
+
+      await dashboardPanelActions.customizePanel();
+      await dashboardCustomizePanel.setCustomPanelTitle('My New panel title');
+      await dashboardCustomizePanel.clickSaveButton();
+
+      await dashboard.saveDashboard('My Very Entitled Dashboard');
+
+      await dashboard.gotoDashboardLandingPage();
+      await listingTable.clickItemLink('dashboard', 'My Very Entitled Dashboard');
+
+      const [newPanelTitle] = await dashboard.getPanelTitles();
+      expect(newPanelTitle).to.equal('My New panel title');
+    });
   });
 }