diff --git a/spiffworkflow-frontend/src/components/NavigationBar.tsx b/spiffworkflow-frontend/src/components/NavigationBar.tsx index 98eb8d828..0659de415 100644 --- a/spiffworkflow-frontend/src/components/NavigationBar.tsx +++ b/spiffworkflow-frontend/src/components/NavigationBar.tsx @@ -31,6 +31,7 @@ import { DOCUMENTATION_URL, SPIFF_ENVIRONMENT } from '../config'; import appVersionInfo from '../helpers/appVersionInfo'; import { slugifyString } from '../helpers'; import ExtensionUxElementForDisplay from './ExtensionUxElementForDisplay'; +import SpiffTooltip from './SpiffTooltip'; type OwnProps = { extensionUxElements?: UiSchemaUxElement[] | null; @@ -192,12 +193,14 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) { {(secretAllowed: boolean) => { if (secretAllowed || authenticationAllowed) { return ( - - Configuration - + + + Configuration + + ); } return null; @@ -216,13 +219,15 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) { setActiveKey(navItemPage); } return ( - - {uxElement.label} - + + + {uxElement.label} + + ); }; @@ -232,45 +237,55 @@ export default function NavigationBar({ extensionUxElements }: OwnProps) { } return ( <> - - Home - - - - Processes + + +
Home
 + + + + + Processes + + - - Process Instances - + + + Process Instances + + - - Messages - + + + Messages + + - - Data Stores - + + + Data Stores + + {configurationElement()} - { - navigate('/process-instances/for-me'); - }} - > - For Me - - + { - navigate('/process-instances/all'); + navigate('/process-instances/for-me'); }} > - All + For Me + + + + { + navigate('/process-instances/all'); + }} + > + All + + - { - navigate('/process-instances/find-by-id'); - }} - > - Find By Id - + + { + navigate('/process-instances/find-by-id'); + }} + > + Find By Id + + ); diff --git a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx index a2a9b0fe6..b56eec234 100644 --- a/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx +++ b/spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx @@ -38,7 +38,6 @@ import 'dmn-js-properties-panel/dist/assets/properties-panel.css'; import spiffworkflow from 'bpmn-js-spiffworkflow/app/spiffworkflow'; import 'bpmn-js-spiffworkflow/app/css/app.css'; -// @ts-expect-error TS(7016) FIXME import spiffModdleExtension from 'bpmn-js-spiffworkflow/app/spiffworkflow/moddle/spiffworkflow.json'; // @ts-expect-error TS(7016) FIXME diff --git a/spiffworkflow-frontend/src/components/SpiffTabs.tsx b/spiffworkflow-frontend/src/components/SpiffTabs.tsx index 676174d37..cd8cb3bb8 100644 --- a/spiffworkflow-frontend/src/components/SpiffTabs.tsx +++ b/spiffworkflow-frontend/src/components/SpiffTabs.tsx @@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { Tabs, TabList, Tab } from '@carbon/react'; import { SpiffTab } from '../interfaces'; +import SpiffTooltip from './SpiffTooltip'; type OwnProps = { tabs: SpiffTab[]; @@ -24,7 +25,11 @@ export default function SpiffTabs({ tabs }: OwnProps) { const tabComponents = tabs.map((spiffTab: SpiffTab) => { return ( - navigate(spiffTab.path)}>{spiffTab.display_name} + + navigate(spiffTab.path)}> + {spiffTab.display_name} + + ); }); diff --git a/spiffworkflow-frontend/src/components/SpiffTooltip.tsx b/spiffworkflow-frontend/src/components/SpiffTooltip.tsx new file mode 100644 index 000000000..d497c4ded --- /dev/null +++ b/spiffworkflow-frontend/src/components/SpiffTooltip.tsx @@ -0,0 +1,18 @@ +// carbon shifts everything but mui doesn't +// import { Tooltip } from '@carbon/react'; + +import { Tooltip } from '@mui/material'; +import { ReactElement } from 'react'; + +interface OwnProps { + title?: string; + children: ReactElement; +} + +export default function SpiffTooltip({ title, children }: OwnProps) { + return ( + + {children} + + ); +} diff --git a/spiffworkflow-frontend/src/components/TaskRouteTabs.tsx b/spiffworkflow-frontend/src/components/TaskRouteTabs.tsx index 9431fa5fd..0fe7c7d05 100644 --- a/spiffworkflow-frontend/src/components/TaskRouteTabs.tsx +++ b/spiffworkflow-frontend/src/components/TaskRouteTabs.tsx @@ -9,9 +9,21 @@ export default function TaskRouteTabs() { } const spiffTabs: SpiffTab[] = [ - { path: '/tasks/in-progress', display_name: 'In Progress' }, - { path: '/tasks/completed-instances', display_name: 'Completed' }, - { path: '/tasks/create-new-instance', display_name: 'Start New +' }, + { + path: '/tasks/in-progress', + display_name: 'In Progress', + tooltip: 'View running Processes', + }, + { + path: '/tasks/completed-instances', + display_name: 'Completed', + tooltip: 'View completed Processes', + }, + { + path: '/tasks/create-new-instance', + display_name: 'Start New +', + tooltip: 'Find and start a new Process', + }, ]; return ; } diff --git a/spiffworkflow-frontend/src/extension_ui_schema_interfaces.ts b/spiffworkflow-frontend/src/extension_ui_schema_interfaces.ts index 547255edb..0c57d9b5c 100644 --- a/spiffworkflow-frontend/src/extension_ui_schema_interfaces.ts +++ b/spiffworkflow-frontend/src/extension_ui_schema_interfaces.ts @@ -63,6 +63,7 @@ export interface UiSchemaUxElement { page: string; display_location: UiSchemaDisplayLocation; location_specific_configs?: UiSchemaLocationSpecificConfig; + tooltip?: string; } export interface UiSchemaForm { diff --git a/spiffworkflow-frontend/src/index.tsx b/spiffworkflow-frontend/src/index.tsx index b9c0f6a24..301f6706a 100644 --- a/spiffworkflow-frontend/src/index.tsx +++ b/spiffworkflow-frontend/src/index.tsx @@ -1,19 +1,51 @@ import React from 'react'; import * as ReactDOMClient from 'react-dom/client'; +import { createTheme, ThemeProvider } from '@mui/material/styles'; import App from './App'; import './index.scss'; import './index.css'; - import reportWebVitals from './reportWebVitals'; // @ts-expect-error TS(2345) FIXME: Argument of type 'HTMLElement | null' is not assig... Remove this comment to see the full error message const root = ReactDOMClient.createRoot(document.getElementById('root')); +/** + * Creates an instance of the MUI theme that can be fed to the top-level ThemeProvider. + * Nested ThemeProviders can be used to override specific components. + * This override implements a tooltip that fits the overall app theme. + */ +const defaultTheme = createTheme(); +const overrideTheme = createTheme({ + components: { + MuiTooltip: { + styleOverrides: { + arrow: { + '&::before': { + color: '#F5F5F5', + border: '1px solid grey', + }, + }, + tooltip: { + fontSize: '.8em', + color: 'black', + backgroundColor: '#F5F5F5', + padding: '5px', + border: '1px solid grey', + }, + }, + }, + }, +}); + const doRender = () => { root.render( - + + + + + ); }; diff --git a/spiffworkflow-frontend/src/interfaces.ts b/spiffworkflow-frontend/src/interfaces.ts index 09f005448..dfa093a3a 100644 --- a/spiffworkflow-frontend/src/interfaces.ts +++ b/spiffworkflow-frontend/src/interfaces.ts @@ -492,6 +492,7 @@ export interface KeyboardShortcuts { export interface SpiffTab { path: string; display_name: string; + tooltip?: string; } export interface SpiffTableHeader { diff --git a/spiffworkflow-frontend/tsconfig.json b/spiffworkflow-frontend/tsconfig.json index ed6b17ab0..d34ede9c8 100644 --- a/spiffworkflow-frontend/tsconfig.json +++ b/spiffworkflow-frontend/tsconfig.json @@ -7,6 +7,7 @@ "skipLibCheck": true, "strict": true, "target": "es2021", + "resolveJsonModule": true, }, "include": ["src/**/*"] }