UIIN-2453:Instance 3rd pane: Adjust behavior when returning to instance from holdings/item full screen

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for ui-inventory
 
+## 10.0.1 IN PROGRESS
+
+* Instance 3rd pane: Adjust behavior when returning to instance from holdings/item full screen. Refs UIIN-2453.
+
 ## [10.0.0](https://github.com/folio-org/ui-inventory/tree/v10.0.0) (2023-10-13)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v9.4.12...v10.0.0)
 

src/Instance/HoldingsList/Holding/Holding.js

@@ -20,6 +20,8 @@ const Holding = ({
   isDraggable,
   isItemsDroppable,
   tenantId,
+  instanceId,
+  pathToAccordionsState,
 }) => {
   return (
     <div>
@@ -49,6 +51,8 @@ const Holding = ({
           onViewHolding={onViewHolding}
           onAddItem={onAddItem}
           tenantId={tenantId}
+          instanceId={instanceId}
+          pathToAccordionsState={pathToAccordionsState}
         >
           <ItemsListContainer
             holding={holding}
@@ -66,6 +70,7 @@ Holding.propTypes = {
   holding: PropTypes.object.isRequired,
   onViewHolding: PropTypes.func.isRequired,
   onAddItem: PropTypes.func.isRequired,
+  instanceId: PropTypes.string.isRequired,
   holdings: PropTypes.arrayOf(PropTypes.object),
   draggable: PropTypes.bool,
   droppable: PropTypes.bool,
@@ -74,10 +79,12 @@ Holding.propTypes = {
   isHoldingDragSelected: PropTypes.func,
   isItemsDroppable: PropTypes.bool,
   tenantId: PropTypes.string,
+  pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 };
 
 Holding.defaultProps = {
   isItemsDroppable: true,
+  pathToAccordionsState: [],
 };
 
 export default Holding;

src/Instance/HoldingsList/Holding/Holding.test.js

@@ -29,6 +29,7 @@ const HoldingSetup = () => (
   <Router>
     <Holding
       holding={holding}
+      instanceId="instanceId"
       onViewHolding={onViewHolding}
       onAddItem={onAddItem}
       holdings={holdings}
@@ -38,6 +39,7 @@ const HoldingSetup = () => (
       isHoldingDragSelected={isHoldingDragSelected}
       isDraggable={isDraggable}
       isItemsDroppable={isItemsDroppable}
+      pathToAccordionsState={['holdings']}
     />
   </Router>
 );

src/Instance/HoldingsList/Holding/HoldingAccordion.js

@@ -13,7 +13,10 @@ import {
 import { callNumberLabel } from '../../../utils';
 import HoldingButtonsGroup from './HoldingButtonsGroup';
 import useHoldingItemsQuery from '../../../hooks/useHoldingItemsQuery';
-import { useLocationsQuery } from '../../../hooks';
+import {
+  useHoldingsAccordionState,
+  useLocationsQuery,
+} from '../../../hooks';
 
 const HoldingAccordion = ({
   children,
@@ -23,13 +26,16 @@ const HoldingAccordion = ({
   onAddItem,
   withMoveDropdown,
   tenantId,
+  instanceId,
+  pathToAccordionsState,
 }) => {
   const searchParams = {
     limit: 0,
     offset: 0,
   };
 
-  const [open, setOpen] = useState(false);
+  const pathToAccordion = [...pathToAccordionsState, holding?.id];
+  const [open, setOpen] = useHoldingsAccordionState({ instanceId, pathToAccordion });
   const [openFirstTime, setOpenFirstTime] = useState(false);
   const { totalRecords, isFetching } = useHoldingItemsQuery(holding.id, { searchParams, key: 'itemCount', tenantId });
   const { data: locations } = useLocationsQuery({ tenantId });
@@ -113,10 +119,14 @@ HoldingAccordion.propTypes = {
   holding: PropTypes.object.isRequired,
   onViewHolding: PropTypes.func.isRequired,
   onAddItem: PropTypes.func.isRequired,
+  instanceId: PropTypes.string.isRequired,
   holdings: PropTypes.arrayOf(PropTypes.object),
   withMoveDropdown: PropTypes.bool,
   children: PropTypes.object,
   tenantId: PropTypes.string,
+  pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 };
 
+HoldingAccordion.defaultProps = { pathToAccordionsState: [] };
+
 export default HoldingAccordion;

src/Instance/HoldingsList/Holding/HoldingAccordion.test.js

@@ -37,6 +37,8 @@ const HoldingAccordionSetup = () => (
       onViewHolding={noop}
       onAddItem={noop}
       withMoveDropdown={false}
+      instanceId="instanceId"
+      pathToAccordionsState={['holdings']}
     >
       <></>
     </HoldingAccordion>

src/Instance/HoldingsList/Holding/HoldingContainer.js

@@ -36,6 +36,8 @@ const DraggableHolding = ({
   onViewHolding,
   onAddItem,
   tenantId,
+  instanceId,
+  pathToAccordionsState,
   ...rest
 }) => {
   const rowStyles = useMemo(() => (
@@ -68,6 +70,8 @@ const DraggableHolding = ({
               onViewHolding={onViewHolding}
               onAddItem={onAddItem}
               tenantId={tenantId}
+              instanceId={instanceId}
+              pathToAccordionsState={pathToAccordionsState}
             />
           )
       }
@@ -83,12 +87,16 @@ DraggableHolding.propTypes = {
   draggingHoldingsCount: PropTypes.number,
   provided: PropTypes.object.isRequired,
   snapshot: PropTypes.object.isRequired,
+  instanceId: PropTypes.string.isRequired,
   holding: PropTypes.object,
   onViewHolding: PropTypes.func,
   onAddItem: PropTypes.func,
   tenantId: PropTypes.string,
+  pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 };
 
+DraggableHolding.defaultProps = { pathToAccordionsState: [] };
+
 const HoldingContainer = ({
   location,
   history,
@@ -99,6 +107,7 @@ const HoldingContainer = ({
   holdingIndex,
   draggingHoldingsCount,
   tenantId,
+  pathToAccordionsState,
   ...rest
 }) => {
   const onViewHolding = useCallback(() => {
@@ -130,6 +139,8 @@ const HoldingContainer = ({
           onViewHolding={onViewHolding}
           onAddItem={onAddItem}
           tenantId={tenantId}
+          instanceId={instance?.id}
+          pathToAccordionsState={pathToAccordionsState}
           {...rest}
         />
       )}
@@ -141,6 +152,8 @@ const HoldingContainer = ({
       onViewHolding={onViewHolding}
       onAddItem={onAddItem}
       tenantId={tenantId}
+      instanceId={instance?.id}
+      pathToAccordionsState={pathToAccordionsState}
     />
   );
 };
@@ -157,6 +170,9 @@ HoldingContainer.propTypes = {
   isDraggable: PropTypes.bool,
   draggingHoldingsCount: PropTypes.number,
   tenantId: PropTypes.string,
+  pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 };
 
+HoldingContainer.defaultProps = { pathToAccordionsState: [] };
+
 export default withRouter(HoldingContainer);

src/Instance/HoldingsList/Holding/HoldingContainer.test.js

@@ -54,6 +54,7 @@ const renderHoldingContainer = (props = {}) => renderWithIntl(
           provided={{ draggableProps: { style: true } }}
           onViewHolding={jest.fn()}
           onAddItem={jest.fn()}
+          pathToAccordionsState={['holdings']}
           {...props}
         />
       </DnDContext.Provider>

src/Instance/HoldingsList/HoldingsList.js

@@ -7,6 +7,7 @@ const HoldingsList = ({
   instance,
   holdings,
   tenantId,
+  pathToAccordionsState,
 
   draggable,
   droppable,
@@ -19,20 +20,23 @@ const HoldingsList = ({
     droppable={droppable}
     holdings={holdings}
     tenantId={tenantId}
+    pathToAccordionsState={pathToAccordionsState}
   />
 ));
 
 HoldingsList.propTypes = {
   instance: PropTypes.object.isRequired,
   holdings: PropTypes.arrayOf(PropTypes.object),
   tenantId: PropTypes.string,
+  pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 
   draggable: PropTypes.bool,
   droppable: PropTypes.bool,
 };
 
 HoldingsList.defaultProps = {
   holdings: [],
+  pathToAccordionsState: [],
 };
 
 export default HoldingsList;

src/Instance/HoldingsList/HoldingsListContainer.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  Loading,
-} from '@folio/stripes/components';
+import { Loading } from '@folio/stripes/components';
 
 import HoldingsList from './HoldingsList';
 import { HoldingsListMovement } from '../InstanceMovement/HoldingMovementList';
@@ -13,6 +11,7 @@ const HoldingsListContainer = ({
   instance,
   isHoldingsMove,
   tenantId,
+  pathToAccordionsState,
   ...rest
 }) => {
   const { holdingsRecords: holdings, isLoading } = useInstanceHoldingsQuery(instance.id, { tenantId });
@@ -26,13 +25,15 @@ const HoldingsListContainer = ({
         holdings={holdings}
         instance={instance}
         tenantId={tenantId}
+        pathToAccordionsState={pathToAccordionsState}
       />
     ) : (
       <HoldingsList
         {...rest}
         holdings={holdings}
         instance={instance}
         tenantId={tenantId}
+        pathToAccordionsState={pathToAccordionsState}
       />
     )
   );
@@ -42,6 +43,9 @@ HoldingsListContainer.propTypes = {
   instance: PropTypes.object.isRequired,
   isHoldingsMove: PropTypes.bool,
   tenantId: PropTypes.string,
+  pathToAccordionsState: PropTypes.arrayOf(PropTypes.string),
 };
 
+HoldingsListContainer.defaultProps = { pathToAccordionsState: [] };
+
 export default HoldingsListContainer;

src/Instance/InstanceDetails/ConsortialHoldings/ConsortialHoldings.js

@@ -1,4 +1,8 @@
-import React, { useContext } from 'react';
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+} from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
@@ -13,33 +17,50 @@ import {
 
 import { MemberTenantHoldings } from '../MemberTenantHoldings';
 import { DataContext } from '../../../contexts';
-import { useSearchForShadowInstanceTenants } from '../../../hooks';
+import {
+  useHoldingsAccordionState,
+  useSearchForShadowInstanceTenants,
+} from '../../../hooks';
 
 const ConsortialHoldings = ({ instance }) => {
+  const instanceId = instance?.id;
+  const prevInstanceId = useRef(instanceId);
+
   const stripes = useStripes();
   const { consortiaTenantsById } = useContext(DataContext);
 
-  const { tenants } = useSearchForShadowInstanceTenants({ instanceId: instance?.id });
+  const { tenants } = useSearchForShadowInstanceTenants({ instanceId });
 
   const memberTenants = tenants
     .map(tenant => consortiaTenantsById[tenant.id])
     .filter(tenant => !tenant?.isCentral && (tenant?.id !== stripes.okapi.tenant))
     .sort((a, b) => a.name.localeCompare(b.name));
 
+  const pathToAccordion = ['consortialHoldings', '_state'];
+  const [isConsortialAccOpen, setConsortialAccOpen] = useHoldingsAccordionState({ instanceId, pathToAccordion });
+
+  useEffect(() => {
+    if (instanceId !== prevInstanceId.current) {
+      setConsortialAccOpen(false);
+      prevInstanceId.current = instanceId;
+    }
+  }, [instanceId]);
+
   return (
     <IfInterface name="consortia">
       <Accordion
         id="consortial-holdings"
         label={<FormattedMessage id="ui-inventory.consortialHoldings" />}
-        closedByDefault
+        open={isConsortialAccOpen}
+        onToggle={() => setConsortialAccOpen(prevState => !prevState)}
       >
         {!memberTenants.length
           ? <FormattedMessage id="stripes-components.tableEmpty" />
           : (
             <AccordionSet>
               {memberTenants.map(memberTenant => (
                 <MemberTenantHoldings
-                  key={memberTenant.id}
+                  key={`${memberTenant.id}.${instanceId}`}
                   memberTenant={memberTenant}
                   instance={instance}
                 />

src/Instance/InstanceDetails/MemberTenantHoldings/MemberTenantHoldings.js

@@ -16,6 +16,7 @@ import { InstanceNewHolding } from '../InstanceNewHolding';
 import { MoveItemsContext } from '../../MoveItemsContext';
 
 import { useInstanceHoldingsQuery } from '../../../providers';
+import { useHoldingsAccordionState } from '../../../hooks';
 
 import css from './MemberTenantHoldings.css';
 
@@ -27,7 +28,13 @@ const MemberTenantHoldings = ({
     name,
     id,
   } = memberTenant;
+  const instanceId = instance?.id;
   const stripes = useStripes();
+
+  const pathToAccordion = ['consortialHoldings', id, '_state'];
+  const pathToHoldingsAccordion = ['consortialHoldings', id];
+  const [isMemberTenantAccOpen, setMemberTenantAccOpen] = useHoldingsAccordionState({ instanceId, pathToAccordion });
+
   const { holdingsRecords, isLoading } = useInstanceHoldingsQuery(instance?.id, { tenantId: id });
   const isUserInCentralTenant = checkIfUserInCentralTenant(stripes);
 
@@ -38,7 +45,8 @@ const MemberTenantHoldings = ({
       className={css.memberTenantHoldings}
       id={`${name}-holdings`}
       label={name}
-      closedByDefault
+      open={isMemberTenantAccOpen}
+      onToggle={() => setMemberTenantAccOpen(prevValue => !prevValue)}
     >
       <div className={css.memberTenantHoldings}>
         {isLoading
@@ -51,6 +59,7 @@ const MemberTenantHoldings = ({
                 tenantId={id}
                 draggable={false}
                 droppable={false}
+                pathToAccordionsState={pathToHoldingsAccordion}
               />
             </MoveItemsContext>
           )}