Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EES-5544 Change data set import page accordions into a table #5459

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

EES-5544 Change data set import page accordions into a table #5459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ad5fb48
EES-5544 implement data file table
bennettstuart Dec 11, 2024
6aa1a17
EES-5544 add reorder fnality
bennettstuart Dec 12, 2024
85840e2
EES-5544 update integration tests
bennettstuart Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions ...e-education-statistics-admin/src/pages/release/data/components/DataFilesTable.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
239 changes: 239 additions & 0 deletions src/explore-education-statistics-admin/src/pages/release/data/components/DataFilesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
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 ReorderableList from '@common/components/ReorderableList';
import reorder from '@common/utils/reorder';
import React, { useEffect, useState } from 'react';
import { generatePath } from 'react-router';
import styles from './DataFilesTable.module.scss';

interface Props {
dataFiles: DataFile[];
publicationId: string;
releaseId: string;
canUpdateRelease?: boolean;
isReordering: boolean;
onCancelReordering: () => void;
onConfirmReordering: (nextSeries: DataFile[]) => void;
onDeleteFile: (dataFile: DataFile) => Promise<void>;
onStatusChange: (
dataFile: DataFile,
{ totalRows, status }: DataFileImportStatus,
) => Promise<void>;
}

const DataFilesTable = ({
dataFiles: initialDataFiles,
publicationId,
releaseId,
canUpdateRelease,
isReordering,
onCancelReordering,
onConfirmReordering,
onDeleteFile,
onStatusChange,
}: Props) => {
const [dataFiles, setDataFiles] = useState(initialDataFiles);

useEffect(() => {
setDataFiles(initialDataFiles);
}, [initialDataFiles]);

if (isReordering) {
return (
<ReorderableList
heading="Reorder data files"
id="dataFiles"
list={dataFiles.map(({ id, title }) => ({
id,
label: title,
}))}
onCancel={() => {
setDataFiles(initialDataFiles);
onCancelReordering();
}}
onConfirm={() => onConfirmReordering(dataFiles)}
onMoveItem={({ prevIndex, nextIndex }) => {
const reordered = reorder(dataFiles, prevIndex, nextIndex);
setDataFiles(reordered);
}}
onReverse={() => {
setDataFiles(dataFiles.toReversed());
}}
/>
);
}

return (
<table className={styles.table}>
<thead>
<tr>
<th scope="col">Subject title</th>
<th scope="col">Size</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>

<tbody>
{dataFiles.map(dataFile => (
<tr key={dataFile.title}>
<td data-testid="Subject title">{dataFile.title}</td>
<td data-testid="Data file size" className={styles.fileSize}>
{dataFile.fileSize.size.toLocaleString()} {dataFile.fileSize.unit}
</td>
<td data-testid="Status">
<ImporterStatus
className={styles.fileStatus}
releaseId={releaseId}
dataFile={dataFile}
onStatusChange={onStatusChange}
/>
</td>
<td data-testid="Actions">
<ButtonGroup className={styles.actions}>
<Modal
showClose
title="Data file details"
triggerButton={<ButtonText>View details</ButtonText>}
>
<DataFileDetailsTable
dataFile={dataFile}
releaseId={releaseId}
onStatusChange={onStatusChange}
/>
</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={() => onDeleteFile(dataFile)}
variant="warning"
>
Delete files
</ButtonText>
)}
</>
)}
{dataFile.permissions.canCancelImport && (
<DataUploadCancelButton
releaseId={releaseId}
fileId={dataFile.id}
/>
)}
</ButtonGroup>
</td>
</tr>
))}
</tbody>
</table>
);
};

export default DataFilesTable;
4 changes: 3 additions & 1 deletion src/explore-education-statistics-admin/src/pages/release/data/components/ImporterStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -130,7 +132,7 @@ const ImporterStatus = ({
);

return (
<div>
<div className={className}>
<div className="dfe-flex dfe-align-items--center">
<Tag
colour={
Expand Down
Loading
Loading