You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by po...@apache.org on 2022/07/12 15:51:50 UTC

[airflow] branch main updated: Add absolute paths for typescript files (#24978)

This is an automated email from the ASF dual-hosted git repository.

potiuk pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 2a0d3d132f Add absolute paths for typescript files (#24978)
2a0d3d132f is described below

commit 2a0d3d132f651d23219fbffb5918b473923b6935
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Tue Jul 12 11:51:40 2022 -0400

    Add absolute paths for typescript files (#24978)
    
    * Add absolute paths for typescript files
    
    Update jest, webpack and ts config files to allow for two aliased paths:
    `app` = `static/js`
    `grid` = `static/js/grid`
    
    * remove extraneous path var
---
 airflow/www/jest.config.js                                |  5 +++++
 airflow/www/static/js/grid/ResetRoot.tsx                  |  2 +-
 airflow/www/static/js/grid/api/useGridData.ts             | 10 +++++-----
 airflow/www/static/js/grid/api/useTaskLog.tsx             |  3 ++-
 airflow/www/static/js/grid/api/useTasks.ts                |  3 ++-
 airflow/www/static/js/grid/components/Clipboard.tsx       |  2 +-
 .../static/js/grid/components/InstanceTooltip.test.tsx    |  5 +++--
 airflow/www/static/js/grid/components/InstanceTooltip.tsx |  7 ++++---
 airflow/www/static/js/grid/components/StatusBox.tsx       |  9 +++++----
 airflow/www/static/js/grid/components/TaskName.test.tsx   |  3 ++-
 airflow/www/static/js/grid/components/Time.test.tsx       |  5 +++--
 airflow/www/static/js/grid/components/Time.tsx            |  5 +++--
 airflow/www/static/js/grid/context/autorefresh.tsx        |  3 ++-
 airflow/www/static/js/grid/dagRuns/Bar.tsx                |  9 +++++----
 airflow/www/static/js/grid/dagRuns/Tooltip.tsx            |  5 +++--
 airflow/www/static/js/grid/dagRuns/index.test.tsx         |  7 ++++---
 airflow/www/static/js/grid/dagRuns/index.tsx              |  9 +++++----
 airflow/www/static/js/grid/details/Header.tsx             |  8 ++++----
 .../www/static/js/grid/details/content/ConfirmDialog.tsx  |  2 +-
 .../www/static/js/grid/details/content/dagRun/index.tsx   | 15 ++++++++-------
 .../js/grid/details/content/taskInstance/Details.tsx      | 12 ++++++------
 .../js/grid/details/content/taskInstance/ExtraLinks.tsx   |  4 ++--
 .../js/grid/details/content/taskInstance/Logs/LogLink.tsx |  6 +++---
 .../grid/details/content/taskInstance/Logs/index.test.tsx |  4 +++-
 .../js/grid/details/content/taskInstance/Logs/index.tsx   | 13 +++++++------
 .../js/grid/details/content/taskInstance/Logs/utils.ts    |  2 +-
 .../static/js/grid/details/content/taskInstance/Nav.tsx   |  6 +++---
 .../static/js/grid/details/content/taskInstance/index.tsx |  8 ++++----
 airflow/www/static/js/grid/details/index.tsx              |  3 ++-
 airflow/www/tsconfig.json                                 |  7 ++++++-
 airflow/www/webpack.config.js                             |  4 ++++
 31 files changed, 109 insertions(+), 77 deletions(-)

diff --git a/airflow/www/jest.config.js b/airflow/www/jest.config.js
index 677bdcc112..6704331cb7 100644
--- a/airflow/www/jest.config.js
+++ b/airflow/www/jest.config.js
@@ -24,6 +24,11 @@ const config = {
   },
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['./jest-setup.js'],
+  moduleDirectories: ['node_modules'],
+  moduleNameMapper: { // Listing all aliases
+    '^app/(.*)$': '<rootDir>/static/js/$1',
+    '^grid/(.*)$': '<rootDir>/static/js/grid/$1',
+  },
 };
 
 module.exports = config;
diff --git a/airflow/www/static/js/grid/ResetRoot.tsx b/airflow/www/static/js/grid/ResetRoot.tsx
index bd6a89e3b7..6e8ded9d89 100644
--- a/airflow/www/static/js/grid/ResetRoot.tsx
+++ b/airflow/www/static/js/grid/ResetRoot.tsx
@@ -20,7 +20,7 @@
 import React from 'react';
 import { Button, Link } from '@chakra-ui/react';
 
-import { getMetaValue } from '../utils';
+import { getMetaValue } from 'app/utils';
 
 const root = getMetaValue('root');
 const url = getMetaValue('grid_url_no_root');
diff --git a/airflow/www/static/js/grid/api/useGridData.ts b/airflow/www/static/js/grid/api/useGridData.ts
index ec12ee6d60..38a78753db 100644
--- a/airflow/www/static/js/grid/api/useGridData.ts
+++ b/airflow/www/static/js/grid/api/useGridData.ts
@@ -20,13 +20,13 @@
 import { useQuery } from 'react-query';
 import axios, { AxiosResponse } from 'axios';
 
-import { getMetaValue } from '../../utils';
-import { useAutoRefresh } from '../context/autorefresh';
-import useErrorToast from '../utils/useErrorToast';
+import { getMetaValue } from 'app/utils';
+import { useAutoRefresh } from 'grid/context/autorefresh';
+import useErrorToast from 'grid/utils/useErrorToast';
 import useFilters, {
   BASE_DATE_PARAM, NUM_RUNS_PARAM, RUN_STATE_PARAM, RUN_TYPE_PARAM, now,
-} from '../utils/useFilters';
-import type { Task, DagRun } from '../types';
+} from 'grid/utils/useFilters';
+import type { Task, DagRun } from 'grid/types';
 
 const DAG_ID_PARAM = 'dag_id';
 
diff --git a/airflow/www/static/js/grid/api/useTaskLog.tsx b/airflow/www/static/js/grid/api/useTaskLog.tsx
index 8d56028629..23aee4da07 100644
--- a/airflow/www/static/js/grid/api/useTaskLog.tsx
+++ b/airflow/www/static/js/grid/api/useTaskLog.tsx
@@ -19,7 +19,8 @@
 
 import axios, { AxiosResponse } from 'axios';
 import { useQuery } from 'react-query';
-import { getMetaValue } from '../../utils';
+
+import { getMetaValue } from 'app/utils';
 
 const taskLogApi = getMetaValue('task_log_api');
 
diff --git a/airflow/www/static/js/grid/api/useTasks.ts b/airflow/www/static/js/grid/api/useTasks.ts
index 68878a78a0..2857a88ffe 100644
--- a/airflow/www/static/js/grid/api/useTasks.ts
+++ b/airflow/www/static/js/grid/api/useTasks.ts
@@ -19,7 +19,8 @@
 
 import axios, { AxiosResponse } from 'axios';
 import { useQuery } from 'react-query';
-import { getMetaValue } from '../../utils';
+
+import { getMetaValue } from 'app/utils';
 
 interface TaskData {
   tasks: any[];
diff --git a/airflow/www/static/js/grid/components/Clipboard.tsx b/airflow/www/static/js/grid/components/Clipboard.tsx
index bb9b1d0d55..d7e4efbdd9 100644
--- a/airflow/www/static/js/grid/components/Clipboard.tsx
+++ b/airflow/www/static/js/grid/components/Clipboard.tsx
@@ -27,7 +27,7 @@ import {
 } from '@chakra-ui/react';
 import { FiCopy } from 'react-icons/fi';
 
-import { useContainerRef } from '../context/containerRef';
+import { useContainerRef } from 'grid/context/containerRef';
 
 export const ClipboardButton = forwardRef(
   (
diff --git a/airflow/www/static/js/grid/components/InstanceTooltip.test.tsx b/airflow/www/static/js/grid/components/InstanceTooltip.test.tsx
index 71e1147da9..15f2db2c7e 100644
--- a/airflow/www/static/js/grid/components/InstanceTooltip.test.tsx
+++ b/airflow/www/static/js/grid/components/InstanceTooltip.test.tsx
@@ -22,9 +22,10 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
+import { Wrapper } from 'grid/utils/testUtils';
+import type { TaskState } from 'grid/types';
+
 import InstanceTooltip from './InstanceTooltip';
-import { Wrapper } from '../utils/testUtils';
-import type { TaskState } from '../types';
 
 const instance = {
   startDate: new Date().toISOString(),
diff --git a/airflow/www/static/js/grid/components/InstanceTooltip.tsx b/airflow/www/static/js/grid/components/InstanceTooltip.tsx
index dc15fe1261..e556d0ddde 100644
--- a/airflow/www/static/js/grid/components/InstanceTooltip.tsx
+++ b/airflow/www/static/js/grid/components/InstanceTooltip.tsx
@@ -20,10 +20,11 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
 
-import { finalStatesMap } from '../../utils';
-import { formatDuration, getDuration } from '../../datetime_utils';
+import { finalStatesMap } from 'app/utils';
+import { formatDuration, getDuration } from 'app/datetime_utils';
+import type { TaskInstance, Task } from 'grid/types';
+
 import Time from './Time';
-import type { TaskInstance, Task } from '../types';
 
 interface Props {
   group: Task;
diff --git a/airflow/www/static/js/grid/components/StatusBox.tsx b/airflow/www/static/js/grid/components/StatusBox.tsx
index dd8dfabfb1..a4f936e5e9 100644
--- a/airflow/www/static/js/grid/components/StatusBox.tsx
+++ b/airflow/www/static/js/grid/components/StatusBox.tsx
@@ -25,12 +25,13 @@ import {
   BoxProps,
 } from '@chakra-ui/react';
 
+import { useContainerRef } from 'grid/context/containerRef';
+import type { Task, TaskInstance, TaskState } from 'grid/types';
+import type { SelectionProps } from 'grid/utils/useSelection';
+import { hoverDelay } from 'grid/utils';
+
 import Tooltip from './Tooltip';
 import InstanceTooltip from './InstanceTooltip';
-import { useContainerRef } from '../context/containerRef';
-import type { Task, TaskInstance, TaskState } from '../types';
-import type { SelectionProps } from '../utils/useSelection';
-import { hoverDelay } from '../utils';
 
 export const boxSize = 10;
 export const boxSizePx = `${boxSize}px`;
diff --git a/airflow/www/static/js/grid/components/TaskName.test.tsx b/airflow/www/static/js/grid/components/TaskName.test.tsx
index f2f8e0fd6a..d1c334afa4 100644
--- a/airflow/www/static/js/grid/components/TaskName.test.tsx
+++ b/airflow/www/static/js/grid/components/TaskName.test.tsx
@@ -22,8 +22,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
+import { ChakraWrapper } from 'grid/utils/testUtils';
+
 import TaskName from './TaskName';
-import { ChakraWrapper } from '../utils/testUtils';
 
 describe('Test TaskName', () => {
   test('Displays a normal task name', () => {
diff --git a/airflow/www/static/js/grid/components/Time.test.tsx b/airflow/www/static/js/grid/components/Time.test.tsx
index a7de6f5f32..9c83ac1ad0 100644
--- a/airflow/www/static/js/grid/components/Time.test.tsx
+++ b/airflow/www/static/js/grid/components/Time.test.tsx
@@ -25,9 +25,10 @@ import {
 } from '@testing-library/react';
 import moment from 'moment-timezone';
 
-import { defaultFormatWithTZ, TimezoneEvent } from '../../datetime_utils';
+import { defaultFormatWithTZ, TimezoneEvent } from 'app/datetime_utils';
+import { Wrapper } from 'grid/utils/testUtils';
+
 import Time from './Time';
-import { Wrapper } from '../utils/testUtils';
 
 describe('Test Time and TimezoneProvider', () => {
   test('Displays a UTC time correctly', () => {
diff --git a/airflow/www/static/js/grid/components/Time.tsx b/airflow/www/static/js/grid/components/Time.tsx
index fbc0b16e79..5634652b39 100644
--- a/airflow/www/static/js/grid/components/Time.tsx
+++ b/airflow/www/static/js/grid/components/Time.tsx
@@ -19,8 +19,9 @@
 
 import React from 'react';
 import moment from 'moment-timezone';
-import { useTimezone } from '../context/timezone';
-import { defaultFormatWithTZ } from '../../datetime_utils';
+
+import { useTimezone } from 'grid/context/timezone';
+import { defaultFormatWithTZ } from 'app/datetime_utils';
 
 interface Props {
   dateTime: string;
diff --git a/airflow/www/static/js/grid/context/autorefresh.tsx b/airflow/www/static/js/grid/context/autorefresh.tsx
index 6ac37f854b..6f4296c2df 100644
--- a/airflow/www/static/js/grid/context/autorefresh.tsx
+++ b/airflow/www/static/js/grid/context/autorefresh.tsx
@@ -22,7 +22,8 @@
 import React, {
   useMemo, useContext, useState, useEffect, useCallback,
 } from 'react';
-import { getMetaValue } from '../../utils';
+
+import { getMetaValue } from 'app/utils';
 
 const autoRefreshKey = 'disabledAutoRefresh';
 
diff --git a/airflow/www/static/js/grid/dagRuns/Bar.tsx b/airflow/www/static/js/grid/dagRuns/Bar.tsx
index 660619f5b7..854338c204 100644
--- a/airflow/www/static/js/grid/dagRuns/Bar.tsx
+++ b/airflow/www/static/js/grid/dagRuns/Bar.tsx
@@ -32,12 +32,13 @@ import {
 import { MdPlayArrow } from 'react-icons/md';
 import { RiArrowGoBackFill } from 'react-icons/ri';
 
+import { useContainerRef } from 'grid/context/containerRef';
+import Time from 'grid/components/Time';
+import type { SelectionProps } from 'grid/utils/useSelection';
+import { hoverDelay } from 'grid/utils';
+
 import DagRunTooltip from './Tooltip';
-import { useContainerRef } from '../context/containerRef';
-import Time from '../components/Time';
-import type { SelectionProps } from '../utils/useSelection';
 import type { RunWithDuration } from '.';
-import { hoverDelay } from '../utils';
 
 const BAR_HEIGHT = 100;
 
diff --git a/airflow/www/static/js/grid/dagRuns/Tooltip.tsx b/airflow/www/static/js/grid/dagRuns/Tooltip.tsx
index bf388094c0..d511e8f001 100644
--- a/airflow/www/static/js/grid/dagRuns/Tooltip.tsx
+++ b/airflow/www/static/js/grid/dagRuns/Tooltip.tsx
@@ -20,8 +20,9 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
 
-import { formatDuration } from '../../datetime_utils';
-import Time from '../components/Time';
+import { formatDuration } from 'app/datetime_utils';
+import Time from 'grid/components/Time';
+
 import type { RunWithDuration } from './index';
 
 interface Props {
diff --git a/airflow/www/static/js/grid/dagRuns/index.test.tsx b/airflow/www/static/js/grid/dagRuns/index.test.tsx
index c91e15f59f..5a927b7005 100644
--- a/airflow/www/static/js/grid/dagRuns/index.test.tsx
+++ b/airflow/www/static/js/grid/dagRuns/index.test.tsx
@@ -23,10 +23,11 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import moment from 'moment-timezone';
 
+import { TableWrapper } from 'grid/utils/testUtils';
+import * as useGridDataModule from 'grid/api/useGridData';
+import type { DagRun } from 'grid/types';
+
 import DagRuns from './index';
-import { TableWrapper } from '../utils/testUtils';
-import * as useGridDataModule from '../api/useGridData';
-import type { DagRun } from '../types';
 
 const datestring = (new Date()).toISOString();
 const generateRuns = (length: number): DagRun[] => (
diff --git a/airflow/www/static/js/grid/dagRuns/index.tsx b/airflow/www/static/js/grid/dagRuns/index.tsx
index 6b779175f8..1867443692 100644
--- a/airflow/www/static/js/grid/dagRuns/index.tsx
+++ b/airflow/www/static/js/grid/dagRuns/index.tsx
@@ -29,11 +29,12 @@ import {
   BoxProps,
 } from '@chakra-ui/react';
 
-import { useGridData } from '../api';
+import { useGridData } from 'grid/api';
+import { getDuration, formatDuration } from 'app/datetime_utils';
+import useSelection from 'grid/utils/useSelection';
+import type { DagRun } from 'grid/types';
+
 import DagRunBar from './Bar';
-import { getDuration, formatDuration } from '../../datetime_utils';
-import useSelection from '../utils/useSelection';
-import type { DagRun } from '../types';
 
 const DurationAxis = (props: BoxProps) => (
   <Box position="absolute" borderBottomWidth={1} zIndex={0} opacity={0.7} width="100%" {...props} />
diff --git a/airflow/www/static/js/grid/details/Header.tsx b/airflow/www/static/js/grid/details/Header.tsx
index db6a75b993..1aa6633017 100644
--- a/airflow/www/static/js/grid/details/Header.tsx
+++ b/airflow/www/static/js/grid/details/Header.tsx
@@ -27,10 +27,10 @@ import {
 import { MdPlayArrow, MdOutlineSchedule } from 'react-icons/md';
 import { RiArrowGoBackFill } from 'react-icons/ri';
 
-import { getMetaValue } from '../../utils';
-import useSelection from '../utils/useSelection';
-import Time from '../components/Time';
-import { useTasks, useGridData } from '../api';
+import { getMetaValue } from 'app/utils';
+import useSelection from 'grid/utils/useSelection';
+import Time from 'grid/components/Time';
+import { useTasks, useGridData } from 'grid/api';
 import BreadcrumbText from './BreadcrumbText';
 
 const dagId = getMetaValue('dag_id');
diff --git a/airflow/www/static/js/grid/details/content/ConfirmDialog.tsx b/airflow/www/static/js/grid/details/content/ConfirmDialog.tsx
index 9bdd7586a1..b9e2a212a6 100644
--- a/airflow/www/static/js/grid/details/content/ConfirmDialog.tsx
+++ b/airflow/www/static/js/grid/details/content/ConfirmDialog.tsx
@@ -30,7 +30,7 @@ import {
   Text,
 } from '@chakra-ui/react';
 
-import { useContainerRef } from '../../context/containerRef';
+import { useContainerRef } from 'grid/context/containerRef';
 
 interface Props {
   isOpen: boolean;
diff --git a/airflow/www/static/js/grid/details/content/dagRun/index.tsx b/airflow/www/static/js/grid/details/content/dagRun/index.tsx
index ad6942f386..b8b4120b96 100644
--- a/airflow/www/static/js/grid/details/content/dagRun/index.tsx
+++ b/airflow/www/static/js/grid/details/content/dagRun/index.tsx
@@ -29,17 +29,18 @@ import {
 import { MdPlayArrow, MdOutlineSchedule, MdOutlineAccountTree } from 'react-icons/md';
 import { RiArrowGoBackFill } from 'react-icons/ri';
 
-import { SimpleStatus } from '../../../components/StatusBox';
-import { ClipboardText } from '../../../components/Clipboard';
-import { formatDuration, getDuration } from '../../../../datetime_utils';
-import Time from '../../../components/Time';
+import { useGridData } from 'grid/api';
+import { appendSearchParams, getMetaValue } from 'app/utils';
+import type { DagRun as DagRunType } from 'grid/types';
+import { SimpleStatus } from 'grid/components/StatusBox';
+import { ClipboardText } from 'grid/components/Clipboard';
+import { formatDuration, getDuration } from 'app/datetime_utils';
+import Time from 'grid/components/Time';
+
 import MarkFailedRun from './MarkFailedRun';
 import MarkSuccessRun from './MarkSuccessRun';
 import QueueRun from './QueueRun';
 import ClearRun from './ClearRun';
-import { useGridData } from '../../../api';
-import { appendSearchParams, getMetaValue } from '../../../../utils';
-import type { DagRun as DagRunType } from '../../../types';
 
 const dagId = getMetaValue('dag_id');
 const graphUrl = getMetaValue('graph_url');
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/Details.tsx b/airflow/www/static/js/grid/details/content/taskInstance/Details.tsx
index bb3a86ddcd..f5a0a77ecb 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/Details.tsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/Details.tsx
@@ -24,12 +24,12 @@ import {
   Flex,
 } from '@chakra-ui/react';
 
-import { finalStatesMap } from '../../../../utils';
-import { getDuration, formatDuration } from '../../../../datetime_utils';
-import { SimpleStatus } from '../../../components/StatusBox';
-import Time from '../../../components/Time';
-import { ClipboardText } from '../../../components/Clipboard';
-import type { Task, TaskInstance, TaskState } from '../../../types';
+import { finalStatesMap } from 'app/utils';
+import { getDuration, formatDuration } from 'app/datetime_utils';
+import { SimpleStatus } from 'grid/components/StatusBox';
+import Time from 'grid/components/Time';
+import { ClipboardText } from 'grid/components/Clipboard';
+import type { Task, TaskInstance, TaskState } from 'grid/types';
 
 interface Props {
   instance: TaskInstance;
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/ExtraLinks.tsx b/airflow/www/static/js/grid/details/content/taskInstance/ExtraLinks.tsx
index d9d1269ee3..e2e0c1b122 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/ExtraLinks.tsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/ExtraLinks.tsx
@@ -25,8 +25,8 @@ import {
   Divider,
 } from '@chakra-ui/react';
 
-import { useExtraLinks } from '../../../api';
-import type { Task } from '../../../types';
+import { useExtraLinks } from 'grid/api';
+import type { Task } from 'grid/types';
 
 interface Props {
   dagId: string;
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/Logs/LogLink.tsx b/airflow/www/static/js/grid/details/content/taskInstance/Logs/LogLink.tsx
index 4533f50513..9beaeb639c 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/Logs/LogLink.tsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/Logs/LogLink.tsx
@@ -19,9 +19,9 @@
 
 import React from 'react';
 
-import { getMetaValue } from '../../../../../utils';
-import LinkButton from '../../../../components/LinkButton';
-import type { Dag, DagRun, TaskInstance } from '../../../../types';
+import { getMetaValue } from 'app/utils';
+import LinkButton from 'grid/components/LinkButton';
+import type { Dag, DagRun, TaskInstance } from 'grid/types';
 
 const logsWithMetadataUrl = getMetaValue('logs_with_metadata_url');
 const externalLogUrl = getMetaValue('external_log_url');
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/Logs/index.test.tsx b/airflow/www/static/js/grid/details/content/taskInstance/Logs/index.test.tsx
index e0a510ace4..ce9a3c3295 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/Logs/index.test.tsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/Logs/index.test.tsx
@@ -22,8 +22,10 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import type { UseQueryResult } from 'react-query';
+
+import * as useTaskLogModule from 'grid/api/useTaskLog';
+
 import Logs from './index';
-import * as useTaskLogModule from '../../../../api/useTaskLog';
 
 const mockTaskLog = `
 5d28cfda3219
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/Logs/index.tsx b/airflow/www/static/js/grid/details/content/taskInstance/Logs/index.tsx
index ea68ab7407..8944001b16 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/Logs/index.tsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/Logs/index.tsx
@@ -30,14 +30,15 @@ import {
   Checkbox,
 } from '@chakra-ui/react';
 
-import { getMetaValue } from '../../../../../utils';
+import { getMetaValue } from 'app/utils';
+import useTaskLog from 'grid/api/useTaskLog';
+import LinkButton from 'grid/components/LinkButton';
+import { useTimezone } from 'grid/context/timezone';
+import type { Dag, DagRun, TaskInstance } from 'grid/types';
+import MultiSelect from 'grid/components/MultiSelect';
+
 import LogLink from './LogLink';
-import useTaskLog from '../../../../api/useTaskLog';
-import LinkButton from '../../../../components/LinkButton';
 import { LogLevel, logLevelColorMapping, parseLogs } from './utils';
-import { useTimezone } from '../../../../context/timezone';
-import type { Dag, DagRun, TaskInstance } from '../../../../types';
-import MultiSelect from '../../../../components/MultiSelect';
 
 interface LogLevelOption {
   label: LogLevel;
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/Logs/utils.ts b/airflow/www/static/js/grid/details/content/taskInstance/Logs/utils.ts
index 0d37ce6c58..ed6acd6e99 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/Logs/utils.ts
+++ b/airflow/www/static/js/grid/details/content/taskInstance/Logs/utils.ts
@@ -19,7 +19,7 @@
 
 /* global moment */
 
-import { defaultFormatWithTZ } from '../../../../../datetime_utils';
+import { defaultFormatWithTZ } from 'app/datetime_utils';
 
 export enum LogLevel {
   DEBUG = 'DEBUG',
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/Nav.tsx b/airflow/www/static/js/grid/details/content/taskInstance/Nav.tsx
index 64973f7627..0f7e5a0ab8 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/Nav.tsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/Nav.tsx
@@ -23,9 +23,9 @@ import {
   Divider,
 } from '@chakra-ui/react';
 
-import { getMetaValue, appendSearchParams } from '../../../../utils';
-import LinkButton from '../../../components/LinkButton';
-import type { Task, DagRun } from '../../../types';
+import { getMetaValue, appendSearchParams } from 'app/utils';
+import LinkButton from 'grid/components/LinkButton';
+import type { Task, DagRun } from 'grid/types';
 
 const dagId = getMetaValue('dag_id') || '';
 const isK8sExecutor = getMetaValue('k8s_or_k8scelery_executor') === 'True';
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/index.tsx b/airflow/www/static/js/grid/details/content/taskInstance/index.tsx
index f99120e326..cfc34f7c5d 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/index.tsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/index.tsx
@@ -33,6 +33,10 @@ import {
   TabPanel,
 } from '@chakra-ui/react';
 
+import { useGridData, useTasks } from 'grid/api';
+import { getMetaValue } from 'app/utils';
+import type { Task, DagRun } from 'grid/types';
+
 import RunAction from './taskActions/Run';
 import ClearAction from './taskActions/Clear';
 import MarkFailedAction from './taskActions/MarkFailed';
@@ -41,11 +45,7 @@ import ExtraLinks from './ExtraLinks';
 import Logs from './Logs';
 import TaskNav from './Nav';
 import Details from './Details';
-
-import { useGridData, useTasks } from '../../../api';
 import MappedInstances from './MappedInstances';
-import { getMetaValue } from '../../../../utils';
-import type { Task, DagRun } from '../../../types';
 
 const detailsPanelActiveTabIndex = 'detailsPanelActiveTabIndex';
 
diff --git a/airflow/www/static/js/grid/details/index.tsx b/airflow/www/static/js/grid/details/index.tsx
index 4c80fd6559..b0ab5cd49b 100644
--- a/airflow/www/static/js/grid/details/index.tsx
+++ b/airflow/www/static/js/grid/details/index.tsx
@@ -24,11 +24,12 @@ import {
   Divider,
 } from '@chakra-ui/react';
 
+import useSelection from 'grid/utils/useSelection';
+
 import Header from './Header';
 import TaskInstanceContent from './content/taskInstance';
 import DagRunContent from './content/dagRun';
 import DagContent from './content/Dag';
-import useSelection from '../utils/useSelection';
 
 const Details = () => {
   const { selected: { runId, taskId } } = useSelection();
diff --git a/airflow/www/tsconfig.json b/airflow/www/tsconfig.json
index f264a9e3cc..b744f7cc5a 100644
--- a/airflow/www/tsconfig.json
+++ b/airflow/www/tsconfig.json
@@ -34,9 +34,14 @@
     "skipLibCheck": true,
     "jsx": "preserve",
     "types": ["node", "jest"],
+    "baseUrl": ".",
+    "paths": { // Be sure to update aliases in webpack.config.js and jest.config.js
+      "app/*": ["static/js/*"],
+      "grid/*": ["static/js/grid/*"],
+    },
   },
   "include": [
-    "static/js",
+    "static",
   ],
   "exclude": ["node_modules", "static/dist"]
 }
diff --git a/airflow/www/webpack.config.js b/airflow/www/webpack.config.js
index 1dedbbf474..c1e0fffb5b 100644
--- a/airflow/www/webpack.config.js
+++ b/airflow/www/webpack.config.js
@@ -88,6 +88,10 @@ const config = {
     publicPath: '',
   },
   resolve: {
+    alias: { // Be sure to update aliases in jest.config.js and tsconfig.json
+      app: path.resolve(__dirname, 'static/js'),
+      grid: path.resolve(__dirname, 'static/js/grid'),
+    },
     extensions: [
       '.js',
       '.jsx',