From bfd1c7e8a8d6e7aee440f63eade0a70176fafb06 Mon Sep 17 00:00:00 2001 From: Corey Robertson Date: Mon, 29 Jun 2020 15:00:34 -0400 Subject: [PATCH] PR Feedback --- .../public/components/paginate/index.tsx | 17 +- .../public/components/paginate/paginate.tsx | 35 +- .../workpad_templates.stories.storyshot | 566 ++++++++++++++++++ .../components/workpad_templates/index.tsx | 21 +- .../server/routes/templates/list.test.ts | 6 +- .../canvas/server/templates/theme_light.ts | 2 +- x-pack/plugins/canvas/types/canvas.ts | 8 +- 7 files changed, 614 insertions(+), 41 deletions(-) create mode 100644 x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot diff --git a/x-pack/plugins/canvas/public/components/paginate/index.tsx b/x-pack/plugins/canvas/public/components/paginate/index.tsx index 7c2531571378e..b6fabb2792d3e 100644 --- a/x-pack/plugins/canvas/public/components/paginate/index.tsx +++ b/x-pack/plugins/canvas/public/components/paginate/index.tsx @@ -6,27 +6,16 @@ import React, { useState, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; -import { Paginate as Component } from './paginate'; +import { Paginate as Component, PaginateProps, PaginateChildProps } from './paginate'; -interface InPaginateProps { +export { PaginateProps, PaginateChildProps }; +export interface InPaginateProps { perPage?: number; startPage?: number; rows: any[]; children: (props: PaginateChildProps) => React.ReactNode; } -export type PaginateProps = Omit & { - pageNumber: number; - totalPages: number; - nextPageEnabled: boolean; - prevPageEnabled: boolean; - setPage: (num: number) => void; - nextPage: () => void; - prevPage: () => void; -}; - -export type PaginateChildProps = Omit; - export const Paginate: React.FunctionComponent = ({ perPage = 10, startPage = 0, diff --git a/x-pack/plugins/canvas/public/components/paginate/paginate.tsx b/x-pack/plugins/canvas/public/components/paginate/paginate.tsx index d8e2439feb43d..5e4671011985f 100644 --- a/x-pack/plugins/canvas/public/components/paginate/paginate.tsx +++ b/x-pack/plugins/canvas/public/components/paginate/paginate.tsx @@ -6,24 +6,25 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { PaginateProps } from './'; +import { InPaginateProps } from './'; -export const Paginate: React.FunctionComponent = (props) => { - return ( - - {props.children({ - rows: props.rows, - perPage: props.perPage, - pageNumber: props.pageNumber, - totalPages: props.totalPages, - nextPageEnabled: props.nextPageEnabled, - prevPageEnabled: props.prevPageEnabled, - setPage: props.setPage, - nextPage: props.nextPage, - prevPage: props.prevPage, - })} - - ); +export type PaginateProps = Omit & { + pageNumber: number; + totalPages: number; + nextPageEnabled: boolean; + prevPageEnabled: boolean; + setPage: (num: number) => void; + nextPage: () => void; + prevPage: () => void; +}; + +export type PaginateChildProps = Omit; + +export const Paginate: React.FunctionComponent = ({ + children, + ...childrenProps +}) => { + return {children(childrenProps)}; }; Paginate.propTypes = { diff --git a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot new file mode 100644 index 0000000000000..ea31d1daa97ca --- /dev/null +++ b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot @@ -0,0 +1,566 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots components/WorkpadTemplates default 1`] = ` +
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ + Description + +
+ 		+
+ + Tags + +
+
+
+ Template name +
+
+ +
+ 		+
+ Description +
+
+ + This is a test template + +
+ 		+
+ Tags +
+
+
+
+
+
+
+
+ tag1 +
+
+
+
+
+
+
+
+
+ tag2 +
+
+
+
+
+
+ Template name +
+
+ +
+ 		+
+ Description +
+
+ + This is a second test template + +
+ 		+
+ Tags +
+
+
+
+
+
+
+
+ tag2 +
+
+
+
+
+
+
+
+
+ tag3 +
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+
+
+`; diff --git a/x-pack/plugins/canvas/public/components/workpad_templates/index.tsx b/x-pack/plugins/canvas/public/components/workpad_templates/index.tsx index 4bdf1a56ddfc7..b04e5f8b28908 100644 --- a/x-pack/plugins/canvas/public/components/workpad_templates/index.tsx +++ b/x-pack/plugins/canvas/public/components/workpad_templates/index.tsx @@ -4,9 +4,10 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useContext, useState, useEffect } from 'react'; +import React, { useContext, useState, useEffect, FunctionComponent } from 'react'; +import { EuiLoadingSpinner } from '@elastic/eui'; import { RouterContext } from '../router'; -// @ts-ignore Untyped Local +// @ts-expect-error import * as workpadService from '../../lib/workpad_service'; import { useKibana } from '../../../../../../src/plugins/kibana_react/public'; import { WorkpadTemplates as Component } from './workpad_templates'; @@ -19,9 +20,17 @@ interface WorkpadTemplatesProps { onClose: () => void; } -export const WorkpadTemplates: React.FunctionComponent = ({ onClose }) => { +const Creating: FunctionComponent<{ name: string }> = ({ name }) => ( +
+ Creating from template {name} +
+); +export const WorkpadTemplates: FunctionComponent = ({ onClose }) => { const router = useContext(RouterContext); const [templates, setTemplates] = useState(undefined); + const [creatingFromTemplateName, setCreatingFromTemplateName] = useState( + undefined + ); const kibana = useKibana(); useEffect(() => { @@ -43,18 +52,24 @@ export const WorkpadTemplates: React.FunctionComponent = } const createFromTemplate = async (template: CanvasTemplate) => { + setCreatingFromTemplateName(template.name); try { const result = await workpadService.createFromTemplate(template.id); if (router) { router.navigateTo('loadWorkpad', { id: result.data.id, page: 1 }); } } catch (error) { + setCreatingFromTemplateName(undefined); kibana.services.canvas.notify.error(error, { title: `Couldn't create workpad from template`, }); } }; + if (creatingFromTemplateName) { + return ; + } + return ( { beforeEach(() => { const httpService = httpServiceMock.createSetupContract(); - const router = httpService.createRouter('') as jest.Mocked; + const router = httpService.createRouter() as jest.Mocked; initializeListTemplates({ router, - logger: loggingServiceMock.create().get(), + logger: loggingSystemMock.create().get(), }); routeHandler = router.get.mock.calls[0][1]; diff --git a/x-pack/plugins/canvas/server/templates/theme_light.ts b/x-pack/plugins/canvas/server/templates/theme_light.ts index 3745a292b04d0..fb654a2fd2954 100644 --- a/x-pack/plugins/canvas/server/templates/theme_light.ts +++ b/x-pack/plugins/canvas/server/templates/theme_light.ts @@ -8,12 +8,12 @@ import { CanvasTemplate } from '../../types'; export const light: CanvasTemplate = { id: 'workpad-template-890b80e5-a3eb-431d-b8ed-37587ffd32c3', name: 'Light', - css: '', help: 'Light color themed presentation deck', tags: ['presentation'], template_key: 'light-theme', template: { name: 'Light', + css: '', width: 1080, height: 720, page: 0, diff --git a/x-pack/plugins/canvas/types/canvas.ts b/x-pack/plugins/canvas/types/canvas.ts index e23903ec4355c..2f20dc88fdec4 100644 --- a/x-pack/plugins/canvas/types/canvas.ts +++ b/x-pack/plugins/canvas/types/canvas.ts @@ -16,9 +16,9 @@ export interface CanvasAsset { export interface CanvasElement { id: string; position: ElementPosition; - type?: 'element'; + type: 'element'; expression: string; - filter?: string; + filter: string; } export interface CanvasGroup { @@ -52,13 +52,15 @@ export interface CanvasWorkpad { width: number; } +type CanvasTemplateElement = Omit; +type CanvasTemplatePage = Omit & { elements: CanvasTemplateElement[] }; export interface CanvasTemplate { id: string; name: string; help: string; tags: string[]; template_key: string; - template?: Omit; + template?: Omit & { pages: CanvasTemplatePage[] }; } export interface CanvasWorkpadBoundingBox {