Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: page specific messages (#691)

Browse Source
This commit is contained in:
Kristin Aoki
2023-11-16 16:40:57 -05:00
committed by GitHub
parent a25bc0670e
commit 3d37bc056d
8 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/files-and-videos/files-page/FilesPage.jsx
View File

@@ -80,6 +80,7 @@ const FilesPage = ({
loadingStatus,
usagePathStatus,
usageErrorMessages: errorMessages.usageMetrics,
fileType: 'file',
};
const maxFileSize = 20 * 1048576;

12
src/files-and-videos/files-page/FilesPage.test.jsx
View File

@@ -225,7 +225,7 @@ describe('FilesAndUploads', () => {
axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID1`).reply(204);
fireEvent.click(deleteButton);
expect(screen.getByText(messages.deleteConfirmationTitle.defaultMessage)).toBeVisible();
expect(screen.getByText('Delete file(s) confirmation')).toBeVisible();
await act(async () => {
userEvent.click(deleteButton);
});
@@ -239,7 +239,7 @@ describe('FilesAndUploads', () => {
userEvent.click(confirmDeleteButton);
});
expect(screen.queryByText(messages.deleteConfirmationTitle.defaultMessage)).toBeNull();
expect(screen.queryByText('Delete file(s) confirmation')).toBeNull();
// Check if the asset is deleted in the store and UI
const deleteStatus = store.getState().assets.deletingStatus;
@@ -451,10 +451,10 @@ describe('FilesAndUploads', () => {
axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID1`).reply(204);
fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
expect(screen.getByText(messages.deleteConfirmationTitle.defaultMessage)).toBeVisible();
expect(screen.getByText('Delete file(s) confirmation')).toBeVisible();
fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
expect(screen.queryByText(messages.deleteConfirmationTitle.defaultMessage)).toBeNull();
expect(screen.queryByText('Delete file(s) confirmation')).toBeNull();
executeThunk(deleteAssetFile(courseId, 'mOckID1', 5), store.dispatch);
});
@@ -509,10 +509,10 @@ describe('FilesAndUploads', () => {
axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID1`).reply(404);
fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
expect(screen.getByText(messages.deleteConfirmationTitle.defaultMessage)).toBeVisible();
expect(screen.getByText('Delete file(s) confirmation')).toBeVisible();
fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
expect(screen.queryByText(messages.deleteConfirmationTitle.defaultMessage)).toBeNull();
expect(screen.queryByText('Delete file(s) confirmation')).toBeNull();
executeThunk(deleteAssetFile(courseId, 'mOckID1', 5), store.dispatch);
});

4
src/files-and-videos/generic/ApiStatusToast.jsx
View File

@@ -10,6 +10,7 @@ const ApiStatusToast = ({
isOpen,
setClose,
setSelectedRows,
fileType,
// injected
intl,
}) => {
@@ -23,7 +24,7 @@ const ApiStatusToast = ({
show={isOpen}
onClose={handleClose}
>
{intl.formatMessage(messages.apiStatusToastMessage, { actionType, selectedRowCount })}
{intl.formatMessage(messages.apiStatusToastMessage, { actionType, selectedRowCount, fileType })}
</Toast>
);
};
@@ -34,6 +35,7 @@ ApiStatusToast.propTypes = {
isOpen: PropTypes.bool.isRequired,
setClose: PropTypes.func.isRequired,
setSelectedRows: PropTypes.func.isRequired,
fileType: PropTypes.string.isRequired,
// injected
intl: intlShape.isRequired,
};

9
src/files-and-videos/generic/FileTable.jsx
View File

@@ -66,6 +66,7 @@ const FileTable = ({
usageErrorMessages,
encodingsDownloadUrl,
supportedFileFormats,
fileType,
} = data;
useEffect(() => {
@@ -136,6 +137,7 @@ const FileTable = ({
handleBulkDownload,
handleOpenDeleteConfirmation,
supportedFileFormats,
fileType,
}}
/>
);
@@ -225,6 +227,7 @@ const FileTable = ({
isOpen={isDeleteOpen}
setClose={setDeleteClose}
setSelectedRows={setSelectedRows}
fileType={fileType}
/>
<ApiStatusToast
actionType={intl.formatMessage(messages.apiStatusAddingAction)}
@@ -232,6 +235,7 @@ const FileTable = ({
isOpen={isAddOpen}
setClose={setAddClose}
setSelectedRows={setSelectedRows}
fileType={fileType}
/>
</DataTable>
<FileInput key="generic-file-upload" fileInput={fileInputControl} supportedFileFormats={supportedFileFormats} />
@@ -247,7 +251,7 @@ const FileTable = ({
/>
)}
<AlertModal
title={intl.formatMessage(messages.deleteConfirmationTitle)}
title={intl.formatMessage(messages.deleteConfirmationTitle, { fileType })}
isOpen={isDeleteConfirmationOpen}
onClose={closeDeleteConfirmation}
footerNode={(
@@ -261,7 +265,7 @@ const FileTable = ({
</ActionRow>
)}
>
{intl.formatMessage(messages.deleteConfirmationMessage, { fileNumber: selectedRows.length })}
{intl.formatMessage(messages.deleteConfirmationMessage, { fileNumber: selectedRows.length, fileType })}
</AlertModal>
</div>
);
@@ -277,6 +281,7 @@ FileTable.propTypes = {
usageErrorMessages: PropTypes.arrayOf(PropTypes.string).isRequired,
encodingsDownloadUrl: PropTypes.string,
supportedFileFormats: PropTypes.shape({}),
fileType: PropTypes.string.isRequired,
}).isRequired,
handleAddFile: PropTypes.func.isRequired,
handleDeleteFile: PropTypes.func.isRequired,

10
src/files-and-videos/generic/messages.js
View File

@@ -7,7 +7,7 @@ const messages = defineMessages({
},
apiStatusToastMessage: {
id: 'course-authoring.files-and-upload.apiStatus.message',
defaultMessage: '{actionType} {selectedRowCount} file(s)',
defaultMessage: '{actionType} {selectedRowCount} {fileType}(s)',
},
apiStatusAddingAction: {
id: 'course-authoring.files-and-upload.apiStatus.addingAction.message',
@@ -27,7 +27,7 @@ const messages = defineMessages({
},
addFilesButtonLabel: {
id: 'course-authoring.files-and-upload.addFiles.button.label',
defaultMessage: 'Add files',
defaultMessage: 'Add {fileType}s',
},
actionsButtonLabel: {
id: 'course-authoring.files-and-upload.action.button.label',
@@ -83,11 +83,11 @@ const messages = defineMessages({
},
deleteConfirmationTitle: {
id: 'course-authoring.files-and-uploads..deleteConfirmation.title',
defaultMessage: 'Delete File(s) Confirmation',
defaultMessage: 'Delete {fileType}(s) confirmation',
},
deleteConfirmationMessage: {
id: 'course-authoring.files-and-uploads..deleteConfirmation.message',
defaultMessage: 'Are you sure you want to delete {fileNumber} file(s)? This action cannot be undone.',
defaultMessage: 'Are you sure you want to delete {fileNumber} {fileType}(s)? This action cannot be undone.',
},
deleteFileButtonLabel: {
id: 'course-authoring.files-and-uploads.deleteConfirmation.deleteFile.label',
@@ -99,7 +99,7 @@ const messages = defineMessages({
},
sortButtonLabel: {
id: 'course-authoring.files-and-uploads.sortButton.label',
defaultMessage: 'Sort and Filter',
defaultMessage: 'Sort and filter',
},
sortModalTitleLabel: {
id: 'course-authoring.files-and-uploads.sortModal.title',

9
src/files-and-videos/generic/table-components/TableActions.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import _ from 'lodash';
import { PropTypes } from 'prop-types';
import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import {
Button,
@@ -19,6 +19,9 @@ const TableActions = ({
handleBulkDownload,
handleOpenDeleteConfirmation,
encodingsDownloadUrl,
fileType,
// injected
intl,
}) => {
const [isSortOpen, openSort, closeSort] = useToggle(false);
return (
@@ -60,7 +63,7 @@ const TableActions = ({
</Dropdown.Menu>
</Dropdown>
<Button iconBefore={Add} onClick={fileInputControl.click}>
<FormattedMessage {...messages.addFilesButtonLabel} />
{intl.formatMessage(messages.addFilesButtonLabel, { fileType })}
</Button>
<SortAndFilterModal {...{ isSortOpen, closeSort, handleSort }} />
</>
@@ -91,6 +94,8 @@ TableActions.propTypes = {
handleBulkDownload: PropTypes.func.isRequired,
encodingsDownloadUrl: PropTypes.string,
handleSort: PropTypes.func.isRequired,
fileType: PropTypes.string.isRequired,
intl: intlShape.isRequired,
};
TableActions.defaultProps = {

1
src/files-and-videos/videos-page/VideosPage.jsx
View File

@@ -104,6 +104,7 @@ const VideosPage = ({
loadingStatus,
usagePathStatus,
usageErrorMessages: errorMessages.usageMetrics,
fileType: 'video',
};
const thumbnailPreview = (props) => VideoThumbnail({ ...props, handleAddThumbnail, videoImageSettings });
const infoModalSidebar = (video) => VideoInfoModalSidebar({ video });

12
src/files-and-videos/videos-page/VideosPage.test.jsx
View File

@@ -266,7 +266,7 @@ describe('FilesAndUploads', () => {
axiosMock.onDelete(`${getCoursVideosApiUrl(courseId)}/mOckID1`).reply(204);
fireEvent.click(deleteButton);
expect(screen.getByText(messages.deleteConfirmationTitle.defaultMessage)).toBeVisible();
expect(screen.getByText('Delete video(s) confirmation')).toBeVisible();
await act(async () => {
userEvent.click(deleteButton);
});
@@ -280,7 +280,7 @@ describe('FilesAndUploads', () => {
userEvent.click(confirmDeleteButton);
});
expect(screen.queryByText(messages.deleteConfirmationTitle.defaultMessage)).toBeNull();
expect(screen.queryByText('Delete video(s) confirmation')).toBeNull();
// Check if the video is deleted in the store and UI
const deleteStatus = store.getState().videos.deletingStatus;
@@ -518,10 +518,10 @@ describe('FilesAndUploads', () => {
axiosMock.onDelete(`${getCoursVideosApiUrl(courseId)}/mOckID1`).reply(204);
fireEvent.click(within(fileMenuButton).getByLabelText('file-menu-toggle'));
fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
expect(screen.getByText(messages.deleteConfirmationTitle.defaultMessage)).toBeVisible();
expect(screen.getByText('Delete video(s) confirmation')).toBeVisible();
fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
expect(screen.queryByText(messages.deleteConfirmationTitle.defaultMessage)).toBeNull();
expect(screen.queryByText('Delete video(s) confirmation')).toBeNull();
executeThunk(deleteVideoFile(courseId, 'mOckID1', 5), store.dispatch);
});
@@ -612,10 +612,10 @@ describe('FilesAndUploads', () => {
axiosMock.onDelete(`${getCoursVideosApiUrl(courseId)}/mOckID1`).reply(404);
fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
expect(screen.getByText(messages.deleteConfirmationTitle.defaultMessage)).toBeVisible();
expect(screen.getByText('Delete video(s) confirmation')).toBeVisible();
fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
expect(screen.queryByText(messages.deleteConfirmationTitle.defaultMessage)).toBeNull();
expect(screen.queryByText('Delete video(s) confirmation')).toBeNull();
executeThunk(deleteVideoFile(courseId, 'mOckID1', 5), store.dispatch);
});