Updating dev branch with big 4.0 release changes

.env.example

@@ -42,6 +42,19 @@ ADMIN_LTI_NAME="UDOIT 3 Admin"
 USE_DEVELOPMENT_AUTH="no"
 VERSION_NUMBER="3.5.0"
 
+# Define which accessibility checker to use
+# Available options: "phpally", "equalaccess_local", "equalaccess_lambda"
+ACCESSIBILITY_CHECKER="equalaccess_lambda"
+
+# NOTE: When using a lambda function with equal access, 
+# you need to define the following in a separate .env.local:
+# EQUALACCESS_AWS_ACCESS_KEY_ID=<access_key_id>
+# EQUALACCESS_AWS_SECRET_ACCESS_KEY=<secret_access_key>
+# EQUALACCESS_AWS_REGION=<region (e.g. us-east-1)>
+# EQUALACCESS_AWS_SERVICE=<service (e.g. execute-api)>
+# EQUALACCESS_AWS_HOST=abcdefghi.execute-api.us-east-1.amazonaws.com
+# EQUALACCESS_CANONICAL_URI=endpoint/generate-accessibility-report
+
 
 ###> symfony/messenger ###
 MESSENGER_TRANSPORT_DSN=doctrine://default

.github/workflows/ci.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
       - 'stable/*'
+      - 'equal-access'
 
 env:
   REGISTRY: ghcr.io

CHANGELOG.md

@@ -3,6 +3,12 @@
 Please update this file as you open PRs and make changes to the codebase. Thank you!
 ## [Unreleased](https://github.com/ucfopen/UDOIT/tree/dev)
 
+## [4.0] -- In Progress
+
+- Upgraded the React version from 16.14.0 to 18.3.1, as well as updating a lot of the React code from class-based components to functional. Changes seen in [#984](https://github.com/ucfopen/UDOIT/pull/984) (Thank you [@mbusch3](https://github.com/mbusch3) and [@nizolnier](https://github.com/nizolnier)).
+- Updated UDOIT's PHP version from 8.2 to 8.4 to avoid issues pulling the latest composer image, as well as work with a php version that has active support. (Thank you, [@dmols](https://github.com/dmols) and [@panbed](https://github.com/panbed))
+- Integrated IBM Equal Access scanner to act as the new default UDOIT scanner (replacing PHPAlly) while still allowing developers to choose between the two. Changes seen in [#982](https://github.com/ucfopen/UDOIT/pull/982) (Thank you, [@panbed](https://github.com/panbed) and [@evannaderi](https://github.com/evannaderi))
+
 ## [3.5.0](https://github.com/ucfopen/UDOIT/compare/3.4.0...3.5.0) - 2024-11-12
 
 ### General

Dockerfile

@@ -1,4 +1,4 @@
-FROM php:8.2-fpm
+FROM php:8.4.2-fpm
 ARG ENVIRONMENT_TYPE
 
 #Install dependencies and php extensions

assets/js/Components/AboutModal.js

@@ -6,38 +6,30 @@ import { CloseButton } from '@instructure/ui-buttons'
 import AboutPage from './AboutPage'
 
 
-class AboutModal extends React.Component {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    return (
-      <Modal
-        open={true}
-        size="large"
-        label={this.props.t('label.about')}>
-        <Modal.Header padding="0 medium">
-          <Flex>
-            <Flex.Item shouldGrow shouldShrink>
-              <Heading>{this.props.t('label.about')}</Heading>
-            </Flex.Item>
-            <Flex.Item>
-              <CloseButton
-                placement="end"
-                offset="small"
-                screenReaderLabel={this.props.t('srlabel.close')}
-                onClick={() => this.props.handleModal(null)}
-              />
-            </Flex.Item>
-          </Flex>
-        </Modal.Header>
-        <Modal.Body padding="small medium">
-          <AboutPage t={this.props.t} settings={this.props.settings} />
-        </Modal.Body>
-      </Modal>
-    )
-  }
-}
-
-export default AboutModal
+export default function AboutModal({ t, settings, handleModal }) {
+  return (
+    <Modal
+      open={true}
+      size="large"
+      label={t('label.about')}>
+      <Modal.Header padding="0 medium">
+        <Flex>
+          <Flex.Item shouldGrow shouldShrink>
+            <Heading>{t('label.about')}</Heading>
+          </Flex.Item>
+          <Flex.Item>
+            <CloseButton
+              placement="end"
+              offset="small"
+              screenReaderLabel={t('srlabel.close')}
+              onClick={() => handleModal(null)}
+            />
+          </Flex.Item>
+        </Flex>
+      </Modal.Header>
+      <Modal.Body padding="small medium">
+        <AboutPage t={t} settings={settings} />
+      </Modal.Body>
+    </Modal>
+  )
+}

assets/js/Components/AboutPage.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Heading } from '@instructure/ui-heading'
 import { View } from '@instructure/ui-view'
 import { Text } from '@instructure/ui-text'
@@ -10,133 +10,127 @@ import * as Html from '../Services/Html'
 import ReactHtmlParser from 'react-html-parser'
 import Classes from '../../css/theme-overrides.css'
 
-class AboutPage extends React.Component {
+export default function AboutPage({ t, settings }) {
+  const [expandDetails, setExpandDetails] = useState(false)
+  const [issues, setIssues] = useState({"error": [], "suggestion": []})
 
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      expandDetails: false
-    }
-
-    this.handleDetailsToggle = this.handleDetailsToggle.bind(this)
+  const handleDetailsToggle = () => {
+    setExpandDetails(!expandDetails)
   }
 
-  handleDetailsToggle() {
-    this.setState({ expandDetails: !this.state.expandDetails })
-  }
+  useEffect(() => {
+    const suggestionTypes = (settings.suggestionRuleIds != null) ? settings.suggestionRuleIds : ''
 
-  render() {
-    const suggestionTypes = (this.props.settings.suggestionRuleIds != null) ? this.props.settings.suggestionRuleIds : ''
-    this.issues = {
+    let currentIssues = {
       "error": [],
       "suggestion": []
     }
 
     issueRuleIds.forEach(issue => {
       if (suggestionTypes.includes(issue)) {
-        this.issues.suggestion.push(issue)
+        currentIssues.suggestion.push(issue)
       } else {
-        this.issues.error.push(issue)
+        currentIssues.error.push(issue)
       }
     })
 
-    return (
-      <View as="div">
-        <Flex>
-          <Flex.Item shouldShrink shouldGrow align="start">
+    setIssues(currentIssues)
+  }, [])
+
+  return (
+    <View as="div">
+      <Flex>
+        <Flex.Item shouldShrink shouldGrow align="start">
+          <View as="div">
+            <Text as="p" lineHeight="default">
+              {ReactHtmlParser(t('about.description'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
+            </Text>
+          </View>
+          <View as="div" margin="large 0">
+            <Text as="strong">{t('about.disclaimer_title')}</Text>
+            <Text as="p" weight="normal" lineHeight="default">
+              {ReactHtmlParser(t('about.disclaimer'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
+            </Text>
+          </View>
+        </Flex.Item>
+        <Flex.Item size="400px" align="start" padding="small 0 0 large">
+          <View as="div">
+            {ReactHtmlParser(t('about.video_embed'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
+          </View>
+          <View as="div" textAlign="center">
+            {ReactHtmlParser(t('about.video_link'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
+          </View>
+
+          <View as="div" margin="large 0">
             <View as="div">
-              <Text as="p" lineHeight="default">
-                {ReactHtmlParser(this.props.t('about.description'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
-              </Text>
+              <Text as="strong">{t('about.resources')}</Text>
             </View>
-            <View as="div" margin="large 0">
-              <Text as="strong">{this.props.t('about.disclaimer_title')}</Text>
-              <Text as="p" weight="normal" lineHeight="default">
-                {ReactHtmlParser(this.props.t('about.disclaimer'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
-              </Text>
+            <View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
+              <View>
+                {ReactHtmlParser(t('about.user_guide_link'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
+              </View>
             </View>
-          </Flex.Item>
-          <Flex.Item size="400px" align="start" padding="small 0 0 large">
+          </View>
+
+          <View as="div" margin="large 0">
             <View as="div">
-              {ReactHtmlParser(this.props.t('about.video_embed'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
+              <Text as="strong">{t('about.policies')}</Text>
             </View>
-            <View as="div" textAlign="center">
-              {ReactHtmlParser(this.props.t('about.video_link'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
+            <View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
+                {ReactHtmlParser(t('about.youtube_terms'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
+            </View>  
+            <View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
+              {ReactHtmlParser(t('about.google_privacy'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
             </View>
+          </View>
+        </Flex.Item>
+      </Flex>
+      <View as="div" margin="medium 0" display="inline-block" width="100vw">
+        <ToggleDetails
+          summary={t('label.btn.udoit_details')}
+          expanded={expandDetails}
+          fluidWidth={true}
+          onToggle={handleDetailsToggle}>
 
-            <View as="div" margin="large 0">
-              <View as="div">
-                <Text as="strong">{this.props.t('about.resources')}</Text>
-              </View>
-              <View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
-                <View>
-                  {ReactHtmlParser(this.props.t('about.user_guide_link'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
+          {Object.keys(issues).map((issueType) => {
+            const type = issues[issueType]
+            return (
+              <View as="div" margin="small large" key={issueType}>
+                <View padding="x-small" margin="none">
+                  <Heading level="h3">
+                    {('error' === issueType) ? <IconNoLine className={Classes.error} /> : <IconInfoBorderlessLine className={Classes.suggestion} />}&nbsp;
+                    {t(`label.plural.${issueType}`)}
+                  </Heading><br />
                 </View>
+                {type.map((rule) => {
+                  let showExample = false
+                  if (!t(`rule.example.${rule}`).includes('rule.example')) {
+                    showExample = true
+                  }
+                  return (
+                    <ToggleDetails key={rule} summary={
+                      <Heading level="h4">
+                        {t(`rule.label.${rule}`)}
+                      </Heading>}
+                    >
+                      <View as="div" margin="small 0" background="primary" padding="small" shadow="above">
+                        {ReactHtmlParser(t(`rule.desc.${rule}`), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}
+                        {
+                          (showExample) &&
+                          <View as="div">{ReactHtmlParser(t(`rule.example.${rule}`), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, settings) })}</View>
+                        }
+                      </View>
+                    </ToggleDetails>
+                  )
+                })}
               </View>
-            </View>
-
-            <View as="div" margin="large 0">
-              <View as="div">
-                <Text as="strong">{this.props.t('about.policies')}</Text>
-              </View>
-              <View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
-                  {ReactHtmlParser(this.props.t('about.youtube_terms'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
-              </View>  
-              <View as="div" position="relative" textAlign="start" insetBlockStart="1vh">
-                {ReactHtmlParser(this.props.t('about.google_privacy'), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
-              </View>
-            </View>
-          </Flex.Item>
-        </Flex>
-        <View as="div" margin="medium 0" display="inline-block" width="100vw">
-          <ToggleDetails
-            summary={this.props.t('label.btn.udoit_details')}
-            expanded={this.state.expandDetails}
-            fluidWidth={true}
-            onToggle={this.handleDetailsToggle}>
-
-            {Object.keys(this.issues).map((issueType) => {
-              const type = this.issues[issueType]
-              return (
-                <View as="div" margin="small large" key={issueType}>
-                  <View padding="x-small" margin="none">
-                    <Heading level="h3">
-                      {('error' === issueType) ? <IconNoLine className={Classes.error} /> : <IconInfoBorderlessLine className={Classes.suggestion} />}&nbsp;
-                      {this.props.t(`label.plural.${issueType}`)}
-                    </Heading><br />
-                  </View>
-                  {type.map((rule) => {
-                    if (!this.props.t(`rule.example.${rule}`).includes('rule.example')) {
-                      var showExample = true
-                    }
-                    return (
-                      <ToggleDetails key={rule} summary={
-                        <Heading level="h4">
-                          {this.props.t(`rule.label.${rule}`)}
-                        </Heading>}
-                      >
-                        <View as="div" margin="small 0" background="primary" padding="small" shadow="above">
-                          {ReactHtmlParser(this.props.t(`rule.desc.${rule}`), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}
-                          {
-                            (showExample) &&
-                            <View as="div">{ReactHtmlParser(this.props.t(`rule.example.${rule}`), { preprocessNodes: (nodes) => Html.processStaticHtml(nodes, this.props.settings) })}</View>
-                          }
-                        </View>
-                      </ToggleDetails>
-                    )
-                  })}
-                </View>
-              )
-            })}
-          </ToggleDetails>
-        </View>
-        <View as="div" textAlign="end">
-          <Text weight="light">{this.props.t('label.version')} {this.props.settings.versionNumber}</Text>
-        </View>
+            )
+          })}
+        </ToggleDetails>
       </View>
-    )
-  }
-}
-
-export default AboutPage
+      <View as="div" textAlign="end">
+        <Text weight="light">{t('label.version')} {settings.versionNumber}</Text>
+      </View>
+    </View>
+  )
+}