fix(client): prevent lower jaw breaking on code evaluation (#46154)

* Fix(issue:#46062)

* feat: render based on earliest available lower jaw conditions

* fix: persist challenge completion properly

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>

client/src/templates/Challenges/classic/lower-jaw.tsx

@@ -39,6 +39,8 @@ const LowerJaw = ({
   const { t } = useTranslation();
   const submitButtonRef = React.createRef<HTMLButtonElement>();
   const testFeedbackRef = React.createRef<HTMLDivElement>();
+  const [challengeHasBeenCompleted, setChallengeHasBeenCompleted] =
+    useState(false);
 
   useEffect(() => {
     if (attemptsNumber && attemptsNumber > 0) {
@@ -69,13 +71,21 @@ const LowerJaw = ({
   }, [challengeHasErrors, hint]);
 
   useEffect(() => {
-    if (challengeIsCompleted && submitButtonRef?.current) {
+    if (challengeHasBeenCompleted && submitButtonRef?.current) {
       submitButtonRef.current.focus();
       setTimeout(() => {
         setTestBtnariaHidden(true);
       }, 500);
     }
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [challengeHasBeenCompleted]);
+
+  useEffect(() => {
+    if (!challengeHasBeenCompleted && challengeIsCompleted) {
+      setChallengeHasBeenCompleted(challengeIsCompleted);
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [challengeIsCompleted]);
 
@@ -86,12 +96,22 @@ const LowerJaw = ({
     }
   });
 
+  /*
+    Retun early in lifecycle based on the earliest available conditions to help the editor 
+    calcuate the correct editor gap for the lower jaw.
+
+    For consistency, use the persisted version if the conditions has been met before.
+  */
+  const earliestAvailableCompletion =
+    challengeHasBeenCompleted || challengeIsCompleted;
+  const earliestAvailableHint = hint || previousHint;
+
   const renderTestFeedbackContainer = () => {
     if (attemptsNumber === 0) {
       return '';
     } else if (runningTests) {
       return <span className='sr-only'>{t('aria.running-tests')}</span>;
-    } else if (challengeIsCompleted) {
+    } else if (earliestAvailableCompletion) {
       const submitKeyboardInstructions = isEditorInFocus ? (
         <span className='sr-only'>{t('aria.submit')}</span>
       ) : (
@@ -113,12 +133,10 @@ const LowerJaw = ({
           </div>
         </div>
       );
-
-      // show the hint if the previousHint is not set
-    } else if (hint || previousHint) {
-      const hintDiscription = `<h2 class="hint">${t('learn.hint')}</h2> ${
-        hint || previousHint
-      }`;
+    } else if (earliestAvailableHint) {
+      const hintDiscription = `<h2 class="hint">${t(
+        'learn.hint'
+      )}</h2> ${earliestAvailableHint}`;
       return (
         <>
           <div className='test-status fade-in' aria-hidden={isFeedbackHidden}>
@@ -165,7 +183,7 @@ const LowerJaw = ({
     const isAtteptsLargerThanTest =
       attemptsNumber && testsLength && attemptsNumber >= testsLength;
 
-    if (isAtteptsLargerThanTest && !challengeIsCompleted)
+    if (isAtteptsLargerThanTest && !earliestAvailableCompletion)
       return (
         <div>
           <hr />
@@ -188,7 +206,9 @@ const LowerJaw = ({
       <>
         <button
           id='test-button'
-          className={`btn-block btn ${challengeIsCompleted ? 'sr-only' : ''}`}
+          className={`btn-block btn ${
+            earliestAvailableCompletion ? 'sr-only' : ''
+          }`}
           aria-hidden={testBtnariaHidden}
           onClick={tryToExecuteChallenge}
         >
@@ -197,7 +217,7 @@ const LowerJaw = ({
         <div id='action-buttons-container'>
           <button
             id='submit-button'
-            aria-hidden={!challengeIsCompleted}
+            aria-hidden={!earliestAvailableCompletion}
             className='btn-block btn'
             onClick={tryToSubmitChallenge}
             ref={submitButtonRef}