[OSDEV-2084] Enable Self Service Data Upload (Dromo)

src/django/api/migrations/0176_introduce_enable_dromo_uploading_switch .py

@@ -0,0 +1,28 @@
+from django.db import migrations
+
+
+def create_enable_dromo_uploading_switch(apps, schema_editor):
+    switch = apps.get_model('waffle', 'Switch')
+    switch.objects.create(name='enable_dromo_uploading', active=False)
+
+
+def delete_enable_dromo_uploading_switch(apps, schema_editor):
+    switch = apps.get_model('waffle', 'Switch')
+    switch.objects.get(name='enable_dromo_uploading').delete()
+
+
+class Migration(migrations.Migration):
+    """
+    Migration to introduce a switch for enabling Dromo uploading.
+    """
+
+    dependencies = [
+        ('api', '0175_increase_path_max_length'),
+    ]
+
+    operations = [
+        migrations.RunPython(
+            create_enable_dromo_uploading_switch,
+            delete_enable_dromo_uploading_switch,
+        )
+    ]

src/react/package.json

@@ -16,6 +16,7 @@
         "core-js": "3.9.1",
         "draft-js": "^0.11.7",
         "draftjs-to-html": "^0.9.1",
+        "dromo-uploader-react": "^2.1.10",
         "file-saver": "2.0.0",
         "formik": "2.4.6",
         "http-proxy-middleware": "0.19.1",

src/react/src/__tests__/components/SelfServiceDromoUploader.test.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import SelfServiceDromoUploader from '../../components/SelfServiceDromoUploader';
+import { processDromoResults } from '../../util/util';
+
+jest.mock('dromo-uploader-react', () => function MockDromoUploader({ open, onCancel, onResults }) {
+    return (
+        <div data-testid="dromo-uploader" data-open={open ? 'true' : 'false'}>
+            <button
+                type='button'
+                data-testid="dromo-cancel-button"
+                onClick={onCancel}
+            >
+                Cancel
+            </button>
+            {onResults && (
+                <button
+                    type='button'
+                    data-testid="dromo-results-button"
+                    onClick={() => onResults([{ foo: 'bar' }], { filename: 'test.csv' })}
+                >
+                    Simulate Results
+                </button>
+            )}
+        </div>
+    );
+});
+
+jest.mock('@material-ui/core/Button', () => (props) => (
+    <button type='button' {...props}>{props.children}</button>
+));
+
+jest.mock('../../util/util', () => ({
+    processDromoResults: jest.fn(),
+}));
+
+
+describe('SelfServiceDromoUploader component', () => {
+    const fileInput = {};
+    const updateFileName = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders the upload button', () => {
+        const { getByText } = render(<SelfServiceDromoUploader fileInput={fileInput} updateFileName={updateFileName} />);
+
+        expect(getByText('Beta Self Service Upload')).toBeInTheDocument();
+    });
+
+    it('opens the uploader when button is clicked', () => {
+        const { getByText, getByTestId } = render(
+            <SelfServiceDromoUploader fileInput={fileInput} updateFileName={updateFileName} />
+        );
+
+        fireEvent.click(getByText('Beta Self Service Upload'));
+
+        expect(getByTestId('dromo-uploader')).toHaveAttribute('data-open', 'true');
+    });
+
+    it('calls onCancel and closes uploader', () => {
+        const { getByText, getByTestId } = render(
+            <SelfServiceDromoUploader fileInput={fileInput} updateFileName={updateFileName} />
+        );
+
+        fireEvent.click(getByText('Beta Self Service Upload'));
+        fireEvent.click(getByTestId('dromo-cancel-button'));
+
+        expect(getByTestId('dromo-uploader')).toHaveAttribute('data-open', 'false');
+    });
+
+    it('handles Dromo results and calls processDromoResults', () => {
+        const { getByText, getByTestId } = render(
+            <SelfServiceDromoUploader fileInput={fileInput} updateFileName={updateFileName} />
+        );
+
+        fireEvent.click(getByText('Beta Self Service Upload'));
+        fireEvent.click(getByTestId('dromo-results-button'));
+
+        expect(processDromoResults).toHaveBeenCalledWith(
+            [{ foo: 'bar' }],
+            'test.csv',
+            fileInput,
+            updateFileName
+        );
+
+        expect(getByTestId('dromo-uploader')).toHaveAttribute('data-open', 'false');
+    });
+});

src/react/src/__tests__/utils.tests.js

@@ -85,6 +85,7 @@ const {
     snakeToTitleCase,
     slcValidationSchema,
     formatExtendedField,
+    processDromoResults,
 } = require('../util/util');
 
 const {
@@ -2646,3 +2647,89 @@ describe('formatExtendedField', () => {
         expect(result.isFromClaim).toBe(false);
     });
 });
+
+describe('processDromoResults', () => {
+    let originalBlob;
+    let originalFile;
+    let originalDataTransfer;
+    let fileInput;
+    let updateFileName;
+
+    beforeAll(() => {
+        // Mock Blob, File, DataTransfer for the test environment
+        originalBlob = global.Blob;
+        originalFile = global.File;
+        originalDataTransfer = global.DataTransfer;
+
+        global.Blob = function (content, options) {
+            this.content = content;
+            this.options = options;
+        };
+        global.File = function (content, name, options) {
+            this.content = content;
+            this.name = name;
+            this.options = options;
+        };
+        global.DataTransfer = function () {
+            this.items = {
+                files: [],
+                add(file) {
+                    this.files.push(file);
+                },
+            };
+            Object.defineProperty(this, 'files', {
+                get: () => this.items.files,
+            });
+        };
+    });
+
+    afterAll(() => {
+        global.Blob = originalBlob;
+        global.File = originalFile;
+        global.DataTransfer = originalDataTransfer;
+    });
+
+    beforeEach(() => {
+        fileInput = { current: { files: null } };
+        updateFileName = jest.fn();
+        jest.spyOn(console, 'log').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it('should do nothing if results is undefined', () => {
+        processDromoResults(undefined, 'file.xlsx', fileInput, updateFileName);
+        expect(updateFileName).not.toHaveBeenCalled();
+        expect(fileInput.current.files).toBeNull();
+    });
+
+    it('should do nothing if results is empty', () => {
+        processDromoResults([], 'file.xlsx', fileInput, updateFileName);
+        expect(updateFileName).not.toHaveBeenCalled();
+        expect(fileInput.current.files).toBeNull();
+    });
+
+    it('should process results and update file input', () => {
+        const results = [
+            { name: 'Alice', age: 30 },
+            { name: 'Bob', age: 25 },
+        ];
+        processDromoResults(results, 'file.xlsx', fileInput, updateFileName);
+
+        expect(fileInput.current.files).toHaveLength(1);
+        const file = fileInput.current.files[0];
+        expect(file.name).toBe('file.csv');
+        expect(file.options.type).toBe('text/csv');
+
+        expect(updateFileName).toHaveBeenCalledWith(fileInput);
+    });
+
+    it('should not update file input if fileInput.current is null', () => {
+        const results = [{ name: 'Alice', age: 30 }];
+        fileInput.current = null;
+        processDromoResults(results, 'file.xlsx', fileInput, updateFileName);
+        expect(updateFileName).not.toHaveBeenCalled();
+    });
+});

src/react/src/components/ContributeForm.jsx

@@ -17,6 +17,7 @@ import Button from './Button';
 import FeatureFlag from './FeatureFlag';
 import ContributeFormSelectListToReplace from './ContributeFormSelectListToReplace';
 import ListUploadErrors from './ListUploadErrors';
+import SelfServiceDromoUploader from './SelfServiceDromoUploader';
 import StyledTooltip from './StyledTooltip';
 
 import COLOURS from '../util/COLOURS';
@@ -33,6 +34,7 @@ import {
     contributeFieldsEnum,
     DISABLE_LIST_UPLOADING,
     MAINTENANCE_MESSAGE,
+    ENABLE_DROMO_UPLOADING,
 } from '../util/constants';
 
 import { useFileUploadHandler } from '../util/hooks';
@@ -54,6 +56,10 @@ import {
 import { facilityListPropType } from '../util/propTypes';
 
 const contributeFormStyles = Object.freeze({
+    uploaderButtonWrapper: Object.freeze({
+        display: 'flex',
+        gap: '10px',
+    }),
     fileNameText: Object.freeze({
         color: COLOURS.LIGHT_BLUE,
         fontSize: '12px',
@@ -140,17 +146,33 @@ const ContributeForm = ({
         <div className="control-panel__group">
             {formInputs}
             <div className="form__field">
-                <MaterialButton
-                    onClick={selectFile}
-                    type="button"
-                    variant="outlined"
-                    color="primary"
-                    className="outlined-button"
-                    disableRipple
-                >
-                    Select Facility List File
-                </MaterialButton>
+                <div style={contributeFormStyles.uploaderButtonWrapper}>
+                    <MaterialButton
+                        onClick={selectFile}
+                        type="button"
+                        variant="outlined"
+                        color="primary"
+                        className="outlined-button"
+                        disableRipple
+                    >
+                        Select Facility List File
+                    </MaterialButton>
+                    <FeatureFlag flag={ENABLE_DROMO_UPLOADING}>
+                        <SelfServiceDromoUploader
+                            fileInput={fileInput}
+                            updateFileName={updateFileName}
+                        />
+                    </FeatureFlag>
+                </div>
                 <p style={contributeFormStyles.fileNameText}>{filename}</p>
+                <p
+                    style={{
+                        fontSize: '12px',
+                        marginTop: '8px',
+                    }}
+                >
+                    Upload CSV or Excel files using our enhanced file selector
+                </p>
                 <input
                     type="file"
                     accept=".csv,.xlsx"

src/react/src/components/SelfServiceDromoUploader.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { object, func } from 'prop-types';
+import DromoUploader from 'dromo-uploader-react';
+import MaterialButton from '@material-ui/core/Button';
+import { processDromoResults } from '../util/util';
+
+const uploaderButtonStyle = Object.freeze({
+    backgroundColor: '#62CC74',
+    color: 'white',
+});
+
+const SelfServiceDromoUploader = ({ fileInput, updateFileName }) => {
+    const [isUploaderOpen, setIsUploaderOpen] = useState(false);
+
+    const openUploader = () => setIsUploaderOpen(true);
+    const closeUploader = () => setIsUploaderOpen(false);
+
+    const handleDromoResults = (results, metadata) => {
+        const { filename } = metadata;
+
+        processDromoResults(results, filename, fileInput, updateFileName);
+        closeUploader();
+    };
+
+    return (
+        <>
+            <MaterialButton
+                onClick={openUploader}
+                type="button"
+                variant="contained"
+                style={uploaderButtonStyle}
+                disableRipple
+            >
+                Beta Self Service Upload
+            </MaterialButton>
+
+            <DromoUploader
+                licenseKey="ee427cf5-da27-4f28-a260-c9a17d02ad30"
+                schemaId="6f3e129c-d724-4b80-b2c9-8e54b47e8017"
+                open={isUploaderOpen}
+                onCancel={closeUploader}
+                onResults={handleDromoResults}
+            />
+        </>
+    );
+};
+
+SelfServiceDromoUploader.propTypes = {
+    fileInput: object.isRequired,
+    updateFileName: func.isRequired,
+};
+
+export default SelfServiceDromoUploader;

src/react/src/util/constants.jsx

@@ -563,6 +563,7 @@ export const DEFAULT_SEARCH_TEXT = 'Facility Name or OS ID';
 export const DISABLE_LIST_UPLOADING = 'disable_list_uploading';
 export const SHOW_ADDITIONAL_IDENTIFIERS = 'show_additional_identifiers';
 export const PRIVATE_INSTANCE = 'private_instance';
+export const ENABLE_DROMO_UPLOADING = 'enable_dromo_uploading';
 
 export const DEFAULT_COUNTRY_CODE = 'IE';
 

src/react/src/util/propTypes.js

@@ -31,6 +31,7 @@ import {
     facilityClaimStatusChoicesEnum,
     SHOW_ADDITIONAL_IDENTIFIERS,
     PRIVATE_INSTANCE,
+    ENABLE_DROMO_UPLOADING,
 } from './constants';
 
 export const registrationFormValuesPropType = shape({
@@ -359,6 +360,7 @@ export const featureFlagPropType = oneOf([
     DISABLE_LIST_UPLOADING,
     SHOW_ADDITIONAL_IDENTIFIERS,
     PRIVATE_INSTANCE,
+    ENABLE_DROMO_UPLOADING,
 ]);
 
 export const facilityClaimsListPropType = arrayOf(