Handle timeouts on creating templates

x-pack/plugins/canvas/public/components/workpad_templates/workpad_templates.tsx

@@ -19,12 +19,11 @@ import {
   SortDirection,
 } from '@elastic/eui';
 import { sortByOrder } from 'lodash';
-// @ts-ignore untyped local
 import { EuiBasicTableColumn } from '@elastic/eui';
 import { Paginate, PaginateChildProps } from '../paginate';
 import { TagList } from '../tag_list';
 import { getTagsFilter } from '../../lib/get_tags_filter';
-// @ts-ignore untyped local
+// @ts-expect-error
 import { extractSearch } from '../../lib/extract_search';
 import { ComponentStrings } from '../../../i18n';
 import { CanvasTemplate } from '../../../types';
@@ -61,7 +60,7 @@ export class WorkpadTemplates extends React.PureComponent<
   WorkpadTemplatesState
 > {
   static propTypes = {
-    createFromTemplate: PropTypes.func.isRequired,
+    onCreateFromTemplate: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
     templates: PropTypes.object,
   };

x-pack/plugins/canvas/server/templates/index.ts

@@ -13,20 +13,21 @@ import { light } from './theme_light';
 
 import { TEMPLATE_TYPE } from '../../common/lib/constants';
 
-export const templates = [pitch, status, summary, dark, light];
+export const templates = [status, summary, dark, light, pitch];
 
 export async function initializeTemplates(
-  client: Pick<SavedObjectsRepository, 'bulkCreate' | 'find'>
+  client: Pick<SavedObjectsRepository, 'bulkCreate' | 'create' | 'find'>
 ) {
   const existingTemplates = await client.find({ type: TEMPLATE_TYPE, perPage: 1 });
 
   if (existingTemplates.total === 0) {
-    const templateObjects = templates.map((template) => ({
-      id: template.id,
-      type: TEMPLATE_TYPE,
-      attributes: template,
-    }));
-
-    client.bulkCreate(templateObjects);
+    // Some devs were seeing timeouts that would cause an unhandled promise rejection
+    // likely because the pitch template is so huge.
+    // So, rather than doing a bulk create of templates, we're going to fire off individual
+    // creates and catch and throw-away any errors that happen.
+    // Once packages are ready, we should probably move that pitch that is so large to a package
+    for (const template of templates) {
+      client.create(TEMPLATE_TYPE, template, { id: template.id }).catch((err) => undefined);
+    }
   }
 }