Fix some eslint issues automatically

The result of `yarn run lint:js:jsx --fix`

Test plan:
  - All existing tests pass

flag=none

Refs DE-1426

Change-Id: I354b6a0f27f61adbe7afb1af2f1661b06e294be6
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/303345
Reviewed-by: Cameron Ray <cameron.ray@instructure.com>
Reviewed-by: Spencer Olson <solson@instructure.com>
Product-Review: Cameron Ray <cameron.ray@instructure.com>
QA-Review: Aaron Shafovaloff <ashafovaloff@instructure.com>
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>

ui/.eslintrc.js

@@ -20,6 +20,6 @@
 module.exports = {
   // 0 - off, 1 - warning, 2 - error
   rules: {
-    'import/no-commonjs': [2]
+    'import/no-commonjs': [2],
-  }
+  },
 }

ui/features/dashboard/react/DashboardHeader.js

@@ -49,8 +49,7 @@ const [show, hide] = ['block', 'none'].map(displayVal => id => {
   if (el) el.style.display = displayVal
 })
 
-const observerMode = () =>
+const observerMode = () => ENV.current_user_roles?.includes('observer')
-  ENV.current_user_roles?.includes('observer')
 
 /**
  * This component renders the header and the to do sidebar for the user

ui/features/gradebook_uploads/jquery/index.js

@@ -28,6 +28,7 @@ import 'slickgrid/slick.editors' /* global.Slick.Editors */
 import '@canvas/forms/jquery/jquery.instructure_forms' /* errorBox */
 import '@canvas/jquery/jquery.instructure_misc_helpers' /* /\.detect/ */
 import '@canvas/util/templateData'
+
 const I18n = useI18nScope('gradebook_uploads')
 /* fillTemplateData */
 

ui/features/k5_dashboard/react/__tests__/k5DashboardObserver.test.js

@@ -267,7 +267,6 @@ describe('K5Dashboard Parent Support', () => {
       act(() => getByText('Student 2').click())
       await waitFor(() => expect(reloadMock).toHaveBeenCalled())
     })
-
   })
 
   describe('grades tab', () => {

ui/shared/alerts/react/__tests__/ExpandableErrorAlert.test.tsx

@@ -69,7 +69,7 @@ describe('ExpandableErrorAlert', () => {
     const {getByText, getByRole} = render(
       <>
         <div id="flash_screenreader_holder" role="alert" />
-        <ExpandableErrorAlert liveRegionText="My error summary" closeable>
+        <ExpandableErrorAlert liveRegionText="My error summary" closeable={true}>
           My error
         </ExpandableErrorAlert>
       </>
@@ -94,7 +94,7 @@ describe('ExpandableErrorAlert', () => {
     expect(getByText('My error')).toBeInTheDocument()
     expect(queryByRole('button', {name: 'Close'})).not.toBeInTheDocument()
 
-    rerender(<ExpandableErrorAlert closeable>My error</ExpandableErrorAlert>)
+    rerender(<ExpandableErrorAlert closeable={true}>My error</ExpandableErrorAlert>)
 
     expect(getByText('My error')).toBeInTheDocument()
     const closeButton = getByRole('button', {name: 'Close'})

ui/shared/alerts/react/__tests__/InlineAlert.test.js

@@ -29,12 +29,12 @@ describe('CanvasInlineAlert', () => {
   })
 
   it('renders an alert with sr features', () => {
-    render(<CanvasInlineAlert liveAlert>alert message</CanvasInlineAlert>)
+    render(<CanvasInlineAlert liveAlert={true}>alert message</CanvasInlineAlert>)
     expect(document.querySelector('[role="alert"]')).toBeInTheDocument()
   })
 
   it('renders an sr-only alert', () => {
-    render(<CanvasInlineAlert screenReaderOnly>alert message</CanvasInlineAlert>)
+    render(<CanvasInlineAlert screenReaderOnly={true}>alert message</CanvasInlineAlert>)
     expect(document.querySelector('[role="alert"]')).toBeInTheDocument()
     // There's no great way to tell if instui has done its ScreenReaderContent thing
   })

ui/shared/assignments/react/__tests__/SubmissionStatusPill.test.js

@@ -45,14 +45,14 @@ it('does not render with null status', () => {
 })
 
 it('renders excused when given excused only', () => {
-  ReactDOM.render(<SubmissionStatusPill excused />, document.getElementById('fixtures'))
+  ReactDOM.render(<SubmissionStatusPill excused={true} />, document.getElementById('fixtures'))
   const excusedPill = $('[data-test-id="excused-pill"]')
   expect(excusedPill.text()).toEqual('Excused')
 })
 
 it('renders only excused even when submission is also missing', () => {
   ReactDOM.render(
-    <SubmissionStatusPill excused submissionStatus="missing" />,
+    <SubmissionStatusPill excused={true} submissionStatus="missing" />,
     document.getElementById('fixtures')
   )
   const excusedPill = $('[data-test-id="excused-pill"]')
@@ -63,7 +63,7 @@ it('renders only excused even when submission is also missing', () => {
 
 it('renders only excused even when submission is also late', () => {
   ReactDOM.render(
-    <SubmissionStatusPill excused submissionStatus="late" />,
+    <SubmissionStatusPill excused={true} submissionStatus="late" />,
     document.getElementById('fixtures')
   )
   const excusedPill = $('[data-test-id="excused-pill"]')

ui/shared/color-picker/react/__tests__/index.test.js

@@ -28,8 +28,8 @@ describe('ColorPicker', () => {
 
     return render(
       <ColorPicker
-        isOpen
+        isOpen={true}
-        nonModal
+        nonModal={true}
         parentComponent="container"
         positions={{top: 0, left: 0}}
         {...props}

ui/shared/direct-sharing/react/components/__tests__/DirectShareCourseTray.test.js

@@ -42,14 +42,14 @@ describe('DirectShareCourseTray', () => {
   })
 
   it('displays interface for selecting a course', async () => {
-    const {getByText} = render(<DirectShareCourseTray open />)
+    const {getByText} = render(<DirectShareCourseTray open={true} />)
     // loads the panel asynchronously, so we have to wait for it
     expect(await waitFor(() => getByText(/select a course/i))).toBeInTheDocument()
   })
 
   it('calls onDismiss when cancel is clicked', async () => {
     const handleDismiss = jest.fn()
-    const {getByText} = render(<DirectShareCourseTray open onDismiss={handleDismiss} />)
+    const {getByText} = render(<DirectShareCourseTray open={true} onDismiss={handleDismiss} />)
     fireEvent.click(await waitFor(() => getByText(/cancel/i)))
     expect(handleDismiss).toHaveBeenCalled()
   })

ui/shared/feature-flags/react/__tests__/FeatureFlagButton.test.js

@@ -56,7 +56,10 @@ describe('feature_flags::FeatureFlagButton', () => {
 
   it('Hides the lock and menu item for allowed with disableDefaults', () => {
     const {container, queryByText} = render(
-      <FeatureFlagButton featureFlag={sampleData.allowedFeature.feature_flag} disableDefaults />
+      <FeatureFlagButton
+        featureFlag={sampleData.allowedFeature.feature_flag}
+        disableDefaults={true}
+      />
     )
     expect(container.querySelector('svg[name="IconUnlock"]')).not.toBeInTheDocument()
     userEvent.click(container.querySelector('button'))

ui/shared/instui-bindings/react/Modal.tsx

@@ -67,7 +67,7 @@ function CanvasModal({
     <Modal label={label} onDismiss={onDismiss} {...otherModalProps}>
       <Modal.Header>
         <Flex>
-          <FlexItem grow>
+          <FlexItem grow={true}>
             <Heading>{title}</Heading>
           </FlexItem>
           <FlexItem>

ui/shared/instui-bindings/react/__tests__/Modal.test.js

@@ -25,7 +25,7 @@ describe('CanvasModal', () => {
     const handleDismiss = jest.fn()
     const {getByText} = render(
       <CanvasModal
-        open
+        open={true}
         label="Do the thing"
         onDismiss={handleDismiss}
         footer={<span>The Footer</span>}
@@ -58,7 +58,7 @@ describe('CanvasModal', () => {
       }
 
       const {getByText} = render(
-        <CanvasModal open label="Do the thing">
+        <CanvasModal open={true} label="Do the thing">
           <ThrowError />
         </CanvasModal>
       )

ui/shared/lti/jquery/subjects/org.imsglobal.lti.capabilities.js

@@ -25,7 +25,7 @@ export default ({responseMessages}) => {
     if (imsSubjects.includes(subject) && useFrame) {
       return {
         subject,
-        frame: 'post_message_forwarding'
+        frame: 'post_message_forwarding',
       }
     }
 

ui/shared/message-attachments/react/components/AttachmentUploadSpinner/__tests__/AttachmentUploadSpinner.test.js

@@ -25,7 +25,7 @@ const setup = props => {
   return render(
     <AttachmentUploadSpinner
       sendMessage={Function.prototype}
-      isMessageSending
+      isMessageSending={true}
       pendingUploads={['fake upload']}
       {...props}
     />

ui/shared/quiz-legacy-client-apps/react/components/sighted_user_content.js

@@ -49,8 +49,8 @@ const SightedUserContent = ({tagName: Tag = 'span', ...props}) => {
       // content. However, this clearly has the downside of hiding the
       // content from sighted users as well, so we resort to CSS to get the
       // items back into display and we win-win.
-      hidden
+      hidden={true}
-      aria-hidden
+      aria-hidden={true}
       role="presentation"
       className={cx('sighted-user-content', props.className)}
     >

ui/shared/trays/react/__tests__/ContentTypeExternalToolTray.test.js

@@ -32,9 +32,9 @@ describe('ContentTypeExternalToolTray', () => {
         onDismiss={onDismiss}
         acceptedResourceTypes={['page', 'module']}
         targetResourceType="page"
-        allowItemSelection
+        allowItemSelection={true}
         selectableItems={[{id: '1', name: 'module 1'}]}
-        open
+        open={true}
         {...props}
       />
     )

ui/shared/trays/react/__tests__/Tray.test.js

@@ -24,7 +24,7 @@ describe('CanvasTray', () => {
   it('renders header, close button, children', () => {
     const handleDismiss = jest.fn()
     const {getByText} = render(
-      <CanvasTray open label="Do the thing" onDismiss={handleDismiss}>
+      <CanvasTray open={true} label="Do the thing" onDismiss={handleDismiss}>
         Tray Content
       </CanvasTray>
     )
@@ -52,7 +52,7 @@ describe('CanvasTray', () => {
       }
 
       const {getByText} = render(
-        <CanvasTray open label="Do the thing">
+        <CanvasTray open={true} label="Do the thing">
           <ThrowError />
         </CanvasTray>
       )