Merge pull request ucfopen#1108 from mbusch3/report-page-ui

Rebuilt the reports page

Author: dmols

assets/css/udoit4-theme.css

@@ -45,7 +45,7 @@
     --link-color-light: color-mix(in srgb, var(--link-color) 5%, var(--white) 100%);  /* #E9F3FF; */
     --link-color-dark: color-mix(in srgb, var(--link-color) 100%, var(--black) 10%);
 
-    --text-secondary-color: #2F3741; /* #4A5565; */
+    --text-secondary-color: #434D5B; /* #4A5565; #2F3741; */
     --text-disabled-color: #8B95A7; /* #D1D5DC; */
 
     /* PILLS have three colors: border color, light background color, and text color */
@@ -70,6 +70,7 @@
     --help-color-text: #BB4D00;
 
     --background-color: var(--gray-lightest);
+    --container-color: #F2F4F7;
     --border-color: #C5C9D3; /* #E5E7EB; */
     --progress-bar-background-color: var(--gray-light);
     --progress-bar-color: var(--success-color);
@@ -283,7 +284,6 @@
     }
   }
 
-
   .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
@@ -352,12 +352,13 @@
     background-color: transparent;
     color: var(--link-color);
     padding: .15rem 0.5rem;
-    border-radius: 8px;
+    border-radius: var(--element-radius);
     cursor: pointer;
+    box-shadow: none;
   }
 
   .btn-header {
-    border-radius: 8px !important;
+    border-radius: var(--element-radius) !important;
     justify-content: center;
     width: 100%;
     font-size: 0.9em;
@@ -580,13 +581,20 @@
 
       .close-icon {
         cursor: pointer;
-        padding: .25rem;
+        padding: .2rem;
         margin-inline-end: -.5rem;
+        border: 1px solid transparent;
+        fill: var(--text-disabled-color);
+        box-shadow: none;
+        border-radius: 50%;
 
         &:hover,
         &:focus {
+          fill: var(--text-color);
           background-color: var(--gray-lighter);
-          border-radius: 50%;
+        }
+
+        &:focus {
           outline-offset: -2px;
           outline: 2px solid var(--focus-color);
         }
@@ -674,6 +682,22 @@
     }
   }
 
+  .ufixit-widget code,
+  .ufixit-widget-dialog code,
+  .ufixit-learn-container code,
+  .info-popover-content code {
+    padding: 0.15rem 0.4rem;
+    background-color: var(--gray-dark);
+    color: var(--white);
+    border-radius: 4px;
+    font-size: 0.9em;
+
+    strong {
+      font-weight: 400;
+      text-decoration: underline;
+    }
+  }
+
 }
 
 @layer udoit-layout {
@@ -1150,8 +1174,8 @@
   }
 
   .disabled {
-    color: var(--text-disabled);
-    fill: var(--text-disabled);
+    color: var(--text-disabled-color);
+    fill: var(--text-disabled-color);
   }
 
   .icon-sm {

assets/js/Components/App.js

@@ -369,8 +369,7 @@ export default function App(initialData) {
          className={`flex-column flex-grow-1 `
           + `${settings?.user?.roles?.font_size || settings.DEFAULT_USER_SETTINGS.FONT_SIZE} `
           + `${settings?.user?.roles?.font_family || settings.DEFAULT_USER_SETTINGS.FONT_FAMILY} `
-          + `${settings?.user?.roles?.dark_mode ? 'dark-mode' : ''} `
-          + `${('summary' === navigation && welcomeClosed) ? 'clear-background' : ''}`}>
+          + `${settings?.user?.roles?.dark_mode ? 'dark-mode' : ''}`}>
       { !welcomeClosed ?
         ( <WelcomePage
             t={t}

assets/js/Components/FixIssuesPage.js

@@ -886,7 +886,7 @@ export default function FixIssuesPage({
                   closeDialog()
                 }
               }}
-              className="close-icon icon-lg text-color"
+              className="close-icon icon-md"
               tabIndex="0"
               role="button"
               alt={t('fix.button.close')}

assets/js/Components/HomePage.css

@@ -32,6 +32,7 @@
   box-sizing: border-box;
   border: 1px solid var(--border-color);
   border-radius: var(--element-radius);
+  background-color: var(--white);
 
   .summary-icon-container {
     padding: .5rem;

assets/js/Components/HomePage.js

@@ -193,7 +193,7 @@ export default function HomePage({
                 <SeverityIcon type={panel.type} className='icon-lg' />
               </div>
               <div className="summary-text-container">
-                <h2>{t('summary.label.' + panel.translationKey)}</h2>
+                <h2 className="mt-0">{t('summary.label.' + panel.translationKey)}</h2>
                 <div aria-label={Html.getTextContent('<p>' + t('summary.' + panel.translationKey + '.description', {count: panel.counter.total}) + '</p>')}>
                   <div
                     className="subtext"
@@ -228,7 +228,7 @@ export default function HomePage({
 
       <div className="widget-container">
         <div className="callout-container feedback-container flex-column h-fit p-4 flex-grow-1">
-          <h2 className="text-center">{t('summary.label.course_progress')}</h2>
+          <h2 className="mt-0 text-center">{t('summary.label.course_progress')}</h2>
           <div className="flex-row align-self-center">
             <div className="flex-column progress-container">
               <div className="flex-row justify-content-center" aria-label={`${combinedCount.percent.toFixed(0)}%`}>

assets/js/Components/Reports/IssuesTable.css

@@ -1,7 +1,7 @@
 .issue-label {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: .75em;
 }
 
 .sr-only {

assets/js/Components/Reports/IssuesTable.js

@@ -1,13 +1,10 @@
 import React, { useState, useEffect, useRef } from 'react'
 import SortableTable from '../Widgets/SortableTable'
-import { formNameFromRule } from '../../Services/Ufixit'
-import InfoPopover from '../Widgets/InfoPopover'
 import './IssuesTable.css'
 
 export default function IssuesTable({
   t,
   issues,
-  quickSearchTerm = null,
   isAdmin,
   selectedCourse
 }) {
@@ -30,20 +27,19 @@ export default function IssuesTable({
     ascending: false,
     pageNum: 0,
   })
-  const [localIssues, setLocalIssues] = useState([])
   const [rows, setRows] = useState([])
 
   const sortContent = () => {
-    let tempRows = (issues) ? Object.values(localIssues) : []
+    let tempRows = (issues) ? Object.values(issues) : []
     const { sortBy, ascending } = tableSettings
 
     tempRows.sort((a, b) => {
       let aValue = a[sortBy]
       let bValue = b[sortBy]
 
-      if (sortBy === "label") {
-        aValue = a.labelText || ""
-        bValue = b.labelText || ""
+      if (typeof(aValue) === "object" && typeof(bValue) === "object") {
+        aValue = a[sortBy + "_display"] || ""
+        bValue = b[sortBy + "_display"] || ""
       }
 
       if (isNaN(aValue) || isNaN(bValue)) {
@@ -66,70 +62,7 @@ export default function IssuesTable({
 
   useEffect(() => {
     setRows(sortContent())
-  }, [tableSettings, localIssues])
-
-  useEffect(() => {
-    if (issues) {
-      let tempIssues = Object.values(issues)
-      tempIssues.map((issue => {
-        let label = ''
-        let searchTerm = ''
-        let formName = formNameFromRule(issue.id)
-        if(formName === 'review_only') {
-          label = t('report.label.unhandled') + issue.id
-          searchTerm = issue.id
-        }
-        else {
-          label = t(`form.${formName}.title`)
-          searchTerm = t(`form.${formName}.title`)
-        }
-        issue.labelText = label
-        issue.label = (
-          <span className="issue-label">
-            {label}
-            <InfoPopover
-              t={t}
-              content={t(`form.${formName}.summary`)}
-            />
-          </span>
-        )
-        issue.summary = t(`form.${formName}.summary`)
-        if(quickSearchTerm !== null) {
-          issue.onClick = () => quickSearchTerm(searchTerm)
-        }
-        return issue
-      }))
-
-      let mergedIssues = []
-      let labels = []
-      tempIssues.forEach((issue) => {
-        if (!labels.includes(issue.label)) {
-          labels.push(issue.label)
-          if(issue.type === 'error' || issue.type === 'issue') {
-            issue.type = t('filter.label.severity.issue')
-          }
-          else if(issue.type === 'potential') {
-            issue.type = t('filter.label.severity.potential')
-          }
-          else if(issue.type === 'suggestion') {
-            issue.type = t('filter.label.severity.suggestion')
-          }
-          issue.handled = (issue.fixed + issue.resolved > 0 ? 1 : 0)
-          mergedIssues.push(issue)
-        }
-        else {
-          let index = mergedIssues.findIndex((i) => i.label === issue.label)
-          mergedIssues[index].total += issue.total
-          mergedIssues[index].active += issue.active
-          mergedIssues[index].handled += (issue.fixed + issue.resolved > 0 ? 1 : 0)
-        }
-      })
-      setLocalIssues(mergedIssues)
-    }
-    else {
-      setLocalIssues([])
-    }
-  }, [issues])
+  }, [tableSettings, issues])
 
   return (
     <>

assets/js/Components/Reports/ReportsTable.js

@@ -56,7 +56,16 @@ export default function ReportsTable({
   };
 
   const getContent = () => {
-    let list = getLatestReports(reports); // Preprocess reports to get the latest entry per course
+    let list = []
+    if(reports && reports.length > 0) {
+      if(reports[0].courseName) {
+        list = getLatestReports(reports)  // Preprocess reports to get the latest entry per course
+      }
+      else {
+        list = reports  // If reports are already in the expected format, use them directly
+      }
+    }
+
     if (!list) {
       return [];
     }

assets/js/Components/Reports/ResolutionsReport.css

@@ -1,19 +1,11 @@
 .resolutions-report-container {
   display: flex;
-  flex-direction: row;
-  height: 100%;
+  flex-direction: column;
+  height: fit-content;
 }
 
 .resolutions-chart-area {
-  flex: 3;
-  padding: 20px;
-}
-
-.resolutions-header {
-  text-align: center;
-  width: 100%;
-  margin-top: 0;
-  margin-bottom: 0.5em;
+  padding-block-start: 1.5rem;
 }
 
 .resolutions-mode-toggle {