Newui4 (#2048)

* new about page

* h2 for second biggest header

* save and close goes to newui

* Create custom tab goes to coming soon page

* logo obviously links to home on same site, not old site

* link to switch to classic site

* lint

---------

Co-authored-by: burnettk <burnettk@users.noreply.github.com>

spiffworkflow-frontend/src/a-spiffui-v3/components/HeaderTabs.tsx

@@ -58,7 +58,7 @@ export default function HeaderTabs({ value, onChange }: HeaderTabsProps) {
               },
             },
           }}
-          onClick={() => navigate('/create-custom-tab')}
+          onClick={() => navigate('/newui/create-custom-tab')}
         />
       </Tabs>
     </Box>

spiffworkflow-frontend/src/a-spiffui-v3/components/SideNav.tsx

@@ -70,7 +70,7 @@ function SideNav({
   let aboutLinkElement = null;
   if (Object.keys(versionInfo).length) {
     aboutLinkElement = (
-      <MuiLink component={Link} to="/about">
+      <MuiLink component={Link} to="/newui/about">
         About
       </MuiLink>
     );
@@ -143,7 +143,7 @@ function SideNav({
               color={mainBlue}
               sx={{ fontWeight: 'bold', display: 'flex', alignItems: 'center' }}
             >
-              <MuiLink component={Link} to="/">
+              <MuiLink component={Link} to="/newui">
                 <SpiffLogo />
               </MuiLink>
             </Typography>
@@ -223,9 +223,8 @@ function SideNav({
             gap: isCollapsed ? 0 : 1,
           }}
         >
-          <Tooltip
+          <SpiffTooltip
             title="User Actions"
-            arrow
             placement={isCollapsed ? 'right' : 'top'}
           >
             <IconButton
@@ -235,7 +234,7 @@ function SideNav({
             >
               <Person />
             </IconButton>
-          </Tooltip>
+          </SpiffTooltip>
           <SpiffTooltip
             title="Toggle dark mode"
             placement={isCollapsed ? 'right' : 'top'}
@@ -244,6 +243,14 @@ function SideNav({
               {isDark ? <Brightness7 /> : <Brightness4 />}
             </IconButton>
           </SpiffTooltip>
+          <SpiffTooltip
+            title="Switch to Classic UI"
+            placement={isCollapsed ? 'right' : 'top'}
+          >
+            <IconButton aria-label="Switch Site" onClick={() => navigate('/')}>
+              <Home />
+            </IconButton>
+          </SpiffTooltip>
         </Box>
       </Box>
       {showUserProfile && (

spiffworkflow-frontend/src/a-spiffui-v3/views/About.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Paper,
+} from '@mui/material';
+import appVersionInfo from '../../helpers/appVersionInfo';
+import { ObjectWithStringKeysAndValues } from '../../interfaces';
+import HttpService from '../../services/HttpService';
+
+function About() {
+  const frontendVersionInfo = appVersionInfo();
+  const [backendVersionInfo, setBackendVersionInfo] =
+    useState<ObjectWithStringKeysAndValues | null>(null);
+
+  useEffect(() => {
+    const handleVersionInfoResponse = (
+      response: ObjectWithStringKeysAndValues,
+    ) => {
+      setBackendVersionInfo(response);
+    };
+
+    HttpService.makeCallToBackend({
+      path: `/debug/version-info`,
+      successCallback: handleVersionInfoResponse,
+    });
+  }, []);
+
+  const versionInfoFromDict = (
+    title: string,
+    versionInfoDict: ObjectWithStringKeysAndValues | null,
+  ) => {
+    if (versionInfoDict !== null && Object.keys(versionInfoDict).length) {
+      const tableRows = Object.keys(versionInfoDict)
+        .sort()
+        .map((key) => (
+          <TableRow key={key}>
+            <TableCell>
+              <strong>{key}</strong>
+            </TableCell>
+            <TableCell>{versionInfoDict[key]}</TableCell>
+          </TableRow>
+        ));
+      return (
+        <Box>
+          <Typography variant="h2" gutterBottom>
+            {title}
+          </Typography>
+          <TableContainer component={Paper}>
+            <Table>
+              <TableBody>{tableRows}</TableBody>
+            </Table>
+          </TableContainer>
+        </Box>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <Box p={3}>
+      <Typography variant="h1" gutterBottom>
+        About
+      </Typography>
+      {versionInfoFromDict('Frontend version information', frontendVersionInfo)}
+      {versionInfoFromDict('Backend version information', backendVersionInfo)}
+    </Box>
+  );
+}
+
+export default About;

spiffworkflow-frontend/src/a-spiffui-v3/views/Homepage.tsx

@@ -142,7 +142,7 @@ function Homepage({
         const groupText = isMe ? 'me' : groupName;
         return (
           <Box key={groupName} sx={{ mb: 2 }}>
-            <Typography variant="h6" sx={{ fontWeight: 'normal' }}>
+            <Typography variant="h2" sx={{ fontWeight: 'normal' }}>
               {headerText}
               <Box component="span" sx={{ color: 'text.accent' }}>
                 {groupText}

spiffworkflow-frontend/src/a-spiffui-v3/views/TaskShow/TaskShow.tsx

@@ -255,7 +255,7 @@ export default function TaskShow() {
   const handleCloseButton = () => {
     setAutosaveOnFormChanges(false);
     setFormButtonsDisabled(true);
-    const successCallback = () => navigate(`/tasks`);
+    const successCallback = () => navigate(`/newui`);
     sendAutosaveEvent({ successCallback });
   };
 

spiffworkflow-frontend/src/components/ComingSoon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Box, Typography, Link as MuiLink } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+function ComingSoon() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100vh',
+      }}
+    >
+      <Typography variant="h1" gutterBottom>
+        Coming Soon
+      </Typography>
+      <Typography variant="h6">This feature will be available soon.</Typography>
+      <MuiLink component={Link} to="/newui" variant="h6" sx={{ mt: 2 }}>
+        Go back home
+      </MuiLink>
+    </Box>
+  );
+}
+
+export default ComingSoon;

spiffworkflow-frontend/src/index.css

@@ -936,17 +936,20 @@ fieldset fieldset fieldset legend.header {
 .limited-width-for-readability,
 p,
 li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 blockquote,
 hr {
   max-width: 640px;
 }
 
+.cds--white h1,
+.cds--white h2,
+.cds--white h3,
+.cds--white h4,
+.cds--white h5,
+.cds--white h6 {
+  max-width: 640px;
+}
+
 li.cds--accordion__item {
   max-width: 100%;
 }

spiffworkflow-frontend/src/routes/SpiffUIV3.tsx

@@ -25,7 +25,9 @@ import TaskShow from '../a-spiffui-v3/views/TaskShow/TaskShow';
 import ProcessInterstitialPage from '../a-spiffui-v3/views/TaskShow/ProcessInterstitialPage';
 import ProcessInstanceProgressPage from '../a-spiffui-v3/views/TaskShow/ProcessInstanceProgressPage';
 import ErrorDisplay from '../components/ErrorDisplay';
+import About from '../a-spiffui-v3/views/About';
 import useAPIError from '../hooks/UseApiError';
+import ComingSoon from '../components/ComingSoon';
 
 const fadeIn = 'fadeIn';
 const fadeOutImmediate = 'fadeOutImmediate';
@@ -189,6 +191,7 @@ export default function SpiffUIV3() {
             >
               <ErrorDisplay />
               <Routes>
+                <Route path="/about" element={<About />} />
                 <Route
                   path="/"
                   element={
@@ -213,6 +216,7 @@ export default function SpiffUIV3() {
                   element={<StartProcessInstance />}
                 />
                 <Route path="login" element={<Login />} />
+                <Route path="/create-custom-tab" element={<ComingSoon />} />
                 <Route
                   path="/tasks/:process_instance_id/:task_guid"
                   element={<TaskShow />}