@availity/mui-spaces 0.2.6 → 0.3.0

package/src/lib/SpacesLink/useLink.test.tsx

@@ -0,0 +1,280 @@
+import { waitFor, cleanup, render, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
+import nativeForm from '@availity/native-form';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces } from '../Spaces';
+import { SpacesLink } from './SpacesLink';
+import type { Space } from '../spaces-types';
+import type { SsoTypeSpace } from './spaces-link-types';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '@availity/mock/src/lib/server';
+
+jest.mock('@availity/native-form');
+
+const buildSpacesLink = (space: Space | SsoTypeSpace, linkAttributes: Record<any, any>) => {
+  const queryClient = new QueryClient();
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Spaces clientId="my-client-id" spaces={[space]}>
+        <SpacesLink
+          id={`application-link-${space.id}`}
+          titleTag="h5"
+          space={space}
+          linkAttributes={linkAttributes}
+          clientId="my-client-id"
+          linkStyle="card"
+          title={space.link?.text}
+        />
+      </Spaces>
+    </QueryClientProvider>
+  );
+};
+
+describe('useLink', () => {
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+  beforeEach(() => {
+    Object.defineProperty(window, 'open', { value: jest.fn() });
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+    server.resetHandlers();
+  });
+
+  const space: Space | SsoTypeSpace = {
+    type: 'APPLICATION',
+    name: 'an application',
+    description: 'This is an application',
+    id: '1',
+    configurationId: '1',
+  };
+
+  it('should not call linkUrl onclick with no url', async () => {
+    space.id = '1';
+    space.configurationId = '1';
+
+    const { container } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    fireEvent.click(container);
+    await waitFor(() => {
+      expect(window.open).not.toHaveBeenCalled();
+      expect(nativeForm).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should not call linkUrl on enter keypress with no url', async () => {
+    space.id = '2';
+    space.configurationId = '2';
+
+    const { container } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    fireEvent.keyPress(container, { charCode: 13 });
+    await waitFor(() => {
+      expect(window.open).not.toHaveBeenCalled();
+      expect(nativeForm).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call linkUrl onclick with relativeUrl', async () => {
+    space.id = '3';
+    space.configurationId = '3';
+    space.link = {
+      text: 'the link',
+      target: '_self',
+      url: '/path/to/url',
+    };
+
+    const { container } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    const linkHeader3 = await waitFor(() => container.querySelector('#app-title-3'));
+    if (linkHeader3) fireEvent.click(linkHeader3);
+
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith('/path/to/url?spaceId=3', '_self');
+      expect(nativeForm).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call linkUrl on enter keydown with relativeUrl', async () => {
+    space.id = '4';
+    space.configurationId = '4';
+    space.link = {
+      text: 'the link',
+      target: '_self',
+      url: '/path/to/url',
+    };
+
+    const { container } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    const linkHeader4 = await waitFor(() => container.querySelector('#app-title-4'));
+
+    if (linkHeader4) fireEvent.keyDown(linkHeader4, { key: 'Enter' });
+
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith('/path/to/url?spaceId=4', '_self');
+      expect(nativeForm).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call linkUrl onclick with absoluteUrl', async () => {
+    space.id = '5';
+    space.configurationId = '5';
+    space.link = { text: 'the link', target: '_self', url: 'https://www.google.com' };
+
+    const { container } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    const linkHeader5 = await waitFor(() => container.querySelector('#app-title-5'));
+
+    if (linkHeader5) fireEvent.click(linkHeader5);
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith('https://www.google.com', '_self');
+      expect(nativeForm).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call linkUrl on enter keypress with absoluteUrl', async () => {
+    space.id = '6';
+    space.configurationId = '6';
+    space.link = { text: 'the link', target: '_self', url: 'https://www.google.com' };
+
+    const { container } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    const linkHeader6 = await waitFor(() => container.querySelector('#app-title-6'));
+
+    if (linkHeader6) fireEvent.keyDown(linkHeader6, { key: 'Enter' });
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith('https://www.google.com', '_self');
+      expect(nativeForm).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call linkUrl if multiPayerModal used but linkAttributes.spaceId is passed', async () => {
+    space.id = '6';
+    space.configurationId = '6';
+    space.link = { text: 'the link', target: '_self', url: '/path/to/url' };
+    space.parents = [
+      {
+        id: 'parentId',
+        type: 'space',
+        name: 'parentId',
+        configurationId: 'parentId',
+      },
+      {
+        id: 'parentId2',
+        type: 'space',
+        name: 'parentId2',
+        configurationId: 'parentId2',
+      },
+    ];
+
+    const { container } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    const linkHeader6 = await waitFor(() => container.querySelector('#app-title-6'));
+
+    if (linkHeader6) fireEvent.keyDown(linkHeader6, { key: 'Enter' });
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith('/path/to/url?spaceId=6', '_self');
+      expect(nativeForm).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call legacySSO onclick with disclaimerId metadata', async () => {
+    space.id = '7';
+    space.configurationId = '7';
+    space.link = { text: 'the link', target: '_self', url: '/path/to/url' };
+    space.meta = { disclaimerId: 'disclaimer' };
+
+    const { container, findByText, getByRole } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    const linkHeader7 = await waitFor(() => container.querySelector('#app-title-7'));
+    if (linkHeader7) fireEvent.click(linkHeader7);
+
+    await waitForElementToBeRemoved(() => getByRole('progressbar'));
+
+    const disclaimer = await findByText('This is a disclaimer.');
+    expect(disclaimer).toBeDefined();
+
+    const modalSubmit = await findByText('Accept');
+    fireEvent.click(modalSubmit);
+
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith('/path/to/url?spaceId=7', '_self');
+      expect(nativeForm).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call legacySSO on enter keypress with disclaimerId metadata', async () => {
+    space.id = '8';
+    space.configurationId = '8';
+    space.link = { text: 'the link', target: '_self', url: '/path/to/url' };
+    space.meta = { disclaimerId: '1234' };
+
+    const { container, findByText } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    const linkHeader8 = await waitFor(() => container.querySelector('#app-title-8'));
+    if (linkHeader8) fireEvent.keyDown(linkHeader8, { key: 'Enter' });
+
+    const disclaimer = await findByText('hello world');
+    expect(disclaimer).toBeDefined();
+
+    const modalSubmit = await findByText('Accept');
+    fireEvent.click(modalSubmit);
+
+    await waitFor(() => {
+      expect(window.open).toHaveBeenCalledWith('/path/to/url?spaceId=8', '_self');
+      expect(nativeForm).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call ssoId onclick with ssoId metadata', async () => {
+    space.id = '9';
+    space.configurationId = '9';
+    space.link = { text: 'the link', target: '_self', url: '/path/to/url' };
+    space.meta = {
+      ssoId: 'ssoId',
+    };
+    space.type = 'saml';
+
+    const { container } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    const linkHeader9 = await waitFor(() => container.querySelector('#app-title-9'));
+    if (linkHeader9) fireEvent.click(linkHeader9);
+
+    await waitFor(() => {
+      expect(nativeForm).toHaveBeenCalledWith(
+        'ssoId',
+        { X_Client_ID: 'my-client-id', X_XSRF_TOKEN: '', spaceId: '9' },
+        { target: '_self' },
+        'saml'
+      );
+      expect(window.open).not.toHaveBeenCalled();
+    });
+  });
+
+  it('should call ssoId on enter keypress with ssoId metadata', async () => {
+    space.id = '10';
+    space.configurationId = '10';
+    space.link = { text: 'the link', target: '_self', url: '/path/to/url' };
+    space.meta = {
+      ssoId: 'ssoId',
+    };
+    space.type = 'saml';
+
+    const { container } = render(buildSpacesLink(space, { spaceId: space.id }));
+
+    const linkHeader10 = await waitFor(() => container.querySelector('#app-title-10'));
+    if (linkHeader10) fireEvent.keyDown(linkHeader10, { key: 'Enter' });
+    await waitFor(() => {
+      expect(nativeForm).toHaveBeenCalledWith(
+        'ssoId',
+        { X_Client_ID: 'my-client-id', X_XSRF_TOKEN: '', spaceId: '10' },
+        { target: '_self' },
+        'saml'
+      );
+      expect(window.open).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/SpacesLink/useLink.tsx

@@ -0,0 +1,111 @@
+import { useCurrentUser } from '@availity/hooks';
+import { useSpaces } from '../Spaces';
+import { useModal } from '../modals/ModalProvider';
+import { openLink, openLinkWithSso } from './linkHandlers';
+import type { UseLink, MediaProps, SsoTypeSpace } from './spaces-link-types';
+import { Space } from '../spaces-types';
+
+const isSsoSpace = (space: Space | SsoTypeSpace | undefined): space is SsoTypeSpace =>
+  space?.type === 'saml' || space?.type === 'openid';
+
+export const useLink: UseLink = (spaceOrSpaceId, options) => {
+  const spaceFromSpacesProvider = useSpaces(
+    (typeof spaceOrSpaceId === 'string' ? spaceOrSpaceId : spaceOrSpaceId?.id) || ''
+  );
+
+  const { data: user } = useCurrentUser();
+
+  const openModal = useModal();
+
+  const space = spaceFromSpacesProvider?.[0];
+
+  const parentPayerSpaces = space?.parents?.filter(
+    (p) => p.type && (p.type.toLowerCase() === 'space' || p.type.toLowerCase() === 'payerspace')
+  );
+
+  const legacySso = () => {
+    if (space && space.meta?.disclaimerId && space.link) {
+      openModal('DISCLAIMER_MODAL', {
+        disclaimerId: space.meta.disclaimerId,
+        name: space.name,
+        spaceType: space.type,
+        id: space.configurationId,
+        title: space.name,
+        description: space.description,
+        link: space.link,
+        user: user?.akaname,
+      });
+    }
+  };
+
+  const openMultiPayerModal = () => {
+    if (space && space.link)
+      openModal('MULTI_PAYER_MODAL', {
+        title: 'Open Link as Payer',
+        name: space?.name,
+        parentPayerSpaces,
+        link: space?.link,
+        id: space?.configurationId,
+        spaceType: space?.type,
+        metadata: space?.meta,
+        user: user?.akaname,
+      });
+  };
+
+  const mediaProps: MediaProps = {
+    role: 'link',
+  };
+
+  if (isSsoSpace(space) && space?.meta?.ssoId) {
+    if (!options?.clientId) {
+      throw new Error('clientId is required for SSO spaces');
+    }
+    if (!options.linkAttributes) {
+      throw new Error('linkAttributes are required for SSO spaces');
+    }
+    mediaProps.onClick = (event) => {
+      event.preventDefault();
+      if (options.clientId && options.linkAttributes) {
+        openLinkWithSso(space, {
+          akaname: user?.akaname,
+          clientId: options.clientId,
+          payerSpaceId: options.linkAttributes.spaceId,
+          ssoParams: options.linkAttributes,
+        });
+      }
+    };
+    mediaProps.onKeyDown = (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        if (options.clientId && options.linkAttributes) {
+          openLinkWithSso(space, {
+            akaname: user?.akaname,
+            clientId: options.clientId,
+            payerSpaceId: options.linkAttributes.spaceId,
+            ssoParams: options.linkAttributes,
+          });
+        }
+      }
+    };
+  } else if (space?.meta?.disclaimerId) {
+    mediaProps.onClick = legacySso;
+    mediaProps.onKeyDown = (event) => {
+      if (event.key === 'Enter') return legacySso();
+    };
+  } else if (parentPayerSpaces && parentPayerSpaces.length > 1 && !options?.linkAttributes?.spaceId) {
+    mediaProps.onClick = openMultiPayerModal;
+    mediaProps.onKeyDown = (event) => {
+      if (event.key === 'Enter') return openMultiPayerModal();
+    };
+  } else {
+    mediaProps.onClick = () => {
+      if (space) return openLink(space, { akaname: user?.akaname, payerSpaceId: options?.linkAttributes?.spaceId });
+    };
+    mediaProps.onKeyDown = (event) => {
+      if (event.key === 'Enter' && space)
+        return openLink(space, { akaname: user?.akaname, payerSpaceId: options?.linkAttributes?.spaceId });
+    };
+  }
+
+  return [space, mediaProps];
+};

package/src/lib/helpers.test.tsx

@@ -10,6 +10,9 @@ describe('updateUrl', () => {
 
     updatedUrl = updateUrl('http://www.example.com?foo=bar', 'fakeKey', 'fakeValue');
     expect(updatedUrl).toBe('http://www.example.com?fakeKey=fakeValue&foo=bar');
+
+    updatedUrl = updateUrl('http://www.example.com?foo=bar');
+    expect(updatedUrl).toBe('http://www.example.com?foo=bar');
   });
 });
 

package/src/lib/helpers.tsx

@@ -1,9 +1,10 @@
 import qs from 'qs';
 
-export const updateUrl = (url: string, key: string, value: string) => {
+export const updateUrl = (url: string, key?: string, value?: string) => {
   const [uri, queryString] = url.split('?');
   const currentParams = qs.parse(queryString);
-  const newParams = qs.stringify({ ...currentParams, [key]: value }, { sort: (a, b) => a.localeCompare(b) });
+  const additionalParams = key && value && { [key]: value };
+  const newParams = qs.stringify({ ...currentParams, ...additionalParams }, { sort: (a, b) => a.localeCompare(b) });
 
   return `${uri}?${newParams}`;
 };
@@ -13,3 +14,26 @@ export const getUrl = (url = '', loadApp: boolean, absolute: boolean) => {
 
   return `/public/apps/home/#!/loadApp?appUrl=${encodeURIComponent(url)}`;
 };
+
+export const getTarget = (target?: string) => {
+  // should start with _, otherwise it is specifying a specific frame name
+  // _blank = new tab/window, _self = same frame, _parent = parent frame (use for home page from modals), _top = document body, framename = specific frame
+  if (target && !target.startsWith('_')) {
+    if (target === 'BODY') {
+      return '_self';
+    }
+    if (target === 'TAB') {
+      return '_blank';
+    }
+  }
+
+  return target || '_self';
+};
+
+export const isFunction = (
+  children: JSX.Element | ((props: any | undefined) => JSX.Element)
+): children is (props: any | undefined) => JSX.Element => typeof children === 'function';
+
+export const isReactNodeFunction = (
+  children: React.ReactNode | ((props: any | undefined) => React.ReactNode)
+): children is (props: any | undefined) => React.ReactNode => typeof children === 'function';

package/src/lib/modals/DisclaimerModal.test.tsx

@@ -0,0 +1,66 @@
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces } from '../Spaces';
+import { SpacesLink } from '../SpacesLink/SpacesLink';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '@availity/mock/src/lib/server';
+
+window.open = jest.fn();
+
+const queryClient = new QueryClient();
+
+const DisclaimerModal = () => (
+  <QueryClientProvider client={queryClient}>
+    <Spaces
+      spaces={[
+        {
+          id: '1',
+          configurationId: 'space1',
+          name: 'Some Application',
+          type: 'space',
+          meta: { disclaimerId: '1234' },
+          link: {
+            url: '/some-url',
+            target: 'newBody',
+          },
+        },
+      ]}
+      clientId="my-client-id"
+    >
+      <SpacesLink
+        spaceId="1"
+        clientId="my-client-id"
+        linkAttributes={{
+          spaceId: '1',
+        }}
+      />
+    </Spaces>
+  </QueryClientProvider>
+);
+
+describe('DisclaimerModal', () => {
+  beforeAll(() => {
+    // Start the interception.
+    server.listen();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    server.resetHandlers();
+  });
+
+  it('renders modal when space metadata contains disclaimerId', async () => {
+    const { getByText } = render(<DisclaimerModal />);
+
+    const link = await waitFor(() => getByText('Some Application'));
+    fireEvent.click(link);
+
+    const disclaimerText = await waitFor(() => getByText('hello world'));
+    expect(disclaimerText).toBeDefined();
+
+    const submitBtn = await waitFor(() => getByText('Accept'));
+    fireEvent.click(submitBtn);
+
+    expect(window.open).toHaveBeenCalledTimes(1);
+  });
+});

package/src/lib/modals/DisclaimerModal.tsx

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import { avWebQLApi } from '@availity/api-axios';
+import ReactMarkdown from 'react-markdown';
+import { CircularProgress } from '@availity/mui-progress';
+import { DialogContent } from '@availity/mui-dialog';
+import type { ModalProps } from './modal-types';
+
+const disclaimerQuery = `query disclaimerFindOne($id: ID!) {
+  configurationFindOne(id: $id) {
+    ... on Text {
+      description
+    }
+  }
+}`;
+
+export const DisclaimerModal = ({ disclaimerId }: ModalProps) => {
+  const [disclaimer, setDisclaimer] = useState('');
+
+  useEffect(() => {
+    const fetchDisclaimer = async () => {
+      if (disclaimerId) {
+        const result = await avWebQLApi.create({ query: disclaimerQuery, variables: { id: disclaimerId } });
+
+        setDisclaimer(result.data.data.configurationFindOne.description);
+      }
+    };
+
+    fetchDisclaimer();
+  }, [disclaimerId]);
+
+  return (
+    <DialogContent>{disclaimer ? <ReactMarkdown>{disclaimer}</ReactMarkdown> : <CircularProgress />}</DialogContent>
+  );
+};