POC: Sharing Saved Objects developer guide steps

x-pack/plugins/notes_test/common/constants.ts

@@ -0,0 +1,9 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const NOTE_OBJ_TYPE = 'note';
+export const VIEW_NOTE_PATH = 'viewNote';

x-pack/plugins/notes_test/common/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './constants';
+export * from './types';

x-pack/plugins/notes_test/common/types.ts

@@ -0,0 +1,12 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export interface NoteAttributes {
+  subject: string;
+  text: string;
+  createdAt: Date;
+}

x-pack/plugins/notes_test/kibana.json

@@ -0,0 +1,10 @@
+{
+  "id": "notesTest",
+  "owner": { "name": "Platform Security", "githubTeam": "kibana-security" },
+  "version": "0.0.1",
+  "kibanaVersion": "kibana",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [],
+  "optionalPlugins": ["spaces"]
+}

x-pack/plugins/notes_test/public/app.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Switch, Route } from 'react-router-dom';
+
+import type { AppMountParameters, HttpStart } from 'src/core/public';
+import type { SpacesPluginStart } from '../../spaces/public';
+import { VIEW_NOTE_PATH } from '../common';
+import { NotesList } from './notes_list';
+import type { Services } from './services';
+import { ViewNote } from './view_note';
+
+interface RenderParams {
+  services: Services;
+  appMountParams: AppMountParameters;
+  http: HttpStart;
+  spacesApi?: SpacesPluginStart;
+}
+
+export const renderApp = ({ services, appMountParams, http, spacesApi }: RenderParams) => {
+  const { element, history } = appMountParams;
+
+  ReactDOM.render(
+    <Router history={history}>
+      <Switch>
+        <Route path={`/${VIEW_NOTE_PATH}/:noteId`}>
+          <ViewNote services={services} http={http} spacesApi={spacesApi} />
+        </Route>
+        <Route path="/" exact>
+          <NotesList services={services} />
+        </Route>
+      </Switch>
+    </Router>,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

x-pack/plugins/notes_test/public/create_note_form.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useState } from 'react';
+import { EuiButton, EuiFieldText, EuiForm, EuiFormRow, EuiText, EuiTextArea } from '@elastic/eui';
+
+import type { Services } from './services';
+
+interface Props {
+  services: Services;
+  onAfterCreate: () => void;
+}
+
+export function CreateNoteForm({ services, onAfterCreate }: Props) {
+  const [subject, setSubject] = useState<string>('');
+  const [text, setText] = useState<string>('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isInvalid, setIsInvalid] = useState(false);
+
+  const saveNote = useCallback(async () => {
+    if (isSaving) return;
+    setIsSaving(true);
+
+    if (!subject || !text) {
+      setIsInvalid(true);
+    } else {
+      setIsInvalid(false);
+      await services.createNote(subject, text);
+      setSubject('');
+      setText('');
+      services.addSuccessToast('Note created!');
+      onAfterCreate();
+    }
+
+    setIsSaving(false);
+  }, [subject, text, services, isSaving, onAfterCreate]);
+
+  return (
+    <>
+      <EuiForm isInvalid={isInvalid} error="Subject and body text are required">
+        <EuiFormRow>
+          <EuiText>Create a new note</EuiText>
+        </EuiFormRow>
+        <EuiFormRow>
+          <EuiFieldText
+            placeholder="Subject"
+            value={subject}
+            onChange={(event) => setSubject(event.target.value)}
+          />
+        </EuiFormRow>
+        <EuiFormRow>
+          <EuiTextArea
+            placeholder="Body text"
+            value={text}
+            onChange={(event) => setText(event.target.value)}
+          />
+        </EuiFormRow>
+        <EuiFormRow>
+          <EuiButton onClick={saveNote}>Save</EuiButton>
+        </EuiFormRow>
+      </EuiForm>
+    </>
+  );
+}

x-pack/plugins/notes_test/public/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { PluginInitializer } from 'src/core/public';
+import { NotesTestPlugin } from './plugin';
+
+export const plugin: PluginInitializer<{}, {}> = () => new NotesTestPlugin();

x-pack/plugins/notes_test/public/notes_list.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  EuiInMemoryTable,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { Link } from 'react-router-dom';
+
+import type { SimpleSavedObject } from 'src/core/public';
+import type { NoteAttributes } from '../common';
+import { VIEW_NOTE_PATH } from '../common';
+import { CreateNoteForm } from './create_note_form';
+import type { Services } from './services';
+
+interface Props {
+  services: Services;
+}
+
+type NoteObject = SimpleSavedObject<NoteAttributes>;
+
+export function NotesList({ services }: Props) {
+  const { findAllNotes } = services;
+  const [isFetching, setIsFetching] = useState<boolean>(false);
+  const [notes, setNotes] = useState<NoteObject[]>([]);
+
+  const fetchNotes = useCallback(async () => {
+    if (isFetching) return;
+    setIsFetching(true);
+
+    const response = await findAllNotes();
+    setNotes(response);
+
+    setIsFetching(false);
+  }, [isFetching, findAllNotes, setNotes]);
+
+  useEffect(() => {
+    fetchNotes();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <EuiPage>
+      <EuiPageBody>
+        <EuiPageContent>
+          <EuiPageContentHeader>
+            <EuiText>
+              <h1>Notes</h1>
+            </EuiText>
+          </EuiPageContentHeader>
+          {notes.length ? (
+            <>
+              <EuiInMemoryTable<NoteObject>
+                items={notes}
+                columns={[
+                  {
+                    field: 'attributes.subject',
+                    name: 'Subject',
+                    render: (value, record) => {
+                      const { id, attributes } = record;
+                      return <Link to={`${VIEW_NOTE_PATH}/${id}`}>{attributes.subject}</Link>;
+                    },
+                  },
+                  {
+                    field: 'attributes.createdAt',
+                    name: 'Created at',
+                    dataType: 'date',
+                  },
+                ]}
+                pagination={false}
+                sorting={{ sort: { field: 'attributes.createdAt', direction: 'desc' } }}
+              />
+              <EuiSpacer />
+            </>
+          ) : null}
+          <CreateNoteForm services={services} onAfterCreate={() => fetchNotes()} />
+        </EuiPageContent>
+      </EuiPageBody>
+    </EuiPage>
+  );
+}

x-pack/plugins/notes_test/public/plugin.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { CoreStart, Plugin, CoreSetup, AppMountParameters } from 'src/core/public';
+import type { SpacesPluginStart } from '../../spaces/public';
+import { getServices } from './services';
+
+interface PluginStartDeps {
+  spaces?: SpacesPluginStart;
+}
+
+export class NotesTestPlugin implements Plugin<{}, {}, {}, PluginStartDeps> {
+  public setup(core: CoreSetup<PluginStartDeps>) {
+    core.application.register({
+      id: 'notesTest',
+      title: 'Notes test',
+      async mount(appMountParams: AppMountParameters) {
+        const [coreStart, pluginStartDeps] = await core.getStartServices();
+        const services = getServices(coreStart);
+        const { http } = coreStart;
+        const { spaces: spacesApi } = pluginStartDeps;
+        const { renderApp } = await import('./app');
+        return renderApp({ services, appMountParams, http, spacesApi });
+      },
+    });
+
+    return {};
+  }
+
+  public start(core: CoreStart) {
+    return {};
+  }
+
+  public stop() {}
+}

x-pack/plugins/notes_test/public/services.ts

@@ -0,0 +1,41 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { CoreStart, ResolvedSimpleSavedObject, SimpleSavedObject } from 'src/core/public';
+
+import type { NoteAttributes } from '../common';
+import { NOTE_OBJ_TYPE } from '../common';
+
+export interface Services {
+  createNote: (subject: string, text: string) => Promise<void>;
+  findAllNotes: () => Promise<Array<SimpleSavedObject<NoteAttributes>>>;
+  getNoteById: (id: string) => Promise<ResolvedSimpleSavedObject<NoteAttributes>>;
+  addSuccessToast: (message: string) => void;
+}
+
+export function getServices(core: CoreStart): Services {
+  const savedObjectsClient = core.savedObjects.client;
+
+  return {
+    createNote: async (subject: string, text: string) => {
+      const attributes = { subject, text, createdAt: new Date() };
+      await savedObjectsClient.create<NoteAttributes>(NOTE_OBJ_TYPE, attributes);
+    },
+    findAllNotes: async () => {
+      const findResult = await savedObjectsClient.find<NoteAttributes>({
+        type: NOTE_OBJ_TYPE,
+        perPage: 100,
+      });
+      return findResult.savedObjects;
+    },
+    getNoteById: async (id: string) => {
+      const resolveResult = await savedObjectsClient.resolve<NoteAttributes>(NOTE_OBJ_TYPE, id);
+      return resolveResult;
+    },
+    addSuccessToast: (message: string) => core.notifications.toasts.addSuccess(message),
+  };
+}