From 99262c53b6cc53108cb7cbe2df3597b24d797380 Mon Sep 17 00:00:00 2001 From: Nathan Marrs Date: Thu, 9 May 2024 11:59:49 -0600 Subject: [PATCH] Canvas: Chore clean up betterer (#87477) --- .betterer.results | 24 ------------------ public/app/features/canvas/element.ts | 4 ++- public/app/features/canvas/elements/icon.tsx | 2 +- .../app/features/canvas/runtime/element.tsx | 7 +++--- public/app/features/canvas/runtime/frame.tsx | 11 ++++---- public/app/features/canvas/runtime/scene.tsx | 25 +++++++++---------- 6 files changed, 26 insertions(+), 47 deletions(-) diff --git a/.betterer.results b/.betterer.results index e0902c91260..55c8535ea9f 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1401,36 +1401,12 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use export all (\`export * from ...\`)", "1"], [0, 0, 0, "Do not use export all (\`export * from ...\`)", "2"] ], - "public/app/features/canvas/element.ts: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, "Unexpected any. Specify a different type.", "3"], - [0, 0, 0, "Unexpected any. Specify a different type.", "4"] - ], "public/app/features/canvas/index.ts:5381": [ [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"], [0, 0, 0, "Do not use export all (\`export * from ...\`)", "1"], [0, 0, 0, "Do not re-export imported variable (\`./frame\`)", "2"], [0, 0, 0, "Do not use export all (\`export * from ...\`)", "3"] ], - "public/app/features/canvas/runtime/element.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, "Do not use any type assertions.", "2"], - [0, 0, 0, "Do not use any type assertions.", "3"], - [0, 0, 0, "Do not use any type assertions.", "4"], - [0, 0, 0, "Do not use any type assertions.", "5"] - ], - "public/app/features/canvas/runtime/frame.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], - "public/app/features/canvas/runtime/scene.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Do not use any type assertions.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"] - ], "public/app/features/canvas/types.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`Placement\`)", "0"], [0, 0, 0, "Do not re-export imported variable (\`Constraint\`)", "1"], diff --git a/public/app/features/canvas/element.ts b/public/app/features/canvas/element.ts index 61d7061eaaf..0f9ee6abba9 100644 --- a/public/app/features/canvas/element.ts +++ b/public/app/features/canvas/element.ts @@ -17,6 +17,7 @@ import { BackgroundConfig, Constraint, LineConfig, Placement, StandardEditorConf * * @alpha */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any export interface CanvasElementOptions { name: string; // configured unique display name type: string; @@ -66,7 +67,7 @@ export interface CanvasConnection { // See https://github.com/anseki/leader-line#options for more examples of more properties } -export interface CanvasElementProps { +export interface CanvasElementProps { // Saved config config: TConfig; @@ -82,6 +83,7 @@ export interface CanvasElementProps { * * @alpha */ +// eslint-disable-next-line @typescript-eslint/no-explicit-any export interface CanvasElementItem extends RegistryItem { /** The default width/height to use when adding */ defaultSize?: Placement; diff --git a/public/app/features/canvas/elements/icon.tsx b/public/app/features/canvas/elements/icon.tsx index 495d7d6342d..6c70d1e2131 100644 --- a/public/app/features/canvas/elements/icon.tsx +++ b/public/app/features/canvas/elements/icon.tsx @@ -34,7 +34,7 @@ const svgStrokePathClass = css({ }, }); -export function IconDisplay(props: CanvasElementProps) { +export function IconDisplay(props: CanvasElementProps) { const { data } = props; if (!data?.path) { return null; diff --git a/public/app/features/canvas/runtime/element.tsx b/public/app/features/canvas/runtime/element.tsx index 176516e5489..3cb68e29af7 100644 --- a/public/app/features/canvas/runtime/element.tsx +++ b/public/app/features/canvas/runtime/element.tsx @@ -36,6 +36,7 @@ export class ElementState implements LayerElement { div?: HTMLDivElement; // Calculated + // eslint-disable-next-line @typescript-eslint/no-explicit-any data?: any; // depends on the type constructor( @@ -192,7 +193,7 @@ export class ElementState implements LayerElement { if (this.div) { for (const key in this.sizeStyle) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions this.div.style[key as any] = (this.sizeStyle as any)[key]; } @@ -201,7 +202,7 @@ export class ElementState implements LayerElement { if (!SVGElements.has(elementType)) { // apply styles to div if it's not an SVG element for (const key in this.dataStyle) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions this.div.style[key as any] = (this.dataStyle as any)[key]; } } else { @@ -211,7 +212,7 @@ export class ElementState implements LayerElement { // wrapper div element (this.div) doesn't re-render (has static `key` property), // so we have to clean styles manually; for (const key in this.dataStyle) { - // eslint-disable-next-line @typescript-eslint/no-explicit-any + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions this.div.style[key as any] = ''; } } diff --git a/public/app/features/canvas/runtime/frame.tsx b/public/app/features/canvas/runtime/frame.tsx index 96516129c05..786234f644b 100644 --- a/public/app/features/canvas/runtime/frame.tsx +++ b/public/app/features/canvas/runtime/frame.tsx @@ -51,12 +51,13 @@ export class FrameState extends ElementState { this.options.elements = elements = []; } - for (const c of elements) { - if (c.type === 'frame') { - this.elements.push(new FrameState(c as CanvasFrameOptions, scene, this)); + for (const element of elements) { + if (element.type === 'frame') { + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + this.elements.push(new FrameState(element as CanvasFrameOptions, scene, this)); } else { - const item = canvasElementRegistry.getIfExists(c.type) ?? notFoundItem; - this.elements.push(new ElementState(item, c, this)); + const item = canvasElementRegistry.getIfExists(element.type) ?? notFoundItem; + this.elements.push(new ElementState(item, element, this)); } } } diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx index 6dc3a8b83d6..1af97123aca 100644 --- a/public/app/features/canvas/runtime/scene.tsx +++ b/public/app/features/canvas/runtime/scene.tsx @@ -6,7 +6,7 @@ import { BehaviorSubject, ReplaySubject, Subject, Subscription } from 'rxjs'; import { first } from 'rxjs/operators'; import Selecto from 'selecto'; -import { AppEvents, GrafanaTheme2, PanelData } from '@grafana/data'; +import { AppEvents, PanelData } from '@grafana/data'; import { locationService } from '@grafana/runtime/src'; import { ColorDimensionConfig, @@ -15,7 +15,7 @@ import { ScaleDimensionConfig, TextDimensionConfig, } from '@grafana/schema'; -import { Portal, stylesFactory } from '@grafana/ui'; +import { Portal } from '@grafana/ui'; import { config } from 'app/core/config'; import { CanvasFrameOptions, DEFAULT_CANVAS_ELEMENT_CONFIG } from 'app/features/canvas'; import { DimensionContext } from 'app/features/dimensions'; @@ -53,7 +53,7 @@ export interface SelectionParams { } export class Scene { - styles = getStyles(config.theme2); + styles = getStyles(); readonly selection = new ReplaySubject(1); readonly moved = new Subject(); // called after resize/drag for editor updates readonly byName = new Map(); @@ -229,11 +229,14 @@ export class Scene { currentSelectedElements.forEach((element: ElementState) => { const elementContainer = element.div?.getBoundingClientRect(); + + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions element.setPlacementFromConstraint(elementContainer, framePlacement as DOMRect); currentLayer.doAction(LayerActionID.Delete, element); newLayer.doAction(LayerActionID.Duplicate, element, false, false); }); + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions newLayer.setPlacementFromConstraint(framePlacement as DOMRect, currentLayer.div?.getBoundingClientRect()); currentLayer.elements.push(newLayer); @@ -451,7 +454,6 @@ export class Scene { settingsViewable: allowChanges, }, origin: false, - className: this.styles.selected, }) .on('rotateStart', () => { this.disableCustomables(); @@ -838,12 +840,9 @@ export class Scene { } } -const getStyles = stylesFactory((theme: GrafanaTheme2) => ({ - wrap: css` - overflow: hidden; - position: relative; - `, - selected: css` - z-index: 999 !important; - `, -})); +const getStyles = () => ({ + wrap: css({ + overflow: 'hidden', + position: 'relative', + }), +});