@orchestrator-ui/orchestrator-ui-components 1.7.0 → 1.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.7.0",
+    "version": "1.9.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoExpandableField/WfoExpandableField.tsx

@@ -0,0 +1,46 @@
+import React, { FC, ReactNode } from 'react';
+
+import { EuiButtonIcon } from '@elastic/eui';
+
+import { useOrchestratorTheme } from '@/hooks';
+import { WfoMinusCircleFill, WfoPlusCircleFill } from '@/icons';
+
+import { getStyles } from './styles';
+
+export type WfoExpandableFieldProps = {
+    isExpanded: boolean;
+    title: ReactNode;
+    onExpandedChange: (isExpanded: boolean) => void;
+    children: ReactNode;
+};
+
+export const WfoExpandableField: FC<WfoExpandableFieldProps> = ({
+    isExpanded,
+    title,
+    onExpandedChange,
+    children,
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const { titleRowStyle, titleStyle } = getStyles(theme);
+
+    return (
+        <>
+            <div css={titleRowStyle}>
+                <EuiButtonIcon
+                    aria-label={isExpanded ? 'Collapse' : 'Expand'}
+                    iconType={() =>
+                        isExpanded ? (
+                            <WfoMinusCircleFill color={theme.colors.primary} />
+                        ) : (
+                            <WfoPlusCircleFill color={theme.colors.primary} />
+                        )
+                    }
+                    onClick={() => onExpandedChange(!isExpanded)}
+                />
+                <div css={titleStyle}>{title}</div>
+            </div>
+
+            {isExpanded && children}
+        </>
+    );
+};

package/src/components/WfoExpandableField/index.ts

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

package/src/components/WfoExpandableField/styles.ts

@@ -0,0 +1,18 @@
+import { EuiThemeComputed } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const titleRowStyle = css({
+        display: 'flex',
+        alignItems: 'center',
+    });
+
+    const titleStyle = css({
+        marginLeft: theme.size.s,
+    });
+
+    return {
+        titleRowStyle,
+        titleStyle,
+    };
+};

package/src/components/WfoPageTemplate/WfoSidebar/WfoMenuLink.tsx

@@ -0,0 +1,50 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { getMenuItemStyles } from './styles';
+
+type WfoMenuItemLinkProps = {
+    path: string;
+    translationString: string;
+    isSelected: boolean;
+    isSubItem?: boolean;
+};
+
+export const WfoMenuItemLink: FC<WfoMenuItemLinkProps> = ({
+    path,
+    translationString,
+    isSelected,
+    isSubItem,
+}) => {
+    const {
+        menuItemStyle,
+        selectedMenuItem,
+        selectedSubMenuItem,
+        subMenuItemStyle,
+    } = useWithOrchestratorTheme(getMenuItemStyles);
+
+    const getMenuItemStyle = () => {
+        if (isSubItem) {
+            return isSelected ? selectedSubMenuItem : subMenuItemStyle;
+        } else {
+            return isSelected ? selectedMenuItem : menuItemStyle;
+        }
+    };
+
+    const t = useTranslations('main');
+
+    // This is a workaround to use the translation string as the link text if it's not found in the translation file.
+    const linkText =
+        t(translationString) === `main.${translationString}`
+            ? translationString
+            : t(translationString);
+    return (
+        <Link css={getMenuItemStyle()} href={path}>
+            {linkText}
+        </Link>
+    );
+};

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

@@ -25,6 +25,7 @@ import {
     PATH_WORKFLOWS,
 } from '../paths';
 import { WfoCopyright } from './WfoCopyright';
+import { WfoMenuItemLink } from './WfoMenuLink';
 
 export const renderEmptyElementWhenNotAllowedByPolicy = (isAllowed: boolean) =>
     isAllowed ? undefined : () => <></>;
@@ -46,6 +47,7 @@ export type WfoSidebarProps = {
 export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
     const t = useTranslations('main');
     const router = useRouter();
+
     const [isSideNavOpenOnMobile, setIsSideNavOpenOnMobile] = useState(false);
     const { isAllowed } = usePolicy();
 
@@ -53,90 +55,144 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         setIsSideNavOpenOnMobile((openState) => !openState);
     };
 
+    // Note: href is used to determine if the user has access to the page in
+    // defaultMenuItemsFilteredByPolicy so we need to keep it in the item although we don't use it in the render.
     const defaultMenuItems: EuiSideNavItemType<object>[] = [
         {
             name: t('start'),
             id: '2',
             isSelected: router.pathname === PATH_START,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_START);
-            },
+            href: PATH_START,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_START}
+                    translationString="start"
+                    isSelected={router.pathname === PATH_START}
+                />
+            ),
         },
         {
             name: t('workflows'),
             id: '3',
             isSelected: router.pathname === PATH_WORKFLOWS,
             href: PATH_WORKFLOWS,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_WORKFLOWS);
-            },
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_WORKFLOWS}
+                    translationString="workflows"
+                    isSelected={router.pathname === PATH_WORKFLOWS}
+                />
+            ),
         },
         {
             name: t('subscriptions'),
             id: '4',
             isSelected: router.pathname === PATH_SUBSCRIPTIONS,
             href: PATH_SUBSCRIPTIONS,
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_SUBSCRIPTIONS);
-            },
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_SUBSCRIPTIONS}
+                    translationString="subscriptions"
+                    isSelected={router.pathname === PATH_SUBSCRIPTIONS}
+                />
+            ),
         },
         {
             name: t('metadata'),
             id: '5',
             href: PATH_METADATA,
-            onClick: () => {
-                router.push(PATH_METADATA);
-            },
+            isSelected:
+                router.pathname.substring(0, PATH_METADATA.length) ===
+                PATH_METADATA,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_METADATA_PRODUCTS}
+                    translationString="metadata"
+                    isSelected={
+                        router.pathname.substring(0, PATH_METADATA.length) ===
+                        PATH_METADATA
+                    }
+                />
+            ),
             items: [
                 {
                     name: t('metadataProducts'),
                     id: '5.1',
-                    isSelected: router.pathname === PATH_METADATA_PRODUCTS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_PRODUCTS);
-                    },
+                    href: PATH_METADATA_PRODUCTS,
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_PRODUCTS}
+                            translationString="metadataProducts"
+                            isSelected={
+                                router.pathname === PATH_METADATA_PRODUCTS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     name: t('metadataProductblocks'),
                     id: '5.2',
                     isSelected:
                         router.pathname === PATH_METADATA_PRODUCT_BLOCKS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_PRODUCT_BLOCKS);
-                    },
+                    href: PATH_METADATA_PRODUCT_BLOCKS,
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_PRODUCT_BLOCKS}
+                            translationString="metadataProductblocks"
+                            isSelected={
+                                router.pathname === PATH_METADATA_PRODUCT_BLOCKS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     name: t('metadataResourceTypes'),
                     id: '5.3',
+                    href: PATH_METADATA_RESOURCE_TYPES,
                     isSelected:
                         router.pathname === PATH_METADATA_RESOURCE_TYPES,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_RESOURCE_TYPES);
-                    },
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_RESOURCE_TYPES}
+                            translationString="metadataResourceTypes"
+                            isSelected={
+                                router.pathname === PATH_METADATA_RESOURCE_TYPES
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     name: t('metadataWorkflows'),
                     id: '5.4',
                     isSelected: router.pathname === PATH_METADATA_WORKFLOWS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_WORKFLOWS);
-                    },
+                    href: PATH_METADATA_WORKFLOWS,
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_WORKFLOWS}
+                            translationString="metadataWorkflows"
+                            isSelected={
+                                router.pathname === PATH_METADATA_WORKFLOWS
+                            }
+                            isSubItem={true}
+                        />
+                    ),
                 },
                 {
                     name: t('metadataTasks'),
                     id: '5.5',
                     isSelected: router.pathname === PATH_METADATA_TASKS,
-                    onClick: (e) => {
-                        e.preventDefault();
-                        router.push(PATH_METADATA_TASKS);
-                    },
+                    href: PATH_METADATA_TASKS,
+                    renderItem: () => (
+                        <WfoMenuItemLink
+                            path={PATH_METADATA_TASKS}
+                            translationString="metadataTasks"
+                            isSelected={router.pathname === PATH_METADATA_TASKS}
+                            isSubItem={true}
+                        />
+                    ),
                 },
             ],
         },
@@ -144,21 +200,27 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
             name: t('tasks'),
             isSelected: router.pathname === PATH_TASKS,
             id: '6',
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_TASKS);
-            },
             href: PATH_TASKS,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_TASKS}
+                    translationString="tasks"
+                    isSelected={router.pathname === PATH_TASKS}
+                />
+            ),
         },
         {
             name: t('settings'),
             isSelected: router.pathname === PATH_SETTINGS,
             id: '7',
-            onClick: (e) => {
-                e.preventDefault();
-                router.push(PATH_SETTINGS);
-            },
             href: PATH_SETTINGS,
+            renderItem: () => (
+                <WfoMenuItemLink
+                    path={PATH_SETTINGS}
+                    translationString="settings"
+                    isSelected={router.pathname === PATH_SETTINGS}
+                />
+            ),
         },
     ];
 

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

@@ -1 +1,2 @@
 export * from './WfoSidebar';
+export * from './WfoMenuLink';

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

@@ -1,5 +1,5 @@
 import { EuiThemeComputed } from '@elastic/eui';
-import { css } from '@emotion/react';
+import { CSSObject, css } from '@emotion/react';
 
 export const getCopyrightStyles = (theme: EuiThemeComputed) => {
     const copyrightStyle = css({
@@ -15,3 +15,64 @@ export const getCopyrightStyles = (theme: EuiThemeComputed) => {
         copyrightStyle,
     };
 };
+
+export const getMenuItemStyles = (theme: EuiThemeComputed) => {
+    const baseStyles: CSSObject = {
+        lineHeight: `${theme.base * 1.25}px`,
+        display: 'flex',
+        alignItems: 'center',
+        ':hover': {
+            textDecoration: 'underline',
+        },
+        color: theme.colors.text,
+        padding: `${theme.base * 0.5}px ${theme.base * 0.75}px`,
+    };
+
+    const baseSubMenuStyles: CSSObject = {
+        ...baseStyles,
+        ':after': {
+            content: "''",
+            top: '16px',
+            left: 0,
+            width: '4px',
+            height: '1px',
+            backgroundColor: '#d3dae6',
+            position: 'absolute',
+        },
+        padding: '8px 12px',
+        ':last-child': {
+            top: '-4px',
+            position: 'relative',
+        },
+    };
+
+    const menuItemStyle = css({
+        ...baseStyles,
+        color: theme.colors.title,
+    });
+
+    const selectedMenuItem = css({
+        ...baseStyles,
+        height: `${theme.base * 2.25}px`,
+        backgroundColor: theme.colors.lightShade,
+        borderRadius: theme.border.radius.medium,
+        fontWeight: theme.font.weight.semiBold,
+        color: theme.colors.primaryText,
+    });
+
+    const selectedSubMenuItem = css({
+        ...baseSubMenuStyles,
+        fontWeight: theme.font.weight.semiBold,
+    });
+
+    const subMenuItemStyle = css({
+        ...baseSubMenuStyles,
+    });
+
+    return {
+        menuItemStyle,
+        selectedMenuItem,
+        selectedSubMenuItem,
+        subMenuItemStyle,
+    };
+};

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoProductBlockKeyValueRow.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from 'react';
+
+import { EuiBadge } from '@elastic/eui';
+
+import { useSubscriptionDetailValueOverride } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { FieldValue } from '@/types';
+import { camelToHuman } from '@/utils';
+
+import { getStyles } from './styles';
+
+export type WfoProductBlockKeyValueRowProps = {
+    fieldValue: FieldValue;
+};
+
+export const WfoProductBlockKeyValueRow: FC<
+    WfoProductBlockKeyValueRowProps
+> = ({ fieldValue }) => {
+    const { leftColumnStyle, rightColumnStyle, rowStyle } =
+        useWithOrchestratorTheme(getStyles);
+    const { getOverriddenValue } = useSubscriptionDetailValueOverride();
+
+    const { field, value } = fieldValue;
+
+    const WfoProductBlockValue: FC<{ value: FieldValue['value'] }> = ({
+        value,
+    }) =>
+        typeof value === 'boolean' ? (
+            <EuiBadge>{value.toString()}</EuiBadge>
+        ) : (
+            <>{value}</>
+        );
+
+    return (
+        <tr css={rowStyle}>
+            <td css={leftColumnStyle}>
+                <b>{camelToHuman(field)}</b>
+            </td>
+            <td css={rightColumnStyle}>
+                {getOverriddenValue(fieldValue) ?? (
+                    <WfoProductBlockValue value={value} />
+                )}
+            </td>
+        </tr>
+    );
+};

package/src/components/WfoSubscription/{WfoSubscriptionProductBlock.tsx → WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx}

@@ -6,7 +6,6 @@ import { useRouter } from 'next/router';
 import {
     EuiBadge,
     EuiButtonEmpty,
-    EuiCodeBlock,
     EuiFlexGroup,
     EuiFlexItem,
     EuiIcon,
@@ -15,15 +14,19 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { useOrchestratorTheme, useWithOrchestratorTheme } from '../../hooks';
-import { FieldValue, InUseByRelation } from '../../types';
-import { camelToHuman } from '../../utils';
-import { PATH_SUBSCRIPTIONS } from '../WfoPageTemplate';
-import { getStyles } from './styles';
+import {
+    PATH_SUBSCRIPTIONS,
+    WfoJsonCodeBlock,
+    WfoProductBlockKeyValueRow,
+} from '@/components';
+import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { FieldValue, InUseByRelation } from '@/types';
+
 import {
     getFieldFromProductBlockInstanceValues,
     getProductBlockTitle,
-} from './utils';
+} from '../utils';
+import { getStyles } from './styles';
 
 interface WfoSubscriptionProductBlockProps {
     ownerSubscriptionId: string;
@@ -47,32 +50,22 @@ export const WfoSubscriptionProductBlock = ({
     const t = useTranslations('subscriptions.detail');
     const { theme } = useOrchestratorTheme();
     const {
-        productBlockIconStyle,
-        productBlockPanelStyle,
-        productBlockLeftColStyle,
-        productBlockFirstLeftColStyle,
-        productBlockRightColStyle,
-        productBlockFirstRightColStyle,
+        iconStyle,
+        panelStyle,
+        leftColumnStyle,
+        rightColumnStyle,
+        rowStyle,
     } = useWithOrchestratorTheme(getStyles);
 
     const [hideDetails, setHideDetails] = useState(true);
 
-    const isFirstBlock = (index: number): boolean => {
-        if (!hideDetails) return false;
-        return index === 0;
-    };
-
     return (
         <>
             <EuiSpacer size={'m'}></EuiSpacer>
-            <EuiPanel
-                color="transparent"
-                hasShadow={false}
-                css={productBlockPanelStyle}
-            >
+            <EuiPanel color="transparent" hasShadow={false} css={panelStyle}>
                 <EuiFlexGroup>
                     <EuiFlexItem grow={false}>
-                        <div css={productBlockIconStyle}>
+                        <div css={iconStyle}>
                             <EuiIcon
                                 type="filebeatApp"
                                 color={theme.colors.primary}
@@ -115,31 +108,19 @@ export const WfoSubscriptionProductBlock = ({
                         <tbody>
                             {!hideDetails && (
                                 <>
-                                    <tr key={-3}>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockFirstLeftColStyle}
-                                        >
+                                    <tr key={-3} css={rowStyle}>
+                                        <td css={leftColumnStyle}>
                                             <b>{t('subscriptionInstanceId')}</b>
                                         </td>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockFirstRightColStyle}
-                                        >
+                                        <td css={rightColumnStyle}>
                                             {subscriptionInstanceId}
                                         </td>
                                     </tr>
-                                    <tr key={-2}>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockFirstLeftColStyle}
-                                        >
+                                    <tr key={-2} css={rowStyle}>
+                                        <td css={leftColumnStyle}>
                                             <b>{t('ownerSubscriptionId')}</b>
                                         </td>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockFirstRightColStyle}
-                                        >
+                                        <td css={rightColumnStyle}>
                                             {subscriptionId ===
                                             ownerSubscriptionId ? (
                                                 <>
@@ -157,24 +138,15 @@ export const WfoSubscriptionProductBlock = ({
                                             )}
                                         </td>
                                     </tr>
-                                    <tr key={-1}>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockLeftColStyle}
-                                        >
+                                    <tr key={-1} css={rowStyle}>
+                                        <td css={leftColumnStyle}>
                                             <b>{t('inUseByRelations')}</b>
                                         </td>
-                                        <td
-                                            valign={'top'}
-                                            css={productBlockRightColStyle}
-                                        >
-                                            <EuiCodeBlock language="json">
-                                                {JSON.stringify(
-                                                    inUseByRelations,
-                                                    null,
-                                                    4,
-                                                )}
-                                            </EuiCodeBlock>
+                                        <td css={rightColumnStyle}>
+                                            <WfoJsonCodeBlock
+                                                data={inUseByRelations}
+                                                isBasicStyle
+                                            />
                                         </td>
                                     </tr>
                                 </>
@@ -188,39 +160,10 @@ export const WfoSubscriptionProductBlock = ({
                                         ),
                                 )
                                 .map((productBlockInstanceValue, index) => (
-                                    <tr key={index}>
-                                        <td
-                                            valign={'top'}
-                                            css={
-                                                isFirstBlock(index)
-                                                    ? productBlockFirstLeftColStyle
-                                                    : productBlockLeftColStyle
-                                            }
-                                        >
-                                            <b>
-                                                {camelToHuman(
-                                                    productBlockInstanceValue.field,
-                                                )}
-                                            </b>
-                                        </td>
-                                        <td
-                                            valign={'top'}
-                                            css={
-                                                isFirstBlock(index)
-                                                    ? productBlockFirstRightColStyle
-                                                    : productBlockRightColStyle
-                                            }
-                                        >
-                                            {typeof productBlockInstanceValue.value ===
-                                            'boolean' ? (
-                                                <EuiBadge>
-                                                    {productBlockInstanceValue.value.toString()}
-                                                </EuiBadge>
-                                            ) : (
-                                                productBlockInstanceValue.value
-                                            )}
-                                        </td>
-                                    </tr>
+                                    <WfoProductBlockKeyValueRow
+                                        fieldValue={productBlockInstanceValue}
+                                        key={index}
+                                    />
                                 ))}
                         </tbody>
                     </table>

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoSubscriptionProductBlock';
+export * from './WfoProductBlockKeyValueRow';