OU-1389: Update Import Linting

web/eslint.config.ts

@@ -97,6 +97,37 @@ export default defineConfig([
       'no-console': 'off',
     },
   },
+  {
+    files: ['src/**/*.ts', 'src/**/*.tsx'],
+    plugins: {
+      import: fixupPluginRules(importPlugin as any),
+    },
+    settings: {
+      'import/resolver': {
+        node: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+      },
+    },
+    rules: {
+      'import/order': [
+        'error',
+        {
+          groups: [['builtin', 'external'], 'internal', ['parent', 'sibling', 'index']],
+          pathGroups: [
+            {
+              pattern: '@shared/**',
+              group: 'internal',
+            },
+          ],
+          pathGroupsExcludedImportTypes: [],
+          'newlines-between': 'always',
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+        },
+      ],
+    },
+  },
   {
     files: ['src/features/**/*.ts', 'src/features/**/*.tsx'],
     plugins: {
@@ -109,6 +140,18 @@ export default defineConfig([
     },
     rules: {
       'import/no-restricted-paths': ['error', { zones: importBoundaryZones }],
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              regex: '^(\\.\\./)+shared/',
+              message:
+                'Use the @shared alias instead of relative imports to src/shared/ (e.g. `@shared/hooks/useAlerts`).',
+            },
+          ],
+        },
+      ],
     },
   },
 ]);

web/jest.config.js

@@ -16,4 +16,7 @@ module.exports = {
     ],
   },
   transformIgnorePatterns: ['node_modules/(?!(@openshift-console|@patternfly|lodash-es)/)'],
+  moduleNameMapper: {
+    '^@shared/(.*)$': '<rootDir>/src/shared/$1',
+  },
 };

web/src/features/alerts/components/AlertUtils.tsx

@@ -48,15 +48,13 @@ import type { FC, ReactNode } from 'react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
-import { NamespaceModel } from '../../../shared/console/models';
-import { getQueryBrowserUrl, usePerspective } from '../../../shared/hooks/usePerspective';
-import { useMonitoringNamespace } from '../../../shared/hooks/useMonitoringNamespace';
-import {
-  FormatSeriesTitle,
-  QueryBrowser,
-} from '../../../shared/components/query-browser/query-browser';
-import { AlertSource } from '../../../shared/types/types';
-import { SeverityBadge } from '../../../shared/components/SeverityBadge';
+
+import { FormatSeriesTitle, QueryBrowser } from '@shared/components/query-browser/query-browser';
+import { SeverityBadge } from '@shared/components/SeverityBadge';
+import { NamespaceModel } from '@shared/console/models';
+import { useMonitoringNamespace } from '@shared/hooks/useMonitoringNamespace';
+import { getQueryBrowserUrl, usePerspective } from '@shared/hooks/usePerspective';
+import { AlertSource } from '@shared/types/types';
 
 export const getAdditionalSources = <T extends Alert | Rule>(
   data: Array<T>,

web/src/features/alerts/components/SilenceForm.tsx

@@ -37,19 +37,20 @@ import { useState, useEffect, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router';
-import withFallback from '../../../shared/console/console-shared/error/fallbacks/withFallback';
+
+import withFallback from '@shared/console/console-shared/error/fallbacks/withFallback';
 import {
   formatPrometheusDuration,
   parsePrometheusDuration,
-} from '../../../shared/console/console-shared/src/datetime/prometheus';
-import { ExternalLink } from '../../../shared/console/utils/link';
-import { useBoolean } from '../../../shared/hooks/useBoolean';
-import { getSilenceAlertUrl, usePerspective } from '../../../shared/hooks/usePerspective';
-import { useMonitoringNamespace } from '../../../shared/hooks/useMonitoringNamespace';
-import { DataTestIDs } from '../../../shared/constants/data-test';
-import { ALL_NAMESPACES_KEY, getAlertmanagerSilencesUrl } from '../../../shared/utils/utils';
-import { useAlerts } from '../../../shared/hooks/useAlerts';
-import { useMonitoring } from '../../../shared/hooks/useMonitoring';
+} from '@shared/console/console-shared/src/datetime/prometheus';
+import { ExternalLink } from '@shared/console/utils/link';
+import { DataTestIDs } from '@shared/constants/data-test';
+import { useAlerts } from '@shared/hooks/useAlerts';
+import { useBoolean } from '@shared/hooks/useBoolean';
+import { useMonitoring } from '@shared/hooks/useMonitoring';
+import { useMonitoringNamespace } from '@shared/hooks/useMonitoringNamespace';
+import { getSilenceAlertUrl, usePerspective } from '@shared/hooks/usePerspective';
+import { ALL_NAMESPACES_KEY, getAlertmanagerSilencesUrl } from '@shared/utils/utils';
 
 const durationOff = '-';
 

web/src/features/alerts/components/SilencedByTable.tsx

@@ -1,26 +1,28 @@
+import { ResourceIcon, Silence, SilenceStates } from '@openshift-console/dynamic-plugin-sdk';
+import { Flex, FlexItem, Stack, StackItem } from '@patternfly/react-core';
+import {
+  DataViewTable,
+  DataViewTr,
+  DataViewTh,
+} from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { ActionsColumn, IAction } from '@patternfly/react-table';
+import { t_global_spacer_xs } from '@patternfly/react-tokens';
 import type { FC, MouseEvent } from 'react';
 import { useState, useMemo } from 'react';
-import { ResourceIcon, Silence, SilenceStates } from '@openshift-console/dynamic-plugin-sdk';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, Link } from 'react-router';
+
+import { useBoolean } from '@shared/hooks/useBoolean';
+import { useMonitoringNamespace } from '@shared/hooks/useMonitoringNamespace';
 import {
   getEditSilenceAlertUrl,
   getSilenceAlertUrl,
   usePerspective,
-} from '../../../shared/hooks/usePerspective';
-import { useMonitoringNamespace } from '../../../shared/hooks/useMonitoringNamespace';
-import {
-  DataViewTable,
-  DataViewTr,
-  DataViewTh,
-} from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
-import { Flex, FlexItem, Stack, StackItem } from '@patternfly/react-core';
-import { ActionsColumn, IAction } from '@patternfly/react-table';
-import { ExpireSilenceModal, SilenceMatchersList, SilenceState } from '../components/SilencesUtils';
-import { useBoolean } from '../../../shared/hooks/useBoolean';
-import { SilenceResource } from '../../../shared/utils/utils';
+} from '@shared/hooks/usePerspective';
+import { SilenceResource } from '@shared/utils/utils';
+
 import { SeverityCounts, StateTimestamp } from '../components/AlertUtils';
-import { t_global_spacer_xs } from '@patternfly/react-tokens';
+import { ExpireSilenceModal, SilenceMatchersList, SilenceState } from '../components/SilencesUtils';
 
 export const SilencedByList: FC<{ silences: Silence[] }> = ({ silences }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);

web/src/features/alerts/components/SilencesUtils.tsx

@@ -34,15 +34,16 @@ import type { FC, Ref } from 'react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
-import { useBoolean } from '../../../shared/hooks/useBoolean';
+
+import { DataTestIDs } from '@shared/constants/data-test';
+import { useBoolean } from '@shared/hooks/useBoolean';
+import { useMonitoringNamespace } from '@shared/hooks/useMonitoringNamespace';
 import {
   getEditSilenceAlertUrl,
   getFetchSilenceUrl,
   usePerspective,
-} from '../../../shared/hooks/usePerspective';
-import { useMonitoringNamespace } from '../../../shared/hooks/useMonitoringNamespace';
-import { silenceMatcherEqualitySymbol, silenceState } from '../../../shared/utils/utils';
-import { DataTestIDs } from '../../../shared/constants/data-test';
+} from '@shared/hooks/usePerspective';
+import { silenceMatcherEqualitySymbol, silenceState } from '@shared/utils/utils';
 
 export const SilenceMatchersList = ({ silence }: { silence: Silence }) => (
   <LabelGroup numLabels={20}>

web/src/features/alerts/pages/AlertRulesDetailsPage.tsx

@@ -40,6 +40,28 @@ import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useNavigate, useParams } from 'react-router';
+
+import KebabDropdown from '@shared/components/KebabDropdown';
+import { Labels } from '@shared/components/labels';
+import { SeverityBadge } from '@shared/components/SeverityBadge';
+import { ToggleGraph } from '@shared/components/ToggleGraph';
+import withFallback from '@shared/console/console-shared/error/fallbacks/withFallback';
+import { StatusBox } from '@shared/console/console-shared/src/components/status/StatusBox';
+import { formatPrometheusDuration } from '@shared/console/console-shared/src/datetime/prometheus';
+import { ExternalLink } from '@shared/console/utils/link';
+import { DataTestIDs } from '@shared/constants/data-test';
+import { MonitoringProvider } from '@shared/contexts/MonitoringContext';
+import { useAlerts } from '@shared/hooks/useAlerts';
+import { useMonitoringNamespace } from '@shared/hooks/useMonitoringNamespace';
+import {
+  getAlertRulesUrl,
+  getAlertUrl,
+  getNewSilenceAlertUrl,
+  getQueryBrowserUrl,
+  usePerspective,
+} from '@shared/hooks/usePerspective';
+import { alertDescription, RuleResource } from '@shared/utils/utils';
+
 import {
   alertingRuleSource,
   AlertState,
@@ -48,27 +70,6 @@ import {
   SeverityHelp,
   SourceHelp,
 } from '../components/AlertUtils';
-import withFallback from '../../../shared/console/console-shared/error/fallbacks/withFallback';
-import { StatusBox } from '../../../shared/console/console-shared/src/components/status/StatusBox';
-import { formatPrometheusDuration } from '../../../shared/console/console-shared/src/datetime/prometheus';
-import { ExternalLink } from '../../../shared/console/utils/link';
-import {
-  getAlertRulesUrl,
-  getAlertUrl,
-  getNewSilenceAlertUrl,
-  getQueryBrowserUrl,
-  usePerspective,
-} from '../../../shared/hooks/usePerspective';
-import { useMonitoringNamespace } from '../../../shared/hooks/useMonitoringNamespace';
-import KebabDropdown from '../../../shared/components/KebabDropdown';
-import { Labels } from '../../../shared/components/labels';
-import { alertDescription, RuleResource } from '../../../shared/utils/utils';
-import { MonitoringProvider } from '../../../shared/contexts/MonitoringContext';
-
-import { DataTestIDs } from '../../../shared/constants/data-test';
-import { useAlerts } from '../../../shared/hooks/useAlerts';
-import { SeverityBadge } from '../../../shared/components/SeverityBadge';
-import { ToggleGraph } from '../../../shared/components/ToggleGraph';
 
 // Renders Prometheus template text and highlights any {{ ... }} tags that it contains
 const PrometheusTemplate = ({ text }: { text: string }) => (

web/src/features/alerts/pages/AlertingPage.tsx

@@ -1,20 +1,21 @@
 /* eslint-disable import/no-restricted-paths */
-import type { FC } from 'react';
-import { lazy, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 import {
   HorizontalNav,
   ListPageHeader,
   NamespaceBar,
   useActivePerspective,
 } from '@openshift-console/dynamic-plugin-sdk';
-import { MonitoringProvider } from '../../../shared/contexts/MonitoringContext';
-import { useMonitoring } from '../../../shared/hooks/useMonitoring';
-import { useLocation } from 'react-router';
-import { AlertResource, SilenceResource } from '../../../shared/utils/utils';
+import type { FC } from 'react';
+import { lazy, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
-import { alertingClearSelectorData } from '../../../shared/store/actions';
-import { useMonitoringNamespace } from '../../../shared/hooks/useMonitoringNamespace';
+import { useLocation } from 'react-router';
+
+import { MonitoringProvider } from '@shared/contexts/MonitoringContext';
+import { useMonitoring } from '@shared/hooks/useMonitoring';
+import { useMonitoringNamespace } from '@shared/hooks/useMonitoringNamespace';
+import { alertingClearSelectorData } from '@shared/store/actions';
+import { AlertResource, SilenceResource } from '@shared/utils/utils';
 
 const CmoAlertsPage = lazy(() =>
   import(/* webpackChunkName: "CmoAlertsPage" */ './alerts-page/AlertsPage').then((module) => ({

web/src/features/alerts/pages/AlertsDetailsPage.tsx

@@ -11,24 +11,6 @@ import {
   Rule,
   useResolvedExtensions,
 } from '@openshift-console/dynamic-plugin-sdk';
-import * as _ from 'lodash-es';
-import type { FC, ReactNode } from 'react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
-import { Link, useNavigate, useParams, useSearchParams } from 'react-router';
-import { ExternalLink, LinkifyExternal } from '../../../shared/console/utils/link';
-import {
-  getAlertsUrl,
-  getObserveState,
-  getNewSilenceAlertUrl,
-  getRuleUrl,
-  usePerspective,
-} from '../../../shared/hooks/usePerspective';
-import { useMonitoringNamespace } from '../../../shared/hooks/useMonitoringNamespace';
-import { AlertResource, alertState, RuleResource } from '../../../shared/utils/utils';
-import { MonitoringProvider } from '../../../shared/contexts/MonitoringContext';
-
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -56,9 +38,18 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { MonitoringState } from '../../../shared/store/store';
-import withFallback from '../../../shared/console/console-shared/error/fallbacks/withFallback';
-import { StatusBox } from '../../../shared/console/console-shared/src/components/status/StatusBox';
+import * as _ from 'lodash-es';
+import type { FC, ReactNode } from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { Link, useNavigate, useParams, useSearchParams } from 'react-router';
+
+import { Labels } from '@shared/components/labels';
+import { SeverityBadge } from '@shared/components/SeverityBadge';
+import { ToggleGraph } from '@shared/components/ToggleGraph';
+import withFallback from '@shared/console/console-shared/error/fallbacks/withFallback';
+import { StatusBox } from '@shared/console/console-shared/src/components/status/StatusBox';
 import {
   ContainerModel,
   DaemonSetModel,
@@ -68,10 +59,23 @@ import {
   NodeModel,
   PodModel,
   StatefulSetModel,
-} from '../../../shared/console/models';
-import { Labels } from '../../../shared/components/labels';
-import { ToggleGraph } from '../../../shared/components/ToggleGraph';
-import { SilencedByList } from '../components/SilencedByTable';
+} from '@shared/console/models';
+import { ExternalLink, LinkifyExternal } from '@shared/console/utils/link';
+import { DataTestIDs } from '@shared/constants/data-test';
+import { MonitoringProvider } from '@shared/contexts/MonitoringContext';
+import { useAlerts } from '@shared/hooks/useAlerts';
+import { useMonitoring } from '@shared/hooks/useMonitoring';
+import { useMonitoringNamespace } from '@shared/hooks/useMonitoringNamespace';
+import {
+  getAlertsUrl,
+  getObserveState,
+  getNewSilenceAlertUrl,
+  getRuleUrl,
+  usePerspective,
+} from '@shared/hooks/usePerspective';
+import { MonitoringState } from '@shared/store/store';
+import { AlertResource, alertState, RuleResource } from '@shared/utils/utils';
+
 import {
   alertSource,
   AlertState,
@@ -84,11 +88,7 @@ import {
   SeverityHelp,
   SourceHelp,
 } from '../components/AlertUtils';
-
-import { DataTestIDs } from '../../../shared/constants/data-test';
-import { useAlerts } from '../../../shared/hooks/useAlerts';
-import { useMonitoring } from '../../../shared/hooks/useMonitoring';
-import { SeverityBadge } from '../../../shared/components/SeverityBadge';
+import { SilencedByList } from '../components/SilencedByTable';
 
 const AlertsDetailsPage_: FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);

web/src/features/alerts/pages/SilenceCreatePage.tsx

@@ -1,12 +1,14 @@
 import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
-import { SilenceForm } from '../components/SilenceForm';
-import { MonitoringProvider } from '../../../shared/contexts/MonitoringContext';
-import { useMonitoring } from '../../../shared/hooks/useMonitoring';
-import { LoadingBox } from '../../../shared/console/console-shared/src/components/loading/LoadingBox';
-import { useMonitoringNamespace } from '../../../shared/hooks/useMonitoringNamespace';
 import { useSearchParams } from 'react-router';
 
+import { LoadingBox } from '@shared/console/console-shared/src/components/loading/LoadingBox';
+import { MonitoringProvider } from '@shared/contexts/MonitoringContext';
+import { useMonitoring } from '@shared/hooks/useMonitoring';
+import { useMonitoringNamespace } from '@shared/hooks/useMonitoringNamespace';
+
+import { SilenceForm } from '../components/SilenceForm';
+
 const CreateSilencePage = () => {
   const { accessCheckLoading, useAlertsTenancy } = useMonitoring();
   const { t } = useTranslation(process.env.I18N_NAMESPACE);

web/src/features/alerts/pages/SilenceEditPage.tsx

@@ -3,12 +3,14 @@ import { Alert } from '@patternfly/react-core';
 import * as _ from 'lodash-es';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
-import { StatusBox } from '../../../shared/console/console-shared/src/components/status/StatusBox';
-import { SilenceResource, silenceState } from '../../../shared/utils/utils';
+
+import { StatusBox } from '@shared/console/console-shared/src/components/status/StatusBox';
+import { MonitoringProvider } from '@shared/contexts/MonitoringContext';
+import { useAlerts } from '@shared/hooks/useAlerts';
+import { useMonitoring } from '@shared/hooks/useMonitoring';
+import { SilenceResource, silenceState } from '@shared/utils/utils';
+
 import { SilenceForm } from '../components/SilenceForm';
-import { MonitoringProvider } from '../../../shared/contexts/MonitoringContext';
-import { useAlerts } from '../../../shared/hooks/useAlerts';
-import { useMonitoring } from '../../../shared/hooks/useMonitoring';
 
 const pad = (i: number): string => (i < 10 ? `0${i}` : String(i));