Fixed auto-redirect upon Task completion in In-House provider

facebookresearch · Dec 12, 2024 · 4770e95 · 4770e95
1 parent 9fab428
commit 4770e95
Show file tree

Hide file tree

Showing 91 changed files with 812 additions and 759 deletions.
diff --git a/examples/form_composer_demo/run_task_with_worker_opinion__local__inhouse.py b/examples/form_composer_demo/run_task_with_worker_opinion__local__inhouse.py
@@ -16,10 +16,12 @@
 @task_script(default_config_file="example__local__inhouse")
 def main(operator: Operator, cfg: DictConfig) -> None:
     os.environ["REACT_APP__WITH_WORKER_OPINION"] = "true"
+
     examples.build_form_composer_simple(
         force_rebuild=cfg.mephisto.task.force_rebuild,
         post_install_script=cfg.mephisto.task.post_install_script,
     )
+
     operator.launch_task_run(cfg.mephisto)
     operator.wait_for_runs_then_shutdown(skip_input=True, log_rate=30)
 

diff --git a/examples/form_composer_demo/webapp/package-lock.json b/examples/form_composer_demo/webapp/package-lock.json
diff --git a/examples/form_composer_demo/webapp/package.json b/examples/form_composer_demo/webapp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "form_composer_demo",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "",
   "main": "webpack.config.js",
   "scripts": {

diff --git a/examples/form_composer_demo/webapp/src/app_dynamic.tsx b/examples/form_composer_demo/webapp/src/app_dynamic.tsx
@@ -4,44 +4,47 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ErrorBoundary, useMephistoTask } from "mephisto-core";
+import { MephistoApp } from "mephisto-addons";
+import { useMephistoTask } from "mephisto-core";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
   FormComposerBaseFrontend,
   LoadingScreen,
 } from "./components/core_components_dynamic";
 
-/* ================= Application Components ================= */
-
-function MainApp() {
+function App() {
   const {
-    isLoading,
-    initialTaskData,
-    handleSubmit,
     handleFatalError,
+    handleSubmit,
+    initialTaskData,
+    isLoading,
+    providerType,
   }: {
-    isLoading: boolean;
-    initialTaskData: ConfigTaskType;
-    handleSubmit: Function;
     handleFatalError: Function;
+    handleSubmit: Function;
+    initialTaskData: ConfigTaskType;
+    isLoading: boolean;
+    providerType: string;
   } = useMephistoTask();
 
-  if (isLoading || !initialTaskData) {
+  if (isLoading) {
     return <LoadingScreen />;
   }
 
   return (
-    <div>
-      <ErrorBoundary handleError={handleFatalError}>
-        <FormComposerBaseFrontend
-          taskData={initialTaskData}
-          onSubmit={handleSubmit}
-          onError={handleFatalError}
-        />
-      </ErrorBoundary>
-    </div>
+    <MephistoApp
+      handleFatalError={handleFatalError}
+      hasTaskSpecificData={!!initialTaskData?.form}
+      providerType={providerType}
+    >
+      <FormComposerBaseFrontend
+        taskData={initialTaskData}
+        onSubmit={handleSubmit}
+        onError={handleFatalError}
+      />
+    </MephistoApp>
   );
 }
 
-ReactDOM.render(<MainApp />, document.getElementById("app"));
+ReactDOM.render(<App />, document.getElementById("app"));
diff --git a/examples/form_composer_demo/webapp/src/app_dynamic_remote_procedure.tsx b/examples/form_composer_demo/webapp/src/app_dynamic_remote_procedure.tsx
@@ -4,52 +4,55 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ErrorBoundary, useMephistoRemoteProcedureTask } from "mephisto-core";
+import { MephistoApp } from "mephisto-addons";
+import { useMephistoRemoteProcedureTask } from "mephisto-core";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {
   FormComposerBaseFrontend,
   LoadingScreen,
 } from "./components/core_components_dynamic_remote_procedure";
 
-/* ================= Application Components ================= */
-
-function MainApp() {
+function App() {
   const {
-    isLoading,
+    handleFatalError,
+    handleSubmit,
     initialTaskData,
+    isLoading,
+    providerType,
     remoteProcedure,
-    handleSubmit,
-    handleFatalError,
   }: {
-    isLoading: boolean;
+    handleFatalError: Function;
+    handleSubmit: Function;
     initialTaskData: ConfigTaskType;
+    isLoading: boolean;
+    providerType: string;
     remoteProcedure: RemoteProcedureCollectionType;
-    handleSubmit: Function;
-    handleFatalError: Function;
   } = useMephistoRemoteProcedureTask();
 
-  if (isLoading || !initialTaskData) {
+  if (isLoading) {
     return <LoadingScreen />;
   }
 
   let _initialTaskData: ConfigTaskType = initialTaskData;
-  if (initialTaskData.hasOwnProperty("task_data")) {
+  if (initialTaskData && initialTaskData.hasOwnProperty("task_data")) {
     _initialTaskData = initialTaskData.task_data;
   }
 
   return (
-    <div>
-      <ErrorBoundary handleError={handleFatalError}>
-        <FormComposerBaseFrontend
-          taskData={_initialTaskData}
-          onSubmit={handleSubmit}
-          onError={handleFatalError}
-          remoteProcedure={remoteProcedure}
-        />
-      </ErrorBoundary>
-    </div>
+    <MephistoApp
+      handleFatalError={handleFatalError}
+      hasTaskSpecificData={!!_initialTaskData?.form}
+      providerType={providerType}
+    >
+      <FormComposerBaseFrontend
+        taskData={_initialTaskData}
+        onSubmit={handleSubmit}
+        onError={handleFatalError}
+        remoteProcedure={remoteProcedure}
+      />
+    </MephistoApp>
   );
 }
 
-ReactDOM.render(<MainApp />, document.getElementById("app"));
+ReactDOM.render(<App />, document.getElementById("app"));
diff --git a/examples/form_composer_demo/webapp/src/app_simple.tsx b/examples/form_composer_demo/webapp/src/app_simple.tsx
@@ -4,15 +4,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { WelcomePage, WorkerOpinion } from "mephisto-addons";
-import {
-  ErrorBoundary,
-  isWorkerOpinionEnabled,
-  useMephistoTask,
-} from "mephisto-core";
+import { MephistoApp, WorkerOpinion } from "mephisto-addons";
+import { isWorkerOpinionEnabled, useMephistoTask } from "mephisto-core";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
 import {
   FormComposerBaseFrontend,
   LoadingScreen,
@@ -21,93 +16,37 @@ import {
 
 let WITH_WORKER_OPINION: boolean = isWorkerOpinionEnabled();
 
-/* ================= Application Components ================= */
-
-type HomePagePropsType = {
-  isLoading?: boolean;
-  initialTaskData: ConfigTaskType;
-  handleSubmit: Function;
-  handleFatalError: Function;
-  isOnboarding: boolean;
-  resonseSubmitted: boolean;
-  setResonseSubmitted: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-function HomePage({
-  handleFatalError,
-  handleSubmit,
-  initialTaskData,
-  isOnboarding,
-  resonseSubmitted,
-  setResonseSubmitted,
-}: HomePagePropsType) {
-  // In case of visiting home page but without any GET-parameters
-  if (!initialTaskData?.form) {
-    return (
-      <div className={"container text-center mt-xl-5"}>
-        <h2 className={"mb-xl-5"}>Welcome to Mephisto</h2>
-
-        <div>
-          <a href={"/welcome"}>Click here</a> to proceed to your tasks.
-        </div>
-      </div>
-    );
-  }
-
-  // If all GET-parameters were passed and server returned task data
-  return (
-    <>
-      <FormComposerBaseFrontend
-        taskData={initialTaskData}
-        isOnboarding={isOnboarding}
-        onSubmit={(data: FormComposerResultsType) => {
-          setResonseSubmitted(true);
-          handleSubmit(data);
-        }}
-        onError={handleFatalError}
-      />
-
-      {WITH_WORKER_OPINION && resonseSubmitted && (
-        <div className={"mx-auto mt-lg-5 mb-lg-5"} style={{ width: "600px" }}>
-          <WorkerOpinion
-            maxTextLength={500}
-            questions={["Was this task hard?", "Is this a good example?"]}
-          />
-        </div>
-      )}
-    </>
-  );
-}
-
-function MainApp() {
+function App() {
   const {
-    isLoading,
-    initialTaskData,
+    blockedExplanation,
+    blockedReason,
     handleFatalError,
     handleSubmit,
+    initialTaskData,
+    isLoading,
     isOnboarding,
-    blockedExplanation,
-    blockedReason,
+    providerType,
   }: {
-    isLoading: boolean;
-    initialTaskData: ConfigTaskType;
-    handleSubmit: Function;
-    handleFatalError: Function;
-    isOnboarding: boolean;
     blockedExplanation: string;
     blockedReason: string;
+    handleFatalError: Function;
+    handleSubmit: Function;
+    initialTaskData: ConfigTaskType;
+    isLoading: boolean;
+    isOnboarding: boolean;
+    providerType: string;
   } = useMephistoTask();
 
-  const [resonseSubmitted, setResonseSubmitted] = React.useState<boolean>(
+  const [responseSubmitted, setResponseSubmitted] = React.useState<boolean>(
     false
   );
 
   React.useEffect(() => {
-    if (resonseSubmitted) {
+    if (responseSubmitted) {
       // Scroll to the bollom of the page to reveal Worker Opinion block
       window.scrollTo(0, document.body.scrollHeight);
     }
-  }, [resonseSubmitted]);
+  }, [responseSubmitted]);
 
   if (blockedReason !== null) {
     return (
@@ -128,33 +67,31 @@ function MainApp() {
   }
 
   return (
-    <div>
-      <ErrorBoundary handleError={handleFatalError}>
-        <Routes>
-          <Route path="/welcome" element={<WelcomePage />} />
+    <MephistoApp
+      handleFatalError={handleFatalError}
+      hasTaskSpecificData={!!initialTaskData?.form}
+      providerType={providerType}
+    >
+      <FormComposerBaseFrontend
+        taskData={initialTaskData}
+        isOnboarding={isOnboarding}
+        onSubmit={(data: FormComposerResultsType) => {
+          setResponseSubmitted(true);
+          handleSubmit(data);
+        }}
+        onError={handleFatalError}
+      />
 
-          <Route
-            path="/"
-            element={
-              <HomePage
-                handleFatalError={handleFatalError}
-                handleSubmit={handleSubmit}
-                initialTaskData={initialTaskData}
-                isOnboarding={isOnboarding}
-                resonseSubmitted={resonseSubmitted}
-                setResonseSubmitted={setResonseSubmitted}
-              />
-            }
+      {WITH_WORKER_OPINION && responseSubmitted && (
+        <div className={"mx-auto mt-lg-5 mb-lg-5"} style={{ width: "600px" }}>
+          <WorkerOpinion
+            maxTextLength={500}
+            questions={["Was this task hard?", "Is this a good example?"]}
           />
-        </Routes>
-      </ErrorBoundary>
-    </div>
+        </div>
+      )}
+    </MephistoApp>
   );
 }
 
-ReactDOM.render(
-  <BrowserRouter>
-    <MainApp />
-  </BrowserRouter>,
-  document.getElementById("app")
-);
+ReactDOM.render(<App />, document.getElementById("app"));