Merge pull request #8889 from weseek/fix/drawio-viewer-script

imprv: DrawioViewerScript should respect the base path in DRAWIO_URI 2

apps/app/src/components/Script/DrawioViewerScript/DrawioViewerScript.tsx

@@ -10,8 +10,12 @@ declare global {
   var GraphViewer: IGraphViewerGlobal;
 }
 
-export const DrawioViewerScript = (): JSX.Element => {
-  const viewerMinJsSrc = useViewerMinJsUrl();
+type Props = {
+  drawioUri: string;
+}
+
+export const DrawioViewerScript = ({ drawioUri }: Props): JSX.Element => {
+  const viewerMinJsSrc = useViewerMinJsUrl(drawioUri);
 
   const loadedHandler = useCallback(() => {
     // disable useResizeSensor and checkVisibleState

apps/app/src/components/Script/DrawioViewerScript/use-viewer-min-js-url.spec.ts

@@ -1,44 +1,15 @@
 import { useViewerMinJsUrl } from './use-viewer-min-js-url';
 
-const mocks = vi.hoisted(() => {
-  return {
-    useRendererConfigMock: vi.fn(),
-  };
-});
-
-vi.mock('~/stores/context', () => ({
-  useRendererConfig: mocks.useRendererConfigMock,
-}));
-
 describe('useViewerMinJsUrl', () => {
-  it('should return the URL when rendererConfig is undefined', () => {
-    // Arrange
-    mocks.useRendererConfigMock.mockImplementation(() => {
-      return { data: undefined };
-    });
-
-    // Act
-    const url = useViewerMinJsUrl();
-
-    // Assert
-    expect(url).toBe('http://localhost/js/viewer.min.js');
-  });
-
   it.each`
     drawioUri                                     | expected
-    ${undefined}                                  | ${'http://localhost/js/viewer.min.js'}
     ${'http://localhost:8080'}                    | ${'http://localhost:8080/js/viewer.min.js'}
     ${'http://example.com'}                       | ${'http://example.com/js/viewer.min.js'}
     ${'http://example.com/drawio'}                | ${'http://example.com/drawio/js/viewer.min.js'}
     ${'http://example.com/?offline=1&https=0'}    | ${'http://example.com/js/viewer.min.js?offline=1&https=0'}
-  `('should return the expected URL "$expected" when drawioUri is "$drawioUrk"', ({ drawioUri, expected }: {drawioUri: string|undefined, expected: string}) => {
-    // Arrange
-    mocks.useRendererConfigMock.mockImplementation(() => {
-      return { data: { drawioUri } };
-    });
-
+  `('should return the expected URL "$expected" when drawioUri is "$drawioUrk"', ({ drawioUri, expected }: {drawioUri: string, expected: string}) => {
     // Act
-    const url = useViewerMinJsUrl();
+    const url = useViewerMinJsUrl(drawioUri);
 
     // Assert
     expect(url).toBe(expected);

apps/app/src/components/Script/DrawioViewerScript/use-viewer-min-js-url.ts

@@ -1,15 +1,9 @@
 import urljoin from 'url-join';
 
-import { useRendererConfig } from '~/stores/context';
-
-export const useViewerMinJsUrl = (): string => {
-  const { data: rendererConfig } = useRendererConfig();
-
-  const { drawioUri: _drawioUriStr = 'http://localhost' } = rendererConfig ?? {};
-
+export const useViewerMinJsUrl = (drawioUri: string): string => {
   // extract search from URL
-  const drawioUri = new URL(_drawioUriStr);
-  const pathname = urljoin(drawioUri.pathname, '/js/viewer.min.js');
+  const url = new URL(drawioUri);
+  const pathname = urljoin(url.pathname, '/js/viewer.min.js');
 
-  return `${drawioUri.origin}${pathname}${drawioUri.search}`;
+  return `${url.origin}${pathname}${url.search}`;
 };

apps/app/src/pages/[[...path]].page.tsx

@@ -371,7 +371,7 @@ Page.getLayout = function getLayout(page: React.ReactElement<Props>) {
   return (
     <>
       <GrowiPluginsActivator />
-      <DrawioViewerScript />
+      <DrawioViewerScript drawioUri={page.props.rendererConfig.drawioUri} />
 
       <Layout {...page.props}>
         {page}

apps/app/src/pages/_private-legacy-pages.page.tsx

@@ -76,7 +76,7 @@ const PrivateLegacyPage: NextPage<Props> = (props: Props) => {
         <title>{title}</title>
       </Head>
 
-      <DrawioViewerScript />
+      <DrawioViewerScript drawioUri={props.rendererConfig.drawioUri} />
 
       <SearchResultLayout>
         <div id="private-regacy-pages">

apps/app/src/pages/_search.page.tsx

@@ -108,7 +108,7 @@ const Layout = ({ children, ...props }: LayoutProps): JSX.Element => {
 SearchResultPage.getLayout = function getLayout(page) {
   return (
     <>
-      <DrawioViewerScript />
+      <DrawioViewerScript drawioUri={page.props.rendererConfig.drawioUri} />
       <Layout {...page.props}>{page}</Layout>
     </>
   );

apps/app/src/pages/share/[[...path]].page.tsx

@@ -141,7 +141,7 @@ const SharedPage: NextPageWithLayout<Props> = (props: Props) => {
 SharedPage.getLayout = function getLayout(page) {
   return (
     <>
-      <DrawioViewerScript />
+      <DrawioViewerScript drawioUri={page.props.rendererConfig.drawioUri} />
       <ShareLinkLayout>{page}</ShareLinkLayout>
     </>
   );