[Canvas] Move Templates to be stored as Saved Objects (#69438)

* Moves Canvas templates to live server side

* Adds Clone from template test

* Fix url

* Clean up

* PR Feedback

* i18n

x-pack/plugins/canvas/canvas_plugin_src/plugin.ts

@@ -24,7 +24,6 @@ import { modelSpecs } from './uis/models';
 import { initializeViews } from './uis/views';
 import { initializeArgs } from './uis/arguments';
 import { tagSpecs } from './uis/tags';
-import { templateSpecs } from './templates';
 
 interface SetupDeps {
   canvas: CanvasSetup;
@@ -59,7 +58,6 @@ export class CanvasSrcPlugin implements Plugin<void, void, SetupDeps, StartDeps>
     plugins.canvas.addViewUIs(initializeViews(core, plugins));
     plugins.canvas.addArgumentUIs(initializeArgs(core, plugins));
     plugins.canvas.addTagUIs(tagSpecs);
-    plugins.canvas.addTemplates(templateSpecs);
     plugins.canvas.addTransformUIs(transformSpecs);
   }
 

x-pack/plugins/canvas/common/lib/constants.ts

@@ -8,6 +8,7 @@ import { SHAREABLE_RUNTIME_NAME } from '../../shareable_runtime/constants_static
 
 export const CANVAS_TYPE = 'canvas-workpad';
 export const CUSTOM_ELEMENT_TYPE = 'canvas-element';
+export const TEMPLATE_TYPE = `${CANVAS_TYPE}-template`;
 export const CANVAS_APP = 'canvas';
 export const APP_ROUTE = '/app/canvas';
 export const APP_ROUTE_WORKPAD = `${APP_ROUTE}#/workpad`;
@@ -16,6 +17,7 @@ export const API_ROUTE_WORKPAD = `${API_ROUTE}/workpad`;
 export const API_ROUTE_WORKPAD_ASSETS = `${API_ROUTE}/workpad-assets`;
 export const API_ROUTE_WORKPAD_STRUCTURES = `${API_ROUTE}/workpad-structures`;
 export const API_ROUTE_CUSTOM_ELEMENT = `${API_ROUTE}/custom-element`;
+export const API_ROUTE_TEMPLATES = `${API_ROUTE}/templates`;
 export const LOCALSTORAGE_PREFIX = `kibana.canvas`;
 export const LOCALSTORAGE_CLIPBOARD = `${LOCALSTORAGE_PREFIX}.clipboard`;
 export const SESSIONSTORAGE_LASTPATH = 'lastPath:canvas';

x-pack/plugins/canvas/i18n/components.ts

@@ -1604,5 +1604,12 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.workpadTemplate.searchPlaceholder', {
         defaultMessage: 'Find template',
       }),
+    getCreatingTemplateLabel: (templateName: string) =>
+      i18n.translate('xpack.canvas.workpadTemplate.creatingTemplateLabel', {
+        defaultMessage: `Creating from template '{templateName}'`,
+        values: {
+          templateName,
+        },
+      }),
   },
 };

x-pack/plugins/canvas/i18n/templates/apply_strings.ts

@@ -45,6 +45,6 @@ export const applyTemplateStrings = (templates: CanvasTemplate[]) => {
       });
     }
 
-    return () => template;
+    return template;
   });
 };

x-pack/plugins/canvas/i18n/templates/template_strings.test.ts

@@ -5,13 +5,13 @@
  */
 
 import { getTemplateStrings } from './template_strings';
-import { templateSpecs } from '../../canvas_plugin_src/templates';
+import { templates } from '../../server/templates'; // eslint-disable-line
 
 import { TagStrings } from '../tags';
 
 describe('TemplateStrings', () => {
   const templateStrings = getTemplateStrings();
-  const templateNames = templateSpecs.map((template) => template().name);
+  const templateNames = templates.map((template) => template.name);
   const stringKeys = Object.keys(templateStrings);
 
   test('All template names should exist in the strings definition', () => {
@@ -39,8 +39,8 @@ describe('TemplateStrings', () => {
   test('All templates should have tags that are defined', () => {
     const tagNames = Object.keys(TagStrings);
 
-    templateSpecs.forEach((template) => {
-      template().tags.forEach((tagName: string) => expect(tagNames).toContain(tagName));
+    templates.forEach((template) => {
+      template.tags.forEach((tagName: string) => expect(tagNames).toContain(tagName));
     });
   });
 });

x-pack/plugins/canvas/i18n/templates/template_strings.ts

@@ -53,9 +53,6 @@ export const getTemplateStrings = (): TemplateStringDict => ({
       defaultMessage: 'Infographic-style report with live charts',
     }),
   },
-});
-
-export const getUnusedTemplateStrings = (): TemplateStringDict => ({
   Pitch: {
     name: i18n.translate('xpack.canvas.templates.pitchName', {
       defaultMessage: 'Pitch',

x-pack/plugins/canvas/public/components/paginate/index.tsx

@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Paginate as Component, PaginateProps, PaginateChildProps } from './paginate';
+
+export { PaginateProps, PaginateChildProps };
+export interface InPaginateProps {
+  perPage?: number;
+  startPage?: number;
+  rows: any[];
+  children: (props: PaginateChildProps) => React.ReactNode;
+}
+
+export const Paginate: React.FunctionComponent<InPaginateProps> = ({
+  perPage = 10,
+  startPage = 0,
+  rows,
+  children,
+}) => {
+  const totalPages = Math.ceil(rows.length / perPage);
+  const initialCurrentPage = totalPages > 0 ? Math.min(startPage, totalPages - 1) : 0;
+  const [currentPage, setPage] = useState(initialCurrentPage);
+  const hasRenderedRef = useRef<boolean>(false);
+  const maxPage = totalPages - 1;
+  const start = currentPage * perPage;
+  const end = currentPage === 0 ? perPage : perPage * (currentPage + 1);
+  const nextPageEnabled = currentPage < maxPage;
+  const prevPageEnabled = currentPage > 0;
+  const partialRows = rows.slice(start, end);
+
+  const nextPage = () => {
+    if (nextPageEnabled) {
+      setPage(currentPage + 1);
+    }
+  };
+
+  const prevPage = () => {
+    if (prevPageEnabled) {
+      setPage(currentPage - 1);
+    }
+  };
+
+  useEffect(() => {
+    if (!hasRenderedRef.current) {
+      hasRenderedRef.current = true;
+    } else {
+      setPage(0);
+    }
+  }, [perPage, hasRenderedRef]);
+
+  return (
+    <Component
+      rows={partialRows}
+      perPage={perPage}
+      pageNumber={currentPage}
+      totalPages={totalPages}
+      setPage={setPage}
+      nextPage={nextPage}
+      prevPage={prevPage}
+      nextPageEnabled={nextPageEnabled}
+      prevPageEnabled={prevPageEnabled}
+      children={children}
+    />
+  );
+};
+
+Paginate.propTypes = {
+  rows: PropTypes.array.isRequired,
+  perPage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  startPage: PropTypes.number,
+};

x-pack/plugins/canvas/public/components/paginate/paginate.js → x-pack/plugins/canvas/public/components/paginate/paginate.tsx

@@ -4,25 +4,32 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import React from 'react';
 import PropTypes from 'prop-types';
+import { InPaginateProps } from './';
 
-export const Paginate = (props) => {
-  return props.children({
-    rows: props.partialRows,
-    perPage: props.perPage,
-    pageNumber: props.pageNumber,
-    totalPages: props.totalPages,
-    nextPageEnabled: props.nextPageEnabled,
-    prevPageEnabled: props.prevPageEnabled,
-    setPage: (num) => props.setPage(num),
-    nextPage: props.nextPage,
-    prevPage: props.prevPage,
-  });
+export type PaginateProps = Omit<InPaginateProps, 'startPage'> & {
+  pageNumber: number;
+  totalPages: number;
+  nextPageEnabled: boolean;
+  prevPageEnabled: boolean;
+  setPage: (num: number) => void;
+  nextPage: () => void;
+  prevPage: () => void;
+};
+
+export type PaginateChildProps = Omit<PaginateProps, 'children'>;
+
+export const Paginate: React.FunctionComponent<PaginateProps> = ({
+  children,
+  ...childrenProps
+}) => {
+  return <React.Fragment>{children(childrenProps)}</React.Fragment>;
 };
 
 Paginate.propTypes = {
   children: PropTypes.func.isRequired,
-  partialRows: PropTypes.array.isRequired,
+  rows: PropTypes.array.isRequired,
   perPage: PropTypes.number.isRequired,
   pageNumber: PropTypes.number.isRequired,
   totalPages: PropTypes.number.isRequired,

x-pack/plugins/canvas/public/components/router/context.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+
+// TODO: We should fully build out this interface for our router
+// or switch to a different router that is already typed
+interface Router {
+  navigateTo: (
+    name: string,
+    params: Record<string, number | string>,
+    state?: Record<string, string>
+  ) => void;
+}
+
+export const RouterContext = React.createContext<Router | undefined>(undefined);

x-pack/plugins/canvas/public/components/router/index.ts

@@ -15,6 +15,7 @@ import {
 // @ts-expect-error untyped local
 import { Router as Component } from './router';
 import { State } from '../../../types';
+export * from './context';
 
 const mapDispatchToProps = {
   enableAutoplay,

x-pack/plugins/canvas/public/components/router/router.js

@@ -10,6 +10,7 @@ import { routerProvider } from '../../lib/router_provider';
 import { getAppState } from '../../lib/app_state';
 import { getTimeInterval } from '../../lib/time_interval';
 import { CanvasLoading } from './canvas_loading';
+import { RouterContext } from './';
 
 export class Router extends React.PureComponent {
   static propTypes = {
@@ -97,6 +98,10 @@ export class Router extends React.PureComponent {
       return React.createElement(CanvasLoading, { msg: this.props.loadingMessage });
     }
 
-    return <this.state.activeComponent />;
+    return (
+      <RouterContext.Provider value={this.state.router}>
+        <this.state.activeComponent />
+      </RouterContext.Provider>
+    );
   }
 }