@orchestrator-ui/orchestrator-ui-components 7.2.0 → 7.3.0

package/src/components/WfoButtonWithConfirm/WfoButtonWithConfirm.tsx

@@ -0,0 +1,35 @@
+import React, { useContext } from 'react';
+
+import { EuiButtonIcon } from '@elastic/eui';
+import type { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+
+import { ConfirmationDialogContext } from '@/contexts';
+
+interface WfoButtonWithConfirmProps {
+    question: string;
+    onConfirm: () => void;
+    iconType?: EuiIconType;
+    ariaLabel?: string;
+}
+
+export const WfoButtonWithConfirm = ({
+    question,
+    onConfirm,
+    iconType = 'trash',
+    ariaLabel = 'Confirmation button',
+}: WfoButtonWithConfirmProps) => {
+    const { showConfirmDialog } = useContext(ConfirmationDialogContext);
+
+    return (
+        <EuiButtonIcon
+            iconType={iconType}
+            onClick={() => {
+                showConfirmDialog({
+                    question,
+                    onConfirm,
+                });
+            }}
+            aria-label={ariaLabel}
+        />
+    );
+};

package/src/components/WfoButtonWithConfirm/index.ts

@@ -0,0 +1 @@
+export * from './WfoButtonWithConfirm';

package/src/components/WfoDiff/styles.ts

@@ -1,23 +1,23 @@
 import { shade, tint } from '@elastic/eui';
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoDiffStyles = ({
     theme,
     toSecondaryColor,
-    isDarkThemeActive,
-}: WfoTheme) => {
+    isDarkModeActive,
+}: WfoThemeHelpers) => {
     const SHADE_FACTOR = 0.5;
     const TINT_FACTOR = 0.65;
 
     const insertGutterColor = toSecondaryColor(theme.colors.success);
-    const insertCodeColor = isDarkThemeActive
+    const insertCodeColor = isDarkModeActive
         ? shade(insertGutterColor, SHADE_FACTOR)
         : tint(insertGutterColor, TINT_FACTOR);
 
     const deleteColor = toSecondaryColor(theme.colors.danger);
-    const deleteSecondaryColor = isDarkThemeActive
+    const deleteSecondaryColor = isDarkModeActive
         ? shade(deleteColor, SHADE_FACTOR)
         : tint(deleteColor, TINT_FACTOR);
 
@@ -36,7 +36,7 @@ export const getWfoDiffStyles = ({
         },
 
         '.operator, .punctuation': {
-            color: theme.colors.text,
+            color: theme.colors.textParagraph,
         },
     });
 

package/src/components/WfoError/WfoError.tsx

@@ -34,7 +34,7 @@ export const WfoErrorWithMessage = ({ error }: WfoErrorWithMessageProps) => {
         <>
             <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
                 <WfoXCircleFill color={theme.colors.danger} />
-                <EuiText color={theme.colors.dangerText}>
+                <EuiText color={theme.colors.textDanger}>
                     {t('errorMessage')} ({message})
                 </EuiText>
             </EuiFlexGroup>

package/src/components/WfoExpandableField/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
     const titleRowStyle = css({
         display: 'flex',
         alignItems: 'center',

package/src/components/WfoFilterTabs/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
     const tabStyle = css({
         gap: `${theme.size.xxs}`,
         '.euiTab__prepend': {

package/src/components/WfoJsonCodeBlock/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
     const euiCodeBlockStyle = css({
         marginTop: 10,
         borderRadius: theme.border.radius.medium,

package/src/components/WfoKeyValueTable/WfoValueCell.tsx

@@ -55,7 +55,7 @@ export const WfoValueCell: FC<WfoValueCellProps> = ({
                                 <WfoClipboardCopy
                                     width={clipboardIconSize}
                                     height={clipboardIconSize}
-                                    color={theme.colors.mediumShade}
+                                    color={theme.colors.backgroundBaseDisabled}
                                 />
                             </div>
                         )}

package/src/components/WfoKeyValueTable/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
     const padding = theme.font.baseline * 2.5;
     const clipboardIconMargin = theme.font.baseline * 2;
     const keyColumnWidth = theme.base * 12;
@@ -25,11 +25,11 @@ export const getStyles = ({ theme }: WfoTheme) => {
     });
 
     const lightBackground = css({
-        backgroundColor: theme.colors.emptyShade,
+        backgroundColor: theme.colors.backgroundBaseNeutral,
     });
 
     const darkBackground = css({
-        backgroundColor: theme.colors.lightestShade,
+        backgroundColor: theme.colors.backgroundBaseSubdued,
     });
 
     const getBackgroundColorStyleForRow = (rowNumber: number) =>
@@ -56,12 +56,12 @@ export const getStyles = ({ theme }: WfoTheme) => {
 
     const keyCellStyle = css({
         fontWeight: theme.font.weight.medium,
-        color: theme.colors.title,
+        color: theme.colors.textHeading,
     });
 
     const valueCellStyle = css({
         fontWeight: theme.font.weight.regular,
-        color: theme.colors.text,
+        color: theme.colors.textParagraph,
         display: 'flex',
         alignItems: 'center',
         overflowWrap: 'anywhere',

package/src/components/WfoLogoSpinner/styles.ts

@@ -1,12 +1,18 @@
 import { css } from '@emotion/react';
 
 export const getWfoLogoSpinnerStyles = () => {
+    const isDark =
+        typeof window !== 'undefined' &&
+        localStorage?.getItem('colorMode') === 'DARK';
+
     const spinCenteringCss = css({
         width: '100vw',
         height: '100vh',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+
+        backgroundColor: isDark ? '#101827' : '#FFFFFF',
     });
 
     const spinContainerCss = css({

package/src/components/WfoMonacoCodeBlock/WfoMonacoCodeBlock.tsx

@@ -26,7 +26,7 @@ const MONACO_THEME: { light: editor.BuiltinTheme; dark: editor.BuiltinTheme } =
  * @constructor
  */
 export const WfoMonacoCodeBlock: FC<WfoMonacoCodeBlockProps> = ({ data }) => {
-    const { theme, isDarkThemeActive } = useOrchestratorTheme();
+    const { theme, isDarkModeActive } = useOrchestratorTheme();
     const { monacoEditorStyle } = useWithOrchestratorTheme(getStyles);
     const [monacoInstance, setMonacoInstance] = useState<Monaco | undefined>(
         undefined,
@@ -38,25 +38,25 @@ export const WfoMonacoCodeBlock: FC<WfoMonacoCodeBlockProps> = ({ data }) => {
     const addThemeToEditor = useCallback(
         (monaco: Monaco) => {
             monaco.editor.defineTheme('wfoTheme', {
-                base: isDarkThemeActive
-                    ? MONACO_THEME.dark
-                    : MONACO_THEME.light,
+                base: isDarkModeActive ? MONACO_THEME.dark : MONACO_THEME.light,
                 inherit: true,
                 rules: [],
                 colors: {
-                    'editor.background': theme.colors.body,
+                    'editor.background': isDarkModeActive
+                        ? theme.colors.backgroundBaseNeutral
+                        : theme.colors.backgroundBaseSubdued,
                 },
             });
             monaco.editor.setTheme('wfoTheme');
         },
-        [theme, isDarkThemeActive],
+        [theme, isDarkModeActive],
     );
 
     useEffect(() => {
         if (monacoInstance) {
             addThemeToEditor(monacoInstance);
         }
-    }, [addThemeToEditor, isDarkThemeActive, monacoInstance]);
+    }, [addThemeToEditor, isDarkModeActive, monacoInstance]);
 
     function editorDidMount(
         editor: editor.IStandaloneCodeEditor,

package/src/components/WfoMonacoCodeBlock/styles.ts

@@ -1,12 +1,14 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers) => {
     const monacoEditorStyle = css({
         marginTop: 10,
         padding: 10,
-        backgroundColor: theme.colors.body,
+        backgroundColor: isDarkModeActive
+            ? theme.colors.backgroundBaseNeutral
+            : theme.colors.backgroundBaseSubdued,
         borderRadius: theme.border.radius.medium,
     });
 

package/src/components/WfoNoResults/styles.ts

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getStyles = ({ theme }: WfoTheme) => {
+export const getStyles = ({ theme }: WfoThemeHelpers) => {
     const panelStyle = css({
         display: 'flex',
         padding: theme.base * 2,
@@ -10,7 +10,7 @@ export const getStyles = ({ theme }: WfoTheme) => {
         alignItems: 'center',
         justifyContent: 'center',
         gap: theme.base / 2,
-        backgroundColor: theme.colors.body,
+        backgroundColor: theme.colors.backgroundBaseSubdued,
         borderRadius: theme.border.radius.medium,
         color: theme.colors.link,
         fontFamily: theme.font.family,

package/src/components/WfoPageTemplate/WfoBreadcrumbs/WfoBreadcrumbs.tsx

@@ -78,7 +78,7 @@ export const WfoBreadcrumbs = ({
                         aria-label={t('ariaLabelToggleSideMenu')}
                         display="empty"
                         iconType={() => (
-                            <WfoSideMenu color={theme.colors.subduedText} />
+                            <WfoSideMenu color={theme.colors.textSubdued} />
                         )}
                         color="text"
                         css={{

package/src/components/WfoPageTemplate/WfoPageHeader/WfoHamburgerMenu.tsx

@@ -22,7 +22,7 @@ import { toOptionalArrayEntry } from '@/utils';
 export const WfoHamburgerMenu = () => {
     const t = useTranslations('hamburgerMenu');
     const [isPopoverOpen, setPopoverIsOpen] = useState(false);
-    const { theme, isDarkThemeActive } = useOrchestratorTheme();
+    const { theme, isDarkModeActive } = useOrchestratorTheme();
     const {
         enableSupportMenuItem,
         supportMenuItemUrl,
@@ -87,9 +87,7 @@ export const WfoHamburgerMenu = () => {
         name: t('logout'),
         icon: (
             <WfoLogoutIcon
-                color={
-                    isDarkThemeActive ? theme.colors.ghost : theme.colors.ink
-                }
+                color={isDarkModeActive ? theme.colors.ghost : theme.colors.ink}
             />
         ),
         onClick: () => signOut(),
@@ -99,9 +97,7 @@ export const WfoHamburgerMenu = () => {
         name: t('support'),
         icon: (
             <WfoQuestionCircle
-                color={
-                    isDarkThemeActive ? theme.colors.ghost : theme.colors.ink
-                }
+                color={isDarkModeActive ? theme.colors.ghost : theme.colors.ink}
             />
         ),
         onClick: handleOpenSupport,

package/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx

@@ -37,13 +37,13 @@ export interface WfoPageHeaderProps {
     // todo: should be part of theme!
     navigationHeight: number;
     getAppLogo: (navigationHeight: number) => ReactElement;
-    onThemeSwitch: (theme: EuiThemeColorMode) => void;
+    onColorModeSwitch: (newColorMode: EuiThemeColorMode) => void;
 }
 
 export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
     navigationHeight,
     getAppLogo,
-    onThemeSwitch,
+    onColorModeSwitch,
 }) => {
     const t = useTranslations('main');
     const { multiplyByBaseUnit, colorMode, theme } = useOrchestratorTheme();
@@ -107,13 +107,13 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
                                     ? 'darkMode'
                                     : 'lightMode',
                             )}
-                            onClick={() =>
-                                onThemeSwitch(
+                            onClick={() => {
+                                onColorModeSwitch(
                                     colorMode === ColorModes.LIGHT
                                         ? ColorModes.DARK
                                         : ColorModes.LIGHT,
-                                )
-                            }
+                                );
+                            }}
                         />
                     )}
 

package/src/components/WfoPageTemplate/WfoPageHeader/styles.ts

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getWfoPageHeaderStyles = ({ theme }: WfoTheme) => {
+export const getWfoPageHeaderStyles = ({ theme }: WfoThemeHelpers) => {
     const appNameStyle = css({
         paddingRight: theme.base,
         marginRight: theme.base,
-        borderRight: `${theme.border.width.thick} solid ${theme.colors.subduedText}`,
+        borderRight: `${theme.border.width.thick} solid ${theme.colors.textSubdued}`,
     });
 
     const getHeaderStyle = (navigationHeight: number) => {

package/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx

@@ -1,11 +1,23 @@
-import React, { FC, ReactElement, ReactNode, useRef, useState } from 'react';
+import React, {
+    FC,
+    ReactElement,
+    ReactNode,
+    useEffect,
+    useRef,
+    useState,
+} from 'react';
 
 import type { EuiThemeColorMode } from '@elastic/eui';
-import { EuiPageTemplate, EuiSideNavItemType } from '@elastic/eui';
+import {
+    EuiPageTemplate,
+    EuiSideNavItemType,
+    EuiThemeProvider,
+} from '@elastic/eui';
 
 import { WfoBreadcrumbs, WfoPageHeader, WfoSidebar } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { ProductLifecycleStatus } from '@/types';
+import { wfoThemeModifications } from '@/theme';
+import { ColorModes, ProductLifecycleStatus } from '@/types';
 
 import { ContentContextProvider } from './ContentContext';
 import { getPageTemplateStyles } from './styles';
@@ -16,23 +28,59 @@ export interface WfoPageTemplateProps {
         defaultMenuItems: EuiSideNavItemType<object>[],
     ) => EuiSideNavItemType<object>[];
     overrideStartWorkflowFilters?: (ProductLifecycleStatus | string)[];
-    onThemeSwitch: (theme: EuiThemeColorMode) => void;
     children: ReactNode;
+    colorModeState: [
+        EuiThemeColorMode,
+        React.Dispatch<React.SetStateAction<EuiThemeColorMode>>,
+    ];
 }
 
-export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
+export const WfoPageTemplate: FC<WfoPageTemplateProps> = (props) => {
+    const [colorMode, setColorMode] = props.colorModeState;
+    const handleColorModeSwitch = (newColorMode: EuiThemeColorMode) => {
+        setColorMode(newColorMode);
+        localStorage.setItem('colorMode', newColorMode);
+    };
+
+    useEffect(() => {
+        // Initialize theme mode from localStorage or set it to 'light' if not present
+        const storedColorMode = localStorage.getItem('colorMode');
+        if (
+            storedColorMode !== ColorModes.LIGHT &&
+            storedColorMode !== ColorModes.DARK
+        ) {
+            handleColorModeSwitch(ColorModes.LIGHT);
+        } else {
+            handleColorModeSwitch(storedColorMode);
+        }
+    }, []);
+
+    return (
+        <EuiThemeProvider modify={wfoThemeModifications} colorMode={colorMode}>
+            <WfoPageTemplateContent
+                {...props}
+                handleColorModeSwitch={handleColorModeSwitch}
+            />
+        </EuiThemeProvider>
+    );
+};
+
+const WfoPageTemplateContent: FC<
+    WfoPageTemplateProps & {
+        handleColorModeSwitch: (mode: EuiThemeColorMode) => void;
+    }
+> = ({
     children,
     getAppLogo,
     overrideMenuItems,
     overrideStartWorkflowFilters,
-    onThemeSwitch,
+    handleColorModeSwitch,
 }) => {
     const { getSidebarStyle, NAVIGATION_HEIGHT } = useWithOrchestratorTheme(
         getPageTemplateStyles,
     );
 
     const [isSideMenuVisible, setIsSideMenuVisible] = useState(true);
-
     const headerRowRef = useRef<HTMLDivElement>(null);
 
     return (
@@ -40,7 +88,7 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
             <WfoPageHeader
                 getAppLogo={getAppLogo}
                 navigationHeight={NAVIGATION_HEIGHT}
-                onThemeSwitch={onThemeSwitch}
+                onColorModeSwitch={handleColorModeSwitch}
             />
             {/* Sidebar and content area */}
             <EuiPageTemplate

package/src/components/WfoPageTemplate/WfoPageTemplate/styles.ts

@@ -1,23 +1,23 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
 export const getPageTemplateStyles = ({
     theme,
     multiplyByBaseUnit,
-}: WfoTheme) => {
+}: WfoThemeHelpers) => {
     const NAVIGATION_HEIGHT = multiplyByBaseUnit(3);
 
     const getSidebarStyle = (navigationHeight: number) =>
         css({
-            backgroundColor: theme.colors.body,
+            backgroundColor: theme.colors.backgroundBaseSubdued,
             overflowY: 'auto',
             maxHeight: `calc(100vh - ${navigationHeight}px)`,
         });
 
     const getContentStyle = (navigationHeight: number) =>
         css({
-            backgroundColor: theme.colors.emptyShade,
+            backgroundColor: theme.colors.backgroundBaseNeutral,
             overflowY: 'auto',
             maxHeight: `calc(100vh - ${navigationHeight}px)`,
         });

package/src/components/WfoPageTemplate/WfoSidebar/styles.ts

@@ -1,15 +1,15 @@
 import { CSSObject, css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getCopyrightStyles = ({ theme }: WfoTheme) => {
+export const getCopyrightStyles = ({ theme }: WfoThemeHelpers) => {
     const copyrightStyle = css({
         position: 'fixed',
         bottom: 0,
         left: 0,
         padding: 10,
         fontSize: theme.size.s,
-        color: theme.colors.primaryText,
+        color: theme.colors.textPrimary,
     });
 
     return {
@@ -17,11 +17,12 @@ export const getCopyrightStyles = ({ theme }: WfoTheme) => {
     };
 };
 
-export const getMenuStyles = ({ theme }: WfoTheme) => {
+export const getMenuStyles = ({ theme }: WfoThemeHelpers) => {
     const menuStyle = css({
+        backgroundColor: theme.colors.backgroundBaseSubdued,
         '.euiSideNavItem--branch': {
             '&:after': {
-                backgroundColor: theme.colors.lightShade,
+                backgroundColor: theme.colors.borderBaseSubdued,
                 height: '100%',
             },
             ':last-child': {
@@ -31,13 +32,15 @@ export const getMenuStyles = ({ theme }: WfoTheme) => {
             },
         },
     });
-
     return {
         menuStyle,
     };
 };
 
-export const getMenuItemStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
+export const getMenuItemStyles = ({
+    theme,
+    isDarkModeActive,
+}: WfoThemeHelpers) => {
     const baseStyles: CSSObject = {
         lineHeight: `${theme.base * 1.25}px`,
         display: 'flex',
@@ -45,7 +48,7 @@ export const getMenuItemStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
         ':hover': {
             textDecoration: 'underline',
         },
-        color: theme.colors.subduedText,
+        color: theme.colors.textSubdued,
         padding: `${theme.base * 0.5}px ${theme.base * 0.75}px`,
     };
 
@@ -53,17 +56,13 @@ export const getMenuItemStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
         ...baseStyles,
         ':after': {
             content: "''",
-            top: '16px',
+            top: '50%',
             left: 0,
             width: '4px',
             height: '1px',
-            backgroundColor: theme.colors.lightShade,
+            backgroundColor: theme.colors.borderBaseSubdued,
             position: 'absolute',
-        },
-        ':last-child': {
-            ':after': {
-                top: '18px',
-            },
+            transform: 'translateY(-50%)',
         },
     };
 
@@ -74,11 +73,12 @@ export const getMenuItemStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
     const selectedMenuItemBaseStyle = {
         ...baseStyles,
         height: `${theme.base * 2.25}px`,
-        backgroundColor: isDarkThemeActive
-            ? theme.colors.mediumShade
-            : theme.colors.header,
+        backgroundColor: isDarkModeActive
+            ? theme.colors.header
+            : theme.colors.backgroundLightPrimary,
         borderRadius: theme.border.radius.medium,
-        color: theme.colors.ghost,
+        color: isDarkModeActive ? theme.colors.ghost : theme.colors.textPrimary,
+        fontWeight: theme.font.weight.medium,
     };
 
     const selectedMenuItem = css({
@@ -94,18 +94,20 @@ export const getMenuItemStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
     const selectedSubMenuItem = css({
         ...baseSubMenuStyles,
         height: `${theme.base * 2.25}px`,
-        backgroundColor: isDarkThemeActive
-            ? theme.colors.mediumShade
-            : theme.colors.header,
+        backgroundColor: isDarkModeActive
+            ? theme.colors.header
+            : theme.colors.backgroundLightPrimary,
         borderRadius: theme.border.radius.medium,
-        color: theme.colors.ghost,
+        color: isDarkModeActive ? theme.colors.ghost : theme.colors.textPrimary,
+        fontWeight: theme.font.weight.medium,
         marginLeft: `${theme.size.xs}`,
         paddingLeft: `${theme.size.s}`,
     });
 
     const subMenuHeaderStyle = css({
         ...baseStyles,
-        color: theme.colors.text,
+        color: theme.colors.link,
+        fontWeight: theme.font.weight.medium,
     });
     return {
         menuItemStyle,

package/src/components/WfoPageTemplate/paths.ts

@@ -10,5 +10,7 @@ export const PATH_METADATA_RESOURCE_TYPES = '/metadata/resource-types';
 export const PATH_METADATA_WORKFLOWS = '/metadata/workflows';
 export const PATH_METADATA_TASKS = '/metadata/tasks';
 export const PATH_METADATA_SCHEDULED_TASKS = '/metadata/scheduled-tasks';
+export const PATH_METADATA_ADD_SCHEDULE_TASK_FORM =
+    '/metadata/schedule-task-form';
 export const PATH_TASKS = '/tasks';
 export const PATH_SETTINGS = '/settings';