Add application cards to homepage for quick navigation upon login

CHANGELOG.md

@@ -6,11 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased (0.8.0)
-- Added support to report on when health API endpoint is not avaialble in navbar and on health dashboard
+- Added support to report on when health API endpoint is not available in navbar and on health dashboard
 - Fixed clickable area of navbar menu items
 - Added support to hard code links for projects/venues
-- Added health check URL to health dashboard
+- Added health check URL to health dashboard [#40](https://github.com/unity-sds/unity-ui/issues/40)
 - Fixed health dashboard column resizer element z-index
+- Added cards to homepage [#38](https://github.com/unity-sds/unity-ui/issues/38)
 
 ## [0.7.0] 2024-09-27
 - Updated node version lts/iron

src/components/Card/index.tsx

@@ -0,0 +1,43 @@
+import { IconExternalLink } from "@nasa-jpl/react-stellar";
+import { Pill } from "../../components/Pill";
+import { Link } from "react-router-dom";
+
+export type CardProps = {
+  description:string;
+  route:string;
+  title:string;
+  type:string;
+  url:string;
+}
+
+export const Card = ({
+  description,
+  route,
+  title,
+  type,
+  url
+}:CardProps) => {
+
+  const onClickExternalHandler = (event:React.SyntheticEvent) => {
+    // Stop Propgation of event to parent card element; otherwise,
+    // the user will be navigated to the parent card route
+    if(event && event.stopPropagation) event.stopPropagation(); 
+  }
+
+  return (
+    <Link to={route}>
+      <span className="unity-card">
+        <span className="header">
+          <span className="title">{title}</span>
+          <span className="icons">
+            <Link to={url} target={"_blank"} onClick={ (e) => {onClickExternalHandler(e)}}><IconExternalLink /></Link>
+          </span>
+        </span>
+        <div className="description">{description}</div>
+        <div className="footer">
+          <Pill label={type}/>
+        </div>
+      </span>
+    </Link>
+  )
+}

src/components/Navbar/index.tsx

@@ -102,7 +102,7 @@ export default function Navbar() {
                             </NavLink>
                           })
                         }
-                        <NavLink to="https://unity-sds.gitbook.io/docs/user-docs/unity-cloud/getting-started" target="_blank">
+                        <NavLink to="https://unity-sds.gitbook.io/docs" target="_blank">
                           <MenuItem>Documentation (Gitbook)</MenuItem>
                         </NavLink>
                         {
@@ -166,7 +166,7 @@ export default function Navbar() {
                             </NavLink>
                           })
                         }
-                        <NavLink to="https://unity-sds.gitbook.io/docs/user-docs/unity-cloud/getting-started" target="_blank">
+                        <NavLink to="https://unity-sds.gitbook.io/docs" target="_blank">
                           <MenuItem>Documentation (Gitbook)</MenuItem>
                         </NavLink>
                         {
@@ -230,7 +230,7 @@ export default function Navbar() {
                    return <NavLink key={index} className="st-react-navbar-link" to={"/applications/" + formatRoute(service.componentName)}>{service.componentName}</NavLink>
                  })
                }
-               <NavLink to="https://unity-sds.gitbook.io/docs/user-docs/unity-cloud/getting-started" target="_blank" className="st-react-navbar-link">{' '}Documentation (Gitbook)</NavLink>
+               <NavLink to="https://unity-sds.gitbook.io/docs" target="_blank" className="st-react-navbar-link">{' '}Documentation (Gitbook)</NavLink>
                {
                 healthApiError && <MenuErrorMessage message={healthApiErrorMessage} />
                }

src/components/Pill/index.tsx

@@ -0,0 +1,11 @@
+export type PillProps = {
+  label:string
+}
+
+export const Pill = ({
+  label
+}:PillProps) => {
+  return (
+    <span className="unity-pill">{label}</span>
+  )
+}

src/index.css

@@ -11,20 +11,8 @@
 }
 
 body {
+  background-color: var(--st-gray-15);
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
-}
-
-.main-view {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-}
-
-.detail-view {
-  height: 100%;
-  min-width: 250px;
-  background-color: var(--unity-white);
-  padding: 8px;
 }

src/routes/errors/not-found/index.tsx

@@ -8,7 +8,7 @@ function NotFound() {
             title="Not Found"
             description="Not Found"
          />
-         <div className="main-view">
+         <div className="unity-main-view">
             <h1>Not Found</h1>
             The requested resource cannot be found
          </div>

src/routes/health-dashboard/index.tsx

@@ -119,7 +119,7 @@ function HealthDashboard() {
   return (
     <>
       <DocumentMeta title="Health Dashboard" description="Health Dashboard" />
-      <div className="main-view">
+      <div className="unity-main-view">
         <h1>Health Dashboard</h1>
         { healthApiError && <Error><IconWarning />{healthApiErrorMessage}</Error> }
         <div className="ag-theme-stellar unity-aggrid-container">

src/routes/home/index.tsx

@@ -1,24 +1,74 @@
-import { DocumentMeta } from "../../components/DocumentMeta/DocumentMeta"
 import Config from "../../Config";
+import { Card } from "../../components/Card";
+
+import { DocumentMeta } from "../../components/DocumentMeta/DocumentMeta";
+import { useAppSelector } from "../../state/hooks";
+import { formatRoute } from "../../utils/strings";
 
 function Home() {
 
   const project = Config['general']['project'];
   const venue = Config['general']['venue'];
 
-   return (
-      <>
-         <DocumentMeta
-            title="Home"
-            description="Home"
-         />
-         <div className="main-view">
-            <h1>Home</h1>
-            <div>Project: <strong>{project}</strong></div>
-            <div>Venue: <strong>{venue}</strong></div>
-         </div>
-      </>
-   )
+  const healthState = useAppSelector((state) => {
+    return state.health;
+  });
+
+  let appCards = healthState.items.map( (item) => {
+    return (
+      <Card
+        description={"Vivamus consequat, tellus vel faucibus dictum, ante nisi."}
+        route={"/applications/" + formatRoute(item.componentName)}
+        title={item.componentName}
+        type={"web"}
+        url={item.landingPageUrl}
+      />
+    )
+  })
+
+  appCards.push(
+    <Card
+      description={`Check the health status of services running in this venue.`}
+      route={"/health-dashboard"}
+      title="Health Dashboard"
+      type={"web"}
+      url={"/health-dashboard"}
+    />,
+    <Card
+      description="Documentation to help become familiar with the Unity platform."
+      route={"https://unity-sds.gitbook.io/docs"}
+      title="Documentation (Gitbook)"
+      type={"web"}
+      url={"https://unity-sds.gitbook.io/docs"}
+    />
+  );
+
+  appCards = appCards.sort( (a, b) => {
+    if( a.props.title < b.props.title ) {
+      return -1;
+    }
+    if( a.props.title > b.props.title ) {
+      return 1;
+    }
+    return 0;
+  });
+
+  return (
+    <>
+      <DocumentMeta
+        title="Home"
+        description="Home"
+      />
+      <div className="unity-main-view">
+        <h1>Home</h1>
+        <div>Project: <strong>{project}</strong></div>
+        <div>Venue: <strong>{venue}</strong></div>
+        <div className="unity-card-container">
+          {appCards}
+        </div>
+      </div>
+    </>
+  )
 }
 
-export default Home
+export default Home;

src/styles/_variables.scss

@@ -1,6 +1,20 @@
 :root {
+
   /* Colors. */
   --unity-black: #000;
   --unity-white: #fff;
-  --unity-brand: #8851CB;
+  --unity-brand: var(--unity-primary-90);
+
+  /* Primary Color Palette. */
+  --unity-primary-100: #46039C;
+  --unity-primary-90: #5809BB;
+  --unity-primary-80: #6B0EE1;
+  --unity-primary-70: #811FFF;
+  --unity-primary-60: #984EFF;
+  --unity-primary-50: #A864FF;
+  --unity-primary-40: #B881FF;
+  --unity-primary-30: #CAA0FF;
+  --unity-primary-20: #E0CAFF;
+  --unity-primary-10: #F0E4FF;
+
 }

src/styles/components/_Cards.scss

@@ -0,0 +1,72 @@
+.unity-card {
+
+  background-color: var(--unity-white);
+  border-color: var(--st-gray-20);
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 324px;
+  padding: 8px 16px 16px 16px;
+
+  &:hover {
+    border-color: var(--unity-brand);
+    transition: border-color 0.2s linear;
+
+    > .header > .icons {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.2s linear;
+    }
+  }
+
+  > .header {
+
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    > .title {
+      color: var(--unity-black);
+      font-size: 1.5em;
+      font-weight: 600;
+      line-height: 32px;
+      word-wrap: break-word;
+    }
+
+    > .icons {
+      display: flex;
+      gap: 8px;
+      opacity: 0;
+      padding-top: 8px;
+      visibility: hidden;
+    }
+
+  }
+
+  > .footer {
+    display: flex;
+    justify-content: flex-start;
+    align-content: flex-start;
+  }
+
+  a {
+    color: var(--unity-primary-80);
+    font-size: 0.75em;
+    font-weight: 400;
+    line-height: 1em;
+    letter-spacing: 0.48;
+    text-decoration: underline;
+    word-wrap: break-word;
+  }
+
+  .description {
+    color: var(--unity-black);
+    font-size: 1em;
+    font-weight: 400;
+    letter-spacing: 0.16;
+    word-wrap: break-word;
+  }
+}

src/styles/components/_Containers.scss

@@ -8,9 +8,38 @@
   display: flex;
   height: 100vh;
   padding: 0px;
-  background-color: #F1F2F3;
+  background-color: var(--st-gray-15);
   flex-grow: 1;
 
+  .unity-main-view {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+  }
+
+  .unity-detail-view {
+    height: 100%;
+    min-width: 250px;
+    background-color: var(--unity-white);
+    padding: 8px;
+  }
+
+  .unity-card-container {
+
+    margin-top: 24px;
+    margin-bottom: 24px;
+    align-content: flex-start;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 24px;
+
+    > a {
+      text-decoration: none;
+    }
+
+  }
+
   &.unity-view-with-status {
     justify-content: center;
     align-items: center;

src/styles/components/_Pills.scss

@@ -0,0 +1,11 @@
+.unity-pill {
+  background-color: var(--st-gray-50);
+  border-radius: 10px;
+  color: var(--st-white);
+  font-size: 0.75em;
+  font-weight: 700;
+  line-height: 100%;
+  padding: 4px 8px;
+  text-transform: uppercase;
+  word-wrap: break-word;
+}

src/styles/styles.scss

@@ -12,6 +12,8 @@
 @import "_variables";
 
 // Components
+@import "components/_Cards";
 @import "components/_Containers";
 @import "components/_Grid";
 @import "components/_Icons";
+@import "components/_Pills";