chore: Enable eslint-plugin-import for frontend and tests

Author: apburnes

eslint.config.mjs

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import globals from 'globals';
 import pluginJs from '@eslint/js';
 import pluginReact from 'eslint-plugin-react';
@@ -50,10 +51,16 @@ export default [
   },
   {
     files: ['frontend/**/*.{js,jsx}'],
+    ...importPlugin.flatConfigs.recommended,
     settings: {
       react: {
         version: 'detect',
       },
+      'import/resolver': {
+        webpack: {
+          config: path.resolve('.', './webpack.config.js'),
+        },
+      },
     },
     languageOptions: {
       ...pluginReact.configs.flat.recommended.languageOptions,
@@ -73,7 +80,11 @@ export default [
   },
   {
     files: ['test/**/*.{js,jsx}', '**/*.test.{js,jsx}', '**/*.spec.{js,jsx}'],
+    ...importPlugin.flatConfigs.recommended,
     ...testingLibrary.configs['flat/react'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+    },
   },
   pluginReact.configs.flat['jsx-runtime'],
   pluginReact.configs.flat.recommended,
@@ -87,6 +98,11 @@ export default [
       react: {
         version: 'detect',
       },
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+      },
     },
     rules: {
       'no-await-in-loop': 'error',

frontend/pages/sites/$siteId/SideNav.jsx

@@ -20,6 +20,7 @@ const SideNav = ({ config, siteId }) => (
   >
     <ul className="usa-sidenav-list usa-list--unstyled">
       {config.map((conf) => {
+        // eslint-disable-next-line import/namespace
         const IconComponent = icons[conf.icon];
         return (
           <li className="margin-y-2" key={conf.route}>

frontend/pages/sites/$siteId/builds/Build.jsx

@@ -8,7 +8,6 @@ import buildActions from '@actions/buildActions';
 
 import GithubBuildBranchLink from '@shared/GithubBuildBranchLink';
 import GithubBuildShaLink from '@shared/GithubBuildShaLink';
-import { IconView } from '@shared/icons';
 import {
   IconCheckCircle,
   IconClock,
@@ -17,6 +16,7 @@ import {
   IconX,
   IconRebuild,
   IconReport,
+  IconView,
 } from '@shared/icons';
 
 import { SITE, BUILD } from '@propTypes';

frontend/pages/sites/$siteId/settings/BranchConfig.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import yaml from 'js-yaml';
+import { dump } from 'js-yaml';
 import ExpandableArea from '@shared/ExpandableArea';
 import LoadingIndicator from '@shared/LoadingIndicator';
 import notificationActions from '@actions/notificationActions';
@@ -9,7 +9,7 @@ import { capitalize } from '@util';
 function formatConfig(config) {
   if (!config) return '';
 
-  return yaml.dump(config);
+  return dump(config);
 }
 
 function BranchConfig({ id, branch, config, context, handleUpdate, isExpanded }) {

frontend/util/buildStatusNotifier.js

@@ -1,4 +1,4 @@
-import io from 'socket.io-client';
+import { io } from 'socket.io-client';
 
 import globals from '../globals';
 

frontend/util/validators.js

@@ -1,4 +1,4 @@
-import yaml from 'js-yaml';
+import { load } from 'js-yaml';
 import { hasOrgs } from '../selectors/organization';
 
 const validAddRepoSiteForm = ({ repoOrganizationId, repoUrl }, { organizations }) => {
@@ -30,7 +30,7 @@ const validBasicAuthPassword = (s) =>
 
 function isValidYaml(yamlString) {
   try {
-    yaml.load(yamlString);
+    load(yamlString);
   } catch (_) {
     // for Sequelize validators, we need to throw an error
     // on invalid values