test: expand oxlint config for better eslint parity (#2972)

* test: expand oxlint config, enable 'react' lints, remove temporary disable
* chore: fix missing keys
* chore: other miscellaneous fixes
* test: re-enable oxlint check for "no-unused-vars"
* chore: remove unused imports
* test: improve test coverage slightly

Author: bradenmacdonald

.oxlintrc.json

@@ -3,9 +3,17 @@
   "categories": {
     "correctness": "warn"
   },
+  "plugins": ["react"],
   "rules": {
-    "eslint/no-unused-vars": "off",
-    "typescript/unbound-method": "off", // 🛑 TEMPORARY
+    "eslint/no-unused-vars": ["warn", {
+      // Allow using {ignoredProp, ...keepTheRest} to omit a prop like 'ignoredProp' from an object.
+      "ignoreRestSiblings": true,
+    }],
+    // We disable exhaustive-deps because: it's noisy, and we often include extra deps when we want a memoized thing to
+    // re-calculate after some change, even if we're not using that thing in the calculation.
+    "react-hooks/exhaustive-deps": "off",
+    // Rule of hooks is useful, but not on by default:
+    "react/rules-of-hooks": "warn",
     "typescript/no-floating-promises": ["error", {
       "allowForKnownSafeCalls": [
         // queryClient.invalidateQueries returns a promise that can be awaited

plugins/course-apps/teams/GroupEditor.jsx

@@ -48,7 +48,7 @@ const GroupEditor = ({
         ? (
           <div className="d-flex flex-column card rounded mb-3 px-4 py-2 p-4" key="isDeleting">
             <h4 className="mb-3">{intl.formatMessage(messages.groupDeleteHeading)}</h4>
-            {intl.formatMessage(messages.groupDeleteBody).split('\n').map(text => <p>{text}</p>)}
+            {intl.formatMessage(messages.groupDeleteBody).split('\n').map(text => <p key={text}>{text}</p>)}
             <div className="d-flex flex-row justify-content-end">
               <Button variant="muted" size="sm" onClick={cancelDeletion}>
                 {intl.formatMessage(messages.cancel)}

src/advanced-settings/AdvancedSettings.tsx

@@ -282,7 +282,7 @@ const AdvancedSettings = () => {
           role="dialog"
           actions={[
             !isQueryPending ? (
-              <Button variant="tertiary" onClick={handleResetSettingsValues}>
+              <Button key="cancelBtn" variant="tertiary" onClick={handleResetSettingsValues}>
                 {intl.formatMessage(messages.buttonCancelText)}
               </Button>
             ) : /* istanbul ignore next */ null,

src/course-libraries/OutOfSyncAlert.tsx

@@ -67,9 +67,7 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
       variant="info"
       onClose={dismissAlert}
       actions={[
-        <Button
-          onClick={onReview}
-        >
+        <Button key="review-btn" onClick={onReview}>
           {intl.formatMessage(messages.outOfSyncCountAlertReviewBtn)}
         </Button>,
       ]}

src/course-outline/CourseOutline.tsx

@@ -28,7 +28,6 @@ import { UnlinkModal } from '@src/generic/unlink-modal';
 import AlertMessage from '@src/generic/alert-message';
 import getPageHeadTitle from '@src/generic/utils';
 import CourseOutlineHeaderActionsSlot from '@src/plugin-slots/CourseOutlineHeaderActionsSlot';
-import { XBlock } from '@src/data/types';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useCourseOutlineContext } from './CourseOutlineContext';
 import LegacyLibContentBlockAlert from '@src/course-libraries/LegacyLibContentBlockAlert';
@@ -72,8 +71,6 @@ const CourseOutline = () => {
     closeUnlinkModal,
   } = useCourseAuthoringContext();
   const {
-    handleAddBlock,
-    handleAddAndOpenUnit,
     currentSelection,
     sections,
     restoreSectionList,

src/course-outline/CourseOutlineContext.tsx

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useToggle } from '@openedx/paragon';
 import { arrayMove } from '@dnd-kit/sortable';
 
-import { SelectionState, type UnitXBlock, type XBlock } from '@src/data/types';
+import { SelectionState, type XBlock } from '@src/data/types';
 import { useToggleWithValue } from '@src/hooks';
 import { getBlockType } from '@src/generic/key-utils';
 import { COURSE_BLOCK_NAMES } from '@src/constants';

src/course-outline/hooks.jsx

@@ -38,7 +38,6 @@ import {
   enableCourseHighlightsEmailsQuery,
   fetchCourseBestPracticesQuery,
   fetchCourseLaunchQuery,
-  fetchCourseOutlineIndexQuery,
   fetchCourseReindexQuery,
   setVideoSharingOptionQuery,
   dismissNotificationQuery,
@@ -52,7 +51,6 @@ const useCourseOutline = ({ courseId }) => {
     handleAddBlock,
     setCurrentSelection,
     currentSelection,
-    isDuplicatingItem,
     isDeleteModalOpen,
     openDeleteModal,
     closeDeleteModal,

src/course-outline/page-alerts/PageAlerts.jsx

@@ -104,6 +104,7 @@ const PageAlerts = ({
         onClose={onDismiss}
         actions={[
           <Button
+            key="learnMore"
             href={discussionsIncontextLearnmoreUrl}
             target="_blank"
           >
@@ -267,6 +268,7 @@ const PageAlerts = ({
           onClose={onDismiss}
           actions={[
             <Button
+              key="view-files"
               as={Link}
               to={getAssetsUrl()}
             >
@@ -329,6 +331,7 @@ const PageAlerts = ({
           onClose={onDismiss}
           actions={[
             <Button
+              key="view-files"
               as={Link}
               to={getAssetsUrl()}
             >

src/course-unit/CourseUnit.tsx

@@ -273,14 +273,12 @@ const CourseUnit = () => {
             </TransitionReplace>
             {courseUnit.upstreamInfo?.upstreamLink && (
               <AlertMessage
-                title={intl.formatMessage(
+                description={intl.formatMessage(
                   messages.alertLibraryUnitReadOnlyText,
                   {
                     link: (
-                      <Alert.Link
-                        href={courseUnit.upstreamInfo.upstreamLink}
-                      >
-                        {intl.formatMessage(messages.alertLibraryUnitReadOnlyLinkText)}
+                      <Alert.Link href={courseUnit.upstreamInfo.upstreamLink}>
+                        <FormattedMessage {...messages.alertLibraryUnitReadOnlyLinkText} />
                       </Alert.Link>
                     ),
                   },

src/course-unit/clipboard/paste-notification/index.jsx

@@ -47,6 +47,7 @@ const PastNotificationAlert = ({ staticFileNotices, courseId }) => {
           icon={WarningIcon}
           dismissible
           actions={[
+            // oxlint-disable-next-line react/jsx-key (Paragon <Alert> adds its own key for action buttons)
             <ActionButton
               courseId={courseId}
               title={intl.formatMessage(messages.hasConflictingErrorsButtonText)}
@@ -87,6 +88,7 @@ const PastNotificationAlert = ({ staticFileNotices, courseId }) => {
           icon={InfoIcon}
           dismissible
           actions={[
+            // oxlint-disable-next-line react/jsx-key (Paragon <Alert> adds its own key for action buttons)
             <ActionButton
               courseId={courseId}
               title={intl.formatMessage(messages.hasNewFilesButtonText)}