From 24f4c0879626c45b9c94c034eca9b06be829c8c0 Mon Sep 17 00:00:00 2001 From: rjmacarthy Date: Thu, 26 Jan 2023 13:13:46 +0000 Subject: [PATCH] Refactor task page routes and repetition Remove blank line Lint add blank line Link pre-commit --- .../e2e/tasks/no_tasks_available.cy.ts | 23 ++++++++++ website/public/locales/en/common.json | 5 ++- website/src/components/EmptyState.tsx | 2 +- website/src/components/TaskPage/TaskPage.tsx | 40 ++++++++++++++++++ website/src/lib/api.ts | 3 +- website/src/lib/constants.ts | 42 +++++++++++++++++++ website/src/pages/create/assistant_reply.tsx | 29 ++----------- website/src/pages/create/initial_prompt.tsx | 29 ++----------- website/src/pages/create/user_reply.tsx | 33 +++------------ .../pages/evaluate/rank_assistant_replies.tsx | 29 ++----------- .../pages/evaluate/rank_initial_prompts.tsx | 29 ++----------- .../src/pages/evaluate/rank_user_replies.tsx | 33 +++------------ .../src/pages/label/label_assistant_reply.tsx | 29 ++----------- .../src/pages/label/label_initial_prompt.tsx | 29 ++----------- .../src/pages/label/label_prompter_reply.tsx | 29 ++----------- website/src/pages/tasks/random.tsx | 32 ++------------ website/src/types/Task.ts | 2 +- 17 files changed, 147 insertions(+), 271 deletions(-) create mode 100644 website/cypress/e2e/tasks/no_tasks_available.cy.ts create mode 100644 website/src/components/TaskPage/TaskPage.tsx create mode 100644 website/src/lib/constants.ts diff --git a/website/cypress/e2e/tasks/no_tasks_available.cy.ts b/website/cypress/e2e/tasks/no_tasks_available.cy.ts new file mode 100644 index 00000000..27c33b48 --- /dev/null +++ b/website/cypress/e2e/tasks/no_tasks_available.cy.ts @@ -0,0 +1,23 @@ +describe("no tasks available", () => { + it("displays an empty state when no tasks are available", () => { + cy.signInWithEmail("cypress@example.com"); + cy.intercept( + { + method: "GET", + url: "/api/new_task/prompter_reply", + }, + { + statusCode: 500, + body: { + message: "No tasks of type 'label_prompter_reply' are currently available.", + errorCode: 1006, + httpStatusCode: 503, + }, + } + ).as("newTaskPrompterReply"); + cy.visit("/create/user_reply"); + cy.wait("@newTaskPrompterReply").then(() => { + cy.get('[data-cy="cy-no-tasks"]').should("exist"); + }); + }); +}); diff --git a/website/public/locales/en/common.json b/website/public/locales/en/common.json index 8f35eaab..0b0f9d37 100644 --- a/website/public/locales/en/common.json +++ b/website/public/locales/en/common.json @@ -9,11 +9,12 @@ "docs": "Docs", "github": "GitHub", "legal": "Legal", + "loading": "Loading...", + "more_information": "More Information", "privacy_policy": "Privacy Policy", "report_a_bug": "Report a Bug", "sign_in": "Sign In", "sign_out": "Sign Out", "terms_of_service": "Terms of Service", - "title": "Open Assistant", - "more_information": "More Information" + "title": "Open Assistant" } diff --git a/website/src/components/EmptyState.tsx b/website/src/components/EmptyState.tsx index b0455774..63d8d3bf 100644 --- a/website/src/components/EmptyState.tsx +++ b/website/src/components/EmptyState.tsx @@ -15,7 +15,7 @@ export const EmptyState = (props: EmptyStateProps) => { - {props.text} + {props.text} Go back to the dashboard diff --git a/website/src/components/TaskPage/TaskPage.tsx b/website/src/components/TaskPage/TaskPage.tsx new file mode 100644 index 00000000..9fc26c42 --- /dev/null +++ b/website/src/components/TaskPage/TaskPage.tsx @@ -0,0 +1,40 @@ +import Head from "next/head"; +import { useTranslation } from "next-i18next"; +import { TaskEmptyState } from "src/components/EmptyState"; +import { LoadingScreen } from "src/components/Loading/LoadingScreen"; +import { Task } from "src/components/Tasks/Task"; +import { TaskInfos } from "src/components/Tasks/TaskTypes"; +import { apiHooksByType, ERROR_CODES } from "src/lib/constants"; +import { getTypeSafei18nKey } from "src/lib/i18n"; +import { TaskType } from "src/types/Task"; + +type TaskPageProps = { + type: TaskType; +}; + +export const TaskPage = ({ type }: TaskPageProps) => { + const { t } = useTranslation(["tasks", "common"]); + const apiHook = apiHooksByType[type]; + const { tasks, isLoading, reset, trigger, error } = apiHook(type); + const taskType = TaskInfos.find((taskType) => taskType.type === type); + + if (isLoading) { + return ; + } + + if (tasks.length === 0 || error?.errorCode === ERROR_CODES.TASK_REQUESTED_TYPE_NOT_AVAILABLE) { + return ; + } + + const task = tasks[0]; + + return ( + <> + + {t(getTypeSafei18nKey(`${taskType.id}.label`))} + + + + + ); +}; diff --git a/website/src/lib/api.ts b/website/src/lib/api.ts index d61016d2..2649daf8 100644 --- a/website/src/lib/api.ts +++ b/website/src/lib/api.ts @@ -17,7 +17,8 @@ export const post = (url: string, { arg: data }) => api.post(url, data).then((re api.interceptors.response.use( (response) => response, (error) => { - throw new OasstError(error.message ?? error, error.error_code, error?.response?.status || -1); + const err = error?.response?.data; + throw new OasstError(err?.message ?? error, err?.errorCode, error?.response?.httpStatusCode || -1); } ); diff --git a/website/src/lib/constants.ts b/website/src/lib/constants.ts new file mode 100644 index 00000000..6269dbf9 --- /dev/null +++ b/website/src/lib/constants.ts @@ -0,0 +1,42 @@ +import { + useCreateAssistantReply, + useCreateInitialPrompt, + useCreatePrompterReply, +} from "src/hooks/tasks/useCreateReply"; +import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI"; +import { + useLabelAssistantReplyTask, + useLabelInitialPromptTask, + useLabelPrompterReplyTask, +} from "src/hooks/tasks/useLabelingTask"; +import { + useRankAssistantRepliesTask, + useRankInitialPromptsTask, + useRankPrompterRepliesTask, +} from "src/hooks/tasks/useRankReplies"; +import { TaskType } from "src/types/Task"; + +export const ERROR_CODES = { + TASK_REQUESTED_TYPE_NOT_AVAILABLE: 1006, + TASK_INVALID_REQUEST_TYPE: 1000, + TASK_ACK_FAILED: 1001, + TASK_NACK_FAILED: 1002, + TASK_INVALID_RESPONSE_TYPE: 1003, + TASK_INTERACTION_REQUEST_FAILED: 1004, + TASK_GENERATION_FAILED: 1005, + TASK_AVAILABILITY_QUERY_FAILED: 1007, + TASK_MESSAGE_TOO_LONG: 1008, +}; + +export const apiHooksByType = { + [TaskType.random]: useGenericTaskAPI, + [TaskType.assistant_reply]: useCreateAssistantReply, + [TaskType.initial_prompt]: useCreateInitialPrompt, + [TaskType.label_assistant_reply]: useLabelAssistantReplyTask, + [TaskType.label_initial_prompt]: useLabelInitialPromptTask, + [TaskType.label_prompter_reply]: useLabelPrompterReplyTask, + [TaskType.prompter_reply]: useCreatePrompterReply, + [TaskType.rank_assistant_replies]: useRankAssistantRepliesTask, + [TaskType.rank_initial_prompts]: useRankInitialPromptsTask, + [TaskType.rank_prompter_replies]: useRankPrompterRepliesTask, +}; diff --git a/website/src/pages/create/assistant_reply.tsx b/website/src/pages/create/assistant_reply.tsx index 1c83eb23..0f3095a9 100644 --- a/website/src/pages/create/assistant_reply.tsx +++ b/website/src/pages/create/assistant_reply.tsx @@ -1,32 +1,9 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useCreateAssistantReply } from "src/hooks/tasks/useCreateReply"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; +import { TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -const AssistantReply = () => { - const { tasks, isLoading, reset, trigger } = useCreateAssistantReply(); - - if (isLoading) { - return ; - } - - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Reply as Assistant - - - - - ); -}; +const AssistantReply = () => ; AssistantReply.getLayout = getDashboardLayout; diff --git a/website/src/pages/create/initial_prompt.tsx b/website/src/pages/create/initial_prompt.tsx index 639df68f..c73f2e5d 100644 --- a/website/src/pages/create/initial_prompt.tsx +++ b/website/src/pages/create/initial_prompt.tsx @@ -1,32 +1,9 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useCreateInitialPrompt } from "src/hooks/tasks/useCreateReply"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; +import { TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -const InitialPrompt = () => { - const { tasks, isLoading, reset, trigger } = useCreateInitialPrompt(); - - if (isLoading) { - return ; - } - - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Initial Prompt - - - - - ); -}; +const InitialPrompt = () => ; InitialPrompt.getLayout = getDashboardLayout; diff --git a/website/src/pages/create/user_reply.tsx b/website/src/pages/create/user_reply.tsx index 5898439c..39218476 100644 --- a/website/src/pages/create/user_reply.tsx +++ b/website/src/pages/create/user_reply.tsx @@ -1,33 +1,10 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useCreatePrompterReply } from "src/hooks/tasks/useCreateReply"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; +import { TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -const UserReply = () => { - const { tasks, isLoading, reset, trigger } = useCreatePrompterReply(); +const PrompterReply = () => ; - if (isLoading) { - return ; - } +PrompterReply.getLayout = getDashboardLayout; - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Reply as User - - - - - ); -}; - -UserReply.getLayout = getDashboardLayout; - -export default UserReply; +export default PrompterReply; diff --git a/website/src/pages/evaluate/rank_assistant_replies.tsx b/website/src/pages/evaluate/rank_assistant_replies.tsx index da79d92f..dd4c1df9 100644 --- a/website/src/pages/evaluate/rank_assistant_replies.tsx +++ b/website/src/pages/evaluate/rank_assistant_replies.tsx @@ -1,32 +1,9 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useRankAssistantRepliesTask } from "src/hooks/tasks/useRankReplies"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; +import { TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -const RankAssistantReplies = () => { - const { tasks, isLoading, reset, trigger } = useRankAssistantRepliesTask(); - - if (isLoading) { - return ; - } - - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Rank Assistant Replies - - - - - ); -}; +const RankAssistantReplies = () => ; RankAssistantReplies.getLayout = getDashboardLayout; diff --git a/website/src/pages/evaluate/rank_initial_prompts.tsx b/website/src/pages/evaluate/rank_initial_prompts.tsx index f23fc0ed..1eb91289 100644 --- a/website/src/pages/evaluate/rank_initial_prompts.tsx +++ b/website/src/pages/evaluate/rank_initial_prompts.tsx @@ -1,32 +1,9 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useRankInitialPromptsTask } from "src/hooks/tasks/useRankReplies"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; +import { TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -const RankInitialPrompts = () => { - const { tasks, isLoading, reset, trigger } = useRankInitialPromptsTask(); - - if (isLoading) { - return ; - } - - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Rank Initial Prompts - - - - - ); -}; +const RankInitialPrompts = () => ; RankInitialPrompts.getLayout = getDashboardLayout; diff --git a/website/src/pages/evaluate/rank_user_replies.tsx b/website/src/pages/evaluate/rank_user_replies.tsx index cee82b87..a1caba59 100644 --- a/website/src/pages/evaluate/rank_user_replies.tsx +++ b/website/src/pages/evaluate/rank_user_replies.tsx @@ -1,33 +1,10 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useRankPrompterRepliesTask } from "src/hooks/tasks/useRankReplies"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; +import { TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -const RankUserReplies = () => { - const { tasks, isLoading, reset, trigger } = useRankPrompterRepliesTask(); +const RankPrompterReplies = () => ; - if (isLoading) { - return ; - } +RankPrompterReplies.getLayout = getDashboardLayout; - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Rank User Replies - - - - - ); -}; - -RankUserReplies.getLayout = getDashboardLayout; - -export default RankUserReplies; +export default RankPrompterReplies; diff --git a/website/src/pages/label/label_assistant_reply.tsx b/website/src/pages/label/label_assistant_reply.tsx index 07a6cb1c..8be12b41 100644 --- a/website/src/pages/label/label_assistant_reply.tsx +++ b/website/src/pages/label/label_assistant_reply.tsx @@ -1,32 +1,9 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useLabelAssistantReplyTask } from "src/hooks/tasks/useLabelingTask"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; +import { TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -const LabelAssistantReply = () => { - const { tasks, isLoading, trigger, reset } = useLabelAssistantReplyTask(); - - if (isLoading) { - return ; - } - - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Label Assistant Reply - - - - - ); -}; +const LabelAssistantReply = () => ; LabelAssistantReply.getLayout = getDashboardLayout; diff --git a/website/src/pages/label/label_initial_prompt.tsx b/website/src/pages/label/label_initial_prompt.tsx index 8735044f..c5fed344 100644 --- a/website/src/pages/label/label_initial_prompt.tsx +++ b/website/src/pages/label/label_initial_prompt.tsx @@ -1,32 +1,9 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useLabelInitialPromptTask } from "src/hooks/tasks/useLabelingTask"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; +import { TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -const LabelInitialPrompt = () => { - const { tasks, isLoading, trigger, reset } = useLabelInitialPromptTask(); - - if (isLoading) { - return ; - } - - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Label Initial Prompt - - - - - ); -}; +const LabelInitialPrompt = () => ; LabelInitialPrompt.getLayout = getDashboardLayout; diff --git a/website/src/pages/label/label_prompter_reply.tsx b/website/src/pages/label/label_prompter_reply.tsx index 17164e11..33e8aba4 100644 --- a/website/src/pages/label/label_prompter_reply.tsx +++ b/website/src/pages/label/label_prompter_reply.tsx @@ -1,32 +1,9 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useLabelPrompterReplyTask } from "src/hooks/tasks/useLabelingTask"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; +import { TaskType } from "src/types/Task"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; -const LabelPrompterReply = () => { - const { tasks, isLoading, trigger, reset } = useLabelPrompterReplyTask(); - - if (isLoading) { - return ; - } - - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Label Prompter Reply - - - - - ); -}; +const LabelPrompterReply = () => ; LabelPrompterReply.getLayout = getDashboardLayout; diff --git a/website/src/pages/tasks/random.tsx b/website/src/pages/tasks/random.tsx index f1c04d2c..cd7ed458 100644 --- a/website/src/pages/tasks/random.tsx +++ b/website/src/pages/tasks/random.tsx @@ -1,34 +1,10 @@ -import Head from "next/head"; -import { TaskEmptyState } from "src/components/EmptyState"; import { getDashboardLayout } from "src/components/Layout"; -import { LoadingScreen } from "src/components/Loading/LoadingScreen"; -import { Task } from "src/components/Tasks/Task"; -import { useGenericTaskAPI } from "src/hooks/tasks/useGenericTaskAPI"; +import { TaskPage } from "src/components/TaskPage/TaskPage"; export { getDefaultStaticProps as getStaticProps } from "src/lib/default_static_props"; import { TaskType } from "src/types/Task"; -const RandomTask = () => { - const { tasks, isLoading, trigger, reset } = useGenericTaskAPI(TaskType.random); +const Random = () => ; - if (isLoading) { - return ; - } +Random.getLayout = getDashboardLayout; - if (tasks.length === 0) { - return ; - } - - return ( - <> - - Random Task - - - - - ); -}; - -RandomTask.getLayout = (page) => getDashboardLayout(page); - -export default RandomTask; +export default Random; diff --git a/website/src/types/Task.ts b/website/src/types/Task.ts index 12e37db0..7ae48138 100644 --- a/website/src/types/Task.ts +++ b/website/src/types/Task.ts @@ -1,4 +1,4 @@ -export const enum TaskType { +export enum TaskType { initial_prompt = "initial_prompt", assistant_reply = "assistant_reply", prompter_reply = "prompter_reply",