Transformations: Import images with webpack (#107795)

* Transformations: Import images with webpack

* fix mock registry

* use mockTransformationsRegistry in more places

packages/grafana-data/src/transformations/standardTransformersRegistry.ts

@@ -39,6 +39,16 @@ export interface TransformerRegistryItem<TOptions = any> extends RegistryItem {
    * Set of tags associated with the transformer for improved transformation search
    */
   tags?: Set<string>;
+
+  /**
+   * Image representing the transformer, for dark themes
+   */
+  imageDark: string;
+
+  /**
+   * Image representing the transformer, for light themes
+   */
+  imageLight: string;
 }
 
 export enum TransformerCategory {

packages/grafana-data/src/utils/tests/mockTransformationsRegistry.ts

@@ -11,6 +11,8 @@ export const mockTransformationsRegistry = (transformers: DataTransformerInfo[])
         transformation: t,
         description: t.description,
         editor: () => null,
+        imageDark: `build/img/${t.id}-dark.abc123.svg`,
+        imageLight: `build/img/${t.id}-light.abc123.svg`,
       };
     });
   });

public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx

@@ -11,8 +11,7 @@ import {
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
-import { Badge, Card, Drawer, FilterPill, IconButton, Input, Switch, useStyles2 } from '@grafana/ui';
-import config from 'app/core/config';
+import { Badge, Card, Drawer, FilterPill, IconButton, Input, Switch, useStyles2, useTheme2 } from '@grafana/ui';
 import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
 import { getCategoriesLabels } from 'app/features/transformers/utils';
 
@@ -172,6 +171,7 @@ interface TransformationsGridProps {
 }
 
 function TransformationsGrid({ showIllustrations, transformations, onClick, data }: TransformationsGridProps) {
+  const theme = useTheme2();
   const styles = useStyles2(getTransformationGridStyles);
 
   return (
@@ -200,6 +200,8 @@ function TransformationsGrid({ showIllustrations, transformations, onClick, data
           cardClasses = cx(styles.newCard, styles.cardDisabled);
         }
 
+        const imageUrl = theme.isDark ? transform.imageDark : transform.imageLight;
+
         return (
           <Card
             className={cardClasses}
@@ -226,7 +228,7 @@ function TransformationsGrid({ showIllustrations, transformations, onClick, data
               <span>{standardTransformersRegistry.getIfExists(transform.id)?.description}</span>
               {showIllustrations && (
                 <span>
-                  <img className={styles.image} src={getImagePath(transform.id, !isApplicable)} alt={transform.name} />
+                  <img className={styles.image} src={imageUrl} alt={transform.name} />
                 </span>
               )}
               {!isApplicable && applicabilityDescription !== null && (
@@ -308,8 +310,3 @@ function getTransformationGridStyles(theme: GrafanaTheme2) {
     }),
   };
 }
-
-const getImagePath = (id: string, disabled: boolean) => {
-  const folder = config.theme2.isDark ? 'dark' : 'light';
-  return `public/build/img/transformations/${folder}/${id}.svg`;
-};

public/app/features/explore/Logs/Logs.test.tsx

@@ -10,13 +10,12 @@ import {
   LoadingState,
   LogLevel,
   LogRowModel,
-  standardTransformersRegistry,
   toUtc,
   createDataFrame,
   ExploreLogsPanelState,
   DataQuery,
 } from '@grafana/data';
-import { organizeFieldsTransformer } from '@grafana/data/internal';
+import { mockTransformationsRegistry, organizeFieldsTransformer } from '@grafana/data/internal';
 import { config } from '@grafana/runtime';
 import { extractFieldsTransformer } from 'app/features/transformers/extractFields/extractFields';
 import { LokiQueryDirection } from 'app/plugins/datasource/loki/dataquery.gen';
@@ -80,18 +79,7 @@ describe('Logs', () => {
   });
   beforeAll(() => {
     const transformers = [extractFieldsTransformer, organizeFieldsTransformer];
-    standardTransformersRegistry.setInit(() => {
-      return transformers.map((t) => {
-        return {
-          id: t.id,
-          aliasIds: t.aliasIds,
-          name: t.name,
-          transformation: t,
-          description: t.description,
-          editor: () => null,
-        };
-      });
-    });
+    mockTransformationsRegistry(transformers);
   });
 
   afterAll(() => {

public/app/features/explore/Logs/LogsMetaRow.test.tsx

@@ -3,17 +3,8 @@ import userEvent from '@testing-library/user-event';
 import saveAs from 'file-saver';
 import { ComponentProps } from 'react';
 
-import {
-  FieldType,
-  LogLevel,
-  LogsDedupStrategy,
-  LogsMetaItem,
-  LogsMetaKind,
-  standardTransformersRegistry,
-  store,
-  toDataFrame,
-} from '@grafana/data';
-import { organizeFieldsTransformer } from '@grafana/data/internal';
+import { FieldType, LogLevel, LogsDedupStrategy, LogsMetaItem, LogsMetaKind, store, toDataFrame } from '@grafana/data';
+import { mockTransformationsRegistry, organizeFieldsTransformer } from '@grafana/data/internal';
 import { config } from '@grafana/runtime';
 
 import { logRowsToReadableJson } from '../../logs/utils';
@@ -177,18 +168,7 @@ describe('LogsMetaRow', () => {
 
   it('renders a button to download CSV', async () => {
     const transformers = [extractFieldsTransformer, organizeFieldsTransformer];
-    standardTransformersRegistry.setInit(() => {
-      return transformers.map((t) => {
-        return {
-          id: t.id,
-          aliasIds: t.aliasIds,
-          name: t.name,
-          transformation: t,
-          description: t.description,
-          editor: () => null,
-        };
-      });
-    });
+    mockTransformationsRegistry(transformers);
 
     const rows = [
       {

public/app/features/explore/Logs/LogsTable.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { ComponentProps } from 'react';
 
-import { DataFrame, FieldType, LogsSortOrder, standardTransformersRegistry, toUtc } from '@grafana/data';
-import { organizeFieldsTransformer } from '@grafana/data/internal';
+import { DataFrame, FieldType, LogsSortOrder, toUtc } from '@grafana/data';
+import { mockTransformationsRegistry, organizeFieldsTransformer } from '@grafana/data/internal';
 import { config } from '@grafana/runtime';
 import { extractFieldsTransformer } from 'app/features/transformers/extractFields/extractFields';
 
@@ -91,18 +91,7 @@ const setup = (partialProps?: Partial<ComponentProps<typeof LogsTable>>, logs?:
 describe('LogsTable', () => {
   beforeAll(() => {
     const transformers = [extractFieldsTransformer, organizeFieldsTransformer];
-    standardTransformersRegistry.setInit(() => {
-      return transformers.map((t) => {
-        return {
-          id: t.id,
-          aliasIds: t.aliasIds,
-          name: t.name,
-          transformation: t,
-          description: t.description,
-          editor: () => null,
-        };
-      });
-    });
+    mockTransformationsRegistry(transformers);
   });
 
   let originalVisualisationTypeValue = config.featureToggles.logsExploreTableVisualisation;

public/app/features/explore/Logs/LogsTableWrap.test.tsx

@@ -1,8 +1,8 @@
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ComponentProps } from 'react';
 
-import { createTheme, ExploreLogsPanelState, LogsSortOrder, standardTransformersRegistry, toUtc } from '@grafana/data';
-import { organizeFieldsTransformer } from '@grafana/data/internal';
+import { createTheme, ExploreLogsPanelState, LogsSortOrder, toUtc } from '@grafana/data';
+import { mockTransformationsRegistry, organizeFieldsTransformer } from '@grafana/data/internal';
 import { config } from '@grafana/runtime';
 
 import { extractFieldsTransformer } from '../../transformers/extractFields/extractFields';
@@ -39,18 +39,7 @@ const setup = (partialProps?: Partial<ComponentProps<typeof LogsTableWrap>>) =>
 describe('LogsTableWrap', () => {
   beforeAll(() => {
     const transformers = [extractFieldsTransformer, organizeFieldsTransformer];
-    standardTransformersRegistry.setInit(() => {
-      return transformers.map((t) => {
-        return {
-          id: t.id,
-          aliasIds: t.aliasIds,
-          name: t.name,
-          transformation: t,
-          description: t.description,
-          editor: () => null,
-        };
-      });
-    });
+    mockTransformationsRegistry(transformers);
   });
 
   it('should render 4 table rows', async () => {

public/app/features/transformers/FilterByValueTransformer/FilterByValueTransformerEditor.tsx

@@ -24,6 +24,8 @@ import { Trans, t } from '@grafana/i18n';
 import { Button, RadioButtonGroup, InlineField, Box } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/filterByValue.svg';
+import lightImage from '../images/light/filterByValue.svg';
 
 import { DataFrameFieldsInfo, FilterByValueFilterEditor } from './FilterByValueFilterEditor';
 
@@ -160,6 +162,8 @@ export const getFilterByValueTransformRegistryItem: () => TransformerRegistryIte
     ),
     categories: new Set([TransformerCategory.Filter]),
     help: getTransformationContent(DataTransformerID.filterByValue).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });
 
 const useFieldsInfo = (data: DataFrame[]): DataFrameFieldsInfo => {

public/app/features/transformers/calculateHeatmap/HeatmapTransformerEditor.tsx

@@ -10,6 +10,8 @@ import {
 } from '@grafana/data';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/heatmap.svg';
+import lightImage from '../images/light/heatmap.svg';
 import { getDefaultOptions, getTransformerOptionPane } from '../spatial/optionsHelper';
 
 import { addHeatmapCalculationOptions } from './editor/helper';
@@ -53,5 +55,7 @@ export const getHeatmapTransformRegistryItem: () => TransformerRegistryItem<Heat
     state: PluginState.alpha,
     categories: new Set([TransformerCategory.CreateNewVisualization]),
     help: getTransformationContent(heatmapTransformer.id).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   };
 };

public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx

@@ -14,6 +14,8 @@ import { fieldMatchersUI, InlineField, InlineFieldRow, Select, useStyles2 } from
 
 import { getTransformationContent } from '../docs/getTransformationContent';
 import { FieldToConfigMappingEditor } from '../fieldToConfigMapping/FieldToConfigMappingEditor';
+import darkImage from '../images/dark/configFromData.svg';
+import lightImage from '../images/light/configFromData.svg';
 
 import { getConfigFromDataTransformer, ConfigFromQueryTransformOptions } from './configFromQuery';
 
@@ -110,6 +112,8 @@ export const getConfigFromQueryTransformRegistryItem: () => TransformerRegistryI
       state: PluginState.beta,
       categories: new Set([TransformerCategory.CalculateNewFields]),
       help: getTransformationContent(configFromDataTransformer.id).helperDocs,
+      imageDark: darkImage,
+      imageLight: lightImage,
     };
   };
 

public/app/features/transformers/editors/CalculateFieldTransformerEditor/CalculateFieldTransformerEditor.tsx

@@ -27,6 +27,8 @@ import { getTemplateSrv, config as cfg } from '@grafana/runtime';
 import { InlineField, InlineSwitch, Input, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../../docs/getTransformationContent';
+import darkImage from '../../images/dark/calculateField.svg';
+import lightImage from '../../images/light/calculateField.svg';
 
 import { BinaryOperationOptionsEditor } from './BinaryOperationOptionsEditor';
 import { CumulativeOptionsEditor } from './CumulativeOptionsEditor';
@@ -279,4 +281,6 @@ export const getCalculateFieldTransformRegistryItem: () => TransformerRegistryIt
     ),
     categories: new Set([TransformerCategory.CalculateNewFields]),
     help: getTransformationContent(DataTransformerID.calculateField).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx

@@ -13,6 +13,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, Input, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/concatenate.svg';
+import lightImage from '../images/light/concatenate.svg';
 
 interface ConcatenateTransformerEditorProps extends TransformerUIProps<ConcatenateTransformerOptions> {}
 
@@ -112,4 +114,6 @@ export const getConcatenateTransformRegistryItem: () => TransformerRegistryItem<
     categories: new Set([TransformerCategory.Combine]),
     help: getTransformationContent(DataTransformerID.concatenate).helperDocs,
     tags: new Set([t('transformers.editors.concatenate-transformer-editor.tags.combine', 'Combine')]),
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx

@@ -19,6 +19,8 @@ import { allFieldTypeIconOptions, FieldNamePicker } from '@grafana/ui/internal';
 import { findField } from 'app/features/dimensions/utils';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/convertFieldType.svg';
+import lightImage from '../images/light/convertFieldType.svg';
 import { getTimezoneOptions } from '../utils';
 
 import { EnumMappingEditor } from './EnumMappingEditor';
@@ -280,4 +282,6 @@ export const getConvertFieldTypeTransformRegistryItem: () => TransformerRegistry
     categories: new Set([TransformerCategory.Reformat]),
     help: getTransformationContent(DataTransformerID.convertFieldType).helperDocs,
     tags: new Set([t('transformers.convert-field-type-transformer-editor.tags.format-field', 'Format field')]),
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/FilterByNameTransformerEditor.tsx

@@ -17,6 +17,8 @@ import { getTemplateSrv } from '@grafana/runtime';
 import { Input, FilterPill, InlineFieldRow, InlineField, InlineSwitch, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/filterFieldsByName.svg';
+import lightImage from '../images/light/filterFieldsByName.svg';
 
 interface FilterByNameTransformerEditorProps extends TransformerUIProps<FilterFieldsByNameTransformerOptions> {}
 
@@ -265,4 +267,6 @@ export const getFilterFieldsByNameTransformRegistryItem: () => TransformerRegist
     ),
     categories: new Set([TransformerCategory.Filter]),
     help: getTransformationContent(DataTransformerID.filterFieldsByName).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx

@@ -11,6 +11,8 @@ import { t } from '@grafana/i18n';
 import { FrameMultiSelectionEditor } from 'app/plugins/panel/geomap/editor/FrameSelectionEditor';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/filterByRefId.svg';
+import lightImage from '../images/light/filterByRefId.svg';
 
 export const FilterByRefIdTransformerEditor = (props: TransformerUIProps<FilterFramesByRefIdTransformerOptions>) => {
   return (
@@ -42,4 +44,6 @@ export const getFilterFramesByRefIdTransformRegistryItem: () => TransformerRegis
     ),
     categories: new Set([TransformerCategory.Filter]),
     help: getTransformationContent(DataTransformerID.filterByRefId).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/FormatStringTransformerEditor.tsx

@@ -18,6 +18,9 @@ import { Select, InlineFieldRow, InlineField } from '@grafana/ui';
 import { FieldNamePicker } from '@grafana/ui/internal';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 
+import darkImage from '../images/dark/formatString.svg';
+import lightImage from '../images/light/formatString.svg';
+
 function FormatStringTransfomerEditor({
   input,
   options,
@@ -131,4 +134,6 @@ export const getFormatStringTransformerRegistryItem: () => TransformerRegistryIt
       'Manipulate string fields formatting.'
     ),
     categories: new Set([TransformerCategory.Reformat]),
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/FormatTimeTransformerEditor.tsx

@@ -14,6 +14,8 @@ import { Trans, t } from '@grafana/i18n';
 import { Select, InlineFieldRow, InlineField, Input, TextLink } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/formatTime.svg';
+import lightImage from '../images/light/formatTime.svg';
 import { getTimezoneOptions } from '../utils';
 
 export function FormatTimeTransfomerEditor({
@@ -129,4 +131,6 @@ export const getFormatTimeTransformerRegistryItem: () => TransformerRegistryItem
       'Set the output format of a time field'
     ),
     help: getTransformationContent(DataTransformerID.formatTime).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/GroupByTransformerEditor.tsx

@@ -16,6 +16,8 @@ import { t } from '@grafana/i18n';
 import { useTheme2, Select, StatsPicker, InlineField, Stack, Alert } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/groupBy.svg';
+import lightImage from '../images/light/groupBy.svg';
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
 interface FieldProps {
@@ -174,4 +176,6 @@ export const getGroupByTransformRegistryItem: () => TransformerRegistryItem<Grou
     TransformerCategory.Reformat,
   ]),
   help: getTransformationContent(DataTransformerID.groupBy).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });

public/app/features/transformers/editors/GroupToNestedTableTransformerEditor.tsx

@@ -22,6 +22,8 @@ import {
 import { t } from '@grafana/i18n';
 import { useTheme2, Select, StatsPicker, InlineField, Field, Switch, Alert, Stack } from '@grafana/ui';
 
+import darkImage from '../images/dark/groupToNestedTable.svg';
+import lightImage from '../images/light/groupToNestedTable.svg';
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
 interface FieldProps {
@@ -212,4 +214,6 @@ export const getGroupToNestedTableTransformRegistryItem: () => TransformerRegist
       TransformerCategory.Reformat,
     ]),
     state: PluginState.beta,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/GroupingToMatrixTransformerEditor.tsx

@@ -15,6 +15,8 @@ import { getTemplateSrv } from '@grafana/runtime';
 import { InlineField, InlineFieldRow, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/groupingToMatrix.svg';
+import lightImage from '../images/light/groupingToMatrix.svg';
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
 export const GroupingToMatrixTransformerEditor = ({
@@ -160,4 +162,6 @@ export const getGroupingToMatrixTransformRegistryItem: () => TransformerRegistry
     ),
     categories: new Set([TransformerCategory.Combine, TransformerCategory.Reformat]),
     help: getTransformationContent(DataTransformerID.groupingToMatrix).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/HistogramTransformerEditor.tsx

@@ -12,6 +12,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, InlineFieldRow, InlineSwitch } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/histogram.svg';
+import lightImage from '../images/light/histogram.svg';
 import { SuggestionsInput } from '../suggestionsInput/SuggestionsInput';
 import { getVariableSuggestions, numberOrVariableValidator } from '../utils';
 
@@ -147,4 +149,6 @@ export const getHistogramTransformRegistryItem: () => TransformerRegistryItem<Hi
   ),
   categories: new Set([TransformerCategory.CreateNewVisualization]),
   help: getTransformationContent(DataTransformerID.histogram).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });

public/app/features/transformers/editors/JoinByFieldTransformerEditor.tsx

@@ -15,6 +15,8 @@ import { Select, InlineFieldRow, InlineField } from '@grafana/ui';
 import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/internal';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/joinByField.svg';
+import lightImage from '../images/light/joinByField.svg';
 
 export function SeriesToFieldsTransformerEditor({ input, options, onChange }: TransformerUIProps<JoinByFieldOptions>) {
   const names = useFieldDisplayNames(input);
@@ -117,4 +119,6 @@ export const getJoinByFieldTransformerRegistryItem: () => TransformerRegistryIte
   ),
   categories: new Set([TransformerCategory.Combine]),
   help: getTransformationContent(DataTransformerID.joinByField).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });

public/app/features/transformers/editors/LabelsToFieldsTransformerEditor.tsx

@@ -13,6 +13,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, InlineFieldRow, RadioButtonGroup, Select, FilterPill, Stack } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/labelsToFields.svg';
+import lightImage from '../images/light/labelsToFields.svg';
 
 export const LabelsAsFieldsTransformerEditor = ({
   input,
@@ -150,4 +152,6 @@ export const getLabelsToFieldsTransformerRegistryItem: () => TransformerRegistry
   ),
   categories: new Set([TransformerCategory.Reformat]),
   help: getTransformationContent(DataTransformerID.labelsToFields).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });

public/app/features/transformers/editors/LimitTransformerEditor.tsx

@@ -12,6 +12,8 @@ import { t } from '@grafana/i18n';
 import { InlineFieldRow } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/limit.svg';
+import lightImage from '../images/light/limit.svg';
 import { SuggestionsInput } from '../suggestionsInput/SuggestionsInput';
 import { getVariableSuggestions, numberOrVariableValidator } from '../utils';
 
@@ -56,4 +58,6 @@ export const getLimitTransformRegistryItem: () => TransformerRegistryItem<LimitT
   ),
   categories: new Set([TransformerCategory.Filter]),
   help: getTransformationContent(DataTransformerID.limit).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });

public/app/features/transformers/editors/MergeTransformerEditor.tsx

@@ -10,6 +10,8 @@ import { Trans, t } from '@grafana/i18n';
 import { FieldValidationMessage } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/merge.svg';
+import lightImage from '../images/light/merge.svg';
 
 export const MergeTransformerEditor = ({ input, options, onChange }: TransformerUIProps<MergeTransformerOptions>) => {
   if (input.length <= 1) {
@@ -36,4 +38,6 @@ export const getMergeTransformerRegistryItem: () => TransformerRegistryItem<Merg
   ),
   categories: new Set([TransformerCategory.Combine]),
   help: getTransformationContent(DataTransformerID.merge).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });

public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx

@@ -36,6 +36,8 @@ import {
 
 import { createFieldsOrdererAuto } from '../../../../../packages/grafana-data/src/transformations/transformers/order';
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/organize.svg';
+import lightImage from '../images/light/organize.svg';
 import { getAllFieldNamesFromDataFrames, getDistinctLabels, useAllFieldNamesFromDataFrames } from '../utils';
 
 interface OrganizeFieldsTransformerEditorProps extends TransformerUIProps<OrganizeFieldsTransformerOptions> {}
@@ -507,4 +509,6 @@ export const getOrganizeFieldsTransformRegistryItem: () => TransformerRegistryIt
     ),
     categories: new Set([TransformerCategory.ReorderAndRename]),
     help: getTransformationContent(DataTransformerID.organize).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/ReduceTransformerEditor.tsx

@@ -15,6 +15,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, Select, StatsPicker, InlineSwitch } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/reduce.svg';
+import lightImage from '../images/light/reduce.svg';
 
 // TODO:  Minimal implementation, needs some <3
 export const ReduceTransformerEditor = ({ options, onChange }: TransformerUIProps<ReduceTransformerOptions>) => {
@@ -128,4 +130,6 @@ export const getReduceTransformRegistryItem: () => TransformerRegistryItem<Reduc
   ),
   categories: new Set([TransformerCategory.CalculateNewFields]),
   help: getTransformationContent(DataTransformerID.reduce).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });

public/app/features/transformers/editors/RenameByRegexTransformer.tsx

@@ -13,6 +13,8 @@ import { t } from '@grafana/i18n';
 import { InlineField, Input } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/renameByRegex.svg';
+import lightImage from '../images/light/renameByRegex.svg';
 
 interface RenameByRegexTransformerEditorProps extends TransformerUIProps<RenameByRegexTransformerOptions> {}
 
@@ -132,4 +134,6 @@ export const getRenameByRegexTransformRegistryItem: () => TransformerRegistryIte
     ),
     categories: new Set([TransformerCategory.ReorderAndRename]),
     help: getTransformationContent(DataTransformerID.renameByRegex).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/SeriesToRowsTransformerEditor.tsx

@@ -9,6 +9,8 @@ import { SeriesToRowsTransformerOptions } from '@grafana/data/internal';
 import { t } from '@grafana/i18n';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/seriesToRows.svg';
+import lightImage from '../images/light/seriesToRows.svg';
 
 export const SeriesToRowsTransformerEditor = ({
   input,
@@ -30,4 +32,6 @@ export const getSeriesToRowsTransformerRegistryItem: () => TransformerRegistryIt
     ),
     categories: new Set([TransformerCategory.Combine, TransformerCategory.Reformat]),
     help: getTransformationContent(DataTransformerID.seriesToRows).helperDocs,
+    imageDark: darkImage,
+    imageLight: lightImage,
   });

public/app/features/transformers/editors/SortByTransformerEditor.tsx

@@ -13,6 +13,8 @@ import { getTemplateSrv } from '@grafana/runtime';
 import { InlineField, InlineSwitch, InlineFieldRow, Select } from '@grafana/ui';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/sortBy.svg';
+import lightImage from '../images/light/sortBy.svg';
 import { useAllFieldNamesFromDataFrames } from '../utils';
 
 export const SortByTransformerEditor = ({ input, options, onChange }: TransformerUIProps<SortByTransformerOptions>) => {
@@ -72,4 +74,6 @@ export const getSortByTransformRegistryItem: () => TransformerRegistryItem<SortB
   description: t('transformers.sort-by-transformer-editor.description.sort-fields', 'Sort fields in a frame.'),
   categories: new Set([TransformerCategory.ReorderAndRename]),
   help: getTransformationContent(DataTransformerID.sortBy).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });

public/app/features/transformers/editors/TransposeTransformerEditor.tsx

@@ -9,6 +9,9 @@ import { TransposeTransformerOptions } from '@grafana/data/internal';
 import { t } from '@grafana/i18n';
 import { InlineField, InlineFieldRow, Input } from '@grafana/ui';
 
+import darkImage from '../images/dark/transpose.svg';
+import lightImage from '../images/light/transpose.svg';
+
 export const TransposeTransformerEditor = ({ options, onChange }: TransformerUIProps<TransposeTransformerOptions>) => {
   return (
     <>
@@ -58,4 +61,6 @@ export const getTransposeTransformerRegistryItem: () => TransformerRegistryItem<
     t('transformers.transpose-transformer-editor.tags.translate', 'Translate'),
     t('transformers.transpose-transformer-editor.tags.transform', 'Transform'),
   ]),
+  imageDark: darkImage,
+  imageLight: lightImage,
 });

public/app/features/transformers/extractFields/ExtractFieldsTransformerEditor.tsx

@@ -14,6 +14,8 @@ import { InlineField, InlineFieldRow, Select, InlineSwitch, Input, Combobox, Com
 import { FieldNamePicker } from '@grafana/ui/internal';
 
 import { getTransformationContent } from '../docs/getTransformationContent';
+import darkImage from '../images/dark/extractFields.svg';
+import lightImage from '../images/light/extractFields.svg';
 
 import { JSONPathEditor } from './components/JSONPathEditor';
 import { extractFieldsTransformer } from './extractFields';
@@ -191,4 +193,6 @@ export const getExtractFieldsTransformRegistryItem: () => TransformerRegistryIte
   ),
   categories: new Set([TransformerCategory.Reformat]),
   help: getTransformationContent(DataTransformerID.extractFields).helperDocs,
+  imageDark: darkImage,
+  imageLight: lightImage,
 });