Add read-only dashboard UI

Author: kowalczyk-krzysztof

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

@@ -38,6 +38,7 @@ const getI18nTexts = ({ entityName }: { entityName: string }) => ({
       entityName,
     },
   }),
+  // TODO: Remove and replace with normal X button in header
   cancelButtonLabel: i18n.translate('contentManagement.contentEditor.cancelButtonLabel', {
     defaultMessage: 'Cancel',
   }),
@@ -159,6 +160,12 @@ export const ContentEditorFlyoutContent: FC<Props> = ({
           form={{ ...form, isSubmitted }}
           isReadonly={isReadonly}
           readonlyReason={
+            /*
+              TODO: Replace this with a warning callout:
+              managed: You don’t have permissions to edit this dashboard. Contact your admin to change your role.
+              role no-edit: You don’t have permissions to edit this dashboard. Contact your admin to change your role.
+              Readonly: You don’t have permissions to edit this dashboard. Contact [Creator name] to change it.
+            */
             readonlyReason ||
             i18n.translate('contentManagement.contentEditor.metadataForm.readOnlyToolTip', {
               defaultMessage: 'To edit these details, contact your administrator for access.',

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

@@ -62,6 +62,7 @@ export const MetadataForm: FC<React.PropsWithChildren<Props>> = ({
     <EuiForm isInvalid={isSubmitted && !isValid} error={getErrors()} data-test-subj="metadataForm">
       <ContentEditorFlyoutWarningsCallOut warningMessages={getWarnings()} />
       {isReadonly && <EuiCallOut size="s" title={readonlyReason} iconType="info" />}
+      {/* TODO: Remove this icon */}
       <EuiFormRow
         label={i18n.translate('contentManagement.contentEditor.metadataForm.nameInputLabel', {
           defaultMessage: 'Name',

src/platform/packages/shared/shared-ux/modal/tabbed/src/tabbed_modal.tsx

@@ -17,6 +17,7 @@ import React, {
   type ComponentProps,
   type FC,
   type ReactElement,
+  type ReactNode,
 } from 'react';
 import {
   EuiButton,
@@ -65,6 +66,7 @@ export interface ITabbedModalInner extends Pick<ComponentProps<typeof EuiModal>,
   modalWidth?: number;
   modalTitle?: string;
   anchorElement?: HTMLElement;
+  aboveTabsContent?: ReactNode;
   'data-test-subj'?: string;
 }
 
@@ -73,6 +75,7 @@ const TabbedModalInner: FC<ITabbedModalInner> = ({
   modalTitle,
   modalWidth,
   anchorElement,
+  aboveTabsContent: AboveTabsContent,
   ...props
 }) => {
   const { tabs, state, dispatch } =
@@ -177,6 +180,7 @@ const TabbedModalInner: FC<ITabbedModalInner> = ({
         <EuiModalHeaderTitle id={tabbedModalHeadingHTMLId}>{modalTitle}</EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
+        {AboveTabsContent}
         <Fragment>
           <Fragment>{renderTabs()}</Fragment>
           <EuiSpacer size="m" />

src/platform/plugins/shared/content_management/README.md

@@ -2,14 +2,30 @@
 
 The content management plugin provides functionality to manage content in Kibana.
 
+## API Methods
+
+The Content Management plugin provides the following methods for managing content:
+
+### Core CRUD Operations
+
+- `get()` - Retrieve a single content item
+- `bulkGet()` - Retrieve multiple content items
+- `create()` - Create a new content item
+- `update()` - Update an existing content item
+- `delete()` - Delete a content item
+- `search()` - Search for content items
+- `mSearch()` - Multi-type search across content
+
+### Access Control
+
+- `changeAccessMode()` - Change the access mode for content items
 
 ## Testing
 
 Many parts of the Content Management service are implemented *in-memory*, hence it
 is possible to test big chunks of the Content Management plugin using Jest
 tests.
 
-
 ### Elasticsearch Integration tests
 
 Some functionality of the Content Management plugin can be tested using *Kibana

src/platform/plugins/shared/content_management/common/index.ts

@@ -29,4 +29,6 @@ export type {
   MSearchQuery,
   MSearchResult,
   MSearchOut,
+  ChangeAccessModeIn,
+  ChangeAccessModeResult,
 } from './rpc';

src/platform/plugins/shared/content_management/common/rpc/change_access_mode.ts

@@ -0,0 +1,83 @@
+/*
+ * 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 { schema } from '@kbn/config-schema';
+import type { Version } from '@kbn/object-versioning';
+import type { ProcedureSchemas } from './types';
+import { versionSchema } from './constants';
+
+export const changeAccessModeSchemas: ProcedureSchemas = {
+  in: schema.object(
+    {
+      version: schema.maybe(versionSchema),
+      objects: schema.arrayOf(
+        schema.object(
+          {
+            contentTypeId: schema.string(),
+            id: schema.string(),
+          },
+          { unknowns: 'forbid' }
+        ),
+        { minSize: 1 }
+      ),
+      options: schema.object(
+        {
+          accessMode: schema.oneOf([schema.literal('read_only'), schema.literal('default')]),
+        },
+        { unknowns: 'forbid' }
+      ),
+    },
+    { unknowns: 'forbid' }
+  ),
+  out: schema.maybe(
+    schema.object({
+      objects: schema.arrayOf(
+        schema.object({
+          id: schema.string(),
+          type: schema.string(),
+          error: schema.maybe(
+            schema.object({
+              error: schema.string(),
+              message: schema.string(),
+              statusCode: schema.number(),
+              metadata: schema.maybe(schema.recordOf(schema.string(), schema.any())),
+            })
+          ),
+        })
+      ),
+    })
+  ),
+};
+
+export interface ChangeAccessModeIn {
+  version?: Version;
+  objects: Array<{
+    contentTypeId: string;
+    id: string;
+  }>;
+  options: {
+    accessMode: AccessMode;
+  };
+}
+
+export interface ChangeAccessModeResult {
+  objects: Array<
+    {
+      type: string;
+      id: string;
+    } & { error?: { error: string; message: string; statusCode: number } }
+  >;
+}
+
+export type AccessMode = 'default' | 'read_only';
+
+export interface AccessControl {
+  owner?: string;
+  accessMode?: AccessMode;
+}

src/platform/plugins/shared/content_management/common/rpc/constants.ts

@@ -18,6 +18,7 @@ export const procedureNames = [
   'delete',
   'search',
   'mSearch',
+  'changeAccessMode',
 ] as const;
 
 export type ProcedureName = (typeof procedureNames)[number];

src/platform/plugins/shared/content_management/common/rpc/index.ts

@@ -19,3 +19,4 @@ export type { SearchIn, SearchQuery, SearchResult } from './search';
 export type { MSearchIn, MSearchQuery, MSearchOut, MSearchResult } from './msearch';
 export type { ProcedureSchemas } from './types';
 export type { ProcedureName } from './constants';
+export type { ChangeAccessModeIn, ChangeAccessModeResult } from './change_access_mode';

src/platform/plugins/shared/content_management/common/rpc/rpc.ts

@@ -16,6 +16,7 @@ import { updateSchemas } from './update';
 import { deleteSchemas } from './delete';
 import { searchSchemas } from './search';
 import { mSearchSchemas } from './msearch';
+import { changeAccessModeSchemas } from './change_access_mode';
 
 export const schemas = {
   get: getSchemas,
@@ -25,6 +26,7 @@ export const schemas = {
   delete: deleteSchemas,
   search: searchSchemas,
   mSearch: mSearchSchemas,
+  changeAccessMode: changeAccessModeSchemas,
 } satisfies {
   [key in ProcedureName]: ProcedureSchemas;
 };

src/platform/plugins/shared/content_management/public/content_client/content_client.test.ts

@@ -11,7 +11,15 @@ import { lastValueFrom } from 'rxjs';
 import { takeWhile, toArray } from 'rxjs';
 import { createCrudClientMock } from '../crud_client/crud_client.mock';
 import { ContentClient } from './content_client';
-import type { GetIn, CreateIn, UpdateIn, DeleteIn, SearchIn, MSearchIn } from '../../common';
+import type {
+  GetIn,
+  CreateIn,
+  UpdateIn,
+  DeleteIn,
+  SearchIn,
+  MSearchIn,
+  ChangeAccessModeIn,
+} from '../../common';
 import { ContentTypeRegistry } from '../registry';
 
 const setup = () => {
@@ -198,3 +206,18 @@ describe('#mSearch', () => {
     });
   });
 });
+
+describe('#changeAccessMode', () => {
+  it('calls rpcClient.changeAccessMode with input and returns output', async () => {
+    const { crudClient, contentClient } = setup();
+    const input: ChangeAccessModeIn = {
+      objects: [{ contentTypeId: 'testType', id: 'test-id' }],
+      options: { accessMode: 'read_only' },
+    };
+    const output = { objects: [{ type: 'testType', id: 'test-id' }] };
+    // @ts-ignore
+    crudClient.changeAccessMode.mockResolvedValueOnce(output);
+    expect(await contentClient.changeAccessMode(input)).toEqual(output);
+    expect(crudClient.changeAccessMode).toBeCalledWith(input);
+  });
+});