IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Canvas: Chore clean up betterer (#87477)

Browse Source
This commit is contained in:
Nathan Marrs 2024-05-09 11:59:49 -06:00 committed by GitHub
parent 356a29592b
commit 99262c53b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 26 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.betterer.results
View File

@ -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"],

4
public/app/features/canvas/element.ts
View File

@ -17,6 +17,7 @@ import { BackgroundConfig, Constraint, LineConfig, Placement, StandardEditorConf
*
* @alpha
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export interface CanvasElementOptions<TConfig = any> {
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<TConfig = any, TData = any> {
export interface CanvasElementProps<TConfig = unknown, TData = unknown> {
// Saved config
config: TConfig;
@ -82,6 +83,7 @@ export interface CanvasElementProps<TConfig = any, TData = any> {
*
* @alpha
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export interface CanvasElementItem<TConfig = any, TData = any> extends RegistryItem {
/** The default width/height to use when adding */
defaultSize?: Placement;

2
public/app/features/canvas/elements/icon.tsx
View File

@ -34,7 +34,7 @@ const svgStrokePathClass = css({
},
});
export function IconDisplay(props: CanvasElementProps) {
export function IconDisplay(props: CanvasElementProps<IconConfig, IconData>) {
const { data } = props;
if (!data?.path) {
return null;

7
public/app/features/canvas/runtime/element.tsx
View File

@ -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] = '';
}
}

11
public/app/features/canvas/runtime/frame.tsx
View File

@ -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));
}
}
}

25
public/app/features/canvas/runtime/scene.tsx
View File

@ -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<ElementState[]>(1);
readonly moved = new Subject<number>(); // called after resize/drag for editor updates
readonly byName = new Map<string, ElementState>();
@ -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',
}),
});