MMI-3381 CHES outage (#2531)

Author: Fosol

app/editor/src/components/layout/DefaultLayout.tsx

@@ -2,7 +2,7 @@ import { UnauthenticatedHome } from 'features/home';
 import { UserInfo } from 'features/login';
 import { Menu } from 'features/navbar';
 import React from 'react';
-import { Link, Outlet, useSearchParams } from 'react-router-dom';
+import { Link, Outlet, useLocation, useSearchParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { IWorkOrderToast, useApiHub, useToastError } from 'store/hooks';
 import {
@@ -50,10 +50,12 @@ const DefaultLayout: React.FC<ILayoutProps> = ({
   useToastError();
   const [searchParams] = useSearchParams({ showNav: 'true' });
   const { toggle: toggleSystemMessage, isShowing: showSystemMessage } = useModal();
+  const location = useLocation();
 
   const [toastIds, setToastIds] = React.useState<IWorkOrderToast[]>([]);
   const showNav = initShowNav ?? searchParams.get('showNav') === 'true';
   const [systemMessage, setSystemMessage] = React.useState<ISystemMessageModel>();
+  const isReportInstanceView = /^\/report\/instances\/.*\/view$/.test(location.pathname);
 
   React.useEffect(() => {
     keycloak.instance.onTokenExpired = () => {
@@ -148,13 +150,22 @@ const DefaultLayout: React.FC<ILayoutProps> = ({
           </LayoutErrorBoundary>
         </div>
       </Show>
-      <Show visible={!keycloak.authenticated}>
+      <Show visible={!keycloak.authenticated && !isReportInstanceView}>
         <div className="main-window">
           <main style={{ backgroundColor: '#f2f2f2' }}>
             <UnauthenticatedHome />
           </main>
         </div>
       </Show>
+      <Show visible={!keycloak.authenticated && isReportInstanceView}>
+        <div className="main-window">
+          <LayoutErrorBoundary>
+            <main>
+              <Outlet />
+            </main>
+          </LayoutErrorBoundary>
+        </div>
+      </Show>
       <Modal
         headerText={systemMessage?.name ?? 'System Message'}
         body={systemMessage?.message}

app/editor/src/features/reports/ReportInstancePreview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FaPaperPlane } from 'react-icons/fa6';
 import { useParams } from 'react-router-dom';
-import { useApp, useReportInstances, useReports } from 'store/hooks';
+import { useApp, useReportInstances, useReports, useSettings } from 'store/hooks';
 import { useUsers } from 'store/hooks/admin';
 import {
   Button,
@@ -24,11 +24,14 @@ const ReportInstancePreview: React.FC = () => {
   const { id } = useParams();
   const instanceId = parseInt(id ?? '');
   const [{ userInfo }] = useApp();
+  const { editorUrl, subscriberUrl } = useSettings();
 
   const [isLoading, setIsLoading] = React.useState(true);
   const [view, setView] = React.useState<IReportResultModel | undefined>();
   const [report, setReport] = React.useState<IReportModel>();
 
+  console.error('ReportInstancePreview ');
+
   const handlePreviewReport = React.useCallback(
     async (instanceId: number) => {
       try {
@@ -67,14 +70,21 @@ const ReportInstancePreview: React.FC = () => {
         (v) => v,
       );
 
-      const htmlBlob = new Blob([email.body], { type: 'text/html' });
-      const textBlob = new Blob([email.body], { type: 'text/plain' });
+      // Replace the URL so that it points to the external site.
+      let fixed_body = email.body;
+      if (editorUrl && subscriberUrl) {
+        const urlReplaceRegex = new RegExp(editorUrl, 'gi');
+        fixed_body = email.body.replace(urlReplaceRegex, subscriberUrl);
+      }
+
+      const htmlBlob = new Blob([fixed_body], { type: 'text/html' });
+      const textBlob = new Blob([fixed_body], { type: 'text/plain' });
       const clip = new ClipboardItem({ 'text/html': htmlBlob, 'text/plain': textBlob });
       navigator.clipboard.write([clip]);
       const bcc = subscribers.length ? `bcc=${emails.join('; ')}` : '';
       window.location.href = `mailto:${to}?${bcc}&subject=${email.subject}&body=Click Paste - Keep Source Formatting`;
     },
-    [getDistributionListById],
+    [editorUrl, getDistributionListById, subscriberUrl],
   );
 
   React.useEffect(() => {

app/editor/src/features/reports/ReportInstancesRedirect.tsx

@@ -0,0 +1,32 @@
+import { useKeycloak } from '@react-keycloak/web';
+import React from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import ReportInstancePreview from './ReportInstancePreview';
+
+/**
+ * Temporary redirect component for report/instances view
+ * Redirects unauthenticated users to external URL
+ * Authenticated users are redirected to the normal view
+ */
+export const ReportInstancesRedirect: React.FC = () => {
+  const { keycloak } = useKeycloak();
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  React.useEffect(() => {
+    if (!keycloak?.authenticated) {
+      // Redirect unauthenticated users to external URL
+      // TODO: Replace EXTERNAL_URL_HERE with your actual external URL
+      const externalUrl = `https://mmi.gov.bc.ca/report/instances/${id}/view`;
+      window.location.href = externalUrl;
+    } else {
+      // Redirect authenticated users to the normal view
+      navigate(`/report/instances/${id}/view`, { replace: true });
+    }
+  }, [keycloak?.authenticated, id, navigate]);
+
+  return <ReportInstancePreview />; // This component just handles the redirect
+};
+
+export default ReportInstancesRedirect;

app/editor/src/features/reports/test.html

@@ -1,4 +1,5 @@
 import { AdminRouter } from 'features/admin';
+import ReportInstancesRedirect from 'features/reports/ReportInstancesRedirect';
 import React, { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes, useNavigate } from 'react-router-dom';
 import { useApp } from 'store/hooks';
@@ -40,8 +41,10 @@ export const AppRouter: React.FC<IAppRouter> = ({ name }) => {
   React.useEffect(() => {
     // There is a race condition, when keycloak is ready state related to user claims will not be.
     // Additionally, when the user is not authenticated keycloak also is not initialized (which makes no sense).
-    if (!authenticated && !window.location.pathname.startsWith('/login'))
+    const isReportInstanceView = /^\/report\/instances\/.*\/view$/.test(window.location.pathname);
+    if (!authenticated && !window.location.pathname.startsWith('/login') && !isReportInstanceView) {
       navigate(`/login?redirectTo=${window.location.pathname}`);
+    }
   }, [authenticated, navigate]);
 
   return (
@@ -125,6 +128,9 @@ export const AppRouter: React.FC<IAppRouter> = ({ name }) => {
           <Route path="clips" element={<RequestClip />} />
           <Route path="transcriptions" element={<TranscriptionList />} />
 
+          {/* Temporary redirect for unauthenticated users accessing report instances */}
+          <Route path="report/instances/:id/view" element={<ReportInstancesRedirect />} />
+
           <Route
             path="report/instances/:id/view"
             element={