Set default entry to highlight speedgrader

fixes EGG-92
flag=discussion_checkpoints
flag=react_speedgrader

Test Plan:
0. Have a graded checkpoints discussion.
1. Open it in speedgrader:
- without url param entry_id and it will highlight an entry.
2. If entry_id is set that will be chosen over the default entry.
3. If you change to a new student it will default to an entry
(regardless if the entry_id is incorrect).

Change-Id: Icd4bd27b66f1aa777a292e0b1d23ed7c00f0af4e
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/360329
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
QA-Review: Caleb Guanzon <cguanzon@instructure.com>
Reviewed-by: Jason Gillett <jason.gillett@instructure.com>
Product-Review: Sam Garza <sam.garza@instructure.com>

spec/selenium/assignments/speed_grader/graded_discussion_spec.rb

@@ -213,5 +213,16 @@ describe "Screenreader Gradebook grading" do
         end
       end
     end
+
+    it "sets default highlight entry if not set" do
+      get "/courses/#{@course.id}/gradebook/speed_grader?assignment_id=#{@checkpointed_assignment.id}&student_id=#{@student2.id}"
+      in_frame("speedgrader_iframe") do
+        in_frame("discussion_preview_iframe") do
+          wait_for(method: nil, timeout: 2) { f("div[data-testid='isHighlighted']").displayed? }
+          expect(f("div[data-testid='isHighlighted']").text).to include(@student2.name)
+          expect(f("div[data-testid='isHighlighted']").text).to include("reply to entry i0")
+        end
+      end
+    end
   end
 end

ui/features/discussion_topics_post/react/components/Highlight/Highlight.jsx

@@ -30,6 +30,9 @@ export function Highlight({...props}) {
   const {focusSelector, setFocusSelector} = useContext(DiscussionManagerUtilityContext)
 
   const triggerFocus = element => {
+    if (!element) {
+      return
+    }
     let eventType = "onfocusin" in element ? "focusin" : "focus";
     let bubbles = "onfocusin" in element;
     let event;

ui/features/discussion_topics_post/react/hooks/useSpeedGrader.js

@@ -140,6 +140,18 @@ export default function useSpeedGrader({
     }
   }, [highlightEntryId, onMessage])
 
+  // Set highlight default entry; we already set this in iframe for new student. only trigger on new student.
+  useEffect(() => {
+    const studentEntries =
+      studentTopicQuery?.data?.legacyNode?.discussionEntriesConnection?.nodes || []
+    const studentEntriesIds = studentEntries.map(entry => entry._id)
+    const currentEntryIndex = studentEntriesIds.indexOf(highlightEntryId)
+    if (studentEntries[currentEntryIndex]) {
+      navigateToEntry(studentEntries[currentEntryIndex])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStudentId, studentTopicQuery?.data?.legacyNode?.discussionEntriesConnection?.nodes])
+
   const handleJumpFocusToSpeedGrader = () => {
     window.top.postMessage(
       {