fix: Survey linear scale questions (#1267)

* fix: Use latest linear scale dto from sam

* chore: Release 12.0.1

* fix: Survey questionText

Author: mariush2

bun.lock

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "12.0.0",
+  "version": "12.0.1",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,7 +52,7 @@
   },
   "devDependencies": {
     "@equinor/eds-icons": "^0.22.0",
-    "@equinor/subsurface-app-management": "5.4.2",
+    "@equinor/subsurface-app-management": "5.4.4",
     "@eslint/js": "^9.22.0",
     "@faker-js/faker": "^9.6.0",
     "@storybook/addon-coverage": "^2.0.0",
@@ -114,7 +114,7 @@
     "@equinor/eds-core-react": "0.44.0",
     "@equinor/eds-data-grid-react": "^0.7.5",
     "@equinor/eds-icons": "*",
-    "@equinor/subsurface-app-management": "^5.4.2",
+    "@equinor/subsurface-app-management": "^5.4.4",
     "@tanstack/react-query": "*",
     "@tanstack/react-router": "*",
     "@tiptap/core": "^3.1.0",

package.json

@@ -126,7 +126,7 @@ export const SurveyDialog: FC = () => {
       <Content>
         <SurveyProgress />
         <Typography variant="body_short_bold">
-          {activeSurvey.questions[activeQuestionIndex].text}
+          {activeSurvey.questions[activeQuestionIndex].questionText}
         </Typography>
         <SurveyQuestion />
       </Content>

src/providers/SurveyProvider/SurveyDialog/SurveyDialog.tsx

@@ -38,11 +38,11 @@ type SurveyLinearScaleQuestionProps =
 
 export const SurveyLinearScaleQuestion: FC<SurveyLinearScaleQuestionProps> = ({
   questionId,
-  linearScaleConfig,
+  linearScaleVm,
   ...rest
 }) => {
   const { currentAnswer, setCurrentAnswer } = useSurvey();
-  const rangeAmount = linearScaleConfig.max - linearScaleConfig.min + 1;
+  const rangeAmount = linearScaleVm.maxValue - linearScaleVm.minValue + 1;
 
   const handleOnAnswer = (numericAnswer: number) => {
     if ('answer' in rest && 'setAnswer' in rest) {
@@ -60,11 +60,11 @@ export const SurveyLinearScaleQuestion: FC<SurveyLinearScaleQuestionProps> = ({
 
   return (
     <Container $rangeAmount={rangeAmount}>
-      <Typography>{linearScaleConfig.minLabel}</Typography>
+      <Typography>{linearScaleVm.minLabel}</Typography>
       {Array.from({ length: rangeAmount }).map((_, index) => (
         <RadioWrapper key={`range-radio-${index}`}>
           <Typography variant="body_short">
-            {linearScaleConfig.min + index}
+            {linearScaleVm.minValue + index}
           </Typography>
           <Radio
             data-testid={`range-radio-${questionId.value}`}
@@ -73,15 +73,15 @@ export const SurveyLinearScaleQuestion: FC<SurveyLinearScaleQuestionProps> = ({
             checked={
               ('answer' in rest ? rest.answer : currentAnswer)
                 ?.numericAnswer ===
-              index + linearScaleConfig.min
+              index + linearScaleVm.minValue
             }
             onClick={() => {
-              handleOnAnswer(linearScaleConfig.min + index);
+              handleOnAnswer(linearScaleVm.minValue + index);
             }}
           />
         </RadioWrapper>
       ))}
-      <Typography>{linearScaleConfig.maxLabel}</Typography>
+      <Typography>{linearScaleVm.maxLabel}</Typography>
     </Container>
   );
 };

src/providers/SurveyProvider/SurveyDialog/SurveyQuestion/SurveyLinearScaleQuestion.tsx

@@ -101,18 +101,15 @@ export const UmuxDialog: FC = () => {
         </InformationalNotice>
         {activeSurvey.questions.map((question, index) => (
           <QuestionWrapper key={question.questionId.value}>
-            <Typography variant="body_short_bold">{question.text}</Typography>
-            {question.linearScaleConfig && (
+            <Typography variant="body_short_bold">
+              {question.questionText}
+            </Typography>
+            {question.linearScaleVm && (
               <SurveyLinearScaleQuestion
                 type={QuestionType.LINEAR_SCALE}
-                text={question.text}
+                questionText={question.questionText}
                 questionId={question.questionId}
-                linearScaleConfig={{
-                  max: question.linearScaleConfig.max,
-                  min: question.linearScaleConfig.min,
-                  minLabel: question.linearScaleConfig.minLabel,
-                  maxLabel: question.linearScaleConfig.maxLabel,
-                }}
+                linearScaleVm={question.linearScaleVm}
                 answer={answers[index]}
                 setAnswer={(answer) => {
                   setAnswers((prev) => {

src/providers/SurveyProvider/SurveyDialog/UmuxDialog.tsx

@@ -80,12 +80,12 @@ const standardSurvey: UserSurveyVm = {
       },
       type: QuestionType.TEXT,
       order: 1,
-      text: 'This is the question text',
+      questionText: 'This is the question text',
     },
     {
       questionId: { value: 'choiceQuestion' },
       type: QuestionType.CHOICE,
-      text: 'Choose one please',
+      questionText: 'Choose one please',
       order: 2,
       options: [
         {
@@ -110,11 +110,11 @@ const standardSurvey: UserSurveyVm = {
       questionId: { value: 'linearScaleQuestion' },
       type: QuestionType.LINEAR_SCALE,
       order: 3,
-      text: 'Is this useful?',
-      linearScaleConfig: {
-        min: 1,
+      questionText: 'Is this useful?',
+      linearScaleVm: {
+        minValue: 1,
         minLabel: 'Strongly disagree',
-        max: 7,
+        maxValue: 7,
         maxLabel: 'Strongly agree',
       },
     },
@@ -157,7 +157,7 @@ export const TestStandard: Story = {
       ).toBeInTheDocument();
 
       await expect(
-        await canvas.findByText(standardSurvey.questions[0].text)
+        await canvas.findByText(standardSurvey.questions[0].questionText)
       ).toBeInTheDocument();
 
       await expect(
@@ -200,9 +200,13 @@ export const TestStandard: Story = {
       'Go back, verify that the text is still there, and click next',
       async () => {
         await expect(
-          await canvas.findByText(standardSurvey.questions[1].text, undefined, {
-            timeout: 1500,
-          })
+          await canvas.findByText(
+            standardSurvey.questions[1].questionText,
+            undefined,
+            {
+              timeout: 1500,
+            }
+          )
         ).toBeInTheDocument();
 
         await userEvent.click(canvas.getByRole('button', { name: /back/i }));
@@ -218,9 +222,13 @@ export const TestStandard: Story = {
 
     await step('Checkbox question and click next', async () => {
       await expect(
-        await canvas.findByText(standardSurvey.questions[1].text, undefined, {
-          timeout: 1500,
-        })
+        await canvas.findByText(
+          standardSurvey.questions[1].questionText,
+          undefined,
+          {
+            timeout: 1500,
+          }
+        )
       ).toBeInTheDocument();
 
       for (const option of standardSurvey.questions[1].options ?? []) {
@@ -259,17 +267,13 @@ export const TestStandard: Story = {
 
     await step('Linear scale question and complete', async () => {
       await expect(
-        await canvas.findByText(standardSurvey.questions[2].text)
+        await canvas.findByText(standardSurvey.questions[2].questionText)
       ).toBeInTheDocument();
       await expect(
-        canvas.getByText(
-          standardSurvey.questions[2]!.linearScaleConfig!.minLabel
-        )
+        canvas.getByText(standardSurvey.questions[2]!.linearScaleVm!.minLabel)
       ).toBeInTheDocument();
       await expect(
-        canvas.getByText(
-          standardSurvey.questions[2]!.linearScaleConfig!.maxLabel
-        )
+        canvas.getByText(standardSurvey.questions[2]!.linearScaleVm!.maxLabel)
       ).toBeInTheDocument();
 
       await userEvent.click(canvas.getAllByRole('radio')[0]);
@@ -299,29 +303,29 @@ const umuxSurvey: UserSurveyVm = {
   questions: [
     {
       type: QuestionType.LINEAR_SCALE,
-      text: 'Acquire is easy to use.',
+      questionText: 'Acquire is easy to use.',
       questionId: {
         value: 'someId',
       },
       order: 1,
-      linearScaleConfig: {
-        min: 1,
+      linearScaleVm: {
+        minValue: 1,
         minLabel: 'Strongly disagree',
-        max: 7,
+        maxValue: 7,
         maxLabel: 'Strongly agree',
       },
     },
     {
       type: QuestionType.LINEAR_SCALE,
-      text: 'Acquire meets my needs.',
+      questionText: 'Acquire meets my needs.',
       questionId: {
         value: 'someOtherId',
       },
       order: 2,
-      linearScaleConfig: {
-        min: 1,
+      linearScaleVm: {
+        minValue: 1,
         minLabel: 'Strongly disagree',
-        max: 7,
+        maxValue: 7,
         maxLabel: 'Strongly agree',
       },
     },

src/providers/SurveyProvider/SurveyProvider.stories.tsx

@@ -1,6 +1,6 @@
 import { QuestionType, QuestionVm } from '@equinor/subsurface-app-management';
 
-type QuestionBase = Pick<QuestionVm, 'questionId' | 'text'>;
+type QuestionBase = Pick<QuestionVm, 'questionId' | 'questionText'>;
 
 export type FreeTextQuestion = QuestionBase & {
   type: QuestionType.TEXT;
@@ -14,5 +14,5 @@ export type ChoiceQuestion = QuestionBase & {
 
 export type LinearScaleQuestion = QuestionBase & {
   type: QuestionType.LINEAR_SCALE;
-  linearScaleConfig: NonNullable<QuestionVm['linearScaleConfig']>;
+  linearScaleVm: NonNullable<QuestionVm['linearScaleVm']>;
 };