Release/1.21.9

.gitignore

@@ -7,6 +7,7 @@ node_modules
 
 # testing
 /coverage
+*xlsx
 
 # production
 src/buildInfo.json
@@ -29,4 +30,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-notes
+notes
+.sentryclirc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cmap_react",
-  "version": "1.21.8",
+  "version": "1.21.9",
   "private": true,
   "scripts": {
     "start": "export REACT_APP_ENABLE_SENTRY=false && npm run pre-build && react-scripts --max_old_space_size=4096 start",

src/Components/DataSubmission/ChangeTable.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import {
+  Typography,
+  Paper,
+  Link,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { getChangeSummary } from './Helpers/changeLog';
+import TimeChangesTable from './Helpers/WorkbookAudits/TimeChangesTable';
+import { groupTimeChangesByConversionType } from './Helpers/formatDataSheet';
+
+const useStyles = makeStyles((theme) => ({
+  changeSummaryHeader: {
+    fontSize: '1.1em',
+    fontWeight: 'bold',
+    textDecoration: 'underline',
+    textDecorationColor: theme.palette.secondary.main,
+  },
+  tableRoot: {
+    '& .MuiTableCell-stickyHeader': {
+      backgroundColor: 'rgb(5, 27, 54)',
+    },
+  },
+  changeTableContainer: {
+    maxHeight: 440,
+  },
+  submittedTypography: {
+    marginBottom: '12px',
+  },
+  needHelpLink: {
+    letterSpacing: 'normal',
+    color: theme.palette.primary.main,
+    cursor: 'pointer',
+  },
+  sectionHeader: {
+    fontSize: '1em',
+    fontWeight: 'bold',
+    marginTop: '16px',
+    marginBottom: '8px',
+  },
+}));
+
+const ChangeRow = (props) => {
+  const { data } = props;
+  const { sheet, row, col, original, current } = data;
+  return (
+    <TableRow>
+      <TableCell>{sheet}</TableCell>
+      <TableCell>{row}</TableCell>
+      <TableCell>{col}</TableCell>
+      <TableCell>{original}</TableCell>
+      <TableCell>{current}</TableCell>
+    </TableRow>
+  );
+};
+
+const ChangeTable = (props) => {
+  const cl = useStyles();
+  const { getChangeLog, handleDownloadWorkbook, dataChanges } = props;
+  const changeLog = getChangeLog();
+
+  const hasUserChanges =
+    changeLog && Array.isArray(changeLog) && changeLog.length > 0;
+  const hasAutoChanges =
+    dataChanges && Array.isArray(dataChanges) && dataChanges.length > 0;
+
+  if (!hasUserChanges && !hasAutoChanges) {
+    return (
+      <div>
+        <Typography className={cl.changeSummaryHeader}>
+          Change Summary
+        </Typography>
+        <Typography className={cl.submittedTypography}>
+          No changes to the uploaded submission file were made in the validation
+          process.
+        </Typography>
+      </div>
+    );
+  }
+
+  const userChangeSummary = hasUserChanges ? getChangeSummary(changeLog) : [];
+
+  // Process automatic changes using the shared utility
+  const processedAutoChanges = hasAutoChanges
+    ? groupTimeChangesByConversionType(dataChanges)
+    : [];
+
+  return (
+    <div>
+      <Typography className={cl.changeSummaryHeader}>Change Summary</Typography>
+      <Typography className={cl.submittedTypography}>
+        The changes made to the uploaded file during the validation process are
+        listed below. You can download the edited workbook by clicking{' '}
+        <Link
+          style={{ display: 'inline-block' }}
+          className={cl.needHelpLink}
+          onClick={handleDownloadWorkbook}
+          component="span"
+        >
+          here
+        </Link>
+        .
+      </Typography>
+
+      {hasAutoChanges && (
+        <>
+          <Typography className={cl.sectionHeader}>
+            Automatic Time Format Changes
+          </Typography>
+          <TimeChangesTable
+            summary={`${dataChanges.length} rows had time format conversions applied during initial file processing.`}
+            note="Showing one example of each conversion type:"
+            changes={processedAutoChanges}
+          />
+        </>
+      )}
+
+      {hasUserChanges && (
+        <>
+          <Typography className={cl.sectionHeader}>Manual Changes</Typography>
+          <TableContainer component={Paper} className={cl.changeTableContainer}>
+            <Table
+              aria-label="user changes table"
+              stickyHeader
+              className={cl.tableRoot}
+            >
+              <TableHead>
+                <TableRow>
+                  <TableCell>Sheet</TableCell>
+                  <TableCell>Row</TableCell>
+                  <TableCell>Column</TableCell>
+                  <TableCell>Original Value</TableCell>
+                  <TableCell>Changed Value</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {userChangeSummary.map((change, i) => (
+                  <ChangeRow data={change} key={`user_change_row_${i}`} />
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ChangeTable;

src/Components/DataSubmission/Helpers/WorkbookAudits/TimeChangesTable.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+  Paper,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import renderText from '../../../Home/News/renderText';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    marginTop: theme.spacing(2),
+    maxHeight: '400px',
+    backgroundColor: 'rgba(16, 43, 60, 0.6)',
+    backdropFilter: 'blur(20px)',
+  },
+  table: {
+    '& th': {
+      fontWeight: 'bold',
+      backgroundColor: 'rgba(30, 67, 113, 1)',
+      color: theme.palette.common.white,
+    },
+    '& td': {
+      borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+    },
+  },
+  description: {
+    marginBottom: theme.spacing(1),
+  },
+  note: {
+    marginBottom: theme.spacing(2),
+    fontStyle: 'italic',
+  },
+  row: {
+    '&:nth-of-type(odd)': {
+      backgroundColor: 'rgba(30, 67, 113, 0.2)',
+    },
+  },
+  cellBefore: {
+    color: theme.palette.error.light,
+    fontFamily: 'monospace',
+  },
+  cellAfter: {
+    color: theme.palette.success.light,
+    fontFamily: 'monospace',
+  },
+  noChanges: {
+    marginTop: theme.spacing(2),
+    color: theme.palette.text.secondary,
+    fontStyle: 'italic',
+  },
+}));
+const descriptions = {
+  EXCEL_TO_UTC:
+    'Excel numeric date format does not include timezone information, assumed to be UTC',
+  STRING_NO_TZ_TO_UTC:
+    'String time without timezone information assumed to be UTC',
+  STRING_NON_UTC_TO_UTC:
+    'String time with non-UTC timezone was converted to UTC',
+};
+
+const TimeChangesTable = (props) => {
+  const { summary, note, changes } = props;
+  const classes = useStyles();
+
+  if (!changes || changes.length === 0) {
+    return (
+      <div>
+        <Typography className={classes.description}>
+          {renderText(summary)}
+        </Typography>
+        <Typography className={classes.noChanges}>
+          No actual changes were made to time values
+        </Typography>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Typography className={classes.description}>
+        {renderText(summary)}
+      </Typography>
+      {note && (
+        <Typography className={classes.note}>{renderText(note)}</Typography>
+      )}
+
+      <TableContainer component={Paper} className={classes.container}>
+        <Table stickyHeader className={classes.table} size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>Row</TableCell>
+              <TableCell>Original Value</TableCell>
+              <TableCell>Converted Value</TableCell>
+              <TableCell>Conversion Type</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {changes.map((row) => (
+              <TableRow key={row.row} className={classes.row}>
+                <TableCell>{row.row}</TableCell>
+                <TableCell className={classes.cellBefore}>
+                  {row.prevValue}
+                </TableCell>
+                <TableCell className={classes.cellAfter}>
+                  {row.newValue}
+                </TableCell>
+                <TableCell>{descriptions[row.conversionType]}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+};
+
+export default TimeChangesTable;

src/Components/DataSubmission/Helpers/WorkbookAudits/index.js

@@ -18,6 +18,7 @@ import multiCruiseFormat from './multipleCruisesFormat';
 import extraColumns from './extraColumns';
 import checkDuplicateVarNames from './checkDuplicateVarNames';
 import missingCruise from './missingCruise';
+import timeColumnChanges from './timeColumnChanges';
 
 import { formatEvent } from '../../../../Utility/debugTimer';
 
@@ -41,6 +42,7 @@ const audits = [
   extraColumns,
   checkDuplicateVarNames,
   missingCruise,
+  timeColumnChanges,
 ];
 
 /*

src/Components/DataSubmission/Helpers/WorkbookAudits/timeColumnChanges.js

@@ -0,0 +1,45 @@
+import auditFactory, {
+  requireDataAndVars,
+  makeIssueWithCustomComponent,
+} from './auditFactory';
+import severity from './severity';
+import TimeChangesTable from './TimeChangesTable';
+import { groupTimeChangesByConversionType } from '../formatDataSheet';
+
+const AUDIT_NAME = 'Time Column Changes';
+const DESCRIPTION = 'Report changes made to the time column';
+
+// :: args -> [result]
+const check = (standardAuditArgs) => {
+  const { dataChanges } = standardAuditArgs;
+  const results = [];
+
+  if (!dataChanges || dataChanges.length === 0) {
+    return results;
+  }
+
+  // Process the changes using the shared utility
+  const exampleChanges = groupTimeChangesByConversionType(dataChanges);
+
+  // Use the custom table component to display the changes
+  results.push(
+    makeIssueWithCustomComponent(
+      severity.confirmation,
+      'Time Column Changes',
+      TimeChangesTable,
+      {
+        summary: `${dataChanges.length} rows had time format conversions applied.`,
+        note: 'Showing one example of each conversion type:',
+        changes: exampleChanges,
+      },
+    ),
+  );
+
+  return results;
+};
+
+const auditFn = requireDataAndVars(AUDIT_NAME, check);
+
+const audit = auditFactory(AUDIT_NAME, DESCRIPTION, auditFn);
+
+export default audit;