From 1cf26089a0b98a76aa9e2e867ca9fb37b070c546 Mon Sep 17 00:00:00 2001
From: bh-ethz <benedict.henshaw@bsse.ethz.ch>
Date: Fri, 9 Feb 2024 15:45:07 +0100
Subject: [PATCH 1/4] fix(website): only use sentence case for metadata fields

---
 website/src/components/Edit/DataRow.tsx  |  5 ++--
 website/src/components/Edit/EditPage.tsx | 31 +++++++++++++-----------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/website/src/components/Edit/DataRow.tsx b/website/src/components/Edit/DataRow.tsx
index b2e8eae345..1bd2b0e9f3 100644
--- a/website/src/components/Edit/DataRow.tsx
+++ b/website/src/components/Edit/DataRow.tsx
@@ -1,4 +1,3 @@
-import { sentenceCase } from 'change-case';
 import { type FC } from 'react';
 
 import { InputField, type KeyValuePair, type Row } from './InputField.tsx';
@@ -15,7 +14,7 @@ export const EditableDataRow: FC<EditableRowProps> = ({ row, onChange }) => {
 
     return (
         <tr>
-            <td className={`w-1/4  ${colorClassName}`}>{sentenceCase(row.key)}:</td>
+            <td className={`w-1/4  ${colorClassName}`}>{row.key}:</td>
             <td className='pr-3 text-right '>
                 <ErrorAndWarningIcons row={row} />
             </td>
@@ -55,7 +54,7 @@ type ProcessedDataRowProps = {
 
 export const ProcessedDataRow: FC<ProcessedDataRowProps> = ({ row }) => (
     <tr>
-        <td className={`w-1/4 `}>{sentenceCase(row.key)}:</td>
+        <td className={`w-1/4 `}>{row.key}:</td>
         <td />
         <td className='w-full'>
             <div className='px-3'>{row.value}</div>{' '}
diff --git a/website/src/components/Edit/EditPage.tsx b/website/src/components/Edit/EditPage.tsx
index 328123f675..243e7a15fb 100644
--- a/website/src/components/Edit/EditPage.tsx
+++ b/website/src/components/Edit/EditPage.tsx
@@ -199,19 +199,22 @@ type EditableOriginalDataProps = {
 const EditableOriginalData: FC<EditableOriginalDataProps> = ({ editedMetadata, setEditedMetadata }) => (
     <>
         <Subtitle title='Metadata' />
-        {editedMetadata.map((field) => (
-            <EditableDataRow
-                key={'raw_metadata' + field.key}
-                row={field}
-                onChange={(editedRow: Row) =>
-                    setEditedMetadata((prevRows: Row[]) =>
-                        prevRows.map((prevRow) =>
-                            prevRow.key === editedRow.key ? { ...prevRow, value: editedRow.value } : prevRow,
-                        ),
-                    )
-                }
-            />
-        ))}
+        {editedMetadata.map((field) => {
+            field.key = sentenceCase(field.key);
+            return (
+                <EditableDataRow
+                    key={'raw_metadata' + field.key}
+                    row={field}
+                    onChange={(editedRow: Row) =>
+                        setEditedMetadata((prevRows: Row[]) =>
+                            prevRows.map((prevRow) =>
+                                prevRow.key === editedRow.key ? { ...prevRow, value: editedRow.value } : prevRow,
+                            ),
+                        )
+                    }
+                />
+            );
+        })}
     </>
 );
 
@@ -245,7 +248,7 @@ const ProcessedMetadata: FC<ProcessedMetadataProps> = ({ processedMetadata }) =>
     <>
         <Subtitle title='Metadata' customKey='preprocessing_metadata' />
         {Object.entries(processedMetadata).map(([key, value]) => (
-            <ProcessedDataRow key={'processed' + key} row={{ key, value: value.toString() }} />
+            <ProcessedDataRow key={'processed' + key} row={{ key: sentenceCase(key), value: value.toString() }} />
         ))}
     </>
 );

From 59b20a4b6f03bd0de5f4d1e458ba690deb885b25 Mon Sep 17 00:00:00 2001
From: bh-ethz <benedict.henshaw@bsse.ethz.ch>
Date: Fri, 9 Feb 2024 16:57:29 +0100
Subject: [PATCH 2/4] fix(website): update tests to expect correct case on
 field names

---
 website/src/components/Edit/EditPage.spec.tsx | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/website/src/components/Edit/EditPage.spec.tsx b/website/src/components/Edit/EditPage.spec.tsx
index da5ef3f6d9..6bfb352fb2 100644
--- a/website/src/components/Edit/EditPage.spec.tsx
+++ b/website/src/components/Edit/EditPage.spec.tsx
@@ -106,13 +106,13 @@ describe('EditPage', () => {
         renderEditPage();
 
         expect(screen.getByText(/Original Data/i)).toBeInTheDocument();
-        expectTextInSequenceData.original(defaultReviewData.originalData.metadata);
+        expectTextInSequenceData.originalMetadata(defaultReviewData.originalData.metadata);
 
         expect(screen.getAllByText(/Unaligned nucleotide sequences/i)[0]).toBeInTheDocument();
         expectTextInSequenceData.original(defaultReviewData.originalData.unalignedNucleotideSequences);
 
         expect(screen.getByText(/Processed Data/i)).toBeInTheDocument();
-        expectTextInSequenceData.processed(defaultReviewData.processedData.metadata);
+        expectTextInSequenceData.processedMetadata(defaultReviewData.processedData.metadata);
         expectTextInSequenceData.processed(defaultReviewData.processedData.unalignedNucleotideSequences);
 
         expect(screen.getByText(/^Aligned nucleotide sequences/i)).toBeInTheDocument();
@@ -121,10 +121,10 @@ describe('EditPage', () => {
         expect(screen.getByText(/Amino acid sequences/i)).toBeInTheDocument();
         expectTextInSequenceData.processed(defaultReviewData.processedData.alignedAminoAcidSequences);
 
-        expect(screen.getByText('Processed insertion sequence name:')).toBeInTheDocument();
+        expect(screen.getByText('processedInsertionSequenceName:')).toBeInTheDocument();
         expect(screen.getByText('nucleotideInsertion1,nucleotideInsertion2')).toBeInTheDocument();
 
-        expect(screen.getByText('Processed insertion gene name:')).toBeInTheDocument();
+        expect(screen.getByText('processedInsertionGeneName:')).toBeInTheDocument();
         expect(screen.getByText('aminoAcidInsertion1,aminoAcidInsertion2')).toBeInTheDocument();
     });
 
@@ -146,24 +146,34 @@ describe('EditPage', () => {
         const someTextToAdd = '_addedText';
         await userEvent.type(screen.getByDisplayValue(editableEntry), someTextToAdd);
 
-        expectTextInSequenceData.original({
+        expectTextInSequenceData.originalMetadata({
             [metadataKey]: editableEntry + someTextToAdd,
         });
         const undoButton = document.querySelector(`.tooltip[data-tip="Revert to: ${editableEntry}"]`);
         expect(undoButton).not.toBeNull();
 
         await userEvent.click(undoButton!);
-        expectTextInSequenceData.original(defaultReviewData.originalData.metadata);
+        expectTextInSequenceData.originalMetadata(defaultReviewData.originalData.metadata);
     });
 });
 
 const expectTextInSequenceData = {
     original: (metadata: Record<string, MetadataField>): void =>
+        Object.entries(metadata).forEach(([key, value]) => {
+            expect(screen.getByText(key + ':')).toBeInTheDocument();
+            expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
+        }),
+    originalMetadata: (metadata: Record<string, MetadataField>): void =>
         Object.entries(metadata).forEach(([key, value]) => {
             expect(screen.getByText(sentenceCase(key) + ':')).toBeInTheDocument();
             expect(screen.getByDisplayValue(value.toString())).toBeInTheDocument();
         }),
     processed: (metadata: Record<string, MetadataField>): void =>
+        Object.entries(metadata).forEach(([key, value]) => {
+            expect(screen.getByText(key + ':')).toBeInTheDocument();
+            expect(screen.getByText(value.toString())).toBeInTheDocument();
+        }),
+    processedMetadata: (metadata: Record<string, MetadataField>): void =>
         Object.entries(metadata).forEach(([key, value]) => {
             expect(screen.getByText(sentenceCase(key) + ':')).toBeInTheDocument();
             expect(screen.getByText(value.toString())).toBeInTheDocument();

From 99b35dc953850f9dfe2109b546b4d615bc7b32f2 Mon Sep 17 00:00:00 2001
From: bh-ethz <benedict.henshaw@bsse.ethz.ch>
Date: Fri, 9 Feb 2024 17:06:14 +0100
Subject: [PATCH 3/4] fix(website): fix input field name property being
 modified incorrectly

---
 website/src/components/Edit/EditPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/components/Edit/EditPage.tsx b/website/src/components/Edit/EditPage.tsx
index 243e7a15fb..e39adac8eb 100644
--- a/website/src/components/Edit/EditPage.tsx
+++ b/website/src/components/Edit/EditPage.tsx
@@ -200,10 +200,11 @@ const EditableOriginalData: FC<EditableOriginalDataProps> = ({ editedMetadata, s
     <>
         <Subtitle title='Metadata' />
         {editedMetadata.map((field) => {
+            const rawMetadataKey = 'raw_metadata' + field.key;
             field.key = sentenceCase(field.key);
             return (
                 <EditableDataRow
-                    key={'raw_metadata' + field.key}
+                    key={rawMetadataKey}
                     row={field}
                     onChange={(editedRow: Row) =>
                         setEditedMetadata((prevRows: Row[]) =>

From fbd9bd99aaed868641fe53fa23947b646f0140b7 Mon Sep 17 00:00:00 2001
From: bh-ethz <benedict.henshaw@bsse.ethz.ch>
Date: Fri, 9 Feb 2024 17:09:26 +0100
Subject: [PATCH 4/4] Revert "fix(website): fix input field name property being
 modified incorrectly"

This reverts commit 99b35dc953850f9dfe2109b546b4d615bc7b32f2.
---
 website/src/components/Edit/EditPage.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/src/components/Edit/EditPage.tsx b/website/src/components/Edit/EditPage.tsx
index e39adac8eb..243e7a15fb 100644
--- a/website/src/components/Edit/EditPage.tsx
+++ b/website/src/components/Edit/EditPage.tsx
@@ -200,11 +200,10 @@ const EditableOriginalData: FC<EditableOriginalDataProps> = ({ editedMetadata, s
     <>
         <Subtitle title='Metadata' />
         {editedMetadata.map((field) => {
-            const rawMetadataKey = 'raw_metadata' + field.key;
             field.key = sentenceCase(field.key);
             return (
                 <EditableDataRow
-                    key={rawMetadataKey}
+                    key={'raw_metadata' + field.key}
                     row={field}
                     onChange={(editedRow: Row) =>
                         setEditedMetadata((prevRows: Row[]) =>