show last name first in enhanced srgb

flag=enhanced_individual_gradebook
closes EVAL-3356

test plan:
- go to enhanced srgb
- verify that the names are last name, first
- verify that the names are sorted by last name

Change-Id: If9fd0a233d97cc2c5ee3a8de6fb849fde3cf7b03
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/324446
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Spencer Olson <solson@instructure.com>
Reviewed-by: Samuel Lee <samuel.lee@instructure.com>
QA-Review: Samuel Lee <samuel.lee@instructure.com>
Product-Review: Jody Sailor

spec/selenium/grades/enhanced_srgb/srgb_spec.rb

@@ -86,20 +86,19 @@ describe "Screenreader Gradebook" do
   end
 
   it "can select a student" do
-    skip "unskip w/ EVAL-3356 BUG student select showing first name first instead of last name"
     simple_setup
     simple_grade
     EnhancedSRGB.visit(@course.id)
     student_dropdown_options = ["No Student Selected", @students[0].sortable_name, @students[1].sortable_name]
     expect(EnhancedSRGB.student_dropdown_options).to eq(student_dropdown_options)
 
-    click_option '[data-testid="content-selection-student-select"]', @students[0].sortable_name
-    assignment_points = ["(#{@grade_array[0]} / 20)", "(#{@grade_array[2]} / 20)"]
-    expect(ff("#student_information .assignment-subtotal-grade .points").map(&:text)).to eq(assignment_points)
+    click_option(EnhancedSRGB.student_dropdown, @students[0].sortable_name)
+    assignment_points = ["75% (#{@grade_array[0]} / 20)", "55.0% (#{@grade_array[2]} / 20)"]
+    expect(EnhancedSRGB.assign_subtotal_grade.map(&:text)).to eq(assignment_points)
 
-    click_option '[data-testid="content-selection-student-select"]', @students[1].sortable_name
-    assignment_points = ["(#{@grade_array[1]} / 20)", "(#{@grade_array[3]} / 20)"]
-    expect(ff("#student_information .assignment-subtotal-grade .points").map(&:text)).to eq(assignment_points)
+    click_option(EnhancedSRGB.student_dropdown, @students[1].sortable_name)
+    assignment_points = ["60% (#{@grade_array[1]} / 20)", "15% (#{@grade_array[3]} / 20)"]
+    expect(EnhancedSRGB.assign_subtotal_grade.map(&:text)).to eq(assignment_points)
   end
 
   it "can select a student using buttons" do
@@ -160,7 +159,7 @@ describe "Screenreader Gradebook" do
   it "sets default grade" do
     simple_setup(2)
     EnhancedSRGB.visit(@course.id)
-    click_option(EnhancedSRGB.student_dropdown, @students[0].name) # fix w/ EVAL-3356 BUG student select showing first name first instead of last name
+    click_option(EnhancedSRGB.student_dropdown, @students[0].sortable_name)
     EnhancedSRGB.select_assignment(@assign1)
 
     EnhancedSRGB.default_grade.click

spec/selenium/grades/enhanced_srgb/srgb_student_information_spec.rb

@@ -53,7 +53,7 @@ describe "Screenreader Gradebook Student Information" do
     it "displays student's grades" do
       EnhancedSRGB.select_student(student)
       expect(EnhancedSRGB.final_grade.text).to eq("30% (3 / 10 points)")
-      expect(EnhancedSRGB.assign_subtotal_grade.text).to eq("30% (3 / 10)")
+      expect(EnhancedSRGB.assign_subtotal_grade.first.text).to eq("30% (3 / 10)")
       expect_new_page_load { EnhancedSRGB.switch_to_default_gradebook }
       expect(Gradebook::Cells.get_total_grade(student)).to eq("30%")
     end

spec/selenium/grades/pages/enhanced_srgb_page.rb

@@ -145,7 +145,7 @@ class EnhancedSRGB
     end
 
     def assign_subtotal_grade
-      f('td[data-testid="subtotal-grade"]')
+      ff('td[data-testid="subtotal-grade"]')
     end
 
     def secondary_id_label
@@ -301,7 +301,7 @@ class EnhancedSRGB
     end
 
     def select_student(student)
-      click_option(student_dropdown, student.name) # Change with EVAL-3356
+      click_option(student_dropdown, student.sortable_name)
     end
 
     def student_dropdown_options

ui/features/enhanced_individual_gradebook/react/components/ContentSelection/__tests__/ContentSelection.test.tsx

@@ -15,11 +15,24 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react'
-// import {act, render, within} from '@testing-library/react'
+import {MockedProvider} from '@apollo/react-testing'
+import {render} from '@testing-library/react'
+import ContentSelection from '..'
+import {defaultSortableStudents, makeContentSelectionProps} from './fixtures'
 
-describe('Content Selection Tests', () => {
-  it('runs', () => {})
+describe('Content Selection', () => {
+  describe('student dropdown', () => {
+    it('displays the sortableName in the student dropdown', () => {
+      const props = makeContentSelectionProps({students: defaultSortableStudents})
+      const {getByTestId} = render(
+        <MockedProvider>
+          <ContentSelection {...props} />
+        </MockedProvider>
+      )
+      const studentDropdown = getByTestId('content-selection-student-select')
+      expect(studentDropdown).toHaveTextContent('Last, First')
+      expect(studentDropdown).toHaveTextContent('Last2, First2')
+    })
+  })
 })

ui/features/enhanced_individual_gradebook/react/components/ContentSelection/__tests__/fixtures.ts

@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2023 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+import {ContentSelectionComponentProps} from '..'
+import {defaultGradebookOptions} from '../../__tests__/fixtures'
+
+export const defaultContentSelectionProps: ContentSelectionComponentProps = {
+  courseId: '1',
+  assignments: [],
+  selectedStudentId: '1',
+  selectedAssignmentId: null,
+  gradebookOptions: defaultGradebookOptions,
+  onStudentChange: () => {},
+  onAssignmentChange: () => {},
+}
+
+export const defaultSortableStudents = [
+  {
+    id: '1',
+    name: 'First Last',
+    sortableName: 'Last, First',
+    enrollments: {
+      section: {
+        name: '',
+        id: '',
+      },
+    },
+    email: '',
+    loginId: '',
+    sections: [],
+    state: 'active',
+  },
+  {
+    id: '2',
+    name: 'First2 Last2',
+    sortableName: 'Last2, First2',
+    enrollments: {
+      section: {
+        name: '',
+        id: '',
+      },
+    },
+    email: '',
+    loginId: '',
+    sections: [],
+    state: 'active',
+  },
+]
+
+export function makeContentSelectionProps(
+  props: Partial<ContentSelectionComponentProps> = {}
+): ContentSelectionComponentProps {
+  return {...defaultContentSelectionProps, ...props}
+}

ui/features/enhanced_individual_gradebook/react/components/ContentSelection/index.tsx

@@ -31,7 +31,7 @@ import {studentDisplayName} from '../../../utils/gradebookUtils'
 
 const I18n = useI18nScope('enhanced_individual_gradebook')
 
-type Props = {
+export type ContentSelectionComponentProps = {
   courseId: string
   assignments?: SortableAssignment[]
   students?: SortableStudent[]
@@ -51,7 +51,7 @@ export default function ContentSelection({
   gradebookOptions,
   onAssignmentChange,
   onStudentChange,
-}: Props) {
+}: ContentSelectionComponentProps) {
   const [selectedStudentIndex, setSelectedStudentIndex] = useState<number>(0)
   const [selectedAssignmentIndex, setSelectedAssignmentIndex] = useState<number>(0)
   const {studentSubmissions} = useCurrentStudentInfo(courseId, selectedStudentId)
@@ -168,7 +168,9 @@ export default function ContentSelection({
           >
             {studentDropdownOptions.map(option => (
               <option key={option.id} value={option.id}>
-                {option.data ? studentDisplayName(option.data, hideStudentNames) : option.name}
+                {option.data
+                  ? studentDisplayName(option.data, hideStudentNames)
+                  : option.sortableName}
               </option>
             ))}
           </select>

ui/features/enhanced_individual_gradebook/react/hooks/useContentDropdownOptions.tsx

@@ -32,6 +32,7 @@ const I18n = useI18nScope('enhanced_individual_gradebook_content_selection')
 type DropDownOption<T> = {
   id: string
   name: string
+  sortableName: string
   data?: T
 }
 
@@ -41,8 +42,16 @@ type AssignmentDropdownOption = DropDownOption<SortableAssignment>[]
 const DEFAULT_STUDENT_DROPDOWN_TEXT = I18n.t('No Student Selected')
 const DEFAULT_ASSIGNMENT_DROPDOWN_TEXT = I18n.t('No Assignment Selected')
 
-const defaultStudentDropdownOptions = {id: '-1', name: DEFAULT_STUDENT_DROPDOWN_TEXT}
-const defaultAssignmentDropdownOptions = {id: '-1', name: DEFAULT_ASSIGNMENT_DROPDOWN_TEXT}
+const defaultStudentDropdownOptions = {
+  id: '-1',
+  name: DEFAULT_STUDENT_DROPDOWN_TEXT,
+  sortableName: DEFAULT_STUDENT_DROPDOWN_TEXT,
+}
+const defaultAssignmentDropdownOptions = {
+  id: '-1',
+  name: DEFAULT_ASSIGNMENT_DROPDOWN_TEXT,
+  sortableName: DEFAULT_ASSIGNMENT_DROPDOWN_TEXT,
+}
 
 const defaultAllowedEnrollmentStates = ['active', 'invited']
 
@@ -80,7 +89,8 @@ export const useUserDropdownOptions = ({
       defaultStudentDropdownOptions,
       ...filteredStudents.map(student => ({
         id: student.id,
-        name: student.sortableName,
+        name: student.name,
+        sortableName: student.sortableName,
         data: student,
       })),
     ]
@@ -135,6 +145,7 @@ export const useAssignmentDropdownOptions = ({
         id: assignment.id,
         name: assignment.name,
         data: assignment,
+        sortableName: assignment.sortableName,
       })),
     ]
     setAssignmentDropdownOptions(assignmentOptions)

ui/features/enhanced_individual_gradebook/types/gradebook.d.ts

@@ -130,6 +130,7 @@ export type SortableStudent = UserConnection & {
   sections: string[]
   hiddenName?: string
   state: string
+  sortableName: string
 }
 
 export enum ApiCallStatus {

ui/features/enhanced_individual_gradebook/types/queries.d.ts

@@ -149,6 +149,7 @@ export type GradebookStudentDetails = {
   loginId: string
   name: string
   hiddenName: string
+  sortableName: string
 }
 
 export type GradebookUserSubmissionDetails = {

ui/features/enhanced_individual_gradebook/utils/gradebookUtils.ts

@@ -156,7 +156,7 @@ export function studentDisplayName(
   student: SortableStudent | GradebookStudentDetails,
   hideStudentNames: boolean
 ): string {
-  return hideStudentNames ? student.hiddenName ?? I18n.t('Student') : student.name
+  return hideStudentNames ? student.hiddenName ?? I18n.t('Student') : student.sortableName
 }
 
 export function sortAssignments(