CUMULUS-3660: Change in App Files to ESM Syntax

CHANGELOG.md

@@ -23,6 +23,12 @@ 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
 
 ## [v12.1.0] - 2023-10-27
 

app/src/css/cssUtils.js

@@ -1,8 +1,8 @@
-const path = require('path');
+import path from 'path';
 
-const resources = [
+export default resources = [
   'utils/utils.scss',
   'vendor/bootstrap/_vars.scss'
 ];
 
-module.exports = resources.map((file) => path.resolve(__dirname, file));
+return 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,16 +3,16 @@ 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 Home from './components/home.js';
+import Main from './main.js';
 import Collections from './components/Collections';
 import Granules from './components/Granules';
 import Pdrs from './components/Pdr';

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 { 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 get from 'lodash/get.js';
+import isEmpty from 'lodash/isEmpty.js';
+import cloneDeep from 'lodash/cloneDeep.js';
 
-import { configureRequest } from './helpers';
+import { configureRequest } from './helpers.js';
 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 { 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 {

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

@@ -5,12 +5,12 @@ 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 Schema from '../FormSchema/schema.js';
+import Loading from '../LoadingIndicator/loading-indicator.js';
 import _config from '../../config';
-import { strings } from '../locale';
-import { window } from '../../utils/browser';
-import { historyPushWithQueryParams } from '../../utils/url-helper';
+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 { displayCase } from '../../utils/format.js';
 import _config from '../../config';
 
-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

@@ -4,9 +4,9 @@ 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 { 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

@@ -8,8 +8,8 @@ import {
   updateCollection,
   clearUpdateCollection,
 } from '../../actions';
-import { getCollectionId, collectionHrefFromNameVersion } from '../../utils/format';
-import EditRaw from '../EditRaw/edit-raw';
+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,
@@ -25,14 +25,14 @@ import {
   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';
+} 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';
-import ListFilters from '../ListActions/ListFilters';
-import CollectionHeader from './collection-header';
+import ListFilters from '../ListActions/ListFilters.js';
+import CollectionHeader from './collection-header.js';
 
 const CollectionGranules = ({
   dispatch,

app/src/js/components/Collections/index.js

@@ -4,18 +4,18 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { withRouter, Redirect, Route, Switch } from 'react-router-dom';
 import withQueryParams from 'react-router-query-params';
-import Sidebar from '../Sidebar/sidebar';
-import { strings } from '../locale';
-import CollectionList from './list';
-import AddCollection from './add';
-import EditCollection from './edit';
-import CollectionOverview from './overview';
-import CollectionGranules from './granules';
-import CollectionIngest from './ingest';
-import CollectionLogs from './logs';
-import DatePickerHeader from '../DatePickerHeader/DatePickerHeader';
+import Sidebar from '../Sidebar/sidebar.js';
+import { strings } from '../locale.js';
+import CollectionList from './list.js';
+import AddCollection from './add.js';
+import EditCollection from './edit.js';
+import CollectionOverview from './overview.js';
+import CollectionGranules from './granules.js';
+import CollectionIngest from './ingest.js';
+import CollectionLogs from './logs.js';
+import DatePickerHeader from '../DatePickerHeader/DatePickerHeader.js';
 import { listCollections } from '../../actions';
-import { filterQueryParams } from '../../utils/url-helper';
+import { filterQueryParams } from '../../utils/url-helper.js';
 
 const Collections = ({ dispatch, location, logs, queryParams }) => {
   const { pathname } = location;

app/src/js/components/Collections/ingest.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { get } from 'object-path';
 import { getCollection } from '../../actions';
-import { getCollectionId, nullValue } from '../../utils/format';
+import { getCollectionId, nullValue } from '../../utils/format.js';
 import config from '../../config';
-import Loading from '../LoadingIndicator/loading-indicator';
-import CollectionHeader from './collection-header';
+import Loading from '../LoadingIndicator/loading-indicator.js';
+import CollectionHeader from './collection-header.js';
 
 const breadcrumbConfig = [
   {

app/src/js/components/Collections/list.js

@@ -15,18 +15,18 @@ import {
   filterCollections,
   clearCollectionsFilter,
 } from '../../actions';
-import { lastUpdated, tally, getCollectionId } from '../../utils/format';
+import { lastUpdated, tally, getCollectionId } from '../../utils/format.js';
 import {
   bulkActions,
   recoverAction,
   tableColumns,
-} from '../../utils/table-config/collections';
-import Dropdown from '../DropDown/dropdown';
-import Search from '../Search/search';
-import List from '../Table/Table';
-import { strings } from '../locale';
-import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
-import ListFilters from '../ListActions/ListFilters';
+} from '../../utils/table-config/collections.js';
+import Dropdown from '../DropDown/dropdown.js';
+import Search from '../Search/search.js';
+import List from '../Table/Table.js';
+import { strings } from '../locale.js';
+import Breadcrumbs from '../Breadcrumbs/Breadcrumbs.js';
+import ListFilters from '../ListActions/ListFilters.js';
 
 const breadcrumbConfig = [
   {