CUMULUS-3661: Change Test Files to ESM Syntax

CHANGELOG.md

@@ -23,6 +23,14 @@ This version of the dashboard requires Cumulus API >= v18.2.0
  `@cumulus/[email protected]` to work with localstack v3.0.0
 - **Snyk Security Fix**
  - Upgraded axios from 1.6.0 to 1.6.8
+- **CUMULUS-3662**
+ - Upgrade node dependencies that were CommonJS(CJS) to ECMAScript Modules(ESM)
+- **CUMULUS-3659**
+ - Change configuration files to work with ECMAScript Modules(ESM)
+- **CUMULUS-3660**
+ - Change app files to ECMAScript Modules(ESM) syntax
+- **CUMULUS-3661**
+ - Change unit and integration test files to ECMAScript Modules(ESM) syntax
 
 ## [v12.1.0] - 2023-10-27
 

app/src/css/cssUtils.js

@@ -1,8 +1,12 @@
-const path = require('path');
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const resources = [
  'utils/utils.scss',
  'vendor/bootstrap/_vars.scss'
 ];
 
-module.exports = resources.map((file) => path.resolve(__dirname, file));
+export default resources.map((file) => path.resolve(__dirname, file));

app/src/index.js

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import './css/main.scss';
 import './public/favicon.ico';
 
-import App from './js/App';
+import App from './js/App.js';
 
 // Broken - needs resolution in CUMULUS-3379
 /* if (process.env.NODE_ENV !== 'production') {

app/src/js/App.js

@@ -3,27 +3,27 @@ import { Provider } from 'react-redux';
 import { Route, Redirect, Switch } from 'react-router-dom';
 import { ConnectedRouter } from 'connected-react-router';
 
-import ourConfigureStore, { history } from './store/configureStore';
+import ourConfigureStore, { history } from './store/configureStore.js';
 
 // Authorization & Error Handling
-// import ErrorBoundary from './components/Errors/ErrorBoundary';
-import NotFound from './components/404';
-import OAuth from './components/oauth';
+// import ErrorBoundary from './components/Errors/ErrorBoundary.js';
+import NotFound from './components/404.js';
+import OAuth from './components/oauth.js';
 
 // Components
-import Home from './components/home';
-import Main from './main';
-import Collections from './components/Collections';
-import Granules from './components/Granules';
-import Pdrs from './components/Pdr';
-import Providers from './components/Providers';
-import Workflows from './components/Workflows';
-import Executions from './components/Executions';
-import Operations from './components/Operations';
-import Rules from './components/Rules';
-import ReconciliationReports from './components/ReconciliationReports';
+import Home from './components/home.js';
+import Main from './main.js';
+import Collections from './components/Collections/index.js';
+import Granules from './components/Granules/index.js';
+import Pdrs from './components/Pdr/index.js';
+import Providers from './components/Providers/index.js';
+import Workflows from './components/Workflows/index.js';
+import Executions from './components/Executions/index.js';
+import Operations from './components/Operations/index.js';
+import Rules from './components/Rules/index.js';
+import ReconciliationReports from './components/ReconciliationReports/index.js';
 
-import config from './config';
+import config from './config/index.js';
 
 console.log('Environment', config.environment);
 

app/src/js/actions/helpers.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-cycle */
 import { get as getProperty } from 'object-path';
-import _config from '../config';
-import { filterQueryParams } from '../utils/url-helper';
+import _config from '../config/index.js';
+import { filterQueryParams } from '../utils/url-helper.js';
 
 export const formatError = (response = {}, body = {}) => {
  let error = response

app/src/js/actions/index.js

@@ -2,17 +2,17 @@
 import compareVersions from 'compare-versions';
 import { get as getProperty } from 'object-path';
 import axios from 'axios';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import cloneDeep from 'lodash/cloneDeep';
-
-import { configureRequest } from './helpers';
-import _config from '../config';
-import { getCollectionId, collectionNameVersion } from '../utils/format';
-import { fetchCurrentTimeFilters } from '../utils/datepicker';
-import log from '../utils/log';
-import * as types from './types';
-import { historyPushWithQueryParams } from '../utils/url-helper';
+import { get } from 'lodash/get.js';
+import { isEmpty } from 'lodash/isEmpty.js';
+import { cloneDeep } from 'lodash/cloneDeep.js';
+
+import { configureRequest } from './helpers.js';
+import _config from '../config/index.js';
+import { getCollectionId, collectionNameVersion } from '../utils/format.js';
+import { fetchCurrentTimeFilters } from '../utils/datepicker.js';
+import log from '../utils/log.js';
+import * as types from './types.js';
+import { historyPushWithQueryParams } from '../utils/url-helper.js';
 
 const { CALL_API } = types;
 const {
@@ -426,7 +426,7 @@ export const toggleGranulesTableColumns = (hiddenColumns, allColumns) => ({
  allColumns
 });
 
-export const getOptionsCollectionName = (options) => ({
+export const getOptionsCollectionName = () => ({
  [CALL_API]: {
  type: types.OPTIONS_COLLECTIONNAME,
  method: 'GET',

app/src/js/actions/types.js

@@ -166,7 +166,7 @@ export const CLEAR_EXECUTIONS_SEARCH = 'CLEAR_EXECUTIONS_SEARCH';
 export const SEARCH_EXECUTION_EVENTS = 'SEARCH_EXECUTION_EVENTS';
 export const CLEAR_EXECUTION_EVENTS_SEARCH = 'CLEAR_EXECUTION_EVENTS_SEARCH';
 export const EXECUTIONS_LIST = 'EXECUTIONS_LIST';
-export const EXECUTIONS_LIST_INFLIGHT = 'EXECUTIONS_INFLIGHT';
+export const EXECUTIONS_LIST_INFLIGHT = 'EXECUTIONS_LIST_INFLIGHT';
 export const EXECUTIONS_LIST_ERROR = 'EXECUTIONS_LIST_ERROR';
 
 // Granules executions workflows

app/src/js/components/Add/add.js

@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { get } from 'object-path';
-import { getSchema } from '../../actions';
-import Schema from '../FormSchema/schema';
-import Loading from '../LoadingIndicator/loading-indicator';
-import _config from '../../config';
-import { strings } from '../locale';
-import { window } from '../../utils/browser';
-import { historyPushWithQueryParams } from '../../utils/url-helper';
+import { getSchema } from '../../actions/index.js';
+import Schema from '../FormSchema/schema.js';
+import Loading from '../LoadingIndicator/loading-indicator.js';
+import _config from '../../config/index.js';
+import { strings } from '../locale.js';
+import { window } from '../../utils/browser.js';
+import { historyPushWithQueryParams } from '../../utils/url-helper.js';
 
 const { updateDelay } = _config;
 

app/src/js/components/AddRaw/add-raw.js

@@ -3,12 +3,12 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { get } from 'object-path';
-import { displayCase } from '../../utils/format';
-import _config from '../../config';
+import { displayCase } from '../../utils/format.js';
+import _config from '../../config/index.js';
 
-import TextArea from '../TextAreaForm/text-area';
-import DefaultModal from '../Modal/modal';
-import { historyPushWithQueryParams } from '../../utils/url-helper';
+import TextArea from '../TextAreaForm/text-area.js';
+import DefaultModal from '../Modal/modal.js';
+import { historyPushWithQueryParams } from '../../utils/url-helper.js';
 
 const { updateDelay } = _config;
 

app/src/js/components/AsyncCommands/AsyncCommands.js

@@ -9,9 +9,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { Alert } from 'react-bootstrap';
 import { CircularProgressbarWithChildren } from 'react-circular-progressbar';
-import { preventDefault } from '../../utils/noop';
-import DefaultModal from '../Modal/modal';
-import Ellipsis from '../LoadingEllipsis/loading-ellipsis';
+import { preventDefault } from '../../utils/noop.js';
+import DefaultModal from '../Modal/modal.js';
+import Ellipsis from '../LoadingEllipsis/loading-ellipsis.js';
 
 const AsyncCommand = ({
  action,

app/src/js/components/BatchAsyncCommands/BatchAsyncCommands.js

@@ -10,9 +10,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { Alert } from 'react-bootstrap';
 import isArray from 'lodash/isArray';
-import AsyncCommand from '../AsyncCommands/AsyncCommands';
-import DefaultModal from '../Modal/modal';
-import ErrorReport from '../Errors/report';
+import AsyncCommand from '../AsyncCommands/AsyncCommands.js';
+import DefaultModal from '../Modal/modal.js';
+import ErrorReport from '../Errors/report.js';
 
 const CONCURRENCY = 3;
 

app/src/js/components/Breadcrumbs/Breadcrumbs.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Breadcrumb } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { getPersistentQueryParams } from '../../utils/url-helper';
+import { getPersistentQueryParams } from '../../utils/url-helper.js';
 
 const Breadcrumbs = ({ config, locationQueryParams }) => (
  <Breadcrumb>

app/src/js/components/Collections/add.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import { createCollection, getSchema } from '../../actions';
-import { getCollectionId, collectionHrefFromId } from '../../utils/format';
-import { removeReadOnly } from '../FormSchema/schema';
-import AddRaw from '../AddRaw/add-raw';
+import { createCollection, getSchema } from '../../actions/index.js';
+import { getCollectionId, collectionHrefFromId } from '../../utils/format.js';
+import { removeReadOnly } from '../FormSchema/schema.js';
+import AddRaw from '../AddRaw/add-raw.js';
 
 const AddCollection = ({ location = {}, collections, dispatch, schema }) => {
  const [defaultValue, setDefaultValue] = useState({});

app/src/js/components/Collections/collection-header.js

@@ -6,10 +6,10 @@ import {
  getCollectionId,
  lastUpdated,
  collectionHrefFromNameVersion,
-} from '../../utils/format';
-import { getPersistentQueryParams } from '../../utils/url-helper';
-import { strings } from '../locale';
-import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
+} from '../../utils/format.js';
+import { getPersistentQueryParams } from '../../utils/url-helper.js';
+import { strings } from '../locale.js';
+import Breadcrumbs from '../Breadcrumbs/Breadcrumbs.js';
 
 const CollectionHeader = ({
  breadcrumbConfig,

app/src/js/components/Collections/edit.js

@@ -7,9 +7,9 @@ import {
  getCollection,
  updateCollection,
  clearUpdateCollection,
-} from '../../actions';
-import { getCollectionId, collectionHrefFromNameVersion } from '../../utils/format';
-import EditRaw from '../EditRaw/edit-raw';
+} from '../../actions/index.js';
+import { getCollectionId, collectionHrefFromNameVersion } from '../../utils/format.js';
+import EditRaw from '../EditRaw/edit-raw.js';
 
 const SCHEMA_KEY = 'collection';
 

app/src/js/components/Collections/granules.js

@@ -8,7 +8,7 @@ import {
  getCollectionId,
  displayCase,
  collectionHrefFromNameVersion,
-} from '../../utils/format';
+} from '../../utils/format.js';
 import {
  listGranules,
  filterGranules,
@@ -18,21 +18,21 @@ import {
  clearGranulesSearch,
  listWorkflows,
  getOptionsProviderName,
-} from '../../actions';
+} from '../../actions/index.js';
 import {
  bulkActions,
  defaultWorkflowMeta,
  executeDialog,
  groupAction,
  tableColumns,
-} from '../../utils/table-config/granules';
-import List from '../Table/Table';
-import Dropdown from '../DropDown/dropdown';
-import Search from '../Search/search';
-import { granuleStatus as statusOptions } from '../../utils/status';
-import { workflowOptionNames } from '../../selectors';
-import ListFilters from '../ListActions/ListFilters';
-import CollectionHeader from './collection-header';
+} from '../../utils/table-config/granules.js';
+import List from '../Table/Table.js';
+import Dropdown from '../DropDown/dropdown.js';
+import Search from '../Search/search.js';
+import { granuleStatus as statusOptions } from '../../utils/status.js';
+import { workflowOptionNames } from '../../selectors/index.js';
+import ListFilters from '../ListActions/ListFilters.js';
+import CollectionHeader from './collection-header.js';
 
 const CollectionGranules = ({
  dispatch,