[Dashboard][Content Editor] Edit title, description, and tags from dashboard listing page (#161399)

## Summary

Closes #144481.
Closes #160256.

This enables content editor in dashboard to allow users to edit the
title, description, and tags from the listing page.


c2212882-43e3-45cb-83fc-493860857019

The only validation added to this flyout is the duplicate title check. I
used the same warning message as the visualize listing page.

<img width="600" alt="Screenshot 2023-07-06 at 2 11 38 PM"
src="42f7244a-1c4d-47ec-8f66-a98a63eff473">

### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [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
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### Risk Matrix

Delete this section if it is not applicable to this PR.

Before closing this PR, invite QA, stakeholders, and other developers to
identify risks that should be tested prior to the change/feature
release.

When forming the risk matrix, consider some of the following examples
and how they may potentially impact the change:

| Risk | Probability | Severity | Mitigation/Notes |

|---------------------------|-------------|----------|-------------------------|
| Multiple Spaces&mdash;unexpected behavior in non-default Kibana Space.
| Low | High | Integration tests will verify that all features are still
supported in non-default Kibana Space and when user switches between
spaces. |
| Multiple nodes&mdash;Elasticsearch polling might have race conditions
when multiple Kibana nodes are polling for the same tasks. | High | Low
| Tasks are idempotent, so executing them multiple times will not result
in logical error, but will degrade performance. To test for this case we
add plenty of unit tests around this logic and document manual testing
procedure. |
| Code should gracefully handle cases when feature X or plugin Y are
disabled. | Medium | High | Unit tests will verify that any feature flag
or plugin combination still results in our service operational. |
| [See more potential risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) |


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

packages/content-management/content_editor/src/components/editor_flyout_content.tsx

@@ -126,7 +126,7 @@ export const ContentEditorFlyoutContent: FC<Props> = ({
       <EuiFlyoutHeader>
         <EuiTitle data-test-subj="flyoutTitle">
           <h2>
-            <EuiIcon type="inspect" css={iconCSS} size="l" />
+            <EuiIcon type="iInCircle" css={iconCSS} size="l" />
             <span>{title}</span>
           </h2>
         </EuiTitle>

packages/content-management/content_editor/src/components/metadata_form.tsx

@@ -9,7 +9,14 @@
 import React from 'react';
 import type { FC } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiForm, EuiFormRow, EuiFieldText, EuiTextArea, EuiSpacer } from '@elastic/eui';
+import {
+  EuiForm,
+  EuiFormRow,
+  EuiFieldText,
+  EuiTextArea,
+  EuiSpacer,
+  EuiToolTip,
+} from '@elastic/eui';
 
 import { ContentEditorFlyoutWarningsCallOut } from './editor_flyout_warnings';
 import type { MetadataFormState, Field } from './use_metadata_form';
@@ -47,6 +54,11 @@ export const MetadataForm: FC<Props> = ({
     getWarnings,
   } = form;
 
+  const readOnlyToolTip = i18n.translate(
+    'contentManagement.contentEditor.metadataForm.readOnlyToolTip',
+    { defaultMessage: 'To edit these details, contact your administrator for access.' }
+  );
+
   return (
     <EuiForm isInvalid={isSubmitted && !isValid} error={getErrors()} data-test-subj="metadataForm">
       <ContentEditorFlyoutWarningsCallOut warningMessages={getWarnings()} />
@@ -59,16 +71,22 @@ export const MetadataForm: FC<Props> = ({
         isInvalid={!isFormFieldValid(title)}
         fullWidth
       >
-        <EuiFieldText
-          isInvalid={!isFormFieldValid(title)}
-          value={title.value}
-          onChange={(e) => {
-            setTitle(e.target.value);
-          }}
-          fullWidth
-          data-test-subj="nameInput"
-          readOnly={isReadonly}
-        />
+        <EuiToolTip
+          position="top"
+          content={isReadonly ? readOnlyToolTip : undefined}
+          display="block"
+        >
+          <EuiFieldText
+            isInvalid={!isFormFieldValid(title)}
+            value={title.value}
+            onChange={(e) => {
+              setTitle(e.target.value);
+            }}
+            fullWidth
+            data-test-subj="nameInput"
+            readOnly={isReadonly}
+          />
+        </EuiToolTip>
       </EuiFormRow>
 
       <EuiSpacer />
@@ -84,19 +102,25 @@ export const MetadataForm: FC<Props> = ({
         isInvalid={!isFormFieldValid(description)}
         fullWidth
       >
-        <EuiTextArea
-          isInvalid={!isFormFieldValid(description)}
-          value={description.value}
-          onChange={(e) => {
-            setDescription(e.target.value);
-          }}
-          fullWidth
-          data-test-subj="descriptionInput"
-          readOnly={isReadonly}
-        />
+        <EuiToolTip
+          position="top"
+          content={isReadonly ? readOnlyToolTip : undefined}
+          display="block"
+        >
+          <EuiTextArea
+            isInvalid={!isFormFieldValid(description)}
+            value={description.value}
+            onChange={(e) => {
+              setDescription(e.target.value);
+            }}
+            fullWidth
+            data-test-subj="descriptionInput"
+            readOnly={isReadonly}
+          />
+        </EuiToolTip>
       </EuiFormRow>
 
-      {TagList && isReadonly && (
+      {TagList && isReadonly && tagsReferences.length > 0 && (
         <>
           <EuiSpacer />
           <EuiFormRow

packages/content-management/table_list_view_table/src/table_list_view_table.tsx

@@ -553,6 +553,7 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
           available: (v) => (showEditActionForItem ? showEditActionForItem(v) : true),
           enabled: (v) => !(v as unknown as { error: string })?.error,
           onClick: editItem,
+          'data-test-subj': `edit-action`,
         });
       }
 
@@ -575,9 +576,10 @@ function TableListViewTableComp<T extends UserContentCommonSchema>({
               defaultMessage: 'View details',
             }
           ),
-          icon: 'inspect',
+          icon: 'iInCircle',
           type: 'icon',
           onClick: inspectItem,
+          'data-test-subj': `inspect-action`,
         });
       }
 

packages/kbn-content-management-utils/src/types.ts

@@ -347,7 +347,7 @@ export interface ContentManagementCrudTypes<
   /**
    * Update item params
    */
-  UpdateIn: UpdateIn<ContentType, Attributes, UpdateOptions>;
+  UpdateIn: UpdateIn<ContentType, Partial<Attributes>, UpdateOptions>;
   /**
    * Update item result
    */

src/plugins/dashboard/public/dashboard_app/top_nav/dashboard_editing_toolbar.tsx

@@ -110,7 +110,7 @@ export function DashboardEditingToolbar() {
     <AddFromLibraryButton
       onClick={() => dashboard.addFromLibrary()}
       size="s"
-      data-test-subj="dashboardAddPanelButton"
+      data-test-subj="dashboardAddFromLibraryButton"
     />,
   ];
   if (dashboard.controlGroup) {

src/plugins/dashboard/public/dashboard_listing/_dashboard_listing_strings.ts

@@ -14,6 +14,13 @@ export const dashboardListingErrorStrings = {
     i18n.translate('dashboard.deleteError.toastDescription', {
       defaultMessage: 'Error encountered while deleting dashboard',
     }),
+  getDuplicateTitleWarning: (value: string) =>
+    i18n.translate('dashboard.dashboardListingEditErrorTitle.duplicateWarning', {
+      defaultMessage: 'Saving "{value}" creates a duplicate title',
+      values: {
+        value,
+      },
+    }),
 };
 
 export const getNewDashboardTitle = () =>

src/plugins/dashboard/public/dashboard_listing/dashboard_listing.tsx

@@ -9,11 +9,11 @@
 import { FormattedRelative, I18nProvider } from '@kbn/i18n-react';
 import React, { useMemo } from 'react';
 
+import { TableListView } from '@kbn/content-management-table-list-view';
 import {
   type TableListViewKibanaDependencies,
   TableListViewKibanaProvider,
 } from '@kbn/content-management-table-list-view-table';
-import { TableListView } from '@kbn/content-management-table-list-view';
 
 import { toMountPoint, useExecutionContext } from '@kbn/kibana-react-plugin/public';
 
@@ -41,7 +41,6 @@ export const DashboardListing = ({
     http,
     chrome: { theme },
     savedObjectsTagging,
-
     coreContext: { executionContext },
   } = pluginServices.getServices();
 

src/plugins/dashboard/public/dashboard_listing/hooks/use_dashboard_listing_table.test.tsx

@@ -136,6 +136,11 @@ describe('useDashboardListingTable', () => {
       setPageDataTestSubject: expect.any(Function),
       title: 'Dashboard List',
       urlStateEnabled: false,
+      contentEditor: {
+        onSave: expect.any(Function),
+        isReadonly: false,
+        customValidators: expect.any(Object),
+      },
     };
 
     expect(tableListViewTableProps).toEqual(expectedProps);

src/plugins/dashboard/public/dashboard_listing/hooks/use_dashboard_listing_table.tsx

@@ -12,6 +12,8 @@ import { reportPerformanceMetricEvent } from '@kbn/ebt-tools';
 import { TableListViewTableProps } from '@kbn/content-management-table-list-view-table';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 
+import { OpenContentEditorParams } from '@kbn/content-management-content-editor';
+import { DashboardContainerInput } from '../../../common';
 import { DashboardListingEmptyPrompt } from '../dashboard_listing_empty_prompt';
 import { pluginServices } from '../../services/plugin_services';
 import {
@@ -81,8 +83,13 @@ export const useDashboardListingTable = ({
   const {
     dashboardSessionStorage,
     dashboardCapabilities: { showWriteControls },
-    dashboardContentManagement: { findDashboards, deleteDashboards },
     settings: { uiSettings },
+    dashboardContentManagement: {
+      findDashboards,
+      deleteDashboards,
+      updateDashboardMeta,
+      checkForDuplicateDashboardTitle,
+    },
     notifications: { toasts },
   } = pluginServices.getServices();
 
@@ -110,6 +117,49 @@ export const useDashboardListingTable = ({
     goToDashboard();
   }, [dashboardSessionStorage, goToDashboard, useSessionStorageIntegration]);
 
+  const updateItemMeta = useCallback(
+    async (props: Pick<DashboardContainerInput, 'id' | 'title' | 'description' | 'tags'>) => {
+      await updateDashboardMeta(props);
+
+      setUnsavedDashboardIds(dashboardSessionStorage.getDashboardIdsWithUnsavedChanges());
+    },
+    [dashboardSessionStorage, updateDashboardMeta]
+  );
+
+  const contentEditorValidators: OpenContentEditorParams['customValidators'] = useMemo(
+    () => ({
+      title: [
+        {
+          type: 'warning',
+          fn: async (value: string, id: string) => {
+            if (id) {
+              try {
+                const [dashboard] = await findDashboards.findByIds([id]);
+                if (dashboard.status === 'error') {
+                  return;
+                }
+
+                const validTitle = await checkForDuplicateDashboardTitle({
+                  title: value,
+                  copyOnSave: false,
+                  lastSavedTitle: dashboard.attributes.title,
+                  isTitleDuplicateConfirmed: false,
+                });
+
+                if (!validTitle) {
+                  throw new Error(dashboardListingErrorStrings.getDuplicateTitleWarning(value));
+                }
+              } catch (e) {
+                return e.message;
+              }
+            }
+          },
+        },
+      ],
+    }),
+    [checkForDuplicateDashboardTitle, findDashboards]
+  );
+
   const emptyPrompt = useMemo(
     () => (
       <DashboardListingEmptyPrompt
@@ -219,6 +269,11 @@ export const useDashboardListingTable = ({
 
   const tableListViewTableProps = useMemo(
     () => ({
+      contentEditor: {
+        isReadonly: !showWriteControls,
+        onSave: updateItemMeta,
+        customValidators: contentEditorValidators,
+      },
       createItem: !showWriteControls ? undefined : createItem,
       deleteItems: !showWriteControls ? undefined : deleteItems,
       editItem: !showWriteControls ? undefined : editItem,
@@ -238,6 +293,7 @@ export const useDashboardListingTable = ({
       urlStateEnabled,
     }),
     [
+      contentEditorValidators,
       createItem,
       dashboardListingId,
       deleteItems,
@@ -254,6 +310,7 @@ export const useDashboardListingTable = ({
       onFetchSuccess,
       showWriteControls,
       title,
+      updateItemMeta,
       urlStateEnabled,
     ]
   );

src/plugins/dashboard/public/services/dashboard_content_management/dashboard_content_management.stub.ts

@@ -73,5 +73,6 @@ export const dashboardContentManagementServiceFactory: DashboardContentManagemen
       },
       deleteDashboards: jest.fn(),
       checkForDuplicateDashboardTitle: jest.fn(),
+      updateDashboardMeta: jest.fn(),
     };
   };

src/plugins/dashboard/public/services/dashboard_content_management/dashboard_content_management_service.ts

@@ -23,6 +23,7 @@ import type {
 } from './types';
 import { loadDashboardState } from './lib/load_dashboard_state';
 import { deleteDashboards } from './lib/delete_dashboards';
+import { updateDashboardMeta } from './lib/update_dashboard_meta';
 
 export type DashboardContentManagementServiceFactory = KibanaPluginServiceFactory<
   DashboardContentManagementService,
@@ -79,5 +80,7 @@ export const dashboardContentManagementServiceFactory: DashboardContentManagemen
     checkForDuplicateDashboardTitle: (props) =>
       checkForDuplicateDashboardTitle(props, contentManagement),
     deleteDashboards: (ids) => deleteDashboards(ids, contentManagement),
+    updateDashboardMeta: (props) =>
+      updateDashboardMeta(props, { contentManagement, savedObjectsTagging, embeddable }),
   };
 };

src/plugins/dashboard/public/services/dashboard_content_management/lib/find_dashboards.ts

@@ -8,6 +8,7 @@
 
 import { SavedObjectError, SavedObjectsFindOptionsReference } from '@kbn/core/public';
 
+import { Reference } from '@kbn/content-management-utils';
 import {
   DashboardItem,
   DashboardCrudTypes,
@@ -60,7 +61,7 @@ export async function searchDashboards({
 }
 
 export type FindDashboardsByIdResponse = { id: string } & (
-  | { status: 'success'; attributes: DashboardAttributes }
+  | { status: 'success'; attributes: DashboardAttributes; references: Reference[] }
   | { status: 'error'; error: SavedObjectError }
 );
 
@@ -78,8 +79,8 @@ export async function findDashboardsByIds(
 
   return results.map((result) => {
     if (result.item.error) return { status: 'error', error: result.item.error, id: result.item.id };
-    const { attributes, id } = result.item;
-    return { id, status: 'success', attributes };
+    const { attributes, id, references } = result.item;
+    return { id, status: 'success', attributes, references };
   });
 }
 

src/plugins/dashboard/public/services/dashboard_content_management/lib/update_dashboard_meta.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 { DashboardContainerInput } from '../../../../common';
+import { DashboardStartDependencies } from '../../../plugin';
+import { DASHBOARD_CONTENT_ID } from '../../../dashboard_constants';
+import { DashboardCrudTypes } from '../../../../common/content_management';
+import { findDashboardsByIds } from './find_dashboards';
+import { DashboardContentManagementRequiredServices } from '../types';
+
+type UpdateDashboardMetaProps = Pick<
+  DashboardContainerInput,
+  'id' | 'title' | 'description' | 'tags'
+>;
+interface UpdateDashboardMetaDependencies {
+  contentManagement: DashboardStartDependencies['contentManagement'];
+  savedObjectsTagging: DashboardContentManagementRequiredServices['savedObjectsTagging'];
+  embeddable: DashboardContentManagementRequiredServices['embeddable'];
+}
+
+export const updateDashboardMeta = async (
+  { id, title, description = '', tags }: UpdateDashboardMetaProps,
+  { contentManagement, savedObjectsTagging, embeddable }: UpdateDashboardMetaDependencies
+) => {
+  const [dashboard] = await findDashboardsByIds(contentManagement, [id]);
+  if (dashboard.status === 'error') {
+    return;
+  }
+
+  const references =
+    savedObjectsTagging.updateTagsReferences && tags.length
+      ? savedObjectsTagging.updateTagsReferences(dashboard.references, tags)
+      : dashboard.references;
+
+  await contentManagement.client.update<
+    DashboardCrudTypes['UpdateIn'],
+    DashboardCrudTypes['UpdateOut']
+  >({
+    contentTypeId: DASHBOARD_CONTENT_ID,
+    id,
+    data: { title, description },
+    options: { references },
+  });
+};

src/plugins/dashboard/public/services/dashboard_content_management/types.ts

@@ -43,6 +43,9 @@ export interface DashboardContentManagementService {
   loadDashboardState: (props: { id?: string }) => Promise<LoadDashboardReturn>;
   saveDashboardState: (props: SaveDashboardProps) => Promise<SaveDashboardReturn>;
   checkForDuplicateDashboardTitle: (meta: DashboardDuplicateTitleCheckProps) => Promise<boolean>;
+  updateDashboardMeta: (
+    props: Pick<DashboardContainerInput, 'id' | 'title' | 'description' | 'tags'>
+  ) => Promise<void>;
 }
 
 /**

src/plugins/dashboard/tsconfig.json

@@ -62,7 +62,8 @@
     "@kbn/core-saved-objects-api-server",
     "@kbn/content-management-table-list-view",
     "@kbn/content-management-table-list-view-table",
-    "@kbn/shared-ux-prompt-not-found"
+    "@kbn/shared-ux-prompt-not-found",
+    "@kbn/content-management-content-editor"
   ],
   "exclude": ["target/**/*"]
 }

test/functional/apps/dashboard/group4/dashboard_listing.ts

@@ -14,6 +14,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['dashboard', 'header', 'common']);
   const browser = getService('browser');
   const listingTable = getService('listingTable');
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const dashboardAddPanel = getService('dashboardAddPanel');
 
   describe('dashboard listing page', function describeIndexTests() {
     const dashboardName = 'Dashboard Listing Test';
@@ -46,6 +49,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
         const promptExists = await PageObjects.dashboard.getCreateDashboardPromptExists();
         expect(promptExists).to.be(false);
+        await listingTable.clearSearchFilter();
       });
     });
 
@@ -200,5 +204,36 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         expect(onDashboardLandingPage).to.equal(false);
       });
     });
+
+    describe('edit meta data', () => {
+      it('saves changes to dashboard metadata', async () => {
+        await PageObjects.dashboard.gotoDashboardLandingPage();
+        await PageObjects.dashboard.clickCreateDashboardPrompt();
+        await dashboardAddPanel.clickOpenAddPanel();
+        await dashboardAddPanel.addEveryEmbeddableOnCurrentPage();
+        await dashboardAddPanel.ensureAddPanelIsClosed();
+        await PageObjects.dashboard.saveDashboard(`${dashboardName}-editMetaData`);
+        const originalPanelCount = await PageObjects.dashboard.getPanelCount();
+
+        await PageObjects.dashboard.gotoDashboardLandingPage();
+        await listingTable.searchForItemWithName(`${dashboardName}-editMetaData`);
+        await testSubjects.click('inspect-action');
+        await testSubjects.setValue('nameInput', 'new title');
+        await testSubjects.setValue('descriptionInput', 'new description');
+        await retry.try(async () => {
+          await testSubjects.click('saveButton');
+          await testSubjects.missingOrFail('flyoutTitle');
+        });
+
+        await listingTable.searchAndExpectItemsCount('dashboard', 'new title', 1);
+        await listingTable.setSearchFilterValue('new description');
+        await listingTable.expectItemsCount('dashboard', 1);
+        await listingTable.clickItemLink('dashboard', 'new title');
+        await PageObjects.dashboard.waitForRenderComplete();
+
+        const newPanelCount = await PageObjects.dashboard.getPanelCount();
+        expect(newPanelCount).to.equal(originalPanelCount);
+      });
+    });
   });
 }

test/functional/services/dashboard/add_panel.ts

@@ -19,7 +19,7 @@ export class DashboardAddPanelService extends FtrService {
 
   async clickOpenAddPanel() {
     this.log.debug('DashboardAddPanel.clickOpenAddPanel');
-    await this.testSubjects.click('dashboardAddPanelButton');
+    await this.testSubjects.click('dashboardAddFromLibraryButton');
     // Give some time for the animation to complete
     await this.common.sleep(500);
   }
@@ -145,6 +145,20 @@ export class DashboardAddPanelService extends FtrService {
     }
   }
 
+  async ensureAddPanelIsClosed() {
+    this.log.debug('DashboardAddPanel.ensureAddPanelIsClosed');
+    const isOpen = await this.isAddPanelOpen();
+    if (isOpen) {
+      await this.retry.try(async () => {
+        await this.closeAddPanel();
+        const isNowOpen = await this.isAddPanelOpen();
+        if (isNowOpen) {
+          throw new Error('Add panel still open, trying again.');
+        }
+      });
+    }
+  }
+
   async closeAddPanel() {
     await this.flyout.ensureAllClosed();
   }

test/functional/services/listing_table.ts

@@ -38,13 +38,19 @@ export class ListingTableService extends FtrService {
     return await searchFilter.getAttribute('value');
   }
 
+  /**
+   * Set search input value on landing page
+   */
+  public async setSearchFilterValue(value: string) {
+    const searchFilter = await this.getSearchFilter();
+    searchFilter.type(value);
+  }
+
   /**
    * Clears search input on landing page
    */
   public async clearSearchFilter() {
-    const searchFilter = await this.getSearchFilter();
-    await searchFilter.clearValue();
-    await searchFilter.click();
+    this.testSubjects.click('clearSearchButton');
   }
 
   private async getAllItemsNamesOnCurrentPage(): Promise<string[]> {