Fixes #2506 - Updating react codemirror package that we use

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kinto-admin",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Kinto Web Administration Console in React.js",
   "scripts": {
     "build": "rimraf build && cross-env NODE_ENV=production webpack --progress --config webpack.prod.js",
@@ -28,11 +28,12 @@
     "@rjsf/core": "^5.13.2",
     "@rjsf/validator-ajv8": "^5.13.2",
     "@testing-library/react-hooks": "^8.0.1",
+    "@uiw/codemirror-extensions-langs": "^4.21.21",
+    "@uiw/react-codemirror": "^4.21.21",
     "atob": "^2.0.3",
     "bootstrap": "^4.6.2",
     "bootstrap-icons": "^1.11.1",
     "btoa": "^1.1.2",
-    "codemirror": "^5.39.2",
     "diff": "^5.0.0",
     "express": "^4.14.0",
     "filesize": "^10.0.7",
@@ -44,7 +45,6 @@
     "react-bootstrap": "^1.6.7",
     "react-bootstrap-icons": "^1.10.3",
     "react-bs-notifier": "^6.0.0",
-    "react-codemirror2": "^7.0.0",
     "react-dom": "^17.0.2",
     "react-redux": "^8.0.2",
     "react-router": "^5.2.1",

src/App.tsx

@@ -4,7 +4,7 @@ import { Provider } from "react-redux";
 
 import { store, history } from "./store/configureStore";
 import "bootstrap/dist/css/bootstrap.css";
-import "codemirror/lib/codemirror.css";
+// import "codemirror/lib/codemirror.css";
 import "../css/styles.css";
 import { Layout } from "./components/Layout";
 

src/components/JSONEditor.tsx

@@ -1,21 +1,6 @@
 import React from "react";
-import { UnControlled as CodeMirror } from "react-codemirror2";
-import "codemirror/mode/javascript/javascript";
-
-const cmOptions = {
-  theme: "default",
-  height: "auto",
-  viewportMargin: Infinity,
-  mode: {
-    name: "javascript",
-    json: true,
-    statementIndent: 2,
-  },
-  lineNumbers: true,
-  lineWrapping: true,
-  indentWithTabs: false,
-  tabSize: 2,
-};
+import CodeMirror, { ViewUpdate } from "@uiw/react-codemirror";
+import { langs } from "@uiw/codemirror-extensions-langs";
 
 type Props = {
   readonly: boolean;
@@ -30,7 +15,7 @@ export default function JSONEditor({
   value,
   onChange,
 }: Props) {
-  const onCodeChange = (editor: Object, metadata: any, code: string) => {
+  const onCodeChange = (code: string, viewUpdate: ViewUpdate) => {
     onChange(code);
   };
 
@@ -39,9 +24,11 @@ export default function JSONEditor({
   ) : (
     <CodeMirror
       value={value}
-      autoCursor={false}
       onChange={onCodeChange}
-      options={cmOptions}
+      height="auto"
+      style={{}}
+      extensions={[langs.json()]}
+      indentWithTab={true}
     />
   );
 }

src/components/signoff/SimpleReview/index.tsx

@@ -102,9 +102,20 @@ export default function SimpleReview({
     // get collection data
     async function getRecords() {
       if (destCid && destBid && sourceBid && sourceCid) {
-        const newRecords = await fetchRecords(sourceBid, sourceCid);
-        const oldRecords = await fetchRecords(destBid, destCid);
-        setRecords({ oldRecords, newRecords, loading: false });
+        try {
+          const newRecords = await fetchRecords(sourceBid, sourceCid);
+          const oldRecords = await fetchRecords(destBid, destCid);
+          setRecords({ oldRecords, newRecords, loading: false });
+        } catch (ex) {
+          if (ex.data?.code === 401) {
+            setRecords({
+              ...records,
+              loading: false,
+            });
+          } else {
+            console.error(ex);
+          }
+        }
       }
     }
     getRecords();
@@ -120,46 +131,35 @@ export default function SimpleReview({
     );
   }
 
-  let message = "";
   if (!session.authenticated) {
-    message = "Not authenticated";
+    return (
+      <div className="simple-review-blocked-message list-page">
+        Not authenticated
+      </div>
+    );
   } else if (
     session.authenticating ||
     session.busy ||
     (records.loading && signoffSource && signoffDest)
   ) {
     return <Spinner />;
-  } else if (!signoffSource || !signoffSource?.status) {
-    message = "This is not a collection that supports reviews.";
-  }
-
-  if (message) {
-    return (
-      <div className="simple-review-blocked-message list-page">{message}</div>
-    );
   }
-
   const handleRollback = (text: string) => {
     rollbackChanges(text);
     history.push(`/buckets/${bid}/collections/${cid}/records`);
   };
 
-  return (
-    <div className="list-page">
-      <h1>
-        Review{" "}
-        <b>
-          {bid}/{cid}
-        </b>{" "}
-        Changes
-      </h1>
-      <CollectionTabs
-        bid={bid}
-        cid={cid}
-        selected="simple-review"
-        capabilities={capabilities || {}}
-        totalRecords={collection?.totalRecords || 0}
-      >
+  const SignoffContent = () => {
+    if (!signoffSource || !signoffSource?.status) {
+      return (
+        <div className="alert alert-warning">
+          This collection does not support reviews, or you do not have
+          permission to review.
+        </div>
+      );
+    }
+    return (
+      <>
         {signoffSource.status !== "signed" && (
           <SimpleReviewHeader {...signoffSource}>
             <SimpleReviewButtons
@@ -190,6 +190,27 @@ export default function SimpleReview({
         >
           <Shuffle className="icon" /> Switch to Legacy Review UI
         </button>
+      </>
+    );
+  };
+
+  return (
+    <div className="list-page">
+      <h1>
+        Review{" "}
+        <b>
+          {bid}/{cid}
+        </b>{" "}
+        Changes
+      </h1>
+      <CollectionTabs
+        bid={bid}
+        cid={cid}
+        selected="simple-review"
+        capabilities={capabilities || {}}
+        totalRecords={collection?.totalRecords || 0}
+      >
+        <SignoffContent />
       </CollectionTabs>
     </div>
   );