@instructure/outcomes-ui 4.0.0 → 4.1.0

package/es/translated/es/components/Gradebook/popovers/StudentPopover/index.stories.tsx

@@ -0,0 +1,236 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+import { within, userEvent } from '@storybook/testing-library'
+import type { Meta, StoryObj } from '@storybook/react'
+import type { LmgbUserDetails, Student, StudentMasteryScores } from '@/types/gradebook'
+import { View } from '@instructure/ui-view'
+import { Flex } from '@instructure/ui-flex'
+import { Text } from '@instructure/ui-text'
+import { Button } from '@instructure/ui-buttons'
+import { StoryWrapper } from '@/components/Gradebook/storybook/decorators'
+import {
+  createStudent,
+  mockStudent,
+  mockStudentLongName,
+  mockMasteryScores,
+  highMasteryScores,
+  lowMasteryScores,
+  unassessedMasteryScores,
+  mockUserDetailsDefault,
+  mockUserDetailsSingleSection,
+  mockUserDetailsManySections,
+  mockUserDetailsLongCourseName,
+  mockUserDetailsNoSections,
+} from '@/components/Gradebook/__mocks__/mockData'
+import { StudentPopover } from '.'
+import type { StudentPopoverProps } from '.'
+
+// Storybook's args type (Partial<Props>) doesn't handle discriminated
+// unions in StudentPopoverProps so define a flatten version of it
+type StoryArgs = {
+  studentName: string
+  student?: Student
+  userDetails?: LmgbUserDetails
+  masteryScores?: StudentMasteryScores
+  studentGradesUrl?: string
+  headerOverride?: React.ReactNode
+  masteryScoresOverride?: React.ReactNode
+  actionsOverride?: React.ReactNode
+  isLoading?: boolean
+  error?: string | null
+  onShowingContentChange?: (isShowing: boolean) => void
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'Gradebook/StudentPopover',
+  component: StudentPopover as React.ComponentType<StoryArgs>,
+  args: {
+    onShowingContentChange: action('onShowingContentChange'),
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <StoryWrapper>
+          <Story />
+        </StoryWrapper>
+      )
+    }
+  ],
+}
+
+export default meta
+type Story = StoryObj<StoryArgs>
+
+const createStoryArgs = (
+  student: Student,
+  masteryScores = mockMasteryScores,
+): StoryArgs => ({
+  student,
+  studentName: student.display_name,
+  userDetails: mockUserDetailsDefault,
+  masteryScores,
+  studentGradesUrl: `/courses/123/grades/${student.id}`,
+})
+
+const openPopover = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  const canvas = within(canvasElement)
+  const trigger = await canvas.findByTestId('student-cell-link')
+  await userEvent.click(trigger)
+}
+
+export const Default: Story = {
+  args: createStoryArgs(mockStudent),
+  play: openPopover,
+}
+
+export const HighPerformingStudent: Story = {
+  args: createStoryArgs(mockStudent, highMasteryScores),
+  play: openPopover,
+}
+
+export const LowPerformingStudent: Story = {
+  args: createStoryArgs(mockStudent, lowMasteryScores),
+  play: openPopover,
+}
+
+export const NoScores: Story = {
+  args: createStoryArgs(mockStudent, unassessedMasteryScores),
+  play: openPopover,
+}
+
+export const LongStudentName: Story = {
+  args: createStoryArgs(mockStudentLongName),
+  play: openPopover,
+}
+
+export const LongCourseName: Story = {
+  args: {
+    ...createStoryArgs(createStudent('4', 'Oliver', 'Brown')),
+    userDetails: mockUserDetailsLongCourseName,
+  },
+  play: openPopover,
+}
+
+export const ManySections: Story = {
+  args: {
+    ...createStoryArgs(createStudent('3', 'Emma', 'Wilson')),
+    userDetails: mockUserDetailsManySections,
+  },
+  play: openPopover,
+}
+
+export const NoSections: Story = {
+  args: {
+    ...createStoryArgs(createStudent('6', 'Liam', 'Miller')),
+    userDetails: mockUserDetailsNoSections,
+  },
+  play: openPopover,
+}
+
+export const SingleSection: Story = {
+  args: {
+    ...createStoryArgs(createStudent('2', 'Jane', 'Doe')),
+    userDetails: mockUserDetailsSingleSection,
+  },
+  play: openPopover,
+}
+
+export const CustomHeader: Story = {
+  args: createStoryArgs(mockStudent),
+  render: (args: StoryArgs) => (
+    <StudentPopover
+      {...args as StudentPopoverProps}
+      student={undefined}
+      studentName="John Doe"
+      userDetails={undefined}
+      headerOverride={
+        <Flex padding="0 0 medium 0">
+          <Flex.Item>
+            <Text>Custom Header for {args.studentName}</Text>
+          </Flex.Item>
+        </Flex>
+      }
+    />
+  ),
+  play: openPopover,
+}
+
+export const CustomMasteryScores: Story = {
+  args: createStoryArgs(mockStudent),
+  render: (args: StoryArgs) => (
+    <StudentPopover
+      {...args as StudentPopoverProps}
+      masteryScores={undefined}
+      masteryScoresOverride={
+        <View display="block" margin="small">
+          <View as="div" padding="x-small 0">
+            <Text>Custom Mastery Scores</Text>
+          </View>
+
+          <View as="div" padding="x-small 0">
+            <Text>Average: {args.masteryScores?.averageText || 'N/A'}</Text>
+          </View>
+
+          <View as="div" padding="x-small 0">
+            <Text>Total outcomes: 5</Text>
+          </View>
+        </View>
+      }
+    />
+  ),
+  play: openPopover,
+}
+
+export const CustomActions: Story = {
+  args: createStoryArgs(mockStudent),
+  render: (args: StoryArgs) => (
+    <StudentPopover
+      {...args as StudentPopoverProps}
+      studentGradesUrl={undefined}
+      actionsOverride={
+        <Flex direction="row" gap="small">
+          <Button>Custom Action for Student</Button>
+          <Button>Another Action</Button>
+        </Flex>
+      }
+    />
+  ),
+  play: openPopover,
+}
+
+export const Loading: Story = {
+  args: {
+    studentName: mockStudent.display_name,
+    studentGradesUrl: `/courses/123/grades/${mockStudent.id}`,
+    isLoading: true,
+  },
+  play: openPopover,
+}
+
+export const ErrorMessage: Story = {
+  args: {
+    studentName: mockStudent.display_name,
+    studentGradesUrl: `/courses/123/grades/${mockStudent.id}`,
+    error: 'Failed to load student details. Please try again.',
+  },
+  play: openPopover,
+}
+
+export const CustomMasteryLevelConfig: Story = {
+  args: createStoryArgs(mockStudent),
+  decorators: [
+    (Story) => (
+      <StoryWrapper
+        masteryLevelConfig={{
+          availableLevels: ['exceeds_mastery', 'mastery', 'unassessed'],
+          masteryLevelOverrides: {
+            near_mastery: { name: 'NEAR MASTERY OVERRIDE' }
+          }
+        }}
+      >
+        <Story />
+      </StoryWrapper>
+    )
+  ],
+  play: openPopover,
+}

package/es/translated/es/components/Gradebook/popovers/StudentPopover/index.tsx

@@ -0,0 +1,307 @@
+import React, { useState, type ReactNode } from 'react'
+import t from 'format-message'
+import { Link } from '@instructure/ui-link'
+import { CloseButton } from '@instructure/ui-buttons'
+import { View } from '@instructure/ui-view'
+import { Flex } from '@instructure/ui-flex'
+import { Text } from '@instructure/ui-text'
+import { Popover } from '@instructure/ui-popover'
+import { TruncateText } from '@instructure/ui-truncate-text'
+import { Avatar } from '@instructure/ui-avatar'
+import { ScreenReaderContent } from '@instructure/ui-a11y-content'
+import { Spinner } from '@instructure/ui-spinner'
+import { useGradebookConfig } from '@/components/Gradebook/context/GradebookConfigContext'
+import MasteryLevelIcon from '@/components/Gradebook/icons/MasteryLevelIcon'
+import type { LmgbUserDetails, Student, StudentMasteryScores } from '@/types/gradebook'
+
+interface HeaderProps {
+  student: Student
+  studentName: string
+  userDetails: LmgbUserDetails
+}
+
+interface MasteryScoresProps {
+  masteryScores?: StudentMasteryScores
+}
+
+interface ActionsProps {
+  studentGradesUrl?: string
+}
+
+interface LoadingProps {
+  isLoading: boolean
+}
+
+interface ErrorMessageProps {
+  error: string | null
+}
+
+type HeaderSlot =
+  | { headerOverride: ReactNode; student?: never; userDetails?: never }
+  | { headerOverride?: never; student: Student; userDetails: LmgbUserDetails }
+
+type MasteryScoresSlot =
+  | { masteryScoresOverride: ReactNode; masteryScores?: never }
+  | { masteryScoresOverride?: never; masteryScores?: StudentMasteryScores }
+
+type ActionSlot =
+  | { actionsOverride: ReactNode; studentGradesUrl?: never }
+  | { actionsOverride?: never; studentGradesUrl: string }
+
+export type StudentPopoverProps = {
+  studentName: string
+  isLoading?: boolean
+  error?: string | null
+  onShowingContentChange?: (isShowing: boolean) => void
+} & HeaderSlot & MasteryScoresSlot & ActionSlot
+
+const Header: React.FC<HeaderProps> = ({ student, studentName, userDetails }) => {
+  return (
+    <Flex gap="small" alignItems="start">
+      <Flex.Item width="60px">
+        <Avatar
+          as="div"
+          size="large"
+          name={studentName}
+          src={student.avatar_url}
+          data-testid="lmgb-student-popover-avatar"
+        />
+      </Flex.Item>
+
+      <Flex.Item>
+        <View display="block" padding="0 large 0 0" maxWidth="320px">
+          <View>
+            <Text size="content" weight="bold">
+              <TruncateText>{studentName}</TruncateText>
+            </Text>
+          </View>
+
+          {userDetails.course.name && (
+            <View>
+              <Text size="contentSmall">
+                <TruncateText>{userDetails.course.name}</TruncateText>
+              </Text>
+            </View>
+          )}
+
+          {userDetails.user.sections.length && (
+            <View>
+              <Text size="legend">
+                <TruncateText>
+                  {userDetails.user.sections.map(section => section.name).join(', ')}
+                </TruncateText>
+              </Text>
+            </View>
+          )}
+        </View>
+      </Flex.Item>
+    </Flex>
+  )
+}
+
+const MasteryScores: React.FC<MasteryScoresProps> = ({ masteryScores }) => {
+  const { masteryLevelConfig } = useGradebookConfig()
+
+  if (!masteryScores) return null
+
+  const { averageIcon, averageText, grossAverage } = masteryScores
+
+  const masteryLevelName = masteryLevelConfig?.masteryLevelOverrides?.[averageIcon]?.name || averageText
+  const availableBuckets = masteryLevelConfig?.availableLevels
+
+  return (
+    <Flex>
+      <Flex.Item width="60px"></Flex.Item>
+
+      <Flex.Item padding="0 0 0 small">
+        <Flex direction="row" alignItems="center" gap="small">
+          <Flex.Item width="1.7rem">
+            <MasteryLevelIcon masteryLevel={averageIcon} ariaHidden />
+          </Flex.Item>
+
+          <Flex.Item padding="0 0 xxx-small 0">
+            <Text size="medium">
+              {`${grossAverage ? grossAverage.toFixed(1) + ' ' : ''}${masteryLevelName}`}
+            </Text>
+          </Flex.Item>
+        </Flex>
+
+        <Flex gap="small" margin="x-small small small none">
+          {masteryScores.buckets &&
+          Object.values(masteryScores.buckets)
+            .filter(bucket => !availableBuckets || availableBuckets.includes(bucket.icon))
+            .reverse()
+            .map(bucket => {
+              const { icon, name, count } = bucket
+              const bucketName = masteryLevelConfig?.masteryLevelOverrides?.[icon]?.name || name
+
+              return (
+                <Flex key={bucket.name} direction="row" alignItems="center" gap="xx-small">
+                  <Flex.Item width="1.4rem" padding="xxx-small 0 0 0">
+                    <MasteryLevelIcon masteryLevel={icon} width="100%" height="100%" ariaHidden />
+                  </Flex.Item>
+
+                  <Flex.Item>
+                    <ScreenReaderContent>{`${bucketName} ${count}`}</ScreenReaderContent>
+                    <Text size="medium" aria-hidden="true">
+                      {bucket.count}
+                    </Text>
+                  </Flex.Item>
+                </Flex>
+              )
+            })}
+        </Flex>
+      </Flex.Item>
+    </Flex>
+  )
+}
+
+const Actions: React.FC<ActionsProps> = ({ studentGradesUrl }) => {
+  const [isMessageModalOpen, setIsMessageModalOpen] = useState(false)
+
+  return (
+    <>
+      {isMessageModalOpen && (<></>)}
+      {/* TODO: https://instructure.atlassian.net/browse/OUTC-575
+      {isMessageModalOpen && (
+        <MessageStudentsModal
+          contextCode={`course_${courseId}`}
+          onRequestClose={() => setIsMessageModalOpen(false)}
+          open={isMessageModalOpen}
+          bulkMessage={false}
+          groupConversation={false}
+          recipients={[{ id: student.id, displayName: studentName }]}
+          title={t('Send a message')}
+        />
+      )} */}
+
+      <Flex direction="row" justifyItems="center">
+        <Flex.Item>
+          <Link onClick={() => setIsMessageModalOpen(true)} variant="standalone">
+            <Text size="small">{t('Message')}</Text>
+          </Link>
+        </Flex.Item>
+
+        <View
+          as="div"
+          margin="none small none small"
+          borderWidth="none small none none"
+          width="0px"
+          height="1.4rem"
+        />
+
+        {studentGradesUrl && (
+          <Flex.Item>
+            <Link href={studentGradesUrl} variant="standalone">
+              <Text size="small">{t('View Mastery Report')}</Text>
+            </Link>
+          </Flex.Item>
+        )}
+      </Flex>
+    </>
+  )
+}
+
+const Divider: React.FC = () => (
+  <View as="div" margin="none none x-small none" borderWidth="small none none none" height="0px" />
+)
+
+const Loading: React.FC<LoadingProps> = ({ isLoading }) => {
+  if (!isLoading) return null
+
+  return (
+    <View as="div" textAlign="center" margin="medium none">
+      <Spinner renderTitle={t('Loading user details')} size="small" />
+    </View>
+  )
+}
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ error }) => {
+  if (!error) return null
+
+  return (
+    <View as="div" margin="large none">
+      <Text>{error}</Text>
+    </View>
+  )
+}
+
+export const StudentPopover: React.FC<StudentPopoverProps> = ({
+  studentName,
+  headerOverride,
+  student,
+  userDetails,
+  masteryScores,
+  masteryScoresOverride,
+  actionsOverride,
+  studentGradesUrl,
+  isLoading = false,
+  error = null,
+  onShowingContentChange,
+}) => {
+  const [isShowingContent, setIsShowingContent] = useState(false)
+
+  const handleShowingContentChange = (isShowing: boolean) => {
+    setIsShowingContent(isShowing)
+    onShowingContentChange?.(isShowing)
+  }
+
+  return (
+    <>
+      <Popover
+        renderTrigger={
+          <Link isWithinText={false} data-testid="student-cell-link">
+            <TruncateText>{studentName}</TruncateText>
+          </Link>
+        }
+        isShowingContent={isShowingContent}
+        onShowContent={() => handleShowingContentChange(true)}
+        onHideContent={() => handleShowingContentChange(false)}
+        on="click"
+        screenReaderLabel={`${t('Student Details for')} ${studentName}`}
+        shouldContainFocus
+        shouldReturnFocus
+        shouldCloseOnDocumentClick
+        offsetY="16px"
+      >
+        <Flex>
+          <Flex.Item>
+            <CloseButton
+              placement="end"
+              offset="small"
+              onClick={() => handleShowingContentChange(false)}
+              screenReaderLabel={t('Close')}
+            />
+          </Flex.Item>
+
+          <Flex.Item>
+            <View padding="small" margin="xx-small 0 0 0" display="block" maxWidth="480px" minWidth="300px" minHeight="200px">
+              <Loading isLoading={isLoading} />
+              <ErrorMessage error={error} />
+
+              {!isLoading && !error && (
+                <View as="div">
+                  <Flex direction="column" alignItems="start">
+                    <Flex.Item>
+                      {headerOverride ?? (
+                        <Header student={student!} studentName={studentName!} userDetails={userDetails!} />
+                      )}
+                    </Flex.Item>
+
+                    <Flex.Item>
+                      {masteryScoresOverride ?? <MasteryScores masteryScores={masteryScores} />}
+                    </Flex.Item>
+                  </Flex>
+
+                  <Divider />
+
+                  {actionsOverride ?? <Actions studentGradesUrl={studentGradesUrl} />}
+                </View>
+              )}
+            </View>
+          </Flex.Item>
+        </Flex>
+      </Popover>
+    </>
+  )
+}

package/es/translated/es/components/Gradebook/shared/TruncateWithTooltip/__tests__/index.test.tsx

@@ -0,0 +1,145 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import TruncateWithTooltip from '..'
+
+// Mock the TruncateText component to control truncation behavior
+jest.mock('@instructure/ui-truncate-text', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const MockTruncateText = ({ children, onUpdate }: any) => {
+    // Simulate truncation for long text synchronously
+    const text = typeof children === 'string' ? children : ''
+    const isTruncated = text.length > 50
+
+    // Call onUpdate immediately to simulate truncation detection
+    if (onUpdate) {
+      setTimeout(() => onUpdate(isTruncated), 0)
+    }
+
+    return <div data-testid="truncate-text">{children}</div>
+  }
+
+  return {
+    TruncateText: MockTruncateText,
+  }
+})
+
+describe('TruncateWithTooltip', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders children text', () => {
+    render(<TruncateWithTooltip>Short text</TruncateWithTooltip>)
+    expect(screen.getByText('Short text')).toBeInTheDocument()
+  })
+
+  it('renders without tooltip for short text', () => {
+    render(<TruncateWithTooltip>Short text</TruncateWithTooltip>)
+
+    // Tooltip should not be present for non-truncated text
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument()
+  })
+
+  it('renders with tooltip for long text', async () => {
+    const longText = 'This is a very long text that will definitely be truncated by the component'
+
+    render(<TruncateWithTooltip>{longText}</TruncateWithTooltip>)
+
+    // The text should be rendered
+    expect(screen.getByText(longText)).toBeInTheDocument()
+
+    // Wait for the state update and check that TruncateText is rendered
+    await waitFor(() => {
+      expect(screen.getByTestId('truncate-text')).toBeInTheDocument()
+    })
+  })
+
+  it('passes maxTooltipWidth prop correctly', async () => {
+    const longText = 'This is a very long text that will definitely be truncated by the component'
+
+    render(
+      <TruncateWithTooltip maxTooltipWidth="30rem">{longText}</TruncateWithTooltip>
+    )
+
+    // Wait for the state update to happen and check the tooltip content
+    // Tooltip is rendered in a portal, so we need to query from document
+    await waitFor(() => {
+      const tooltipContent = document.querySelector('div[style*="max-width"]')
+      expect(tooltipContent).toBeInTheDocument()
+      expect(tooltipContent).toHaveStyle({ maxWidth: '30rem' })
+    })
+  })
+
+  it('uses default maxTooltipWidth of 20rem', async () => {
+    const longText = 'This is a very long text that will definitely be truncated by the component'
+
+    render(<TruncateWithTooltip>{longText}</TruncateWithTooltip>)
+
+    // Wait for the state update and check the default max-width
+    // Tooltip is rendered in a portal, so we need to query from document
+    await waitFor(() => {
+      const tooltipContent = document.querySelector('div[style*="max-width"]')
+      expect(tooltipContent).toBeInTheDocument()
+      expect(tooltipContent).toHaveStyle({ maxWidth: '20rem' })
+    })
+  })
+
+  it('renders with custom linesAllowed prop', () => {
+    render(<TruncateWithTooltip linesAllowed={2}>Test text</TruncateWithTooltip>)
+
+    // The component should render with the TruncateText component
+    expect(screen.getByTestId('truncate-text')).toBeInTheDocument()
+  })
+
+  it('handles placement prop for tooltip', () => {
+    const longText = 'This is a very long text that will definitely be truncated by the component'
+
+    render(<TruncateWithTooltip placement="bottom">{longText}</TruncateWithTooltip>)
+
+    // The component should render
+    expect(screen.getByText(longText)).toBeInTheDocument()
+  })
+
+  it('handles backgroundColor prop', () => {
+    const longText = 'This is a very long text that will definitely be truncated by the component'
+
+    render(
+      <TruncateWithTooltip backgroundColor="primary-inverse">{longText}</TruncateWithTooltip>
+    )
+
+    // The component should render
+    expect(screen.getByText(longText)).toBeInTheDocument()
+  })
+
+  it('handles horizontalOffset prop', () => {
+    const longText = 'This is a very long text that will definitely be truncated by the component'
+
+    render(<TruncateWithTooltip horizontalOffset={10}>{longText}</TruncateWithTooltip>)
+
+    // The component should render
+    expect(screen.getByText(longText)).toBeInTheDocument()
+  })
+
+  it('updates truncation state when text changes', () => {
+    const { rerender } = render(<TruncateWithTooltip>Short</TruncateWithTooltip>)
+
+    expect(screen.getByText('Short')).toBeInTheDocument()
+
+    // Change to long text
+    const longText = 'This is a very long text that will definitely be truncated by the component'
+    rerender(<TruncateWithTooltip>{longText}</TruncateWithTooltip>)
+
+    expect(screen.getByText(longText)).toBeInTheDocument()
+  })
+
+  it('renders non-string children', () => {
+    render(
+      <TruncateWithTooltip>
+        <span>Child element</span>
+      </TruncateWithTooltip>
+    )
+
+    expect(screen.getByText('Child element')).toBeInTheDocument()
+  })
+})