@orchestrator-ui/orchestrator-ui-components 4.1.1 → 5.0.0

package/package.json

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

package/src/components/WfoBadges/WfoSubscriptionStatusBadge/WfoSubscriptionStatusBadge.tsx

@@ -5,15 +5,16 @@ import { SubscriptionStatus } from '../../../types';
 import { WfoBadge } from '../WfoBadge';
 
 export type WfoSubscriptionStatusBadgeProps = {
-    status: SubscriptionStatus;
+    status?: SubscriptionStatus;
 };
 
 export const WfoSubscriptionStatusBadge: FC<
     WfoSubscriptionStatusBadgeProps
 > = ({ status }) => {
     const { theme, toSecondaryColor } = useOrchestratorTheme();
+    const lowerCaseStatus = status?.toLowerCase() || '';
 
-    const getBadgeColorFromStatus = (status: string) => {
+    const getBadgeColorFromStatus = () => {
         const {
             primary,
             darkestShade,
@@ -23,7 +24,7 @@ export const WfoSubscriptionStatusBadge: FC<
             successText,
         } = theme.colors;
 
-        switch (status.toLowerCase()) {
+        switch (lowerCaseStatus) {
             case SubscriptionStatus.ACTIVE:
                 return {
                     badgeColor: toSecondaryColor(success),
@@ -43,11 +44,11 @@ export const WfoSubscriptionStatusBadge: FC<
         }
     };
 
-    const { badgeColor, textColor } = getBadgeColorFromStatus(status);
+    const { badgeColor, textColor } = getBadgeColorFromStatus();
 
     return (
         <WfoBadge textColor={textColor} color={badgeColor}>
-            {status.toLowerCase()}
+            {lowerCaseStatus}
         </WfoBadge>
     );
 };

package/src/components/WfoBadges/WfoWorkflowTargetBadge/WfoWorkflowTargetBadge.tsx

@@ -38,6 +38,7 @@ export const WfoWorkflowTargetBadge: FC<WfoWorkflowTargetBadgeProps> = ({
                     textColor: primaryText,
                 };
             case WorkflowTarget.SYSTEM:
+            case WorkflowTarget.VALIDATE:
                 return {
                     badgeColor: toSecondaryColor(warning),
                     textColor: warningText,

package/src/components/WfoButtonComboBox/WfoButtonComboBox.tsx

@@ -0,0 +1,79 @@
+import React, { FC, useEffect, useState } from 'react';
+
+import {
+    EuiPopover,
+    EuiSelectable,
+    EuiSelectableOption,
+    EuiSpacer,
+    EuiText,
+} from '@elastic/eui';
+
+import { getWfoButtonComboBoxStyles } from '@/components/WfoButtonComboBox/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+export type WfoStartButtonComboBoxProps = {
+    options: EuiSelectableOption[];
+    onOptionChange: (selectedOption: EuiSelectableOption) => void;
+    title?: string;
+    children: (togglePopover: () => void) => React.ReactElement;
+    className?: string;
+};
+
+export const WfoButtonComboBox: FC<WfoStartButtonComboBoxProps> = ({
+    options,
+    onOptionChange,
+    title,
+    children,
+    className,
+}) => {
+    const [isPopoverOpen, setPopoverOpen] = useState(false);
+    const [optionsState, setOptionsState] =
+        useState<EuiSelectableOption[]>(options);
+
+    const { selectableStyle, titleStyle } = useWithOrchestratorTheme(
+        getWfoButtonComboBoxStyles,
+    );
+
+    useEffect(() => {
+        if (!isPopoverOpen) {
+            setOptionsState(options);
+        }
+    }, [isPopoverOpen, options]);
+
+    return (
+        <EuiPopover
+            initialFocus={`.euiSelectable .euiFieldSearch`}
+            button={children(() => setPopoverOpen(!isPopoverOpen))}
+            isOpen={isPopoverOpen}
+            closePopover={() => setPopoverOpen(false)}
+        >
+            {title && (
+                <>
+                    <EuiText size="s" css={titleStyle}>
+                        {title}
+                    </EuiText>
+                    <EuiSpacer size="s"></EuiSpacer>
+                </>
+            )}
+            <EuiSelectable
+                className={className}
+                css={selectableStyle}
+                options={optionsState}
+                searchable
+                onChange={(options, _, changedOption) => {
+                    onOptionChange(changedOption);
+                    setOptionsState(options);
+                }}
+                height={200}
+            >
+                {(list, search) => (
+                    <>
+                        {search}
+                        <EuiSpacer size="s" />
+                        {list}
+                    </>
+                )}
+            </EuiSelectable>
+        </EuiPopover>
+    );
+};

package/src/components/WfoButtonComboBox/index.ts

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

package/src/components/WfoButtonComboBox/styles.ts

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+
+import { WfoTheme } from '@/hooks';
+
+export const getWfoButtonComboBoxStyles = ({ theme }: WfoTheme) => {
+    const selectableStyle = css({
+        '.euiFieldSearch': {
+            backgroundColor: theme.colors.body,
+            color: theme.colors.text,
+            '&:focus': {
+                backgroundColor: theme.colors.emptyShade,
+            },
+        },
+
+        '.euiSelectableList .euiSelectableListItem': {
+            borderColor: theme.colors.lightShade,
+        },
+    });
+
+    const titleStyle = css({
+        fontWeight: theme.font.weight.semiBold,
+    });
+
+    return {
+        selectableStyle,
+        titleStyle,
+    };
+};

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

@@ -32,7 +32,7 @@ interface SubscriptionSummaryDisplayProps {
 const SubscriptionSummaryDisplay = ({
     subscriptionId,
 }: SubscriptionSummaryDisplayProps) => {
-    const { data, isFetching } = useGetSubscriptionDetailQuery({
+    const { data } = useGetSubscriptionDetailQuery({
         subscriptionId,
     });
     const subscriptionDetail = data?.subscription;
@@ -42,10 +42,7 @@ const SubscriptionSummaryDisplay = ({
     }
 
     return (
-        <WfoSubscriptionDetailSection
-            subscriptionDetail={subscriptionDetail}
-            isFetching={isFetching}
-        />
+        <WfoSubscriptionDetailSection subscriptionDetail={subscriptionDetail} />
     );
 };
 

package/src/components/WfoSubscription/WfoInSyncField.tsx

@@ -1,10 +1,13 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
 import { EuiButton } from '@elastic/eui';
 
+import { WfoIsAllowedToRender } from '@/components';
+import { WfoInsyncIcon } from '@/components';
+import { PATH_TASKS, PATH_WORKFLOWS } from '@/components';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import { useOrchestratorTheme, useShowToastMessage } from '@/hooks';
@@ -12,37 +15,36 @@ import { useSetSubscriptionInSyncMutation } from '@/rtk/endpoints';
 import { SubscriptionDetail, ToastTypes } from '@/types';
 import { formatDate } from '@/utils';
 
-import { WfoIsAllowedToRender } from '../WfoAuth/WfoIsAllowedToRender';
-import { WfoInsyncIcon } from '../WfoInsyncIcon/WfoInsyncIcon';
-import { PATH_TASKS, PATH_WORKFLOWS } from '../WfoPageTemplate';
 import { getLastUncompletedProcess, getLatestTaskDate } from './utils';
 
 interface WfoInSyncFieldProps {
     subscriptionDetail: SubscriptionDetail;
-    isFetching: boolean;
 }
 
-export const WfoInSyncField = ({
-    subscriptionDetail,
-    isFetching,
-}: WfoInSyncFieldProps) => {
+export const WfoInSyncField = ({ subscriptionDetail }: WfoInSyncFieldProps) => {
     const t = useTranslations('subscriptions.detail');
     const { theme } = useOrchestratorTheme();
-    const inSync = subscriptionDetail.insync;
+    const [inSync, setInSync] = useState<boolean>(subscriptionDetail.insync);
     const lastTaskRunDate = getLatestTaskDate(
-        subscriptionDetail.processes.page,
+        subscriptionDetail.processes?.page,
     );
     const lastUncompletedProcess = getLastUncompletedProcess(
-        subscriptionDetail.processes.page,
+        subscriptionDetail?.processes?.page,
     );
-    const [setSubscriptionInSync] = useSetSubscriptionInSyncMutation();
+    const [setSubscriptionInSync, { isLoading }] =
+        useSetSubscriptionInSyncMutation();
     const { showToastMessage } = useShowToastMessage();
     const { showConfirmDialog } = useContext(ConfirmationDialogContext);
 
+    useEffect(() => {
+        setInSync(subscriptionDetail.insync);
+    }, [subscriptionDetail.insync]);
+
     const setInSyncAction = () => {
         setSubscriptionInSync(subscriptionDetail.subscriptionId)
             .unwrap()
             .then(() => {
+                setInSync(true);
                 showToastMessage(
                     ToastTypes.SUCCESS,
                     t('setInSyncSuccess.text'),
@@ -88,8 +90,8 @@ export const WfoInSyncField = ({
                 </Link>
                 <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>
                     <EuiButton
-                        isLoading={isFetching}
-                        isDisabled={isFetching}
+                        isLoading={isLoading}
+                        isDisabled={isLoading}
                         color="danger"
                         size="s"
                         onClick={confirmSetInSync}

package/src/components/WfoSubscription/WfoSubscription.tsx

@@ -43,10 +43,9 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
         );
     })();
 
-    const { data, isLoading, isError, isFetching } =
-        useGetSubscriptionDetailQuery({
-            subscriptionId,
-        });
+    const { data, isLoading, isError } = useGetSubscriptionDetailQuery({
+        subscriptionId,
+    });
 
     const onSelectedTabChanged = (tab: SubscriptionDetailTab) => {
         setActiveTab(tab);
@@ -100,14 +99,14 @@ export const WfoSubscription = ({ subscriptionId }: WfoSubscriptionProps) => {
                         {selectedTab === SubscriptionDetailTab.GENERAL_TAB && (
                             <WfoSubscriptionGeneral
                                 subscriptionDetail={subscriptionDetail}
-                                isFetching={isFetching}
                             />
                         )}
                         {selectedTab === SubscriptionDetailTab.PROCESSES_TAB &&
-                            data && (
+                            data &&
+                            subscriptionDetail.processes?.page && (
                                 <WfoProcessesTimeline
                                     subscriptionDetailProcesses={
-                                        subscriptionDetail.processes.page
+                                        subscriptionDetail.processes?.page
                                     }
                                 />
                             )}

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActions.tsx

@@ -238,16 +238,16 @@ export const WfoSubscriptionActions: FC<WfoSubscriptionActionsProps> = ({
                             PolicyResource.SUBSCRIPTION_VALIDATE +
                                 subscriptionId,
                         ) &&
-                        subscriptionActions.system && (
+                        subscriptionActions.validate && (
                             <>
                                 <MenuBlock title={t('tasks')}></MenuBlock>
-                                {subscriptionActions.system.map(
+                                {subscriptionActions.validate.map(
                                     (action, index) => (
                                         <MenuItem
                                             key={`s_${index}`}
                                             action={action}
                                             index={index}
-                                            target={WorkflowTarget.SYSTEM}
+                                            target={WorkflowTarget.VALIDATE}
                                             isTask={true}
                                         />
                                     ),

package/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx

@@ -2,9 +2,22 @@ import React, { useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import {
+    EuiCallOut,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiSelectableOption,
+    EuiText,
+} from '@elastic/eui';
+import { EuiSelectableOptionCheckedType } from '@elastic/eui/src/components/selectable/selectable_option';
 
-import { PATH_SUBSCRIPTIONS, WfoLoading, WfoTextAnchor } from '@/components';
+import {
+    PATH_SUBSCRIPTIONS,
+    WfoLoading,
+    WfoTextAnchor,
+    mapProductBlockInstancesToEuiSelectableOptions,
+} from '@/components';
+import { WfoButtonComboBox } from '@/components/WfoButtonComboBox';
 import { TreeContext, TreeContextType } from '@/contexts';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import {
@@ -21,6 +34,8 @@ import { WfoSubscriptionProductBlock } from './WfoSubscriptionProductBlock';
 import { getSubscriptionDetailStyles } from './styles';
 import { getProductBlockTitle } from './utils';
 
+const EUI_OPTION_CHECKED_STATE_ON: EuiSelectableOptionCheckedType = 'on';
+
 interface WfoSubscriptionDetailTreeProps {
     productBlockInstances: ProductBlockInstance[];
     subscriptionId: Subscription['subscriptionId'];
@@ -38,8 +53,14 @@ export const WfoSubscriptionDetailTree = ({
     const { productBlockTreeWidth } = useWithOrchestratorTheme(
         getSubscriptionDetailStyles,
     );
-    const { selectedIds, expandAll, collapseAll, resetSelection, selectAll } =
-        React.useContext(TreeContext) as TreeContextType;
+    const {
+        selectedIds,
+        expandAll,
+        resetSelection,
+        selectAll,
+        selectIds,
+        deselectIds,
+    } = React.useContext(TreeContext) as TreeContextType;
 
     let tree: TreeBlock | null = null;
     const depthList: number[] = [];
@@ -99,7 +120,6 @@ export const WfoSubscriptionDetailTree = ({
     const toggleShowAll = () => {
         if (selectedIds.length === productBlockInstances.length) {
             resetSelection();
-            collapseAll();
         } else {
             selectAll();
             expandAll();
@@ -130,6 +150,18 @@ export const WfoSubscriptionDetailTree = ({
 
     const headerHeight = 265; // The height of the header part of the page that needs to be subtracted from 100vh to fit the page
 
+    const handleOptionChange = (changedOption: EuiSelectableOption) => {
+        if (changedOption.data?.ids === undefined) {
+            return;
+        }
+
+        const { checked, data } = changedOption;
+        const shouldAddIds = checked === EUI_OPTION_CHECKED_STATE_ON;
+
+        expandAll();
+        return shouldAddIds ? selectIds(data.ids) : deselectIds(data.ids);
+    };
+
     return (
         <EuiFlexGroup
             css={{
@@ -158,15 +190,33 @@ export const WfoSubscriptionDetailTree = ({
                                 </EuiText>
                             </EuiFlexItem>
                             <EuiFlexItem grow={false}>
-                                <WfoTextAnchor
-                                    text={t(
-                                        selectedIds.length ===
-                                            productBlockInstances.length
-                                            ? 'hideAll'
-                                            : 'showAll',
-                                    )}
-                                    onClick={toggleShowAll}
-                                />
+                                <EuiFlexGroup>
+                                    <WfoTextAnchor
+                                        text={t(
+                                            selectedIds.length ===
+                                                productBlockInstances.length
+                                                ? 'hideAll'
+                                                : 'showAll',
+                                        )}
+                                        onClick={toggleShowAll}
+                                    />
+                                    <WfoButtonComboBox
+                                        options={mapProductBlockInstancesToEuiSelectableOptions(
+                                            productBlockInstances,
+                                        )}
+                                        onOptionChange={handleOptionChange}
+                                        title={t('selectByNameTitle')}
+                                    >
+                                        {(togglePopover) => (
+                                            <WfoTextAnchor
+                                                text={t(
+                                                    'selectByNameButtonText',
+                                                )}
+                                                onClick={togglePopover}
+                                            />
+                                        )}
+                                    </WfoButtonComboBox>
+                                </EuiFlexGroup>
                             </EuiFlexItem>
                         </EuiFlexGroup>
                     </EuiFlexItem>

package/src/components/WfoSubscription/WfoSubscriptionGeneral.tsx

@@ -15,7 +15,6 @@ import { toOptionalArrayEntry } from '@/utils';
 
 interface WfoSubscriptionGeneralProps {
     subscriptionDetail: SubscriptionDetail;
-    isFetching: boolean;
 }
 
 export enum WfoSubscriptionGeneralSections {
@@ -27,7 +26,6 @@ export enum WfoSubscriptionGeneralSections {
 
 export const WfoSubscriptionGeneral = ({
     subscriptionDetail,
-    isFetching,
 }: WfoSubscriptionGeneralProps) => {
     const { overrideSections } =
         useSubscriptionDetailGeneralSectionConfigurationOverride();
@@ -43,7 +41,6 @@ export const WfoSubscriptionGeneral = ({
             node: (
                 <WfoSubscriptionDetailSection
                     subscriptionDetail={subscriptionDetail}
-                    isFetching={isFetching}
                 />
             ),
         },

package/src/components/WfoSubscription/WfoSubscriptionGeneralSections/WfoSubscriptionDetailSection.tsx

@@ -13,12 +13,10 @@ import { SubscriptionDetail } from '@/types';
 import { formatDate } from '@/utils';
 
 interface WfoSubscriptionDetailSectionProps {
-    isFetching: boolean;
     subscriptionDetail: SubscriptionDetail;
 }
 
 export const WfoSubscriptionDetailSection = ({
-    isFetching,
     subscriptionDetail,
 }: WfoSubscriptionDetailSectionProps) => {
     const t = useTranslations('subscriptions.detail');
@@ -62,12 +60,7 @@ export const WfoSubscriptionDetailSection = ({
         },
         {
             key: t('insync'),
-            value: (
-                <WfoInSyncField
-                    subscriptionDetail={subscriptionDetail}
-                    isFetching={isFetching}
-                />
-            ),
+            value: <WfoInSyncField subscriptionDetail={subscriptionDetail} />,
         },
         {
             key: t('customer'),

package/src/components/WfoSubscription/utils/utils.spec.ts

@@ -3,6 +3,7 @@ import { EuiThemeComputed } from '@elastic/eui';
 import {
     FieldValue,
     ProcessStatus,
+    ProductBlockInstance,
     SubscriptionAction,
     SubscriptionDetailProcess,
     WorkflowTarget,
@@ -15,6 +16,7 @@ import {
     getProductBlockTitle,
     getWorkflowTargetColor,
     getWorkflowTargetIconContent,
+    mapProductBlockInstancesToEuiSelectableOptions,
 } from './utils';
 
 describe('getFieldFromProductBlockInstanceValues()', () => {
@@ -347,3 +349,122 @@ describe('getLatestTaskDate', () => {
         expect(lastTaskDate).toBe('2021-04-01T00:00:00Z');
     });
 });
+
+describe('mapProductBlockInstancesToEuiSelectableOptions', () => {
+    const baseProductBlockInstance: Omit<
+        ProductBlockInstance,
+        'id' | 'productBlockInstanceValues'
+    > = {
+        subscriptionInstanceId: '',
+        parent: null,
+        inUseByRelations: [],
+        subscription: {
+            subscriptionId: '',
+            description: '',
+        },
+    };
+
+    it('maps product block instances to EuiSelectableOptions', () => {
+        // Given
+        const productBlockInstances: ProductBlockInstance[] = [
+            {
+                ...baseProductBlockInstance,
+                id: 0,
+                productBlockInstanceValues: [
+                    {
+                        field: 'name',
+                        value: 'test1',
+                    },
+                ],
+            },
+            {
+                ...baseProductBlockInstance,
+                id: 1,
+                productBlockInstanceValues: [
+                    {
+                        field: 'name',
+                        value: 'test2',
+                    },
+                ],
+            },
+        ];
+
+        // When
+        const result = mapProductBlockInstancesToEuiSelectableOptions(
+            productBlockInstances,
+        );
+
+        // Then
+        expect(result).toEqual([
+            {
+                label: 'test1',
+                data: {
+                    ids: [0],
+                },
+            },
+            {
+                label: 'test2',
+                data: {
+                    ids: [1],
+                },
+            },
+        ]);
+    });
+
+    it('maps product block instances to EuiSelectableOptions and groups ids by name', () => {
+        // Given
+        const productBlockInstances: ProductBlockInstance[] = [
+            {
+                ...baseProductBlockInstance,
+                id: 0,
+                productBlockInstanceValues: [
+                    {
+                        field: 'name',
+                        value: 'test1',
+                    },
+                ],
+            },
+            {
+                ...baseProductBlockInstance,
+                id: 1,
+                productBlockInstanceValues: [
+                    {
+                        field: 'name',
+                        value: 'test2',
+                    },
+                ],
+            },
+            {
+                ...baseProductBlockInstance,
+                id: 2,
+                productBlockInstanceValues: [
+                    {
+                        field: 'name',
+                        value: 'test1',
+                    },
+                ],
+            },
+        ];
+
+        // When
+        const result = mapProductBlockInstancesToEuiSelectableOptions(
+            productBlockInstances,
+        );
+
+        // Then
+        expect(result).toEqual([
+            {
+                label: 'test1',
+                data: {
+                    ids: [0, 2],
+                },
+            },
+            {
+                label: 'test2',
+                data: {
+                    ids: [1],
+                },
+            },
+        ]);
+    });
+});