Add dry run functionality for personhendelser

navikt · Mar 27, 2024 · 95448c3 · 95448c3
1 parent 37d3efc
commit 95448c3
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 12 deletions.
diff --git a/src/api/driftApi.ts b/src/api/driftApi.ts
@@ -136,3 +136,14 @@ export async function sendPersonhendelser(args: { hendelser: File }): Promise<Ap
         body: formData,
     });
 }
+
+export async function dryRunPersonhendelser(args: { hendelser: File }): Promise<ApiClientResult<{ status: string }>> {
+    const formData = new FormData();
+    formData.append('file', args.hendelser);
+
+    return apiClient({
+        url: `/drift/personhendelser/dry`,
+        method: 'POST',
+        body: formData,
+    });
+}
diff --git a/src/pages/drift/components/personhendelser/Personhendelser.module.less b/src/pages/drift/components/personhendelser/Personhendelser.module.less
@@ -1,6 +1,16 @@
 @import '@styles/variables.less';
 
 .modalBody {
+    > :not(:last-child) {
+        margin-bottom: @spacing;
+    }
+}
+
+.tabPanel {
+    padding: @spacing-s 0;
+}
+
+.panelInnholdContainer {
     display: flex;
     flex-direction: column;
     gap: @spacing-s;

diff --git a/src/pages/drift/components/personhendelser/Personhendelser.tsx b/src/pages/drift/components/personhendelser/Personhendelser.tsx
@@ -1,5 +1,5 @@
 import * as RemoteData from '@devexperts/remote-data-ts';
-import { Alert, Button, Modal } from '@navikt/ds-react';
+import { Alert, Button, Modal, Tabs } from '@navikt/ds-react';
 import { useState } from 'react';
 
 import * as driftApi from '~src/api/driftApi';
@@ -30,7 +30,9 @@ const Personhendelser = () => {
 
 const PersonhendelserModal = (props: { visModal: boolean; onClose: () => void }) => {
     const [sendPersonhendelserStatus, sendPersonHendelser] = useApiCall(driftApi.sendPersonhendelser);
+    const [dryRunStatus, dryRun] = useApiCall(driftApi.dryRunPersonhendelser);
     const [personhendelserCSV, setPersonhendelserCSV] = useState<Nullable<File>>(null);
+    const [personhendelserCSVDry, setPersonhendelserCSVDry] = useState<Nullable<File>>(null);
 
     const handleSubmit = () => {
         if (!personhendelserCSV) {
@@ -39,6 +41,13 @@ const PersonhendelserModal = (props: { visModal: boolean; onClose: () => void })
         }
         sendPersonHendelser({ hendelser: personhendelserCSV });
     };
+    const handleDryRun = () => {
+        if (!personhendelserCSVDry) {
+            console.log('No file selected');
+            return;
+        }
+        dryRun({ hendelser: personhendelserCSVDry });
+    };
 
     return (
         <Modal
@@ -48,18 +57,46 @@ const PersonhendelserModal = (props: { visModal: boolean; onClose: () => void })
             header={{ heading: 'Personhendelser' }}
         >
             <Modal.Body className={styles.modalBody}>
-                <input
-                    type="file"
-                    onChange={(e) => (e.target.files ? setPersonhendelserCSV(e.target.files[0]) : null)}
-                />
+                <Tabs defaultValue="dry-run">
+                    <Tabs.List>
+                        <Tabs.Tab value="dry-run" label="Dry-run" />
+                        <Tabs.Tab value="personhendelser" label="Innsending av personhendelser" />
+                    </Tabs.List>
+                    <Tabs.Panel value="dry-run" className={styles.tabPanel}>
+                        <div className={styles.panelInnholdContainer}>
+                            <input
+                                type="file"
+                                onChange={(e) => (e.target.files ? setPersonhendelserCSVDry(e.target.files[0]) : null)}
+                            />
+
+                            {RemoteData.isFailure(dryRunStatus) && <ApiErrorAlert error={dryRunStatus.error} />}
+                            {RemoteData.isSuccess(dryRunStatus) && (
+                                <Alert variant="success">Dry run av personhendelser OK 👍🤌</Alert>
+                            )}
+                            <Button onClick={handleDryRun} loading={RemoteData.isPending(dryRunStatus)}>
+                                Dry run personhendelser
+                            </Button>
+                        </div>
+                    </Tabs.Panel>
+                    <Tabs.Panel value="personhendelser" className={styles.tabPanel}>
+                        <div className={styles.panelInnholdContainer}>
+                            <input
+                                type="file"
+                                onChange={(e) => (e.target.files ? setPersonhendelserCSV(e.target.files[0]) : null)}
+                            />
 
-                {RemoteData.isFailure(sendPersonhendelserStatus) && (
-                    <ApiErrorAlert error={sendPersonhendelserStatus.error} />
-                )}
-                {RemoteData.isSuccess(sendPersonhendelserStatus) && (
-                    <Alert variant="success">Oppdatering av personhendelser OK 👍🤌</Alert>
-                )}
-                <Button onClick={handleSubmit}>Oppdater personhendelser</Button>
+                            {RemoteData.isFailure(sendPersonhendelserStatus) && (
+                                <ApiErrorAlert error={sendPersonhendelserStatus.error} />
+                            )}
+                            {RemoteData.isSuccess(sendPersonhendelserStatus) && (
+                                <Alert variant="success">Oppdatering av personhendelser OK 👍🤌</Alert>
+                            )}
+                            <Button onClick={handleSubmit} loading={RemoteData.isPending(sendPersonhendelserStatus)}>
+                                Oppdater personhendelser
+                            </Button>
+                        </div>
+                    </Tabs.Panel>
+                </Tabs>
             </Modal.Body>
         </Modal>
     );