Closes workpad manager modal after cloning template

Fixed filtering workpad templates

Removed console log

Added sample templates

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

@@ -22,9 +22,9 @@ import moment from 'moment';
 import { ConfirmModal } from '../confirm_modal';
 import { Link } from '../link';
 import { Paginate } from '../paginate';
-import { WorkpadSearch } from './workpad_search';
 import { WorkpadDropzone } from './workpad_dropzone';
 import { WorkpadCreate } from './workpad_create';
+import { WorkpadSearch } from './workpad_search';
 import { WorkpadUpload } from './workpad_upload';
 
 const formatDate = date => date && moment(date).format('MMM D, YYYY @ h:mma');

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

@@ -34,7 +34,7 @@ export const WorkpadManager = ({ onClose }) => {
       content: (
         <Fragment>
           <EuiSpacer />
-          <WorkpadTemplates />
+          <WorkpadTemplates onClose={onClose} />
         </Fragment>
       ),
     },
@@ -45,7 +45,7 @@ export const WorkpadManager = ({ onClose }) => {
         <EuiModalHeaderTitle>Canvas workpads</EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
-        <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[1]} /> {/* CHANGE THIS BACK TO 0 */}
+        <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />
       </EuiModalBody>
     </Fragment>
   );

x-pack/plugins/canvas/public/components/workpad_templates/index.js

@@ -19,7 +19,7 @@ export const WorkpadTemplates = compose(
     // Clone workpad given an id
     cloneWorkpad: props => workpad => {
       workpad.id = getId('workpad');
-      workpadService
+      return workpadService
         .create(workpad)
         .then(() => props.router.navigateTo('loadWorkpad', { id: workpad.id, page: 1 }))
         .catch(err => notify.error(err, { title: `Couldn't clone workpad template` }));

x-pack/plugins/canvas/public/components/workpad_templates/templates/index.js

@@ -5,7 +5,18 @@
  */
 
 import { cloneDeep } from 'lodash';
-const elasticTemplate = require('./elastic_template.json');
+const canvasWeather = require('./canvas_weather.json');
 const conditionalAssets = require('./conditional_assets.json');
+const elasticTemplate = require('./elastic_template.json');
+const markdownStyles = require('./markdown_styles.json');
+const operationalMonitoring = require('./sample_data_operational_monitoring.json');
+const randomizedTour2018 = require('./randomized_tour_2018.json');
 
-export const templates = [cloneDeep(elasticTemplate), cloneDeep(conditionalAssets)];
+export const templates = [
+  cloneDeep(canvasWeather),
+  cloneDeep(conditionalAssets),
+  cloneDeep(elasticTemplate),
+  cloneDeep(markdownStyles),
+  cloneDeep(operationalMonitoring),
+  cloneDeep(randomizedTour2018),
+];

x-pack/plugins/canvas/public/components/workpad_templates/templates/markdown_styles.json

@@ -0,0 +1 @@
+{"name":"Markdown Styles","id":"workpad-e3acce88-fd25-42fd-b046-37fd14fd37d3","width":1600,"height":900,"page":0,"pages":[{"id":"page-2d028090-3666-4785-aa54-8789f3879c20","style":{"background":"#fff"},"elements":[{"id":"element-fe6d5996-b5fd-443d-bd36-4e93f0da8947","position":{"left":2,"top":7.5,"width":194,"height":299,"angle":0},"expression":"filters\n| demodata\n| markdown \n  \"## Headings\n\n# h1 Heading\n## h2 Heading\n### h3 Heading\n#### h4 Heading\n##### h5 Heading\n###### h6 Heading\"\n| render"},{"id":"element-3454db63-df83-4491-8b7a-d066da821dc4","position":{"left":8,"top":318.5,"width":899,"height":154,"angle":0},"expression":"filters\n| demodata\n| markdown \"## Horizontal Rules\n\n___\n\n---\n\n***\"\n| render"},{"id":"element-6a25c921-ba41-49e8-bd1d-009b90142ead","position":{"left":611,"top":26.5,"width":351,"height":296,"angle":0},"expression":"filters\n| demodata\n| markdown \n  \"## Typographic replacements\n\nEnable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,,  -- ---\n\n\\\"Smartypants, double quotes\\\" and 'single quotes'\n\n\n\"\n| render","filter":null},{"id":"element-b6e76431-10a2-47fb-bb5e-d9ad1b129075","position":{"left":201,"top":1,"width":126,"height":234,"angle":0},"expression":"filters\n| demodata\n| markdown \n  \"## Emphasis\n\n**This is bold text**\n\n__This is bold text__\n\n*This is italic text*\n\n_This is italic text_\n\n~~Strikethrough~~\n\n\n\"\n| render","filter":null},{"id":"element-4008b6f4-7197-4ffc-b206-31a788f1547d","position":{"left":348,"top":1,"width":256,"height":293,"angle":0},"expression":"filters\n| demodata\n| markdown \n  \"## Blockquotes\n\n\n> Blockquotes can also be nested...\n>> ...by using additional greater-than signs right next to each other...\n> > > ...or with spaces between arrows.\"\n| render","filter":null},{"id":"element-39873883-0d7d-4711-9078-5379bac3f209","position":{"left":1209,"top":26.5,"width":365,"height":496,"angle":0},"expression":"filters\n| demodata\n| markdown \n  \"## Lists\n\nUnordered\n\n+ Create a list by starting a line with `+`, `-`, or `*`\n+ Sub-lists are made by indenting 2 spaces:\n  - Marker character change forces new list start:\n    * Ac tristique libero volutpat at\n    + Facilisis in pretium nisl aliquet\n    - Nulla volutpat aliquam velit\n+ Very easy!\n\nOrdered\n\n1. Lorem ipsum dolor sit amet\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\n\n1. You can use sequential numbers...\n1. ...or keep all the numbers as `1.`\n\nStart numbering with offset:\n\n57. foo\n1. bar\n\n\n\"\n| render","filter":null},{"id":"element-def45003-d915-41cc-ab10-178d9242657a","position":{"left":545,"top":443.5,"width":502,"height":457,"angle":0},"expression":"filters\n| demodata\n| markdown \n  \"## Code\n\nInline `code`\n\nIndented code\n\n    // Some comments\n    line 1 of code\n    line 2 of code\n    line 3 of code\n\n\nBlock code \\\"fences\\\"\n\n```\nSample text here...\n```\n\nSyntax highlighting\n\n``` js\nvar foo = function (bar) {\n  return bar++;\n};\n\nconsole.log(foo(5));\n```\"\n| render","filter":null},{"id":"element-cf3a85f2-da0e-4c53-9727-981e63ea64b1","position":{"left":16,"top":464.5,"width":486,"height":415,"angle":0},"expression":"filters\n| demodata\n| markdown \n  \"## Tables\n\n| Option | Description |\n| ------ | ----------- |\n| data   | path to data files to supply the data that will be passed into templates. |\n| engine | engine to be used for processing templates. Handlebars is the default. |\n| ext    | extension to be used for dest files. |\n\nRight aligned columns\n\n| Option | Description |\n| ------:| -----------:|\n| data   | path to data files to supply the data that will be passed into templates. |\n| engine | engine to be used for processing templates. Handlebars is the default. |\n| ext    | extension to be used for dest files. |\n\n\n\"\n| render","filter":null},{"id":"element-6017731b-2797-4e0b-97c0-d9aa2b62a9ec","position":{"left":362.5,"top":228.5,"width":483,"height":156,"angle":0},"expression":"filters\n| demodata\n| markdown \n  \"## Links\n\n[link text](http://dev.nodeca.com)\n\n[link with title](http://nodeca.github.io/pica/demo/ \\\"title text!\\\")\n\nAutoconverted link https://github.com/nodeca/pica (enable linkify to see)\n\"\n| render","filter":null},{"id":"element-de106783-b092-4cd6-8302-4498061f0e76","position":{"left":1081,"top":575.5,"width":489,"height":300,"angle":0},"expression":"filters\n| demodata\n| markdown \n  \"## Images\n\n![Elastic Logo](https://www.elastic.co/assets/blt45b0886c90beceee/logo-elastic.svg)\"\n| render","filter":null}]}],"colors":["#37988d","#c19628","#b83c6f","#3f9939","#1785b0","#ca5f35","#45bdb0","#f2bc33","#e74b8b","#4fbf48","#1ea6dc","#fd7643","#72cec3","#f5cc5d","#ec77a8","#7acf74","#4cbce4","#fd986f","#a1ded7","#f8dd91","#f2a4c5","#a6dfa2","#86d2ed","#fdba9f","#000000","#444444","#777777","#BBBBBB","#FFFFFF","rgba(255,255,255,0)"],"@timestamp":"2018-09-28T19:53:20.988Z","@created":"2018-09-28T18:09:49.843Z","assets":{}}

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

@@ -36,7 +36,7 @@ const uniqueTags = templates
 const { colors } = palettes.euiPaletteColorBlind;
 
 const tagColorMapping = uniqueTags.reduce((acc, tag, i) => {
-  acc[tag] = colors[i % colors.length];
+  acc[tag] = colors[i % Object.keys(colors).length];
   return acc;
 }, {});
 
@@ -46,8 +46,8 @@ export class WorkpadTemplates extends React.PureComponent {
   };
 
   state = {
-    sortField: '@timestamp',
-    sortDirection: 'desc',
+    sortField: 'name',
+    sortDirection: 'asc',
     pageSize: 10,
     searchTerm: '',
     filterTags: [],
@@ -61,29 +61,36 @@ export class WorkpadTemplates extends React.PureComponent {
     });
   };
 
-  onSearch = ({ query, queryText: searchTerm }) => {
-    // extracts tags from the query AST
-    const filterTags = get(query, 'ast._clauses', []).reduce((acc, clause) => {
-      const { field, value } = clause;
-      if (field === 'tags') acc.push(value);
-      return acc;
-    }, []);
+  onSearch = ({ query }) => {
+    const clauses = get(query, 'ast._clauses', []);
 
-    this.setState({ searchTerm, filterTags });
+    const filterTags = [];
+    const searchTerms = [];
+
+    clauses.forEach(clause => {
+      const { type, field, value } = clause;
+      // extract terms from the query AST
+      if (type === 'term') searchTerms.push(value);
+      // extracts tags from the query AST
+      else if (field === 'tags') filterTags.push(value);
+    });
+
+    this.setState({ searchTerm: searchTerms.join(' '), filterTags });
   };
 
+  cloneTemplate = template => this.props.cloneWorkpad(template).then(() => this.props.onClose());
+
   renderWorkpadTable = ({ rows, pageNumber, totalPages, setPage }) => {
-    const { cloneWorkpad } = this.props;
     const { sortField, sortDirection } = this.state;
 
     const actions = [
       {
-        render: workpad => (
+        render: template => (
           <EuiToolTip content="Clone">
             <EuiButtonIcon
               iconType="copy"
-              onClick={() => cloneWorkpad(workpad)}
-              aria-label="Clone Workpad"
+              onClick={() => this.cloneTemplate(template)}
+              aria-label={`Clone Template "${template.name}"`}
             />
           </EuiToolTip>
         ),
@@ -93,27 +100,27 @@ export class WorkpadTemplates extends React.PureComponent {
     const columns = [
       {
         field: 'name',
-        name: 'Workpad Name',
+        name: 'Template Name',
         sortable: true,
         width: '30%',
         dataType: 'string',
-        render: (name, workpad) => {
-          const workpadName = workpad.name.length ? workpad.name : <em>{workpad.id}</em>;
+        render: (name, template) => {
+          const templateName = template.name.length ? template.name : <em>{template.id}</em>;
 
           return (
             <EuiButtonEmpty
-              onClick={() => cloneWorkpad(workpad)}
-              aria-label={`Clone workpad template ${workpadName}`}
+              onClick={() => this.cloneTemplate(template)}
+              aria-label={`Clone workpad template "${templateName}"`}
               type="link"
             >
-              {workpadName}
+              {templateName}
             </EuiButtonEmpty>
           );
         },
       },
       {
         field: 'description',
-        name: 'description',
+        name: 'Description',
         sortable: false,
         dataType: 'string',
         width: '30%',
@@ -224,11 +231,7 @@ export class WorkpadTemplates extends React.PureComponent {
   render() {
     const { sortField, sortDirection, searchTerm, filterTags } = this.state;
 
-    const sortedTemplates = sortByOrder(
-      templates,
-      [sortField, '@timestamp'],
-      [sortDirection, 'desc']
-    );
+    const sortedTemplates = sortByOrder(templates, [sortField, 'name'], [sortDirection, 'asc']);
 
     const filteredTemplates = sortedTemplates.filter(({ name, description, tags }) => {
       const tagMatch = filterTags.length
@@ -246,7 +249,6 @@ export class WorkpadTemplates extends React.PureComponent {
       <Paginate rows={filteredTemplates}>
         {pagination => (
           <Fragment>
-            <EuiSpacer />
             {this.renderSearch()}
             <EuiSpacer />
             {this.renderWorkpadTable(pagination)}