Updated how links are opened for UI applications based on the newly added isPortalIntegrated flag

src/Config.tsx

@@ -47,6 +47,7 @@ const Config:Config = {
           description: "Check the health status of services running in this venue.",
           healthChecks: [],
           healthCheckUrl: "",
+          isPortalIntegrated: true,
           landingPageUrl: "/health-dashboard",
           nativeRoute: true,
           reportHealthStatus: false,
@@ -60,6 +61,7 @@ const Config:Config = {
           description: "Documentation to help become familiar with the Unity platform.",
           healthChecks: [],
           healthCheckUrl: "",
+          isPortalIntegrated: true,
           landingPageUrl: "https://unity-sds.gitbook.io/docs",
           nativeRoute: true,
           reportHealthStatus: false,

src/components/Card/index.tsx

@@ -3,6 +3,7 @@ import { Pill } from "../../components/Pill";
 import { Link } from "react-router-dom";
 
 export type CardProps = {
+  alwaysOpenInNewWindow:boolean;
   description:string;
   route:string;
   title:string;
@@ -11,6 +12,7 @@ export type CardProps = {
 }
 
 export const Card = ({
+  alwaysOpenInNewWindow,
   description,
   route,
   title,
@@ -25,7 +27,7 @@ export const Card = ({
   }
 
   return (
-    <Link to={route}>
+    <Link to={alwaysOpenInNewWindow ? url : route} target={alwaysOpenInNewWindow ? "_blank" : "_self"}>
       <span className="mdps-card">
         <span className="header">
           <span className="title">{title}</span>

src/components/Navbar/index.tsx

@@ -61,7 +61,13 @@ export default function Navbar() {
 
   }, [healthState]);
 
+  const getLinkUrl = (isPortalIntegrated:boolean, internalLinkUrl:string, externalLinkUrl:string) => {
+    return isPortalIntegrated ? internalLinkUrl : externalLinkUrl
+  }
 
+  const getLinkTarget = (isPortalIntegrated:boolean):string => {
+    return isPortalIntegrated ? "_self" : "_blank";
+  }
 
   return (
     <StellarNavbar mobileBreakpoint={800}>
@@ -95,7 +101,7 @@ export default function Navbar() {
               <NavLink to="/"><MenuItem>Home</MenuItem></NavLink>
               {
                 uiItems.map( (service, index) => {
-                  return <NavLink to={service.route} key={index}>
+                  return <NavLink to={ getLinkUrl(service.isPortalIntegrated, service.route, service.landingPageUrl) } target={ getLinkTarget(service.isPortalIntegrated) } key={index}>
                     <MenuItem>{service.componentName}</MenuItem>
                   </NavLink>
                 })
@@ -157,7 +163,7 @@ export default function Navbar() {
               <NavLink to="/"><MenuItem>Home</MenuItem></NavLink>
               {
                 uiItems.map( (service, index) => {
-                  return <NavLink to={service.route} key={index}>
+                  return <NavLink to={ getLinkUrl(service.isPortalIntegrated, service.route, service.landingPageUrl) } target={ getLinkTarget(service.isPortalIntegrated) } key={index}>
                     <MenuItem>{service.componentName}</MenuItem>
                   </NavLink>
                 })
@@ -228,7 +234,7 @@ export default function Navbar() {
         <NavLink to="/" className="st-react-navbar-link"><IconHome />{' '}Home</NavLink>
         {
           uiItems.map( (service, index) => {
-            return <NavLink key={index} className="st-react-navbar-link" to={service.route}>{service.componentName}</NavLink>
+            return <NavLink to={ getLinkUrl(service.isPortalIntegrated, service.route, service.landingPageUrl) } target={ getLinkTarget(service.isPortalIntegrated)} className="st-react-navbar-link" key={index}>{service.componentName}</NavLink>
           })
         }
         {

src/routes/home/index.tsx

@@ -14,6 +14,7 @@ function Home() {
   const appCards = uiItems.map( (item) => {
     return (
       <Card
+        alwaysOpenInNewWindow={!item.isPortalIntegrated}
         description={item.description}
         route={item.route}
         title={item.componentName}

src/state/slices/healthSlice.ts

@@ -21,6 +21,7 @@ export type Service = {
   description:string;
   healthChecks: Array<HealthCheck>;
   healthCheckUrl:string;
+  isPortalIntegrated:boolean;
   landingPageUrl:string;
   nativeRoute:boolean;
   reportHealthStatus:boolean;
@@ -88,11 +89,18 @@ const healthSlice = createSlice({
       const data = Config.general.defaultRoutes;
 
       // Add portal route for each application
-      action.payload.forEach( (service:Service) => {
+      action.payload.forEach( (service:Service, index:number) => {
+
         service.nativeRoute = false;
         service.route = "/applications/" + formatRoute(service.componentName);
         service.reportHealthStatus = true;
+
+        if( !("isPortalIntegrated" in action.payload[index]) ) {
+          service.isPortalIntegrated = false;
+        }
+
         data.push(service);
+
       })
 
       // sort services alphabetically by their componentName