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';