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

Use context to pass the window id around #3661

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Use context to pass the window id around #3661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 1 addition & 2 deletions __tests__/src/components/CompanionWindowFactory.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,11 @@ import { CompanionWindowFactory } from '../../../src/components/CompanionWindowF
function createWrapper({ content = 'closed', ...props }) {
return render(
<CompanionWindowFactory
windowId="x"
id="123"
content={content}
{...props}
/>,
{ preloadedState: { companionWindows: { 123: { content }, thumb: {} }, windows: { x: { thumbnailNavigationId: 'thumb' } } } },
{ preloadedState: { companionWindows: { 123: { content }, thumb: {} }, windows: { x: { thumbnailNavigationId: 'thumb' } } }, windowId: 'x' },
);
}

Expand Down
2 changes: 1 addition & 1 deletion __tests__/src/components/GalleryView.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ function createWrapper(props) {
return render(
<GalleryView
canvases={Utils.parseManifest(manifestJson).getSequences()[0].getCanvases()}
windowId="1234"
selectedCanvasIndex={0}
{...props}
/>,
{ windowId: '1234' },
);
}

Expand Down
11 changes: 3 additions & 8 deletions __tests__/src/components/PrimaryWindow.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,9 @@ function createWrapper(props) {
return render(
<PrimaryWindow
classes={{}}
windowId="xyz"
{...props}
/>,
{ preloadedState: { windows: { xyz: { collectionPath: [{}], companionWindowIds: [] } } } },
{ preloadedState: { windows: { xyz: { collectionPath: [{}], companionWindowIds: [] } } }, windowId: 'xyz' },
);
}

Expand All @@ -30,10 +29,7 @@ describe('PrimaryWindow', () => {
});
it('should render <GalleryView> if fetching is complete and view is gallery', async () => {
createWrapper({ isFetching: false, view: 'gallery' });
await screen.findByTestId('test-window');
await waitFor(() => {
expect(document.querySelector('#xyz-gallery')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
});
expect(await screen.findByRole('region', { accessibleName: 'gallery section' })).toBeInTheDocument();
});
it('should render <CollectionDialog> and <SelectCollection> if manifest is collection and isCollectionDialogVisible', async () => {
render(<div id="xyz" />);
Expand All @@ -42,9 +38,8 @@ describe('PrimaryWindow', () => {
classes={{}}
isCollection
isCollectionDialogVisible
windowId="xyz"
/>,
{ preloadedState: { windows: { xyz: { collectionPath: [{}] } } } },
{ preloadedState: { windows: { xyz: { collectionPath: [{}] } } }, windowId: 'xyz' },
);
await screen.findByRole('button', { accessibleName: 'show collection' });
});
Expand Down
1 change: 1 addition & 0 deletions __tests__/src/components/SearchResults.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ function createWrapper(props) {
window: {},
},
},
windowId: 'window',
},
);
}
Expand Down
2 changes: 1 addition & 1 deletion __tests__/src/components/WindowSideBar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { WindowSideBar } from '../../../src/components/WindowSideBar';
function createWrapper({ ...props }) {
return render(
<WindowSideBar
windowId="xyz"
{...props}
/>,
{
Expand All @@ -17,6 +16,7 @@ function createWrapper({ ...props }) {
},
},
},
windowId: 'xyz',
},
);
}
Expand Down
3 changes: 1 addition & 2 deletions __tests__/src/components/WindowSideBarAnnotationsPanel.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,9 @@ function createWrapper(props, state) {
annotationCount={4}
classes={{}}
id="xyz"
windowId="abc"
{...props}
/>,
{ preloadedState: { companionWindows: { xyz: { content: 'annotations' } }, windows: { abc: {} }, ...state } },
{ preloadedState: { companionWindows: { xyz: { content: 'annotations' } }, windows: { abc: {} }, ...state }, windowId: 'abc' },
);
}

Expand Down
20 changes: 13 additions & 7 deletions __tests__/utils/test-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import createRootReducer from '../../src/state/reducers/rootReducer';
import settings from '../../src/config/settings';
import createI18nInstance from '../../src/i18n';
import WindowContext from '../../src/contexts/WindowContext';

/** Mirador viewer setup for Integration tests */
import Mirador from '../../src/index';
Expand All @@ -29,19 +30,24 @@
preloadedState = {},
// Automatically create a store instance if no store was passed in
store = createStore(rootReducer, preloadedState, applyMiddleware(thunk)),
windowId,
...renderOptions
} = {},
) {
const windowContext = windowId ? { id: windowId } : {};

/** :nodoc: */
function Wrapper({ children }) {
return (
<I18nextProvider i18n={i18n}>
<ThemeProvider theme={theme}>
<Provider store={store}>
{children}
</Provider>
</ThemeProvider>
</I18nextProvider>
<WindowContext.Provider value={windowContext}>
<I18nextProvider i18n={i18n}>
<ThemeProvider theme={theme}>
<Provider store={store}>
{children}
</Provider>
</ThemeProvider>
</I18nextProvider>
</WindowContext.Provider>
);
}

Expand Down Expand Up @@ -89,7 +95,7 @@
expect(await screen.findByLabelText('Workspace')).toBeInTheDocument();

if ((config.windows || []).length > 0) {
await screen.findAllByRole('region', { name: /Window:/i });

Check failure on line 98 in __tests__/utils/test-utils.js

View workflow job for this annotation

GitHub Actions / build (20.x)

__tests__/integration/mirador/tests/annotations.test.js > Annotations in Mirador > Loads the manifest 

TestingLibraryElementError: Unable to find role="region" and name `/Window:/i`

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      data-testid="mirador"
      style="bottom: 0px; left: 0px; position: absolute; right: 0px; top: 0px;"
    >
      <div
        class="fullscreen"
      >
        <div
          class="css-rvh6fe-WorkspaceArea-root"
        >
          <nav
            aria-label="Workspace navigation"
            class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorDefault MuiAppBar-positionAbsolute mirador-workspace-control-panel css-3f7qxr-MuiPaper-root-MuiAppBar-root-WorkspaceControlPanel-root"
          >
            <div
              class="MuiToolbar-root MuiToolbar-regular css-1lartyw-MuiToolbar-root-WorkspaceControlPanel-toolbar"
            >
              <button
                aria-label="Add resource"
                class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeMedium MuiFab-primary MuiFab-root MuiFab-circular MuiFab-sizeMedium MuiFab-primary css-18prof-MuiButtonBase-root-MuiFab-root-WorkspaceAddButton-root"
                data-mui-internal-clone-element="true"
                id="addBtn"
                tabindex="0"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
                  data-testid="AddSharpIcon"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"
                  />
                </svg>
                <span
                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                />
              </button>
              <div
                class="css-j0aotr-WorkspaceControlPanel-buttonArea"
              >
                <button
                  aria-haspopup="true"
                  aria-label="Jump to window"
                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1tjecsd-MuiButtonBase-root-MuiIconButton-root-MiradorMenuButton-root"
                  data-mui-internal-clone-element="true"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiBadge-root css-1yq562r-MuiBadge-root"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
                      data-testid="BookmarksSharpIcon"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="m19 18 2 1V1H7v2h12zM17 5H3v18l7-3 7 3z"
                      />
                    </svg>
                    <span
                      class="MuiBadge-badge MuiBadge-standard MuiBadge-anchorOriginTopRight MuiBadge-anchorOriginTopRightRectangular MuiBadge-overlapRectangular css-dlwkee-MuiBadge-badge"
                    >
                      1
                    </span>
                  </span>
                  <span
                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                  />
                </button>
                <button
                  aria-haspopup="true"
                  aria-label="Workspace settings"
                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1tjecsd-MuiButtonBase-root-MuiIconButton-root-MiradorMenuButton-root"
                  data-mui-internal-clone-element="true"
                  id="menuBtn"
                  tabindex="0"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
                    data-testid="SettingsSharpIcon"
                    focusable="false"
}
});
};
1 change: 0 additions & 1 deletion src/components/AnnotationSettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,4 @@ AnnotationSettings.propTypes = {
displayAll: PropTypes.bool.isRequired,
displayAllDisabled: PropTypes.bool.isRequired,
toggleAnnotationDisplay: PropTypes.func.isRequired,
windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
};
3 changes: 0 additions & 3 deletions src/components/AttributionPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export function AttributionPanel({
manifestLogo = null,
requiredStatement = null,
rights = null,
windowId,
id,
}) {
const { t } = useTranslation();
Expand All @@ -37,7 +36,6 @@ export function AttributionPanel({
<CompanionWindow
title={t('attributionTitle')}
paperClassName={ns('attribution-panel')}
windowId={windowId}
id={id}
>
<CompanionWindowSection>
Expand Down Expand Up @@ -86,5 +84,4 @@ AttributionPanel.propTypes = {
value: PropTypes.string,
})),
rights: PropTypes.arrayOf(PropTypes.string),
windowId: PropTypes.string.isRequired,
};
2 changes: 1 addition & 1 deletion src/components/CompanionArea.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export function CompanionArea({
className={`${ns('companion-windows')}`}
>
{companionWindowIds.map((id) => (
<CompanionWindowFactory id={id} key={id} windowId={windowId} />
<CompanionWindowFactory id={id} key={id} />
))}
</Container>
</Slide>
Expand Down
10 changes: 4 additions & 6 deletions src/components/CompanionWindowFactory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,30 @@ import ErrorContent from '../containers/ErrorContent';
* Render a companion window using the appropriate component for the content
*/
export function CompanionWindowFactory({
content = null, id, windowId,
content = null, id,
}) {
const { t } = useTranslation();
const ErroredCompanionWindow = useCallback(({ error }) => (
<CompanionWindow
title={t('error')}
windowId={windowId}
id={id}
>
<ErrorContent error={error} windowId={windowId} companionWindowId={id} />
<ErrorContent error={error} companionWindowId={id} />
</CompanionWindow>
), [windowId, t, id]);
), [t, id]);

const DynamicCompanionWindowType = CompanionWindowRegistry[content];

if (!DynamicCompanionWindowType) return null;

return (
<ErrorBoundary fallbackComponent={ErroredCompanionWindow}>
<DynamicCompanionWindowType id={id} windowId={windowId} />
<DynamicCompanionWindowType id={id} />
</ErrorBoundary>
);
}

CompanionWindowFactory.propTypes = {
content: PropTypes.string,
id: PropTypes.string.isRequired,
windowId: PropTypes.string.isRequired,
};
4 changes: 1 addition & 3 deletions src/components/CustomPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,13 @@ import CompanionWindow from '../containers/CompanionWindow';
* a custom panel that can be used for anything
*/
export function CustomPanel({
id, children = null, title, windowId,
id, children = null, title,
}) {
const { t } = useTranslation();
return (
<CompanionWindow
title={t(title)}
id={id}
windowId={windowId}
>
{children}
</CompanionWindow>
Expand All @@ -24,5 +23,4 @@ CustomPanel.propTypes = {
children: PropTypes.node,
id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
windowId: PropTypes.string.isRequired,
};
5 changes: 1 addition & 4 deletions src/components/GalleryView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const Root = styled(Paper, { name: 'GalleryView', slot: 'root' })(({ theme }) =>
/**
* Renders a GalleryView overview of the manifest.
*/
export function GalleryView({ canvases, viewingDirection = '', windowId }) {
export function GalleryView({ canvases, viewingDirection = '' }) {
const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
return (
<Root
Expand All @@ -26,13 +26,11 @@ export function GalleryView({ canvases, viewingDirection = '', windowId }) {
dir={htmlDir}
square
elevation={0}
id={`${windowId}-gallery`}
>
{
canvases.map(canvas => (
<GalleryViewThumbnail
key={canvas.id}
windowId={windowId}
canvas={canvas}
/>
))
Expand All @@ -44,5 +42,4 @@ export function GalleryView({ canvases, viewingDirection = '', windowId }) {
GalleryView.propTypes = {
canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
viewingDirection: PropTypes.string,
windowId: PropTypes.string.isRequired,
};
1 change: 0 additions & 1 deletion src/components/IIIFAuthentication.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export function IIIFAuthentication({
authServiceId,
hasLogoutService: !!logoutServiceId,
status,
windowId,
});

/** handle the IIIF logout workflow */
Expand Down
5 changes: 1 addition & 4 deletions src/components/LayersPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,20 @@ import CanvasLayers from '../containers/CanvasLayers';
* a panel showing the canvases for a given manifest
*/
export function LayersPanel({
canvasIds = [], id, windowId,
canvasIds = [], id,
}) {
const { t } = useTranslation();
return (
<CompanionWindow
title={t('layers')}
id={id}
windowId={windowId}
>
{canvasIds.map((canvasId, index) => (
<CanvasLayers
canvasId={canvasId}
index={index}
key={canvasId}
totalSize={canvasIds.length}
windowId={windowId}
/>
))}
</CompanionWindow>
Expand All @@ -32,5 +30,4 @@ export function LayersPanel({
LayersPanel.propTypes = {
canvasIds: PropTypes.arrayOf(PropTypes.string),
id: PropTypes.string.isRequired,
windowId: PropTypes.string.isRequired,
};
2 changes: 1 addition & 1 deletion src/components/OpenSeadragonViewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export function OpenSeadragonViewer({
);
})}
{ drawAnnotations
&& <AnnotationsOverlay viewer={viewer} windowId={windowId} /> }
&& <AnnotationsOverlay viewer={viewer} /> }
{ enhancedChildren }
<PluginHook viewer={viewer} {...pluginProps} />
</OpenSeadragonComponent>
Expand Down
33 changes: 10 additions & 23 deletions src/components/PrimaryWindow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,41 +26,31 @@ const Root = styled('div', { name: 'PrimaryWindow', slot: 'root' })(() => ({
/** */
const TypeSpecificViewer = ({
audioResources = [], isCollection = false,
isFetching = false, videoResources = [], view = undefined, windowId,
isFetching = false, videoResources = [], view = undefined,
}) => {
if (isCollection) {
return (
<SelectCollection
windowId={windowId}
/>
<SelectCollection />
);
}
if (isFetching === false) {
if (view === 'gallery') {
return (
<GalleryView
windowId={windowId}
/>
<GalleryView />
);
}
if (videoResources.length > 0) {
return (
<VideoViewer
windowId={windowId}
/>
<VideoViewer />
);
}
if (audioResources.length > 0) {
return (
<AudioViewer
windowId={windowId}
/>
<AudioViewer />
);
}
return (
<WindowViewer
windowId={windowId}
/>
<WindowViewer />
);
}
return null;
Expand All @@ -72,7 +62,6 @@ TypeSpecificViewer.propTypes = {
isFetching: PropTypes.bool,
videoResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
view: PropTypes.string,
windowId: PropTypes.string.isRequired,
};

/**
Expand All @@ -81,22 +70,21 @@ TypeSpecificViewer.propTypes = {
*/
export function PrimaryWindow({
audioResources = undefined, isCollection = false, isFetching = false, videoResources = undefined,
view = undefined, windowId, isCollectionDialogVisible = false, children = null, className = undefined,
view = undefined, isCollectionDialogVisible = false, children = null, className = undefined,
}) {
const viewerProps = {
audioResources,
isCollection,
isFetching,
videoResources,
view,
windowId,
};

return (
<Root data-testid="test-window" className={classNames(ns('primary-window'), className)}>
<WindowSideBar windowId={windowId} />
<CompanionArea windowId={windowId} position="left" />
{ isCollectionDialogVisible && <CollectionDialog windowId={windowId} /> }
<WindowSideBar />
<CompanionArea position="left" />
{ isCollectionDialogVisible && <CollectionDialog /> }
<Suspense fallback={<div />}>
{children || <TypeSpecificViewer {...viewerProps} />}
</Suspense>
Expand All @@ -113,5 +101,4 @@ PrimaryWindow.propTypes = {
isFetching: PropTypes.bool,
videoResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
view: PropTypes.string,
windowId: PropTypes.string.isRequired,
};
Loading
Loading