From 82724f4a4fbbb2569414c46be0421d5ae1f52229 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Thu, 19 Mar 2020 10:16:39 +0100 Subject: [PATCH 1/3] Replace hard-coded links Also remove all props from Main component --- .../public/application/components/main.tsx | 12 +++------ .../application/components/main_controls.tsx | 11 +++++--- .../components/output_pane/context_tab.tsx | 12 +++------ .../components/output_pane/parameters_tab.tsx | 7 ++--- .../application/components/request_flyout.tsx | 23 +++++++++------- .../public/application/context.tsx | 26 +++++++++++++++++-- .../painless_lab/public/application/index.tsx | 9 ++++--- x-pack/plugins/painless_lab/public/links.ts | 19 ++++++++++++++ x-pack/plugins/painless_lab/public/plugin.tsx | 4 ++- 9 files changed, 82 insertions(+), 41 deletions(-) create mode 100644 x-pack/plugins/painless_lab/public/links.ts diff --git a/x-pack/plugins/painless_lab/public/application/components/main.tsx b/x-pack/plugins/painless_lab/public/application/components/main.tsx index 4df3a484bddce..e9a77f8e926f8 100644 --- a/x-pack/plugins/painless_lab/public/application/components/main.tsx +++ b/x-pack/plugins/painless_lab/public/application/components/main.tsx @@ -4,7 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ -import { HttpSetup } from 'kibana/public'; import React, { useState, useEffect, FunctionComponent } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -18,15 +17,11 @@ import { Editor } from './editor'; import { RequestFlyout } from './request_flyout'; import { useAppContext } from '../context'; -interface Props { - http: HttpSetup; -} - -export const Main: FunctionComponent = ({ http }) => { - const { state, updateState } = useAppContext(); +export const Main: FunctionComponent = () => { + const { state, updateState, services, links } = useAppContext(); const [isRequestFlyoutOpen, setRequestFlyoutOpen] = useState(false); - const { inProgress, response, submit } = useSubmitCode(http); + const { inProgress, response, submit } = useSubmitCode(services.http); // Live-update the output and persist state as the user changes it. useEffect(() => { @@ -61,6 +56,7 @@ export const Main: FunctionComponent = ({ http }) => { void; isRequestFlyoutOpen: boolean; isLoading: boolean; reset: () => void; + links: Links; } -export function MainControls({ toggleRequestFlyout, isRequestFlyoutOpen, reset }: Props) { +export function MainControls({ toggleRequestFlyout, isRequestFlyoutOpen, reset, links }: Props) { const [isHelpOpen, setIsHelpOpen] = useState(false); const items = [ setIsHelpOpen(false)} > @@ -41,7 +44,7 @@ export function MainControls({ toggleRequestFlyout, isRequestFlyoutOpen, reset } setIsHelpOpen(false)} > @@ -53,7 +56,7 @@ export function MainControls({ toggleRequestFlyout, isRequestFlyoutOpen, reset } setIsHelpOpen(false)} > diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx index c9804b0e863d4..955fba2acad01 100644 --- a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx +++ b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx @@ -24,7 +24,7 @@ import { painlessContextOptions } from '../../common/constants'; import { useAppContext } from '../../context'; export const ContextTab: FunctionComponent = () => { - const { state, updateState } = useAppContext(); + const { state, updateState, links } = useAppContext(); const { context, document, index, query } = state; return ( @@ -48,10 +48,7 @@ export const ContextTab: FunctionComponent = () => { } labelAppend={ - + {i18n.translate('xpack.painlessLab.contextFieldDocLinkText', { defaultMessage: 'Context docs', })} @@ -115,10 +112,7 @@ export const ContextTab: FunctionComponent = () => { } labelAppend={ - + {i18n.translate('xpack.painlessLab.queryFieldDocLinkText', { defaultMessage: 'Query DSL docs', })} diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx index 2e21e8250b998..cc34b7a61735e 100644 --- a/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx +++ b/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx @@ -21,7 +21,7 @@ import { CodeEditor } from '../../../../../../../src/plugins/kibana_react/public import { useAppContext } from '../../context'; export const ParametersTab: FunctionComponent = () => { - const { state, updateState } = useAppContext(); + const { state, updateState, links } = useAppContext(); return ( <> @@ -44,10 +44,7 @@ export const ParametersTab: FunctionComponent = () => { fullWidth labelAppend={ - + {i18n.translate('xpack.painlessLab.parametersFieldDocLinkText', { defaultMessage: 'Parameters docs', })} diff --git a/x-pack/plugins/painless_lab/public/application/components/request_flyout.tsx b/x-pack/plugins/painless_lab/public/application/components/request_flyout.tsx index 2d0262503b162..34918a48cfc4e 100644 --- a/x-pack/plugins/painless_lab/public/application/components/request_flyout.tsx +++ b/x-pack/plugins/painless_lab/public/application/components/request_flyout.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { FunctionComponent } from 'react'; import { EuiCodeBlock, EuiTabbedContent, @@ -17,16 +17,21 @@ import { EuiFlexItem, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { Links } from '../../links'; -export function RequestFlyout({ - onClose, - requestBody, - response, -}: { +interface Props { onClose: any; requestBody: string; + links: Links; response?: string; -}) { +} + +export const RequestFlyout: FunctionComponent = ({ + onClose, + requestBody, + response, + links, +}) => { return ( @@ -48,7 +53,7 @@ export function RequestFlyout({ @@ -90,4 +95,4 @@ export function RequestFlyout({ ); -} +}; diff --git a/x-pack/plugins/painless_lab/public/application/context.tsx b/x-pack/plugins/painless_lab/public/application/context.tsx index f2cbadefd6a6b..e61b331c833a3 100644 --- a/x-pack/plugins/painless_lab/public/application/context.tsx +++ b/x-pack/plugins/painless_lab/public/application/context.tsx @@ -5,6 +5,9 @@ */ import React, { createContext, ReactNode, useState, useContext } from 'react'; +import { HttpSetup } from 'src/core/public'; + +import { Links } from '../links'; import { initialState, Store } from './store'; import { PAINLESS_LAB_KEY } from './constants'; @@ -12,11 +15,26 @@ import { PAINLESS_LAB_KEY } from './constants'; interface ContextValue { state: Store; updateState: (nextState: (s: Store) => Partial) => void; + services: { + http: HttpSetup; + }; + links: Links; } const AppContext = createContext(undefined as any); -export const AppContextProvider = ({ children }: { children: ReactNode }) => { +interface AppContextProviderArgs { + children: ReactNode; + value: { + http: HttpSetup; + links: Links; + }; +} + +export const AppContextProvider = ({ + children, + value: { http, links }, +}: AppContextProviderArgs) => { const [state, setState] = useState(() => ({ ...initialState, ...JSON.parse(localStorage.getItem(PAINLESS_LAB_KEY) || '{}'), @@ -32,7 +50,11 @@ export const AppContextProvider = ({ children }: { children: ReactNode }) => { setState(() => nextState); }; - return {children}; + return ( + + {children} + + ); }; export const useAppContext = () => { diff --git a/x-pack/plugins/painless_lab/public/application/index.tsx b/x-pack/plugins/painless_lab/public/application/index.tsx index 48124e61a2eb1..8057988d1488e 100644 --- a/x-pack/plugins/painless_lab/public/application/index.tsx +++ b/x-pack/plugins/painless_lab/public/application/index.tsx @@ -9,6 +9,8 @@ import { render, unmountComponentAtNode } from 'react-dom'; import { CoreSetup, CoreStart } from 'kibana/public'; import { createKibanaReactContext } from '../../../../../src/plugins/kibana_react/public'; +import { Links } from '../links'; + import { AppContextProvider } from './context'; import { Main } from './components/main'; @@ -16,11 +18,12 @@ interface AppDependencies { http: CoreSetup['http']; I18nContext: CoreStart['i18n']['Context']; uiSettings: CoreSetup['uiSettings']; + links: Links; } export function renderApp( element: HTMLElement | null, - { http, I18nContext, uiSettings }: AppDependencies + { http, I18nContext, uiSettings, links }: AppDependencies ) { if (!element) { return () => undefined; @@ -32,8 +35,8 @@ export function renderApp( render( - -
+ +
, diff --git a/x-pack/plugins/painless_lab/public/links.ts b/x-pack/plugins/painless_lab/public/links.ts new file mode 100644 index 0000000000000..6472b930ee554 --- /dev/null +++ b/x-pack/plugins/painless_lab/public/links.ts @@ -0,0 +1,19 @@ +/* + * 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 { DocLinksStart } from 'src/core/public'; + +export type Links = ReturnType; + +export const getLinks = ({ DOC_LINK_VERSION, ELASTIC_WEBSITE_URL }: DocLinksStart) => + Object.freeze({ + painlessExecuteAPI: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/painless/${DOC_LINK_VERSION}/painless-execute-api.html`, + painlessAPIReference: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/painless/${DOC_LINK_VERSION}/painless-api-reference.html`, + painlessWalkthrough: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/painless/${DOC_LINK_VERSION}/painless-walkthrough.html`, + painlessLangSpec: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/painless/${DOC_LINK_VERSION}/painless-lang-spec.html`, + esQueryDSL: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/query-dsl.html`, + modulesScriptingPreferParams: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/reference/${DOC_LINK_VERSION}/modules-scripting-using.html#prefer-params`, + }); diff --git a/x-pack/plugins/painless_lab/public/plugin.tsx b/x-pack/plugins/painless_lab/public/plugin.tsx index 57166c5d312a7..9488cf3d968ce 100644 --- a/x-pack/plugins/painless_lab/public/plugin.tsx +++ b/x-pack/plugins/painless_lab/public/plugin.tsx @@ -16,6 +16,7 @@ import { LICENSE_CHECK_STATE } from '../../licensing/public'; import { PLUGIN } from '../common/constants'; import { PluginDependencies } from './types'; import { registerPainless } from './application/register_painless'; +import { getLinks } from './links'; export class PainlessLabUIPlugin implements Plugin { constructor(ctx: PluginInitializerContext) {} @@ -69,6 +70,7 @@ export class PainlessLabUIPlugin implements Plugin Date: Thu, 19 Mar 2020 12:30:17 +0100 Subject: [PATCH 2/3] Pass the new links object to the request flyout too --- .../plugins/painless_lab/public/application/components/main.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/painless_lab/public/application/components/main.tsx b/x-pack/plugins/painless_lab/public/application/components/main.tsx index e9a77f8e926f8..faeeb9b9f86c9 100644 --- a/x-pack/plugins/painless_lab/public/application/components/main.tsx +++ b/x-pack/plugins/painless_lab/public/application/components/main.tsx @@ -65,6 +65,7 @@ export const Main: FunctionComponent = () => { {isRequestFlyoutOpen && ( setRequestFlyoutOpen(false)} requestBody={formatRequestPayload(state, PayloadFormat.PRETTY)} response={response ? formatJson(response.result || response.error) : ''} From 5f67bd09d9906e0f3d4282c2e47c4e1f6b9bbaa6 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Fri, 20 Mar 2020 10:25:46 +0100 Subject: [PATCH 3/3] Link directly to painless execute API's contexts --- .../public/application/components/output_pane/context_tab.tsx | 2 +- x-pack/plugins/painless_lab/public/links.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx index 955fba2acad01..d2541e7984b86 100644 --- a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx +++ b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx @@ -48,7 +48,7 @@ export const ContextTab: FunctionComponent = () => { } labelAppend={ - + {i18n.translate('xpack.painlessLab.contextFieldDocLinkText', { defaultMessage: 'Context docs', })} diff --git a/x-pack/plugins/painless_lab/public/links.ts b/x-pack/plugins/painless_lab/public/links.ts index 6472b930ee554..8f610140c3f34 100644 --- a/x-pack/plugins/painless_lab/public/links.ts +++ b/x-pack/plugins/painless_lab/public/links.ts @@ -11,6 +11,7 @@ export type Links = ReturnType; export const getLinks = ({ DOC_LINK_VERSION, ELASTIC_WEBSITE_URL }: DocLinksStart) => Object.freeze({ painlessExecuteAPI: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/painless/${DOC_LINK_VERSION}/painless-execute-api.html`, + painlessExecuteAPIContexts: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/painless/${DOC_LINK_VERSION}/painless-execute-api.html#_contexts`, painlessAPIReference: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/painless/${DOC_LINK_VERSION}/painless-api-reference.html`, painlessWalkthrough: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/painless/${DOC_LINK_VERSION}/painless-walkthrough.html`, painlessLangSpec: `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/painless/${DOC_LINK_VERSION}/painless-lang-spec.html`,