Merge pull request #112 from YotaYota/fix-diff-highlight

highlight fix and lint
SUNET · Jun 13, 2024 · 3403050 · 3403050
2 parents 82b98f6 + 1912fc2
commit 3403050
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,6 @@
     "jest-environment-jsdom": "^29.7.0",
     "parcel-bundler": "^1.8.1",
     "prettier": "3.2.5",
-    "prismjs": "^1.29.0",
     "react-router-dom": "^5.3.4",
     "react-test-renderer": "^18.2.0"
   },
@@ -49,6 +48,7 @@
     "jsonwebtoken": "^9.0.1",
     "jwt-decode": "^4.0.0",
     "package.json": "^2.0.1",
+    "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
     "query-string": "^6.14.1",
     "react": "^18.2.0",

diff --git a/public/components/ConfigChange/ConfigChange.js b/public/components/ConfigChange/ConfigChange.js
@@ -1,17 +1,16 @@
+import queryString from "query-string";
 import React from "react";
 import { Prompt } from "react-router";
 import { Link } from "react-router-dom";
-import queryString from "query-string";
-import Prism from "prismjs";
 import { SemanticToastContainer, toast } from "react-semantic-toasts-2";
+import "../../styles/react-semantic-alert.css";
+import checkResponseStatus from "../../utils/checkResponseStatus";
+import { getData } from "../../utils/getData";
 import ConfigChangeStep1 from "./ConfigChangeStep1";
-import DryRun from "./DryRun/DryRun";
-import VerifyDiff from "./VerifyDiff/VerifyDiff";
 import ConfigChangeStep4 from "./ConfigChangeStep4";
-import checkResponseStatus from "../../utils/checkResponseStatus";
+import DryRun from "./DryRun/DryRun";
 import SyncStatus from "./SyncStatus";
-import { getData } from "../../utils/getData";
-import "../../styles/react-semantic-alert.css";
+import VerifyDiff from "./VerifyDiff/VerifyDiff";
 
 const io = require("socket.io-client");
 
@@ -132,32 +131,30 @@ class ConfigChange extends React.Component {
       .then((response) => response.json())
       .then((data) => {
         console.log("this should be data", data);
-        {
-          if (dataToSend.dry_run === true) {
-            this.setState(
-              {
-                dryRunSyncData: data,
-              },
-              () => {
-                this.pollJobStatus(data.job_id, "dry_run");
-              },
-              () => {
-                console.log("this is new state", this.state.dryRunSyncData);
-              },
-            );
-          } else {
-            this.setState(
-              {
-                liveRunSyncData: data,
-              },
-              () => {
-                this.pollJobStatus(data.job_id, "live_run");
-              },
-              () => {
-                console.log("this is new state", this.state.liveRunSyncData);
-              },
-            );
-          }
+        if (dataToSend.dry_run === true) {
+          this.setState(
+            {
+              dryRunSyncData: data,
+            },
+            () => {
+              this.pollJobStatus(data.job_id, "dry_run");
+            },
+            () => {
+              console.log("this is new state", this.state.dryRunSyncData);
+            },
+          );
+        } else {
+          this.setState(
+            {
+              liveRunSyncData: data,
+            },
+            () => {
+              this.pollJobStatus(data.job_id, "live_run");
+            },
+            () => {
+              console.log("this is new state", this.state.liveRunSyncData);
+            },
+          );
         }
       });
     this.setState({ dryRunDisable: true });
@@ -170,52 +167,44 @@ class ConfigChange extends React.Component {
     let stateProperty = null;
 
     if (jobtype === "dry_run") {
-      repeatInterval = this.repeatingDryrunJobData;
       stateProperty = "dryRunProgressData";
     } else if (jobtype === "live_run") {
-      repeatInterval = this.repeatingLiverunJobData;
       stateProperty = "liveRunProgressData";
     } else if (jobtype === "confirm_run") {
-      repeatInterval = this.repeatingConfirmrunJobData;
       stateProperty = "confirmRunProgressData";
     } else {
       throw new Error("pollJobStatus called with unknown jobtype");
     }
 
     getData(url, credentials).then((data) => {
-      {
-        this.setState({
-          [stateProperty]: data.data.jobs,
-          blockNavigation: true,
-        });
-      }
+      this.setState({
+        [stateProperty]: data.data.jobs,
+        blockNavigation: true,
+      });
     });
     repeatInterval = setInterval(() => {
       const credentials = localStorage.getItem("token");
       getData(url, credentials).then((data) => {
-        {
-          const jobdata = data.data.jobs[0];
-          this.setState({
-            [stateProperty]: jobdata,
-          });
+        const jobdata = data.data.jobs[0];
+        this.setState({
+          [stateProperty]: jobdata,
+        });
+        if (
+          jobdata.status === "FINISHED" ||
+          jobdata.status === "EXCEPTION" ||
+          jobdata.status === "ABORTED"
+        ) {
+          clearInterval(repeatInterval);
+          this.setState({ blockNavigation: false });
           if (
-            jobdata.status === "FINISHED" ||
-            jobdata.status === "EXCEPTION" ||
-            jobdata.status === "ABORTED"
+            jobtype === "live_run" &&
+            jobdata.status === "FINISHED" &&
+            typeof jobdata.next_job_id === "number"
           ) {
-            clearInterval(repeatInterval);
-            this.setState({ blockNavigation: false });
-            if (
-              jobtype === "live_run" &&
-              jobdata.status === "FINISHED" &&
-              typeof jobdata.next_job_id === "number"
-            ) {
-              this.pollJobStatus(jobdata.next_job_id, "confirm_run");
-              console.log(
-                `Config change with next_job_id detected (commitmode 2): ${jobdata.next_job_id}`,
-              );
-            }
-            Prism.highlightAll();
+            this.pollJobStatus(jobdata.next_job_id, "confirm_run");
+            console.log(
+              `Config change with next_job_id detected (commitmode 2): ${jobdata.next_job_id}`,
+            );
           }
         }
       });

diff --git a/public/components/ConfigChange/DryRun/DryRun.js b/public/components/ConfigChange/DryRun/DryRun.js
@@ -1,9 +1,9 @@
 import React from "react";
-import { Form, Checkbox, Popup, Icon } from "semantic-ui-react";
+import { Checkbox, Form, Icon, Popup } from "semantic-ui-react";
+import permissionsCheck from "../../../utils/permissions/permissionsCheck";
+import DryRunError from "./DryRunError";
 import DryRunProgressBar from "./DryRunProgressBar";
 import DryRunProgressInfo from "./DryRunProgressInfo";
-import DryRunError from "./DryRunError";
-import permissionsCheck from "../../../utils/permissions/permissionsCheck";
 
 class DryRun extends React.Component {
   state = {
@@ -37,6 +37,7 @@ class DryRun extends React.Component {
       // console.log("jobStatus errored");
       error = [
         <DryRunError
+          key="dryrunerror"
           dryRunSyncStart={this.props.dryRunSyncStart}
           dryRunProgressData={dryRunProgressData}
           devices={this.props.devices}

diff --git a/public/components/ConfigChange/VerifyDiff/VerifyDiffResult.js b/public/components/ConfigChange/VerifyDiff/VerifyDiffResult.js
@@ -1,3 +1,4 @@
+import Prism from "prismjs";
 import React from "react";
 import SyntaxHighlight from "../../SyntaxHighlight";
 
@@ -11,7 +12,7 @@ class VerifyDiffResult extends React.Component {
     const deviceNameAndDiffArray = deviceData.map((jobsObj, i) => {
       const jobTasks = jobsObj.job_tasks;
       return jobTasks
-        .map((subTasks, j) => {
+        .map((subTasks) => {
           return subTasks.diff;
         })
         .filter((diff) => diff !== "")
@@ -40,24 +41,25 @@ class VerifyDiffResult extends React.Component {
     );
     // Check if we get a result back, but the result contains only empty diffs
     if (
-      deviceData !== undefined &&
-      deviceData.length != 0 &&
+      deviceData?.length !== 0 &&
       (deviceNameAndDiffList === undefined ||
-        (deviceNameAndDiffList.length == 1 &&
+        (deviceNameAndDiffList.length === 1 &&
           deviceNameAndDiffList[0] === undefined))
     ) {
       deviceNameAndDiffList = (
         <li>
           <p>All devices returned empty diffs</p>
         </li>
       );
+    } else {
+      Prism.highlightAll();
     }
     // creates a 2D array that pairs device name and their exceptions
     const deviceNameAndExceptionArray = deviceData.map((jobsObj, i) => {
       const jobTasks = jobsObj.job_tasks;
       return jobTasks
         .filter((subTask) => subTask.failed === true)
-        .map((subTasks, j) => {
+        .map((subTasks) => {
           return subTasks.result;
         })
         .reduce((arr, result, n) => {