}
@@ -56,12 +66,45 @@ export default function TopBar() {
);
}
-const LoginPrompt: FC = () => (
-
-
-);
+const LoginPrompt: FC = () => {
+ // We form a "next request", essentially a redirect back to the current location after
+ // sign in, except for a few bespoke pages, the login page and the signedout page.
+ const nextRequest: NextRequestObject | undefined = (() => {
+ const pathname = window.location.pathname;
+ if (
+ NEXT_REQUEST_BLACKLIST.some((blacklistedPath) => {
+ return blacklistedPath.test(pathname);
+ })
+ ) {
+ return;
+ }
+ return {
+ path: {
+ path: pathname,
+ type: 'europaui',
+ },
+ };
+ })();
+
+ const url = new URL(window.location.origin);
+ if (nextRequest) {
+ url.searchParams.set('nextrequest', JSON.stringify(nextRequest));
+ }
+ url.pathname = LOGIN_ROUTE;
+
+ // Sign in should be disabled on the sign-in page! The sign-in page may have a search
+ // param suffix, so we split it off.
+ return (
+
+
+ );
+};
const UserMenu: FC = () => {
const username = useAppSelector(authUsername);
@@ -133,7 +176,11 @@ const UserMenu: FC = () => {
}
}}
>
-
+
@@ -142,30 +189,6 @@ const UserMenu: FC = () => {
);
};
-const useLogout = () => {
- const tokenId = useAppSelector(({ auth }) => auth.tokenInfo?.id);
- const dispatch = useAppDispatch();
- const [revoke] = revokeToken.useMutation();
- const navigate = useNavigate();
-
- if (!tokenId) return noOp;
-
- return () => {
- revoke(tokenId)
- .unwrap()
- .then(() => {
- dispatch(resetStateAction());
- // setAuth(null) follow the state reset to initialize the page as un-Authed
- dispatch(setAuth(null));
- toast('You have been signed out');
- navigate('/legacy/auth2/signedout');
- })
- .catch(() => {
- toast('Error, could not log out.');
- });
- };
-};
-
const HamburgerMenu: FC = () => {
const navigate = useNavigate();
return (
@@ -203,6 +226,11 @@ const HamburgerMenu: FC = () => {
icon:
,
label: 'KBase Services Status',
},
+ {
+ value: '/legacy/orcidlink',
+ icon:
,
+ label: 'KBase ORCID Link',
+ },
],
},
{
@@ -274,13 +302,13 @@ const UserAvatar = () => {
const PageTitle: FC = () => {
const title = useAppSelector((state) => state.layout.pageTitle);
return (
-
+
{title || ''}
);
};
-const Enviroment: FC = () => {
+const Environment: FC = () => {
const env = useAppSelector((state) => state.layout.environment);
if (env === 'production') return null;
const icon = {
diff --git a/src/features/legacy/CountdownClock.test.tsx b/src/features/legacy/CountdownClock.test.tsx
new file mode 100644
index 00000000..033a123a
--- /dev/null
+++ b/src/features/legacy/CountdownClock.test.tsx
@@ -0,0 +1,25 @@
+import { render, waitFor } from '@testing-library/react';
+import { WAIT_FOR_INTERVAL, WAIT_FOR_TIMEOUT } from '../../common/testUtils';
+import CountdownClock from './CountdownClock';
+
+describe('CountdownClock Component', () => {
+ test('renders with minimal props to completion', async () => {
+ const { container } = render(
+
+ );
+
+ await waitFor(
+ () => {
+ expect(container).toHaveTextContent('remaining');
+ },
+ { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ );
+
+ await waitFor(
+ () => {
+ expect(container).toHaveTextContent('DONE');
+ },
+ { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ );
+ });
+});
diff --git a/src/features/legacy/CountdownClock.tsx b/src/features/legacy/CountdownClock.tsx
new file mode 100644
index 00000000..29db7362
--- /dev/null
+++ b/src/features/legacy/CountdownClock.tsx
@@ -0,0 +1,67 @@
+/**
+ * A component to display the time left until a given duration has been met.
+ *
+ * In other words, a count-down to a given time limit. It is bespoke for the
+ * legacy component. It displays both the time remaining, the total time limit,
+ * and a progress bar.
+ */
+import { Box, Typography } from '@mui/material';
+import LinearProgress from '@mui/material/LinearProgress';
+import { useEffect, useState } from 'react';
+
+export interface CountdownClockProps {
+ duration: number;
+ interval: number;
+ elapsed?: number;
+}
+
+const CountdownClock = (props: CountdownClockProps) => {
+ const [currentTime, setCurrentTime] = useState
(Date.now());
+
+ const [startTime] = useState(Date.now());
+
+ // Just keeps the clock ticking.
+ useEffect(() => {
+ const timer = window.setInterval(() => {
+ const now = Date.now();
+ const elapsed = now - startTime;
+ if (elapsed > props.duration) {
+ window.clearInterval(timer);
+ }
+ setCurrentTime(now);
+ }, props.interval);
+
+ return () => {
+ window.clearInterval(timer);
+ };
+ }, [startTime, props.interval, props.duration, setCurrentTime]);
+
+ const totalDurationInSeconds = props.duration / 1000;
+
+ const elapsedInSeconds =
+ Math.round((currentTime - startTime) / 1000) + (props.elapsed || 0) / 1000;
+
+ const elapsed = currentTime - startTime;
+ const isDone = elapsed >= props.duration;
+
+ const message = (() => {
+ if (isDone) {
+ return `DONE - ${totalDurationInSeconds} seconds have elapsed`;
+ }
+ return `${
+ totalDurationInSeconds - elapsedInSeconds
+ } seconds remaining until timeout`;
+ })();
+
+ return (
+
+
+ {message}
+
+ );
+};
+
+export default CountdownClock;
diff --git a/src/features/legacy/IFrameFallback.tsx b/src/features/legacy/IFrameFallback.tsx
deleted file mode 100644
index c68d8a54..00000000
--- a/src/features/legacy/IFrameFallback.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ComponentProps } from 'react';
-import { useParams, Navigate, Params } from 'react-router-dom';
-import { isInsideIframe } from '../../common';
-import PageNotFound from '../layout/PageNotFound';
-
-/**
- * 404s from the legacy site are redirected from legacy.DOMAIN/[some/path/here] to DOMAIN/fallback/[some/path/here]
- * this component handles these fallback redirects as defined in Routes.tsx
- */
-export const Fallback = ({
- redirect,
- reload = false,
-}: {
- redirect: (
- params: Readonly>
- ) => ComponentProps['to'] | null;
- reload?: boolean;
-}) => {
- const params = useParams();
- const to = redirect(params);
-
- if (window.top && isInsideIframe(window)) {
- // Not in top window, redirect top window to current location
- window.top.location = window.location;
- return Redirecting...
;
- } else if (to) {
- if (reload) {
- // redirect is specified and reload is TRUE, perform immediate JS href redirect
- window.location.href = to.toString();
- return Redirecting...
;
- } else {
- // redirect is specified and reload is FALSE, render router Navigate redirect
- return ;
- }
- } else {
- return ;
- }
-};
diff --git a/src/features/legacy/IFrameWrapper.module.scss b/src/features/legacy/IFrameWrapper.module.scss
new file mode 100644
index 00000000..64db3142
--- /dev/null
+++ b/src/features/legacy/IFrameWrapper.module.scss
@@ -0,0 +1,15 @@
+@import "../../common/colors";
+
+.main {
+ display: flex;
+ flex-flow: column nowrap;
+ height: 100%;
+ position: relative;
+ width: 100%;
+}
+
+.iframe {
+ border: 0;
+ height: 100%;
+ width: 100%;
+}
diff --git a/src/features/legacy/IFrameWrapper.test.tsx b/src/features/legacy/IFrameWrapper.test.tsx
new file mode 100644
index 00000000..a7f2f542
--- /dev/null
+++ b/src/features/legacy/IFrameWrapper.test.tsx
@@ -0,0 +1,1130 @@
+import { act, render, waitFor } from '@testing-library/react';
+import {
+ MemoryRouter,
+ Route,
+ RouterProvider,
+ Routes,
+ createMemoryRouter,
+} from 'react-router-dom';
+import {
+ UI_ORIGIN,
+ WAIT_FOR_INTERVAL,
+ WAIT_FOR_TIMEOUT,
+ makeWindowMessageSender,
+ RECEIVE_CHANNEL_ID,
+ SEND_CHANNEL_ID,
+} from '../../common/testUtils';
+import IFrameWrapper, { IFrameWrapperProps } from './IFrameWrapper';
+import { LEGACY_BASE_ROUTE } from './constants';
+import { KBaseUILoggedinPayload } from './messageValidation';
+import * as utils from './utils';
+
+/**
+ * Renders an iframe wrapper component with router support.
+ *
+ * @param props
+ * @returns
+ */
+function setupComponentWithRouting4(props: IFrameWrapperProps) {
+ const router = createMemoryRouter(
+ [
+ {
+ path: `${LEGACY_BASE_ROUTE()}/*`,
+ element: ,
+ },
+ ],
+ {
+ initialEntries: [`${LEGACY_BASE_ROUTE()}/foo`],
+ initialIndex: 0,
+ }
+ );
+ const { container } = render();
+
+ return { container, router };
+}
+
+/**
+ * Creates an IFrameWrapper component wrapped in a router.
+ *
+ * Used when we need to rerender with changed props.
+ *
+ * @param props
+ * @returns
+ */
+
+// const WrappedIFrameWrapper = (props: IFrameWrapperProps) => {
+// const router = createMemoryRouter(
+// [
+// {
+// path: `${LEGACY_BASE_ROUTE()}/*`,
+// element:
+// }
+// ]
+// ,
+// {
+// initialEntries: [`${LEGACY_BASE_ROUTE()}/foo`],
+// initialIndex: 0,
+// });
+
+// return ;
+// }
+
+const WrappedIFrameWrapper = (props: IFrameWrapperProps) => {
+ return (
+
+
+ }
+ />
+
+
+ );
+};
+
+/**
+ * Renders the WrappedIFrameWrapper above in situations in which we don't need to
+ * re-render the component, and would like the extra convenience of extracting the
+ * contentWindow, which requires some tedious assertions.
+ *
+ * @param props
+ * @returns
+ */
+const renderWrappedIFrameWrapper = (props: IFrameWrapperProps) => {
+ const { container } = render();
+
+ const iframe = container.querySelector('iframe');
+
+ // constrain iframe
+ if (iframe === null) {
+ throw new Error('Impossible - iframe is null');
+ }
+
+ expect(iframe).toHaveAttribute('title', 'kbase-ui Wrapper');
+ if (iframe.contentWindow === null) {
+ throw new Error('Impossible - iframe contentWindow is null');
+ }
+
+ return { container, contentWindow: iframe.contentWindow };
+};
+
+// Commented out as the test it supports is commented out.
+// TODO: sort this out
+// function renderIFrameWrapperWithRouting(
+// props: IFrameWrapperProps,
+// onNarratives: () => void
+// ) {
+// // TODO: ensure that we can test with a subdomain AND a path.
+// const Narratives = ({ onNarratives }: { onNarratives: () => void }) => {
+// onNarratives();
+// return FOO
;
+// };
+// const { container } = render(
+//
+//
+// }
+// />
+// }
+// />
+//
+//
+// );
+
+// const iframe = container.querySelector('iframe');
+
+// // constrain iframe
+// if (iframe === null) {
+// throw new Error('Impossible - iframe is null');
+// }
+
+// expect(iframe).toHaveAttribute('title', 'kbase-ui Wrapper');
+// if (iframe.contentWindow === null) {
+// throw new Error('Impossible - iframe contentWindow is null');
+// }
+
+// return { container, contentWindow: iframe.contentWindow };
+// }
+
+/**
+ * Simulates what Legacy.tsx would do to prepare props for IFrameWrapper
+ * @param propOverrides
+ * @returns
+ */
+function createIFrameProps(
+ propOverrides: Partial
+): IFrameWrapperProps {
+ // Mock the browser location, as we use
+ const legacyPath: utils.LegacyPath = {
+ path: 'about',
+ };
+
+ // Create the props and the component.
+ // const channel = CHANNEL_ID;
+ // TODO: stand up a service here!
+ const legacyURL = new URL('http://legacy.localhost');
+
+ legacyURL.hash = `about$`;
+
+ const token = null;
+
+ const setTitle =
+ typeof propOverrides.setTitle !== 'undefined'
+ ? propOverrides.setTitle
+ : (_: string) => {
+ return;
+ };
+
+ const onLoggedIn =
+ typeof propOverrides.onLoggedIn !== 'undefined'
+ ? propOverrides.onLoggedIn
+ : (_: KBaseUILoggedinPayload) => {
+ return;
+ };
+
+ const onLogOut =
+ typeof propOverrides.onLogOut !== 'undefined'
+ ? propOverrides.onLogOut
+ : () => {
+ return;
+ };
+
+ const iframeProps: IFrameWrapperProps = {
+ receiveChannelId: RECEIVE_CHANNEL_ID,
+ sendChannelId: SEND_CHANNEL_ID,
+ legacyURL,
+ token,
+ legacyPath,
+ spyOnChannels:
+ typeof propOverrides.spyOnChannels === 'undefined'
+ ? false
+ : propOverrides.spyOnChannels,
+ setTitle,
+ onLoggedIn,
+ onLogOut,
+ };
+
+ return iframeProps;
+}
+
+describe('IFrameWrapper Module', () => {
+ let infoLogSpy: jest.SpyInstance;
+ beforeEach(() => {
+ jest.resetAllMocks();
+ infoLogSpy = jest.spyOn(console, 'info');
+ });
+
+ // describe('channelSpy function', () => {
+ // test('logs to the console', () => {
+ // channelSpy(
+ // 'SEND',
+ // new ChannelMessage({
+ // name: 'foo',
+ // payload: 'bar',
+ // envelope: { id: 'baz', channel: CHANNEL_ID },
+ // })
+ // );
+ // expect(infoLogSpy).toHaveBeenCalled();
+ // expect(infoLogSpy).toHaveBeenCalledWith(
+ // '[IFrameWrapper][spy][SEND]',
+ // CHANNEL_ID,
+ // 'foo'
+ // );
+ // });
+ // });
+
+ describe('IFrameWrapper Component', () => {
+ /**
+ * Ensure that the `kbase-ui.set-title` message is received and handled correctly.
+ */
+ test('receives "kbase-ui.set-title" normally', async () => {
+ // Ensures that the legacy base url is the same as Europa.
+ jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ const EXPECTED_TITLE = 'my title';
+
+ let pageTitle: unknown = null;
+ const setTitle = (title: string) => {
+ pageTitle = title;
+ };
+
+ // Override the iframe props `setTitle` prop.
+ const iframeProps = createIFrameProps({ setTitle, spyOnChannels: true });
+
+ const { contentWindow } = renderWrappedIFrameWrapper(iframeProps);
+
+ // let TEST_EUROPA_RECEIVE_CHANNEL = 'foo';
+ // const TEST_KBASE_UI_RECEIVE_CHANNEL = 'kbase-ui-receive-channel';
+ const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ // Here we simulate kbase-ui message handling, which is carried out on the
+ // iframe's contentWindow.
+ // TODO: redo for the new connection message flow:
+
+ // connect
+ // Europa KBase UI
+ // ----------------- ------------------
+ // load kbase-ui
+ // send kbase-ui.connect({channel})
+ // send europa.connect
+ // send kbase-ui.connected
+
+ // If navigating ...
+ // send europa.authnavigate
+
+ // Standard connect dance...
+ contentWindow.addEventListener('message', (messageEvent) => {
+ if ('envelope' in messageEvent.data) {
+ if ('channel' in messageEvent.data.envelope) {
+ if (messageEvent.data.envelope.channel !== SEND_CHANNEL_ID) {
+ return;
+ }
+ }
+ }
+ // We want to listen for all 'europa' messages here.
+ // Simulate reaction to the 'start' message, by sending 'started'.
+ if ('name' in messageEvent.data) {
+ // Handle messages to simulate kbase-ui
+ switch (messageEvent.data.name) {
+ case 'europa.connect': {
+ // This is the normal message after connect is received.
+ act(() => {
+ sendMessage('kbase-ui.connected', RECEIVE_CHANNEL_ID, {});
+ });
+
+ // Then some time later, we are simulating a set-title event
+ // act(() => {
+ // sendMessage('kbase-ui.set-title', RECEIVE_CHANNEL_ID, {
+ // title: EXPECTED_TITLE,
+ // });
+ // });
+ // })();
+ break;
+ }
+ case 'europa.authnavigate':
+ // Then some time later, we are simulating a set-title event
+ act(() => {
+ sendMessage('kbase-ui.set-title', RECEIVE_CHANNEL_ID, {
+ title: EXPECTED_TITLE,
+ });
+ });
+
+ break;
+ }
+ }
+ });
+
+ // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // loaded, and the Europa compatibility layer is ready to receive messages.
+ act(() => {
+ sendMessage('kbase-ui.connect', RECEIVE_CHANNEL_ID, {
+ channel: SEND_CHANNEL_ID,
+ });
+ });
+
+ // If the message is received by the IFrameWrapper, it will have called the
+ // `setTitle` prop passed to it.
+ await waitFor(
+ () => {
+ expect(pageTitle).toEqual(EXPECTED_TITLE);
+ },
+ { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ );
+ });
+
+ /**
+ * The basic logic of the above test is replicated, but we install a spy on the send
+ * and receive channels, and then inspect the console.info log to ensure that the
+ * log entries for sending and receiving have been made.
+ */
+ test('can receive "kbase-ui.set-title" with a sneaky spy', async () => {
+ jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ const EXPECTED_TITLE = 'my title';
+ let pageTitle: unknown = null;
+ const setTitle = (title: string) => {
+ pageTitle = title;
+ };
+
+ const iframeProps = createIFrameProps({ setTitle, spyOnChannels: true });
+ iframeProps.spyOnChannels = true;
+
+ const { contentWindow } = renderWrappedIFrameWrapper(iframeProps);
+
+ const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ // Here we simulate kbase-ui message handling.
+ // Standard connect dance...
+ contentWindow.addEventListener('message', (messageEvent) => {
+ if ('envelope' in messageEvent.data) {
+ if ('channel' in messageEvent.data.envelope) {
+ if (messageEvent.data.envelope.channel !== SEND_CHANNEL_ID) {
+ return;
+ }
+ }
+ }
+
+ // We want to listen for all 'europa' messages here.
+ // Simulate reaction to the 'start' message, by sending 'started'.
+ if ('name' in messageEvent.data) {
+ // Handle messages to simulate kbase-ui
+ switch (messageEvent.data.name) {
+ case 'europa.connect': {
+ // This is the normal message after connect is received.
+ act(() => {
+ sendMessage('kbase-ui.connected', RECEIVE_CHANNEL_ID, {});
+ });
+ break;
+ }
+
+ case 'europa.authnavigate':
+ // Then some time later, we are simulating a set-title event
+ act(() => {
+ sendMessage('kbase-ui.set-title', RECEIVE_CHANNEL_ID, {
+ title: EXPECTED_TITLE,
+ });
+ });
+
+ break;
+ }
+ }
+ });
+
+ // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // loaded, and the Europa compatibility layer is ready to receive messages.
+ act(() => {
+ sendMessage('kbase-ui.connect', RECEIVE_CHANNEL_ID, {
+ channel: SEND_CHANNEL_ID,
+ });
+ });
+
+ // If the message is received bi the IFrameWrapper, it will have called the
+ // `setTitle` prop passed to it.
+ await waitFor(
+ () => {
+ expect(pageTitle).toEqual('my title');
+ expect(infoLogSpy).toHaveBeenNthCalledWith(
+ 1,
+ '[KBaseUIConnection][spy][RECV]',
+ RECEIVE_CHANNEL_ID,
+ 'kbase-ui.connect'
+ );
+ expect(infoLogSpy).toHaveBeenNthCalledWith(
+ 2,
+ '[KBaseUIConnection][spy][SEND]',
+ SEND_CHANNEL_ID,
+ 'europa.connect'
+ );
+ expect(infoLogSpy).toHaveBeenNthCalledWith(
+ 3,
+ '[KBaseUIConnection][spy][RECV]',
+ RECEIVE_CHANNEL_ID,
+ 'kbase-ui.connected'
+ );
+ expect(infoLogSpy).toHaveBeenNthCalledWith(
+ 4,
+ '[KBaseUIConnection][spy][SEND]',
+ SEND_CHANNEL_ID,
+ 'europa.authnavigate'
+ );
+ expect(infoLogSpy).toHaveBeenNthCalledWith(
+ 5,
+ '[KBaseUIConnection][spy][RECV]',
+ RECEIVE_CHANNEL_ID,
+ 'kbase-ui.set-title'
+ );
+ },
+ { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ );
+ });
+
+ // /**
+ // * Ensures that the `kbase-ui.logout` message is received and handled properly.
+ // */
+ test('Can receive "kbase-ui.logout"', async () => {
+ let logoutCalled = false;
+ const onLogOut = () => {
+ logoutCalled = true;
+ };
+ jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ const iframeProps = createIFrameProps({ onLogOut });
+
+ const { contentWindow } = renderWrappedIFrameWrapper(iframeProps);
+
+ const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ // Here we simulate kbase-ui message handling.
+ // Standard connect dance...
+ contentWindow.addEventListener('message', (messageEvent) => {
+ if ('envelope' in messageEvent.data) {
+ if ('channel' in messageEvent.data.envelope) {
+ if (messageEvent.data.envelope.channel !== SEND_CHANNEL_ID) {
+ return;
+ }
+ }
+ }
+ // We want to listen for all 'europa' messages here.
+ // Simulate reaction to the 'start' message, by sending 'started'.
+ if ('name' in messageEvent.data) {
+ // Handle messages to simulate kbase-ui
+ switch (messageEvent.data.name) {
+ case 'europa.connect': {
+ // This is the normal message after connect is received.
+ act(() => {
+ sendMessage('kbase-ui.connected', RECEIVE_CHANNEL_ID, {});
+ });
+ // Then some time later, we are simulating a logout event.
+ break;
+ }
+ case 'europa.authnavigate':
+ // Then some time later, we are simulating a set-title event
+ act(() => {
+ act(() => {
+ sendMessage('kbase-ui.logout', RECEIVE_CHANNEL_ID, {});
+ });
+ });
+
+ break;
+ }
+ }
+ });
+
+ // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // loaded, and the Europa compatibility layer is ready to receive messages.
+ act(() => {
+ sendMessage('kbase-ui.connect', RECEIVE_CHANNEL_ID, {
+ channel: SEND_CHANNEL_ID,
+ });
+ });
+
+ await waitFor(
+ () => {
+ expect(logoutCalled).toEqual(true);
+ },
+ { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ );
+ });
+
+ // /**
+ // * Ensure thate the `kbase-ui.loggedin` message without a "nextRequest" is received
+ // * and handled properly.
+ // */
+ // DISABLED -
+ // TypeError: Cannot read properties of null (reading '_origin')
+ //
+ // 116 | };
+ // 117 | const message = new ChannelMessage({ name, payload, envelope });
+ // > 118 | this.window.postMessage(message.toJSON(), this.targetOrigin);
+ // test('can receive "kbase-ui.loggedin" without nextRequest', async () => {
+ // let loggedInCalled: KBaseUILoggedinPayload | null = null;
+ // const onLoggedIn = (payload: OnLoggedInParams) => {
+ // loggedInCalled = payload;
+ // payload.onAuthResolved();
+ // };
+
+ // jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ // const iframeProps = createIFrameProps({ onLoggedIn });
+
+ // let onNarrativesCalled = false;
+ // const onNarratives = () => {
+ // onNarrativesCalled = true;
+ // };
+
+ // const { contentWindow } = renderIFrameWrapperWithRouting(
+ // iframeProps,
+ // onNarratives
+ // );
+
+ // const TEST_CHANNEL_ID = 'test_channel';
+ // const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ // const loggedInPayload: KBaseUILoggedinPayload = {
+ // token: 'mytoken',
+ // expires: 123,
+ // };
+
+ // // Here we simulate kbase-ui message handling.
+ // // Standard connect dance...
+ // const messagesReceivedFromEuropa: Array = [];
+ // contentWindow.addEventListener('message', (messageEvent) => {
+ // // We want to listen for all 'europa' messages here.
+ // // Simulate reaction to the 'start' message, by sending 'started'.
+ // if ('name' in messageEvent.data) {
+ // if (messageEvent.data.name.startsWith('europa.')) {
+ // messagesReceivedFromEuropa.push(messageEvent.data);
+ // }
+ // // Handle messages to simulate kbase-ui
+ // switch (messageEvent.data.name) {
+ // case 'europa.connect': {
+ // // This is the normal message after connect is received.
+ // act(() => {
+ // sendMessage('kbase-ui.connected', TEST_CHANNEL_ID, {});
+ // });
+ // // Then some time later, we are simulating a logout event.
+ // act(() => {
+ // sendMessage(
+ // 'kbase-ui.loggedin',
+ // TEST_CHANNEL_ID,
+ // loggedInPayload
+ // );
+ // });
+ // break;
+ // }
+ // }
+ // }
+ // });
+
+ // // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // // loaded, and the Europa compatibility layer is ready to receive messages.
+ // act(() => {
+ // sendMessage('kbase-ui.connect', iframeProps.channelId, {
+ // channel: TEST_CHANNEL_ID,
+ // });
+ // });
+
+ // await waitFor(
+ // () => {
+ // expect(loggedInCalled).toHaveProperty('token', 'mytoken');
+ // expect(loggedInCalled).toHaveProperty('expires', 123);
+
+ // expect(messagesReceivedFromEuropa.length).toEqual(1);
+
+ // const startMessage = messagesReceivedFromEuropa[0];
+ // expect(startMessage).toHaveProperty('name', 'europa.connect');
+
+ // // expect(onNarrativesCalled).toBeTruthy();
+ // },
+ // { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ // );
+ // });
+
+ // /**
+ // * Ensure that the `kbase-ui.loggedin` message with a nextRequest is received and
+ // * acted up on correctly.
+ // */
+ // test('Can receive kbase-ui.loggedin with nextRequest', async () => {
+ // let loggedInCalled: KBaseUILoggedinPayload | null = null;
+ // const onLoggedIn = (payload: OnLoggedInParams) => {
+ // loggedInCalled = payload;
+ // payload.onAuthResolved();
+ // };
+
+ // jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ // const iframeProps = createIFrameProps({ onLoggedIn });
+
+ // // const {container} = renderf();
+ // const { contentWindow } = renderWrappedIFrameWrapper(iframeProps);
+
+ // // const iframe = container.querySelector('iframe');
+
+ // // // constrain iframe
+ // // if (iframe === null) {
+ // // throw new Error('Impossible - iframe is null');
+ // // }
+
+ // // expect(iframe).toHaveAttribute('title', 'kbase-ui Wrapper');
+ // // if (iframe.contentWindow === null) {
+ // // throw new Error('Impossible - iframe contentWindow is null');
+ // // }
+
+ // // After receiving the 'ready' message, Europa's legacy layer will have set up
+ // // message listeners for key kbase-ui events, such as 'kbase-ui.set-title', the
+ // // subject of this test.
+ // // So here we simulate kbase-ui sending this message.
+ // const loggedInPayload: KBaseUILoggedinPayload = {
+ // token: 'mytoken',
+ // expires: 123,
+ // nextRequest: {
+ // path: {
+ // path: 'foo',
+ // type: 'kbaseui',
+ // },
+ // },
+ // };
+
+ // // Here we simulate kbase-ui message handling.
+ // const messagesReceivedFromEuropa: Array = [];
+ // contentWindow.addEventListener('message', (messageEvent) => {
+ // // We want to listen for all 'europa' messages here.
+ // // Simulate reaction to the 'start' message, by sending 'started'.
+ // if ('name' in messageEvent.data) {
+ // // Save all the messages for inspection later.
+ // if (messageEvent.data.name.startsWith('europa.')) {
+ // messagesReceivedFromEuropa.push(messageEvent.data);
+ // }
+ // // Handle messages to simulate kbase-ui
+ // if (messageEvent.data.name === 'europa.start') {
+ // // This is the normal message after start is received.
+ // act(() => {
+ // sendFromKBaseUI('kbase-ui.started', iframeProps.channelId, {});
+ // });
+
+ // // Then some time later, we are simulating a loggedin event.
+ // act(() => {
+ // sendFromKBaseUI(
+ // 'kbase-ui.loggedin',
+ // iframeProps.channelId,
+ // loggedInPayload
+ // );
+ // });
+ // }
+ // }
+ // });
+
+ // // Simulates the initial 'kbase-ui.ready' message sent by kbase-ui when the app has
+ // // loaded, and the Europa compatiblility layer is ready to receive messages.
+ // act(() => {
+ // sendFromKBaseUI('kbase-ui.ready', iframeProps.channelId, {
+ // ready: true,
+ // });
+ // });
+
+ // await waitFor(
+ // () => {
+ // expect(loggedInCalled).toHaveProperty('token', 'mytoken');
+ // expect(loggedInCalled).toHaveProperty('expires', 123);
+
+ // expect(messagesReceivedFromEuropa.length).toEqual(3);
+
+ // const startMessage = messagesReceivedFromEuropa[0];
+ // expect(startMessage).toHaveProperty('name', 'europa.start');
+ // expect(startMessage).toHaveProperty('payload.authToken', null);
+
+ // const navigationMessage = messagesReceivedFromEuropa[1];
+ // expect(navigationMessage).toHaveProperty('name', 'europa.navigation');
+
+ // const authenticatedMessage = messagesReceivedFromEuropa[2];
+ // expect(authenticatedMessage).toHaveProperty(
+ // 'payload.token',
+ // 'mytoken'
+ // );
+ // expect(authenticatedMessage).toHaveProperty(
+ // 'payload.nextRequest.path.path',
+ // 'foo'
+ // );
+ // expect(authenticatedMessage).toHaveProperty(
+ // 'payload.nextRequest.path.type',
+ // 'kbaseui'
+ // );
+ // },
+ // { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ // );
+ // });
+
+ // /**
+ // * Ensure that if kbase-ui does not send the `kbase-ui.ready` message within the
+ // * timeout limit, an error message is displayed.
+ // *
+ // */
+ // test('displays error message if "ready" not received within timeout', async () => {
+ // // Ensures that the legacy base url is the same as Europa.
+ // jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ // jest.spyOn(constants, 'READY_WAITING_TIMEOUT').mockReturnValue(100);
+
+ // const iframeProps = createIFrameProps({});
+
+ // const { container, contentWindow } =
+ // renderWrappedIFrameWrapper(iframeProps);
+
+ // const TEST_CHANNEL_ID = 'test_channel';
+ // const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ // // Here we simulate kbase-ui message handling.
+ // // const messagesReceivedFromEuropa: Array = [];
+ // // contentWindow.addEventListener('message', (messageEvent) => {
+ // // // We want to listen for all 'europa' messages here.
+ // // // Simulate reaction to the 'start' message, by sending 'started'.
+ // // if ('name' in messageEvent.data) {
+ // // // Save all the messages for inspection later.
+ // // if (messageEvent.data.name.startsWith('europa.')) {
+ // // messagesReceivedFromEuropa.push(messageEvent.data);
+ // // }
+ // // }
+ // // });
+
+ // // Here we simulate kbase-ui message handling.
+ // // Standard connect dance...
+ // const messagesReceivedFromEuropa: Array = [];
+ // contentWindow.addEventListener('message', (messageEvent) => {
+ // // We want to listen for all 'europa' messages here.
+ // // Simulate reaction to the 'start' message, by sending 'started'.
+ // if ('name' in messageEvent.data) {
+ // if (messageEvent.data.name.startsWith('europa.')) {
+ // messagesReceivedFromEuropa.push(messageEvent.data);
+ // }
+ // // Handle messages to simulate kbase-ui
+ // switch (messageEvent.data.name) {
+ // case 'europa.connect': {
+ // // This is the normal message after connect is received.
+ // act(() => {
+ // sendMessage('kbase-ui.connected', TEST_CHANNEL_ID, {});
+ // });
+ // // Then some time later, we are simulating a logout event.
+ // act(() => {
+ // sendMessage('kbase-ui.logout', TEST_CHANNEL_ID, {});
+ // });
+ // break;
+ // }
+ // }
+ // }
+ // });
+
+ // // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // // loaded, and the Europa compatibility layer is ready to receive messages.
+ // // act(() => {
+ // // sendMessage('kbase-ui.connect', iframeProps.channelId, {
+ // // channel: TEST_CHANNEL_ID,
+ // // });
+ // // });
+
+ // // We DO NOT send the ready message, because we want to force a timeout.
+
+ // // If the message is received bi the IFrameWrapper, it will have called the
+ // // `setTitle` prop passed to it.
+ // await waitFor(
+ // () => {
+ // expect(container).toHaveTextContent('Timed out after');
+ // expect(container).toHaveTextContent(
+ // 'waiting for kbase-ui to be ready'
+ // );
+ // },
+ // { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ // );
+ // });
+
+ // test('displays error message if "started" not received within timeout', async () => {
+ // // Ensures that the legacy base url is the same as Europa.
+ // jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ // jest.spyOn(constants, 'STARTED_WAITING_TIMEOUT').mockReturnValue(100);
+
+ // const iframeProps = createIFrameProps({});
+
+ // const { container, contentWindow } =
+ // renderWrappedIFrameWrapper(iframeProps);
+
+ // // Here we simulate kbase-ui message handling.
+ // const messagesReceivedFromEuropa: Array = [];
+ // contentWindow.addEventListener('message', (messageEvent) => {
+ // // We want to listen for all 'europa' messages here.
+ // // Simulate reaction to the 'start' message, by sending 'started'.
+ // if ('name' in messageEvent.data) {
+ // // Save all the messages for inspection later.
+ // if (messageEvent.data.name.startsWith('europa.')) {
+ // messagesReceivedFromEuropa.push(messageEvent.data);
+ // }
+ // }
+ // });
+
+ // // Simulates the initial 'kbase-ui.ready' message sent by kbase-ui when the app has
+ // // loaded, and the Europa compatiblility layer is ready to receive messages.
+ // act(() => {
+ // sendFromKBaseUI('kbase-ui.ready', iframeProps.channelId, {
+ // ready: true,
+ // });
+ // });
+
+ // // We DO NOT send the ready message, because we want to force a timeout.
+
+ // // If the message is received bi the IFrameWrapper, it will have called the
+ // // `setTitle` prop passed to it.
+ // await waitFor(
+ // () => {
+ // expect(container).toHaveTextContent('Timed out after');
+ // expect(container).toHaveTextContent(
+ // 'waiting for kbase-ui to start up'
+ // );
+ // },
+ // { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ // );
+ // });
+
+ test('responds correctly to kbase-ui.navigated - typical usage', async () => {
+ // Ensures that the legacy base url is the same as Europa.
+ jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ const iframeProps = createIFrameProps({});
+
+ const { container, router } = setupComponentWithRouting4(iframeProps);
+
+ const iframe = container.querySelector('iframe');
+
+ // constrain iframe
+ if (iframe === null) {
+ throw new Error('Impossible - iframe is null');
+ }
+
+ expect(iframe).toHaveAttribute('title', 'kbase-ui Wrapper');
+ if (iframe.contentWindow === null) {
+ throw new Error('Impossible - iframe contentWindow is null');
+ }
+
+ const contentWindow = iframe.contentWindow;
+
+ // let TEST_EUROPA_RECEIVE_CHANNEL = 'foo';
+ // const TEST_KBASE_UI_RECEIVE_CHANNEL = 'kbase-ui-receive-channel';
+ const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ // After receiving the 'ready' message, Europa's legacy layer will have set up
+ // message listeners for key kbase-ui events, such as 'kbase-ui.set-title', the
+ // subject of this test.
+ // So here we simulate kbase-ui sending this message.
+
+ // Here we simulate kbase-ui message handling.
+ const messagesReceivedFromEuropa: Array = [];
+ contentWindow.addEventListener('message', (messageEvent) => {
+ if ('envelope' in messageEvent.data) {
+ if ('channel' in messageEvent.data.envelope) {
+ if (messageEvent.data.envelope.channel !== SEND_CHANNEL_ID) {
+ return;
+ }
+ }
+ }
+
+ // We want to listen for all 'europa' messages here.
+ // Simulate reaction to the 'start' message, by sending 'started'.
+ if ('name' in messageEvent.data) {
+ // Save all the messages for inspection later.
+ if (messageEvent.data.name.startsWith('europa.')) {
+ messagesReceivedFromEuropa.push(messageEvent.data);
+ }
+
+ // Handle messages to simulate kbase-ui
+ switch (messageEvent.data.name) {
+ case 'europa.connect': {
+ // Europa's connect contains the channel id it is now listening on.
+ // TEST_EUROPA_RECEIVE_CHANNEL = messageEvent.data.payload.channelId;
+ // This is the normal message after connect is received.
+ act(() => {
+ sendMessage('kbase-ui.connected', RECEIVE_CHANNEL_ID, {});
+ });
+ // Then some time later, we are simulating a navigation event
+
+ break;
+ }
+
+ case 'europa.authnavigate':
+ // Then some time later, we are simulating a set-title event
+ act(() => {
+ act(() => {
+ sendMessage('kbase-ui.navigated', RECEIVE_CHANNEL_ID, {
+ path: 'bar',
+ params: {},
+ });
+ });
+ });
+
+ break;
+ }
+ }
+ });
+
+ // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // loaded, and the Europa compatibility layer is ready to receive messages.
+ act(() => {
+ sendMessage('kbase-ui.connect', RECEIVE_CHANNEL_ID, {
+ channel: SEND_CHANNEL_ID,
+ });
+ });
+
+ await waitFor(
+ async () => {
+ expect(router.state.location.pathname).toEqual('/legacy/bar');
+ },
+ { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ );
+ });
+ // });
+
+ test('responds correctly when the token changes from null to non-null', async () => {
+ // Ensures that the legacy base url is the same as Europa.
+ jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ const iframeProps = createIFrameProps({});
+
+ const { rerender, container } = render(
+
+ );
+
+ const iframe = container.querySelector('iframe');
+
+ // constrain iframe
+ if (iframe === null) {
+ throw new Error('Impossible - iframe is null');
+ }
+
+ expect(iframe).toHaveAttribute('title', 'kbase-ui Wrapper');
+ if (iframe.contentWindow === null) {
+ throw new Error('Impossible - iframe contentWindow is null');
+ }
+
+ const contentWindow = iframe.contentWindow;
+ // let TEST_EUROPA_RECEIVE_CHANNEL = 'foo';
+ // const TEST_KBASE_UI_RECEIVE_CHANNEL = 'kbase-ui-receive-channel';
+ const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ // After receiving the 'ready' message, Europa's legacy layer will have set up
+ // message listeners for key kbase-ui events, such as 'kbase-ui.set-title', the
+ // subject of this test.
+ // So here we simulate kbase-ui sending this message.
+
+ // Here we simulate kbase-ui message handling.
+ let europaAuthentication: string | null = null;
+ const messagesReceivedFromEuropa: Array = [];
+ contentWindow.addEventListener('message', (messageEvent) => {
+ if ('envelope' in messageEvent.data) {
+ if ('channel' in messageEvent.data.envelope) {
+ if (messageEvent.data.envelope.channel !== SEND_CHANNEL_ID) {
+ return;
+ }
+ }
+ }
+
+ // We want to listen for all 'europa' messages here.
+ // Simulate reaction to the 'start' message, by sending 'started'.
+ if ('name' in messageEvent.data) {
+ // Save all the messages for inspection later.
+ if (messageEvent.data.name.startsWith('europa.')) {
+ messagesReceivedFromEuropa.push(messageEvent.data);
+ }
+
+ // Handle messages to simulate kbase-ui
+ switch (messageEvent.data.name) {
+ case 'europa.connect': {
+ // TEST_EUROPA_RECEIVE_CHANNEL = messageEvent.data.payload.channelId;
+
+ // This is the normal message after connect is received.
+ act(() => {
+ sendMessage('kbase-ui.connected', RECEIVE_CHANNEL_ID, {});
+
+ rerender();
+ });
+ break;
+ }
+ case 'europa.authenticated': {
+ europaAuthentication = messageEvent.data.payload.token;
+ break;
+ }
+ }
+ }
+ });
+
+ // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // loaded, and the Europa compatibility layer is ready to receive messages.
+ act(() => {
+ sendMessage('kbase-ui.connect', RECEIVE_CHANNEL_ID, {
+ channel: SEND_CHANNEL_ID,
+ });
+ });
+
+ // If the message is received bi the IFrameWrapper, it will have called the
+ // `setTitle` prop passed to it.
+ await waitFor(
+ async () => {
+ expect(europaAuthentication).toEqual('FOO');
+ },
+ { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ );
+ });
+
+ test('responds correctly when the token changes from non-null to null', async () => {
+ // Ensures that the legacy base url is the same as Europa.
+ jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(UI_ORIGIN));
+
+ const iframeProps = createIFrameProps({});
+
+ const { rerender, container } = render(
+
+ );
+
+ const iframe = container.querySelector('iframe');
+
+ // constrain iframe
+ if (iframe === null) {
+ throw new Error('Impossible - iframe is null');
+ }
+
+ expect(iframe).toHaveAttribute('title', 'kbase-ui Wrapper');
+ if (iframe.contentWindow === null) {
+ throw new Error('Impossible - iframe contentWindow is null');
+ }
+
+ const contentWindow = iframe.contentWindow;
+
+ // let TEST_EUROPA_RECEIVE_CHANNEL = 'foo';
+ // const TEST_KBASE_UI_RECEIVE_CHANNEL = 'kbase-ui-receive-channel';
+ const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ // After receiving the 'ready' message, Europa's legacy layer will have set up
+ // message listeners for key kbase-ui events, such as 'kbase-ui.set-title', the
+ // subject of this test.
+ // So here we simulate kbase-ui sending this message.
+
+ // Here we simulate kbase-ui message handling.
+ let deauthticatedCalled = false;
+ const messagesReceivedFromEuropa: Array = [];
+ contentWindow.addEventListener('message', (messageEvent) => {
+ if ('envelope' in messageEvent.data) {
+ if ('channel' in messageEvent.data.envelope) {
+ if (messageEvent.data.envelope.channel !== SEND_CHANNEL_ID) {
+ return;
+ }
+ }
+ }
+
+ // We want to listen for all 'europa' messages here.
+ // Simulate reaction to the 'start' message, by sending 'started'.
+ if ('name' in messageEvent.data) {
+ // Save all the messages for inspection later.
+ if (messageEvent.data.name.startsWith('europa.')) {
+ messagesReceivedFromEuropa.push(messageEvent.data);
+ }
+
+ // Handle messages to simulate kbase-ui
+ switch (messageEvent.data.name) {
+ case 'europa.connect': {
+ // Europa's connect contains the channel id it is now listening on.
+ // TEST_EUROPA_RECEIVE_CHANNEL = messageEvent.data.payload.channelId;
+
+ // This is the normal message after connect is received.
+ act(() => {
+ sendMessage('kbase-ui.connected', RECEIVE_CHANNEL_ID, {});
+ rerender(
+
+ );
+ });
+ break;
+ }
+ case 'europa.deauthenticated':
+ deauthticatedCalled = true;
+ break;
+ }
+ }
+ });
+
+ // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // loaded, and the Europa compatibility layer is ready to receive messages.
+ act(() => {
+ sendMessage('kbase-ui.connect', RECEIVE_CHANNEL_ID, {
+ channel: SEND_CHANNEL_ID,
+ });
+ });
+
+ // If the message is received bi the IFrameWrapper, it will have called the
+ // `setTitle` prop passed to it.
+ await waitFor(
+ async () => {
+ expect(deauthticatedCalled).toEqual(true);
+ },
+ { timeout: WAIT_FOR_TIMEOUT, interval: WAIT_FOR_INTERVAL }
+ );
+ });
+ });
+});
diff --git a/src/features/legacy/IFrameWrapper.tsx b/src/features/legacy/IFrameWrapper.tsx
new file mode 100644
index 00000000..dc4059c0
--- /dev/null
+++ b/src/features/legacy/IFrameWrapper.tsx
@@ -0,0 +1,615 @@
+import { faExclamation, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Alert, AlertTitle, Box, Grow, Typography } from '@mui/material';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import LoadingOverlay from '../../common/components/OverlayContainer';
+import {
+ CONNECTION_MONITORING_INTERVAL,
+ CONNECTION_TIMEOUT,
+ CONNECTION_TIMEOUT_DELAY,
+} from './constants';
+import CountdownClock from './CountdownClock';
+import classes from './IFrameWrapper.module.scss';
+import KBaseUIConnection from './KBaseUIConnection';
+import { KBaseUIRedirectPayload } from './messageValidation';
+import TimeoutMonitor, { TimeoutMonitorStateRunning } from './TimeoutMonitor';
+import { areParamsEqual, parseLegacyURL } from './utils';
+
+export interface OnLoggedInParams {
+ token: string;
+ expires: number;
+ onAuthResolved: () => void;
+}
+
+/**
+ * Props for the iframe wrapper component.
+ */
+export interface IFrameWrapperProps {
+ /** The unique channel id for the send and receive channels. It could be generated
+ * here as a uuid, but it provs useful, in testing at least, to be able to supply it*/
+ sendChannelId: string;
+ receiveChannelId: string;
+
+ /** The url to kbase-ui. It should be in the form expected by kbase-ui
+ * TODO: document the required form!
+ */
+ legacyURL: URL;
+
+ /** The url present in the browser when the legacy component was mounted. */
+ legacyPath: LegacyPath;
+
+ /** The kbase auth token, if any, currently active in Europa */
+ token: string | null;
+
+ /** Spy on sent messages; useful for debugging */
+ spyOnChannels?: boolean;
+
+ /** Sets the page title for the UI and the brower; called when kbase-ui.set-title is received */
+ setTitle: (title: string) => void;
+
+ /** */
+ onLoggedIn: (payload: OnLoggedInParams) => void;
+
+ /** */
+ onLogOut: () => void;
+}
+
+/**
+ * Captures all recognized states of the iframe wrapper component
+ *
+ * NONE - initial state
+ * CONNECTING - actively engaged in creating a connection to kbase-ui
+ * INITIALIZING - actively initializing kbase-ui through the connection
+ * CONNECTED - connection to kbase-ui established and initialized; normal operating state.
+ * ERROR - some error occurred while connecting
+ *
+ * The resulting interface "IFrameWrapperState" uses the "diamond" definition pattern
+ * I've found very useful for discriminated-union enabled structures.
+ *
+ * The "status" property is the discriminiator, and in this case represents the identity
+ * of the "state".
+ *
+ * Then we define an interface for each state. Define properties for information
+ * associated with that state.
+ *
+ * Then, ultimately, we create a single type out of the union of all the "state"
+ * interfaces. Because we have defined a state interface for each "status" enum value.
+ * Thus, when we, say, perform some rendering operation as a function of the state, we
+ * can use a switch..case to close over all possible states.
+ */
+export enum IFrameWrapperStatus {
+ NONE = 'NONE',
+ CONNECT = 'CONNECT',
+ CONNECTING = 'CONNECTING',
+ INITIALIZING = 'INITIALIZING',
+ CONNECTED = 'CONNECTED',
+ ERROR = 'ERROR',
+}
+
+export interface IFrameWrapperStatBase {
+ status: IFrameWrapperStatus;
+}
+
+export interface IFrameWrapperStateNone extends IFrameWrapperStatBase {
+ status: IFrameWrapperStatus.NONE;
+}
+
+export interface IFrameWrapperStateConnecting extends IFrameWrapperStatBase {
+ status: IFrameWrapperStatus.CONNECTING;
+ connection: KBaseUIConnection;
+ limit: number;
+ elapsed: number;
+}
+
+export interface IFrameWrapperStateInitializing extends IFrameWrapperStatBase {
+ status: IFrameWrapperStatus.INITIALIZING;
+ connection: KBaseUIConnection;
+}
+
+export interface IFrameWrapperStateConnected extends IFrameWrapperStatBase {
+ status: IFrameWrapperStatus.CONNECTED;
+ connection: KBaseUIConnection;
+}
+
+export interface IFrameWrapperStateError extends IFrameWrapperStatBase {
+ status: IFrameWrapperStatus.ERROR;
+ message: string;
+}
+
+export type IFrameWrapperState =
+ | IFrameWrapperStateNone
+ | IFrameWrapperStateConnecting
+ | IFrameWrapperStateInitializing
+ | IFrameWrapperStateConnected
+ | IFrameWrapperStateError;
+
+export interface LegacyPath {
+ path: string;
+ params?: Record;
+}
+
+export default function IFrameWrapper({
+ sendChannelId,
+ receiveChannelId,
+ legacyURL,
+ legacyPath,
+ token,
+ setTitle,
+ onLoggedIn,
+ onLogOut,
+ spyOnChannels,
+}: IFrameWrapperProps) {
+ // Overall state here is used to track progress of the connection, and hide until it
+ // is ready.
+ const [state, setState] = useState({
+ status: IFrameWrapperStatus.NONE,
+ });
+
+ const legacyContentRef = useRef(null);
+
+ const navigate = useNavigate();
+
+ const location = useLocation();
+
+ /**
+ * Create and set up the connection to kbase-ui.
+ * Only set the connection state property after everything is finished.
+ * That way we don't end up with the connection being used before it is ready...
+ */
+
+ function onRedirect({ url }: KBaseUIRedirectPayload): void {
+ window.open(url, '_self');
+ }
+
+ function onLostConnection(message: string) {
+ setState({
+ status: IFrameWrapperStatus.ERROR,
+ message: message,
+ });
+ }
+
+ const syncedState = useRef(state);
+ syncedState.current = state;
+
+ /**
+ * This effect is dedicated to creating the initial connection.
+ *
+ * It transitions from NONE, the initial state, to CONNECTING.
+ *
+ * Its jobs is to create the connection, and pass it to the CONNECTING state.
+ */
+ useEffect(() => {
+ if (state.status !== IFrameWrapperStatus.NONE) {
+ return;
+ }
+
+ // Should never occur, but required for type narrowing, so let us honor it for what
+ // it is.
+ if (!legacyContentRef.current || !legacyContentRef.current.contentWindow) {
+ return;
+ }
+
+ const connection = new KBaseUIConnection({
+ kbaseUIWindow: legacyContentRef.current.contentWindow,
+ kbaseUIOrigin: legacyURL.origin,
+ spyOnChannels,
+ sendChannelId,
+ receiveChannelId,
+ });
+
+ setState({
+ status: IFrameWrapperStatus.CONNECTING,
+ connection,
+ limit: CONNECTION_TIMEOUT(),
+ elapsed: 0,
+ });
+ }, [
+ state,
+ legacyURL,
+ spyOnChannels,
+ setState,
+ sendChannelId,
+ receiveChannelId,
+ ]);
+
+ /**
+ * This effect is dedicated to CONNECTING to kbase-ui.
+ *
+ * The connection code should only be run once, so we use a gatekeeper ref for that
+ * purpose. However, the effect is run may times during the CONNECTING phase, as it
+ * continually updates the CONNECTING state to reflect the timeout monitor's countdown
+ * torards timing out.
+ */
+
+ // Used as a gatekeeper so that we only execute the connection process the first time
+ // we enter CONNECTING state.
+ const connectingRef = useRef(false);
+
+ useEffect(() => {
+ if (state.status !== IFrameWrapperStatus.CONNECTING) {
+ return;
+ }
+
+ const doConnect = async () => {
+ const connection = state.connection;
+ connectingRef.current = true;
+
+ let monitor: TimeoutMonitor | null = null;
+ try {
+ // We use a countdown timer, which will set the state to error if
+ // it is allowed to complete.
+ monitor = new TimeoutMonitor({
+ timeout: CONNECTION_TIMEOUT(),
+ interval: CONNECTION_MONITORING_INTERVAL(),
+ onTimeout: (elapsed: number) => {
+ // connection.current && connection.current.disconnect();
+ connection.disconnect();
+ setState({
+ status: IFrameWrapperStatus.ERROR,
+ message: `Connection to kbase-ui timed out after ${elapsed}ms`,
+ });
+ },
+ onInterval: (state: TimeoutMonitorStateRunning) => {
+ setState({
+ status: IFrameWrapperStatus.CONNECTING,
+ connection,
+ limit: CONNECTION_TIMEOUT(),
+ elapsed: state.elapsed,
+ });
+ },
+ });
+ monitor.start();
+
+ // await connectionRef.current.connect();
+ await connection.connect(CONNECTION_TIMEOUT());
+
+ // So we stop the clock as soon as we are connected.
+ monitor.stop();
+
+ setState({ status: IFrameWrapperStatus.INITIALIZING, connection });
+ } catch (ex) {
+ setState({
+ status: IFrameWrapperStatus.ERROR,
+ message: ex instanceof Error ? ex.message : 'Unknown Error',
+ });
+ } finally {
+ // Just to make sure, doesn't hurt.
+ if (monitor) {
+ monitor.stop();
+ }
+ }
+ };
+
+ // We only set the connection in component state once it is fully complete.
+ // NB we need to use old-style promise chaining for useEffect.
+ if (!connectingRef.current) {
+ doConnect().catch((ex) => {
+ setState({
+ status: IFrameWrapperStatus.ERROR,
+ message: ex instanceof Error ? ex.message : 'Unknown Error',
+ });
+ });
+ }
+ }, [state]);
+
+ /**
+ * Dedicated to the INITIALIZING state.
+ *
+ * This state is just temporary, and exists to start the connection and perform the
+ * initial navigation and authentication.
+ *
+ */
+ useEffect(() => {
+ if (state.status !== IFrameWrapperStatus.INITIALIZING) {
+ return;
+ }
+
+ const connection = state.connection;
+
+ connection.start({
+ navigate,
+ setTitle,
+ onLoggedIn,
+ onLogOut,
+ onRedirect,
+ onLostConnection,
+ });
+
+ connection.authnavigate(token || null, legacyPath);
+
+ setState({ status: IFrameWrapperStatus.CONNECTED, connection });
+ }, [
+ // dynamic
+ state,
+ legacyPath,
+ token,
+ // static
+ navigate,
+ setTitle,
+ onLoggedIn,
+ onLogOut,
+ setState,
+ ]);
+
+ /**
+ * Just sets the title, based on the current state of loading kbase-ui.
+ *
+ * After kbase-ui is loaded, it will take over setting the app title.
+ */
+ useEffect(() => {
+ const title = (() => {
+ switch (state.status) {
+ case IFrameWrapperStatus.NONE:
+ case IFrameWrapperStatus.CONNECTING:
+ return 'Loading App';
+ case IFrameWrapperStatus.ERROR:
+ return 'Error';
+ }
+ })();
+ if (title) {
+ setTitle(title);
+ }
+ }, [state, setTitle]);
+
+ /**
+ * This effect dedicated to the CONNECTED state and changes to the location - navigation.
+ *
+ * It provides most of the runtime monitoring the current location for changes in the url
+ * which would cause a navigation in kbase-ui.
+ *
+ * If such a change is detected, the "navigate" connection method is called, which
+ * sends a "europa.navigate" message to kbase-ui.
+ */
+
+ const parseLegacyPathFromURL = useCallback(
+ (url: URL) => {
+ // const url = new URL(window.location.origin);
+ url.pathname = location.pathname;
+ new URLSearchParams(location.search).forEach((value, key) => {
+ url.searchParams.set(key, value);
+ });
+
+ return parseLegacyURL(url);
+ },
+ [location]
+ );
+
+ const url = new URL(window.location.origin);
+ const initialLegacyPath = parseLegacyPathFromURL(url);
+ const previousLegacyPathRef = useRef(initialLegacyPath);
+
+ useEffect(() => {
+ if (state.status !== IFrameWrapperStatus.CONNECTED) {
+ return;
+ }
+ // Generate the legacy path from the current window location.
+ const url = new URL(window.location.origin);
+ const { path, params } = parseLegacyPathFromURL(url);
+
+ // Handle transition from one location to another (i.e. navigation)
+ if (
+ previousLegacyPathRef.current === null ||
+ previousLegacyPathRef.current.path !== path ||
+ !areParamsEqual(previousLegacyPathRef.current.params, params)
+ ) {
+ previousLegacyPathRef.current = { path, params };
+ state.connection.navigate(path, params);
+ }
+ }, [location, state, parseLegacyPathFromURL]);
+
+ /**
+ * This effect dedicated to CONNECTED state and token change.
+ *
+ * It monitors auth state for changes and sends the appropriate message to kbase-ui.
+ */
+ const previousTokenRef = useRef(token);
+ useEffect(() => {
+ if (state.status !== IFrameWrapperStatus.CONNECTED) {
+ return;
+ }
+ const previousToken = previousTokenRef.current;
+ previousTokenRef.current = token;
+
+ // Handle transition from unauthenticated to authenticated.
+ if (previousToken === null) {
+ if (token !== null) {
+ // Note no next request, as this is from the side effect of authentication
+ // happening outside of this session - e.g. logging in in a different window.
+ state.connection.authenticated(token);
+ }
+ } else if (token === null) {
+ // Handle transition from authenticated to unauthenticated.
+ state.connection.deauthenticated();
+ }
+ }, [token, state, previousTokenRef]);
+
+ /**
+ * This effect is dedicated to the CONNECTED state and exists in order to properly
+ * arrange the connection cleanup upon dismount.
+ *
+ * It works becomes the state is only updated once upon entering CONNECTED state, and
+ * thus the cleanup only runs once.
+ */
+ useEffect(() => {
+ if (state.status !== IFrameWrapperStatus.CONNECTED) {
+ return;
+ }
+
+ return () => {
+ state.connection.disconnect();
+ };
+ }, [state]);
+
+ /**
+ * Renders a "loading overlay" - an absolutely positioned element stretching across
+ * it's container, and obscuring what is happening "underneath". The purppose is to
+ * provide a loading indicator, even as kbase-ui is loading underneath.
+ *
+ * It is enabled during "NONE" or "CONNECTING" state, and disabled upon "ERROR" or "CONNECTED".
+ *
+ * @param state
+ * @returns
+ */
+ function renderLoadingOverlay(state: IFrameWrapperState) {
+ if (state.status === IFrameWrapperStatus.CONNECTED) {
+ return;
+ }
+
+ const title = (() => {
+ switch (state.status) {
+ case IFrameWrapperStatus.NONE:
+ case IFrameWrapperStatus.CONNECTING:
+ return 'Loading App';
+ case IFrameWrapperStatus.ERROR:
+ return 'Error';
+ }
+ })();
+
+ const loadingMessage = (() => {
+ switch (state.status) {
+ case IFrameWrapperStatus.NONE:
+ return (
+
+
+ Connecting...
+
+ );
+ case IFrameWrapperStatus.CONNECTING:
+ return (
+
+
+
+ Connecting...
+
+
+
CONNECTION_TIMEOUT_DELAY()}
+ unmountOnExit
+ >
+
+
+
+
+ {/*
*/}
+
+ This is taking longer than expected.
+
+
+ We'll continue waiting{' '}
+ {Intl.NumberFormat('en-US', {}).format(
+ state.limit / 1000
+ )}{' '}
+ seconds for load to complete.
+
+
+ You may try to reload the browser any time, in case it is
+ due to a temporary outage or slowdown.
+
+
+
+
+
+
An error ocurred connecting to kbase-ui.
+
+ You may try reloading the browser to see if the problem has been
+ resolved.
+
+ {state.message}
+
+ );
+ }
+ })();
+
+ const icon = (() => {
+ switch (state.status) {
+ case IFrameWrapperStatus.NONE:
+ case IFrameWrapperStatus.CONNECTING:
+ return false;
+ case IFrameWrapperStatus.ERROR:
+ return (
+
+ );
+ }
+ })();
+
+ const severity = (() => {
+ switch (state.status) {
+ case IFrameWrapperStatus.NONE:
+ case IFrameWrapperStatus.CONNECTING:
+ return 'info';
+ case IFrameWrapperStatus.ERROR:
+ return 'error';
+ }
+ })();
+
+ function renderLoading() {
+ return (
+
+
+ {title}
+ {loadingMessage}
+
+
+ {renderLoadingOverlay(state)}
+
+
+ );
+}
diff --git a/src/features/legacy/KBaseUIConnection.test.ts b/src/features/legacy/KBaseUIConnection.test.ts
new file mode 100644
index 00000000..29e8d794
--- /dev/null
+++ b/src/features/legacy/KBaseUIConnection.test.ts
@@ -0,0 +1,116 @@
+// import * as reactRouterDOMMOdule from 'react-router-dom';
+import { NavigateFunction, NavigateOptions, To } from 'react-router-dom';
+import KBaseUIConnection, { channelSpy } from './KBaseUIConnection';
+import { KBaseUINavigatedPayload } from './messageValidation';
+import { ChannelMessage } from './SendChannel';
+
+describe('KBaseUIConnection class', () => {
+ let infoLogSpy: jest.SpyInstance;
+ beforeEach(() => {
+ jest.resetAllMocks();
+ infoLogSpy = jest.spyOn(console, 'info');
+ });
+
+ test('can be constructed from nonsense params', () => {
+ const connection = new KBaseUIConnection({
+ kbaseUIOrigin: 'http://example.com',
+ kbaseUIWindow: window,
+ receiveChannelId: 'abc',
+ sendChannelId: 'def',
+ });
+
+ expect(connection).toBeInstanceOf(KBaseUIConnection);
+ });
+
+ test('handles legacy navigation message well', () => {
+ const connection = new KBaseUIConnection({
+ kbaseUIOrigin: 'http://example.com',
+ kbaseUIWindow: window,
+ receiveChannelId: 'abc',
+ sendChannelId: 'def',
+ });
+
+ const payload: KBaseUINavigatedPayload = {
+ path: 'foo',
+ params: { bar: 'baz' },
+ type: 'kbaseui',
+ };
+
+ let navigateCalled = false;
+ let navigateCalledToArg: To | number | null = null;
+ let navigateCalledOptionsArg: NavigateOptions | null = null;
+ const navigate: NavigateFunction = (
+ to: To | number, // gnarly
+ options?: NavigateOptions
+ ) => {
+ navigateCalled = true;
+ navigateCalledToArg = to;
+ navigateCalledOptionsArg = options || null;
+ };
+
+ connection.handleNavigationMessage(payload, navigate);
+
+ expect(navigateCalled).toBe(true);
+ expect(navigateCalledToArg).not.toBeNull();
+ expect(navigateCalledToArg).toMatchObject({
+ pathname: '/legacy/foo',
+ search: 'bar=baz',
+ });
+ expect(navigateCalledOptionsArg).not.toBeNull();
+ expect(navigateCalledOptionsArg).toMatchObject({ replace: true });
+ });
+
+ test('handles Europa navigation message well', () => {
+ const connection = new KBaseUIConnection({
+ kbaseUIOrigin: 'http://example.com',
+ kbaseUIWindow: window,
+ receiveChannelId: 'abc',
+ sendChannelId: 'def',
+ });
+
+ const payload: KBaseUINavigatedPayload = {
+ path: 'foo',
+ params: { bar: 'baz' },
+ type: 'europaui',
+ };
+
+ let navigateCalled = false;
+ let navigateCalledToArg: To | number | null = null;
+ let navigateCalledOptionsArg: NavigateOptions | null = null;
+ const navigate: NavigateFunction = (
+ to: To | number, // gnarly
+ options?: NavigateOptions
+ ) => {
+ navigateCalled = true;
+ navigateCalledToArg = to;
+ navigateCalledOptionsArg = options || null;
+ };
+
+ connection.handleNavigationMessage(payload, navigate);
+
+ expect(navigateCalled).toBe(true);
+ expect(navigateCalledToArg).not.toBeNull();
+ expect(navigateCalledToArg).toMatchObject({
+ pathname: '/foo',
+ search: 'bar=baz',
+ });
+ expect(navigateCalledOptionsArg).not.toBeNull();
+ expect(navigateCalledOptionsArg).toMatchObject({ replace: true });
+ });
+
+ test('channelSpy spits to the console', () => {
+ const message: ChannelMessage = new ChannelMessage({
+ name: 'foo',
+ envelope: { channel: 'bar', id: 'baz' },
+ payload: 'fuzz',
+ });
+
+ channelSpy('DIRECTION', message);
+
+ expect(infoLogSpy).toHaveBeenCalledWith(
+ '[KBaseUIConnection][spy][DIRECTION]',
+ message.envelope.channel,
+ message.name
+ );
+ });
+});
diff --git a/src/features/legacy/KBaseUIConnection.ts b/src/features/legacy/KBaseUIConnection.ts
new file mode 100644
index 00000000..a3955f44
--- /dev/null
+++ b/src/features/legacy/KBaseUIConnection.ts
@@ -0,0 +1,443 @@
+import { createSearchParams, NavigateFunction } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
+import { OnLoggedInParams } from './IFrameWrapper';
+import {
+ assertKBaseUIConnectPayload,
+ assertKBaseUILoggedinPayload,
+ assertKBaseUINavigatedPayload,
+ assertKBaseUIRedirectPayload,
+ assertKBaseUISetTitlePayload,
+ EuropaAuthenticatedPayload,
+ EuropaAuthnavigatePayload,
+ EuropaConnectPayload,
+ EuropaDeauthenticatedPayload,
+ EuropaNavigatePayload,
+ KBaseUILoggedinPayload,
+ KBaseUINavigatedPayload,
+ KBaseUIRedirectPayload,
+ NextRequest,
+ NextRequestObject,
+} from './messageValidation';
+import ReceiveChannel from './ReceiveChannel';
+import SendChannel, { ChannelMessage } from './SendChannel';
+import { createLegacyPath } from './utils';
+
+// Connection Status
+
+export enum ConnectionStatus {
+ NONE = 'NONE',
+ CONNECTING = 'CONNECTING',
+ AWAITING_START = 'AWAITING_START',
+ CONNECTED = 'CONNECTED',
+ ERROR = 'ERROR',
+}
+
+export interface ConnectionStateBase {
+ status: ConnectionStatus;
+}
+
+export interface ConnectionStateNone extends ConnectionStateBase {
+ status: ConnectionStatus.NONE;
+}
+
+export interface ConnectionStateConnecting extends ConnectionStateBase {
+ status: ConnectionStatus.CONNECTING;
+ receiveChannel: ReceiveChannel;
+ sendChannel: SendChannel;
+}
+
+export interface ConnectionStateAwaitingStart extends ConnectionStateBase {
+ status: ConnectionStatus.AWAITING_START;
+ receiveChannel: ReceiveChannel;
+ sendChannel: SendChannel;
+}
+
+export interface ConnectionStateConnected extends ConnectionStateBase {
+ status: ConnectionStatus.CONNECTED;
+ receiveChannel: ReceiveChannel;
+ sendChannel: SendChannel;
+}
+
+export interface ConnectionStateError extends ConnectionStateBase {
+ status: ConnectionStatus.ERROR;
+ message: string;
+}
+
+export type ConnectionState =
+ | ConnectionStateNone
+ | ConnectionStateConnecting
+ | ConnectionStateAwaitingStart
+ | ConnectionStateConnected
+ | ConnectionStateError;
+
+export interface KBaseUIConnectionConstructorParams {
+ sendChannelId: string;
+ receiveChannelId: string;
+ kbaseUIOrigin: string;
+ kbaseUIWindow: Window;
+ spyOnChannels?: boolean;
+}
+
+export interface StartParams {
+ navigate: NavigateFunction;
+ setTitle: (title: string) => void;
+ onLoggedIn: (payload: OnLoggedInParams) => void;
+ onLogOut: () => void;
+ onRedirect: (paylod: KBaseUIRedirectPayload) => void;
+ onLostConnection: (message: string) => void;
+}
+
+export function channelSpy(direction: string, message: ChannelMessage) {
+ // eslint-disable-next-line no-console
+ console.info(
+ `[KBaseUIConnection][spy][${direction}]`,
+ message.envelope.channel,
+ message.name
+ );
+}
+
+export interface ConnectParams {
+ token: string | null;
+ path: string;
+ params?: Record;
+}
+
+export default class KBaseUIConnection {
+ connectionState: ConnectionState;
+ params: KBaseUIConnectionConstructorParams;
+ id: string = uuidv4();
+ constructor(params: KBaseUIConnectionConstructorParams) {
+ this.params = params;
+ this.connectionState = {
+ status: ConnectionStatus.NONE,
+ };
+ }
+
+ /**
+ * Update Europa and the browser with a navigation that has occurred within kbase-ui.
+ *
+ * The 'navigation' message from kbase-ui informs Europa that a navigation has
+ * occurred. The message contains the path and params for the navigation, which are
+ * provided here. The job of this function is to update the Europa window history so
+ * that the current location in kbase-ui is reflected in the browser's location bar.
+ * This is important for (a) communicating to the user the current resource being
+ * displayed and (b) providing the url for capture or reloading.
+ *
+ * Note that the URL set in the browser is in the "legacy" format.
+ *
+ * @param path The path within kbase-ui, i.e. the hash path
+ * @param params The params within kbase-ui
+ */
+ handleNavigationMessage(
+ { path, params, type }: KBaseUINavigatedPayload,
+ navigate: NavigateFunction
+ ): void {
+ // normalize path
+ const pathname = `/${path
+ .split('/')
+ .filter((x) => !!x)
+ .join('/')}`;
+
+ switch (type) {
+ case 'europaui':
+ navigate(
+ { pathname, search: createSearchParams(params).toString() },
+ { replace: true }
+ );
+ break;
+ case 'kbaseui':
+ default:
+ navigate(
+ {
+ pathname: createLegacyPath(path),
+ search: createSearchParams(params).toString(),
+ },
+ { replace: true }
+ );
+ }
+ }
+
+ handleLoggedin(
+ { token, expires, nextRequest }: KBaseUILoggedinPayload,
+ navigate: NavigateFunction,
+ onLoggedIn: (payload: OnLoggedInParams) => void
+ ) {
+ if (this.connectionState.status !== ConnectionStatus.CONNECTED) {
+ return;
+ }
+
+ const next: NextRequestObject = (() => {
+ if (nextRequest) {
+ return nextRequest;
+ }
+ // Yes, without a next request, we redirect to the narratives navigator.
+ // NB this used to be in kbase-ui, but makes more sense here.
+ // TODO: perhaps change to root and let the route configuration determine the
+ // default route...
+ return {
+ path: {
+ path: '/narratives',
+ type: 'europaui',
+ },
+ label: 'Narratives Navigator',
+ };
+ })();
+
+ /**
+ * A callback called after authentication has been resolved. This is one
+ * way I could find to have an action run after the whole auth setting
+ * dance. I'm sure there is a better way, but for now this works. This
+ * callback function is passed through the "onLoggedIn" prop, which is
+ * eventually passed as "onAuthResolved" to the "navigate" function retured
+ * by "useAuthenticateFromToken". onAuthResolved is called after the token
+ * is validated and auth info set in the app state. At this point, it
+ * should be safe to perform any actions that require authentication, such
+ * as navigating to an endpoint.
+ */
+ const onAuthResolved = () => {
+ if (next.path.type === 'kbaseui') {
+ // Just for type narrowing.
+ if (this.connectionState.status !== ConnectionStatus.CONNECTED) {
+ return;
+ }
+ // If we are staying in kbase-ui, we want to tell it to authenticate itself and
+ // then navigate somewhere
+ this.connectionState.sendChannel.send(
+ 'europa.authenticated',
+ {
+ token,
+ navigation: {
+ path: next.path.path,
+ params: next.path.params,
+ },
+ }
+ );
+ } else {
+ navigate(next.path.path);
+ }
+ };
+
+ // This essentially sets up a chain of actions:
+ // - validate the auth by talking to the auth service (async, obviously)
+ // - set the auth state in the store appropriately
+ onLoggedIn({ token, expires, onAuthResolved });
+ }
+
+ async connect(timeout: number): Promise {
+ return new Promise((resolve, reject) => {
+ const start = Date.now();
+ const timer = window.setTimeout(() => {
+ const elapsed = Date.now() - start;
+ reject(
+ new Error(
+ `Timed out connection to kbase-ui after ${elapsed}ms, with a timeout of ${timeout}ms`
+ )
+ );
+ }, timeout);
+
+ const receiveSpy = this.params.spyOnChannels
+ ? (() => {
+ return (message: ChannelMessage) => {
+ channelSpy('RECV', message);
+ };
+ })()
+ : undefined;
+
+ const receiveChannel = new ReceiveChannel({
+ window,
+ expectedOrigin: this.params.kbaseUIOrigin,
+ channel: this.params.receiveChannelId,
+ spy: receiveSpy,
+ });
+
+ const sendSpy = this.params.spyOnChannels
+ ? (() => {
+ return (message: ChannelMessage) => {
+ channelSpy('SEND', message);
+ };
+ })()
+ : undefined;
+
+ const sendChannel = new SendChannel({
+ window: this.params.kbaseUIWindow,
+ targetOrigin: this.params.kbaseUIOrigin,
+ channel: this.params.sendChannelId,
+ spy: sendSpy,
+ });
+
+ this.connectionState = {
+ status: ConnectionStatus.CONNECTING,
+ receiveChannel,
+ sendChannel,
+ };
+
+ receiveChannel.once('kbase-ui.connect', (payload: unknown) => {
+ // We've received the connect request from kbase-ui, so let's tell kbase-ui in
+ // response that we are here too.
+ assertKBaseUIConnectPayload(payload);
+
+ // We need to send to the partner channel with the channel id it has specified.
+ // sendChannel.setChannelId(payload.channel);
+
+ // And we need to let the other channel send to us on our channel id.
+ // const receiveChannelId = uuidv4();
+ // receiveChannel.setChannelId(receiveChannelId);
+
+ sendChannel.send('europa.connect', {
+ channelId: this.params.receiveChannelId,
+ });
+ });
+
+ receiveChannel.once('kbase-ui.connected', () => {
+ // Set up all messages we will respond to while the connection is active.
+ this.connectionState = {
+ status: ConnectionStatus.AWAITING_START,
+ receiveChannel: receiveChannel,
+ sendChannel: sendChannel,
+ };
+ window.clearTimeout(timer);
+ resolve();
+ });
+
+ receiveChannel.start();
+ });
+ }
+
+ async start(params: StartParams): Promise {
+ return new Promise((resolve, reject) => {
+ if (this.connectionState.status !== ConnectionStatus.AWAITING_START) {
+ reject(new Error('Not AWAITING_START - cannot start'));
+ return;
+ }
+
+ const { receiveChannel, sendChannel } = this.connectionState;
+
+ receiveChannel.on('kbase-ui.navigated', (payload: unknown) => {
+ assertKBaseUINavigatedPayload(payload);
+ this.handleNavigationMessage(payload, params.navigate);
+ });
+
+ receiveChannel.on('kbase-ui.set-title', (payload: unknown) => {
+ assertKBaseUISetTitlePayload(payload);
+ params.setTitle(payload.title);
+ });
+
+ receiveChannel.on('kbase-ui.logout', () => {
+ params.onLogOut();
+ });
+
+ receiveChannel.on('kbase-ui.redirect', (payload: unknown) => {
+ assertKBaseUIRedirectPayload(payload);
+ params.onRedirect(payload);
+ });
+
+ receiveChannel.on('kbase-ui.loggedin', (payload: unknown) => {
+ assertKBaseUILoggedinPayload(payload);
+ this.handleLoggedin(payload, params.navigate, params.onLoggedIn);
+ });
+
+ this.connectionState = {
+ status: ConnectionStatus.CONNECTED,
+ receiveChannel: receiveChannel,
+ sendChannel: sendChannel,
+ };
+
+ resolve();
+ });
+ }
+
+ disconnect() {
+ if (
+ this.connectionState.status === ConnectionStatus.CONNECTING ||
+ this.connectionState.status === ConnectionStatus.AWAITING_START ||
+ this.connectionState.status === ConnectionStatus.CONNECTED
+ ) {
+ this.connectionState.receiveChannel.stop();
+ }
+ }
+
+ /**
+ * Sends a "europa.navigate" message to kbase-ui, instructing it to navigate to some location.
+ *
+ * @param path The kbase-ui navigation path; equivalent to the hash path in the url
+ * @param params [optional] Parameters for the kbase-ui navigation; equivalent
+ * to url search params.
+ */
+ navigate(path: string, params?: Record) {
+ if (this.connectionState.status !== ConnectionStatus.CONNECTED) {
+ return;
+ }
+ this.connectionState.sendChannel.send(
+ 'europa.navigate',
+ {
+ path,
+ params,
+ }
+ );
+ }
+
+ /**
+ * Sends both authentication and navigation instructions to kbase-ui.
+ *
+ * This is used in only one location, just after first connecting to kbase-ui. The
+ * reason for it's existence, when it would seem like authenticated and deauthenticated
+ * might suffice, is that upon the initial connection there is always a navigation,
+ * whereas pure auth events may not have a navigation.
+ *
+ * @param token KBase Login Token, if present (null if unauthenticated)
+ * @param navigation A "next request" navigation instruction
+ */
+ authnavigate(token: string | null, navigation: NextRequest) {
+ if (this.connectionState.status !== ConnectionStatus.CONNECTED) {
+ return;
+ }
+ this.connectionState.sendChannel.send(
+ 'europa.authnavigate',
+ {
+ token,
+ navigation,
+ }
+ );
+ }
+
+ /**
+ * Sends "europa.authentication" message to kbase-ui.
+ *
+ * Normally sent after a login event in this or another window, although technically
+ * it may be triggered by any change in the auth token from absent to a valid token.
+ *
+ * @param token A KBase Login Token which has been validated by Europa
+ * @param navigation [optional] A navigation to perform after auth state is set
+ */
+ authenticated(token: string, navigation?: NextRequest) {
+ if (this.connectionState.status !== ConnectionStatus.CONNECTED) {
+ return;
+ }
+ this.connectionState.sendChannel.send(
+ 'europa.authenticated',
+ {
+ token,
+ navigation,
+ }
+ );
+ }
+
+ /**
+ * Sends "eruopa.deauthentication" message to kbase-ui.
+ *
+ * A somewhat strange word, "de-authenticating" means to remove the authentication
+ * from a session which is currently authenticated.
+ *
+ * @param navigation [optional] A navigation to preform after authentication, if set,
+ * is unset.
+ */
+ deauthenticated(navigation?: NextRequest) {
+ if (this.connectionState.status !== ConnectionStatus.CONNECTED) {
+ return;
+ }
+ this.connectionState.sendChannel.send(
+ 'europa.deauthenticated',
+ { navigation }
+ );
+ }
+}
diff --git a/src/features/legacy/Legacy.module.scss b/src/features/legacy/Legacy.module.scss
new file mode 100644
index 00000000..c21a9cd0
--- /dev/null
+++ b/src/features/legacy/Legacy.module.scss
@@ -0,0 +1,10 @@
+@import "../../common/colors";
+
+.main {
+ display: flex;
+ flex-flow: column nowrap;
+ flex-direction: column;
+ height: 100%;
+ position: relative;
+ width: 100%;
+}
diff --git a/src/features/legacy/Legacy.test.tsx b/src/features/legacy/Legacy.test.tsx
index b283a239..39168d73 100644
--- a/src/features/legacy/Legacy.test.tsx
+++ b/src/features/legacy/Legacy.test.tsx
@@ -1,221 +1,324 @@
-import { render, screen, waitFor } from '@testing-library/react';
-import { useEffect, useRef } from 'react';
+import { act, render, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
-import {
- MemoryRouter as Router,
- Route,
- Routes as RRRoutes,
- useLocation,
-} from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { createTestStore } from '../../app/store';
-import * as authHooks from '../auth/hooks';
-import * as layoutSlice from '../layout/layoutSlice';
-import Legacy, {
- formatLegacyUrl,
- getLegacyPart,
- isLoginMessage,
- isLogoutMessage,
- isRouteMessage,
- isTitleMessage,
- LEGACY_BASE_ROUTE,
- useMessageListener,
-} from './Legacy';
-
-const setupMessageListener = () => {
- const spy = jest.fn();
- const Component = () => {
- const ref = useRef(null);
- useMessageListener(ref, spy);
- return ;
+import {
+ makeWindowMessageSender,
+ RECEIVE_CHANNEL_ID,
+ SEND_CHANNEL_ID,
+} from '../../common/testUtils';
+import * as hooksModule from '../auth/hooks';
+import * as layoutSliceModule from '../layout/layoutSlice';
+import { LEGACY_BASE_ROUTE } from './constants';
+import Legacy from './Legacy';
+import { KBaseUILoggedinPayload } from './messageValidation';
+import * as utils from './utils';
+
+// Here we mock the module function "createChannelId", which typically creates a uuid,
+// but when testing we need to set a specific channel id ... so that we can call it!
+jest.mock('./Legacy', () => {
+ const originalModule = jest.requireActual('./Legacy');
+ return {
+ __esModule: true,
+ ...originalModule,
+ createChannelId: jest.fn(() => {
+ return 'fake_channel_id';
+ }),
};
- render();
- return spy;
-};
-
-const titleMessage = { source: 'kbase-ui.ui.setTitle', payload: 'fooTitle' };
-const routeMessage = {
- source: 'kbase-ui.app.route-component',
- payload: { request: { original: '#/some/hash/path' } },
-};
-const loginMessage = {
- source: 'kbase-ui.session.loggedin',
- payload: { token: 'some-token' },
-};
-const logoutMessage = {
- source: 'kbase-ui.session.loggedout',
- payload: undefined,
-};
-const nullLoginMessage = {
- source: 'kbase-ui.session.loggedin',
- payload: { token: null },
-};
-
-describe('Legacy', () => {
- test('useMessageListener listens', async () => {
- const spy = setupMessageListener();
- window.postMessage('foo', '*');
- await waitFor(() => {
- expect(spy).toHaveBeenCalled();
+});
+
+function setupLegacyRouting() {
+ // TODO: ensure that we can test with a subdomain AND a path.
+ const { container } = render(
+
+ {/* */}
+
+
+ } />
+
+
+
+ );
+
+ // const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ // act(() => {
+ // sendWindowMessage('kbase-ui.connect', 'my_channel_id', {
+ // channel: 'foo',
+ // });
+ // });
+
+ const iframe = container.querySelector('iframe');
+
+ // constrain iframe
+ if (iframe === null) {
+ throw new Error('Impossible - iframe is null');
+ }
+
+ expect(iframe).toHaveAttribute('title', 'kbase-ui Wrapper');
+ if (iframe.contentWindow === null) {
+ throw new Error('Impossible - iframe contentWindow is null');
+ }
+
+ return { container, contentWindow: iframe.contentWindow };
+}
+
+describe('Legacy Component', () => {
+ test('Legacy page component receives "kbase-ui.set-title" message and calls the appropriate "use" function', async () => {
+ const titleSpy = jest.spyOn(layoutSliceModule, 'usePageTitle');
+
+ const EXPECTED_TITLE = 'Some Title of Unknown Content';
+ const LEGACY_ORIGIN = 'http://legacy.localhost';
+
+ jest.spyOn(utils, 'legacyBaseURL').mockReturnValue(new URL(LEGACY_ORIGIN));
+
+ // Ordinarily, the channel ids are uuid v4; but for testing we need stable values,
+ // or at least to capture them. If we make the uuid generators utility functions, we
+ // can easily override their default behavior and provide the testing channel ids.
+ jest
+ .spyOn(utils, 'generateReceiveChannelId')
+ .mockReturnValue(RECEIVE_CHANNEL_ID);
+
+ jest.spyOn(utils, 'generateSendChannelId').mockReturnValue(SEND_CHANNEL_ID);
+
+ const { contentWindow } = setupLegacyRouting();
+
+ // let TEST_EUROPA_RECEIVE_CHANNEL = 'foo';
+ // const TEST_KBASE_UI_RECEIVE_CHANNEL = 'kbase-ui-receive-channel';
+ const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ contentWindow.addEventListener('message', (messageEvent) => {
+ if ('envelope' in messageEvent.data) {
+ if ('channel' in messageEvent.data.envelope) {
+ if (messageEvent.data.envelope.channel !== SEND_CHANNEL_ID) {
+ return;
+ }
+ }
+ }
+ // We want to listen for all 'europa' messages here.
+ // Simulate reaction to the 'start' message, by sending 'started'.
+ if ('name' in messageEvent.data) {
+ // Handle messages to simulate kbase-ui
+ switch (messageEvent.data.name) {
+ case 'europa.connect': {
+ // Europa's connect contains the channel id it is now listening on.
+ // RECEIVE_CHANNE = messageEvent.data.payload.channelId;
+ // This is the normal message after connect is received.
+ act(() => {
+ sendMessage('kbase-ui.connected', RECEIVE_CHANNEL_ID, {});
+ });
+
+ break;
+ }
+ case 'europa.authnavigate':
+ // Then some time later, we are simulating a set-title event
+ act(() => {
+ sendMessage('kbase-ui.set-title', RECEIVE_CHANNEL_ID, {
+ title: EXPECTED_TITLE,
+ });
+ });
+
+ break;
+ }
+ }
+ });
+
+ // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // loaded, and the Europa compatibility layer is ready to receive messages.
+ act(() => {
+ sendMessage('kbase-ui.connect', RECEIVE_CHANNEL_ID, {
+ channel: SEND_CHANNEL_ID,
+ });
});
- });
- test('useMessageListener ignores non-target source when NODE_ENV is production', async () => {
- const processEnv = process.env;
- process.env = { ...processEnv, NODE_ENV: 'development' };
- const spy = setupMessageListener();
- window.postMessage('foo', '*');
await waitFor(() => {
- expect(spy).not.toHaveBeenCalled();
+ expect(titleSpy).toHaveBeenCalledWith(EXPECTED_TITLE);
});
- process.env = processEnv;
+ titleSpy.mockRestore();
});
- test('isTitleMessage', () => {
- expect(isTitleMessage(titleMessage)).toBe(true);
- expect(isTitleMessage(routeMessage)).toBe(false);
- expect(isTitleMessage(loginMessage)).toBe(false);
- expect(isTitleMessage(nullLoginMessage)).toBe(false);
- });
+ /**
+ * This test works by simulating a legacy path, legacy component startup sequence,
+ * issuing a "logged in" message, and the tricky bit is in Legacy.tsx the "login" is
+ * handled by setting a state variable which is then picked up by
+ * "useTryAuthFromToken". So we measure whether "useTryAuthFromToken" was called with
+ * the test token value "foo_token"
+ */
+ // TODO: redo this test, it no longer works quite like this.
+ // Rather useAuthenticateFromToken returns a setToken function which is then called.
+ // SO I think we need to mock useAuthenticateFromToken, have it return a mock
+ // function, and measure whether this was called.
+ test('Legacy page component receives "kbase-ui.loggedin" message and calls the appropriate "set" function', async () => {
+ const TEST_TOKEN = 'foo_token';
- test('isRouteMessage', () => {
- expect(isRouteMessage(titleMessage)).toBe(false);
- expect(isRouteMessage(routeMessage)).toBe(true);
- expect(isRouteMessage(loginMessage)).toBe(false);
- expect(isRouteMessage(nullLoginMessage)).toBe(false);
- });
+ // const useTryAuthFromTokenSpy = jest.spyOn(
+ // hooksModule,
+ // 'useTryAuthFromToken'
+ // );
- test('isLoginMessage', () => {
- expect(isLoginMessage(titleMessage)).toBe(false);
- expect(isLoginMessage(routeMessage)).toBe(false);
- expect(isLoginMessage(loginMessage)).toBe(true);
- expect(isLoginMessage(nullLoginMessage)).toBe(true);
- });
+ let setTokenCalled = false;
- test('isLogoutMessage', () => {
- expect(isLogoutMessage(titleMessage)).toBe(false);
- expect(isLogoutMessage(routeMessage)).toBe(false);
- expect(isLogoutMessage(loginMessage)).toBe(false);
- expect(isLogoutMessage(nullLoginMessage)).toBe(false);
- expect(isLogoutMessage(logoutMessage)).toBe(true);
- });
+ const setTokenSpy = jest
+ .spyOn(hooksModule, 'useAuthenticateFromToken')
+ .mockImplementation(() => {
+ const authenticate = () => {
+ setTokenCalled = true;
+ };
+ return { authenticate };
+ });
- test('getLegacyPart', () => {
- expect(getLegacyPart('/legacy/foo/bar')).toBe('foo/bar');
- expect(getLegacyPart('ci.kbase.us/some-path/legacy/foo/bar')).toBe(
- 'foo/bar'
- );
- expect(getLegacyPart('ci.kbase.us/legacy/foo/bar/')).toBe('foo/bar/');
- expect(getLegacyPart('/legacy/')).toBe('/');
- expect(getLegacyPart('/legacy')).toBe('/');
- });
+ jest
+ .spyOn(utils, 'legacyBaseURL')
+ .mockReturnValue(new URL('http://legacy.localhost'));
- test('formatLegacyUrl', () => {
- expect(formatLegacyUrl('foo/bar/')).toBe(
- `https://${process.env.REACT_APP_KBASE_LEGACY_DOMAIN}/#foo/bar/`
- );
- expect(formatLegacyUrl('/foo/bar/')).toBe(
- `https://${process.env.REACT_APP_KBASE_LEGACY_DOMAIN}/#/foo/bar/`
- );
- });
+ // Ordinarily, the channel ids are uuid v4; but for testing we need stable values,
+ // or at least to capture them. If we make the uuid generators utility functions, we
+ // can easily override their default behavior and provide the testing channel ids.
+ jest
+ .spyOn(utils, 'generateReceiveChannelId')
+ .mockReturnValue(RECEIVE_CHANNEL_ID);
+
+ jest.spyOn(utils, 'generateSendChannelId').mockReturnValue(SEND_CHANNEL_ID);
+
+ const { contentWindow } = setupLegacyRouting();
- test('Legacy page component renders and navigates', async () => {
- const locationSpy = jest.fn();
- const TestWrapper = () => {
- const location = useLocation();
- useEffect(() => locationSpy(location), [location]);
- return ;
+ // let TEST_EUROPA_RECEIVE_CHANNEL = 'foo';
+ // const TEST_KBASE_UI_RECEIVE_CHANNEL = 'kbase-ui-receive-channel';
+ const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ const loggedInPayload: KBaseUILoggedinPayload = {
+ token: TEST_TOKEN,
+ expires: 12345,
};
- render(
-
-
-
- } />
-
-
-
- );
- expect(
- await screen.findByTitle('Legacy Content Wrapper')
- ).toBeInTheDocument();
- window.postMessage(
- {
- source: 'kbase-ui.app.route-component',
- payload: { request: { original: '/some/hash/path' } },
- },
- '*'
- );
- await waitFor(() => {
- expect(locationSpy).toBeCalledTimes(2);
- expect(locationSpy).toHaveBeenNthCalledWith(
- 1,
- expect.objectContaining({
- hash: '',
- pathname: '/legacy',
- search: '',
- state: null,
- })
- );
- expect(locationSpy).toHaveBeenNthCalledWith(
- 2,
- expect.objectContaining({
- hash: '',
- pathname: '/legacy/some/hash/path',
- search: '',
- state: null,
- })
- );
+
+ contentWindow.addEventListener('message', (messageEvent) => {
+ if ('envelope' in messageEvent.data) {
+ if ('channel' in messageEvent.data.envelope) {
+ if (messageEvent.data.envelope.channel !== SEND_CHANNEL_ID) {
+ return;
+ }
+ }
+ }
+
+ // We want to listen for all 'europa' messages here.
+ // Simulate reaction to the 'start' message, by sending 'started'.
+ if ('name' in messageEvent.data) {
+ // Handle messages to simulate kbase-ui
+ switch (messageEvent.data.name) {
+ case 'europa.connect': {
+ // This is the normal message after connect is received.
+ act(() => {
+ sendMessage('kbase-ui.connected', RECEIVE_CHANNEL_ID, {});
+ });
+
+ break;
+ }
+
+ case 'europa.authnavigate':
+ // Then some time later, we are simulating a set-title event
+ act(() => {
+ sendMessage(
+ 'kbase-ui.loggedin',
+ RECEIVE_CHANNEL_ID,
+ loggedInPayload
+ );
+ });
+
+ break;
+ }
+ }
+ });
+
+ // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // loaded, and the Europa compatibility layer is ready to receive messages.
+ act(() => {
+ sendMessage('kbase-ui.connect', RECEIVE_CHANNEL_ID, {
+ channel: SEND_CHANNEL_ID,
+ });
});
- });
- test('Legacy page component sets title from message', async () => {
- const titleSpy = jest.spyOn(layoutSlice, 'usePageTitle');
-
- render(
-
-
-
- } />
-
-
-
- );
- window.postMessage(
- {
- source: 'kbase-ui.ui.setTitle',
- payload: 'Some Title of Unknown Content',
- },
- '*'
- );
await waitFor(() => {
- expect(titleSpy).toHaveBeenCalledWith('Some Title of Unknown Content');
+ // expect(setTokenSpy).toHaveBeenCalledWith(
+ // expect.objectContaining({ token: TEST_TOKEN })
+ // );
+ expect(setTokenCalled).toBe(true);
});
- titleSpy.mockRestore();
+ setTokenSpy.mockRestore();
});
- test('Legacy page component trys auth from token message', async () => {
- const authSpy = jest.spyOn(authHooks, 'useTryAuthFromToken');
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- authSpy.mockImplementation((...args) => undefined as any);
-
- render(
-
-
-
- } />
-
-
-
- );
- window.postMessage(
- {
- source: 'kbase-ui.session.loggedin',
- payload: { token: 'some-interesting-token' },
- },
- '*'
- );
+ // /**
+ // * This test works similarly to the above
+ // */
+ test('Legacy page component receives kbase-ui.logout message and calls the appropriate "logout" function', async () => {
+ let useLogoutCalled = false;
+ const useLogoutSpy = jest
+ .spyOn(hooksModule, 'useLogout')
+ .mockImplementation(() => {
+ return () => {
+ useLogoutCalled = true;
+ };
+ });
+
+ jest
+ .spyOn(utils, 'legacyBaseURL')
+ .mockReturnValue(new URL('http://localhost'));
+
+ jest
+ .spyOn(utils, 'generateReceiveChannelId')
+ .mockReturnValue(RECEIVE_CHANNEL_ID);
+
+ jest.spyOn(utils, 'generateSendChannelId').mockReturnValue(SEND_CHANNEL_ID);
+
+ const { contentWindow } = setupLegacyRouting();
+
+ const sendMessage = makeWindowMessageSender(contentWindow, window);
+
+ contentWindow.addEventListener('message', (messageEvent) => {
+ if ('envelope' in messageEvent.data) {
+ if ('channel' in messageEvent.data.envelope) {
+ if (messageEvent.data.envelope.channel !== SEND_CHANNEL_ID) {
+ return;
+ }
+ }
+ }
+
+ // We want to listen for all 'europa' messages here.
+ // Simulate reaction to the 'start' message, by sending 'started'.
+ if ('name' in messageEvent.data) {
+ // Handle messages to simulate kbase-ui
+ switch (messageEvent.data.name) {
+ case 'europa.connect': {
+ // This is the normal message after connect is received.
+ act(() => {
+ sendMessage('kbase-ui.connected', RECEIVE_CHANNEL_ID, {});
+ });
+
+ break;
+ }
+ case 'europa.authnavigate':
+ // Then some time later, we are simulating a set-title event
+ act(() => {
+ sendMessage('kbase-ui.logout', RECEIVE_CHANNEL_ID, {});
+ });
+
+ break;
+ }
+ }
+ });
+
+ // Simulates the initial 'kbase-ui.connect' message sent by kbase-ui when the app has
+ // loaded, and the Europa compatibility layer is ready to receive messages.
+ act(() => {
+ sendMessage('kbase-ui.connect', RECEIVE_CHANNEL_ID, {
+ channel: SEND_CHANNEL_ID,
+ });
+ });
+
+ // sendMessage('kbase-ui.logout', channelId, {});
+
await waitFor(() => {
- expect(authSpy).toHaveBeenCalledWith('some-interesting-token');
+ expect(useLogoutCalled).toEqual(true);
});
- authSpy.mockRestore();
+ useLogoutSpy.mockRestore();
});
});
diff --git a/src/features/legacy/Legacy.tsx b/src/features/legacy/Legacy.tsx
index aae94569..bc90cad9 100644
--- a/src/features/legacy/Legacy.tsx
+++ b/src/features/legacy/Legacy.tsx
@@ -1,205 +1,134 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+/**
+ * The main task of this component is to interface between Europa and the embedding
+ * support for kbase-ui in IFrameWrapper.
+ *
+ * As such, it makes liberal usage of custom hooks to reach into the system.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppSelector } from '../../common/hooks';
+import { useAuthenticateFromToken, useLogout } from '../auth/hooks';
import { usePageTitle } from '../layout/layoutSlice';
-import { useTryAuthFromToken } from '../auth/hooks';
-import { useAppDispatch } from '../../common/hooks';
-import { resetStateAction } from '../../app/store';
-import { setAuth } from '../auth/authSlice';
-import { toast } from 'react-hot-toast';
-
-export const LEGACY_BASE_ROUTE = '/legacy';
-
+import IFrameWrapper, { OnLoggedInParams } from './IFrameWrapper';
+import classes from './Legacy.module.scss';
+import {
+ generateReceiveChannelId,
+ generateSendChannelId,
+ legacyBaseURL,
+ parseLegacyURL,
+} from './utils';
+
+/**
+ * The Legacy Component
+ *
+ * @returns
+ */
export default function Legacy() {
- // TODO: external navigation and equivalent
-
- // TODO: consider adding integration tests for this feature, as unit tests
- // cannot test this component effectively
+ // Many of the data dependencies (use...) are collected here, for clarity.
+ const token = useAppSelector(({ auth: { token } }) => {
+ return token;
+ });
- const location = useLocation();
- const navigate = useNavigate();
- const dispatch = useAppDispatch();
+ const logout = useLogout();
- const legacyContentRef = useRef(null);
+ // All this is to coordinate setting the title (in header, browser window, etc.) from
+ // the kbase-ui message `kbase-ui.set-title`.
const [legacyTitle, setLegacyTitle] = useState('');
usePageTitle(legacyTitle);
-
- // The path that should be in the iframe based on the current parent window location
- const expectedLegacyPath = getLegacyPart(
- location.pathname + location.search + location.hash
- );
- // The actual current path, set by navigation events from kbase-ui
- const [legacyPath, setLegacyPath] = useState(expectedLegacyPath);
-
- // State for token recieved via postMessage, for setting auth
- const [recievedToken, setReceivedToken] = useState();
- // when recievedToken is defined and !== current token, this will try it for auth
- useTryAuthFromToken(recievedToken);
-
- // Listen for messages from the iframe
- useMessageListener(legacyContentRef, (e) => {
- const d = e.data;
- if (isRouteMessage(d)) {
- // Navigate the parent window when the iframe sends a navigation event
- let path = d.payload.request.original;
- if (path[0] === '/') path = path.slice(1);
- if (legacyPath !== path) {
- setLegacyPath(path);
- navigate(`./${path}`);
- }
- } else if (isTitleMessage(d)) {
- setLegacyTitle(d.payload);
- } else if (isLoginMessage(d)) {
- if (d.payload.token) {
- setReceivedToken(d.payload.token);
- }
- } else if (isLogoutMessage(d)) {
- dispatch(resetStateAction());
- dispatch(setAuth(null));
- toast('You have been signed out');
- navigate('/legacy/auth2/signedout');
- }
- });
-
- // In order to enable the messages to work safely, we send the
- // parent domain on every render. This allows us to receive all
- // messages EXCEPT 'kbase-ui.session.loggedin' on cross-domain
- // parents (useful for dev), without allowing all ('*') targetDomains
+ function setTitle(title: string) {
+ setLegacyTitle(title);
+ }
+
+ // Create a stateful channel id so that we can interact with the useEffect below.
+ const [channelIds, setChannelIds] = useState<{
+ sendChannelId: string;
+ receiveChannelId: string;
+ } | null>(null);
+
+ // Legacy URL is set below, just once, when the component is loaded.
+ // The legacy url does not change as the europa url does. Rather, we use a stable url
+ // to the root of kbase-ui, and all navigation to kbase-ui from Europa is expressed
+ // through messages.
+ const [legacyURL, setLegacyURL] = useState(null);
useEffect(() => {
- if (legacyContentRef.current?.contentWindow) {
- legacyContentRef.current.contentWindow.postMessage(
- {
- source: 'europa.identify',
- payload: window.location.origin,
- },
- `https://${process.env.REACT_APP_KBASE_LEGACY_DOMAIN}` || '*'
- );
- }
- });
+ const receiveChannelId = generateReceiveChannelId();
+ const sendChannelId = generateSendChannelId();
+
+ const url = new URL(legacyBaseURL());
+ url.searchParams.set('sendChannelId', sendChannelId);
+ url.searchParams.set('receiveChannelId', receiveChannelId);
+ // The legacy URL is always just a base url now; all nav is through window messages.
+ setLegacyURL(url);
+ setChannelIds({ sendChannelId, receiveChannelId });
+ }, [setLegacyURL, setChannelIds]);
+
+ // We depend upon the current react-router location
+ const location = useLocation();
- // The following enables navigation events from Europa to propagate to the
- // iframe. When expectedLegacyPath (from the main window URL) changes, check
- // that legacyPath (from the iframe) martches, otherwise, send the iframe a
- // postMessage with navigation instructions. legacyPath will be updated
- // downstream (the ui navigation event will send a message back to europa with
- // the new route). We only want to watch for changes on expectedLegacyPath
- // here, as watching legacyPath will cause this to run any time the iframe's
- // location changes.
- useEffect(() => {
- if (
- expectedLegacyPath !== legacyPath &&
- legacyContentRef.current?.contentWindow
- ) {
- legacyContentRef.current.contentWindow.postMessage(
- {
- source: 'europa.navigate',
- payload: { path: expectedLegacyPath },
- },
- `https://${process.env.REACT_APP_KBASE_LEGACY_DOMAIN}` || '*'
- );
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [expectedLegacyPath, legacyContentRef]);
+ // Build a complete url for the current url. We start with the current origin, which
+ // will be stable, and the current location as provided by react router.
+ const europaURL = new URL(window.location.origin);
+ europaURL.pathname = location.pathname;
+ europaURL.search = location.search;
+ const legacyPath = parseLegacyURL(europaURL);
+
+ const { authenticate } = useAuthenticateFromToken();
+
+ // ------------------------------
+ // EVENT HANDLERS
+ // ------------------------------
+
+ /**
+ * Event Handlers
+ *
+ * We prefer to have most events handled by function props that we pass in from here.
+ * This allows easier testing of IFrameWrapper, and reduces its size.
+ */
+
+ /**
+ * Handles the "kbase-ui.session.loggedin" message from kbase-ui, which is emitted
+ * after a sign in or sign up.
+ *
+ * Note that this is propagated back to kbase-ui, since kbase-ui considers Europa to
+ * be the source of truth for setting authentication. May seem a bit counterintuitive,
+ * but allows (a) the propagation of auth upon startup and (b) will accommodate Europa
+ * taking over sign in and sign up in the future.
+ *
+ * @param loginMessagePayload
+ */
+ function onLoggedIn({ token, onAuthResolved }: OnLoggedInParams) {
+ authenticate({ token, onAuthResolved });
+ }
+
+ const onLogOut = useCallback(() => {
+ logout();
+ }, [logout]);
+
+ // Return early on the first render, before critical values are calculated. Note that we don't
+ // display anything initially. Don't worry, we use an overlay cover with a loading
+ // message, so the user will not see (much of a) blank view.
+ if (channelIds === null || legacyURL === null) {
+ return null;
+ }
+
+ const { sendChannelId, receiveChannelId } = channelIds;
return (
-