Semantic URL changes (#401)

* semanticURL changes



---------

Co-authored-by: mashm <[email protected]>
Co-authored-by: Siva Rama Krishna <[email protected]>

Author: 3 people

packages/react-sdk-components/src/components/infra/View/View.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 
 import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 import { getAllFields } from '../../helpers/template-utils';
@@ -18,6 +18,7 @@ interface ViewProps extends PConnProps {
   visibility?: boolean;
   name?: string;
   bInForm?: boolean;
+  type?: any;
 }
 
 //
@@ -41,21 +42,53 @@ const NO_HEADER_TEMPLATES = [
 ];
 
 export default function View(props: PropsWithChildren<ViewProps>) {
-  const { children, template, getPConnect, mode, visibility, name: pageName } = props;
+  const { children, template, getPConnect, mode, visibility, name: pageName, type, title } = props;
   let { label = '', showLabel = false } = props;
+  const { PAGE_TYPES: { PAGE, LANDINGPAGE, LISTPAGE } = {}, MODAL } = PCore.getConstants();
 
   // Get the inherited props from the parent to determine label settings. For 8.6, this is only for embedded data form views
   // Putting this logic here instead of copy/paste in every Form template index.js
 
   const inheritedProps: any = getPConnect().getInheritedProps(); // try to remove any when getInheritedProps typedefs are fixed
   label = inheritedProps.label || label;
   showLabel = inheritedProps.showLabel || showLabel;
+  const localeUtils = PCore.getLocaleUtils();
 
   const isEmbeddedDataView = mode === 'editable'; // would be better to check the reference child for `context` attribute if possible
   if (isEmbeddedDataView && showLabel === undefined) {
     showLabel = true;
   }
 
+  useEffect(() => {
+    // Get the localized application label
+    let applicationLabel = PCore.getEnvironmentInfo().getApplicationLabel();
+    applicationLabel = localeUtils.getLocaleValue(`${applicationLabel}`, '', '');
+    const caseInfo = getPConnect().getCaseInfo();
+    const isAssignmentInCreateStage = caseInfo && caseInfo.isAssignmentInCreateStage();
+    const isRenderingInModal = getPConnect().getContainerName().includes(MODAL);
+    const isRenderingInPreviewPanel = getPConnect().getContainerName().includes('preview');
+
+    /* If assignment is in create stage and rendering in modal don't update the title.
+      Title will be updated on completion of create stage and when the assignment is rendered inline to the page.
+    */
+    const canUpdateTitle =
+      !isRenderingInPreviewPanel &&
+      (type === PAGE || type === LANDINGPAGE || type === LISTPAGE) &&
+      !(isRenderingInModal && isAssignmentInCreateStage) &&
+      PCore.getEnvironmentInfo().getRenderingMode() === 'FULL_PORTAL';
+    // Incase of home route title is same as applicationLabel so setting to empty to just show applicationLabel
+    let titleVar = title === applicationLabel ? '' : title;
+
+    if (canUpdateTitle) {
+      if (caseInfo) {
+        const name = caseInfo.getName();
+        const id = caseInfo.getBusinessID();
+        titleVar = name && id ? `${name} (${id})` : titleVar;
+      }
+      document.title = titleVar ? `${titleVar} - ${applicationLabel}` : applicationLabel;
+    }
+  }, [type, title, getPConnect, PAGE, LANDINGPAGE, LISTPAGE]);
+
   const key = `${getPConnect().getContextName()}_${getPConnect().getPageReference()}_${pageName}`;
   // As long as the template is defined in the dependencies of the view
   // it will be loaded, otherwise fall back to single column

packages/react-sdk-components/src/samples/AppSelector/index.tsx

@@ -23,6 +23,7 @@ const AppSelector = () => {
         <Route path={`${baseURL}embedded.html`} element={<EmbeddedTopLevel />} />
         <Route path={`${baseURL}portal`} element={<FullPortal />} />
         <Route path={`${baseURL}portal.html`} element={<FullPortal />} />
+        <Route path={`${baseURL}prweb/*`} element={<FullPortal />} />
         <Route path='*' element={<EmbeddedTopLevel />} />
       </Routes>
     </div>

packages/react-sdk-components/src/samples/FullPortal/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 import { useEffect, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -118,7 +119,6 @@ export default function FullPortal() {
       // Initialize the SdkComponentMap (local and pega-provided)
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       getSdkComponentMap(localSdkComponentMap).then((theComponentMap: any) => {
-        // eslint-disable-next-line no-console
         console.log(`SdkComponentMap initialized`);
 
         // Don't call initialRender until SdkComponentMap is fully initialized
@@ -137,15 +137,12 @@ export default function FullPortal() {
     if (queryPortal) {
       myLoadPortal('pega-root', queryPortal, []);
     } else if (thePortal) {
-      // eslint-disable-next-line no-console
       console.log(`Loading specified appPortal: ${thePortal}`);
       myLoadPortal('pega-root', thePortal, []);
     } else if (myLoadDefaultPortal && defaultPortal && !excludePortals.includes(defaultPortal)) {
-      // eslint-disable-next-line no-console
       console.log(`Loading default portal`);
       myLoadDefaultPortal('pega-root', []);
     } else {
-      // eslint-disable-next-line no-console
       console.log('Loading portal selection screen');
       setPortalSelectionScreen(true);
       setDefaultPortalName(defaultPortal);
@@ -162,31 +159,42 @@ export default function FullPortal() {
   }
 
   function doRedirectDone() {
-    navigate(window.location.pathname);
+    const redirectUrl: any = sessionStorage.getItem('url');
+    navigate(redirectUrl);
+    sessionStorage.removeItem('url');
     let localeOverride: any = sessionStorage.getItem('rsdk_locale');
     if (!localeOverride) {
       localeOverride = undefined;
     }
     // appName and mainRedirect params have to be same as earlier invocation
-    loginIfNecessary({ appName: 'portal', mainRedirect: true, locale: localeOverride });
+    loginIfNecessary({ appName: 'portal', mainRedirect: true, locale: localeOverride, enableSemanticUrls: true });
   }
 
   // One time (initialization)
   useEffect(() => {
     document.addEventListener('SdkConstellationReady', () => {
       // start the portal
+      sessionStorage.setItem('isLoggedIn', 'true');
       startPortal();
     });
     let localeOverride: any = sessionStorage.getItem('rsdk_locale');
     if (!localeOverride) {
       localeOverride = undefined;
     }
+    const isLoggedIn = sessionStorage.getItem('isLoggedIn');
+    const redirected = sessionStorage.getItem('redirected');
+    if (isLoggedIn !== 'true' && redirected !== 'true') {
+      sessionStorage.setItem('url', window.location.pathname);
+      navigate('/portal');
+    }
+    sessionStorage.setItem('redirected', 'true');
     // Login if needed, doing an initial main window redirect
     loginIfNecessary({
       appName: 'portal',
       mainRedirect: true,
       redirectDoneCB: doRedirectDone,
-      locale: localeOverride
+      locale: localeOverride,
+      enableSemanticUrls: true
     });
   }, []);
 

packages/react-sdk-components/src/samples/TopLevelApp/index.tsx

@@ -18,7 +18,10 @@ document.addEventListener('SdkLoggedOut', () => {
     theLogoutMsgDiv.innerHTML = `You are logged out. Refresh the page to log in again.`;
     thePegaRoot.appendChild(theLogoutMsgDiv);
   }
+  sessionStorage.removeItem('isLoggedIn');
+  sessionStorage.removeItem('redirected');
   sessionStorage.removeItem('rsdk_portalName');
+  window.location.href = `${window.location.origin}/portal`;
 });
 
 export default TopLevelApp;