Skip to content

Commit

Permalink
Fixed auto-redirect upon Task completion in In-House provider
Browse files Browse the repository at this point in the history
  • Loading branch information
meta-paul committed Dec 12, 2024
1 parent 9fab428 commit 76f04de
Show file tree
Hide file tree
Showing 92 changed files with 815 additions and 763 deletions.
7 changes: 3 additions & 4 deletions .github/workflows/cypress-end-to-end-tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -570,10 +570,9 @@ jobs:

- name: 🔪 Killing the web server
run: |
sudo apt install procps -y # Installing `pkill`
sudo pkill -9 python
sudo pkill -9 node
echo "Web server killed"
kill -INT $(lsof -i -P -n | grep LISTEN | grep python | awk '{print $2}')
kill -INT $(lsof -i -P -n | grep LISTEN | grep node | awk '{print $2}')
echo "Web server was killed"
- name: 🥛 Expiring units
run: |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
4 changes: 2 additions & 2 deletions examples/form_composer_demo/webapp/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion examples/form_composer_demo/webapp/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "form_composer_demo",
"version": "2.0.0",
"version": "3.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
Expand Down
45 changes: 24 additions & 21 deletions examples/form_composer_demo/webapp/src/app_dynamic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"));
Original file line number Diff line number Diff line change
Expand Up @@ -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"));
143 changes: 40 additions & 103 deletions examples/form_composer_demo/webapp/src/app_simple.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 (
Expand All @@ -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"));
Loading

0 comments on commit 76f04de

Please sign in to comment.