chore: high level restructure of canvas panel files (#69004)

.betterer.results

@@ -4985,31 +4985,31 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "10"],
       [0, 0, 0, "Do not use any type assertions.", "11"]
     ],
-    "public/app/plugins/panel/canvas/InlineEditBody.tsx:5381": [
+    "public/app/plugins/panel/canvas/editor/connectionEditor.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
+    "public/app/plugins/panel/canvas/editor/element/APIEditor.tsx:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
+    "public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
+    "public/app/plugins/panel/canvas/editor/element/elementEditor.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
+    ],
+    "public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
       [0, 0, 0, "Do not use any type assertions.", "3"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "4"]
     ],
-    "public/app/plugins/panel/canvas/editor/APIEditor.tsx:5381": [
+    "public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/editor/PlacementEditor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/panel/canvas/editor/TreeNavigationEditor.tsx:5381": [
+    "public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/editor/connectionEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "public/app/plugins/panel/canvas/editor/elementEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
-    ],
-    "public/app/plugins/panel/canvas/editor/layerEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
       [0, 0, 0, "Do not use any type assertions.", "2"],

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

@@ -5,7 +5,7 @@ import { TextDimensionConfig } from '@grafana/schema';
 import { Button } from '@grafana/ui';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
-import { APIEditor, APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/APIEditor';
+import { APIEditor, APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/element/APIEditor';
 
 import { CanvasElementItem, CanvasElementProps, defaultBgColor } from '../element';
 

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

@@ -7,7 +7,7 @@ import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';
 import { getPublicOrAbsoluteUrl } from 'app/features/dimensions';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { ColorDimensionEditor, ResourceDimensionEditor } from 'app/features/dimensions/editors';
-import { APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/APIEditor';
+import { APIEditorConfig, callApi } from 'app/plugins/panel/canvas/editor/element/APIEditor';
 
 import { CanvasElementItem, CanvasElementProps, defaultBgColor } from '../element';
 import { LineConfig } from '../types';

public/app/features/canvas/runtime/scene.tsx

@@ -25,10 +25,10 @@ import {
   getScaleDimensionFromData,
   getTextDimensionFromData,
 } from 'app/features/dimensions/utils';
-import { CanvasContextMenu } from 'app/plugins/panel/canvas/CanvasContextMenu';
+import { CanvasContextMenu } from 'app/plugins/panel/canvas/components/CanvasContextMenu';
-import { CanvasTooltip } from 'app/plugins/panel/canvas/CanvasTooltip';
+import { CanvasTooltip } from 'app/plugins/panel/canvas/components/CanvasTooltip';
-import { CONNECTION_ANCHOR_DIV_ID } from 'app/plugins/panel/canvas/ConnectionAnchors';
+import { CONNECTION_ANCHOR_DIV_ID } from 'app/plugins/panel/canvas/components/connections/ConnectionAnchors';
-import { Connections } from 'app/plugins/panel/canvas/Connections';
+import { Connections } from 'app/plugins/panel/canvas/components/connections/Connections';
 import { AnchorPoint, CanvasTooltipPayload, LayerActionID } from 'app/plugins/panel/canvas/types';
 
 import appEvents from '../../../core/app_events';

public/app/plugins/panel/canvas/CanvasPanel.tsx

@@ -9,8 +9,8 @@ import { ElementState } from 'app/features/canvas/runtime/element';
 import { Scene } from 'app/features/canvas/runtime/scene';
 import { PanelEditEnteredEvent, PanelEditExitedEvent } from 'app/types/events';
 
-import { InlineEdit } from './InlineEdit';
+import { SetBackground } from './components/SetBackground';
-import { SetBackground } from './SetBackground';
+import { InlineEdit } from './editor/inline/InlineEdit';
 import { Options } from './models.gen';
 import { AnchorPoint, CanvasTooltipPayload, ConnectionState } from './types';
 

public/app/plugins/panel/canvas/components/CanvasContextMenu.tsx

@@ -4,14 +4,13 @@ import { first } from 'rxjs/operators';
 
 import { SelectableValue } from '@grafana/data';
 import { ContextMenu, MenuItem, MenuItemProps } from '@grafana/ui';
+import { ElementState } from 'app/features/canvas/runtime/element';
+import { FrameState } from 'app/features/canvas/runtime/frame';
 import { Scene } from 'app/features/canvas/runtime/scene';
 
-import { ElementState } from '../../../features/canvas/runtime/element';
+import { CanvasPanel } from '../CanvasPanel';
-import { FrameState } from '../../../features/canvas/runtime/frame';
+import { AnchorPoint, LayerActionID } from '../types';
-
+import { getElementTypes, onAddItem } from '../utils';
-import { CanvasPanel } from './CanvasPanel';
-import { AnchorPoint, LayerActionID } from './types';
-import { getElementTypes, onAddItem } from './utils';
 
 type Props = {
   scene: Scene;

public/app/plugins/panel/canvas/components/SetBackground.tsx

@@ -5,11 +5,10 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { ResourceDimensionMode } from '@grafana/schema';
 import { Portal, useTheme2 } from '@grafana/ui';
 import { Scene } from 'app/features/canvas/runtime/scene';
+import { MediaType, ResourceFolderName } from 'app/features/dimensions';
+import { ResourcePickerPopover } from 'app/features/dimensions/editors/ResourcePickerPopover';
 
-import { MediaType, ResourceFolderName } from '../../../features/dimensions';
+import { AnchorPoint } from '../types';
-import { ResourcePickerPopover } from '../../../features/dimensions/editors/ResourcePickerPopover';
-
-import { AnchorPoint } from './types';
 
 type Props = {
   onClose: () => void;

public/app/plugins/panel/canvas/components/connections/ConnectionSVG.tsx

@@ -6,7 +6,7 @@ import { useStyles2 } from '@grafana/ui';
 import { config } from 'app/core/config';
 import { Scene } from 'app/features/canvas/runtime/scene';
 
-import { ConnectionState } from './types';
+import { ConnectionState } from '../../types';
 
 type Props = {
   setSVGRef: (anchorElement: SVGSVGElement) => void;

public/app/plugins/panel/canvas/components/connections/Connections.tsx

@@ -6,10 +6,11 @@ import { CanvasConnection, ConnectionPath } from 'app/features/canvas';
 import { ElementState } from 'app/features/canvas/runtime/element';
 import { Scene } from 'app/features/canvas/runtime/scene';
 
+import { ConnectionState } from '../../types';
+import { getConnections, isConnectionSource, isConnectionTarget } from '../../utils';
+
 import { CONNECTION_ANCHOR_ALT, ConnectionAnchors, CONNECTION_ANCHOR_HIGHLIGHT_OFFSET } from './ConnectionAnchors';
 import { ConnectionSVG } from './ConnectionSVG';
-import { ConnectionState } from './types';
-import { getConnections, isConnectionSource, isConnectionTarget } from './utils';
 
 export class Connections {
   scene: Scene;

public/app/plugins/panel/canvas/editor/element/PlacementEditor.tsx

@@ -7,7 +7,7 @@ import { Field, HorizontalGroup, Icon, InlineField, InlineFieldRow, Select, Vert
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 import { HorizontalConstraint, Placement, VerticalConstraint } from 'app/features/canvas';
 
-import { Options } from '../models.gen';
+import { Options } from '../../models.gen';
 
 import { ConstraintSelectionBox } from './ConstraintSelectionBox';
 import { QuickPositioning } from './QuickPositioning';

public/app/plugins/panel/canvas/editor/element/elementEditor.tsx

@@ -8,14 +8,14 @@ import {
   defaultElementItems,
 } from 'app/features/canvas';
 import { ElementState } from 'app/features/canvas/runtime/element';
+import { FrameState } from 'app/features/canvas/runtime/frame';
 import { Scene } from 'app/features/canvas/runtime/scene';
 import { setOptionImmutably } from 'app/features/dashboard/components/PanelEditor/utils';
 
-import { FrameState } from '../../../../features/canvas/runtime/frame';
+import { getElementTypes } from '../../utils';
-import { getElementTypes } from '../utils';
+import { optionBuilder } from '../options';
 
 import { PlacementEditor } from './PlacementEditor';
-import { optionBuilder } from './options';
 
 export interface CanvasEditorOptions {
   element: ElementState;

public/app/plugins/panel/canvas/editor/inline/InlineEditBody.tsx

@@ -14,13 +14,14 @@ import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components
 import { fillOptionsPaneItems } from 'app/features/dashboard/components/PanelEditor/getVisualizationOptions';
 import { setOptionImmutably } from 'app/features/dashboard/components/PanelEditor/utils';
 
-import { activePanelSubject, InstanceState } from './CanvasPanel';
+import { activePanelSubject, InstanceState } from '../../CanvasPanel';
-import { TabsEditor } from './editor/TabsEditor';
+import { addStandardCanvasEditorOptions } from '../../module';
-import { getElementEditor } from './editor/elementEditor';
+import { InlineEditTabs } from '../../types';
-import { getLayerEditor } from './editor/layerEditor';
+import { getElementTypes, onAddItem } from '../../utils';
-import { addStandardCanvasEditorOptions } from './module';
+import { getElementEditor } from '../element/elementEditor';
-import { InlineEditTabs } from './types';
+import { getLayerEditor } from '../layer/layerEditor';
-import { getElementTypes, onAddItem } from './utils';
+
+import { TabsEditor } from './TabsEditor';
 
 export function InlineEditBody() {
   const activePanel = useObservable(activePanelSubject);

public/app/plugins/panel/canvas/editor/inline/TabsEditor.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { Tab, TabsBar } from '@grafana/ui/src';
 
-import { InlineEditTabs } from '../types';
+import { InlineEditTabs } from '../../types';
 
 type Props = {
   onTabChange: (v: string) => void;

public/app/plugins/panel/canvas/editor/layer/TreeNavigationEditor.tsx

@@ -6,17 +6,17 @@ import React, { Key, useEffect, useMemo, useState } from 'react';
 import { GrafanaTheme2, StandardEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { Button, HorizontalGroup, Icon, useStyles2, useTheme2 } from '@grafana/ui';
+import { AddLayerButton } from 'app/core/components/Layers/AddLayerButton';
 import { ElementState } from 'app/features/canvas/runtime/element';
 
-import { AddLayerButton } from '../../../../core/components/Layers/AddLayerButton';
+import { getGlobalStyles } from '../../globalStyles';
-import { getGlobalStyles } from '../globalStyles';
+import { Options } from '../../models.gen';
-import { Options } from '../models.gen';
+import { DragNode, DropNode } from '../../types';
-import { getTreeData, onNodeDrop, TreeElement } from '../tree';
+import { doSelect, getElementTypes, onAddItem } from '../../utils';
-import { DragNode, DropNode } from '../types';
+import { TreeViewEditorProps } from '../element/elementEditor';
-import { doSelect, getElementTypes, onAddItem } from '../utils';
 
 import { TreeNodeTitle } from './TreeNodeTitle';
-import { TreeViewEditorProps } from './elementEditor';
+import { getTreeData, onNodeDrop, TreeElement } from './tree';
 
 let allowSelection = true;
 

public/app/plugins/panel/canvas/editor/layer/TreeNodeTitle.tsx

@@ -3,13 +3,13 @@ import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { IconButton, useStyles2 } from '@grafana/ui';
+import { LayerName } from 'app/core/components/Layers/LayerName';
 import { ElementState } from 'app/features/canvas/runtime/element';
 
-import { LayerName } from '../../../../core/components/Layers/LayerName';
+import { LayerActionID } from '../../types';
-import { TreeElement } from '../tree';
+import { TreeViewEditorProps } from '../element/elementEditor';
-import { LayerActionID } from '../types';
 
-import { TreeViewEditorProps } from './elementEditor';
+import { TreeElement } from './tree';
 
 interface Props {
   settings: TreeViewEditorProps;

public/app/plugins/panel/canvas/editor/layer/layerEditor.tsx

@@ -6,11 +6,11 @@ import { FrameState } from 'app/features/canvas/runtime/frame';
 import { Scene } from 'app/features/canvas/runtime/scene';
 import { setOptionImmutably } from 'app/features/dashboard/components/PanelEditor/utils';
 
-import { InstanceState } from '../CanvasPanel';
+import { InstanceState } from '../../CanvasPanel';
+import { PlacementEditor } from '../element/PlacementEditor';
+import { optionBuilder } from '../options';
 
-import { PlacementEditor } from './PlacementEditor';
 import { TreeNavigationEditor } from './TreeNavigationEditor';
-import { optionBuilder } from './options';
 
 export interface LayerEditorProps {
   scene: Scene;

public/app/plugins/panel/canvas/editor/layer/tree.ts

@@ -4,7 +4,7 @@ import { ElementState } from 'app/features/canvas/runtime/element';
 import { FrameState } from 'app/features/canvas/runtime/frame';
 import { RootElement } from 'app/features/canvas/runtime/root';
 
-import { DragNode, DropNode } from './types';
+import { DragNode, DropNode } from '../../types';
 
 export interface TreeElement {
   key: number;

public/app/plugins/panel/canvas/models.gen.ts

@@ -1,6 +1,6 @@
 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // NOTE: This file will be auto generated from models.cue
-// It is currenty hand written but will serve as the target for cuetsy
+// It is currently hand written but will serve as the target for cuetsy
 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 import { CanvasFrameOptions, DEFAULT_CANVAS_ELEMENT_CONFIG } from 'app/features/canvas';

public/app/plugins/panel/canvas/module.tsx

@@ -3,8 +3,8 @@ import { FrameState } from 'app/features/canvas/runtime/frame';
 
 import { CanvasPanel, InstanceState } from './CanvasPanel';
 import { getConnectionEditor } from './editor/connectionEditor';
-import { getElementEditor } from './editor/elementEditor';
+import { getElementEditor } from './editor/element/elementEditor';
-import { getLayerEditor } from './editor/layerEditor';
+import { getLayerEditor } from './editor/layer/layerEditor';
 import { canvasMigrationHandler } from './migrations';
 import { Options } from './models.gen';
 

public/app/plugins/panel/canvas/utils.ts

@@ -1,22 +1,21 @@
 import { isNumber, isString } from 'lodash';
 
 import { AppEvents, Field, LinkModel, PluginState, SelectableValue } from '@grafana/data';
+import appEvents from 'app/core/app_events';
 import { hasAlphaPanels } from 'app/core/config';
-
-import appEvents from '../../../core/app_events';
 import {
+  defaultElementItems,
   advancedElementItems,
   CanvasElementItem,
-  CanvasElementOptions,
   canvasElementRegistry,
-  defaultElementItems,
+  CanvasElementOptions,
   TextConfig,
-} from '../../../features/canvas';
+} from 'app/features/canvas';
-import { notFoundItem } from '../../../features/canvas/elements/notFound';
+import { notFoundItem } from 'app/features/canvas/elements/notFound';
-import { ElementState } from '../../../features/canvas/runtime/element';
+import { ElementState } from 'app/features/canvas/runtime/element';
-import { FrameState } from '../../../features/canvas/runtime/frame';
+import { FrameState } from 'app/features/canvas/runtime/frame';
-import { Scene, SelectionParams } from '../../../features/canvas/runtime/scene';
+import { Scene, SelectionParams } from 'app/features/canvas/runtime/scene';
-import { DimensionContext } from '../../../features/dimensions';
+import { DimensionContext } from 'app/features/dimensions';
 
 import { AnchorPoint, ConnectionState } from './types';