Update ESLint configuration and refactoring

cypress/integration/01-view-panel.test.ts

@@ -1,5 +1,5 @@
 import { e2e } from '@grafana/e2e';
-import { TestIds } from '../../src/constants';
+import { TEST_IDS } from '../../src/constants';
 
 /**
  * Dashboard
@@ -29,7 +29,7 @@ describe('Viewing a panel with an Image', () => {
     /**
      * Image
      */
-    const image = currentPanel.find(getTestIdSelector(TestIds.panel.root));
+    const image = currentPanel.find(getTestIdSelector(TEST_IDS.panel.root));
     image.should('be.visible');
 
     /**

src/components/ImagePanel/ImagePanel.tsx

@@ -9,7 +9,7 @@ import React, { JSX, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import { Controlled as ControlledZoom } from 'react-medium-image-zoom';
 import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
 
-import { ImageSizeModes, ImageTypesSymbols, SupportedTypes, TestIds } from '../../constants';
+import { IMAGE_TYPES_SYMBOLS, ImageSizeModes, SupportedTypes, TEST_IDS } from '../../constants';
 import { ButtonType, PanelOptions, ZoomType } from '../../types';
 import { base64toBlob } from '../../utils';
 import { getStyles } from './ImagePanel.styles';
@@ -50,8 +50,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
           )
         )
         .map((field) => field?.values)
-        .filter((item) => !!item)[0]
-        ?.toArray() || []
+        .filter((item) => !!item)[0] || []
     );
   }, [data.series, options.name]);
 
@@ -67,8 +66,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
       data.series
         .map((series) => series.fields.find((field) => field.name === options.description))
         .map((field) => field?.values)
-        .filter((item) => !!item)[0]
-        ?.toArray() || []
+        .filter((item) => !!item)[0] || []
     );
   }, [data.series, options.description]);
 
@@ -179,7 +177,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
         .map((series) =>
           series.fields.find((field) => field.type === FieldType.number && field.name === options.heightName)
         )
-        .map((field) => field?.values.get(field.values.length - 1))
+        .map((field) => field?.values[field.values.length - 1])
         .toString();
       imageHeight = Number(heightField) ? Number(heightField) : imageHeight;
     }
@@ -199,7 +197,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
         .map((series) =>
           series.fields.find((field) => field.type === FieldType.number && field.name === options.widthName)
         )
-        .map((field) => field?.values.get(field.values.length - 1))
+        .map((field) => field?.values[field.values.length - 1])
         .toString();
       imageWidth = Number(widthField) ? Number(widthField) : imageWidth;
     }
@@ -212,7 +210,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
    */
   const renderContainer = (child: JSX.Element) => (
     <div
-      data-testid={TestIds.panel.root}
+      data-testid={TEST_IDS.panel.root}
       className={cx(
         styles.wrapper,
         css`
@@ -235,7 +233,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
    */
   if (!img) {
     return renderContainer(
-      <Alert severity="warning" title="" data-testid={TestIds.panel.warning}>
+      <Alert severity="warning" title="" data-testid={TEST_IDS.panel.warning}>
         Nothing to display...
       </Alert>
     );
@@ -258,9 +256,9 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
     /**
      * Set header
      */
-    type = ImageTypesSymbols[img.charAt(0)];
+    type = IMAGE_TYPES_SYMBOLS[img.charAt(0)];
     img = type ? `data:${type};base64,${img}` : `data:;base64,${img}`;
-  } else if (Object.values(SupportedTypes).includes(m[1] as any)) {
+  } else if (Object.values(SupportedTypes).includes(m[1] as SupportedTypes)) {
     type = m[1];
   }
 
@@ -279,7 +277,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
     }
 
     return renderContainer(
-      <iframe width={imageWidth || ''} height={imageHeight || ''} src={img} data-testid={TestIds.panel.iframe} />
+      <iframe width={imageWidth || ''} height={imageHeight || ''} src={img} data-testid={TEST_IDS.panel.iframe} />
     );
   }
 
@@ -293,7 +291,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
         height={imageHeight || ''}
         controls={options.controls}
         autoPlay={options.autoPlay}
-        data-testid={TestIds.panel.video}
+        data-testid={TEST_IDS.panel.video}
       >
         <source src={img} />
       </video>
@@ -305,7 +303,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
    */
   if (type === SupportedTypes.MP3 || type === SupportedTypes.OGG) {
     return renderContainer(
-      <audio controls={options.controls} autoPlay={options.autoPlay} data-testid={TestIds.panel.audio}>
+      <audio controls={options.controls} autoPlay={options.autoPlay} data-testid={TEST_IDS.panel.audio}>
         <source src={img} />
       </audio>
     );
@@ -319,7 +317,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
       width={imageWidth || ''}
       height={imageHeight || ''}
       src={img}
-      data-testid={TestIds.panel.image}
+      data-testid={TEST_IDS.panel.image}
       alt=""
       style={{ imageRendering: options.scale }}
     />
@@ -328,7 +326,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
     const url = replaceVariables(options.url);
 
     image = (
-      <a className={cx(styles.url)} href={url} title={options.title} data-testid={TestIds.panel.imageLink}>
+      <a className={cx(styles.url)} href={url} title={options.title} data-testid={TEST_IDS.panel.imageLink}>
         {image}
       </a>
     );
@@ -384,7 +382,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
                         onClick={() => {
                           onChangeCurrentIndex('prev');
                         }}
-                        data-testid={TestIds.panel.buttonPrevious}
+                        data-testid={TEST_IDS.panel.buttonPrevious}
                         disabled={Math.max(values.length, 1) === 1}
                       >
                         Previous
@@ -398,7 +396,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
                         onClick={() => {
                           onChangeCurrentIndex('next');
                         }}
-                        data-testid={TestIds.panel.buttonNext}
+                        data-testid={TEST_IDS.panel.buttonNext}
                         disabled={Math.max(values.length, 1) === 1}
                       >
                         Next
@@ -413,7 +411,7 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
                   onClick={() => {
                     saveAs(img);
                   }}
-                  data-testid={TestIds.panel.buttonDownload}
+                  data-testid={TEST_IDS.panel.buttonDownload}
                 >
                   Download
                 </ToolbarButton>
@@ -425,25 +423,25 @@ export const ImagePanel: React.FC<Props> = ({ options, data, width, height, repl
                   onClick={() => {
                     setIsZoomed(true);
                   }}
-                  data-testid={TestIds.panel.buttonZoom}
+                  data-testid={TEST_IDS.panel.buttonZoom}
                 />
               )}
               {options.buttons.includes(ButtonType.ZOOM) && options.zoomType === ZoomType.PANPINCH && (
                 <>
                   <ToolbarButton
                     icon="search-plus"
                     onClick={onZoomPanPinchIn}
-                    data-testid={TestIds.panel.buttonZoomPanPinchIn}
+                    data-testid={TEST_IDS.panel.buttonZoomPanPinchIn}
                   />
                   <ToolbarButton
                     icon="search-minus"
                     onClick={onZoomPanPinchOut}
-                    data-testid={TestIds.panel.buttonZoomPanPinchOut}
+                    data-testid={TEST_IDS.panel.buttonZoomPanPinchOut}
                   />
                   <ToolbarButton
                     icon="times-circle"
                     onClick={onResetZoomPanPinch}
-                    data-testid={TestIds.panel.buttonZoomPanPinchReset}
+                    data-testid={TEST_IDS.panel.buttonZoomPanPinchReset}
                   />
                 </>
               )}

src/constants/default.ts

@@ -4,7 +4,7 @@ import { ImageSizeModes } from './image';
 /**
  * Default Options
  */
-export const DefaultOptions: PanelOptions = {
+export const DEFAULT_OPTIONS: PanelOptions = {
   autoPlay: true,
   buttons: [],
   controls: true,

src/constants/image.ts

@@ -18,7 +18,7 @@ export enum SupportedTypes {
 /**
  * Base64 symbols for Image Types
  */
-export const ImageTypesSymbols: { [id: string]: string } = {
+export const IMAGE_TYPES_SYMBOLS: { [id: string]: string } = {
   '/': SupportedTypes.JPEG,
   R: SupportedTypes.GIF,
   i: SupportedTypes.PNG,
@@ -47,7 +47,7 @@ export enum ImageSizeModes {
 /**
  * Width and Height Mode Options
  */
-export const SizeModeOptions = [
+export const SIZE_MODE_OPTIONS = [
   { value: ImageSizeModes.AUTO, label: 'Panel', description: 'Based on panel size' },
   { value: ImageSizeModes.ORIGINAL, label: 'Original' },
   { value: ImageSizeModes.CUSTOM, label: 'Custom' },
@@ -56,7 +56,7 @@ export const SizeModeOptions = [
 /**
  * Image Scale Options
  */
-export const ImageScaleOptions = [
+export const IMAGE_SCALE_OPTIONS = [
   { value: ImageScale.AUTO, label: 'Auto' },
   {
     value: ImageScale.CRISP_EDGES,

src/constants/tests.ts

@@ -1,7 +1,7 @@
 /**
  * Tests Identifiers
  */
-export const TestIds = {
+export const TEST_IDS = {
   panel: {
     audio: 'data-testid panel audio',
     buttonDownload: 'data-testid panel button-download',

src/constants/toolbar.ts

@@ -1,18 +1,20 @@
+import { SelectableValue } from '@grafana/data';
+
 import { ButtonType, ZoomType } from '../types';
 
 /**
  * Buttons Options
  */
-export const ButtonsOptions = [
-  { value: ButtonType.DOWNLOAD, label: 'Download' },
-  { value: ButtonType.NAVIGATION, label: 'Navigation' },
-  { value: ButtonType.ZOOM, label: 'Zoom' },
+export const BUTTONS_OPTIONS: Array<SelectableValue<ButtonType[]>> = [
+  { value: [ButtonType.DOWNLOAD], label: 'Download' },
+  { value: [ButtonType.NAVIGATION], label: 'Navigation' },
+  { value: [ButtonType.ZOOM], label: 'Zoom' },
 ];
 
 /**
  * Zoom Options
  */
-export const ZoomOptions = [
+export const ZOOM_OPTIONS = [
   { value: ZoomType.DEFAULT, label: 'Full Screen' },
   { value: ZoomType.PANPINCH, label: 'Pan and Pinch' },
 ];

src/module.test.ts

@@ -13,6 +13,7 @@ type TestField = Pick<Field, 'name' | 'type'>;
  * Mock react-medium-image-zoom
  */
 jest.mock('react-medium-image-zoom', () => ({
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   Controlled: jest.fn(),
 }));
 

src/module.ts

@@ -1,13 +1,13 @@
-import { Field, FieldType, PanelPlugin } from '@grafana/data';
+import { Field, FieldType, PanelPlugin, SelectableValue } from '@grafana/data';
 
 import { ImagePanel } from './components';
 import {
-  ButtonsOptions,
-  DefaultOptions,
-  ImageScaleOptions,
+  BUTTONS_OPTIONS,
+  DEFAULT_OPTIONS,
+  IMAGE_SCALE_OPTIONS,
   ImageSizeModes,
-  SizeModeOptions,
-  ZoomOptions,
+  SIZE_MODE_OPTIONS,
+  ZOOM_OPTIONS,
 } from './constants';
 import { ButtonType, PanelOptions } from './types';
 
@@ -50,25 +50,25 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
         ],
       },
       category: ['Toolbar'],
-      defaultValue: DefaultOptions.toolbar,
+      defaultValue: DEFAULT_OPTIONS.toolbar,
     })
     .addMultiSelect({
       path: 'buttons',
       name: 'Select buttons to display on toolbar. Images only.',
       settings: {
-        options: ButtonsOptions as any,
+        options: BUTTONS_OPTIONS as Array<SelectableValue<ButtonType[]>>,
       },
-      defaultValue: DefaultOptions.buttons,
+      defaultValue: DEFAULT_OPTIONS.buttons,
       category: ['Toolbar'],
       showIf: (options: PanelOptions) => options.toolbar,
     })
     .addRadio({
       path: 'zoomType',
       name: 'Select zoom mode.',
       settings: {
-        options: ZoomOptions,
+        options: ZOOM_OPTIONS,
       },
-      defaultValue: DefaultOptions.zoomType,
+      defaultValue: DEFAULT_OPTIONS.zoomType,
       category: ['Toolbar'],
       showIf: (options: PanelOptions) => options.toolbar && options.buttons.includes(ButtonType.ZOOM),
     });
@@ -97,10 +97,10 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
       path: 'widthMode',
       name: 'Width',
       settings: {
-        options: SizeModeOptions,
+        options: SIZE_MODE_OPTIONS,
       },
       category: ['Width'],
-      defaultValue: DefaultOptions.widthMode,
+      defaultValue: DEFAULT_OPTIONS.widthMode,
     })
     .addFieldNamePicker({
       path: 'widthName',
@@ -116,7 +116,7 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
     .addNumberInput({
       path: 'width',
       name: 'Custom width (px)',
-      defaultValue: DefaultOptions.width,
+      defaultValue: DEFAULT_OPTIONS.width,
       category: ['Width'],
       showIf: (options: PanelOptions) => options.widthMode === ImageSizeModes.CUSTOM,
     });
@@ -129,10 +129,10 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
       path: 'heightMode',
       name: 'Height',
       settings: {
-        options: SizeModeOptions,
+        options: SIZE_MODE_OPTIONS,
       },
       category: ['Height'],
-      defaultValue: DefaultOptions.heightMode,
+      defaultValue: DEFAULT_OPTIONS.heightMode,
     })
     .addFieldNamePicker({
       path: 'heightName',
@@ -148,7 +148,7 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
     .addNumberInput({
       path: 'height',
       name: 'Custom height (px)',
-      defaultValue: DefaultOptions.height,
+      defaultValue: DEFAULT_OPTIONS.height,
       category: ['Height'],
       showIf: (options: PanelOptions) => options.heightMode === ImageSizeModes.CUSTOM,
     });
@@ -161,9 +161,9 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
     name: 'Scale Algorithm',
     category: ['Image'],
     settings: {
-      options: ImageScaleOptions,
+      options: IMAGE_SCALE_OPTIONS,
     },
-    defaultValue: DefaultOptions.scale,
+    defaultValue: DEFAULT_OPTIONS.scale,
   });
 
   /**
@@ -181,7 +181,7 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
         ],
       },
       category: ['Video/Audio'],
-      defaultValue: DefaultOptions.controls,
+      defaultValue: DEFAULT_OPTIONS.controls,
     })
     .addRadio({
       path: 'autoPlay',
@@ -194,7 +194,7 @@ export const plugin = new PanelPlugin<PanelOptions>(ImagePanel).setNoPadding().s
         ],
       },
       category: ['Video/Audio'],
-      defaultValue: DefaultOptions.autoPlay,
+      defaultValue: DEFAULT_OPTIONS.autoPlay,
     });
 
   return builder;