From fa1838aa41d45c585e7db882d723646fd007b6ba Mon Sep 17 00:00:00 2001 From: Kevin Burnett <18027+burnettk@users.noreply.github.com> Date: Sat, 17 Aug 2024 16:00:43 +0000 Subject: [PATCH] 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 --- .../a-spiffui-v3/components/HeaderTabs.tsx | 2 +- .../src/a-spiffui-v3/components/SideNav.tsx | 17 +++-- .../src/a-spiffui-v3/views/About.tsx | 76 +++++++++++++++++++ .../src/a-spiffui-v3/views/Homepage.tsx | 2 +- .../a-spiffui-v3/views/TaskShow/TaskShow.tsx | 2 +- .../src/components/ComingSoon.tsx | 27 +++++++ spiffworkflow-frontend/src/index.css | 15 ++-- .../src/routes/SpiffUIV3.tsx | 4 + 8 files changed, 131 insertions(+), 14 deletions(-) create mode 100644 spiffworkflow-frontend/src/a-spiffui-v3/views/About.tsx create mode 100644 spiffworkflow-frontend/src/components/ComingSoon.tsx diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/components/HeaderTabs.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/components/HeaderTabs.tsx index ffa89cbb5..b86181b96 100644 --- a/spiffworkflow-frontend/src/a-spiffui-v3/components/HeaderTabs.tsx +++ b/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')} /> diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/components/SideNav.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/components/SideNav.tsx index 1108879fd..70fefa70a 100644 --- a/spiffworkflow-frontend/src/a-spiffui-v3/components/SideNav.tsx +++ b/spiffworkflow-frontend/src/a-spiffui-v3/components/SideNav.tsx @@ -70,7 +70,7 @@ function SideNav({ let aboutLinkElement = null; if (Object.keys(versionInfo).length) { aboutLinkElement = ( - + About ); @@ -143,7 +143,7 @@ function SideNav({ color={mainBlue} sx={{ fontWeight: 'bold', display: 'flex', alignItems: 'center' }} > - + @@ -223,9 +223,8 @@ function SideNav({ gap: isCollapsed ? 0 : 1, }} > - - + : } + + navigate('/')}> + + + {showUserProfile && ( diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/views/About.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/views/About.tsx new file mode 100644 index 000000000..b81cb075e --- /dev/null +++ b/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(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) => ( + + + {key} + + {versionInfoDict[key]} + + )); + return ( + + + {title} + + + + {tableRows} +
+ + + ); + } + return null; + }; + + return ( + + + About + + {versionInfoFromDict('Frontend version information', frontendVersionInfo)} + {versionInfoFromDict('Backend version information', backendVersionInfo)} + + ); +} + +export default About; diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/views/Homepage.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/views/Homepage.tsx index 3b1e0b52e..1271b54f4 100644 --- a/spiffworkflow-frontend/src/a-spiffui-v3/views/Homepage.tsx +++ b/spiffworkflow-frontend/src/a-spiffui-v3/views/Homepage.tsx @@ -142,7 +142,7 @@ function Homepage({ const groupText = isMe ? 'me' : groupName; return ( - + {headerText} {groupText} diff --git a/spiffworkflow-frontend/src/a-spiffui-v3/views/TaskShow/TaskShow.tsx b/spiffworkflow-frontend/src/a-spiffui-v3/views/TaskShow/TaskShow.tsx index 5d96200b3..9b633fa6d 100644 --- a/spiffworkflow-frontend/src/a-spiffui-v3/views/TaskShow/TaskShow.tsx +++ b/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 }); }; diff --git a/spiffworkflow-frontend/src/components/ComingSoon.tsx b/spiffworkflow-frontend/src/components/ComingSoon.tsx new file mode 100644 index 000000000..11ebc6a0c --- /dev/null +++ b/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 ( + + + Coming Soon + + This feature will be available soon. + + Go back home + + + ); +} + +export default ComingSoon; diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css index cfa25abad..2ac5fbd0b 100644 --- a/spiffworkflow-frontend/src/index.css +++ b/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%; } diff --git a/spiffworkflow-frontend/src/routes/SpiffUIV3.tsx b/spiffworkflow-frontend/src/routes/SpiffUIV3.tsx index b54499136..f4abef860 100644 --- a/spiffworkflow-frontend/src/routes/SpiffUIV3.tsx +++ b/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() { > + } /> } /> } /> + } /> }