modify notification banners

Author: JooNiv

content/_data/constants.yml

@@ -104,12 +104,11 @@ cookie_consent:
       title: CSC Quantum Computing docs.
       href: https://docs.csc.fi/computing/quantum-computing/overview/
 
-  resource_estimator:
-    text: |-
-      For estimating the runtime of a quantum job try out the 
-    link:
-      title: FiQCI QPU resource estimator
-      href: https://fiqci.fi/resource-estimator
+  alerts:
+    - text: |-
+        For estimating the runtime of a quantum job try out the FiQCI QPU resource estimator.
+      type: info
+      link: "https://fiqci.fi/resource-estimator"
 
   quantum_resources:
     - name: Aalto Q20
@@ -252,6 +251,10 @@ cookie_consent:
       title: here
       href: https://www.lumi-supercomputer.eu/lumi-service-status/
   alerts: # Each alert renders as its own banner. type can be info, warning, or error
+    - text: |-
+        For estimating the runtime of a quantum job try out the FiQCI QPU resource estimator.
+      type: info
+      link: "https://fiqci.fi/resource-estimator"
     - text: |-
         Aalto Q20 access is coming soon!
       type: info

src/components/AlertBanner.jsx

@@ -0,0 +1,35 @@
+import { mdiInformation, mdiClose, mdiAlert, mdiChevronRight } from '@mdi/js';
+import { CCard, CCardTitle, CCardContent, CIcon, CButton, CSelect } from '@cscfi/csc-ui-react';
+
+const ALERT_STYLES = {
+  warning: { bg: 'bg-orange-200', icon: mdiAlert },
+  error: { bg: 'bg-red-200', icon: mdiClose },
+  info: { bg: 'bg-sky-200', icon: mdiInformation },
+};
+
+export const AlertBanner = ({ type, text, link }) => {
+  const { bg, icon } = ALERT_STYLES[type?.toLowerCase()] ?? ALERT_STYLES.info;
+  const content = (
+    <>
+      <CIcon key={icon} path={icon} />
+      <p className='text-[16px]'>
+        {type ? text : 'Loading...'}
+      </p>
+      {link ? <CIcon path={mdiChevronRight} className='ml-auto' /> : null}
+    </>
+  );
+
+  if (link) {
+    return (
+      <a href={link} className={`flex flex-row gap-4 w-full p-3 rounded-md ${bg} items-start sm:items-center cursor-pointer hover:shadow-md hover:opacity-90 transition-all`}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <div className={`flex flex-row gap-4 w-full p-3 rounded-md ${bg} items-start sm:items-center`}>
+      {content}
+    </div>
+  );
+};

src/components/GetAccess.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import { prependBaseURL } from '../utils/url';
+import { AlertBanner } from './AlertBanner.jsx';
 
 const ResourceCard = ({ resource }) => {
     return (
@@ -47,6 +48,8 @@ export const GetAccess = props => {
     const emulation_resources = props?.emulation_resources
     const getting_started = props?.getting_started
 
+    const alerts = props.alerts ?? (props.alert ? [props.alert] : []);
+
     const resource_estimator = props?.resource_estimator
 
     useEffect(() => {
@@ -79,10 +82,17 @@ export const GetAccess = props => {
                     <p className="pt-4">{getting_started?.text} <a className="text-base text-sky-800 hover:underline" href={getting_started?.link.href}>{getting_started?.link.title}</a></p>
 
                     <p className="pt-4">Please see status of services from <a className="text-base text-sky-800 hover:underline" href={prependBaseURL("/status")}>Status</a> -page.</p>
-
-                    <p className="pt-4"> {resource_estimator?.text} <a className="text-sky-800 hover:underline" href={resource_estimator?.link.href}>{resource_estimator?.link.title}</a>. </p>
                 </div>
 
+                {alerts.length > 0 && (
+                    <div className='flex flex-col gap-3'>
+                    {alerts.map((alert, index) => (
+                        <AlertBanner key={index} {...alert} />
+                    ))}
+                    </div>
+                )}
+            
+
                 <ResourceList id={"quantum"} title={"Quantum computer resources"} resources={quantum_resources} />
 
                 <ResourceList id={"super"} title={"Supercomputer resources"} resources={supercomputer_resources} />

src/components/ServiceStatus.jsx

@@ -7,24 +7,7 @@ import { CCard, CCardTitle, CCardContent, CIcon, CButton, CSelect } from '@cscfi
 import { StatusModal } from './StatusModal/StatusModal';
 import { BookingModal } from './bookingCalendar.jsx';
 import { API_BASE_URL } from '../config/api.js';
-
-const ALERT_STYLES = {
-  warning: { bg: 'bg-orange-200', icon: mdiAlert },
-  error: { bg: 'bg-red-200', icon: mdiClose },
-  info: { bg: 'bg-sky-200', icon: mdiInformation },
-};
-
-const AlertBanner = ({ type, text }) => {
-  const { bg, icon } = ALERT_STYLES[type?.toLowerCase()] ?? ALERT_STYLES.info;
-  return (
-    <div className={`flex flex-row gap-4 w-full p-3 rounded-md ${bg} items-start sm:items-center`}>
-      <CIcon key={icon} path={icon} />
-      <p className='text-[16px]'>
-        {type ? text : 'Loading...'}
-      </p>
-    </div>
-  );
-};
+import { AlertBanner } from './AlertBanner.jsx';
 
 const StatusCard = (props) => {
   const isOnline = props.health;