Add URL options toggles

elastic · Aug 17, 2023 · ec4b98e · ec4b98e
1 parent f7e8309
commit ec4b98e
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 41 deletions.
diff --git a/...gins/navigation_embeddable/public/components/editor/navigation_embeddable_link_editor.tsx b/...gins/navigation_embeddable/public/components/editor/navigation_embeddable_link_editor.tsx
@@ -7,7 +7,7 @@
  */
 
 import { v4 as uuidv4 } from 'uuid';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
   EuiForm,
@@ -28,8 +28,8 @@ import {
 } from '@elastic/eui';
 import { DashboardContainer } from '@kbn/dashboard-plugin/public/dashboard_container';
 import {
-  UrlDrilldownCollectConfig,
-  UrlDrilldownConfig,
+  UrlDrilldownOptions,
+  UrlDrilldownOptionsComponent,
 } from '@kbn/ui-actions-enhanced-plugin/public';
 import {
   withSuspense,
@@ -71,13 +71,15 @@ export const NavigationEmbeddableLinkEditor = ({
   const [defaultLinkLabel, setDefaultLinkLabel] = useState<string | undefined>();
   const [currentLinkLabel, setCurrentLinkLabel] = useState<string>(link?.label ?? '');
   const [linkDestination, setLinkDestination] = useState<string | undefined>(link?.destination);
-  const [linkOptions, setLinkOptions] = useState<DashboardDrilldownOptions>({
+  const [linkOptions, setLinkOptions] = useState<DashboardDrilldownOptions | UrlDrilldownOptions>({
     openInNewTab: false,
     useCurrentDateRange: true,
     useCurrentFilters: true,
   });
 
-  // | UrlDrilldownConfig
+  // useEffect(() => {
+  //   console.log(linkOptions);
+  // }, [linkOptions]);
 
   const linkTypes: EuiRadioGroupOption[] = useMemo(() => {
     return ([DASHBOARD_LINK_TYPE, EXTERNAL_LINK_TYPE] as NavigationLinkType[]).map((type) => {
@@ -197,12 +199,15 @@ export const NavigationEmbeddableLinkEditor = ({
           <EuiFormRow label={'Options'}>
             {selectedLinkType === DASHBOARD_LINK_TYPE ? (
               <DashboardDrilldownOptionsComponent
-                options={linkOptions}
+                options={linkOptions as DashboardDrilldownOptions}
                 onOptionChange={(change) => setLinkOptions({ ...linkOptions, ...change })}
               />
             ) : (
               // <UrlDrilldownCollectConfig />
-              <>Config</>
+              <UrlDrilldownOptionsComponent
+                options={linkOptions as UrlDrilldownOptions}
+                onOptionChange={(change) => setLinkOptions({ ...linkOptions, ...change })}
+              />
             )}
           </EuiFormRow>
         </EuiForm>

diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/index.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/index.ts
@@ -6,4 +6,7 @@
  * Side Public License, v 1.
  */
 
-export { UrlDrilldownCollectConfig } from './url_drilldown_collect_config';
+export {
+  UrlDrilldownCollectConfig,
+  UrlDrilldownOptionsComponent,
+} from './url_drilldown_collect_config';
diff --git a/...enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/index.ts b/...enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/index.ts
@@ -7,4 +7,4 @@
  */
 
 export type { UrlDrilldownCollectConfigProps } from './lazy';
-export { UrlDrilldownCollectConfig } from './lazy';
+export { UrlDrilldownCollectConfig, UrlDrilldownOptionsComponent } from './lazy';
diff --git a/...enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/lazy.tsx b/...enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/lazy.tsx
@@ -7,6 +7,7 @@
  */
 
 import * as React from 'react';
+import { UrlDrilldownOptionsProps } from './url_drilldown_options';
 import type { UrlDrilldownCollectConfigProps } from './url_drilldown_collect_config';
 
 const UrlDrilldownCollectConfigLazy = React.lazy(() =>
@@ -24,3 +25,17 @@ export const UrlDrilldownCollectConfig: React.FC<UrlDrilldownCollectConfigProps>
     </React.Suspense>
   );
 };
+
+const UrlDrilldownOptionsComponentLazy = React.lazy(() =>
+  import('./url_drilldown_options').then(({ UrlDrilldownOptionsComponent }) => ({
+    default: UrlDrilldownOptionsComponent,
+  }))
+);
+
+export const UrlDrilldownOptionsComponent: React.FC<UrlDrilldownOptionsProps> = (props) => {
+  return (
+    <React.Suspense fallback={null}>
+      <UrlDrilldownOptionsComponentLazy {...props} />
+    </React.Suspense>
+  );
+};
diff --git a/...ns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx b/...ns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx
@@ -23,12 +23,10 @@ import './index.scss';
 import {
   txtUrlTemplateSyntaxHelpLinkText,
   txtUrlTemplateLabel,
-  txtUrlTemplateOpenInNewTab,
   txtUrlTemplateAdditionalOptions,
-  txtUrlTemplateEncodeUrl,
-  txtUrlTemplateEncodeDescription,
 } from './i18n';
 import { VariablePopover } from '../variable_popover';
+import { UrlDrilldownOptionsComponent } from './lazy';
 
 export interface UrlDrilldownCollectConfigProps {
   config: UrlDrilldownConfig;
@@ -114,31 +112,12 @@ export const UrlDrilldownCollectConfig: React.FC<UrlDrilldownCollectConfigProps>
       >
         <EuiSpacer size={'s'} />
         <EuiPanel color="subdued" borderRadius="none" hasShadow={false} style={{ border: 'none' }}>
-          <EuiFormRow hasChildLabel={false}>
-            <EuiSwitch
-              id="openInNewTab"
-              name="openInNewTab"
-              label={txtUrlTemplateOpenInNewTab}
-              checked={config.openInNewTab}
-              onChange={() => onConfig({ ...config, openInNewTab: !config.openInNewTab })}
-              data-test-subj="urlDrilldownOpenInNewTab"
-            />
-          </EuiFormRow>
-          <EuiFormRow hasChildLabel={false} fullWidth>
-            <EuiSwitch
-              id="encodeUrl"
-              name="encodeUrl"
-              label={
-                <>
-                  {txtUrlTemplateEncodeUrl}
-                  <EuiSpacer size={'s'} />
-                  <EuiTextColor color="subdued">{txtUrlTemplateEncodeDescription}</EuiTextColor>
-                </>
-              }
-              checked={config.encodeUrl ?? true}
-              onChange={() => onConfig({ ...config, encodeUrl: !(config.encodeUrl ?? true) })}
-            />
-          </EuiFormRow>
+          <UrlDrilldownOptionsComponent
+            options={config}
+            onOptionChange={(change) => {
+              onConfig({ ...config, ...change });
+            }}
+          />
         </EuiPanel>
       </EuiAccordion>
     </>

diff --git a/...rilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_options.tsx b/...rilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_options.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiFormRow, EuiSpacer, EuiSwitch, EuiTextColor } from '@elastic/eui';
+import { UrlDrilldownOptions } from '../../types';
+import {
+  txtUrlTemplateEncodeDescription,
+  txtUrlTemplateEncodeUrl,
+  txtUrlTemplateOpenInNewTab,
+} from './i18n';
+
+export interface UrlDrilldownOptionsProps {
+  options: UrlDrilldownOptions;
+  onOptionChange: (newOptions: Partial<UrlDrilldownOptions>) => void;
+}
+
+export const UrlDrilldownOptionsComponent = ({
+  options,
+  onOptionChange,
+}: UrlDrilldownOptionsProps) => {
+  return (
+    <>
+      <EuiFormRow hasChildLabel={false}>
+        <EuiSwitch
+          id="openInNewTab"
+          name="openInNewTab"
+          label={txtUrlTemplateOpenInNewTab}
+          checked={options.openInNewTab}
+          onChange={() => onOptionChange({ openInNewTab: !options.openInNewTab })}
+          data-test-subj="urlDrilldownOpenInNewTab"
+        />
+      </EuiFormRow>
+      <EuiFormRow hasChildLabel={false} fullWidth>
+        <EuiSwitch
+          id="encodeUrl"
+          name="encodeUrl"
+          label={
+            <>
+              {txtUrlTemplateEncodeUrl}
+              <EuiSpacer size={'s'} />
+              <EuiTextColor color="subdued">{txtUrlTemplateEncodeDescription}</EuiTextColor>
+            </>
+          }
+          checked={options.encodeUrl ?? true}
+          onChange={() => onOptionChange({ encodeUrl: !(options.encodeUrl ?? true) })}
+        />
+      </EuiFormRow>
+    </>
+  );
+};
diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/index.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/index.ts
@@ -6,8 +6,13 @@
  * Side Public License, v 1.
  */
 
-export type { UrlDrilldownConfig, UrlDrilldownGlobalScope, UrlDrilldownScope } from './types';
-export { UrlDrilldownCollectConfig } from './components';
+export type {
+  UrlDrilldownConfig,
+  UrlDrilldownGlobalScope,
+  UrlDrilldownOptions,
+  UrlDrilldownScope,
+} from './types';
+export { UrlDrilldownCollectConfig, UrlDrilldownOptionsComponent } from './components';
 export {
   validateUrlTemplate as urlDrilldownValidateUrlTemplate,
   validateUrl as urlDrilldownValidateUrl,

diff --git a/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts b/src/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/types.ts
@@ -6,12 +6,15 @@
  * Side Public License, v 1.
  */
 
-export type UrlDrilldownConfig = {
-  url: { format?: 'handlebars_v1'; template: string };
+export type UrlDrilldownOptions = {
   openInNewTab: boolean;
   encodeUrl?: boolean;
 };
 
+export type UrlDrilldownConfig = {
+  url: { format?: 'handlebars_v1'; template: string };
+} & UrlDrilldownOptions;
+
 /**
  * URL drilldown has 3 sources for variables: global, context and event variables
  */

diff --git a/src/plugins/ui_actions_enhanced/public/index.ts b/src/plugins/ui_actions_enhanced/public/index.ts
@@ -44,11 +44,13 @@ export type {
 export type {
   UrlDrilldownConfig,
   UrlDrilldownGlobalScope,
+  UrlDrilldownOptions,
   UrlDrilldownScope,
 } from './drilldowns/url_drilldown';
 export {
   urlDrilldownCompileUrl,
   UrlDrilldownCollectConfig,
+  UrlDrilldownOptionsComponent,
   urlDrilldownGlobalScopeProvider,
   urlDrilldownValidateUrl,
   urlDrilldownValidateUrlTemplate,