Add options to links

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

Hide file tree

Showing 7 changed files with 67 additions and 13 deletions.
diff --git a/src/plugins/navigation_embeddable/common/content_management/index.ts b/src/plugins/navigation_embeddable/common/content_management/index.ts
@@ -13,6 +13,7 @@ export type { NavigationEmbeddableContentType } from '../types';
 export type {
   NavigationLinkType,
   NavigationLayoutType,
+  NavigationLinkOptions,
   NavigationEmbeddableLink,
   NavigationEmbeddableItem,
   NavigationEmbeddableCrudTypes,
@@ -24,6 +25,8 @@ export {
   DASHBOARD_LINK_TYPE,
   NAV_VERTICAL_LAYOUT,
   NAV_HORIZONTAL_LAYOUT,
+  DEFAULT_URL_LINK_OPTIONS,
+  DEFAULT_DASHBOARD_LINK_OPTIONS,
 } from './latest';
 
 export * as NavigationEmbeddableV1 from './v1';
diff --git a/src/plugins/navigation_embeddable/common/content_management/v1/cm_services.ts b/src/plugins/navigation_embeddable/common/content_management/v1/cm_services.ts
@@ -24,6 +24,25 @@ const navigationEmbeddableLinkSchema = schema.object({
   destination: schema.string(),
   label: schema.maybe(schema.string()),
   order: schema.number(),
+  options: schema.maybe(
+    schema.oneOf([
+      schema.object(
+        {
+          openInNewTab: schema.boolean(),
+          useCurrentFilters: schema.boolean(),
+          useCurrentDateRange: schema.boolean(),
+        },
+        { unknowns: 'forbid' }
+      ),
+      schema.object(
+        {
+          openInNewTab: schema.boolean(),
+          encodeUrl: schema.maybe(schema.boolean()),
+        },
+        { unknowns: 'forbid' }
+      ),
+    ])
+  ),
 });
 
 const navigationEmbeddableAttributesSchema = schema.object(

diff --git a/src/plugins/navigation_embeddable/common/content_management/v1/constants.ts b/src/plugins/navigation_embeddable/common/content_management/v1/constants.ts
@@ -6,12 +6,29 @@
  * Side Public License, v 1.
  */
 
+import { UrlDrilldownOptions } from '@kbn/ui-actions-enhanced-plugin/public';
+import { DashboardDrilldownOptions } from '@kbn/presentation-util-plugin/public';
+
 /**
  * Link types
  */
 export const DASHBOARD_LINK_TYPE = 'dashboardLink';
 export const EXTERNAL_LINK_TYPE = 'externalLink';
 
+/**
+ * Link options
+ */
+export const DEFAULT_DASHBOARD_LINK_OPTIONS: DashboardDrilldownOptions = {
+  openInNewTab: false,
+  useCurrentDateRange: true,
+  useCurrentFilters: true,
+};
+
+export const DEFAULT_URL_LINK_OPTIONS: UrlDrilldownOptions = {
+  encodeUrl: true,
+  openInNewTab: true,
+};
+
 /**
  * Layout options
  */

diff --git a/src/plugins/navigation_embeddable/common/content_management/v1/index.ts b/src/plugins/navigation_embeddable/common/content_management/v1/index.ts
@@ -11,6 +11,7 @@ export type {
   NavigationEmbeddableCrudTypes,
   NavigationEmbeddableAttributes,
   NavigationEmbeddableLink,
+  NavigationLinkOptions,
   NavigationLayoutType,
   NavigationLinkType,
 } from './types';
@@ -20,4 +21,6 @@ export {
   DASHBOARD_LINK_TYPE,
   NAV_VERTICAL_LAYOUT,
   NAV_HORIZONTAL_LAYOUT,
+  DEFAULT_URL_LINK_OPTIONS,
+  DEFAULT_DASHBOARD_LINK_OPTIONS,
 } from './constants';
diff --git a/src/plugins/navigation_embeddable/common/content_management/v1/types.ts b/src/plugins/navigation_embeddable/common/content_management/v1/types.ts
@@ -11,6 +11,8 @@ import type {
   SavedObjectCreateOptions,
   SavedObjectUpdateOptions,
 } from '@kbn/content-management-utils';
+import { UrlDrilldownOptions } from '@kbn/ui-actions-enhanced-plugin/public';
+import { DashboardDrilldownOptions } from '@kbn/presentation-util-plugin/public';
 import { NavigationEmbeddableContentType } from '../../types';
 import {
   DASHBOARD_LINK_TYPE,
@@ -35,12 +37,15 @@ export type NavigationEmbeddableCrudTypes = ContentManagementCrudTypes<
  */
 export type NavigationLinkType = typeof DASHBOARD_LINK_TYPE | typeof EXTERNAL_LINK_TYPE;
 
+export type NavigationLinkOptions = DashboardDrilldownOptions | UrlDrilldownOptions;
+
 export interface NavigationEmbeddableLink {
   id: string;
   type: NavigationLinkType;
   destination: string;
   label?: string;
   order: number;
+  options?: NavigationLinkOptions;
 }
 
 export type NavigationLayoutType = typeof NAV_HORIZONTAL_LAYOUT | typeof NAV_VERTICAL_LAYOUT;

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
@@ -41,7 +41,10 @@ import {
   NavigationLinkType,
   EXTERNAL_LINK_TYPE,
   DASHBOARD_LINK_TYPE,
+  NavigationLinkOptions,
   NavigationEmbeddableLink,
+  DEFAULT_URL_LINK_OPTIONS,
+  DEFAULT_DASHBOARD_LINK_OPTIONS,
 } from '../../../common/content_management';
 import { NavEmbeddableStrings } from '../navigation_embeddable_strings';
 import { DashboardItem, NavigationLinkInfo } from '../../embeddable/types';
@@ -71,15 +74,9 @@ 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 | UrlDrilldownOptions>({
-    openInNewTab: false,
-    useCurrentDateRange: true,
-    useCurrentFilters: true,
-  });
-
-  // useEffect(() => {
-  //   console.log(linkOptions);
-  // }, [linkOptions]);
+  const [linkOptions, setLinkOptions] = useState<NavigationLinkOptions | undefined>(
+    link?.options ?? DEFAULT_DASHBOARD_LINK_OPTIONS
+  );
 
   const linkTypes: EuiRadioGroupOption[] = useMemo(() => {
     return ([DASHBOARD_LINK_TYPE, EXTERNAL_LINK_TYPE] as NavigationLinkType[]).map((type) => {
@@ -158,11 +155,17 @@ export const NavigationEmbeddableLinkEditor = ({
               idSelected={selectedLinkType}
               onChange={(id) => {
                 if (link?.type === id) {
+                  setLinkOptions(link.options);
                   setLinkDestination(link.destination);
                   setCurrentLinkLabel(link.label ?? '');
                 } else {
                   setLinkDestination(undefined);
                   setCurrentLinkLabel('');
+                  if (id === DASHBOARD_LINK_TYPE) {
+                    setLinkOptions(DEFAULT_DASHBOARD_LINK_OPTIONS);
+                  } else {
+                    setLinkOptions(DEFAULT_URL_LINK_OPTIONS);
+                  }
                 }
                 setDefaultLinkLabel(undefined);
                 setSelectedLinkType(id as NavigationLinkType);
@@ -200,13 +203,16 @@ export const NavigationEmbeddableLinkEditor = ({
             {selectedLinkType === DASHBOARD_LINK_TYPE ? (
               <DashboardDrilldownOptionsComponent
                 options={linkOptions as DashboardDrilldownOptions}
-                onOptionChange={(change) => setLinkOptions({ ...linkOptions, ...change })}
+                onOptionChange={(change) =>
+                  setLinkOptions({ ...(linkOptions as DashboardDrilldownOptions), ...change })
+                }
               />
             ) : (
-              // <UrlDrilldownCollectConfig />
               <UrlDrilldownOptionsComponent
                 options={linkOptions as UrlDrilldownOptions}
-                onOptionChange={(change) => setLinkOptions({ ...linkOptions, ...change })}
+                onOptionChange={(change) =>
+                  setLinkOptions({ ...(linkOptions as UrlDrilldownOptions), ...change })
+                }
               />
             )}
           </EuiFormRow>
@@ -230,6 +236,7 @@ export const NavigationEmbeddableLinkEditor = ({
                     type: selectedLinkType,
                     id: link?.id ?? uuidv4(),
                     destination: linkDestination,
+                    options: linkOptions,
                   });
 
                   onClose();

diff --git a/...ins/navigation_embeddable/public/components/editor/navigation_embeddable_panel_editor.tsx b/...ins/navigation_embeddable/public/components/editor/navigation_embeddable_panel_editor.tsx
@@ -205,7 +205,7 @@ const NavigationEmbeddablePanelEditor = ({
                               parentDashboard={parentDashboard}
                               editLink={() => addOrEditLink(link)}
                               deleteLink={() => deleteLink(link.id)}
-                              dragHandleProps={provided.dragHandleProps}
+                              dragHandleProps={provided.dragHandleProps ?? undefined} // casting `null` to `undefined`
                             />
                           )}
                         </EuiDraggable>