Merge branch 'k88hudson-simple-review'

css/styles.css

@@ -250,6 +250,10 @@ table.record-list td.load-more {
   color: red;
 }
 
+.json-record-simple-review {
+  white-space: pre-wrap;
+}
+
 .card-header > .icon,
 .list-group-item .icon,
 .nav-tabs li .icon {
@@ -542,5 +546,5 @@ i.fa:before {
 }
 
 .modal {
-  background-color: rgba(0,0,0,0.3);
-}
+  background-color: rgba(0, 0, 0, 0.3);
+}

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   setupFilesAfterEnv: ["./test/setup-jsdom.js"],
-  testRegex: ".*_test.js",
+  testRegex: [".*_test.js", ".*_test.tsx", ".*_test.ts"],
   moduleNameMapper: {
     "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js",
     "\\.svg": "<rootDir>/test/__mocks__/svgrMock.js",

package.json

@@ -74,6 +74,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@svgr/webpack": "^5.4.0",
     "@types/history": "^4.7.8",
+    "@types/jest": "^26.0.23",
     "@types/react-redux": "^7.1.11",
     "@types/react-router-dom": "^5.1.6",
     "@typescript-eslint/eslint-plugin": "^4.9.1",

server/dev.js

@@ -5,6 +5,7 @@ var config = require("../webpack.dev");
 
 var app = express();
 var compiler = webpack(config);
+const PORT = process.env.PORT || 3000;
 
 app.use(
   require("webpack-dev-middleware")(compiler, {
@@ -19,11 +20,11 @@ app.get("*", function(req, res) {
   res.sendFile(path.join(__dirname, "..", "html", "dev.html"));
 });
 
-app.listen(3000, "0.0.0.0", function(err) {
+app.listen(PORT, "0.0.0.0", function(err) {
   if (err) {
     console.log(err);
     return;
   }
 
-  console.log("Listening at http://0.0.0.0:3000");
+  console.log("Listening at http://0.0.0.0:" + PORT);
 });

src/components/App.tsx

@@ -30,6 +30,7 @@ import RecordBulkPage from "../containers/record/RecordBulkPage";
 import RecordAttributesPage from "../containers/record/RecordAttributesPage";
 import RecordPermissionsPage from "../containers/record/RecordPermissionsPage";
 import RecordHistoryPage from "../containers/record/RecordHistoryPage";
+import SimpleReviewPage from "../plugins/signoff/SimpleReview/SimpleReviewPage";
 
 import { BoxArrowRight } from "react-bootstrap-icons";
 import { QuestionCircleFill } from "react-bootstrap-icons";
@@ -286,6 +287,12 @@ export default class App extends PureComponent<Props> {
                                       path="/buckets/:bid/collections/:cid/history"
                                       component={CollectionHistoryPage}
                                     />
+                                    <CreateRoute
+                                      exact
+                                      title="simple-review"
+                                      path="/buckets/:bid/collections/:cid/simple-review"
+                                      component={SimpleReviewPage}
+                                    />
                                     <CreateRoute
                                       exact
                                       title="records"

src/components/CommentDialog.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+
+type DialogProps = {
+  title?: string;
+  description: string;
+  confirmLabel: string;
+  onConfirm: (comment: string) => void;
+  onClose: () => void;
+};
+
+export default function CommentDialog({
+  title = "Confirmation",
+  description,
+  onConfirm,
+  confirmLabel,
+  onClose,
+}: DialogProps) {
+  const [value, setValue] = useState("");
+  return (
+    <div
+      className="modal"
+      tabIndex={-1}
+      role="dialog"
+      style={{ display: "block" }}>
+      <div className="modal-dialog" role="document">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">{title}</h5>
+            <button
+              type="button"
+              className="close"
+              data-dismiss="modal"
+              aria-label="Close"
+              onClick={onClose}>
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div className="modal-body">
+            <p>{description}</p>
+            <textarea
+              className="form-control"
+              value={value}
+              placeholder="Comment..."
+              onChange={e => setValue(e.currentTarget.value)}
+            />
+          </div>
+          <div className="modal-footer">
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={() => {
+                onConfirm(value);
+                onClose();
+              }}>
+              {confirmLabel}
+            </button>
+            <button
+              type="button"
+              className="btn btn-secondary"
+              data-dismiss="modal"
+              onClick={onClose}>
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}