[Painless] Replace hard-coded links (#60603)

* Replace hard-coded links Also remove all props from Main component * Pass the new links object to the request flyout too * Link directly to painless execute API's contexts
elastic · Mar 20, 2020 · ec762ab · ec762ab
1 parent ec81bf6
commit ec762ab
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 41 deletions.
diff --git 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<Props> = ({ 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<Props> = ({ http }) => {
       </EuiFlexGroup>
 
       <MainControls
+        links={links}
         isLoading={inProgress}
         toggleRequestFlyout={toggleRequestFlyout}
         isRequestFlyoutOpen={isRequestFlyoutOpen}
@@ -69,6 +65,7 @@ export const Main: FunctionComponent<Props> = ({ http }) => {
 
       {isRequestFlyoutOpen && (
         <RequestFlyout
+          links={links}
           onClose={() => setRequestFlyoutOpen(false)}
           requestBody={formatRequestPayload(state, PayloadFormat.PRETTY)}
           response={response ? formatJson(response.result || response.error) : ''}

diff --git a/x-pack/plugins/painless_lab/public/application/components/main_controls.tsx b/x-pack/plugins/painless_lab/public/application/components/main_controls.tsx
@@ -15,21 +15,24 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
+import { Links } from '../../links';
+
 interface Props {
   toggleRequestFlyout: () => 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 = [
     <EuiContextMenuItem
       key="walkthrough"
       icon="popout"
-      href="https://www.elastic.co/guide/en/elasticsearch/painless/7.5/painless-walkthrough.html"
+      href={links.painlessWalkthrough}
       target="_blank"
       onClick={() => setIsHelpOpen(false)}
     >
@@ -41,7 +44,7 @@ export function MainControls({ toggleRequestFlyout, isRequestFlyoutOpen, reset }
     <EuiContextMenuItem
       key="api"
       icon="popout"
-      href="https://www.elastic.co/guide/en/elasticsearch/painless/current/painless-api-reference.html"
+      href={links.painlessAPIReference}
       target="_blank"
       onClick={() => setIsHelpOpen(false)}
     >
@@ -53,7 +56,7 @@ export function MainControls({ toggleRequestFlyout, isRequestFlyoutOpen, reset }
     <EuiContextMenuItem
       key="languageSpec"
       icon="popout"
-      href="https://www.elastic.co/guide/en/elasticsearch/painless/current/painless-lang-spec.html"
+      href={links.painlessLangSpec}
       target="_blank"
       onClick={() => 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
@@ -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={
           <EuiText size="xs">
-            <EuiLink
-              href="https://www.elastic.co/guide/en/elasticsearch/painless/current/painless-execute-api.html"
-              target="_blank"
-            >
+            <EuiLink href={links.painlessExecuteAPIContexts} target="_blank">
               {i18n.translate('xpack.painlessLab.contextFieldDocLinkText', {
                 defaultMessage: 'Context docs',
               })}
@@ -115,10 +112,7 @@ export const ContextTab: FunctionComponent = () => {
           }
           labelAppend={
             <EuiText size="xs">
-              <EuiLink
-                href="https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl.html"
-                target="_blank"
-              >
+              <EuiLink href={links.esQueryDSL} target="_blank">
                 {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
@@ -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 (
     <>
       <EuiSpacer size="m" />
@@ -44,10 +44,7 @@ export const ParametersTab: FunctionComponent = () => {
         fullWidth
         labelAppend={
           <EuiText size="xs">
-            <EuiLink
-              href="https://www.elastic.co/guide/en/elasticsearch/reference/master/modules-scripting-using.html#prefer-params"
-              target="_blank"
-            >
+            <EuiLink href={links.modulesScriptingPreferParams} target="_blank">
               {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
@@ -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<Props> = ({
+  onClose,
+  requestBody,
+  response,
+  links,
+}) => {
   return (
     <EuiFlyout onClose={onClose} maxWidth={640}>
       <EuiFlyoutHeader>
@@ -48,7 +53,7 @@ export function RequestFlyout({
             <EuiButtonEmpty
               size="s"
               flush="right"
-              href="https://www.elastic.co/guide/en/elasticsearch/painless/current/painless-execute-api.html"
+              href={links.painlessExecuteAPI}
               target="_blank"
               iconType="help"
             >
@@ -90,4 +95,4 @@ export function RequestFlyout({
       </EuiFlyoutBody>
     </EuiFlyout>
   );
-}
+};
diff --git a/x-pack/plugins/painless_lab/public/application/context.tsx b/x-pack/plugins/painless_lab/public/application/context.tsx
@@ -5,18 +5,36 @@
  */
 
 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';
 
 interface ContextValue {
   state: Store;
   updateState: (nextState: (s: Store) => Partial<Store>) => void;
+  services: {
+    http: HttpSetup;
+  };
+  links: Links;
 }
 
 const AppContext = createContext<ContextValue>(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<Store>(() => ({
     ...initialState,
     ...JSON.parse(localStorage.getItem(PAINLESS_LAB_KEY) || '{}'),
@@ -32,7 +50,11 @@ export const AppContextProvider = ({ children }: { children: ReactNode }) => {
     setState(() => nextState);
   };
 
-  return <AppContext.Provider value={{ updateState, state }}>{children}</AppContext.Provider>;
+  return (
+    <AppContext.Provider value={{ updateState, state, services: { http }, links }}>
+      {children}
+    </AppContext.Provider>
+  );
 };
 
 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
@@ -9,18 +9,21 @@ 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';
 
 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(
     <I18nContext>
       <KibanaReactContextProvider>
-        <AppContextProvider>
-          <Main http={http} />
+        <AppContextProvider value={{ http, links }}>
+          <Main />
         </AppContextProvider>
       </KibanaReactContextProvider>
     </I18nContext>,

diff --git a/x-pack/plugins/painless_lab/public/links.ts b/x-pack/plugins/painless_lab/public/links.ts
@@ -0,0 +1,20 @@
+/*
+ * 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<typeof getLinks>;
+
+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`,
+    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
@@ -14,7 +14,9 @@ import { FeatureCatalogueCategory } from '../../../../src/plugins/home/public';
 import { LICENSE_CHECK_STATE } from '../../licensing/public';
 
 import { PLUGIN } from '../common/constants';
+
 import { PluginDependencies } from './types';
+import { getLinks } from './links';
 import { LanguageService } from './services';
 
 export class PainlessLabUIPlugin implements Plugin<void, void, PluginDependencies> {
@@ -69,6 +71,7 @@ export class PainlessLabUIPlugin implements Plugin<void, void, PluginDependencie
         const {
           i18n: { Context: I18nContext },
           notifications,
+          docLinks,
         } = core;
 
         this.languageService.setup();
@@ -87,7 +90,7 @@ export class PainlessLabUIPlugin implements Plugin<void, void, PluginDependencie
         }
 
         const { renderApp } = await import('./application');
-        return renderApp(element, { I18nContext, http, uiSettings });
+        return renderApp(element, { I18nContext, http, uiSettings, links: getLinks(docLinks) });
       },
     });
   }