Feat: Workpad Templates

x-pack/plugins/canvas/public/apps/home/home_app.js

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui';
-import { WorkpadLoader } from '../../components/workpad_loader';
+import { WorkpadManager } from '../../components/workpad_manager';
 import { setDocTitle } from '../../lib/doc_title';
 
 export const HomeApp = () => {
@@ -15,7 +15,7 @@ export const HomeApp = () => {
     <EuiPage restrictWidth style={{ width: '100%' }}>
       <EuiPageBody>
         <EuiPageContent panelPaddingSize="none" horizontalPosition="center">
-          <WorkpadLoader onClose={() => {}} />
+          <WorkpadManager onClose={() => {}} />
         </EuiPageContent>
       </EuiPageBody>
     </EuiPage>

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

@@ -17,7 +17,7 @@ import {
   EuiButton,
 } from '@elastic/eui';
 import { Navbar } from '../navbar';
-import { WorkpadLoader } from '../workpad_loader';
+import { WorkpadManager } from '../workpad_manager';
 import { PageManager } from '../page_manager';
 import { Expression } from '../expression';
 import { Tray } from './tray';
@@ -43,10 +43,10 @@ export const Toolbar = props => {
     setTray(exp);
   };
 
-  const workpadLoader = (
+  const workpadManager = (
     <EuiOverlayMask>
       <EuiModal onClose={done} className="canvasModal--fixedSize" maxWidth="1000px">
-        <WorkpadLoader onClose={done} />
+        <WorkpadManager onClose={done} />
         <EuiModalFooter>
           <EuiButton size="s" onClick={done}>
             Dismiss
@@ -58,7 +58,7 @@ export const Toolbar = props => {
 
   const trays = {
     pageManager: <PageManager previousPage={previousPage} />,
-    workpadloader: workpadLoader,
+    workpadManager,
     expression: !elementIsSelected ? null : <Expression done={done} />,
   };
 
@@ -71,7 +71,7 @@ export const Toolbar = props => {
             <EuiButtonEmpty
               color="text"
               iconType="grid"
-              onClick={() => showHideTray('workpadloader')}
+              onClick={() => showHideTray('workpadManager')}
             >
               {workpadName}
             </EuiButtonEmpty>

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

@@ -9,14 +9,7 @@ import PropTypes from 'prop-types';
 import { EuiButton } from '@elastic/eui';
 
 export const WorkpadCreate = ({ createPending, onCreate, ...rest }) => (
-  <EuiButton
-    {...rest}
-    iconType="plusInCircle"
-    size="s"
-    fill
-    onClick={onCreate}
-    isLoading={createPending}
-  >
+  <EuiButton {...rest} iconType="plusInCircle" fill onClick={onCreate} isLoading={createPending}>
     Create workpad
   </EuiButton>
 );

x-pack/plugins/canvas/public/components/workpad_loader/workpad_dropzone/workpad_dropzone.scss

@@ -10,3 +10,14 @@
 .canvasWorkpad__dropzoneTable .euiTable {
   background-color: transparent;
 }
+
+.canvasWorkpad__dropzoneTable--tags {
+
+  .euiTableCellContent {
+    flex-wrap: wrap;
+  }
+
+  .euiHealth {
+    width: 100%;
+  }
+} 

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

@@ -10,16 +10,11 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiBasicTable,
-  EuiBetaBadge,
   EuiButtonIcon,
-  EuiLink,
   EuiPagination,
   EuiSpacer,
   EuiButton,
   EuiToolTip,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
   EuiEmptyPrompt,
 } from '@elastic/eui';
 import { sortByOrder } from 'lodash';
@@ -279,7 +274,6 @@ export class WorkpadLoader extends React.PureComponent {
 
     let deleteButton = (
       <EuiButton
-        size="s"
         color="danger"
         iconType="trash"
         onClick={this.openRemoveConfirm}
@@ -290,7 +284,7 @@ export class WorkpadLoader extends React.PureComponent {
     );
 
     const downloadButton = (
-      <EuiButton size="s" color="secondary" onClick={this.downloadWorkpads} iconType="sortDown">
+      <EuiButton color="secondary" onClick={this.downloadWorkpads} iconType="sortDown">
         {`Download (${selectedWorkpads.length})`}
       </EuiButton>
     );
@@ -344,62 +338,42 @@ export class WorkpadLoader extends React.PureComponent {
       <Paginate rows={sortedWorkpads}>
         {pagination => (
           <Fragment>
-            <EuiModalHeader className="canvasHomeApp__modalHeader">
-              <div style={{ width: '100%' }}>
-                <EuiFlexGroup alignItems="center" gutterSize="m">
-                  <EuiFlexItem grow={false}>
-                    <EuiModalHeaderTitle>Canvas workpads</EuiModalHeaderTitle>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiBetaBadge
-                      label="Beta"
-                      tooltipContent="Canvas is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo."
+            <EuiFlexGroup justifyContent="spaceBetween">
+              <EuiFlexItem grow={2}>
+                <EuiFlexGroup gutterSize="s">
+                  {selectedWorkpads.length > 0 && (
+                    <Fragment>
+                      <EuiFlexItem grow={false}>{downloadButton}</EuiFlexItem>
+                      <EuiFlexItem grow={false}>{deleteButton}</EuiFlexItem>
+                    </Fragment>
+                  )}
+                  <EuiFlexItem grow={1}>
+                    <WorkpadSearch
+                      onChange={text => {
+                        pagination.setPage(0);
+                        this.props.findWorkpads(text);
+                      }}
                     />
                   </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiLink href="https://canvas.elastic.co" target="_blank">
-                      Docs
-                    </EuiLink>
-                  </EuiFlexItem>
                 </EuiFlexGroup>
-                <EuiSpacer size="l" />
-                <EuiFlexGroup justifyContent="spaceBetween">
-                  <EuiFlexItem grow={2}>
-                    <EuiFlexGroup gutterSize="s">
-                      {selectedWorkpads.length > 0 && (
-                        <Fragment>
-                          <EuiFlexItem grow={false}>{downloadButton}</EuiFlexItem>
-                          <EuiFlexItem grow={false}>{deleteButton}</EuiFlexItem>
-                        </Fragment>
-                      )}
-                      <EuiFlexItem grow={1}>
-                        <WorkpadSearch
-                          onChange={text => {
-                            pagination.setPage(0);
-                            this.props.findWorkpads(text);
-                          }}
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={2}>
-                    <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" wrap>
-                      <EuiFlexItem grow={false}>{uploadButton}</EuiFlexItem>
-                      <EuiFlexItem grow={false}>{createButton}</EuiFlexItem>
-                    </EuiFlexGroup>
-                  </EuiFlexItem>
+              </EuiFlexItem>
+              <EuiFlexItem grow={2}>
+                <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" wrap>
+                  <EuiFlexItem grow={false}>{uploadButton}</EuiFlexItem>
+                  <EuiFlexItem grow={false}>{createButton}</EuiFlexItem>
                 </EuiFlexGroup>
-              </div>
-            </EuiModalHeader>
-            <EuiModalBody>
-              {createPending && <div>Creating Workpad...</div>}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+
+            <EuiSpacer />
+
+            {createPending && <div>Creating Workpad...</div>}
 
-              {!createPending && isLoading && <div>Fetching Workpads...</div>}
+            {!createPending && isLoading && <div>Fetching Workpads...</div>}
 
-              {!createPending && !isLoading && this.renderWorkpadTable(pagination)}
+            {!createPending && !isLoading && this.renderWorkpadTable(pagination)}
 
-              {confirmModal}
-            </EuiModalBody>
+            {confirmModal}
           </Fragment>
         )}
       </Paginate>

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

@@ -0,0 +1,14 @@
+.canvasWorkpad__upload--compressed {
+
+  &.euiFilePicker--compressed.euiFilePicker {
+
+    .euiFilePicker__prompt {
+      height: $euiSizeXXL;
+      padding: $euiSizeM;
+      padding-left: $euiSizeXXL;
+    }
+    .euiFilePicker__icon {
+      top: $euiSizeM;
+    }
+  }
+}

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

@@ -30,7 +30,6 @@ export class WorkpadSearch extends React.PureComponent {
   render() {
     return (
       <EuiFieldSearch
-        compressed
         placeholder="Find workpad"
         value={this.state.searchText}
         onChange={this.setSearchText}

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

@@ -13,6 +13,7 @@ export const WorkpadUpload = ({ onUpload, ...rest }) => (
   <EuiFilePicker
     {...rest}
     compressed
+    className="canvasWorkpad__upload--compressed"
     initialPromptText="Import workpad JSON file"
     onChange={([file]) => uploadWorkpad(file, onUpload)}
   />

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

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { WorkpadManager } from './workpad_manager';

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

@@ -0,0 +1,75 @@
+/*
+ * 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, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import {
+  EuiTabbedContent,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiModalBody,
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiBetaBadge,
+  EuiLink,
+} from '@elastic/eui';
+import { WorkpadLoader } from '../workpad_loader';
+import { WorkpadTemplates } from '../workpad_templates';
+
+export const WorkpadManager = ({ onClose }) => {
+  const tabs = [
+    {
+      id: 'workpadLoader',
+      name: 'My Workpads',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <WorkpadLoader onClose={onClose} />
+        </Fragment>
+      ),
+    },
+    {
+      id: 'workpadTemplates',
+      name: 'Templates',
+      content: (
+        <Fragment>
+          <EuiSpacer />
+          <WorkpadTemplates onClose={onClose} />
+        </Fragment>
+      ),
+    },
+  ];
+  return (
+    <Fragment>
+      <EuiModalHeader className="canvasHomeApp__modalHeader">
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiModalHeaderTitle>Canvas workpads</EuiModalHeaderTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiBetaBadge
+              label="Beta"
+              tooltipContent="Canvas is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo."
+            />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiLink href="https://canvas.elastic.co" target="_blank">
+              Docs
+            </EuiLink>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiModalHeader>
+      <EuiModalBody>
+        <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} />
+      </EuiModalBody>
+    </Fragment>
+  );
+};
+
+WorkpadManager.propTypes = {
+  onClose: PropTypes.func,
+};

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

@@ -0,0 +1,28 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import { compose, getContext, withHandlers } from 'recompose';
+import * as workpadService from '../../lib/workpad_service';
+import { notify } from '../../lib/notify';
+import { getId } from '../../lib/get_id';
+import { WorkpadTemplates as Component } from './workpad_templates';
+
+export const WorkpadTemplates = compose(
+  getContext({
+    router: PropTypes.object,
+  }),
+  withHandlers({
+    // Clone workpad given an id
+    cloneWorkpad: props => workpad => {
+      workpad.id = getId('workpad');
+      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` }));
+    },
+  })
+)(Component);

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

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+const themeDark = require('./theme_dark.json');
+const themeLight = require('./theme_light.json');
+
+export const templates = [themeDark, themeLight];