Canvas: Element data links refactor (#90636)

Co-authored-by: Leon Sorokin <[email protected]>

Author: adela-almasan

docs/sources/panels-visualizations/visualizations/canvas/index.md

@@ -190,12 +190,12 @@ You can configure a canvas data link to open with a single click on the element.
 1. Click the element to which you want to add the data link.
 1. In either the inline editor or panel editor, expand the **Selected element** editor.
 1. Scroll down to the **Data links** section and expand it.
-1. Toggle the **One-click** switch in the element's data links section.
+1. In the **One-click** section, choose **Link**.
 1. Disable inline editing.
 
 The first data link in the list will be configured as your one-click data link. If you want to change the one-click data link, simply drag the desired data link to the top of the list.
 
-{{< video-embed src="/media/docs/grafana/panels-visualizations/canvas-one-click-data-link.mp4" >}}
+{{< video-embed src="/media/docs/grafana/panels-visualizations/canvas-one-click-datalink-.mp4" >}}
 
 ## Panel options
 

packages/grafana-data/src/field/fieldOverrides.ts

@@ -479,7 +479,6 @@ export const getLinksSupplier =
           href,
           title: replaceVariables(link.title || '', dataLinkScopedVars),
           target: link.targetBlank ? '_blank' : undefined,
-          sortIndex: link.sortIndex,
           onClick: (evt: MouseEvent, origin: Field) => {
             link.onClick!({
               origin: origin ?? field,
@@ -495,7 +494,6 @@ export const getLinksSupplier =
           title: replaceVariables(link.title || '', dataLinkScopedVars),
           target: link.targetBlank ? '_blank' : undefined,
           origin: field,
-          sortIndex: link.sortIndex,
         };
       }
 

packages/grafana-data/src/index.ts

@@ -793,6 +793,7 @@ export {
   VariableOrigin,
   type VariableSuggestion,
   VariableSuggestionsScope,
+  OneClickMode,
 } from './types/dataLink';
 export { DataFrameType } from './types/dataFrameTypes';
 export {

packages/grafana-data/src/types/dataLink.ts

@@ -99,7 +99,6 @@ export interface LinkModel<T = any> {
 
   // When a click callback exists, this is passed the raw mouse|react event
   onClick?: (e: any, origin?: any) => void;
-  sortIndex?: number;
 }
 
 /**
@@ -130,3 +129,8 @@ export interface VariableSuggestion {
 export enum VariableSuggestionsScope {
   Values = 'values',
 }
+
+export enum OneClickMode {
+  Link = 'link',
+  Off = 'off',
+}

packages/grafana-schema/src/raw/composable/canvas/panelcfg/x/CanvasPanelCfg_types.gen.ts

@@ -104,7 +104,6 @@ export interface CanvasElementOptions {
   connections?: Array<CanvasConnection>;
   constraint?: Constraint;
   name: string;
-  oneClickLinks?: boolean;
   placement?: Placement;
   type: string;
 }

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx

@@ -17,21 +17,20 @@ interface DataLinksInlineEditorProps {
   onChange: (links: DataLink[]) => void;
   getSuggestions: () => VariableSuggestion[];
   data: DataFrame[];
-  oneClickEnabled?: boolean;
+  showOneClick?: boolean;
 }
 
 export const DataLinksInlineEditor = ({
   links,
   onChange,
   getSuggestions,
   data,
-  oneClickEnabled = false,
+  showOneClick = false,
 }: DataLinksInlineEditorProps) => {
   const [editIndex, setEditIndex] = useState<number | null>(null);
   const [isNew, setIsNew] = useState(false);
 
   const [linksSafe, setLinksSafe] = useState<DataLink[]>([]);
-  links?.sort((a, b) => (a.sortIndex ?? 0) - (b.sortIndex ?? 0));
 
   useEffect(() => {
     setLinksSafe(links ?? []);
@@ -81,24 +80,20 @@ export const DataLinksInlineEditor = ({
       return;
     }
 
-    const copy = [...linksSafe];
-    const link = copy[result.source.index];
-    link.sortIndex = result.destination.index;
-
-    const swapLink = copy[result.destination.index];
-    swapLink.sortIndex = result.source.index;
+    const update = cloneDeep(linksSafe);
+    const link = update[result.source.index];
 
-    copy.splice(result.source.index, 1);
-    copy.splice(result.destination.index, 0, link);
+    update.splice(result.source.index, 1);
+    update.splice(result.destination.index, 0, link);
 
-    setLinksSafe(copy);
-    onChange(linksSafe);
+    setLinksSafe(update);
+    onChange(update);
   };
 
-  const renderFirstLink = (linkJSX: ReactNode) => {
-    if (oneClickEnabled) {
+  const renderFirstLink = (linkJSX: ReactNode, key: string) => {
+    if (showOneClick) {
       return (
-        <div className={styles.oneClickOverlay}>
+        <div className={styles.oneClickOverlay} key={key}>
           <span className={styles.oneClickSpan}>One-click</span>
           {linkJSX}
         </div>
@@ -130,7 +125,7 @@ export const DataLinksInlineEditor = ({
                 );
 
                 if (idx === 0) {
-                  return renderFirstLink(linkJSX);
+                  return renderFirstLink(linkJSX, key);
                 }
 
                 return linkJSX;

public/app/features/canvas/element.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 
-import { DataLink, RegistryItem } from '@grafana/data';
+import { DataLink, RegistryItem, OneClickMode } from '@grafana/data';
 import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
 import { ColorDimensionConfig, ScaleDimensionConfig } from '@grafana/schema';
 import { config } from 'app/core/config';
@@ -33,7 +33,7 @@ export interface CanvasElementOptions<TConfig = any> {
   border?: LineConfig;
   connections?: CanvasConnection[];
   links?: DataLink[];
-  oneClickLinks?: boolean;
+  oneClickMode?: OneClickMode;
 }
 
 // Unit is percentage from the middle of the element

public/app/features/canvas/elements/cloud.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { v4 as uuidv4 } from 'uuid';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, OneClickMode } from '@grafana/data';
 import { config } from 'app/core/config';
 import { DimensionContext } from 'app/features/dimensions';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
@@ -99,6 +99,7 @@ export const cloudItem: CanvasElementItem = {
       left: options?.placement?.left,
       rotation: options?.placement?.rotation ?? 0,
     },
+    oneClickMode: options?.oneClickMode ?? OneClickMode.Off,
     links: options?.links ?? [],
   }),
 

public/app/features/canvas/elements/droneFront.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, OneClickMode } from '@grafana/data';
 import { ScalarDimensionConfig } from '@grafana/schema';
 import { useStyles2 } from '@grafana/ui';
 import { DimensionContext } from 'app/features/dimensions';
@@ -94,6 +94,8 @@ export const droneFrontItem: CanvasElementItem = {
       left: options?.placement?.left,
       rotation: options?.placement?.rotation ?? 0,
     },
+    oneClickMode: options?.oneClickMode ?? OneClickMode.Off,
+    links: options?.links ?? [],
   }),
 
   // Called when data changes

public/app/features/canvas/elements/droneSide.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 
-import { GrafanaTheme2 } from '@grafana/data';
+import { GrafanaTheme2, OneClickMode } from '@grafana/data';
 import { ScalarDimensionConfig } from '@grafana/schema';
 import { useStyles2 } from '@grafana/ui';
 import { DimensionContext } from 'app/features/dimensions';
@@ -93,6 +93,8 @@ export const droneSideItem: CanvasElementItem = {
       left: options?.placement?.left,
       rotation: options?.placement?.rotation ?? 0,
     },
+    oneClickMode: options?.oneClickMode ?? OneClickMode.Off,
+    links: options?.links ?? [],
   }),
 
   // Called when data changes