feat(myopencre): add CSV import preview and confirmation flow

Author: PRAteek-singHWY

application/frontend/src/pages/MyOpenCRE/MyOpenCRE.scss

@@ -12,4 +12,7 @@
 
 .myopencre-disabled {
   opacity: 0.7;
-}
+}
+.myopencre-preview {
+  margin-bottom: 1rem;
+}

application/frontend/src/pages/MyOpenCRE/MyOpenCRE.tsx

@@ -1,6 +1,6 @@
 import './MyOpenCRE.scss';
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Button, Container, Form, Header, Message } from 'semantic-ui-react';
 
 import { useEnvironment } from '../../hooks';
@@ -21,17 +21,52 @@ type ImportErrorResponse = {
 
 export const MyOpenCRE = () => {
   const { apiUrl } = useEnvironment();
-
   const isUploadEnabled = apiUrl !== '/rest/v1';
 
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<ImportErrorResponse | null>(null);
   const [success, setSuccess] = useState<any | null>(null);
 
-  // informational (no-op / empty) messages
+  const [preview, setPreview] = useState<{
+    rows: number;
+    creMappings: number;
+    uniqueSections: number;
+    creColumns: string[];
+  } | null>(null);
+
   const [info, setInfo] = useState<string | null>(null);
+  const [confirmedImport, setConfirmedImport] = useState(false);
+
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  /* ------------------ FILE SELECTION ------------------ */
+
+  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setError(null);
+    setSuccess(null);
+    setInfo(null);
+    setConfirmedImport(false);
+    setPreview(null);
+
+    if (!e.target.files || e.target.files.length === 0) return;
+
+    const file = e.target.files[0];
+
+    if (!file.name.toLowerCase().endsWith('.csv')) {
+      setError({
+        success: false,
+        type: 'FILE_ERROR',
+        message: 'Please upload a valid CSV file.',
+      });
+      e.target.value = '';
+      setSelectedFile(null);
+      return;
+    }
 
+    setSelectedFile(file);
+    generateCsvPreview(file);
+  };
   /* ------------------ CSV DOWNLOAD ------------------ */
 
   const downloadCreCsv = async () => {
@@ -61,41 +96,15 @@ export const MyOpenCRE = () => {
       alert('Failed to download CRE CSV');
     }
   };
-
-  /* ------------------ FILE SELECTION ------------------ */
-
-  const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setError(null);
-    setSuccess(null);
-    setInfo(null); // lear stale info messages
-
-    if (!e.target.files || e.target.files.length === 0) return;
-
-    const file = e.target.files[0];
-
-    if (!file.name.toLowerCase().endsWith('.csv')) {
-      setError({
-        success: false,
-        type: 'FILE_ERROR',
-        message: 'Please upload a valid CSV file.',
-      });
-      e.target.value = '';
-      setSelectedFile(null);
-      return;
-    }
-
-    setSelectedFile(file);
-  };
-
   /* ------------------ CSV UPLOAD ------------------ */
 
   const uploadCsv = async () => {
-    if (!selectedFile) return;
+    if (!selectedFile || !confirmedImport) return;
 
     setLoading(true);
     setError(null);
     setSuccess(null);
-    setInfo(null); // reset info on upload
+    setInfo(null);
 
     const formData = new FormData();
     formData.append('cre_csv', selectedFile);
@@ -116,10 +125,11 @@ export const MyOpenCRE = () => {
 
       if (!response.ok) {
         setError(payload);
+        setPreview(null);
+        setConfirmedImport(false);
         return;
       }
 
-      // handle backend import_type semantics
       if (payload.import_type === 'noop') {
         setInfo(
           'Import completed successfully, but no new CREs or standards were added because all mappings already exist.'
@@ -130,13 +140,19 @@ export const MyOpenCRE = () => {
         setSuccess(payload);
       }
 
-      setSelectedFile(null);
+      setConfirmedImport(false);
+      setPreview(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
     } catch (err: any) {
       setError({
         success: false,
         type: 'CLIENT_ERROR',
         message: err.message || 'Unexpected error during import',
       });
+      setPreview(null);
+      setConfirmedImport(false);
     } finally {
       setLoading(false);
     }
@@ -165,22 +181,58 @@ export const MyOpenCRE = () => {
     return <Message negative>{error.message || 'Import failed'}</Message>;
   };
 
+  /* ------------------ CSV PREVIEW ------------------ */
+
+  const generateCsvPreview = async (file: File) => {
+    const text = await file.text();
+    const lines = text.split('\n').filter(Boolean);
+
+    if (lines.length < 2) {
+      setPreview(null);
+      return;
+    }
+
+    const headers = lines[0].split(',').map((h) => h.trim());
+    const rows = lines.slice(1);
+
+    const creColumns = headers.filter((h) => h.startsWith('CRE'));
+    let creMappings = 0;
+    const sectionSet = new Set<string>();
+
+    rows.forEach((line) => {
+      const values = line.split(',');
+      const rowObj: Record<string, string> = {};
+
+      headers.forEach((h, i) => {
+        rowObj[h] = (values[i] || '').trim();
+      });
+
+      const name = (rowObj['standard|name'] || '').trim();
+      const id = (rowObj['standard|id'] || '').trim();
+
+      if (name || id) {
+        sectionSet.add(`${name}|${id}`);
+      }
+
+      creColumns.forEach((col) => {
+        if (rowObj[col]) creMappings += 1;
+      });
+    });
+
+    setPreview({
+      rows: rows.length,
+      creMappings,
+      uniqueSections: sectionSet.size,
+      creColumns,
+    });
+  };
+
   /* ------------------ UI ------------------ */
 
   return (
     <Container className="myopencre-container">
       <Header as="h1">MyOpenCRE</Header>
 
-      <p>
-        MyOpenCRE allows you to map your own security standard (e.g. SOC2) to OpenCRE Common Requirements
-        using a CSV spreadsheet.
-      </p>
-
-      <p>
-        Start by downloading the CRE catalogue below, then map your standard’s controls or sections to CRE IDs
-        in the spreadsheet.
-      </p>
-
       <div className="myopencre-section">
         <Button primary onClick={downloadCreCsv}>
           Download CRE Catalogue (CSV)
@@ -190,21 +242,8 @@ export const MyOpenCRE = () => {
       <div className="myopencre-section myopencre-upload">
         <Header as="h3">Upload Mapping CSV</Header>
 
-        <p>Upload your completed mapping spreadsheet to import your standard into OpenCRE.</p>
-
-        {!isUploadEnabled && (
-          <Message info className="myopencre-disabled">
-            CSV upload is disabled on hosted environments due to resource constraints.
-            <br />
-            Please run OpenCRE locally to enable standard imports.
-          </Message>
-        )}
-
         {renderErrorMessage()}
-
-        {/* informational messages for noop / empty */}
         {info && <Message info>{info}</Message>}
-
         {success && (
           <Message positive>
             <strong>Import successful</strong>
@@ -215,15 +254,62 @@ export const MyOpenCRE = () => {
           </Message>
         )}
 
+        {confirmedImport && !loading && !success && !error && (
+          <Message positive>
+            CSV validated successfully. Click <strong>Upload CSV</strong> to start importing.
+          </Message>
+        )}
+
+        {preview && (
+          <Message info className="myopencre-preview">
+            <strong>Import Preview</strong>
+            <ul>
+              <li>Rows detected: {preview.rows}</li>
+              <li>CRE mappings found: {preview.creMappings}</li>
+              <li>Unique standard sections: {preview.uniqueSections}</li>
+              <li>CRE columns detected: {preview.creColumns.join(', ')}</li>
+            </ul>
+
+            <Button
+              primary
+              size="small"
+              onClick={() => {
+                setPreview(null);
+                setConfirmedImport(true);
+              }}
+            >
+              Confirm Import
+            </Button>
+
+            <Button
+              size="small"
+              onClick={() => {
+                setPreview(null);
+                setConfirmedImport(false);
+                setSelectedFile(null);
+                if (fileInputRef.current) fileInputRef.current.value = '';
+              }}
+            >
+              Cancel
+            </Button>
+          </Message>
+        )}
+
         <Form>
           <Form.Field>
-            <input type="file" accept=".csv" disabled={!isUploadEnabled || loading} onChange={onFileChange} />
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".csv"
+              disabled={!isUploadEnabled || loading || !!preview}
+              onChange={onFileChange}
+            />
           </Form.Field>
 
           <Button
             primary
             loading={loading}
-            disabled={!isUploadEnabled || !selectedFile || loading}
+            disabled={!isUploadEnabled || !selectedFile || !confirmedImport || loading}
             onClick={uploadCsv}
           >
             Upload CSV