Configure path aliases (webpack, jest, ts)

Author: ddelemeny

.config/jest.config.js

@@ -10,6 +10,7 @@ const { grafanaESModules, nodeModulesToTransform } = require('./jest/utils');
 
 module.exports = {
   moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
     '\\.(css|scss|sass)$': 'identity-obj-proxy',
     'react-inlinesvg': path.resolve(__dirname, 'jest', 'mocks', 'react-inlinesvg.tsx'),
   },

.config/tsconfig.json

@@ -11,7 +11,10 @@
     "rootDir": "../src",
     "baseUrl": "../src",
     "typeRoots": ["../node_modules/@types"],
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "paths": {
+      "@/*": ["../src/*"]
+    }
   },
   "ts-node": {
     "compilerOptions": {

.config/webpack/webpack.config.ts

@@ -198,6 +198,9 @@ const config = async (env): Promise<Configuration> => {
     ],
 
     resolve: {
+      alias: {
+        '@': path.resolve(process.cwd(), 'src'),
+      },
       extensions: ['.js', '.jsx', '.ts', '.tsx'],
       // handle resolving "rootDir" paths
       modules: [path.resolve(process.cwd(), 'src'), 'node_modules'],

src/components/QueryEditor/AnnotationQueryEditor.tsx

@@ -4,7 +4,7 @@ import { AnnotationQuery } from '@grafana/data';
 import { EditorField, EditorRow } from '@grafana/experimental';
 import { Input } from '@grafana/ui';
 
-import { ElasticsearchQuery } from '../../types';
+import { ElasticsearchQuery } from '@/types';
 
 import { ElasticQueryEditorProps, ElasticSearchQueryField } from './index';
 

src/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 import { SelectableValue } from '@grafana/data';
 import { InlineSegmentGroup, Segment, SegmentAsync } from '@grafana/ui';
 
-import { useFields } from '../../../hooks/useFields';
-import { useDispatch } from '../../../hooks/useStatelessReducer';
+import { useFields } from '@/hooks/useFields';
+import { useDispatch } from '@/hooks/useStatelessReducer';
 import { segmentStyles } from '../styles';
 
-import { BucketAggregation, BucketAggregationType } from './../../../types';
+import { BucketAggregation, BucketAggregationType } from '@/types';
 import { SettingsEditor } from './SettingsEditor';
 import { isBucketAggregationWithField } from './aggregations';
 import { changeBucketAggregationField, changeBucketAggregationType } from './state/actions';

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx

@@ -5,9 +5,9 @@ import { GroupBase, OptionsOrGroups } from 'react-select';
 import { InternalTimeZones, SelectableValue } from '@grafana/data';
 import { InlineField, Input, Select, TimeZonePicker } from '@grafana/ui';
 
-import { useDispatch } from '../../../../hooks/useStatelessReducer';
-import { DateHistogram } from '../../../../types';
-import { useCreatableSelectPersistedBehaviour } from '../../../hooks/useCreatableSelectPersistedBehaviour';
+import { useDispatch } from '@/hooks/useStatelessReducer';
+import { DateHistogram } from '@/types';
+import { useCreatableSelectPersistedBehaviour } from '@/components/hooks/useCreatableSelectPersistedBehaviour';
 import { changeBucketAggregationSetting } from '../state/actions';
 import { bucketAggregationConfig } from '../utils';
 

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx

@@ -4,9 +4,9 @@ import React, { useEffect, useRef } from 'react';
 
 import { InlineField, Input, QueryField } from '@grafana/ui';
 
-import { useDispatch, useStatelessReducer } from '../../../../../hooks/useStatelessReducer';
-import { Filters } from '../../../../../types';
-import { AddRemove } from '../../../../AddRemove';
+import { useDispatch, useStatelessReducer } from '@/hooks/useStatelessReducer';
+import { Filters } from '@/types';
+import { AddRemove } from '@/components/AddRemove';
 import { changeBucketAggregationSetting } from '../../state/actions';
 
 import { addFilter, changeFilter, removeFilter } from './state/actions';

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/state/actions.ts

@@ -1,6 +1,6 @@
 import { createAction } from '@reduxjs/toolkit';
 
-import { Filter } from '../../../../../../types';
+import { Filter } from '@/types';
 
 export const addFilter = createAction('@bucketAggregations/filter/add');
 export const removeFilter = createAction<number>('@bucketAggregations/filter/remove');

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/state/reducer.test.ts

@@ -1,5 +1,5 @@
 import { reducerTester } from 'dependencies/reducerTester';
-import { Filter } from '../../../../../../types';
+import { Filter } from '@/types';
 
 import { addFilter, changeFilter, removeFilter } from './actions';
 import { reducer } from './reducer';

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/state/reducer.ts

@@ -1,6 +1,6 @@
 import { Action } from 'redux';
 
-import { Filter } from '../../../../../../types';
+import { Filter } from '@/types';
 import { defaultFilter } from '../utils';
 
 import { addFilter, changeFilter, removeFilter } from './actions';

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/utils.ts

@@ -1,3 +1,3 @@
-import { Filter } from '../../../../../types';
+import { Filter } from '@/types';
 
 export const defaultFilter = (): Filter => ({ label: '', query: '*' });

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import React from 'react';
 import selectEvent from 'react-select-event';
 
-import { ElasticsearchQuery, Terms, Average, Derivative, TopMetrics } from '../../../../types';
+import { ElasticsearchQuery, Terms, Average, Derivative, TopMetrics } from '@/types';
 
 import { TermsSettingsEditor } from './TermsSettingsEditor';
 import { describeMetric } from 'utils';

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx

@@ -4,12 +4,12 @@ import React, { useRef } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { InlineField, Select, Input } from '@grafana/ui';
 
-import { useDispatch } from '../../../../hooks/useStatelessReducer';
-import { MetricAggregation, Percentiles, ExtendedStatMetaType, ExtendedStats, Terms } from '../../../../types';
-import { describeMetric } from '../../../../utils';
-import { useCreatableSelectPersistedBehaviour } from '../../../hooks/useCreatableSelectPersistedBehaviour';
-import { useQuery } from '../../ElasticsearchQueryContext';
-import { isPipelineAggregation } from '../../MetricAggregationsEditor/aggregations';
+import { useDispatch } from '@/hooks/useStatelessReducer';
+import { MetricAggregation, Percentiles, ExtendedStatMetaType, ExtendedStats, Terms } from '@/types';
+import { describeMetric } from '@/utils';
+import { useCreatableSelectPersistedBehaviour } from '@/components/hooks/useCreatableSelectPersistedBehaviour';
+import { useQuery } from '@/components/QueryEditor/ElasticsearchQueryContext';
+import { isPipelineAggregation } from '@/components/QueryEditor/MetricAggregationsEditor/aggregations';
 import { changeBucketAggregationSetting } from '../state/actions';
 import { bucketAggregationConfig, orderByOptions, orderOptions, sizeOptions } from '../utils';
 

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/index.tsx

@@ -3,9 +3,9 @@ import React, { ComponentProps, useRef } from 'react';
 
 import { InlineField, Input } from '@grafana/ui';
 
-import { useDispatch } from '../../../../hooks/useStatelessReducer';
-import { BucketAggregation } from '../../../../types';
-import { SettingsEditorContainer } from '../../SettingsEditorContainer';
+import { useDispatch } from '@/hooks/useStatelessReducer';
+import { BucketAggregation } from '@/types';
+import { SettingsEditorContainer } from '@/components/QueryEditor/SettingsEditorContainer';
 import { changeBucketAggregationSetting } from '../state/actions';
 import { bucketAggregationConfig } from '../utils';
 

src/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/useDescription.ts

@@ -1,5 +1,5 @@
-import { BucketAggregation } from '../../../../types';
-import { describeMetric, convertOrderByToMetricId } from '../../../../utils';
+import { BucketAggregation } from '@/types';
+import { describeMetric, convertOrderByToMetricId } from '@/utils';
 import { useQuery } from '../../ElasticsearchQueryContext';
 import { bucketAggregationConfig, orderByOptions, orderOptions } from '../utils';
 

src/components/QueryEditor/BucketAggregationsEditor/aggregations.ts

@@ -1,4 +1,4 @@
-import { BucketAggregationType, BucketAggregationWithField, BucketAggregation } from '../../../types';
+import { BucketAggregationType, BucketAggregationWithField, BucketAggregation } from '@/types';
 
 import { bucketAggregationConfig } from './utils';
 

src/components/QueryEditor/BucketAggregationsEditor/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { useDispatch } from '../../../hooks/useStatelessReducer';
-import { IconButton } from '../../IconButton';
+import { useDispatch } from '@/hooks/useStatelessReducer';
+import { IconButton } from '@/components/IconButton';
 import { useQuery } from '../ElasticsearchQueryContext';
 import { QueryEditorRow } from '../QueryEditorRow';
 
-import { BucketAggregation } from './../../../types';
+import { BucketAggregation } from '@/types';
 import { BucketAggregationEditor } from './BucketAggregationEditor';
 import { addBucketAggregation, removeBucketAggregation } from './state/actions';
 

src/components/QueryEditor/BucketAggregationsEditor/state/actions.ts

@@ -1,6 +1,6 @@
 import { createAction } from '@reduxjs/toolkit';
 
-import { BucketAggregation, BucketAggregationType, BucketAggregationWithField } from '../../../../types';
+import { BucketAggregation, BucketAggregationType, BucketAggregationWithField } from '@/types';
 
 export const addBucketAggregation = createAction<BucketAggregation['id']>('@bucketAggs/add');
 export const removeBucketAggregation = createAction<BucketAggregation['id']>('@bucketAggs/remove');

src/components/QueryEditor/BucketAggregationsEditor/state/reducer.test.ts

@@ -1,5 +1,5 @@
-import { reducerTester } from './../../../../dependencies/reducerTester';
-import { BucketAggregation, DateHistogram, ElasticsearchQuery } from '../../../../types';
+import { reducerTester } from '@/dependencies/reducerTester';
+import { BucketAggregation, DateHistogram, ElasticsearchQuery } from '@/types';
 import { changeMetricType } from '../../MetricAggregationsEditor/state/actions';
 import { initQuery } from '../../state';
 import { bucketAggregationConfig } from '../utils';
@@ -12,7 +12,7 @@ import {
   removeBucketAggregation,
 } from './actions';
 import { createReducer } from './reducer';
-import { defaultBucketAgg } from './../../../../queryDef';
+import { defaultBucketAgg } from '@/queryDef';
 
 describe('Bucket Aggregations Reducer', () => {
   it('Should correctly add new aggregations', () => {

src/components/QueryEditor/BucketAggregationsEditor/state/reducer.ts

@@ -1,8 +1,8 @@
 import { Action } from '@reduxjs/toolkit';
 
-import { defaultBucketAgg } from '../../../../queryDef';
-import { ElasticsearchQuery, Terms, BucketAggregation } from '../../../../types';
-import { removeEmpty } from '../../../../utils';
+import { defaultBucketAgg } from '@/queryDef';
+import { ElasticsearchQuery, Terms, BucketAggregation } from '@/types';
+import { removeEmpty } from '@/utils';
 import { changeMetricType } from '../../MetricAggregationsEditor/state/actions';
 import { metricAggregationConfig } from '../../MetricAggregationsEditor/utils';
 import { initQuery, initExploreQuery } from '../../state';

src/components/QueryEditor/BucketAggregationsEditor/utils.ts

@@ -1,6 +1,6 @@
 import { InternalTimeZones, SelectableValue } from '@grafana/data';
 
-import { BucketsConfiguration } from '../../../types';
+import { BucketsConfiguration } from '@/types';
 
 import { defaultFilter } from './SettingsEditor/FiltersSettingsEditor/utils';
 

src/components/QueryEditor/ElasticsearchQueryContext.test.tsx

@@ -4,8 +4,8 @@ import React, { PropsWithChildren } from 'react';
 
 import { CoreApp, getDefaultTimeRange } from '@grafana/data';
 
-import { ElasticDatasource } from '../../datasource';
-import { ElasticsearchQuery } from '../../types';
+import { ElasticDatasource } from '@/datasource';
+import { ElasticsearchQuery } from '@/types';
 
 import { ElasticsearchProvider, useQuery } from './ElasticsearchQueryContext';
 

src/components/QueryEditor/ElasticsearchQueryContext.tsx

@@ -2,9 +2,9 @@ import React, { Context, createContext, PropsWithChildren, useCallback, useConte
 
 import { CoreApp, TimeRange } from '@grafana/data';
 
-import { ElasticDatasource } from '../../datasource';
-import { combineReducers, useStatelessReducer, DispatchContext } from '../../hooks/useStatelessReducer';
-import { ElasticsearchQuery } from '../../types';
+import { ElasticDatasource } from '@/datasource';
+import { combineReducers, useStatelessReducer, DispatchContext } from '@/hooks/useStatelessReducer';
+import { ElasticsearchQuery } from '@/types';
 
 import { createReducer as createBucketAggsReducer } from './BucketAggregationsEditor/state/reducer';
 import { reducer as metricsReducer } from './MetricAggregationsEditor/state/reducer';

src/components/QueryEditor/MetricAggregationsEditor/MetricEditor.test.tsx

@@ -5,12 +5,11 @@ import { from } from 'rxjs';
 
 import { CoreApp, getDefaultTimeRange } from '@grafana/data';
 
-import { ElasticDatasource } from '../../../datasource';
-import { defaultBucketAgg } from '../../../queryDef';
-import { ElasticsearchQuery } from '../../../types';
+import { ElasticDatasource } from '@/datasource';
+import { defaultBucketAgg } from '@/queryDef';
+import { ElasticsearchQuery, Count, UniqueCount } from '@/types';
 import { ElasticsearchProvider } from '../ElasticsearchQueryContext';
 
-import { Count, UniqueCount } from './../../../types';
 import { MetricEditor } from './MetricEditor';
 
 describe('Metric Editor', () => {

src/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx

@@ -5,9 +5,9 @@ import React, { useCallback } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { InlineSegmentGroup, SegmentAsync, useTheme2 } from '@grafana/ui';
 
-import { useFields } from '../../../hooks/useFields';
-import { useDispatch } from '../../../hooks/useStatelessReducer';
-import { MetricAggregation, MetricAggregationType } from '../../../types';
+import { useFields } from '@/hooks/useFields';
+import { useDispatch } from '@/hooks/useStatelessReducer';
+import { MetricAggregation, MetricAggregationType } from '@/types';
 import { MetricPicker } from '../../MetricPicker';
 import { useQuery } from '../ElasticsearchQueryContext';
 import { segmentStyles } from '../styles';

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx

@@ -4,10 +4,10 @@ import React, { Fragment, useEffect } from 'react';
 
 import { Input, InlineLabel } from '@grafana/ui';
 
-import { useStatelessReducer, useDispatch } from '../../../../../hooks/useStatelessReducer';
-import { BucketScript, MetricAggregation } from '../../../../../types';
-import { AddRemove } from '../../../../AddRemove';
-import { MetricPicker } from '../../../../MetricPicker';
+import { useStatelessReducer, useDispatch } from '@/hooks/useStatelessReducer';
+import { BucketScript, MetricAggregation } from '@/types';
+import { AddRemove } from '@/components/AddRemove';
+import { MetricPicker } from '@/components/MetricPicker';
 import { changeMetricAttribute } from '../../state/actions';
 import { SettingField } from '../SettingField';
 

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/state/reducer.test.ts

@@ -1,5 +1,5 @@
 import { reducerTester } from 'dependencies/reducerTester';
-import { PipelineVariable } from '../../../../../../types';
+import { PipelineVariable } from '@/types';
 
 import {
   addPipelineVariable,

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/state/reducer.ts

@@ -1,6 +1,6 @@
 import { Action } from '@reduxjs/toolkit';
 
-import { PipelineVariable } from '../../../../../../types';
+import { PipelineVariable } from '@/types';
 import { defaultPipelineVariable, generatePipelineVariableName } from '../utils';
 
 import {

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/utils.ts

@@ -1,4 +1,4 @@
-import { PipelineVariable } from '../../../../../types';
+import { PipelineVariable } from '@/types';
 
 export const defaultPipelineVariable = (name: string): PipelineVariable => ({ name, pipelineAgg: '' });
 

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/MovingAverageSettingsEditor.tsx

@@ -3,9 +3,9 @@ import React, { useRef } from 'react';
 
 import { Input, InlineField, Select, InlineSwitch } from '@grafana/ui';
 
-import { useDispatch } from '../../../../hooks/useStatelessReducer';
-import { movingAvgModelOptions } from '../../../../queryDef';
-import { MovingAverage } from '../../../../types';
+import { useDispatch } from '@/hooks/useStatelessReducer';
+import { movingAvgModelOptions } from '@/queryDef';
+import { MovingAverage } from '@/types';
 import { isEWMAMovingAverage, isHoltMovingAverage, isHoltWintersMovingAverage } from '../aggregations';
 import { changeMetricSetting } from '../state/actions';
 

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx

@@ -3,9 +3,9 @@ import React, { ComponentProps, useState } from 'react';
 
 import { InlineField, Input } from '@grafana/ui';
 
-import { useDispatch } from '../../../../hooks/useStatelessReducer';
-import { MetricAggregationWithSettings } from '../../../../types';
-import { SettingKeyOf } from '../../../types';
+import { useDispatch } from '@/hooks/useStatelessReducer';
+import { MetricAggregationWithSettings } from '@/types';
+import { SettingKeyOf } from '@/components/types';
 import { changeMetricSetting } from '../state/actions';
 
 interface Props<T extends MetricAggregationWithSettings, K extends SettingKeyOf<T>> {

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx

@@ -4,10 +4,10 @@ import React from 'react';
 import { SelectableValue } from '@grafana/data';
 import { AsyncMultiSelect, InlineField, SegmentAsync, Select } from '@grafana/ui';
 
-import { useFields } from '../../../../hooks/useFields';
-import { useDispatch } from '../../../../hooks/useStatelessReducer';
-import { TopMetrics } from '../../../../types';
-import { orderOptions } from '../../BucketAggregationsEditor/utils';
+import { useFields } from '@/hooks/useFields';
+import { useDispatch } from '@/hooks/useStatelessReducer';
+import { TopMetrics } from '@/types';
+import { orderOptions } from '@/components/QueryEditor/BucketAggregationsEditor/utils';
 import { changeMetricSetting } from '../state/actions';
 
 interface Props {

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.test.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import { CoreApp, getDefaultTimeRange } from '@grafana/data';
 
-import { ElasticDatasource } from '../../../../datasource';
-import { ElasticsearchQuery } from '../../../../types';
+import { ElasticDatasource } from '@/datasource';
+import { ElasticsearchQuery } from '@/types';
 import { ElasticsearchProvider } from '../../ElasticsearchQueryContext';
 
 import { SettingsEditor } from '.';

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx

@@ -2,9 +2,9 @@ import { uniqueId } from 'lodash';
 import React, { ComponentProps, useRef, useState } from 'react';
 import { InlineField, Input, InlineSwitch, Select } from '@grafana/ui';
 
-import { useDispatch } from '../../../../hooks/useStatelessReducer';
-import { extendedStats } from '../../../../queryDef';
-import { MetricAggregation, ExtendedStat } from '../../../../types';
+import { useDispatch } from '@/hooks/useStatelessReducer';
+import { extendedStats } from '@/queryDef';
+import { MetricAggregation, ExtendedStat } from '@/types';
 import { useQuery } from '../../ElasticsearchQueryContext';
 import { SettingsEditorContainer } from '../../SettingsEditorContainer';
 import { isMetricAggregationWithMissingSupport } from '../aggregations';

src/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/useDescription.ts

@@ -1,5 +1,5 @@
 import { extendedStats } from 'queryDef';
-import { MetricAggregation } from '../../../../types';
+import { MetricAggregation } from '@/types';
 
 const hasValue = (value: string) => (object: { value: string }) => object.value === value;
 

src/components/QueryEditor/MetricAggregationsEditor/aggregations.ts

@@ -8,7 +8,7 @@ import {
   MetricAggregationWithMissingSupport,
   PipelineMetricAggregation,
   MetricAggregationWithSettings,
-} from '../../../types';
+} from '@/types';
 
 import { metricAggregationConfig } from './utils';