WV-2812: ESLint Cleanup: Line length (#6248)

* Removed '--quiet' from npm run lint:js so its 'loud' again

* web/.eslintrc: 'max-len' rule set to 'error'

* ESLint max-len corrections. Part 1

* ESLint max-len corrections. Part 2

Author: jwhurley1

package.json

@@ -60,7 +60,7 @@
     "linkcheck": "node ./tasks/link-check",
     "lint": "run-s lint:js lint:scss",
     "lint:scss": "npx stylelint ./web/scss/**/*.scss",
-    "lint:js": "npx eslint . --quiet",
+    "lint:js": "npx eslint .",
     "preinstall": "node tasks/util/checkNodeVersion.js",
     "postinstall": "patch-package && husky",
     "start": "node ./tasks/util/start.js",

web/.eslintrc

@@ -87,7 +87,7 @@
         // Base rule overrides
         "no-nested-ternary": "off",    // 164 errors across 40 files
         "no-shadow": "warn",           // 110 errors across 40 files
-        "max-len": "off",              // 315 errors across 109 files
+        "max-len": "error",              // 315 errors across 109 files
         "consistent-return": "off",    // 95 errors across 58 files
         "no-underscore-dangle": "off", // 40 errors across 7 files
         "no-param-reassign": [         // 198 errors across 46 files

web/js/app.js

@@ -71,7 +71,8 @@ class App extends React.Component {
       kioskModeEnabled, notifications, numberOutagesUnseen, e2eModeEnabled, hideNotificationsPopup,
     } = this.props;
     if (numberOutagesUnseen !== prevProps.numberOutagesUnseen) {
-      if (numberOutagesUnseen > 0 && !kioskModeEnabled && !e2eModeEnabled && !hideNotificationsPopup) {
+      if (numberOutagesUnseen > 0 && !kioskModeEnabled
+        && !e2eModeEnabled && !hideNotificationsPopup) {
         this.openNotification(notifications, numberOutagesUnseen);
       }
     }
@@ -165,7 +166,8 @@ class App extends React.Component {
         <MapInteractions />
         <AlertDropdown isTourActive={isTourActive} />
         <div>
-          {isTourActive && (numberOutagesUnseen === 0 || hideNotificationsPopup) && (!isMobile || isEmbedModeActive) ? <Tour /> : null}
+          {isTourActive && (numberOutagesUnseen === 0
+            || hideNotificationsPopup) && (!isMobile || isEmbedModeActive) ? <Tour /> : null}
         </div>
         <Sidebar />
         <div id="layer-modal" className="layer-modal" />

web/js/components/animation-widget/gif-button.js

@@ -74,7 +74,8 @@ function GifButton(props) {
     if (gifDisabled) {
       return;
     }
-    const nonDownloadableLayers = hasNonDownloadableLayer ? getNonDownloadableLayers(visibleLayersForProj) : null;
+    const nonDownloadableLayers = hasNonDownloadableLayer
+      ? getNonDownloadableLayers(visibleLayersForProj) : null;
     const paletteStore = lodashCloneDeep(activePalettes);
     await getPromise(hasCustomPalettes, 'palette', clearCustoms, 'Notice');
     await getPromise(isRotated, 'rotate', clearRotate, 'Reset rotation');
@@ -85,7 +86,8 @@ function GifButton(props) {
     });
 
     onCloseGif = () => {
-      refreshStateAfterGif(hasCustomPalettes ? paletteStore : undefined, rotation, nonDownloadableLayers);
+      refreshStateAfterGif(hasCustomPalettes
+        ? paletteStore : undefined, rotation, nonDownloadableLayers);
       toggleGif();
     };
     toggleGif();

web/js/components/animation-widget/play-queue.js

@@ -32,13 +32,13 @@ const getInitialBufferSize = (numberOfFrames, speed) => {
  *
  * The buffering logic is as follows:
  * - n = 10 + speed (frames per sec)
- * - Make at least n requests (assuming there are >= n frames) to determine the avg fetch time for a frame
+ * - Make at least n requests (assuming there are >= n frames) to determine
+ * the avg fetch time for a frame
  * - While making initial requests, if any return too quickly (e.g. they were cached), keep making
- *   requests until at least n "real" requests can be made to determine average fetch time
+ * requests until at least n "real" requests can be made to determine average fetch time
  * - Based on how long it took to load the first n, calculate how many additional frames
- *   need to be pre-loaded, based on avg fetch time and playback speed, in order for playback to begin
- *   without having to stop to buffer.
- *
+ * need to be pre-loaded, based on avg fetch time and playback speed,
+ * in order for playback to begin without having to stop to buffer.
  */
 class PlayQueue extends React.Component {
   constructor(props) {

web/js/components/charting/chart-component.js

@@ -234,7 +234,8 @@ function ChartComponent (props) {
   const yAxisValuesArr = getYAxisValues(data);
 
   /**
-   * Extracts each key from the provided object & returns the list, removing 'name' from the collection
+   * Extracts each key from the provided object &
+   * returns the list,removing 'name' from the collection
    * @param {Object} chartData
    */
   function getLineNames(obj) {
@@ -475,7 +476,10 @@ function ChartComponent (props) {
         </div>
         <div className="charting-disclaimer">
           <strong className="charting-disclaimer-pre">Note: </strong>
-          <span>Numerical analyses performed on imagery should only be used for initial basic exploratory purposes.</span>
+          <span>
+            Numerical analyses performed on imagery should only
+            be used for initial basic exploratory purposes.
+          </span>
           {isTruncated
           && (
             <div className="charting-disclaimer-upper">

web/js/components/charting/charting-date-selector.js

@@ -10,7 +10,10 @@ import {
 
 function ChartingDateSelector (props) {
   const {
-    onUpdateStartDate, onUpdateEndDate, timeSpanStartDate, timeSpanEndDate, timeSpanSelection, date, layerStartDate, layerEndDate,
+    onUpdateStartDate, onUpdateEndDate,
+    timeSpanStartDate, timeSpanEndDate,
+    timeSpanSelection, date,
+    layerStartDate, layerEndDate,
   } = props;
   const { selected, selectedB } = date;
   const startdate = timeSpanStartDate == null ? selected : timeSpanStartDate;

web/js/components/charting/charting-info.js

@@ -15,7 +15,7 @@ function ChartingInfo(props) {
       <div className="charting-info-text">
         <p className="charting-info">
           The charting feature is available for beta testing and evaluation.&nbsp;
-          <span class="charting-feedback" onClick={() => sendFeedback(feedbackIsInitiated, isMobile)}>Please send comments and feedback to us.</span>
+          <span className="charting-feedback" onClick={() => sendFeedback(feedbackIsInitiated, isMobile)}>Please send comments and feedback to us.</span>
         </p>
         <p className="charting-info">The Charting Tool provides the option to create a line chart for a date range showing change over time, and statistics for a single date (median, mean, minimum, maximum, and standard deviation) for an area of interest.</p>
 

web/js/components/charting/simple-statistics.js

@@ -77,7 +77,8 @@ function SimpleStatistics(props) {
         <strong>Note:</strong>
         <br />
         {' '}
-        Numerical analyses performed on imagery should only be used for initial basic exploratory purposes.
+        Numerical analyses performed on imagery should
+        only be used for initial basic exploratory purposes.
       </div>
     </>
   );

web/js/components/context-menu/context-menu.js

@@ -23,7 +23,8 @@ function RightClickMenu(props) {
   const [toolTipToggleTime, setToolTipToggleTime] = useState(0);
   const [formattedCoordinates, setFormattedCoordinates] = useState();
   const {
-    map, proj, unitOfMeasure, onToggleUnits, isCoordinateSearchActive, allMeasurements, measurementIsActive, isMobile,
+    map, proj, unitOfMeasure, onToggleUnits, isCoordinateSearchActive,
+    allMeasurements, measurementIsActive, isMobile,
   } = props;
   const { crs } = proj.selected;
   const measurementsInProj = !!(Object.keys(allMeasurements[crs]) || []).length;