[Dashboard][Content Editor] Edit title, description, and tags from dashboard listing page

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.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,9 @@ 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 { i18n } from '@kbn/i18n';
+import { DashboardContainerInput } from '../../../common';
 import { DashboardListingEmptyPrompt } from '../dashboard_listing_empty_prompt';
 import { pluginServices } from '../../services/plugin_services';
 import {
@@ -81,8 +84,13 @@ export const useDashboardListingTable = ({
   const {
     dashboardSessionStorage,
     dashboardCapabilities: { showWriteControls },
-    dashboardContentManagement: { findDashboards, deleteDashboards },
     settings: { uiSettings },
+    dashboardContentManagement: {
+      findDashboards,
+      deleteDashboards,
+      updateDashboardMeta,
+      checkForDuplicateDashboardTitle,
+    },
     notifications: { toasts },
   } = pluginServices.getServices();
 
@@ -110,6 +118,56 @@ 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(
+                    i18n.translate('dashboard.dashboardListingEditErrorTitle.duplicateWarning', {
+                      defaultMessage: 'Saving "{value}" creates a duplicate title',
+                      values: {
+                        value,
+                      },
+                    })
+                  );
+                }
+              } catch (e) {
+                return e.message;
+              }
+            }
+          },
+        },
+      ],
+    }),
+    [checkForDuplicateDashboardTitle, findDashboards]
+  );
+
   const emptyPrompt = useMemo(
     () => (
       <DashboardListingEmptyPrompt
@@ -219,6 +277,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 +301,7 @@ export const useDashboardListingTable = ({
       urlStateEnabled,
     }),
     [
+      contentEditorValidators,
       createItem,
       dashboardListingId,
       deleteItems,
@@ -254,6 +318,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>;
 }
 
 /**