Merge pull request #123 from UgnisSoftware/UGN-359

bug UGN-359  - fix trimmed rows if header.length < row.length.

Author: JulitorK

src/steps/MatchColumnsStep/MatchColumnsStep.tsx

@@ -68,7 +68,8 @@ export const MatchColumnsStep = <T extends string>({ data, headerValues, onConti
   const { fields, autoMapHeaders, autoMapDistance, translations } = useRsi<T>()
   const [isLoading, setIsLoading] = useState(false)
   const [columns, setColumns] = useState<Columns<T>>(
-    (headerValues as string[]).map((value, index) => ({ type: ColumnType.empty, index, header: value })),
+    // Do not remove spread, it indexes empty array elements, otherwise map() skips over them
+    ([...headerValues] as string[]).map((value, index) => ({ type: ColumnType.empty, index, header: value ?? "" })),
   )
   const [showUnmatchedFieldsAlert, setShowUnmatchedFieldsAlert] = useState(false)
 

src/steps/MatchColumnsStep/components/ColumnGrid.tsx

@@ -40,7 +40,7 @@ export const ColumnGrid = <T extends string>({
             <Text sx={styles.title}>{translations.matchColumnsStep.userTableTitle}</Text>
           </Box>
           {columns.map((column, index) => (
-            <Box gridRow="2/3" gridColumn={`${index + 2}/${index + 3}`} pt={3} key={column.header}>
+            <Box gridRow="2/3" gridColumn={`${index + 2}/${index + 3}`} pt={3} key={column.header + index}>
               {userColumn(column)}
             </Box>
           ))}
@@ -50,7 +50,14 @@ export const ColumnGrid = <T extends string>({
           </Box>
           <FadingWrapper gridColumn={`1/${columns.length + 3}`} gridRow="4/5" />
           {columns.map((column, index) => (
-            <Box gridRow="4/5" gridColumn={`${index + 2}/${index + 3}`} key={column.index} py="1.125rem" pl={2} pr={3}>
+            <Box
+              gridRow="4/5"
+              gridColumn={`${index + 2}/${index + 3}`}
+              key={column.header + index}
+              py="1.125rem"
+              pl={2}
+              pr={3}
+            >
               {templateColumn(column)}
             </Box>
           ))}

src/steps/MatchColumnsStep/utils/normalizeTableData.ts

@@ -5,8 +5,8 @@ import { normalizeCheckboxValue } from "./normalizeCheckboxValue"
 
 export const normalizeTableData = <T extends string>(columns: Columns<T>, data: RawData[], fields: Fields<T>) =>
   data.map((row) =>
-    row.reduce((acc, curr, index) => {
-      const column = columns[index]
+    columns.reduce((acc, column, index) => {
+      const curr = row[index]
       switch (column.type) {
         case ColumnType.matchedCheckbox: {
           const field = fields.find((field) => field.key === column.value)!

src/steps/SelectHeaderStep/components/columns.tsx

@@ -35,12 +35,13 @@ export const SelectColumn: Column<any, any> = {
   formatter: SelectFormatter,
 }
 
-export const generateSelectionColumns = (data: RawData[]) => [
-  SelectColumn,
-  ...data?.[0].map(
-    (value, index): Column<any, any> => ({
+export const generateSelectionColumns = (data: RawData[]) => {
+  const longestRowLength = data.reduce((acc, curr) => (acc > curr.length ? acc : curr.length), 0)
+  return [
+    SelectColumn,
+    ...Array.from(Array(longestRowLength), (_, index) => ({
       key: index.toString(),
       name: "",
-    }),
-  ),
-]
+    })),
+  ]
+}

src/steps/SelectHeaderStep/tests/SelectHeaderStep.test.tsx

@@ -14,6 +14,7 @@ const CONTINUE_BUTTON = "Next"
 const ERROR_MESSAGE = "Something happened"
 const RAW_DATE = "2020-03-03"
 const FORMATTED_DATE = "2020/03/03"
+const TRAILING_CELL = "trailingcell"
 
 test("Select header row and click next", async () => {
   const data = [
@@ -168,3 +169,33 @@ test("dateFormat property should be applied to dates read from xlsx files", asyn
   const el = await screen.findByText(FORMATTED_DATE, undefined, { timeout: 10000 })
   expect(el).toBeInTheDocument()
 })
+
+test(
+  "trailing (not under a header) cells should be rendered in SelectHeaderStep table, " +
+    "but not in MatchColumnStep if a shorter row is selected as a header",
+  async () => {
+    const selectHeaderStepHook = jest.fn(async (headerValues, data) => {
+      return { headerValues, data }
+    })
+    render(<ReactSpreadsheetImport {...mockRsiValues} selectHeaderStepHook={selectHeaderStepHook} />)
+    const uploader = screen.getByTestId("rsi-dropzone")
+    const data = readFileSync(__dirname + "/../../../../static/TrailingCellsWorkbook.xlsx")
+    fireEvent.drop(uploader, {
+      target: {
+        files: [
+          new File([data], "testFile.xlsx", {
+            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+          }),
+        ],
+      },
+    })
+    const trailingCell = await screen.findByText(TRAILING_CELL, undefined, { timeout: 10000 })
+    expect(trailingCell).toBeInTheDocument()
+    const nextButton = screen.getByRole("button", {
+      name: "Next",
+    })
+    userEvent.click(nextButton)
+    const trailingCellNextPage = await screen.findByText(TRAILING_CELL, undefined, { timeout: 10000 })
+    expect(trailingCellNextPage).not.toBeInTheDocument()
+  },
+)