Feat: Workpad Templates (#23966)

* Added workpad manager which contains workpad_loader and workpad_templates * Fixed term filter in workpad_templates * design changes * Removed console logs Closes workpad manager modal after cloning template Fixed filtering workpad templates Removed console log Added sample templates Added more templates to test with Removed cloneDeep * case insensitive template search * Case insensitive tag order in popover * added descriptions and tags to sample data workpads * refine list of initial templates * remove sample data templates, make buttons bigger * Added template and tag registries * Fixed workpad loader resizing issue on home page * Moved tags to ui folder * Fixed template class * Fixed properties in templates to match workpad
elastic · Dec 11, 2018 · 350ce18 · 350ce18
1 parent f06ec83
commit 350ce18
Show file tree

Hide file tree

Showing 29 changed files with 1,244 additions and 86 deletions.
diff --git a/packages/kbn-interpreter/src/server/plugin_paths.js b/packages/kbn-interpreter/src/server/plugin_paths.js
@@ -30,4 +30,6 @@ export const pluginPaths = {
   modelUIs: ['uis', 'models'],
   viewUIs: ['uis', 'views'],
   argumentUIs: ['uis', 'arguments'],
+  templates: ['templates'],
+  tagUIs: ['uis', 'tags'],
 };
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/templates/index.js b/x-pack/plugins/canvas/canvas_plugin_src/templates/index.js
@@ -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;
+ * 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');
+
+// Registry expects a function that returns a spec object
+export const templateSpecs = [themeDark, themeLight].map(template => () => template);
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/templates/register.js b/x-pack/plugins/canvas/canvas_plugin_src/templates/register.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.
+ */
+
+import 'babel-polyfill';
+import { templateSpecs } from './index';
+
+templateSpecs.forEach(canvas.register);
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/templates/theme_dark.json b/x-pack/plugins/canvas/canvas_plugin_src/templates/theme_dark.json
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/templates/theme_light.json b/x-pack/plugins/canvas/canvas_plugin_src/templates/theme_light.json
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/tags/index.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/tags/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.
+*/
+
+import { presentation } from './presentation';
+
+// Registry expects a function that returns a spec object
+export const tagSpecs = [presentation];
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/tags/presentation.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/tags/presentation.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 const presentation = () => ({ name: 'presentation', color: '#1EA593' });
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/tags/register.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/tags/register.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.
+ */
+
+import 'babel-polyfill';
+import { tagSpecs } from './index';
+
+tagSpecs.forEach(canvas.register);
diff --git a/x-pack/plugins/canvas/public/apps/home/home_app.js b/x-pack/plugins/canvas/public/apps/home/home_app.js
@@ -6,16 +6,20 @@
 
 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 = () => {
   setDocTitle('Canvas');
   return (
-    <EuiPage restrictWidth style={{ width: '100%' }}>
+    <EuiPage className="canvasHomeApp" restrictWidth>
       <EuiPageBody>
-        <EuiPageContent panelPaddingSize="none" horizontalPosition="center">
-          <WorkpadLoader onClose={() => {}} />
+        <EuiPageContent
+          className="canvasHomeApp__content"
+          panelPaddingSize="none"
+          horizontalPosition="center"
+        >
+          <WorkpadManager onClose={() => {}} />
         </EuiPageContent>
       </EuiPageBody>
     </EuiPage>

diff --git a/x-pack/plugins/canvas/public/apps/home/home_app.scss b/x-pack/plugins/canvas/public/apps/home/home_app.scss
@@ -1,3 +1,10 @@
-.canvasHomeApp__modalHeader {
-  padding-right: 24px;
+.canvasHomeApp {
+  width: 100%;
+
+  .canvasHomeApp__content {
+    width: 100%;
+  }
+  .canvasHomeApp__modalHeader {
+    padding-right: 24px;
+  }
 }
diff --git a/x-pack/plugins/canvas/public/components/app/index.js b/x-pack/plugins/canvas/public/components/app/index.js
@@ -11,6 +11,8 @@ import { getAppReady, getBasePath } from '../../state/selectors/app';
 import { appReady, appError } from '../../state/actions/app';
 import { loadPrivateBrowserFunctions } from '../../lib/load_private_browser_functions';
 import { elementsRegistry } from '../../lib/elements_registry';
+import { templatesRegistry } from '../../lib/templates_registry';
+import { tagsRegistry } from '../../lib/tags_registry';
 import { renderFunctionsRegistry } from '../../lib/render_functions_registry';
 import {
   argTypeRegistry,
@@ -40,6 +42,8 @@ const types = {
   modelUIs: modelRegistry,
   viewUIs: viewRegistry,
   argumentUIs: argTypeRegistry,
+  templates: templatesRegistry,
+  tags: tagsRegistry,
 };
 
 const mapDispatchToProps = dispatch => ({

diff --git a/x-pack/plugins/canvas/public/components/toolbar/index.js b/x-pack/plugins/canvas/public/components/toolbar/index.js
@@ -41,5 +41,5 @@ export const Toolbar = compose(
     },
   }),
   withState('tray', 'setTray', props => props.tray),
-  withState('showWorkpadLoader', 'setShowWorkpadLoader', false)
+  withState('showWorkpadManager', 'setShowWorkpadManager', false)
 )(Component);
diff --git a/x-pack/plugins/canvas/public/components/toolbar/toolbar.js b/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';
@@ -32,8 +32,8 @@ export const Toolbar = props => {
     selectedPageNumber,
     workpadName,
     totalPages,
-    showWorkpadLoader,
-    setShowWorkpadLoader,
+    showWorkpadManager,
+    setShowWorkpadManager,
   } = props;
 
   const elementIsSelected = Boolean(selectedElement);
@@ -45,15 +45,15 @@ export const Toolbar = props => {
     setTray(exp);
   };
 
-  const closeWorkpadLoader = () => setShowWorkpadLoader(false);
-  const openWorkpadLoader = () => setShowWorkpadLoader(true);
+  const closeWorkpadManager = () => setShowWorkpadManager(false);
+  const openWorkpadManager = () => setShowWorkpadManager(true);
 
-  const workpadLoader = (
+  const workpadManager = (
     <EuiOverlayMask>
-      <EuiModal onClose={closeWorkpadLoader} className="canvasModal--fixedSize" maxWidth="1000px">
-        <WorkpadLoader onClose={closeWorkpadLoader} />
+      <EuiModal onClose={closeWorkpadManager} className="canvasModal--fixedSize" maxWidth="1000px">
+        <WorkpadManager onClose={closeWorkpadManager} />
         <EuiModalFooter>
-          <EuiButton size="s" onClick={closeWorkpadLoader}>
+          <EuiButton size="s" onClick={closeWorkpadManager}>
             Dismiss
           </EuiButton>
         </EuiModalFooter>
@@ -72,7 +72,7 @@ export const Toolbar = props => {
       <Navbar>
         <EuiFlexGroup alignItems="center" gutterSize="none" className="canvasToolbar__controls">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty color="text" iconType="grid" onClick={() => openWorkpadLoader()}>
+            <EuiButtonEmpty color="text" iconType="grid" onClick={() => openWorkpadManager()}>
               {workpadName}
             </EuiButtonEmpty>
           </EuiFlexItem>
@@ -116,7 +116,7 @@ export const Toolbar = props => {
         </EuiFlexGroup>
       </Navbar>
 
-      {showWorkpadLoader && workpadLoader}
+      {showWorkpadManager && workpadManager}
     </div>
   );
 };
@@ -130,6 +130,6 @@ Toolbar.propTypes = {
   selectedPageNumber: PropTypes.number.isRequired,
   totalPages: PropTypes.number.isRequired,
   selectedElement: PropTypes.object,
-  showWorkpadLoader: PropTypes.bool.isRequired,
-  setShowWorkpadLoader: PropTypes.func.isRequired,
+  showWorkpadManager: PropTypes.bool.isRequired,
+  setShowWorkpadManager: PropTypes.func.isRequired,
 };
diff --git a/x-pack/plugins/canvas/public/components/workpad_loader/workpad_create.js b/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>
 );

diff --git a/...ck/plugins/canvas/public/components/workpad_loader/workpad_dropzone/workpad_dropzone.scss b/...ck/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%;
+  }
+} 
diff --git a/x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js b/x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.js
@@ -10,21 +10,15 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiBasicTable,
-  EuiBetaBadge,
   EuiButtonIcon,
-  EuiLink,
   EuiPagination,
   EuiSpacer,
   EuiButton,
   EuiToolTip,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiModalBody,
   EuiEmptyPrompt,
 } from '@elastic/eui';
 import { sortByOrder } from 'lodash';
 import moment from 'moment';
-import { documentationLinks } from '../../lib/documentation_links';
 import { ConfirmModal } from '../confirm_modal';
 import { Link } from '../link';
 import { Paginate } from '../paginate';
@@ -282,7 +276,6 @@ export class WorkpadLoader extends React.PureComponent {
 
     let deleteButton = (
       <EuiButton
-        size="s"
         color="danger"
         iconType="trash"
         onClick={this.openRemoveConfirm}
@@ -293,7 +286,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>
     );
@@ -347,62 +340,43 @@ 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={documentationLinks.canvas} 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 style={{ width: '100%' }}>Creating Workpad...</div>}
 
-              {!createPending && isLoading && <div>Fetching Workpads...</div>}
+            {!createPending &&
+              isLoading && <div style={{ width: '100%' }}>Fetching Workpads...</div>}
 
-              {!createPending && !isLoading && this.renderWorkpadTable(pagination)}
+            {!createPending && !isLoading && this.renderWorkpadTable(pagination)}
 
-              {confirmModal}
-            </EuiModalBody>
+            {confirmModal}
           </Fragment>
         )}
       </Paginate>

diff --git a/x-pack/plugins/canvas/public/components/workpad_loader/workpad_loader.scss b/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;
+    }
+  }
+}
diff --git a/x-pack/plugins/canvas/public/components/workpad_loader/workpad_search.js b/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}

diff --git a/x-pack/plugins/canvas/public/components/workpad_loader/workpad_upload.js b/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)}
   />

diff --git a/x-pack/plugins/canvas/public/components/workpad_manager/index.js b/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';