@orchestrator-ui/orchestrator-ui-components 2.8.0 → 2.8.2

package/package.json

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

package/src/components/WfoFilterTabs/WfoFilterTabs.tsx

@@ -4,6 +4,10 @@ import { useTranslations } from 'next-intl';
 
 import { EuiTab, EuiTabs } from '@elastic/eui';
 
+import { useWithOrchestratorTheme } from '@/hooks';
+
+import { getStyles } from './styles';
+
 export type FilterQuery<DataType> = {
     field: keyof DataType;
     value: string;
@@ -14,6 +18,7 @@ export type WfoFilterTab<TabType, DataType = object> = {
     translationKey: string;
     alwaysOnFilters?: FilterQuery<DataType>[];
     prepend?: React.ReactNode | string;
+    append?: React.ReactNode | string;
 };
 
 export type WfoFilterTabsProps<TabType, DataType> = {
@@ -30,18 +35,23 @@ export const WfoFilterTabs = <TabType extends string, DataType>({
     onChangeTab,
 }: WfoFilterTabsProps<TabType, DataType>) => {
     const t = useTranslations(translationNamespace);
+    const { tabStyle } = useWithOrchestratorTheme(getStyles);
     return (
         <EuiTabs>
-            {tabs.map(({ id, translationKey: name, prepend = '' }) => (
-                <EuiTab
-                    key={id}
-                    isSelected={id === selectedTab}
-                    onClick={() => id !== selectedTab && onChangeTab(id)}
-                    prepend={prepend}
-                >
-                    {t(name)}
-                </EuiTab>
-            ))}
+            {tabs.map(
+                ({ id, translationKey: name, prepend = '', append = '' }) => (
+                    <EuiTab
+                        css={tabStyle}
+                        key={id}
+                        isSelected={id === selectedTab}
+                        onClick={() => id !== selectedTab && onChangeTab(id)}
+                        prepend={prepend}
+                        append={append}
+                    >
+                        {t(name)}
+                    </EuiTab>
+                ),
+            )}
         </EuiTabs>
     );
 };

package/src/components/WfoFilterTabs/styles.ts

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

package/src/components/WfoForms/formFields/SelectField/SelectField.tsx

@@ -98,7 +98,9 @@ export function UnconnectedSelectField({
         useWithOrchestratorTheme(getSelectFieldStyles);
 
     useEffect(() => {
-        onChange(selectedValue?.value);
+        if (selectedValue && selectedValue.value !== 'undefined') {
+            onChange(selectedValue.value);
+        }
     }, []);
 
     if (fieldType === Array) {

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

@@ -18,7 +18,7 @@ import {
     WfoProductBlockKeyValueRow,
     WfoValueCell,
 } from '@/components';
-import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
+import { useWithOrchestratorTheme } from '@/hooks';
 import { ProductBlockInstance, Subscription } from '@/types';
 import { getFirstUuidPart } from '@/utils';
 
@@ -41,9 +41,9 @@ export const WfoSubscriptionProductBlock = ({
     subscriptionId,
 }: WfoSubscriptionProductBlockProps) => {
     const t = useTranslations('subscriptions.detail');
-    const { theme } = useOrchestratorTheme();
     const {
         iconStyle,
+        iconOutsideCurrentSubscriptionStyle,
         panelStyle,
         panelStyleOutsideCurrentSubscription,
         leftColumnStyle,
@@ -79,11 +79,14 @@ export const WfoSubscriptionProductBlock = ({
             >
                 <EuiFlexGroup>
                     <EuiFlexItem grow={false}>
-                        <div css={iconStyle}>
-                            <EuiIcon
-                                type="filebeatApp"
-                                color={theme.colors.primary}
-                            />
+                        <div
+                            css={
+                                isOutsideCurrentSubscription
+                                    ? iconOutsideCurrentSubscriptionStyle
+                                    : iconStyle
+                            }
+                        >
+                            <EuiIcon type="filebeatApp" color="currentColor" />
                         </div>
                     </EuiFlexItem>
                     <EuiFlexItem>

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

@@ -8,17 +8,29 @@ export const getStyles = (wfoTheme: WfoTheme) => {
         width: 45,
         height: 45,
         backgroundColor: toSecondaryColor(theme.colors.primary),
+        color: theme.colors.primary,
         paddingTop: 13,
         paddingLeft: 15,
         borderRadius: 7,
     });
 
+    const iconOutsideCurrentSubscriptionStyle = css([
+        iconStyle,
+        {
+            backgroundColor: theme.colors.lightShade,
+            color: theme.colors.darkestShade,
+        },
+    ]);
+
     const panelStyle = css({
-        backgroundColor: theme.colors.lightestShade,
+        backgroundColor: toSecondaryColor(
+            toSecondaryColor(theme.colors.primary),
+        ),
+        border: `solid 1px ${toSecondaryColor(theme.colors.primary)}`,
     });
 
     const panelStyleOutsideCurrentSubscription = css({
-        backgroundColor: toSecondaryColor(theme.colors.lightestShade),
+        backgroundColor: toSecondaryColor(theme.colors.emptyShade),
         border: `dashed 1px ${theme.colors.lightShade}`,
     });
 
@@ -51,6 +63,7 @@ export const getStyles = (wfoTheme: WfoTheme) => {
 
     return {
         iconStyle,
+        iconOutsideCurrentSubscriptionStyle,
         panelStyle,
         leftColumnStyle,
         leftColumnStyleWithAlignSelf,

package/src/components/WfoTable/WfoRowContextMenu/WfoRowContextMenu.tsx

@@ -0,0 +1,55 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+
+import {
+    EuiButtonIcon,
+    EuiContextMenu,
+    EuiContextMenuPanelDescriptor,
+    EuiPopover,
+} from '@elastic/eui';
+
+import { WfoDotsHorizontal } from '@/icons/WfoDotsHorizontal';
+
+export type WfoRowContextMenuProps = {
+    items: EuiContextMenuPanelDescriptor[];
+    onOpenContextMenu?: () => void;
+};
+
+export const WfoRowContextMenu: FC<WfoRowContextMenuProps> = ({
+    items,
+    onOpenContextMenu,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const onOpenContextMenuRef = useRef(onOpenContextMenu);
+
+    useEffect(() => {
+        if (isOpen) {
+            onOpenContextMenuRef.current?.();
+        }
+    }, [isOpen, onOpenContextMenuRef]);
+
+    const closePopover = () => setIsOpen(false);
+    const togglePopover = () => setIsOpen(!isOpen);
+
+    return (
+        <EuiPopover
+            button={
+                <EuiButtonIcon
+                    iconType={() => <WfoDotsHorizontal />}
+                    onClick={togglePopover}
+                    aria-label="Row context menu"
+                />
+            }
+            isOpen={isOpen}
+            closePopover={closePopover}
+            panelPaddingSize="none"
+            anchorPosition="leftUp"
+        >
+            <EuiContextMenu
+                initialPanelId={0}
+                panels={items}
+                onClick={closePopover}
+            />
+        </EuiPopover>
+    );
+};

package/src/components/WfoTable/WfoRowContextMenu/index.ts

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

package/src/components/WfoTable/index.ts

@@ -12,6 +12,7 @@ export * from './WfoTableWithFilter';
 export * from './WfoSortButtons';
 export * from './WfoFirstPartUUID';
 export * from './WfoInlineJson';
+export * from './WfoRowContextMenu';
 
 export * from './WfoAdvancedTable';
 export * from './WfoTable';

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx

@@ -19,33 +19,35 @@ import { WfoCode, WfoEyeFill } from '@/icons';
 import { getStyles } from '../styles';
 
 export type WfoStepListHeaderProps = {
+    allDetailToggleText: string;
+    showDelta: boolean;
     showHiddenKeys: boolean;
     showRaw: boolean;
-    showDelta: boolean;
     showTraceback: boolean;
     showTracebackButton: boolean;
-    allDetailToggleText: string;
+    isRunningWorkflow: boolean;
+    isTask: boolean;
+    onChangeShowDelta: (showDelta: boolean) => void;
     onChangeShowRaw: (showRaw: boolean) => void;
-    onChangeShowDelta: (showRaw: boolean) => void;
     onChangeShowHiddenKeys: (showHiddenKeys: boolean) => void;
     onShowTraceback: (showTraceback: boolean) => void;
     onToggleAllDetailsIsOpen: () => void;
-    isTask: boolean;
 };
 
 export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
+    allDetailToggleText,
+    showDelta,
     showHiddenKeys,
     showRaw,
-    showDelta,
     showTraceback,
     showTracebackButton,
-    onChangeShowHiddenKeys,
-    onChangeShowRaw,
+    isRunningWorkflow,
+    isTask,
     onChangeShowDelta,
-    allDetailToggleText,
-    onToggleAllDetailsIsOpen,
+    onChangeShowRaw,
+    onChangeShowHiddenKeys,
     onShowTraceback,
-    isTask,
+    onToggleAllDetailsIsOpen,
 }) => {
     const t = useTranslations('processes.steps');
     const { theme } = useOrchestratorTheme();
@@ -107,9 +109,18 @@ export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
                 )}
                 <EuiButton
                     onClick={() => onChangeShowDelta(!showDelta)}
+                    disabled={isRunningWorkflow}
                     iconSide="right"
                     size="s"
-                    iconType={() => <WfoCode color={theme.colors.link} />}
+                    iconType={() => (
+                        <WfoCode
+                            color={
+                                isRunningWorkflow
+                                    ? theme.colors.disabledText
+                                    : theme.colors.link
+                            }
+                        />
+                    )}
                 >
                     {showDelta ? t('hideDelta') : t('showDelta')}
                 </EuiButton>

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx

@@ -12,7 +12,7 @@ import {
 import WfoDiff from '@/components/WfoDiff/WfoDiff';
 import { WfoTraceback } from '@/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback';
 import { useGetRawProcessDetailQuery } from '@/rtk/endpoints/processDetail';
-import { Step, StepStatus } from '@/types';
+import { ProcessStatus, Step, StepStatus } from '@/types';
 import { InputForm } from '@/types/forms';
 
 export type StepListItem = {
@@ -23,6 +23,7 @@ export type StepListItem = {
 
 export interface WfoWorkflowStepListProps {
     steps: Step[];
+    lastStatus: ProcessStatus;
     traceBack: string | null;
     startedAt: string;
     processId: string;
@@ -66,6 +67,7 @@ export const WfoWorkflowStepList = React.forwardRef(
     (
         {
             steps = [],
+            lastStatus,
             traceBack,
             startedAt,
             processId,
@@ -164,6 +166,15 @@ export const WfoWorkflowStepList = React.forwardRef(
                 isExpanded: true,
             }));
 
+        // The value of lastStatus is not in lowercase despite the ProcessStatus enum definition
+        const isRunningWorkflow: boolean = ![
+            ProcessStatus.FAILED,
+            ProcessStatus.ABORTED,
+            ProcessStatus.COMPLETED,
+        ]
+            .map((status) => status.toLowerCase())
+            .includes(lastStatus.toLowerCase());
+
         return (
             <>
                 <WfoStepListHeader
@@ -183,6 +194,7 @@ export const WfoWorkflowStepList = React.forwardRef(
                     }
                     onShowTraceback={setShowTraceback}
                     isTask={isTask}
+                    isRunningWorkflow={isRunningWorkflow}
                 />
                 {showTraceback && <WfoTraceback>{traceBack}</WfoTraceback>}
                 {showRaw && <WfoProcessRawData processId={processId} />}

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.8.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.8.2';

package/src/icons/WfoDotsHorizontal.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons/WfoIconProps';
+
+export const WfoDotsHorizontal: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/dots-horizontal</title>
+        <g
+            id="Symbols"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g id="icon/dots-horizontal" fill={color} fillRule="nonzero">
+                <path
+                    d="M8,12 C8,13.1046 7.10457,14 6,14 C4.89543,14 4,13.1046 4,12 C4,10.89543 4.89543,10 6,10 C7.10457,10 8,10.89543 8,12 Z M14,12 C14,13.1046 13.1046,14 12,14 C10.89543,14 10,13.1046 10,12 C10,10.89543 10.89543,10 12,10 C13.1046,10 14,10.89543 14,12 Z M18,14 C19.1046,14 20,13.1046 20,12 C20,10.89543 19.1046,10 18,10 C16.8954,10 16,10.89543 16,12 C16,13.1046 16.8954,14 18,14 Z"
+                    id="Combined-Shape"
+                ></path>
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/heroicons/WfoHeroIconsWrapper.tsx

@@ -22,6 +22,7 @@ export const WfoHeroIconsWrapper: FC<WfoHeroIconsWrapperProps> = ({
                 marginRight: theme.size.xs,
                 display: 'flex',
                 alignItems: 'center',
+                height: '100%',
             }}
         >
             {children}

package/src/icons/heroicons/WfoWrench.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from '@/icons';
+
+import { withWfoHeroIconsWrapper } from './WfoHeroIconsWrapper';
+
+const WfoWrenchSvg: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        fill={color}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fillRule="evenodd"
+            d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025.75.75 0 0 1 .313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 0 1 1.248.313 5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
+            clipRule="evenodd"
+        />
+    </svg>
+);
+
+export const WfoWrench = withWfoHeroIconsWrapper(WfoWrenchSvg);

package/src/icons/heroicons/index.ts

@@ -1,2 +1,4 @@
-export * from './WfoArrowsUpDown';
 export * from './WfoHeroIconsWrapper';
+
+export * from './WfoArrowsUpDown';
+export * from './WfoWrench';

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -62,6 +62,7 @@ export const WfoProcessDetailPage = ({
                 (processDetail !== undefined && (
                     <WfoWorkflowStepList
                         ref={stepListRef}
+                        lastStatus={processDetail.lastStatus}
                         processId={processDetail.processId}
                         steps={groupedSteps.flatMap(
                             (groupedStep) => groupedStep.steps,

package/src/rtk/endpoints/index.ts

@@ -10,6 +10,7 @@ export * from './relatedSubscriptions';
 export * from './settings';
 export * from './startOptions';
 export * from './streamMessages';
+export * from './subscriptionActions';
 export * from './subscriptionDetail';
 export * from './subscriptionInUseByRelationsList';
 export * from './subscriptionList';

package/src/rtk/endpoints/subscriptionActions.ts

@@ -27,4 +27,7 @@ const subscriptionActionsApi = orchestratorApi.injectEndpoints({
     }),
 });
 
-export const { useGetSubscriptionActionsQuery } = subscriptionActionsApi;
+export const {
+    useGetSubscriptionActionsQuery,
+    useLazyGetSubscriptionActionsQuery,
+} = subscriptionActionsApi;