From b2efe471420e99181c79430bff3afa4edc7082a2 Mon Sep 17 00:00:00 2001
From: Paul Abumov <pavelabumov@meta.com>
Date: Mon, 19 Feb 2024 14:52:44 -0500
Subject: [PATCH] [Form Builder] Added file review modal in TaskReview

---
 .../review_app/client/src/consts/review.ts    |  60 +++
 .../InReviewFileModal/InReviewFileModal.css   |  91 ++++
 .../InReviewFileModal/InReviewFileModal.tsx   | 106 ++++
 .../TaskPage/ReviewModal/ReviewModal.tsx      |   8 +-
 .../client/src/pages/TaskPage/TaskPage.tsx    |  35 +-
 .../client/src/types/inReviewFileModal.d.ts   |  11 +
 mephisto/review_app/client/src/urls.ts        |   1 +
 .../review_app/server/api/views/__init__.py   |   1 +
 .../server/api/views/unit_data_static_view.py |  59 +++
 mephisto/review_app/server/urls.py            |   4 +
 .../react-form-composer/package-lock.json     | 460 +++++++++++++++++-
 packages/react-form-composer/package.json     |   1 +
 .../src/FormComposer/FormComposer.css         |  24 +
 .../src/FormComposer/FormComposer.js          |  19 +-
 .../src/FormComposer/constants.js             |   2 +
 .../src/FormComposer/fields/FileField.js      |  28 +-
 16 files changed, 892 insertions(+), 18 deletions(-)
 create mode 100644 mephisto/review_app/client/src/pages/TaskPage/InReviewFileModal/InReviewFileModal.css
 create mode 100644 mephisto/review_app/client/src/pages/TaskPage/InReviewFileModal/InReviewFileModal.tsx
 create mode 100644 mephisto/review_app/client/src/types/inReviewFileModal.d.ts
 create mode 100644 mephisto/review_app/server/api/views/unit_data_static_view.py

diff --git a/mephisto/review_app/client/src/consts/review.ts b/mephisto/review_app/client/src/consts/review.ts
index 85b79e5d6..5160624b8 100644
--- a/mephisto/review_app/client/src/consts/review.ts
+++ b/mephisto/review_app/client/src/consts/review.ts
@@ -9,3 +9,63 @@ export const ReviewType = {
   REJECT: "reject",
   SOFT_REJECT: "softReject",
 };
+
+export const MESSAGES_IFRAME_DATA_KEY = "IFRAME_DATA";
+
+export const MESSAGES_IN_REVIEW_FILE_DATA_KEY = "IN_REVIEW_FILE_DATA";
+
+export const FILE_EXT_TYPES = {
+  image: [
+    "png",
+    "jpg",
+    "jpeg",
+    "gif",
+    "webp",
+    "bmp",
+  ],
+  video: [
+    "mkv",
+    "mp4",
+    "webm",
+  ],
+  audio: [
+    "mp3",
+    "ogg",
+    "wav",
+  ],
+};
+
+export const FileType = {
+  AUDIO: "audio",
+  IMAGE: "image",
+  PDF: "pdf",
+  VIDEO: "video",
+};
+
+export const FILE_TYPE_BY_EXT = {
+  "png": FileType.IMAGE,
+  "jpg": FileType.IMAGE,
+  "jpeg": FileType.IMAGE,
+  "gif": FileType.IMAGE,
+  "webp": FileType.IMAGE,
+  "bmp": FileType.IMAGE,
+  "mkv": FileType.VIDEO,
+  "mp4": FileType.VIDEO,
+  "webm": FileType.VIDEO,
+  "mp3": FileType.AUDIO,
+  "ogg": FileType.AUDIO,
+  "wav": FileType.AUDIO,
+  "pdf": FileType.PDF,
+};
+
+export const AUDIO_TYPES_BY_EXT = {
+  "mp3": "audio/mpeg",
+  "ogg": "audio/ogg",
+  "wav": "audio/wav",
+};
+
+export const VIDEO_TYPES_BY_EXT = {
+  "mkv": "video/x-matroska",
+  "mp4": "video/mp4",
+  "webm": "video/webm",
+};
diff --git a/mephisto/review_app/client/src/pages/TaskPage/InReviewFileModal/InReviewFileModal.css b/mephisto/review_app/client/src/pages/TaskPage/InReviewFileModal/InReviewFileModal.css
new file mode 100644
index 000000000..dd3c6e06b
--- /dev/null
+++ b/mephisto/review_app/client/src/pages/TaskPage/InReviewFileModal/InReviewFileModal.css
@@ -0,0 +1,91 @@
+/*
+ * Copyright (c) Meta Platforms and its affiliates.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.in-review-file-modal .modal-dialog {
+  max-width: 98vw;
+  min-width: 500px;
+  width: fit-content;
+}
+
+.in-review-file-modal .modal-dialog .modal-header {
+  background-color: #ecdadf;
+  display: flex;
+  justify-content: space-between;
+  padding: 5px;
+  border-radius: 0;
+}
+
+.in-review-file-modal .modal-dialog .modal-header .button-close {
+  height: 38px;
+  width: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  font-size: 38px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.in-review-file-modal .modal-dialog .modal-header .button-download-file {
+  height: 38px;
+  width: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  font-size: 30px;
+  line-height: 1;
+  cursor: pointer;
+  text-decoration: none;
+  color: black;
+}
+
+.in-review-file-modal .modal-dialog .modal-header .button-close:hover,
+.in-review-file-modal .modal-dialog .modal-header .button-download-file:hover {
+  opacity: 0.7;
+  background-color: lightgrey;
+}
+
+.in-review-file-modal .modal-dialog .modal-header .modal-title {
+  font-size: 26px;
+}
+
+/* Body */
+.in-review-file-modal .modal-dialog .modal-content {
+  border-radius: initial;
+  width: fit-content;
+  min-width: 500px;
+}
+
+.in-review-file-modal .modal-dialog .modal-content .modal-body {
+  /*width: fit-content;*/
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.in-review-file-modal .modal-dialog .modal-content .modal-body img,
+.in-review-file-modal .modal-dialog .modal-content .modal-body video {
+  width: fit-content;
+  max-width: 100%;
+}
+
+.in-review-file-modal .modal-dialog .modal-content .modal-body .iframe-wrapper {
+  position: relative;
+  width: 100%;
+  padding-top: calc(129% + 2%);
+}
+.in-review-file-modal .modal-dialog .modal-content .modal-body iframe {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #f2f2f2;
+  border: 1px solid #cccccc;
+}
diff --git a/mephisto/review_app/client/src/pages/TaskPage/InReviewFileModal/InReviewFileModal.tsx b/mephisto/review_app/client/src/pages/TaskPage/InReviewFileModal/InReviewFileModal.tsx
new file mode 100644
index 000000000..f1069d408
--- /dev/null
+++ b/mephisto/review_app/client/src/pages/TaskPage/InReviewFileModal/InReviewFileModal.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) Meta Platforms and its affiliates.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { AUDIO_TYPES_BY_EXT, FILE_TYPE_BY_EXT, FileType, VIDEO_TYPES_BY_EXT } from "consts/review";
+import * as React from "react";
+import { useEffect } from "react";
+import { Modal } from "react-bootstrap";
+import urls from "urls";
+import "./InReviewFileModal.css";
+
+
+type InReviewFileModalProps = {
+  data: InReviewFileModalDataType;
+  setData: React.Dispatch<React.SetStateAction<InReviewFileModalDataType>>;
+  show: boolean;
+  setShow: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+function InReviewFileModal(props: InReviewFileModalProps) {
+  const { data, show, setShow } = props;
+
+  const [fileUrl, setFileUrl] = React.useState<string>(null);
+  const [fileExt, setFileExt] = React.useState<string>(null);
+
+  const fileType = FILE_TYPE_BY_EXT[fileExt];
+
+  function onModalClose() {
+    setShow(!show);
+  }
+
+  function truncateFilename(filename: string, n: number): string  {
+    const ext = data.filename.split(".").pop();
+    const _filename = (filename.length > n)
+      ? (filename.slice(0, (n - 1 - ext.length)) + "…" + "." + ext)
+      : filename;
+    return _filename;
+  }
+
+  useEffect(() => {
+    setFileUrl(null);
+    setFileExt(null);
+
+    if (data.filename) {
+      setFileUrl(urls.server.unitFile(data.unitId, data.filename));
+      setFileExt(data.filename.split(".").pop().toLowerCase());
+    }
+  }, [data]);
+
+  return (
+    show && (
+      <Modal className={"in-review-file-modal"} show={show} onHide={onModalClose}>
+        <Modal.Header closeButton={false}>
+          <button className={"button-close"} onClick={() => setShow(false)}>
+            ✕
+          </button>
+          <Modal.Title>
+            {truncateFilename(data.title, 50)}
+          </Modal.Title>
+          <a
+            className={"button-download-file"}
+            title={"Download source"}
+            href={fileUrl}
+            target={"_blank"}
+          >
+            ⤓
+          </a>
+        </Modal.Header>
+
+        <Modal.Body>
+          {fileType ? (<>
+            {fileType === FileType.IMAGE && (
+              <img className={""} src={fileUrl} alt={`image "${data.filename}}`} />
+            )}
+            {fileType === FileType.VIDEO && (
+              <video className={""} controls={true}>
+                <source src={fileUrl} type={VIDEO_TYPES_BY_EXT[fileExt]} />
+              </video>
+            )}
+            {fileType === FileType.AUDIO && (
+              <audio className={""} controls={true}>
+                <source src={fileUrl} type={AUDIO_TYPES_BY_EXT[fileExt]} />
+              </audio>
+            )}
+            {fileType === FileType.PDF && (
+              <div className={"iframe-wrapper"}>
+                <iframe
+                  className={""}
+                  src={`${fileUrl}#view=fit&page=1&toolbar=0&navpanes=0`}
+                />
+              </div>
+            )}
+          </>) : (<>
+            Cannot show preview for this type of file.
+            <br />
+            You can download and open file on your computer
+          </>)}
+        </Modal.Body>
+      </Modal>
+    )
+  );
+}
+
+export { InReviewFileModal };
diff --git a/mephisto/review_app/client/src/pages/TaskPage/ReviewModal/ReviewModal.tsx b/mephisto/review_app/client/src/pages/TaskPage/ReviewModal/ReviewModal.tsx
index 5cf8f6903..1143535f2 100644
--- a/mephisto/review_app/client/src/pages/TaskPage/ReviewModal/ReviewModal.tsx
+++ b/mephisto/review_app/client/src/pages/TaskPage/ReviewModal/ReviewModal.tsx
@@ -27,13 +27,13 @@ type ReviewModalProps = {
 };
 
 function ReviewModal(props: ReviewModalProps) {
-  const onModalClose = () => {
+  function onModalClose() {
     props.setShow(!props.show);
-  };
+  }
 
-  const onChangeApplyToNext = (value: boolean) => {
+  function onChangeApplyToNext(value: boolean) {
     props.setData({ ...props.data, applyToNext: value });
-  };
+  }
 
   return (
     props.show && (
diff --git a/mephisto/review_app/client/src/pages/TaskPage/TaskPage.tsx b/mephisto/review_app/client/src/pages/TaskPage/TaskPage.tsx
index 35e3e0af3..ff112fcbe 100644
--- a/mephisto/review_app/client/src/pages/TaskPage/TaskPage.tsx
+++ b/mephisto/review_app/client/src/pages/TaskPage/TaskPage.tsx
@@ -4,7 +4,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ReviewType } from "consts/review";
+import {
+  MESSAGES_IFRAME_DATA_KEY,
+  MESSAGES_IN_REVIEW_FILE_DATA_KEY,
+  ReviewType,
+} from "consts/review";
 import cloneDeep from "lodash/cloneDeep";
 import * as React from "react";
 import { useEffect } from "react";
@@ -27,6 +31,7 @@ import {
 import { postWorkerBlock } from "requests/workers";
 import urls from "urls";
 import { setPageTitle, updateModalState } from "./helpers";
+import { InReviewFileModal } from "./InReviewFileModal/InReviewFileModal";
 import {
   APPROVE_MODAL_DATA_STATE,
   DEFAULT_MODAL_STATE_VALUE,
@@ -108,6 +113,11 @@ function TaskPage(props: PropsType) {
   const [inputsVisibility, setInputsVisibility] = React.useState<boolean>(null);
   const [resultsVisibility, setResultsVisibility] = React.useState<boolean>(null);
 
+  const [inReviewFileModalShow, setInReviewFileModalShow] = React.useState<boolean>(false);
+  const [inReviewFileModalData, setInReviewFileModalData] = React.useState<
+    InReviewFileModalDataType
+  >({});
+
   window.onmessage = function (e) {
     if (
       e.data &&
@@ -115,7 +125,21 @@ function TaskPage(props: PropsType) {
       !e.data?.type // Exclude all unexpected messages from iframe
     ) {
       const data = JSON.parse(e.data);
-      setIframeHeight(data["IFRAME_DATA"]["height"]);
+
+      // Resize iframe message
+      if (data.hasOwnProperty(MESSAGES_IFRAME_DATA_KEY)) {
+        setIframeHeight(data[MESSAGES_IFRAME_DATA_KEY]["height"]);
+      }
+      // Open file field modal message
+      else if (data.hasOwnProperty(MESSAGES_IN_REVIEW_FILE_DATA_KEY)) {
+        const filename = data[MESSAGES_IN_REVIEW_FILE_DATA_KEY].filename;
+        setInReviewFileModalData({
+          filename: filename,
+          title: `File "${filename}"`,
+          unitId: currentUnitOnReview,
+        });
+        setInReviewFileModalShow(true);
+      }
     }
   };
 
@@ -668,6 +692,13 @@ function TaskPage(props: PropsType) {
         setErrors={props.setErrors}
         workerId={currentWorkerOnReview}
       />
+
+      <InReviewFileModal
+        show={inReviewFileModalShow}
+        setShow={setInReviewFileModalShow}
+        data={inReviewFileModalData}
+        setData={setInReviewFileModalData}
+      />
     </div>
   );
 }
diff --git a/mephisto/review_app/client/src/types/inReviewFileModal.d.ts b/mephisto/review_app/client/src/types/inReviewFileModal.d.ts
new file mode 100644
index 000000000..2b93d1138
--- /dev/null
+++ b/mephisto/review_app/client/src/types/inReviewFileModal.d.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) Meta Platforms and its affiliates.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+type InReviewFileModalDataType = {
+  filename?: string;
+  title?: string;
+  unitId?: number;
+};
diff --git a/mephisto/review_app/client/src/urls.ts b/mephisto/review_app/client/src/urls.ts
index 12ee9ace0..d0acdb631 100644
--- a/mephisto/review_app/client/src/urls.ts
+++ b/mephisto/review_app/client/src/urls.ts
@@ -32,6 +32,7 @@ const urls = {
     unitsDetails: API_URL + "/api/units/details",
     unitsReject: API_URL + "/api/units/reject",
     unitsSoftReject: API_URL + "/api/units/soft-reject",
+    unitFile: (id, filename) => API_URL + `/api/units/${id}/static/${filename}`,
     workersBlock: (id) => API_URL + `/api/workers/${id}/block`,
   },
 };
diff --git a/mephisto/review_app/server/api/views/__init__.py b/mephisto/review_app/server/api/views/__init__.py
index ced9bcc83..93b417fb0 100644
--- a/mephisto/review_app/server/api/views/__init__.py
+++ b/mephisto/review_app/server/api/views/__init__.py
@@ -14,6 +14,7 @@
 from .task_view import TaskView
 from .tasks_view import TasksView
 from .tasks_worker_units_view import TaskUnitIdsView
+from .unit_data_static_view import UnitDataStaticView
 from .unit_review_bundle_view import UnitReviewBundleView
 from .unit_review_html_view import UnitReviewHtmlView
 from .units_approve_view import UnitsApproveView
diff --git a/mephisto/review_app/server/api/views/unit_data_static_view.py b/mephisto/review_app/server/api/views/unit_data_static_view.py
new file mode 100644
index 000000000..e45c70a31
--- /dev/null
+++ b/mephisto/review_app/server/api/views/unit_data_static_view.py
@@ -0,0 +1,59 @@
+#!/usr/bin/env python3
+# Copyright (c) Meta Platforms and its affiliates.
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+from typing import Optional
+from typing import Union
+
+from flask import current_app as app
+from flask import Response
+from flask import send_from_directory
+from flask.views import MethodView
+
+from mephisto.data_model.agent import Agent
+from mephisto.data_model.unit import Unit
+
+
+class UnitDataStaticView(MethodView):
+    @staticmethod
+    def _get_filename_by_original_name(unit: Unit, filename: str) -> Union[str, None]:
+        agent: Agent = unit.get_assigned_agent()
+        if agent:
+            unit_parsed_data = agent.state.get_parsed_data()
+            outputs = unit_parsed_data.get("outputs", {})
+            # In case if there is outdated code that returns `final_submission`
+            # under `outputs` key, we should use the value in side `final_submission`
+            if "final_submission" in outputs:
+                outputs = outputs["final_submission"]
+            files_data = outputs.get("files", [])
+
+            for file_data in files_data:
+                original_filename = file_data.get("originalname")
+                if original_filename == filename:
+                    return file_data.get("filename")
+
+        return None
+
+    def get(
+        self, unit_id: str = None, filename: Optional[str] = None, *args, **kwargs,
+    ) -> Union[Response, dict]:
+        """
+        Return static files from `data` directory.
+
+        It can return files by name from file system (auto generated name) or
+        by original name (that name with what user uploaded a file)
+        """
+        unit: Unit = Unit.get(app.db, str(unit_id))
+        app.logger.debug(f"Found Unit in DB: {unit}")
+
+        # Mephisto saves files with its own format of file names,
+        # but saves file's original name under key `originalname`,
+        # and in `outputs` data it adds only that `originalname`.
+        # So this is a shortcut for the UI to get files without parsing data to reach full filename
+        filename_by_original_name = self._get_filename_by_original_name(unit, filename)
+        if filename_by_original_name:
+            filename = filename_by_original_name
+
+        unit_data_folder = unit.get_assigned_agent().get_data_dir()
+        return send_from_directory(unit_data_folder, filename)
diff --git a/mephisto/review_app/server/urls.py b/mephisto/review_app/server/urls.py
index 286d2d4fa..a6886e093 100644
--- a/mephisto/review_app/server/urls.py
+++ b/mephisto/review_app/server/urls.py
@@ -8,6 +8,10 @@
 
 
 def init_urls(app: Flask):
+    app.add_url_rule(
+        "/api/units/<int:unit_id>/static/<path:filename>",
+        view_func=api_views.UnitDataStaticView.as_view("unit_data_static"),
+    )
     app.add_url_rule(
         "/api/qualifications/<int:qualification_id>/workers",
         view_func=api_views.QualificationWorkersView.as_view("qualification_workers"),
diff --git a/packages/react-form-composer/package-lock.json b/packages/react-form-composer/package-lock.json
index 0796e374e..3b747fe54 100644
--- a/packages/react-form-composer/package-lock.json
+++ b/packages/react-form-composer/package-lock.json
@@ -12,6 +12,7 @@
         "bootstrap-select": "^1.13.18",
         "jquery": "^3.6.0",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.8.0",
         "react-dom": "^18.2.0"
       },
       "devDependencies": {
@@ -1787,7 +1788,6 @@
       "version": "7.23.9",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
       "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1976,6 +1976,76 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.2.tgz",
+      "integrity": "sha512-0gKkgDYdnq1w+ey8KzG9l+H5Z821qh9vVjztk55rUg71vTk/Eaebeir+WtzcLLwTjw3m/asIjx8Y59y1lJZhBw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
+      "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz",
+      "integrity": "sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -2061,6 +2131,34 @@
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
       "dev": true
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.11",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.2.55",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
+      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
+    },
     "node_modules/@types/sinonjs__fake-timers": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
@@ -2073,6 +2171,11 @@
       "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
       "dev": true
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -2903,6 +3006,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -3158,6 +3266,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
     "node_modules/cypress": {
       "version": "10.11.0",
       "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.11.0.tgz",
@@ -3400,6 +3513,23 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -4199,6 +4329,14 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -4939,6 +5077,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -5282,6 +5428,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
@@ -5354,6 +5522,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.1.tgz",
+      "integrity": "sha512-J3OpRZIvCTQK+Tg/jOkRUvpYLHMdGeU9KqFUBQrV0d/Qr/3nsINpiOJyZMWnM5SJ3ctZdhPA6eCIKpEJR3Ellg==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.6",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5366,6 +5563,31 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -5412,8 +5634,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
@@ -6064,8 +6285,7 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
@@ -6097,6 +6317,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -6278,6 +6512,14 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -7733,7 +7975,6 @@
       "version": "7.23.9",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
       "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.14.0"
       }
@@ -7894,6 +8135,59 @@
       "dev": true,
       "optional": true
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.2.tgz",
+      "integrity": "sha512-0gKkgDYdnq1w+ey8KzG9l+H5Z821qh9vVjztk55rUg71vTk/Eaebeir+WtzcLLwTjw3m/asIjx8Y59y1lJZhBw==",
+      "requires": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "requires": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
+      "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "uncontrollable": {
+          "version": "8.0.4",
+          "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+          "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+          "requires": {}
+        }
+      }
+    },
+    "@swc/helpers": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.6.tgz",
+      "integrity": "sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -7979,6 +8273,34 @@
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.11",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
+    },
+    "@types/react": {
+      "version": "18.2.55",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
+      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
+    },
     "@types/sinonjs__fake-timers": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
@@ -7991,6 +8313,11 @@
       "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
       "dev": true
     },
+    "@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q=="
+    },
     "@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -8591,6 +8918,11 @@
       "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -8784,6 +9116,11 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
     "cypress": {
       "version": "10.11.0",
       "resolved": "https://registry.npmjs.org/cypress/-/cypress-10.11.0.tgz",
@@ -8967,6 +9304,20 @@
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
       "dev": true
     },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -9544,6 +9895,14 @@
       "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
       "dev": true
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -10093,6 +10452,11 @@
         "path-key": "^3.0.0"
       }
     },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
     "object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
@@ -10322,6 +10686,25 @@
       "integrity": "sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==",
       "dev": true
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-from-env": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
@@ -10382,6 +10765,25 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-bootstrap": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.1.tgz",
+      "integrity": "sha512-J3OpRZIvCTQK+Tg/jOkRUvpYLHMdGeU9KqFUBQrV0d/Qr/3nsINpiOJyZMWnM5SJ3ctZdhPA6eCIKpEJR3Ellg==",
+      "requires": {
+        "@babel/runtime": "^7.22.5",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.6",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -10391,6 +10793,27 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -10428,8 +10851,7 @@
     "regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regenerator-transform": {
       "version": "0.15.2",
@@ -10905,8 +11327,7 @@
     "tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "dev": true
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
     },
     "tunnel-agent": {
       "version": "0.6.0",
@@ -10929,6 +11350,17 @@
       "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
       "dev": true
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -11045,6 +11477,14 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/packages/react-form-composer/package.json b/packages/react-form-composer/package.json
index 3c2219a97..871d71723 100644
--- a/packages/react-form-composer/package.json
+++ b/packages/react-form-composer/package.json
@@ -16,6 +16,7 @@
     "bootstrap-select": "^1.13.18",
     "jquery": "^3.6.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
diff --git a/packages/react-form-composer/src/FormComposer/FormComposer.css b/packages/react-form-composer/src/FormComposer/FormComposer.css
index fb70cd2d4..27d499175 100644
--- a/packages/react-form-composer/src/FormComposer/FormComposer.css
+++ b/packages/react-form-composer/src/FormComposer/FormComposer.css
@@ -18,6 +18,7 @@ video {
   /* Variables */
   --input-bg-color: #fafafa;
   --error-color: red;
+  --orange-color: orange;
 
   margin: 0 auto;
   padding-top: 20px;
@@ -204,6 +205,29 @@ video {
   cursor: pointer;
 }
 
+.form-composer .section .fieldset .field .file-field {
+  position: relative;
+}
+
+.form-composer .section .fieldset .field .file-field .browse-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 4;
+  display: block;
+  width: 88px;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  line-height: 1.5;
+  background-color: var(--orange-color);
+  color: white;
+  border: 1px solid var(--orange-color);
+  border-left: inherit;
+  border-radius: 0 0.25rem 0.25rem 0;
+  cursor: pointer;
+}
+
 
 /* --- Buttons --- */
 .form-composer .form-buttons {
diff --git a/packages/react-form-composer/src/FormComposer/FormComposer.js b/packages/react-form-composer/src/FormComposer/FormComposer.js
index b38e5dd85..6c07a13ce 100644
--- a/packages/react-form-composer/src/FormComposer/FormComposer.js
+++ b/packages/react-form-composer/src/FormComposer/FormComposer.js
@@ -5,7 +5,11 @@
  */
 
 import React from "react";
-import { DEFAULT_COLLAPSABLE, DEFAULT_INITIALLY_COLLAPSED } from "./constants";
+import {
+  DEFAULT_COLLAPSABLE,
+  DEFAULT_INITIALLY_COLLAPSED,
+  MESSAGES_IN_REVIEW_FILE_DATA_KEY
+} from "./constants";
 import { CheckboxField } from "./fields/CheckboxField";
 import { FileField } from "./fields/FileField";
 import { InputField } from "./fields/InputField";
@@ -116,6 +120,18 @@ function FormComposer({data, onSubmit, finalResults, serverSubmitErrors, setRend
     onSubmit(formData);
   }
 
+  function sendMessageToReviewAppWithFileInfo(filename) {
+    // Send file field information to the Review app as a message from iframe
+    window.top.postMessage(
+      JSON.stringify({
+        [MESSAGES_IN_REVIEW_FILE_DATA_KEY]: {
+          filename: filename,
+        },
+      }),
+      "*"
+    );
+  }
+
   // Effects
   React.useEffect(() => {
     setPageTitle(formTitle);
@@ -433,6 +449,7 @@ function FormComposer({data, onSubmit, finalResults, serverSubmitErrors, setRend
                                       inReviewState={inReviewState}
                                       invalid={(invalidFormFields[field.name] || []).length}
                                       validationErrors={(invalidFormFields[field.name] || [])}
+                                      onReviewFileButtonClick={sendMessageToReviewAppWithFileInfo}
                                     />
                                   )}
 
diff --git a/packages/react-form-composer/src/FormComposer/constants.js b/packages/react-form-composer/src/FormComposer/constants.js
index ca811b689..ac58a4130 100644
--- a/packages/react-form-composer/src/FormComposer/constants.js
+++ b/packages/react-form-composer/src/FormComposer/constants.js
@@ -9,3 +9,5 @@ export const TOKEN_END_SYMBOLS = "}}";
 export const TOKEN_START_REGEX = /\{\{/;
 
 export const TOKEN_END_REGEX = /\}\}/;
+
+export const MESSAGES_IN_REVIEW_FILE_DATA_KEY = "IN_REVIEW_FILE_DATA";
diff --git a/packages/react-form-composer/src/FormComposer/fields/FileField.js b/packages/react-form-composer/src/FormComposer/fields/FileField.js
index c609d184d..04e4a155b 100644
--- a/packages/react-form-composer/src/FormComposer/fields/FileField.js
+++ b/packages/react-form-composer/src/FormComposer/fields/FileField.js
@@ -9,7 +9,14 @@ import { checkFieldRequiredness } from "../validation/helpers";
 import { Errors } from "./Errors";
 
 function FileField({
-  field, updateFormData, disabled, initialFormData, inReviewState, invalid, validationErrors,
+  field,
+  updateFormData,
+  disabled,
+  initialFormData,
+  inReviewState,
+  invalid,
+  validationErrors,
+  onReviewFileButtonClick,
 }) {
   const [widgetValue, setWidgetValue] = React.useState("");
 
@@ -40,6 +47,10 @@ function FileField({
     setWidgetValue(initialValue.name || "");
   }
 
+  function onBrowseClick() {
+    onReviewFileButtonClick(widgetValue);
+  }
+
   // Effects
   React.useEffect(() => {
     if (!widgetValue) {
@@ -63,6 +74,7 @@ function FileField({
     //  - custom-file-label
 
     <div className={`
+      file-field
       custom-file 
       ${invalidField ? "is-invalid" : ""}
     `}>
@@ -85,6 +97,20 @@ function FileField({
         disabled={disabled}
       />
 
+      {/*
+        Button to open file in modal window in Review App.
+        This button is shown over input browse button only in review state and if file was attached
+      */}
+      {(inReviewState && widgetValue) && (
+        <div
+          className={"browse-button"}
+          title={"Show review information for this file"}
+          onClick={onBrowseClick}
+        >
+          View file
+        </div>
+      )}
+
       <span className={`custom-file-label`}>
         {widgetValue}
       </span>