From ad5fb48622cc75b1f5b26f8d0b794ee3650d05a4 Mon Sep 17 00:00:00 2001
From: Stuart Bennett <bennettstuart92@gmail.com>
Date: Wed, 11 Dec 2024 16:04:00 +0000
Subject: [PATCH] EES-5544 implement data file table

---
 .../components/DataFilesTable.module.scss     |  22 ++
 .../data/components/DataFilesTable.tsx        | 219 ++++++++++++++++++
 .../data/components/ImporterStatus.tsx        |   4 +-
 .../components/ReleaseDataUploadsSection.tsx  | 207 ++---------------
 .../src/components/Tag.module.scss            |   1 +
 5 files changed, 268 insertions(+), 185 deletions(-)
 create mode 100644 src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.module.scss
 create mode 100644 src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.tsx

diff --git a/src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.module.scss b/src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.module.scss
new file mode 100644
index 00000000000..78e4ca7c7d5
--- /dev/null
+++ b/src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.module.scss
@@ -0,0 +1,22 @@
+@import '~govuk-frontend/dist/govuk/base';
+
+.table {
+  td {
+    padding-bottom: govuk-spacing(2);
+    padding-top: govuk-spacing(2);
+    vertical-align: middle;
+  }
+
+  .fileSize {
+    width: 5rem;
+    text-align: right;
+  }
+
+  .fileStatus {
+    max-width: 164px;
+  }
+
+  .actions {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.tsx b/src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.tsx
new file mode 100644
index 00000000000..3f96a737cec
--- /dev/null
+++ b/src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.tsx
@@ -0,0 +1,219 @@
+import Link from '@admin/components/Link';
+import DataFileDetailsTable from '@admin/pages/release/data/components/DataFileDetailsTable';
+import DataUploadCancelButton from '@admin/pages/release/data/components/DataUploadCancelButton';
+import ImporterStatus, {
+  terminalImportStatuses,
+} from '@admin/pages/release/data/components/ImporterStatus';
+import {
+  releaseApiDataSetDetailsRoute,
+  releaseDataFileReplaceRoute,
+  ReleaseDataFileReplaceRouteParams,
+  releaseDataFileRoute,
+  ReleaseDataFileRouteParams,
+  ReleaseDataSetRouteParams,
+} from '@admin/routes/releaseRoutes';
+import {
+  DataFile,
+  DataFileImportStatus,
+} from '@admin/services/releaseDataFileService';
+import ButtonGroup from '@common/components/ButtonGroup';
+import ButtonText from '@common/components/ButtonText';
+import Modal from '@common/components/Modal';
+import { generatePath } from 'react-router';
+import React from 'react';
+import styles from './DataFilesTable.module.scss';
+
+interface Props {
+  dataFiles: DataFile[];
+  publicationId: string;
+  releaseId: string;
+  canUpdateRelease?: boolean;
+  handleDeleteFile: (dataFile: DataFile) => Promise<void>;
+  handleStatusChange: (
+    dataFile: DataFile,
+    { totalRows, status }: DataFileImportStatus,
+  ) => Promise<void>;
+}
+
+const DataFilesTable = ({
+  dataFiles,
+  publicationId,
+  releaseId,
+  canUpdateRelease,
+  handleDeleteFile,
+  handleStatusChange,
+}: Props) => {
+  return (
+    <>
+      <h2 className="govuk-heading-l">Uploaded data files</h2>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th scope="col">Subject title</th>
+            <th scope="col">Size</th>
+            {/* <th scope="col">Rows</th> */}
+            <th scope="col">Status</th>
+            {/* <th scope="col">Uploaded by</th> */}
+            {/* 
+                  <th scope="col">Date uploaded</th> */}
+            <th scope="col">Actions</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {dataFiles.map(dataFile => (
+            <tr key={dataFile.title}>
+              <td>{dataFile.title}</td>
+              <td className={styles.fileSize}>
+                {dataFile.fileSize.size.toLocaleString()}{' '}
+                {dataFile.fileSize.unit}
+              </td>
+              {/* <td>{dataFile.rows}</td> */}
+              <td>
+                <ImporterStatus
+                  className={styles.fileStatus}
+                  releaseId={releaseId}
+                  dataFile={dataFile}
+                  onStatusChange={handleStatusChange}
+                />
+              </td>
+              {/* <td>
+                <a href={`mailto:${dataFile.userName}`}>{dataFile.userName}</a>
+              </td> */}
+              {/* <td>
+                      {!dataFile.created ? undefined : (
+                        <FormattedDate format="d MMMM yyyy HH:mm">
+                          {dataFile.created}
+                        </FormattedDate>
+                      )}
+                    </td> */}
+              <td>
+                <ButtonGroup className={styles.actions}>
+                  <Modal
+                    showClose
+                    title="Data file details"
+                    triggerButton={<ButtonText>View details</ButtonText>}
+                  >
+                    <DataFileDetailsTable
+                      dataFile={dataFile}
+                      releaseId={releaseId}
+                      onStatusChange={handleStatusChange}
+                    />
+                  </Modal>
+                  {canUpdateRelease &&
+                    terminalImportStatuses.includes(dataFile.status) && (
+                      <>
+                        {dataFile.status === 'COMPLETE' && (
+                          <>
+                            <Link
+                              to={generatePath<ReleaseDataFileRouteParams>(
+                                releaseDataFileRoute.path,
+                                {
+                                  publicationId,
+                                  releaseId,
+                                  fileId: dataFile.id,
+                                },
+                              )}
+                            >
+                              Edit title
+                            </Link>
+                            {dataFile.publicApiDataSetId ? (
+                              <Modal
+                                showClose
+                                title="Cannot replace data"
+                                triggerButton={
+                                  <ButtonText>Replace data</ButtonText>
+                                }
+                              >
+                                <p>
+                                  This data file has an API data set linked to
+                                  it. Please remove the API data set before
+                                  replacing the data.
+                                </p>
+                                <p>
+                                  <Link
+                                    to={generatePath<ReleaseDataSetRouteParams>(
+                                      releaseApiDataSetDetailsRoute.path,
+                                      {
+                                        publicationId,
+                                        releaseId,
+                                        dataSetId: dataFile.publicApiDataSetId,
+                                      },
+                                    )}
+                                  >
+                                    Go to API data set
+                                  </Link>
+                                </p>
+                              </Modal>
+                            ) : (
+                              <Link
+                                to={generatePath<ReleaseDataFileReplaceRouteParams>(
+                                  releaseDataFileReplaceRoute.path,
+                                  {
+                                    publicationId,
+                                    releaseId,
+                                    fileId: dataFile.id,
+                                  },
+                                )}
+                              >
+                                Replace data
+                              </Link>
+                            )}
+                          </>
+                        )}
+                        {dataFile.publicApiDataSetId ? (
+                          <Modal
+                            showClose
+                            title="Cannot delete files"
+                            triggerButton={
+                              <ButtonText className="govuk-!-margin-left-3">
+                                Delete files
+                              </ButtonText>
+                            }
+                          >
+                            <p>
+                              This data file has an API data set linked to it.
+                              Please remove the API data set before deleting.
+                            </p>
+                            <p>
+                              <Link
+                                to={generatePath<ReleaseDataSetRouteParams>(
+                                  releaseApiDataSetDetailsRoute.path,
+                                  {
+                                    publicationId,
+                                    releaseId,
+                                    dataSetId: dataFile.publicApiDataSetId,
+                                  },
+                                )}
+                              >
+                                Go to API data set
+                              </Link>
+                            </p>
+                          </Modal>
+                        ) : (
+                          <ButtonText
+                            onClick={() => handleDeleteFile(dataFile)}
+                            variant="warning"
+                          >
+                            Delete files
+                          </ButtonText>
+                        )}
+                      </>
+                    )}
+                  {dataFile.permissions.canCancelImport && (
+                    <DataUploadCancelButton
+                      releaseId={releaseId}
+                      fileId={dataFile.id}
+                    />
+                  )}
+                </ButtonGroup>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+};
+
+export default DataFilesTable;
diff --git a/src/explore-education-statistics-admin/src/pages/release/data/components/ImporterStatus.tsx b/src/explore-education-statistics-admin/src/pages/release/data/components/ImporterStatus.tsx
index bcc76be7166..3a1aa271f45 100644
--- a/src/explore-education-statistics-admin/src/pages/release/data/components/ImporterStatus.tsx
+++ b/src/explore-education-statistics-admin/src/pages/release/data/components/ImporterStatus.tsx
@@ -87,11 +87,13 @@ interface ImporterStatusProps {
   releaseId: string;
   dataFile: DataFile;
   onStatusChange?: ImporterStatusChangeHandler;
+  className?: string;
 }
 const ImporterStatus = ({
   releaseId,
   dataFile,
   onStatusChange,
+  className,
 }: ImporterStatusProps) => {
   const [currentStatus, setCurrentStatus] = useState<StatusState>({
     status: dataFile.status,
@@ -130,7 +132,7 @@ const ImporterStatus = ({
   );
 
   return (
-    <div>
+    <div className={className}>
       <div className="dfe-flex dfe-align-items--center">
         <Tag
           colour={
diff --git a/src/explore-education-statistics-admin/src/pages/release/data/components/ReleaseDataUploadsSection.tsx b/src/explore-education-statistics-admin/src/pages/release/data/components/ReleaseDataUploadsSection.tsx
index b2b954f0d1d..2366e31b6c1 100644
--- a/src/explore-education-statistics-admin/src/pages/release/data/components/ReleaseDataUploadsSection.tsx
+++ b/src/explore-education-statistics-admin/src/pages/release/data/components/ReleaseDataUploadsSection.tsx
@@ -1,20 +1,7 @@
-import Link from '@admin/components/Link';
-import ReorderableAccordion from '@admin/components/editable/ReorderableAccordion';
-import ReorderableAccordionSection from '@admin/components/editable/ReorderableAccordionSection';
-import DataFileDetailsTable from '@admin/pages/release/data/components/DataFileDetailsTable';
 import DataFileUploadForm, {
   DataFileUploadFormValues,
 } from '@admin/pages/release/data/components/DataFileUploadForm';
-import { terminalImportStatuses } from '@admin/pages/release/data/components/ImporterStatus';
 import releaseDataFileQueries from '@admin/queries/releaseDataFileQueries';
-import {
-  releaseApiDataSetDetailsRoute,
-  releaseDataFileReplaceRoute,
-  ReleaseDataFileReplaceRouteParams,
-  releaseDataFileRoute,
-  ReleaseDataFileRouteParams,
-  ReleaseDataSetRouteParams,
-} from '@admin/routes/releaseRoutes';
 import permissionService from '@admin/services/permissionService';
 import releaseDataFileService, {
   ArchiveDataSetFile,
@@ -22,18 +9,15 @@ import releaseDataFileService, {
   DataFileImportStatus,
   DeleteDataFilePlan,
 } from '@admin/services/releaseDataFileService';
-import ButtonText from '@common/components/ButtonText';
 import InsetText from '@common/components/InsetText';
 import LoadingSpinner from '@common/components/LoadingSpinner';
-import Modal from '@common/components/Modal';
 import ModalConfirm from '@common/components/ModalConfirm';
 import WarningMessage from '@common/components/WarningMessage';
 import logger from '@common/services/logger';
-import DataUploadCancelButton from '@admin/pages/release/data/components/DataUploadCancelButton';
-import React, { useCallback, useEffect, useState } from 'react';
-import { generatePath } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
+import React, { useCallback, useEffect, useState } from 'react';
 import BulkZipUploadModalConfirm from './BulkZipUploadModalConfirm';
+import DataFilesTable from './DataFilesTable';
 
 interface Props {
   publicationId: string;
@@ -54,7 +38,6 @@ const ReleaseDataUploadsSection = ({
   onDataFilesChange,
 }: Props) => {
   const [deleteDataFile, setDeleteDataFile] = useState<DeleteDataFile>();
-  const [activeFileIds, setActiveFileIds] = useState<string[]>();
   const [dataFiles, setDataFiles] = useState<DataFile[]>([]);
   const [bulkUploadPlan, setBulkUploadPlan] = useState<ArchiveDataSetFile[]>();
 
@@ -89,22 +72,15 @@ const ReleaseDataUploadsSection = ({
 
   const confirmBulkUploadPlan = useCallback(
     async (archiveDataSetFiles: ArchiveDataSetFile[]) => {
-      const newFiles = await releaseDataFileService.importBulkZipDataFile(
+      await releaseDataFileService.importBulkZipDataFile(
         releaseId,
         archiveDataSetFiles,
       );
 
       setBulkUploadPlan(undefined);
-      setActiveFileIds([...dataFiles, ...newFiles].map(file => file.id));
       refetchDataFiles();
     },
-    [
-      releaseId,
-      setBulkUploadPlan,
-      setActiveFileIds,
-      dataFiles,
-      refetchDataFiles,
-    ],
+    [releaseId, setBulkUploadPlan, refetchDataFiles],
   );
 
   const handleStatusChange = async (
@@ -124,8 +100,6 @@ const ReleaseDataUploadsSection = ({
       dataFile.id,
     );
 
-    setActiveFileIds([]);
-
     setDataFiles(currentDataFiles =>
       currentDataFiles.map(file =>
         file.fileName !== dataFile.fileName
@@ -140,6 +114,17 @@ const ReleaseDataUploadsSection = ({
     );
   };
 
+  const handleDeleteFile = async (dataFile: DataFile) => {
+    releaseDataFileService
+      .getDeleteDataFilePlan(releaseId, dataFile)
+      .then(plan => {
+        setDeleteDataFile({
+          plan,
+          file: dataFile,
+        });
+      });
+  };
+
   const handleSubmit = useCallback(
     async (values: DataFileUploadFormValues) => {
       const newFiles: DataFile[] = [];
@@ -185,7 +170,6 @@ const ReleaseDataUploadsSection = ({
         default:
           break;
       }
-      setActiveFileIds(newFiles.map(file => file.id));
     },
     [releaseId, refetchDataFiles],
   );
@@ -242,159 +226,14 @@ const ReleaseDataUploadsSection = ({
 
       <LoadingSpinner loading={isLoading}>
         {dataFiles.length > 0 ? (
-          <ReorderableAccordion
-            canReorder={canUpdateRelease}
-            id="uploadedDataFiles"
-            heading="Uploaded data files"
-            reorderHiddenText="files"
-            onReorder={async (fileIds: string[]) => {
-              setDataFiles(
-                await releaseDataFileService.updateDataFilesOrder(
-                  releaseId,
-                  fileIds,
-                ),
-              );
-            }}
-          >
-            {dataFiles.map(dataFile => (
-              <ReorderableAccordionSection
-                id={dataFile.id}
-                key={dataFile.title}
-                heading={dataFile.title}
-                headingTag="h3"
-                open={activeFileIds?.includes(dataFile.id)}
-              >
-                <div style={{ position: 'relative' }}>
-                  {dataFile.isDeleting && (
-                    <LoadingSpinner text="Deleting files" overlay />
-                  )}
-                  <DataFileDetailsTable
-                    dataFile={dataFile}
-                    releaseId={releaseId}
-                    onStatusChange={handleStatusChange}
-                  >
-                    {canUpdateRelease &&
-                      terminalImportStatuses.includes(dataFile.status) && (
-                        <>
-                          {dataFile.status === 'COMPLETE' && (
-                            <>
-                              <Link
-                                className="govuk-!-margin-right-4"
-                                to={generatePath<ReleaseDataFileRouteParams>(
-                                  releaseDataFileRoute.path,
-                                  {
-                                    publicationId,
-                                    releaseId,
-                                    fileId: dataFile.id,
-                                  },
-                                )}
-                              >
-                                Edit title
-                              </Link>
-                              {dataFile.publicApiDataSetId ? (
-                                <Modal
-                                  showClose
-                                  title="Cannot replace data"
-                                  triggerButton={
-                                    <ButtonText>Replace data</ButtonText>
-                                  }
-                                >
-                                  <p>
-                                    This data file has an API data set linked to
-                                    it. Please remove the API data set before
-                                    replacing the data.
-                                  </p>
-                                  <p>
-                                    <Link
-                                      to={generatePath<ReleaseDataSetRouteParams>(
-                                        releaseApiDataSetDetailsRoute.path,
-                                        {
-                                          publicationId,
-                                          releaseId,
-                                          dataSetId:
-                                            dataFile.publicApiDataSetId,
-                                        },
-                                      )}
-                                    >
-                                      Go to API data set
-                                    </Link>
-                                  </p>
-                                </Modal>
-                              ) : (
-                                <Link
-                                  className="govuk-!-margin-right-4"
-                                  to={generatePath<ReleaseDataFileReplaceRouteParams>(
-                                    releaseDataFileReplaceRoute.path,
-                                    {
-                                      publicationId,
-                                      releaseId,
-                                      fileId: dataFile.id,
-                                    },
-                                  )}
-                                >
-                                  Replace data
-                                </Link>
-                              )}
-                            </>
-                          )}
-                          {dataFile.publicApiDataSetId ? (
-                            <Modal
-                              showClose
-                              title="Cannot delete files"
-                              triggerButton={
-                                <ButtonText className="govuk-!-margin-left-3">
-                                  Delete files
-                                </ButtonText>
-                              }
-                            >
-                              <p>
-                                This data file has an API data set linked to it.
-                                Please remove the API data set before deleting.
-                              </p>
-                              <p>
-                                <Link
-                                  to={generatePath<ReleaseDataSetRouteParams>(
-                                    releaseApiDataSetDetailsRoute.path,
-                                    {
-                                      publicationId,
-                                      releaseId,
-                                      dataSetId: dataFile.publicApiDataSetId,
-                                    },
-                                  )}
-                                >
-                                  Go to API data set
-                                </Link>
-                              </p>
-                            </Modal>
-                          ) : (
-                            <ButtonText
-                              onClick={async () =>
-                                releaseDataFileService
-                                  .getDeleteDataFilePlan(releaseId, dataFile)
-                                  .then(plan => {
-                                    setDeleteDataFile({
-                                      plan,
-                                      file: dataFile,
-                                    });
-                                  })
-                              }
-                            >
-                              Delete files
-                            </ButtonText>
-                          )}
-                        </>
-                      )}
-                    {dataFile.permissions.canCancelImport && (
-                      <DataUploadCancelButton
-                        releaseId={releaseId}
-                        fileId={dataFile.id}
-                      />
-                    )}
-                  </DataFileDetailsTable>
-                </div>
-              </ReorderableAccordionSection>
-            ))}
-          </ReorderableAccordion>
+          <DataFilesTable
+            canUpdateRelease={canUpdateRelease}
+            dataFiles={dataFiles}
+            handleStatusChange={handleStatusChange}
+            handleDeleteFile={handleDeleteFile}
+            publicationId={publicationId}
+            releaseId={releaseId}
+          />
         ) : (
           <InsetText>No data files have been uploaded.</InsetText>
         )}
diff --git a/src/explore-education-statistics-common/src/components/Tag.module.scss b/src/explore-education-statistics-common/src/components/Tag.module.scss
index ddbc3cca79d..ab6dda7af92 100644
--- a/src/explore-education-statistics-common/src/components/Tag.module.scss
+++ b/src/explore-education-statistics-common/src/components/Tag.module.scss
@@ -3,4 +3,5 @@
 // https://github.com/alphagov/govuk-frontend/issues/4626
 .tag {
   max-width: none;
+  text-wrap: balance;
 }