feat: add image support to AutoTest page (#2573)

* fix: update task display name and refine student group count logic * feat: migrate auto test task page to dynamic routing with server-side data fetching * feat: enhance test settings display with responsive layout and total questions count * feat: update AutoTestTaskCard link format and enhance course tags display with spacing * refactor: remove unused TASK_TYPES_MAP and GitHub PR switch from auto test task page * fix: improve taskId extraction from context parameters in auto test task page * fix: remove unnecessary context.params reference in getServerSideProps * feat: add image support to AutoTest page * fix: add missing key prop to Question component in auto-test task page
rolling-scopes · Dec 30, 2024 · 6efceb5 · 6efceb5
1 parent e916ed2
commit 6efceb5
Show file tree

Hide file tree

Showing 6 changed files with 200 additions and 36 deletions.
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
@@ -288,6 +288,25 @@ export interface AuthConnectionDto {
      */
     'externalId': string;
 }
+/**
+ * 
+ * @export
+ * @interface AutoTestAttributesDto
+ */
+export interface AutoTestAttributesDto {
+    /**
+     * 
+     * @type {PublicAttributesDto}
+     * @memberof AutoTestAttributesDto
+     */
+    'public': PublicAttributesDto;
+    /**
+     * 
+     * @type {Array<Array<number>>}
+     * @memberof AutoTestAttributesDto
+     */
+    'answers': Array<Array<number>>;
+}
 /**
  * 
  * @export
@@ -374,10 +393,10 @@ export interface AutoTestTaskDto {
     'skills': Array<string>;
     /**
      * 
-     * @type {object}
+     * @type {AutoTestAttributesDto}
      * @memberof AutoTestTaskDto
      */
-    'attributes': object;
+    'attributes': AutoTestAttributesDto;
     /**
      * 
      * @type {Array<UsedCourseDto>}
@@ -4846,6 +4865,43 @@ export interface PromptDto {
      */
     'temperature': number;
 }
+/**
+ * 
+ * @export
+ * @interface PublicAttributesDto
+ */
+export interface PublicAttributesDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof PublicAttributesDto
+     */
+    'maxAttemptsNumber': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof PublicAttributesDto
+     */
+    'numberOfQuestions': number;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof PublicAttributesDto
+     */
+    'strictAttemptsMode': boolean;
+    /**
+     * 
+     * @type {number}
+     * @memberof PublicAttributesDto
+     */
+    'tresholdPercentage': number;
+    /**
+     * 
+     * @type {Array<QuestionDto>}
+     * @memberof PublicAttributesDto
+     */
+    'questions': Array<QuestionDto>;
+}
 /**
  * 
  * @export
@@ -4889,6 +4945,43 @@ export interface PutInterviewFeedbackDto {
      */
     'score'?: number;
 }
+/**
+ * 
+ * @export
+ * @interface QuestionDto
+ */
+export interface QuestionDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof QuestionDto
+     */
+    'question': string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof QuestionDto
+     */
+    'multiple': boolean;
+    /**
+     * 
+     * @type {Array<string>}
+     * @memberof QuestionDto
+     */
+    'answers': Array<string>;
+    /**
+     * 
+     * @type {string}
+     * @memberof QuestionDto
+     */
+    'questionImage'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof QuestionDto
+     */
+    'answersType'?: string;
+}
 /**
  * 
  * @export
@@ -5386,13 +5479,13 @@ export interface SelfEducationQuestionSelectedAnswersDto {
      * @type {string}
      * @memberof SelfEducationQuestionSelectedAnswersDto
      */
-    'questionImage': string;
+    'questionImage'?: string;
     /**
      * 
      * @type {string}
      * @memberof SelfEducationQuestionSelectedAnswersDto
      */
-    'answersType': string;
+    'answersType'?: string;
     /**
      * 
      * @type {Array<number>}

diff --git a/client/src/modules/AutoTest/components/Question/Question.tsx b/client/src/modules/AutoTest/components/Question/Question.tsx
@@ -38,7 +38,7 @@ function Question({ question: selfEducationQuestion, questionIndex }: Props): JS
         name={`answer-${questionIndex}`}
         valuePropName="checked"
       >
-        <Element.Group value={selectedAnswers as any}>
+        <Element.Group value={selectedAnswers}>
           <Space direction="vertical" size="small">
             {answers?.map((answer, answerIndex) => {
               const checked = Array.isArray(selectedAnswers)

diff --git a/client/src/pages/admin/auto-test-task/[taskId].tsx b/client/src/pages/admin/auto-test-task/[taskId].tsx
@@ -1,18 +1,15 @@
-import { Checkbox, Descriptions, Divider, List, Space, Switch, Tag, Typography } from 'antd';
-import { AutoTestTaskDto, AutoTestsApi } from 'api';
+import { Descriptions, Divider, Form, Space, Switch, Tag, Typography } from 'antd';
+import { AutoTestTaskDto, AutoTestsApi, SelfEducationQuestionSelectedAnswersDto } from 'api';
 import { AdminPageLayout } from 'components/PageLayout';
 import { ActiveCourseProvider, SessionProvider, useActiveCourseContext } from 'modules/Course/contexts';
 import { CourseRole } from 'services/models';
 import { GetServerSideProps } from 'next';
 import { getTokenFromContext } from 'utils/server';
 import { getApiConfiguration } from 'utils/axios';
-
-export interface AutoTestTask extends AutoTestTaskDto {
-  attributes: Record<string, any>;
-}
+import { Question } from 'modules/AutoTest/components';
 
 type PageProps = {
-  selectedTask: AutoTestTask;
+  selectedTask: AutoTestTaskDto;
 };
 
 export const getServerSideProps: GetServerSideProps = async context => {
@@ -115,22 +112,24 @@ function Page({ selectedTask }: PageProps) {
               {selectedTask?.attributes?.public?.tresholdPercentage}
             </Descriptions.Item>
           </Descriptions>
-          <List
-            itemLayout="horizontal"
-            dataSource={selectedTask?.attributes.public.questions}
-            renderItem={(item: Record<string, any>, index) => (
-              <List.Item>
-                <List.Item.Meta
-                  title={`${index + 1}. ${item.question}`}
-                  description={item.answers.map((answer: string, indexAnswer: number) => (
-                    <Checkbox key={indexAnswer} checked={selectedTask?.attributes.answers[index].includes(indexAnswer)}>
-                      {answer}
-                    </Checkbox>
-                  ))}
-                />
-              </List.Item>
-            )}
-          />
+          <Form layout="vertical" requiredMark={false} disabled={true}>
+            {selectedTask?.attributes.public.questions.map((question, index) => (
+              <Question
+                key={index}
+                question={
+                  {
+                    ...question,
+                    // TODO: Investigate and fix potential type mismatch for selectedAnswers.
+                    // Related issue: https://github.com/rolling-scopes/rsschool-app/issues/2572
+                    selectedAnswers: question.multiple
+                      ? selectedTask?.attributes.answers[index]
+                      : selectedTask?.attributes.answers[index][0],
+                  } as SelfEducationQuestionSelectedAnswersDto
+                }
+                questionIndex={index}
+              />
+            ))}
+          </Form>
         </>
       )}
     </AdminPageLayout>

diff --git a/nestjs/src/auto-test/dto/auto-test-task.dto.ts b/nestjs/src/auto-test/dto/auto-test-task.dto.ts
@@ -4,6 +4,48 @@ import { uniqBy } from 'lodash';
 import { IdNameDto } from 'src/core/dto';
 import { UsedCourseDto } from 'src/courses/dto/used-course.dto';
 
+class QuestionDto {
+  @ApiProperty()
+  question: string;
+
+  @ApiProperty()
+  multiple: boolean;
+
+  @ApiProperty({ type: [String] })
+  answers: string[];
+
+  @ApiProperty({ required: false })
+  questionImage?: string;
+
+  @ApiProperty({ required: false })
+  answersType?: string;
+}
+
+class PublicAttributesDto {
+  @ApiProperty()
+  maxAttemptsNumber: number;
+
+  @ApiProperty()
+  numberOfQuestions: number;
+
+  @ApiProperty()
+  strictAttemptsMode: boolean;
+
+  @ApiProperty()
+  tresholdPercentage: number;
+
+  @ApiProperty({ type: [QuestionDto] })
+  questions: QuestionDto[];
+}
+
+class AutoTestAttributesDto {
+  @ApiProperty({ type: PublicAttributesDto })
+  public: PublicAttributesDto;
+
+  @ApiProperty({ type: 'array', items: { type: 'array', items: { type: 'number' } } })
+  answers: number[][];
+}
+
 export class AutoTestTaskDto {
   constructor(task: Task) {
     this.id = task.id;
@@ -30,7 +72,7 @@ export class AutoTestTaskDto {
     this.githubPrRequired = task.githubPrRequired;
     this.tags = task.tags;
     this.skills = task.skills;
-    this.attributes = task.attributes;
+    this.attributes = task.attributes as AutoTestAttributesDto;
     this.createdDate = task.createdDate;
     this.updatedDate = task.updatedDate;
   }
@@ -74,8 +116,8 @@ export class AutoTestTaskDto {
   @ApiProperty()
   public skills: string[];
 
-  @ApiProperty()
-  public attributes: Record<string, any>;
+  @ApiProperty({ type: AutoTestAttributesDto })
+  public attributes: AutoTestAttributesDto;
 
   @ApiProperty({ type: [UsedCourseDto] })
   public courses: UsedCourseDto[];

diff --git a/nestjs/src/courses/task-verifications/dto/self-education.dto.ts b/nestjs/src/courses/task-verifications/dto/self-education.dto.ts
@@ -1,4 +1,4 @@
-import { ApiProperty } from '@nestjs/swagger';
+import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
 
 export class SelfEducationQuestionDto {
   constructor(question: SelfEducationQuestionDto) {
@@ -18,10 +18,10 @@ export class SelfEducationQuestionDto {
   @ApiProperty()
   multiple: boolean;
 
-  @ApiProperty()
+  @ApiPropertyOptional()
   questionImage?: string;
 
-  @ApiProperty()
+  @ApiPropertyOptional()
   answersType?: 'image';
 }
 

diff --git a/nestjs/src/spec.json b/nestjs/src/spec.json
@@ -4106,7 +4106,7 @@
           "answersType": { "type": "string" },
           "selectedAnswers": { "type": "array", "items": { "type": "number" } }
         },
-        "required": ["answers", "question", "multiple", "questionImage", "answersType", "selectedAnswers"]
+        "required": ["answers", "question", "multiple", "selectedAnswers"]
       },
       "TaskVerificationAttemptDto": {
         "type": "object",
@@ -5357,6 +5357,36 @@
           "thresholdPercentage"
         ]
       },
+      "QuestionDto": {
+        "type": "object",
+        "properties": {
+          "question": { "type": "string" },
+          "multiple": { "type": "boolean" },
+          "answers": { "type": "array", "items": { "type": "string" } },
+          "questionImage": { "type": "string" },
+          "answersType": { "type": "string" }
+        },
+        "required": ["question", "multiple", "answers"]
+      },
+      "PublicAttributesDto": {
+        "type": "object",
+        "properties": {
+          "maxAttemptsNumber": { "type": "number" },
+          "numberOfQuestions": { "type": "number" },
+          "strictAttemptsMode": { "type": "boolean" },
+          "tresholdPercentage": { "type": "number" },
+          "questions": { "type": "array", "items": { "$ref": "#/components/schemas/QuestionDto" } }
+        },
+        "required": ["maxAttemptsNumber", "numberOfQuestions", "strictAttemptsMode", "tresholdPercentage", "questions"]
+      },
+      "AutoTestAttributesDto": {
+        "type": "object",
+        "properties": {
+          "public": { "$ref": "#/components/schemas/PublicAttributesDto" },
+          "answers": { "type": "array", "items": { "type": "array", "items": { "type": "number" } } }
+        },
+        "required": ["public", "answers"]
+      },
       "AutoTestTaskDto": {
         "type": "object",
         "properties": {
@@ -5390,7 +5420,7 @@
           "updatedDate": { "type": "string" },
           "tags": { "type": "array", "items": { "type": "string" } },
           "skills": { "type": "array", "items": { "type": "string" } },
-          "attributes": { "type": "object" },
+          "attributes": { "$ref": "#/components/schemas/AutoTestAttributesDto" },
           "courses": { "type": "array", "items": { "$ref": "#/components/schemas/UsedCourseDto" } }
         },
         "required": [