@instructure/outcomes-ui 4.0.0 → 4.1.0

package/es/translated/mi/components/Gradebook/table/Table/index.tsx

@@ -0,0 +1,275 @@
+import React, { useRef, useCallback } from 'react'
+import { DragDropContext } from 'react-dnd'
+import ReactDnDHTML5Backend from 'react-dnd-html5-backend'
+import { Table as InstUITable, type TableProps as InstUITableProps } from '@instructure/ui-table'
+import { View } from '@instructure/ui-view'
+import { CustomDragLayer } from '@/components/Gradebook/dragdrop/CustomDragLayer'
+import DragDropWrapper from '@/components/Gradebook/dragdrop/DragDropWrapper'
+import { DragDropContainer } from '@/components/Gradebook/dragdrop/DragDropContainer'
+import { Cell, CellProps } from '../Cell'
+import { Row } from '../Row'
+import { RowHeader } from '../RowHeader'
+import { ColumnHeader, ColumnHeaderProps } from '../ColumnHeader'
+
+export type Column<TRow = Record<string, unknown>> = {
+  key: string
+  header: string | (() => React.ReactNode)
+  render?: (cellData: unknown, rowData: TRow, focused?: boolean) => React.ReactNode
+  width?: string | number
+  isSticky?: boolean
+  draggable?: boolean
+  dragLabel?: string
+  data?: TRow
+  isRowHeader?: boolean
+  cellProps?: CellProps
+  colHeaderProps?: ColumnHeaderProps
+}
+
+interface DragDropConfig {
+  type: string
+  onMove: (draggedId: string | number, hoverIndex: number) => void
+  onDragEnd?: () => void
+  onDragLeave?: () => void
+  enabled?: boolean
+}
+
+export type TableProps<TRow = Record<string, unknown>> = {
+  id?: string
+  caption?: string
+  columns: Array<Column<TRow>>
+  data: Array<TRow>
+  renderAboveHeader?: (
+    columns: Array<Column<TRow>>,
+    handleKeyDown: (event: React.KeyboardEvent, rowIndex: number, colIndex: number) => void,
+  ) => React.ReactNode
+  dragDropConfig?: DragDropConfig
+} & Omit<InstUITableProps, 'children' | 'data'>
+
+export const TableComponent = <TRow extends Record<string, unknown> = Record<string, unknown>>({
+  id,
+  columns,
+  data,
+  caption,
+  renderAboveHeader,
+  dragDropConfig,
+  ...tableProps
+}: TableProps<TRow>) => {
+  const tableRef = useRef<HTMLDivElement>(null)
+
+  const getCellElement = useCallback((rowIndex: number, colIndex: number): HTMLElement | null => {
+    if (!tableRef.current) return null
+    let cellId: string
+    if (rowIndex === -1) {
+      cellId = `header-${colIndex}`
+    } else {
+      cellId = `cell-${rowIndex}-${colIndex}`
+    }
+    return tableRef.current.querySelector(`[data-cell-id="${cellId}"]`)
+  }, [])
+
+  const focusCell = useCallback(
+    (rowIndex: number, colIndex: number) => {
+      const cell = getCellElement(rowIndex, colIndex)
+      if (cell) {
+        cell.focus()
+      }
+    },
+    [getCellElement],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent, rowIndex: number, colIndex: number) => {
+      if (event.target !== event.currentTarget) return
+
+      const {key} = event
+      let newRowIndex = rowIndex
+      let newColIndex = colIndex
+
+      switch (key) {
+        case 'ArrowUp': {
+          event.preventDefault()
+          // Allow moving from data (0+) to header (-1) to above-header (-2)
+          // Above-header row exists only if renderAboveHeader is provided
+          const minRow = renderAboveHeader ? -2 : -1
+          newRowIndex = Math.max(minRow, rowIndex - 1)
+          break
+        }
+        case 'ArrowDown':
+          event.preventDefault()
+          // Allow moving from above-header (-2) to header (-1) to data rows (0+)
+          newRowIndex = Math.min(data.length - 1, rowIndex + 1)
+          break
+        case 'ArrowLeft':
+          event.preventDefault()
+          newColIndex = Math.max(0, colIndex - 1)
+          break
+        case 'ArrowRight':
+          event.preventDefault()
+          newColIndex = Math.min(columns.length - 1, colIndex + 1)
+          break
+        default:
+          return
+      }
+
+      if (newRowIndex !== rowIndex || newColIndex !== colIndex) {
+        focusCell(newRowIndex, newColIndex)
+      }
+    },
+    [data.length, columns.length, focusCell, renderAboveHeader],
+  )
+
+  const renderColHeader = useCallback(
+    (col: Column<TRow>, colIndex: number, draggableIndex: number, dragDropConfig?: DragDropConfig) => {
+      const colHeaderProps: ColumnHeaderProps = {
+        id: col.key,
+        width: col.width,
+        isSticky: col.isSticky,
+        'data-cell-id': `header-${colIndex}`,
+        tabIndex: 0,
+        onKeyDown: (e: React.KeyboardEvent) => handleKeyDown(e, -1, colIndex),
+        ...col.colHeaderProps,
+      }
+
+      const dragLabel = col.dragLabel || col.key
+
+      return col.draggable && dragDropConfig ? (
+        <DragDropWrapper
+          key={col.key}
+          component={ColumnHeader}
+          type={dragDropConfig.type}
+          itemId={col.key}
+          index={draggableIndex}
+          dragLabel={dragLabel}
+          onMove={dragDropConfig.onMove}
+          onDragEnd={dragDropConfig.onDragEnd}
+          {...colHeaderProps}
+        >
+          {typeof col.header === 'function' ? col.header() : col.header}
+        </DragDropWrapper>
+      ) : (
+        <ColumnHeader key={col.key} {...colHeaderProps}>
+          {typeof col.header === 'function' ? col.header() : col.header}
+        </ColumnHeader>
+      )
+    },
+    [handleKeyDown],
+  )
+
+  const renderHeader = () => {
+    const isDragDropEnabled = dragDropConfig?.enabled
+
+    if (isDragDropEnabled && dragDropConfig) {
+      // Pre-compute draggable indices for all columns
+      const draggableIndices = new Map<number, number>()
+      let draggableCounter = 0
+      columns.forEach((col, idx) => {
+        if (col.draggable) {
+          draggableIndices.set(idx, draggableCounter)
+          draggableCounter++
+        }
+      })
+
+      return (
+        <InstUITable.Head>
+          <>
+            {renderAboveHeader && renderAboveHeader(columns, handleKeyDown)}
+            <DragDropContainer type={dragDropConfig.type} onDragLeave={dragDropConfig.onDragLeave}>
+              {connectDropTarget => (
+                <Row
+                  setRef={el => {
+                    if (el instanceof HTMLElement) {
+                      connectDropTarget(el as unknown as React.ReactElement)
+                    }
+                  }}
+                >
+                  {columns.map((col, colIndex) => {
+                    const currentDraggableIndex = draggableIndices.get(colIndex) ?? 0
+                    return renderColHeader(col, colIndex, currentDraggableIndex, dragDropConfig)
+                  })}
+                </Row>
+              )}
+            </DragDropContainer>
+          </>
+        </InstUITable.Head>
+      )
+    }
+
+    return (
+      <InstUITable.Head>
+        <>
+          {renderAboveHeader && renderAboveHeader(columns, handleKeyDown)}
+          <Row>{columns.map((col, colIndex) => renderColHeader(col, colIndex, 0))}</Row>
+        </>
+      </InstUITable.Head>
+    )
+  }
+
+  const renderBody = () => {
+    return (
+      <InstUITable.Body>
+        {data.map((row, rowIndex) => (
+          <Row key={rowIndex}>
+            {columns.map((col, colIndex) => {
+              const props = {
+                id: `${rowIndex}-${col.key}`,
+                'data-cell-id': `cell-${rowIndex}-${colIndex}`,
+                tabIndex: 0,
+                onKeyDown: (e: React.KeyboardEvent) => handleKeyDown(e, rowIndex, colIndex),
+                isSticky: col.isSticky,
+                ...col.cellProps,
+              }
+
+              if (col.isRowHeader) {
+                return (
+                  <RowHeader key={col.key} {...props}>
+                    {col.render ? col.render(row[col.key], row) : (row[col.key] as React.ReactNode)}
+                  </RowHeader>
+                )
+              }
+
+              if (col.render) {
+                return (
+                  <Cell key={col.key} {...props}>
+                    {(focused: boolean) => col.render!(row[col.key], row, focused)}
+                  </Cell>
+                )
+              }
+
+              return (
+                <Cell key={col.key} {...props}>
+                  {row[col.key] as React.ReactNode}
+                </Cell>
+              )
+            })}
+          </Row>
+        ))}
+      </InstUITable.Body>
+    )
+  }
+
+  return (
+    <>
+      {dragDropConfig?.enabled && (
+        <CustomDragLayer renderItem={item => item?.label || 'Dragging...'} />
+      )}
+      <View
+        as="div"
+        overflowX="auto"
+        elementRef={(el: Element | null) => {
+          if (el instanceof HTMLDivElement) {
+            ;(tableRef as React.MutableRefObject<HTMLDivElement | null>).current = el
+          }
+        }}
+      >
+        <InstUITable id={id} caption={caption} {...tableProps}>
+          {renderHeader()}
+          {renderBody()}
+        </InstUITable>
+      </View>
+    </>
+  )
+}
+
+export const Table = DragDropContext(ReactDnDHTML5Backend)(
+  TableComponent,
+) as React.ComponentType<TableProps>

package/es/translated/mi/components/Gradebook/toolbar/ExportCSVButton.stories.tsx

@@ -0,0 +1,18 @@
+import { ExportCSVButton } from './ExportCSVButton'
+import type { Meta, StoryObj } from '@storybook/react'
+import { mockCSVExportProps } from './__mocks__/exportCSVButtonMock'
+
+const meta: Meta<typeof ExportCSVButton> = {
+  title: 'Gradebook/ExportCSVButton',
+  component: ExportCSVButton,
+}
+
+export default meta
+
+type Story = StoryObj<typeof ExportCSVButton>
+
+export const Basic: Story = {
+  args: {
+    ...mockCSVExportProps,
+  },
+}

package/es/translated/mi/components/Gradebook/toolbar/ExportCSVButton.tsx

@@ -0,0 +1,63 @@
+import React, {useRef, useEffect, useState} from 'react'
+import {Button} from '@instructure/ui-buttons'
+import {CSVLink} from 'react-csv'
+import {IconExportLine} from '@instructure/ui-icons'
+import useCSVExport, {
+  EXPORT_COMPLETE,
+  EXPORT_FAILED,
+  EXPORT_PENDING,
+} from '@/hooks/gradebook/useCSVExport'
+import t from 'format-message'
+
+export interface ExportCSVButtonProps {
+  csvFileName?: string
+  csvExportHandler: () => Promise<object[]>
+}
+
+export const ExportCSVButton: React.FC<ExportCSVButtonProps> = ({
+  csvFileName,
+  csvExportHandler,
+}) => {
+  const csvElementRef = useRef<HTMLSpanElement>(null)
+  const exportCSV = (): void => csvElementRef.current?.click()
+
+  const {exportGradebook, exportState, exportData} = useCSVExport({csvExportHandler})
+  const [interaction, setInteraction] = useState<'enabled' | 'disabled'>('enabled')
+
+  const onButtonClick = (): void => {
+    setInteraction('disabled')
+    exportGradebook()
+  }
+
+  useEffect(() => {
+    if (exportState === EXPORT_COMPLETE) {
+      exportCSV()
+      setInteraction('enabled')
+    } else if (exportState === EXPORT_FAILED) {
+      setInteraction('enabled')
+    }
+  }, [exportState])
+
+  return (
+    <>
+      <Button
+        renderIcon={<IconExportLine />}
+        onClick={onButtonClick}
+        interaction={interaction}
+        data-testid="export-button"
+      >
+        {exportState === EXPORT_PENDING ? t('Exporting') : t('Export')}
+      </Button>
+      <CSVLink
+        data={exportData}
+        filename={csvFileName || 'gradebook-export.csv'}
+        data-testid="csv-link"
+        style={{display: 'none'}}
+        tabIndex={-1}
+        aria-hidden="true"
+      >
+        <span ref={csvElementRef} />
+      </CSVLink>
+    </>
+  )
+}

package/es/translated/mi/components/Gradebook/toolbar/SettingsTray/DisplayFilterSelector.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import t from 'format-message'
+import {Checkbox, CheckboxGroup} from '@instructure/ui-checkbox'
+import {DisplayFilter} from '@/util/gradebook/constants'
+
+export interface DisplayFilterSelectorProps {
+  values: DisplayFilter[]
+  onChange: (values: DisplayFilter[]) => void
+}
+
+export const DisplayFilterSelector: React.FC<DisplayFilterSelectorProps> = ({values, onChange}) => {
+  return (
+    <CheckboxGroup
+      name="display-filter"
+      description={t('Display')}
+      defaultValue={values}
+      onChange={values => onChange(values as DisplayFilter[])}
+    >
+      <Checkbox
+        label={t('Unpublished Assignments')}
+        value={DisplayFilter.SHOW_UNPUBLISHED_ASSIGNMENTS}
+      />
+      <Checkbox
+        label={t('Outcomes with no results')}
+        value={DisplayFilter.SHOW_OUTCOMES_WITH_NO_RESULTS}
+      />
+      <Checkbox
+        label={t('Students with no results')}
+        value={DisplayFilter.SHOW_STUDENTS_WITH_NO_RESULTS}
+      />
+      <Checkbox
+        label={t('Avatars in student list')}
+        value={DisplayFilter.SHOW_STUDENT_AVATARS}
+      />
+    </CheckboxGroup>
+  )
+}

package/es/translated/mi/components/Gradebook/toolbar/SettingsTray/NameDisplaySelector.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {RadioInput, RadioInputGroup} from '@instructure/ui-radio-input'
+import t from 'format-message'
+import {NameDisplayFormat} from '@/util/gradebook/constants'
+
+export interface NameDisplayFormatSelectorProps {
+  value?: NameDisplayFormat
+  onChange: (format: NameDisplayFormat) => void
+}
+
+export const NameDisplayFormatSelector: React.FC<NameDisplayFormatSelectorProps> = ({
+  value = NameDisplayFormat.FIRST_LAST,
+  onChange,
+}) => {
+  const inputs = [
+    {value: NameDisplayFormat.FIRST_LAST, label: t('First Name Last Name')},
+    {value: NameDisplayFormat.LAST_FIRST, label: t('Last Name, First Name')},
+  ]
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value as NameDisplayFormat)
+  }
+
+  return (
+    <RadioInputGroup
+      onChange={handleChange}
+      name="name-display-format"
+      value={value.toString()}
+      description={t('Name Display Format')}
+    >
+      {inputs.map(input => (
+        <RadioInput key={input.value} value={input.value.toString()} label={input.label} />
+      ))}
+    </RadioInputGroup>
+  )
+}

package/es/translated/mi/components/Gradebook/toolbar/SettingsTray/OutcomeArrangementSelector.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import {SimpleSelect} from '@instructure/ui-simple-select'
+import {Text} from '@instructure/ui-text'
+import {View} from '@instructure/ui-view'
+import t from 'format-message'
+import {OutcomeArrangement} from '@/util/gradebook/constants'
+
+export interface OutcomeArrangementSelectorProps {
+  value?: OutcomeArrangement
+  onChange: (arrangement: OutcomeArrangement) => void
+}
+
+export const OutcomeArrangementSelector: React.FC<OutcomeArrangementSelectorProps> = ({
+  value = OutcomeArrangement.UPLOAD_ORDER,
+  onChange,
+}) => {
+  const options = [
+    {
+      id: OutcomeArrangement.ALPHABETICAL,
+      value: OutcomeArrangement.ALPHABETICAL,
+      name: t('Alphabetical'),
+    },
+    {id: OutcomeArrangement.CUSTOM, value: OutcomeArrangement.CUSTOM, name: t('Custom')},
+    {
+      id: OutcomeArrangement.UPLOAD_ORDER,
+      value: OutcomeArrangement.UPLOAD_ORDER,
+      name: t('Upload Order'),
+    },
+  ]
+
+  const handleChange = (_event: React.SyntheticEvent, data: {value?: string | number}) => {
+    const selectedValue = data.value as OutcomeArrangement
+    if (Object.values(OutcomeArrangement).includes(selectedValue)) {
+      onChange(selectedValue)
+    }
+  }
+
+  return (
+    <View>
+      <SimpleSelect
+        renderLabel={t('Arrange Outcomes by')}
+        value={value}
+        onChange={handleChange}
+      >
+        {options.map(option => (
+          <SimpleSelect.Option
+            id={option.id}
+            value={option.value}
+            key={`outcome_arrangement_${option.id}`}
+          >
+            {option.name}
+          </SimpleSelect.Option>
+        ))}
+      </SimpleSelect>
+      <View as="div" margin="xxx-small 0 0 0">
+        <Text size="x-small" color="secondary">
+          {t('(You may drag & drop columns to re-arrange)')}
+        </Text>
+      </View>
+    </View>
+  )
+}

package/es/translated/mi/components/Gradebook/toolbar/SettingsTray/ScoreDisplayFormatSelector.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import {RadioInput, RadioInputGroup} from '@instructure/ui-radio-input'
+import t from 'format-message'
+import {ScoreDisplayFormat} from '@/util/gradebook/constants'
+
+export interface ScoreDisplayFormatSelectorProps {
+  value?: ScoreDisplayFormat
+  onChange: (format: ScoreDisplayFormat) => void
+}
+
+export const ScoreDisplayFormatSelector: React.FC<ScoreDisplayFormatSelectorProps> = ({
+  value = ScoreDisplayFormat.ICON_ONLY,
+  onChange,
+}) => {
+  const inputs = [
+    {value: ScoreDisplayFormat.ICON_ONLY, label: t('Icons Only')},
+    {value: ScoreDisplayFormat.ICON_AND_POINTS, label: t('Icons + Points')},
+    {value: ScoreDisplayFormat.ICON_AND_LABEL, label: t('Icons + Descriptor')},
+  ]
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value as ScoreDisplayFormat)
+  }
+
+  return (
+    <RadioInputGroup
+      onChange={handleChange}
+      name="score-display-format"
+      value={value.toString()}
+      description={t('Scoring')}
+    >
+      {inputs.map(input => (
+        <RadioInput key={input.value} value={input.value.toString()} label={input.label} />
+      ))}
+    </RadioInputGroup>
+  )
+}

package/es/translated/mi/components/Gradebook/toolbar/SettingsTray/SecondaryInfoSelector.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import {RadioInput, RadioInputGroup} from '@instructure/ui-radio-input'
+import t from 'format-message'
+import {SecondaryInfoDisplay} from '@/util/gradebook/constants'
+
+export interface SecondaryInfoSelectorProps {
+  value: SecondaryInfoDisplay
+  onChange: (value: SecondaryInfoDisplay) => void
+}
+
+export const SecondaryInfoSelector: React.FC<SecondaryInfoSelectorProps> = ({value, onChange}) => {
+  const inputs = [
+    {value: SecondaryInfoDisplay.SIS_ID, label: t('SIS ID')},
+    {value: SecondaryInfoDisplay.INTEGRATION_ID, label: t('Integration ID')},
+    {value: SecondaryInfoDisplay.LOGIN_ID, label: t('Login ID')},
+    {value: SecondaryInfoDisplay.NONE, label: t('None')},
+  ]
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.value as SecondaryInfoDisplay)
+  }
+
+  return (
+    <RadioInputGroup
+      onChange={handleChange}
+      name="secondary-info-display"
+      defaultValue={value.toString()}
+      description={t('Secondary info')}
+    >
+      {inputs.map(input => (
+        <RadioInput key={input.value} value={input.value.toString()} label={input.label} />
+      ))}
+    </RadioInputGroup>
+  )
+}