DTT (Staging > Test) [robo-dtt]

apps/src/lab2/views/components/Instructions.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useContext, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useState} from 'react';
 import classNames from 'classnames';
 import EnhancedSafeMarkdown from '@cdo/apps/templates/EnhancedSafeMarkdown';
 import moduleStyles from './instructions.module.scss';
@@ -8,7 +8,8 @@ import {
   levelCount,
   currentLevelIndex,
 } from '@cdo/apps/code-studio/progressReduxSelectors';
-import {useAppDispatch} from '@cdo/apps/util/reduxHooks';
+import {useAppDispatch, useAppSelector} from '@cdo/apps/util/reduxHooks';
+import {Heading6} from '@cdo/apps/componentLibrary/typography';
 import {LabState} from '../../lab2Redux';
 import {ProjectLevelData} from '../../types';
 import {ThemeContext} from '../ThemeWrapper';
@@ -63,11 +64,17 @@ const Instructions: React.FunctionComponent<InstructionsProps> = ({
     (state: {lab: LabState}) => state.lab.validationState
   );
 
-  // If there are no validation conditions, we can show the next button so long as
+  // If there are no validation conditions, we can show the continue button so long as
   // there is another level. If validation is present, also check that conditions are satisfied.
-  const showNextButton =
+  const showContinueButton =
     (!hasConditions || satisfied) && levelIndex + 1 < currentLevelCount;
 
+  // If there are no validation conditions, we can show the finish button so long as
+  // this is the last level in the progression. If validation is present, also
+  // check that conditions are satisfied.
+  const showFinishButton =
+    (!hasConditions || satisfied) && levelIndex + 1 === currentLevelCount;
+
   const dispatch = useAppDispatch();
 
   const {theme} = useContext(ThemeContext);
@@ -89,7 +96,9 @@ const Instructions: React.FunctionComponent<InstructionsProps> = ({
       text={instructionsText}
       message={message || undefined}
       messageIndex={index}
-      showNextButton={showNextButton}
+      showContinueButton={showContinueButton}
+      showFinishButton={showFinishButton}
+      beforeFinish={beforeNextLevel}
       onNextPanel={onNextPanel}
       theme={theme}
       {...{baseUrl, layout, imagePopOutDirection, handleInstructionsTextClick}}
@@ -106,8 +115,12 @@ interface InstructionsPanelProps {
   messageIndex?: number;
   /** Optional image URL to display. */
   imageUrl?: string;
-  /** If the next button should be shown. */
-  showNextButton?: boolean;
+  /** If the continue button should be shown. */
+  showContinueButton?: boolean;
+  /** If the finish button should be shown. */
+  showFinishButton?: boolean;
+  /** Additional callback to fire before finishing the level. */
+  beforeFinish?: () => void;
   /** Callback to call when clicking the next button. */
   onNextPanel?: () => void;
   /** If the instructions panel should be rendered vertically or horizontally. Defaults to vertical. */
@@ -134,22 +147,44 @@ const InstructionsPanel: React.FunctionComponent<InstructionsPanelProps> = ({
   message,
   messageIndex,
   imageUrl,
-  showNextButton,
+  showContinueButton,
+  showFinishButton,
+  beforeFinish,
   onNextPanel,
   layout = 'vertical',
   imagePopOutDirection = 'right',
   theme = 'dark',
   handleInstructionsTextClick,
 }) => {
   const [showBigImage, setShowBigImage] = useState(false);
+  const [isFinished, setIsFinished] = useState(false);
 
   const imageClicked = () => {
     setShowBigImage(!showBigImage);
   };
 
   const vertical = layout === 'vertical';
 
-  const canShowNextButton = showNextButton && onNextPanel;
+  const canShowContinueButton = showContinueButton && onNextPanel;
+
+  const canShowFinishButton = showFinishButton;
+
+  const currentLevelId = useAppSelector(state => state.progress.currentLevelId);
+
+  const onFinish = useCallback(() => {
+    if (beforeFinish) {
+      beforeFinish();
+    }
+    setIsFinished(true);
+  }, [beforeFinish]);
+
+  // When the level changes, the Finish button is active again if user returns to last level.
+  useEffect(() => {
+    setIsFinished(false);
+  }, [currentLevelId]);
+
+  const finalMessage =
+    'You finished this lesson! Check in with your teacher for the next activity';
 
   return (
     <div
@@ -216,7 +251,7 @@ const InstructionsPanel: React.FunctionComponent<InstructionsPanelProps> = ({
             />
           </div>
         )}
-        {(message || canShowNextButton) && (
+        {(message || canShowContinueButton || canShowFinishButton) && (
           <div
             key={messageIndex + ' - ' + message}
             id="instructions-feedback"
@@ -233,16 +268,30 @@ const InstructionsPanel: React.FunctionComponent<InstructionsPanelProps> = ({
                   handleInstructionsTextClick={handleInstructionsTextClick}
                 />
               )}
-              {canShowNextButton && (
+              {canShowContinueButton && (
                 <button
-                  id="instructions-feedback-button"
+                  id="instructions-continue-button"
                   type="button"
                   onClick={onNextPanel}
-                  className={moduleStyles.buttonNext}
+                  className={moduleStyles.buttonInstruction}
                 >
                   {commonI18n.continue()}
                 </button>
               )}
+              {canShowFinishButton && (
+                <>
+                  <button
+                    id="instructions-finish-button"
+                    type="button"
+                    onClick={onFinish}
+                    disabled={isFinished}
+                    className={moduleStyles.buttonInstruction}
+                  >
+                    {commonI18n.finish()}
+                  </button>
+                  {isFinished && <Heading6>{finalMessage}</Heading6>}
+                </>
+              )}
             </div>
           </div>
         )}

apps/src/lab2/views/components/instructions.module.scss

@@ -145,7 +145,7 @@
   border: dashed $neutral_white 2px;
 }
 
-.buttonNext {
+.buttonInstruction {
   font-size: 14px;
   background-color: $brand_secondary_default;
   border-color: $brand_secondary_default;
@@ -155,6 +155,12 @@
   border-radius: 4px;
   height: 38px;
   margin: 0 0 10px 0;
+  &:disabled, &[aria-disabled="true"] {
+    cursor: not-allowed;
+    border-color: $light_gray_200;
+    background-color: $light_gray_200;
+    color: $light_white;
+  }
 }
 
 .markdownText {

dashboard/test/ui/features/teacher_tools/rubrics/ai_evaluate_student_code.feature

@@ -1,3 +1,4 @@
+@skip
 # AI evaluation is stubbed out in UI tests via the /api/test/ai_proxy/assessment route.
 @no_firefox
 @no_mobile

pegasus/sites.v3/code.org/views/carousel_teach_page.haml

@@ -15,7 +15,7 @@
 - slides_button_label = [hoc_s(:call_to_action_explore_ai_curricula), hoc_s(:call_to_action_explore_csc), hoc_s(:call_to_action_explore_csd), hoc_s(:call_to_action_explore_hoc_short), hoc_s(:call_to_action_explore_maker), hoc_s(:call_to_action_explore_csa_short), hoc_s(:call_to_action_explore_csf), hoc_s(:call_to_action_explore_csp)]
 
 .carousel-wrapper
-  %swiper-container.three-col{navigation: "true", "navigation-next-el": ".swiper-nav-next", "navigation-prev-el": ".swiper-nav-prev", init: "false"}
+  %swiper-container.three-col{navigation: "true", "navigation-next-el": ".swiper-nav-next", "navigation-prev-el": ".swiper-nav-prev", "auto-height": "false", init: "false"}
     - slides_index.times do |index|
       %swiper-slide
         .action-block.action-block--one-col.flex-space-between