Add Footer to workshop user interface (#551)

catalog/ui/src/app/Workshop/Workshop.tsx

@@ -1,17 +1,21 @@
 import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { Page } from '@patternfly/react-core';
 import { workshopLogin, WorkshopDetails } from './workshopApi';
 import WorkshopAccess from './WorkshopAccess';
 import WorkshopHeader from './WorkshopHeader';
 import WorkshopLogin from './WorkshopLogin';
 import useSWRImmutable from 'swr/immutable';
 import { apiPaths, fetcher } from './workshop-utils';
+import Footer from '@app/components/Footer';
+import summitLogo from '@app/bgimages/Summit-Logo.svg';
 
 import './workshop.css';
 
 const Workshop: React.FC = () => {
   const { workshopId } = useParams();
+  const { search } = useLocation();
+  const userInterface = new URLSearchParams(search).get('userInterface');
   const [loginFailureMessage, setLoginFailureMessage] = useState('');
   const { data: workshop } = useSWRImmutable<WorkshopDetails>(
     workshopId ? apiPaths.WORKSHOP({ workshopId }) : null,
@@ -37,23 +41,28 @@ const Workshop: React.FC = () => {
     }
   }
 
-  if (workshopPrivateInfo.assignment) {
-    return (
-      <Page header={<WorkshopHeader />} className="workshop__page">
+  return (
+    <Page header={<WorkshopHeader userInterface={userInterface} />} style={{ backgroundColor: '#fff' }}>
+      {workshopPrivateInfo.assignment ? (
         <WorkshopAccess workshop={workshopPrivateInfo} />
-      </Page>
-    );
-  } else {
-    return (
-      <Page header={<WorkshopHeader />} className="workshop__page">
+      ) : (
         <WorkshopLogin
           loginFailureMessage={loginFailureMessage}
           onLogin={(email, accessPassword) => attemptLogin(email, accessPassword)}
           workshop={workshop}
         />
-      </Page>
-    );
-  }
+      )}
+      <Footer
+        rightElement={
+          userInterface === 'summit' ? (
+            <a href="https://www.redhat.com/summit">
+              <img src={summitLogo} alt="Red Hat Summit" width="72px" />
+            </a>
+          ) : null
+        }
+      />
+    </Page>
+  );
 };
 
 export default Workshop;

catalog/ui/src/app/Workshop/WorkshopAccess.tsx

@@ -13,16 +13,15 @@ import {
   Title,
 } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { WorkshopSpecUserAssignment } from '@app/types';
 import { renderContent } from '@app/util';
 import { WorkshopDetails } from './workshopApi';
 
 const WorkshopAccess: React.FC<{
   workshop: WorkshopDetails;
 }> = ({ workshop }) => {
-  const description: string = workshop.description;
-  const displayName: string = workshop.displayName || 'Workshop';
-  const userAssignment: WorkshopSpecUserAssignment = workshop.assignment;
+  const description = workshop.description;
+  const displayName = workshop.displayName || 'Workshop';
+  const userAssignment = workshop.assignment;
 
   return (
     <PageSection variant={PageSectionVariants.light} className="workshop">

catalog/ui/src/app/Workshop/WorkshopHeader.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
 import { PageHeader } from '@patternfly/react-core';
 import UserInterfaceLogo from '@app/components/UserInterfaceLogo';
 import summitLogo from '@app/bgimages/Summit-Logo.svg';
 import redHatLogo from '@app/bgimages/RedHat-Logo.svg';
 
-const WorkshopHeader: React.FC = () => {
-  const { search } = useLocation();
-  const userInterface = new URLSearchParams(search).get('userInterface');
+const WorkshopHeader: React.FC<{ userInterface: string }> = ({ userInterface }) => {
   function LogoImg() {
     if (userInterface === 'summit') {
       return (

catalog/ui/src/app/Workshop/workshop.css

@@ -4,7 +4,6 @@
 .workshop-login-failure {
   color: var(--pf-global--danger-color--200);
 }
-
 .workshop-login-form.pf-c-form {
   width: 300px;
 }

catalog/ui/src/app/components/Footer.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+import redHatLogo from '@app/bgimages/RedHat-Logo.svg';
+
+import './footer.css';
+
+const Footer: React.FC<{ rightElement: ReactNode }> = ({ rightElement }) => (
+  <section className="footer-component">
+    <div className="footer__container">
+      <div className="footer__left">
+        <a href="https://www.redhat.com">
+          <img src={redHatLogo} title="Red Hat" width={138} />
+        </a>
+      </div>
+      <div id="legal" className="footer__legal">
+        <div className="copyright">© 2022 Red Hat, Inc.</div>
+        <div>
+          <ul className="menu">
+            <li className="first leaf">
+              <a href="https://www.redhat.com/en/about/privacy-policy" target="_blank" rel="noreferrer">
+                Privacy statement
+              </a>
+            </li>
+            <li className="leaf">
+              <a href="https://www.redhat.com/en/about/terms-use" target="_blank" rel="noreferrer">
+                Terms of use
+              </a>
+            </li>
+            <li className="leaf">
+              <a href="https://www.redhat.com/en/about/all-policies-guidelines" target="_blank" rel="noreferrer">
+                All policies and guidelines
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="footer__right">{rightElement ? rightElement : null}</div>
+    </div>
+  </section>
+);
+
+export default Footer;

catalog/ui/src/app/components/footer.css

@@ -0,0 +1,40 @@
+.footer-component {
+  background-color: #1a1a1a;
+  margin-top: auto;
+}
+.footer__container {
+  max-width: 1140px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+  padding: var(--pf-global--spacer--md) 0;
+}
+.footer__legal {
+  flex: 1 0 60%;
+  line-height: 2;
+  align-items: center;
+  justify-content: center;
+  color: #aaa;
+  font-size: 12px;
+  display: flex;
+  flex-direction: row;
+  gap: var(--pf-global--spacer--xl);
+}
+.footer__legal ul {
+  display: flex;
+  flex-direction: row;
+  gap: var(--pf-global--spacer--md);
+}
+.footer__legal a {
+  text-decoration: underline;
+  color: #aaa;
+}
+.footer__legal a:after {
+  content: '|';
+  display: inline-block;
+  margin-left: var(--pf-global--spacer--md);
+}
+.footer__legal li:last-child a:after {
+  display: none;
+}