Skip to content

Commit

Permalink
Finalize playground-tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@nygrenh
nygrenh committed Oct 23, 2023
1 parent 8542489 commit d5d6b82
Show file tree
Hide file tree
Showing 8 changed files with 160 additions and 111 deletions.
16 changes: 6 additions & 10 deletions services/main-frontend/src/components/page-specific/playground-views/PlaygroundAnswers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,20 @@ import { useTranslation } from "react-i18next"

import { ExerciseTaskGradingResult } from "../../../shared-module/bindings"
import DebugModal from "../../../shared-module/components/DebugModal"
import withErrorBoundary from "../../../shared-module/utils/withErrorBoundary"

interface PlaygroundAnswersProps {
userAnswer: unknown
// eslint-disable-next-line @typescript-eslint/no-explicit-any
submitAnswerMutation: UseMutationResult<ExerciseTaskGradingResult, unknown, any, unknown>
}

const FULL_WIDTH = "100vw"
const HALF_WIDTH = "50vw"

const StyledPre = styled.pre<{ fullWidth: boolean }>`
const StyledPre = styled.pre`
background-color: rgba(218, 230, 229, 0.4);
border-radius: 6px;
padding: 1rem;
font-size: 13px;
max-width: ${(props) => (props.fullWidth ? FULL_WIDTH : HALF_WIDTH)};
width: 100%;
max-height: 700px;
overflow: scroll;
white-space: pre-wrap;
Expand Down Expand Up @@ -68,7 +66,7 @@ const PlaygroudAnswers: React.FC<PlaygroundAnswersProps> = ({
{t("user-answer-explanation")}
</p>
{userAnswer ? (
<StyledPre fullWidth={false}>{JSON.stringify(userAnswer, undefined, 2)}</StyledPre>
<StyledPre>{JSON.stringify(userAnswer, undefined, 2)}</StyledPre>
) : (
<div>{t("error-no-user-answer")}</div>
)}
Expand All @@ -86,9 +84,7 @@ const PlaygroudAnswers: React.FC<PlaygroundAnswersProps> = ({
</p>

{submitAnswerMutation.isSuccess && !submitAnswerMutation.isLoading ? (
<StyledPre fullWidth={false}>
{JSON.stringify(submitAnswerMutation.data, undefined, 2)}
</StyledPre>
<StyledPre>{JSON.stringify(submitAnswerMutation.data, undefined, 2)}</StyledPre>
) : (
<div>{t("error-no-grading-long")}</div>
)}
Expand All @@ -97,4 +93,4 @@ const PlaygroudAnswers: React.FC<PlaygroundAnswersProps> = ({
)
}

export default PlaygroudAnswers
export default withErrorBoundary(PlaygroudAnswers)
3 changes: 2 additions & 1 deletion ...frontend/src/components/page-specific/playground-views/PlaygroundExerciseEditorIframe.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
UserInformation,
} from "../../../shared-module/exercise-service-protocol-types"
import { isMessageFromIframe } from "../../../shared-module/exercise-service-protocol-types.guard"
import withErrorBoundary from "../../../shared-module/utils/withErrorBoundary"

interface PlaygroundExerciseEditorIframeProps {
url: string
Expand Down Expand Up @@ -70,4 +71,4 @@ const PlaygroundExerciseEditorIframe: React.FC<
)
}

export default PlaygroundExerciseEditorIframe
export default withErrorBoundary(PlaygroundExerciseEditorIframe)
5 changes: 3 additions & 2 deletions .../main-frontend/src/components/page-specific/playground-views/PlaygroundExerciseIframe.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
UserInformation,
} from "../../../shared-module/exercise-service-protocol-types"
import { isMessageFromIframe } from "../../../shared-module/exercise-service-protocol-types.guard"
import withErrorBoundary from "../../../shared-module/utils/withErrorBoundary"

interface PlaygroundExerciseIframeProps {
url: string
Expand Down Expand Up @@ -40,7 +41,7 @@ const PlaygroundExerciseIframe: React.FC<
}) => {
const { t } = useTranslation()
if (publicSpecQuery.isLoading || publicSpecQuery.isError) {
return <>{t("error-no-public-spec")}</>
return <div>{t("error-no-public-spec")}</div>
}
// Makes sure the iframe renders again when the data changes
const iframeKey =
Expand Down Expand Up @@ -104,4 +105,4 @@ const PlaygroundExerciseIframe: React.FC<
)
}

export default PlaygroundExerciseIframe
export default withErrorBoundary(PlaygroundExerciseIframe)
167 changes: 92 additions & 75 deletions services/main-frontend/src/components/page-specific/playground-views/PlaygroundPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
UserInformation,
} from "../../../shared-module/exercise-service-protocol-types"
import { baseTheme } from "../../../shared-module/styles"
import withErrorBoundary from "../../../shared-module/utils/withErrorBoundary"

import PlaygroundExerciseEditorIframe from "./PlaygroundExerciseEditorIframe"
import PlaygroundExerciseIframe from "./PlaygroundExerciseIframe"
Expand Down Expand Up @@ -60,6 +61,10 @@ const StyledPre = styled.pre<{ fullWidth: boolean }>`
}
`

const CheckBoxWrapper = styled.div`
margin: 0.5rem;
`

const PlaygroundPreview: React.FC<PlaygroundPreviewProps> = ({
serviceInfoQuery,
isValidServiceInfo,
Expand Down Expand Up @@ -108,9 +113,9 @@ const PlaygroundPreview: React.FC<PlaygroundPreviewProps> = ({
button {
height: 40px;
}
margin: 0.5rem 1rem;
`}
>
<h2 id="heading-iframe">{t("title-iframe")}</h2>{" "}
<Button
variant={"secondary"}
size={"small"}
Expand Down Expand Up @@ -226,15 +231,17 @@ const PlaygroundPreview: React.FC<PlaygroundPreviewProps> = ({
)}
{currentView === "answer-exercise" && (
<>
<CheckBox
label={t("label-send-previous-submission")}
checked={answerExerciseViewSendPreviousSubmission}
onChange={() => {
setAnswerExerciseViewSendPreviousSubmission(
!answerExerciseViewSendPreviousSubmission,
)
}}
/>
<CheckBoxWrapper>
<CheckBox
label={t("label-send-previous-submission")}
checked={answerExerciseViewSendPreviousSubmission}
onChange={() => {
setAnswerExerciseViewSendPreviousSubmission(
!answerExerciseViewSendPreviousSubmission,
)
}}
/>
</CheckBoxWrapper>
<PlaygroundExerciseIframe
url={`${exerciseServiceHost}${serviceInfoQuery.data.user_interface_iframe_path}?width=${width}`}
publicSpecQuery={publicSpecQuery}
Expand Down Expand Up @@ -266,13 +273,17 @@ const PlaygroundPreview: React.FC<PlaygroundPreviewProps> = ({
)}
{currentView === "view-submission" && (
<>
<CheckBox
label={t("label-send-model-solution-spec")}
checked={submissionViewSendModelsolutionSpec}
onChange={() => {
setSubmissionViewSendModelsolutionSpec(!submissionViewSendModelsolutionSpec)
}}
/>
<CheckBoxWrapper>
<CheckBox
label={t("label-send-model-solution-spec")}
checked={submissionViewSendModelsolutionSpec}
onChange={() => {
setSubmissionViewSendModelsolutionSpec(
!submissionViewSendModelsolutionSpec,
)
}}
/>
</CheckBoxWrapper>
<PlaygroundViewSubmissionIframe
url={`${exerciseServiceHost}${serviceInfoQuery.data.user_interface_iframe_path}?width=${width}`}
publicSpecQuery={publicSpecQuery}
Expand All @@ -291,70 +302,76 @@ const PlaygroundPreview: React.FC<PlaygroundPreviewProps> = ({
)}
</div>
</div>
<div
className={css`
padding: 2rem;
padding-top: 0;
`}
>
<div>
<h2 id="heading-communication-with-the-iframe">
{t("title-communication-with-the-iframe")}
</h2>
</div>

<div>
<h2 id="heading-communication-with-the-iframe">
{t("title-communication-with-the-iframe")}
</h2>
</div>

<div>
<div
className={css`
display: flex;
align-items: center;
h3 {
margin-right: 0.5rem;
}
`}
>
<h3>{t("title-current-state-received-from-the-iframe")}</h3>
<DebugModal data={currentStateReceivedFromIframe} buttonSize="small" />
{currentStateReceivedFromIframe && (
<div
className={css`
margin: 0 1rem;
flex-grow: 1;
`}
>
{t("label-valid")}: {JSON.stringify(currentStateReceivedFromIframe.valid)}
</div>
)}
<div>
<div
className={css`
display: flex;
align-items: center;
h3 {
margin-right: 0.5rem;
}
`}
>
<h3>{t("title-current-state-received-from-the-iframe")}</h3>
<DebugModal data={currentStateReceivedFromIframe} buttonSize="small" />
{currentStateReceivedFromIframe && (
<div
className={css`
margin: 0 1rem;
flex-grow: 1;
`}
>
{t("label-valid")}: {JSON.stringify(currentStateReceivedFromIframe.valid)}
</div>
)}

{currentView === "exercise-editor" && (
<Button
size="medium"
variant="primary"
onClick={() => {
settingsForm.setValue(
"private_spec",
JSON.stringify(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(currentStateReceivedFromIframe?.data as any)?.private_spec,
undefined,
2,
),
)
// Must also reset the user answer because if the spec has changed, the user answer format is likely to be much different and not resetting it now would lead to hard-to-debug errors.
setUserAnswer(null)
}}
>
{t("button-set-as-private-spec-input")}
</Button>
{currentView === "exercise-editor" && (
<Button
size="medium"
variant="primary"
onClick={() => {
settingsForm.setValue(
"private_spec",
JSON.stringify(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(currentStateReceivedFromIframe?.data as any)?.private_spec,
undefined,
2,
),
)
// Must also reset the user answer because if the spec has changed, the user answer format is likely to be much different and not resetting it now would lead to hard-to-debug errors.
setUserAnswer(null)
}}
>
{t("button-set-as-private-spec-input")}
</Button>
)}
</div>
{currentStateReceivedFromIframe === null ? (
<>{t("message-no-current-state-message-received-from-the-iframe-yet")}</>
) : (
<>
<StyledPre fullWidth>
{JSON.stringify(currentStateReceivedFromIframe.data, undefined, 2)}
</StyledPre>
</>
)}
</div>
{currentStateReceivedFromIframe === null ? (
<>{t("message-no-current-state-message-received-from-the-iframe-yet")}</>
) : (
<>
<StyledPre fullWidth>
{JSON.stringify(currentStateReceivedFromIframe.data, undefined, 2)}
</StyledPre>
</>
)}
</div>
</div>
)
}

export default PlaygroundPreview
export default withErrorBoundary(PlaygroundPreview)
3 changes: 2 additions & 1 deletion services/main-frontend/src/components/page-specific/playground-views/PlaygroundSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import DebugModal from "../../../shared-module/components/DebugModal"
import CheckBox from "../../../shared-module/components/InputFields/CheckBox"
import TextField from "../../../shared-module/components/InputFields/TextField"
import { baseTheme } from "../../../shared-module/styles"
import withErrorBoundary from "../../../shared-module/utils/withErrorBoundary"

interface PlayGroundSettingsProps {
settingsForm: UseFormReturn<PlaygroundSettings>
Expand Down Expand Up @@ -96,4 +97,4 @@ const PlayGroundSettings: React.FC<PlayGroundSettingsProps> = ({
)
}

export default PlayGroundSettings
export default withErrorBoundary(PlayGroundSettings)
Loading

0 comments on commit d5d6b82

Please sign in to comment.