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

UIBULKED-561 Add administrative data accordion to MARC bulk edit form #660

Merged
merged 4 commits into from
Dec 9, 2024
Merged

UIBULKED-561 Add administrative data accordion to MARC bulk edit form #660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8eeacc5
UIBULKED-561 Add administrative data accordion to MARC bulk edit form
vashjs Dec 4, 2024
f237cbd
update tests
vashjs Dec 5, 2024
6c865b2
refactor
vashjs Dec 5, 2024
9c63b90
refactor
vashjs Dec 5, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
* [UIBULKED-587](https://folio-org.atlassian.net/browse/UIBULKED-587) Only Users from the first page are displayed in "Users" dropdown on "Logs" page.
* [UIBULKED-560](https://folio-org.atlassian.net/browse/UIBULKED-560) Update actions menu.
* [UIBULKED-585](https://folio-org.atlassian.net/browse/UUIBULKED-585) Adding missing translation and filters.
* [UIBULKED-561](https://folio-org.atlassian.net/browse/UUIBULKED-561) Add administrative data accordion to MARC bulk edit form.

## [4.2.2](https://github.com/folio-org/ui-bulk-edit/tree/v4.2.2) (2024-11-15)

Expand Down
8 changes: 4 additions & 4 deletions src/components/BulkEditActionMenu/BulkEditActionMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const BulkEditActionMenu = ({
hasEditPerm
&& isInitialStep
&& [JOB_STATUSES.DATA_MODIFICATION, JOB_STATUSES.REVIEW_CHANGES, JOB_STATUSES.REVIEWED_NO_MARC_RECORDS].includes(bulkDetails?.status);
const isStartMarkActive = (isStartBulkInAppActive || hasInstanceAndMarcEditPerm || hasInventoryAndMarcEditPerm) && currentRecordType === CAPABILITIES.INSTANCE && isInitialStep
const isStartMarcActive = (isStartBulkInAppActive || hasInstanceAndMarcEditPerm || hasInventoryAndMarcEditPerm) && currentRecordType === CAPABILITIES.INSTANCE && isInitialStep
&& [JOB_STATUSES.DATA_MODIFICATION, JOB_STATUSES.REVIEW_CHANGES, JOB_STATUSES.REVIEWED_NO_MARC_RECORDS].includes(bulkDetails?.status);

const isStartManualButtonVisible = isStartBulkCsvActive && isInitialStep && countOfRecords > 0 && criteria !== CRITERIA.QUERY && !isECS;
Expand Down Expand Up @@ -146,7 +146,7 @@ const BulkEditActionMenu = ({
</Icon>
</Button>
)}
{isStartMarkActive && (
{isStartMarcActive && (
<ActionMenuGroup
title={<FormattedMessage id="ui-bulk-edit.menuGroup.startEdit" />}
>
Expand All @@ -163,9 +163,9 @@ const BulkEditActionMenu = ({
)}
{(hasInstanceAndMarcEditPerm || hasInventoryAndMarcEditPerm) && (
<Button
data-testid="startMarkAction"
data-testid="startMarcAction"
buttonStyle="dropdownItem"
onClick={() => handleOnStartEdit(APPROACHES.MARK)}
onClick={() => handleOnStartEdit(APPROACHES.MARC)}
>
<Icon icon="edit">
<FormattedMessage id="ui-bulk-edit.start.edit.marc" />
Expand Down
4 changes: 2 additions & 2 deletions src/components/BulkEditPane/BulkEditIdentifiers/BulkEditIdentifiers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ export const BulkEditIdentifiers = ({

const paneTitle = useMemo(() => {
if ((processedFileName || initialFileName) && isIdentifierTabWithPreview) {
const id = approach === APPROACHES.MARK
? 'ui-bulk-edit.meta.title.uploadedFile.mark'
const id = approach === APPROACHES.MARC
? 'ui-bulk-edit.meta.title.uploadedFile.marc'
: 'ui-bulk-edit.meta.title.uploadedFile';
return (
<FormattedMessage
Expand Down
50 changes: 29 additions & 21 deletions src/components/BulkEditPane/BulkEditInAppLayer/BulkEditInAppLayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,36 @@
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { BulkEditLayer } from '../BulkEditListResult/BulkEditInAppLayer/BulkEditLayer';
import { BulkEditInApp } from '../BulkEditListResult/BulkEditInApp/BulkEditInApp';
import { BulkEditPreviewModal } from '../BulkEditListResult/BulkEditInAppPreviewModal/BulkEditPreviewModal';
import { getContentUpdatesBody } from '../BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers';
import { QUERY_KEY_DOWNLOAD_PREVIEW_MODAL, useContentUpdate } from '../../../hooks/api';
import {
getContentUpdatesBody,
getMappedContentUpdates,
isContentUpdatesFormValid
} from '../BulkEditListResult/BulkEditInApp/ContentUpdatesForm/helpers';
import {
QUERY_KEY_DOWNLOAD_PREVIEW_MODAL,
useContentUpdate,
} from '../../../hooks/api';
import { useConfirmChanges } from '../../../hooks/useConfirmChanges';
import { savePreviewFile } from '../../../utils/files';
import { useOptionsWithTenants } from '../../../hooks/useOptionsWithTenants';


export const BulkEditInAppLayer = ({
bulkOperationId,
contentUpdates,
setContentUpdates,
isInAppLayerOpen,
paneProps,
isInAppFormValid,
closeInAppLayer,
onInAppLayerClose,
}) => {
const [fields, setFields] = useState([]);

const { contentUpdate } = useContentUpdate({ id: bulkOperationId });
const { options, areAllOptionsLoaded } = useOptionsWithTenants(bulkOperationId);

const contentUpdates = getMappedContentUpdates(fields, options);
const isInAppFormValid = isContentUpdatesFormValid(contentUpdates);

const {
isPreviewModalOpened,
Expand All @@ -31,7 +42,6 @@ export const BulkEditInAppLayer = ({
closePreviewModal,
} = useConfirmChanges({
queryDownloadKey: QUERY_KEY_DOWNLOAD_PREVIEW_MODAL,
updateFn: contentUpdate,
bulkOperationId,
onDownloadSuccess: (fileData, searchParams) => {
const { approach, initialFileName } = searchParams;
Expand All @@ -47,30 +57,35 @@ export const BulkEditInAppLayer = ({

const handleChangesCommited = () => {
closePreviewModal();
closeInAppLayer();
onInAppLayerClose();
};

const handleConfirm = () => {
const contentUpdatesBody = getContentUpdatesBody({
const contentUpdateBody = getContentUpdatesBody({
bulkOperationId,
contentUpdates,
totalRecords,
});

confirmChanges({ contentUpdates: contentUpdatesBody });
confirmChanges([
contentUpdate(contentUpdateBody)
]);
};

return (
<>
<BulkEditLayer
isLayerOpen={isInAppLayerOpen}
isConfirmDisabled={!isInAppFormValid}
onLayerClose={closeInAppLayer}
onLayerClose={onInAppLayerClose}
onConfirm={handleConfirm}
{...paneProps}
>
<BulkEditInApp
onContentUpdatesChanged={setContentUpdates}
fields={fields}
setFields={setFields}
options={options}
areAllOptionsLoaded={areAllOptionsLoaded}
/>
</BulkEditLayer>

Expand All @@ -88,14 +103,7 @@ export const BulkEditInAppLayer = ({

BulkEditInAppLayer.propTypes = {
bulkOperationId: PropTypes.string,
contentUpdates: PropTypes.arrayOf(PropTypes.object),
setContentUpdates: PropTypes.func,
isInAppLayerOpen: PropTypes.bool,
isPreviewModalOpened: PropTypes.bool,
paneProps: PropTypes.object,
isInAppFormValid: PropTypes.bool,
closeInAppLayer: PropTypes.func,
openInAppPreviewModal: PropTypes.func,
closeInAppPreviewModal: PropTypes.func,
closePreviewAndLayer: PropTypes.func,
onInAppLayerClose: PropTypes.func,
};
63 changes: 33 additions & 30 deletions ...esult/BulkEditInApp/BulkEditInApp.test.js → ...EditInAppLayer/BulkEditInAppLayer.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@ import { MemoryRouter } from 'react-router-dom';
import { QueryClientProvider } from 'react-query';
import { act, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import noop from 'lodash/noop';

import { runAxeTest } from '@folio/stripes-testing';

import '../../../../../test/jest/__mock__';
import '../../../../test/jest/__mock__';
import { FormattedMessage } from 'react-intl';
import React from 'react';
import { flushPromises } from '../../../../../test/jest/utils/fileUpload';
import { queryClient } from '../../../../../test/jest/utils/queryClient';
import { flushPromises } from '../../../../test/jest/utils/fileUpload';
import { queryClient } from '../../../../test/jest/utils/queryClient';

import { CAPABILITIES } from '../../../../constants';
import { CAPABILITIES } from '../../../constants';

import { BulkEditInApp } from './BulkEditInApp';
import { RootContext } from '../../../../context/RootContext';
import { RootContext } from '../../../context/RootContext';
import {
useItemNotes,
useHoldingsNotes,
Expand All @@ -25,16 +25,17 @@ import {
useLocationEcs,
useLoanTypesEcs,
useElectronicAccessEcs
} from '../../../../hooks/api';
} from '../../../hooks/api';
import { BulkEditInAppLayer } from './BulkEditInAppLayer';


jest.mock('../../../../hooks', () => ({
...jest.requireActual('../../../../hooks'),
jest.mock('../../../hooks', () => ({
...jest.requireActual('../../../hooks'),
useBulkPermissions: jest.fn(),
}));

jest.mock('../../../../hooks/api', () => ({
...jest.requireActual('../../../../hooks/api'),
jest.mock('../../../hooks/api', () => ({
...jest.requireActual('../../../hooks/api'),
useItemNotes: jest.fn(),
useHoldingsNotes: jest.fn(),
useInstanceNotes: jest.fn(),
Expand All @@ -48,7 +49,7 @@ jest.mock('../../../../hooks/api', () => ({

const fileName = 'Mock.csv';

const renderBulkEditInApp = ({ capability }) => {
const renderBulkEditInAppLayer = ({ capability }) => {
const params = new URLSearchParams({
capabilities: capability,
identifier: 'BARCODE',
Expand All @@ -63,9 +64,11 @@ const renderBulkEditInApp = ({ capability }) => {
title: <FormattedMessage id="ui-bulk-edit.preview.file.title" values={{ fileUploadedName: 'fileName' }} />,
}}
>
<BulkEditInApp
onContentUpdatesChanged={() => {}}
capabilities={capability}
<BulkEditInAppLayer
bulkOperationId="bulkOperationId"
isInAppLayerOpen
paneProps={{}}
onInAppLayerClose={noop}
/>
</RootContext.Provider>
</MemoryRouter>
Expand Down Expand Up @@ -117,7 +120,7 @@ describe('BulkEditInApp', () => {
});

it('should display correct title', () => {
renderBulkEditInApp({ capability: CAPABILITIES.ITEM });
renderBulkEditInAppLayer({ capability: CAPABILITIES.ITEM });

expect(screen.getByText('ui-bulk-edit.preview.file.title')).toBeVisible();
});
Expand All @@ -127,13 +130,13 @@ describe('BulkEditInApp', () => {
/layer.column.options/,
/layer.column.actions/,
];
renderBulkEditInApp({ capability: CAPABILITIES.ITEM });
renderBulkEditInAppLayer({ capability: CAPABILITIES.ITEM });

titles.forEach((el) => expect(screen.getByText(el)).toBeVisible());
});

it('should display added row after plus button click', async () => {
const { getByLabelText, getAllByLabelText } = renderBulkEditInApp({ capability: CAPABILITIES.ITEM });
const { getByLabelText, getAllByLabelText } = renderBulkEditInAppLayer({ capability: CAPABILITIES.ITEM });

const plusButton = getByLabelText('plus-sign');

Expand All @@ -153,7 +156,7 @@ describe('BulkEditInApp', () => {
});

it('should display select right select options on inventory tab', () => {
const { getByRole } = renderBulkEditInApp({ capability: CAPABILITIES.ITEM });
const { getByRole } = renderBulkEditInAppLayer({ capability: CAPABILITIES.ITEM });

const options = [
/layer.options.permanentLocation/,
Expand All @@ -178,7 +181,7 @@ describe('BulkEditInApp', () => {
});

it('should display correct status options in action select', async () => {
const { getByRole, getByTestId } = renderBulkEditInApp({ capability: CAPABILITIES.ITEM });
const { getByRole, getByTestId } = renderBulkEditInAppLayer({ capability: CAPABILITIES.ITEM });

const options = [
/layer.options.available/,
Expand Down Expand Up @@ -225,7 +228,7 @@ describe('BulkEditInApp', () => {
});

it('should display item permanent location options', async () => {
const { getByRole, getByTestId } = renderBulkEditInApp({ capability: CAPABILITIES.ITEM });
const { getByRole, getByTestId } = renderBulkEditInAppLayer({ capability: CAPABILITIES.ITEM });

const options = [
/layer.action.replace/,
Expand Down Expand Up @@ -256,7 +259,7 @@ describe('BulkEditInApp', () => {
});

it('should display expiration date', async () => {
const { getByRole, getByTestId } = renderBulkEditInApp({ capability: CAPABILITIES.USER });
const { getByRole, getByTestId } = renderBulkEditInAppLayer({ capability: CAPABILITIES.USER });

const selectionBtn = getByRole('button', { name: /options.placeholder/ });
userEvent.click(selectionBtn);
Expand All @@ -276,7 +279,7 @@ describe('BulkEditInApp', () => {
});

it('should display patron group', async () => {
const { getByRole, getByTestId } = renderBulkEditInApp({ capability: CAPABILITIES.USER });
const { getByRole, getByTestId } = renderBulkEditInAppLayer({ capability: CAPABILITIES.USER });

const selectionBtn = getByRole('button', { name: /options.placeholder/ });
userEvent.click(selectionBtn);
Expand All @@ -300,7 +303,7 @@ describe('BulkEditInApp', () => {
});

it('should display holdings permanent location', async () => {
const { getByTestId, getByRole } = renderBulkEditInApp({ capability: CAPABILITIES.HOLDING });
const { getByTestId, getByRole } = renderBulkEditInAppLayer({ capability: CAPABILITIES.HOLDING });

const selectionBtn = getByRole('button', { name: /options.placeholder/ });
userEvent.click(selectionBtn);
Expand All @@ -323,7 +326,7 @@ describe('BulkEditInApp', () => {
});

it('should display holdings set to true is checked by default', async () => {
const { getByRole, getByTestId } = renderBulkEditInApp({ capability: CAPABILITIES.HOLDING });
const { getByRole, getByTestId } = renderBulkEditInAppLayer({ capability: CAPABILITIES.HOLDING });

const selectionBtn = getByRole('button', { name: /options.placeholder/ });
userEvent.click(selectionBtn);
Expand Down Expand Up @@ -351,7 +354,7 @@ describe('BulkEditInApp', () => {
});

it('should display holdings set to false is unchecked by default', async () => {
const { getByRole, getByTestId } = renderBulkEditInApp({ capability: CAPABILITIES.HOLDING });
const { getByRole, getByTestId } = renderBulkEditInAppLayer({ capability: CAPABILITIES.HOLDING });

const selectionBtn = getByRole('button', { name: /options.placeholder/ });
userEvent.click(selectionBtn);
Expand Down Expand Up @@ -379,7 +382,7 @@ describe('BulkEditInApp', () => {
});

it('should display holding temporary location options', async () => {
const { getByTestId, getByRole } = renderBulkEditInApp({ capability: CAPABILITIES.HOLDING });
const { getByTestId, getByRole } = renderBulkEditInAppLayer({ capability: CAPABILITIES.HOLDING });

const options = [
/layer.action.replace/,
Expand Down Expand Up @@ -407,23 +410,23 @@ describe('BulkEditInApp', () => {
});

it('should render with no axe errors in holding form', async () => {
renderBulkEditInApp({ capability: CAPABILITIES.HOLDING });
renderBulkEditInAppLayer({ capability: CAPABILITIES.HOLDING });

await runAxeTest({
rootNode: document.body,
});
});

it('should render with no axe errors in user form', async () => {
renderBulkEditInApp({ capability: CAPABILITIES.USER });
renderBulkEditInAppLayer({ capability: CAPABILITIES.USER });

await runAxeTest({
rootNode: document.body,
});
});

it('should render with no axe errors in item form', async () => {
renderBulkEditInApp({ capability: CAPABILITIES.ITEM });
renderBulkEditInAppLayer({ capability: CAPABILITIES.ITEM });

await runAxeTest({
rootNode: document.body,
Expand Down
Loading
Loading