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

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

@@ -1,16 +1,20 @@
 import { TranslationValues } from 'next-intl';
 
-import { EuiThemeComputed } from '@elastic/eui';
+import { EuiSelectableOption, EuiThemeComputed } from '@elastic/eui';
 
 import {
     FieldValue,
     ProcessStatus,
+    ProductBlockDefinition,
+    ProductBlockInstance,
     SortOrder,
     SubscriptionAction,
     SubscriptionDetailProcess,
     WorkflowTarget,
 } from '@/types';
 
+const PRODUCT_BLOCK_NAME_FIELD: keyof ProductBlockDefinition = 'name';
+
 export enum SubscriptionDetailTab {
     GENERAL_TAB = 'general',
     SERVICE_CONFIGURATION_TAB = 'service-configuration',
@@ -68,6 +72,7 @@ export const getWorkflowTargetColor = (
         case WorkflowTarget.MODIFY:
             return theme.colors.primaryText;
         case WorkflowTarget.SYSTEM:
+        case WorkflowTarget.VALIDATE:
             return theme.colors.warning;
         case WorkflowTarget.TERMINATE:
             return theme.colors.danger;
@@ -84,6 +89,7 @@ export const getWorkflowTargetIconContent = (
         case WorkflowTarget.CREATE:
             return 'C';
         case WorkflowTarget.SYSTEM:
+        case WorkflowTarget.VALIDATE:
             return 'T';
         case WorkflowTarget.TERMINATE:
             return 'X';
@@ -93,9 +99,9 @@ export const getWorkflowTargetIconContent = (
 };
 
 export const getLastUncompletedProcess = (
-    processes: SubscriptionDetailProcess[],
+    processes?: SubscriptionDetailProcess[],
 ): SubscriptionDetailProcess | undefined => {
-    if (processes.length === 0) {
+    if (!processes || processes.length === 0) {
         return;
     }
 
@@ -107,13 +113,13 @@ export const getLastUncompletedProcess = (
             return dateB.getTime() - dateA.getTime();
         });
 
-    return uncompletedProcesses.length > 0
+    return (uncompletedProcesses && uncompletedProcesses.length) > 0
         ? uncompletedProcesses[0]
         : undefined;
 };
 
-export const getLatestTaskDate = (processes: SubscriptionDetailProcess[]) => {
-    if (processes.length === 0) {
+export const getLatestTaskDate = (processes?: SubscriptionDetailProcess[]) => {
+    if (!processes || processes.length === 0) {
         return '';
     }
 
@@ -143,3 +149,33 @@ export const sortProcessesByDate = (
         }
     });
 };
+
+export const mapProductBlockInstancesToEuiSelectableOptions = (
+    productBlockInstances: ProductBlockInstance[],
+): EuiSelectableOption[] => {
+    const items2Map = productBlockInstances.reduce((acc, curr) => {
+        const name = getFieldFromProductBlockInstanceValues(
+            curr.productBlockInstanceValues,
+            PRODUCT_BLOCK_NAME_FIELD,
+        ).toString();
+
+        if (!name) {
+            console.error('Name field is missing', curr);
+        }
+
+        if (acc.has(name)) {
+            acc.get(name)?.push(curr.id);
+        } else {
+            acc.set(name, [curr.id]);
+        }
+
+        return acc;
+    }, new Map<string, number[]>());
+
+    return Array.from(items2Map).map(([label, ids]) => ({
+        label,
+        data: {
+            ids,
+        },
+    }));
+};

package/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoPopoverContent.tsx

@@ -0,0 +1,53 @@
+import React, { FC, useRef } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFieldSearch, EuiForm, EuiFormRow } from '@elastic/eui';
+
+import { getWfoBasicTableStyles } from '@/components/WfoTable/WfoTable/WfoTableHeaderCell/styles';
+import { useWithOrchestratorTheme } from '@/hooks';
+
+interface WfoPopoverContentProps {
+    onSearch?: (searchText: string) => void;
+    closePopover: () => void;
+    fieldName: string;
+}
+
+export const WfoPopoverContent: FC<WfoPopoverContentProps> = ({
+    onSearch,
+    closePopover,
+    fieldName,
+}) => {
+    const { headerCellPopoverContentStyle } = useWithOrchestratorTheme(
+        getWfoBasicTableStyles,
+    );
+    const t = useTranslations('common');
+
+    const inputRef = useRef<HTMLInputElement | null>(null);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        const newValue = inputRef.current?.value || '';
+        onSearch?.(newValue);
+        if (inputRef.current) inputRef.current.value = '';
+        closePopover();
+    };
+
+    return (
+        <div css={headerCellPopoverContentStyle}>
+            <EuiForm component="form" onSubmit={handleSubmit}>
+                <EuiFormRow>
+                    <EuiFieldSearch
+                        className={fieldName}
+                        placeholder={t('search')}
+                        inputRef={(input) => {
+                            inputRef.current = input;
+                        }}
+                        isClearable={false}
+                        name={`search-${fieldName}`}
+                    />
+                </EuiFormRow>
+            </EuiForm>
+        </div>
+    );
+};

package/src/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoTableHeaderCell.tsx

@@ -1,20 +1,18 @@
 import React, { FC, useState } from 'react';
 
-import { useTranslations } from 'next-intl';
-
 import {
-    EuiFieldSearch,
     EuiHorizontalRule,
     EuiPopover,
     EuiText,
     useGeneratedHtmlId,
 } from '@elastic/eui';
 
+import { WfoSortDirectionIcon } from '@/components';
+import { WfoPopoverContent } from '@/components/WfoTable/WfoTable/WfoTableHeaderCell/WfoPopoverContent';
 import { getUpdatedSortOrder } from '@/components/WfoTable/WfoTable/utils';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { SortOrder } from '@/types';
 
-import { WfoSortDirectionIcon } from './WfoSortDirectionIcon';
 import {
     HEADER_CELL_SORT_BUTTON_CLASS,
     HEADER_CELL_TITLE_BUTTON_CLASS,
@@ -41,11 +39,9 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
         getHeaderCellContentStyle,
         headerCellPopoverHeaderStyle,
         headerCellPopoverHeaderTitleStyle,
-        headerCellPopoverContentStyle,
         getTitleButtonStyle,
         sortButtonStyle,
     } = useWithOrchestratorTheme(getWfoBasicTableStyles);
-    const t = useTranslations('common');
 
     const isSortable = !!onSetSortOrder;
     const isFilterable = !!onSearch;
@@ -58,11 +54,6 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
     const handleButtonClick = () => setPopover(!isPopoverOpen);
     const closePopover = () => setPopover(false);
 
-    const handleSearch = (searchText: string) => {
-        onSearch?.(searchText);
-        closePopover();
-    };
-
     const WfoHeaderCellContentButton = () => (
         <button onClick={handleButtonClick} disabled={!isFilterable}>
             <div css={getHeaderCellContentStyle(isFilterable)}>{children}</div>
@@ -77,17 +68,6 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
         </div>
     );
 
-    const WfoPopoverContent = () => (
-        <div css={headerCellPopoverContentStyle}>
-            <EuiFieldSearch
-                className={fieldName}
-                placeholder={t('search')}
-                onSearch={handleSearch}
-                isClearable={false}
-            />
-        </div>
-    );
-
     return (
         <div css={headerCellStyle}>
             <EuiPopover
@@ -103,7 +83,11 @@ export const WfoTableHeaderCell: FC<WfoTableHeaderCellProps> = ({
             >
                 <WfoPopoverHeader />
                 <EuiHorizontalRule margin="none" />
-                <WfoPopoverContent />
+                <WfoPopoverContent
+                    fieldName={fieldName}
+                    onSearch={onSearch}
+                    closePopover={closePopover}
+                />
             </EuiPopover>
 
             {isSortable && (

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '4.1.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.0.0';

package/src/contexts/TreeContext.tsx

@@ -12,6 +12,8 @@ export type TreeContextType = {
     collapseAll: () => void;
     resetSelection: () => void;
     selectAll: () => void;
+    selectIds: (ids: number[]) => void;
+    deselectIds: (ids: number[]) => void;
 };
 
 export const TreeContext = React.createContext<TreeContextType | null>(null);
@@ -39,6 +41,18 @@ export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
         setSelectedIds(Array.from(Array(depths.length).keys()));
     };
 
+    const selectIds = (ids: number[]) => {
+        setSelectedIds((prevSelectedIds) =>
+            Array.from(new Set([...prevSelectedIds, ...ids])),
+        );
+    };
+
+    const deselectIds = (ids: number[]) => {
+        setSelectedIds((prevSelectedIds) =>
+            prevSelectedIds.filter((id) => !ids.includes(id)),
+        );
+    };
+
     const expandAll = () => {
         setExpandedIds(Array.from(Array(depths.length).keys()));
     };
@@ -96,6 +110,8 @@ export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
                 collapseAll,
                 resetSelection,
                 selectAll,
+                selectIds,
+                deselectIds,
             }}
         >
             {children}

package/src/messages/en-GB.json

@@ -363,6 +363,8 @@
             },
             "showAll": "Show all",
             "hideAll": "Hide all",
+            "selectByNameTitle": "Select product blocks by name",
+            "selectByNameButtonText": "Select by name",
             "see": "See",
             "setInSync": "Set in Sync",
             "setInSyncQuestion": "Are you sure you want to do this? You're about to force a subscription in sync. When it's clear why the subscription is out of sync this could enable you to start or finish a change on this subscription. When you're in doubt, please consult the network automators first as running workflows on subscriptions that are not in sync can potentially do great harm to the network.",

package/src/messages/nl-NL.json

@@ -360,6 +360,8 @@
             },
             "showAll": "Toon alles",
             "hideAll": "Verberg alles",
+            "selectByNameTitle": "Selecteer product blocks op naam",
+            "selectByNameButtonText": "Selecteer op naam",
             "see": "Bekijk",
             "setInSync": "Set in Sync",
             "setInSyncQuestion": "Weet je zeker dat je de subscription in-sync wilt zetten? Je gaat een subscription geforceerd in-sync zetten. Alleen als je zeker weet wat de reden is van out-of-sync kun je de actie uitvoeren, zodat je daarna wijzigingen kunt doorvoeren op deze subscription. Bij twijfel - check eerst bij de network automators of het in sync zetten van de subscription mogelijk schadelijke gevolgen kan hebben op het netwerk.",

package/src/rtk/endpoints/metadata/tasks.ts

@@ -18,13 +18,14 @@ query MetadataWorkflows(
         after: $after
         sortBy: $sortBy
         query: $query
-        filterBy: { field: "target", value: "SYSTEM" }
+        filterBy: { field: "isTask", value: "true" }
     ) {
         page {
             workflowId
             name
             description
             target
+            isTask
             products {
                 tag
             }
@@ -50,7 +51,7 @@ export type TasksResponse = {
 const tasksApi = orchestratorApi.injectEndpoints({
     endpoints: (builder) => ({
         getTasks: builder.query<
-            TasksResponse,
+            TasksResponse | undefined,
             GraphqlQueryVariables<TaskDefinition>
         >({
             query: (variables) => ({
@@ -58,8 +59,12 @@ const tasksApi = orchestratorApi.injectEndpoints({
                 variables,
             }),
             transformResponse: (
-                response: TaskDefinitionsResult,
-            ): TasksResponse => {
+                response: TaskDefinitionsResult | undefined,
+            ): TasksResponse | undefined => {
+                if (!response) {
+                    return undefined;
+                }
+
                 const tasks = response.workflows.page || [];
                 const pageInfo = response.workflows.pageInfo || {};
 

package/src/rtk/endpoints/metadata/workflows.ts

@@ -42,6 +42,7 @@ query MetadataWorkflows(
             name
             description
             target
+            isTask
             products {
                 tag
             }
@@ -76,7 +77,7 @@ export type WorkflowsResponse = {
 const workflowsApi = orchestratorApi.injectEndpoints({
     endpoints: (builder) => ({
         getWorkflows: builder.query<
-            WorkflowsResponse,
+            WorkflowsResponse | undefined,
             GraphqlQueryVariables<WorkflowDefinition>
         >({
             query: (variables) => ({
@@ -84,10 +85,14 @@ const workflowsApi = orchestratorApi.injectEndpoints({
                 variables,
             }),
             transformResponse: (
-                response: WorkflowDefinitionsResult,
-            ): WorkflowsResponse => {
-                const workflows = response.workflows.page || [];
-                const pageInfo = response.workflows.pageInfo || {};
+                response: WorkflowDefinitionsResult | undefined,
+            ): WorkflowsResponse | undefined => {
+                if (!response) {
+                    return undefined;
+                }
+
+                const workflows = response?.workflows.page || [];
+                const pageInfo = response?.workflows.pageInfo || {};
 
                 return {
                     workflows,

package/src/rtk/endpoints/startOptions.ts

@@ -16,6 +16,7 @@ const workflowOptionsQuery = `
                     productType
                     productId
                     name
+                    tag
                 }
             }
         }
@@ -24,7 +25,7 @@ const workflowOptionsQuery = `
 
 const taskOptionsQuery = `
     query StartOptions {
-        workflows(first: 1000000, after: 0, filterBy: [{ field: "target", value: "${WorkflowTarget.SYSTEM}"}]) {
+        workflows(first: 1000000, after: 0, filterBy: [{ field: "isTask", value: "true"}]) {
             page {
                 name
                 description
@@ -38,6 +39,7 @@ type WorkflowOption = {
     productName: ProductDefinition['name'];
     productId: ProductDefinition['productId'];
     productType: ProductDefinition['productType'];
+    productTag: ProductDefinition['tag'];
 };
 
 type WorkflowOptionsResult = StartOptionsResult<{
@@ -46,6 +48,7 @@ type WorkflowOptionsResult = StartOptionsResult<{
         name: ProductDefinition['name'];
         productId: ProductDefinition['productId'];
         productType: ProductDefinition['productType'];
+        tag: ProductDefinition['tag'];
     }[];
 }>;
 
@@ -65,9 +68,11 @@ const startButtonOptionsApi = orchestratorApi.injectEndpoints({
             query: () => ({
                 document: workflowOptionsQuery,
             }),
-            transformResponse: (response: WorkflowOptionsResult) => {
+            transformResponse: (
+                response: WorkflowOptionsResult | undefined,
+            ) => {
                 const startOptions: WorkflowOption[] = [];
-                const workflows = response.workflows?.page || [];
+                const workflows = response?.workflows?.page || [];
                 workflows.forEach((workflow) => {
                     const workflowName = workflow.name;
                     workflow.products.forEach((product) => {
@@ -76,6 +81,7 @@ const startButtonOptionsApi = orchestratorApi.injectEndpoints({
                             productName: product.name,
                             productId: product.productId,
                             productType: product.productType,
+                            productTag: product.tag,
                         });
                     });
                 });

package/src/types/types.ts

@@ -144,6 +144,7 @@ export enum WorkflowTarget {
     MODIFY = 'modify',
     TERMINATE = 'terminate',
     SYSTEM = 'system',
+    VALIDATE = 'validate',
 }
 
 export type Process = {
@@ -260,6 +261,7 @@ export interface WorkflowDefinition {
     name: string;
     description?: string;
     target: WorkflowTarget;
+    isTask: boolean;
     products: Pick<ProductDefinition, 'tag' | 'productId' | 'name'>[];
     createdAt: string;
 }
@@ -269,6 +271,7 @@ export interface TaskDefinition {
     name: string;
     description?: string;
     target: WorkflowTarget;
+    isTask: boolean;
     products: Pick<ProductDefinition, 'tag' | 'productId' | 'name'>[];
     createdAt: string;
 }
@@ -514,7 +517,7 @@ export type SubscriptionDetail = {
 
     externalServices?: ExternalService[];
 
-    processes: GraphQlSinglePage<SubscriptionDetailProcess>;
+    processes?: GraphQlSinglePage<SubscriptionDetailProcess>;
 };
 
 export type SubscriptionDetailProcess = Pick<
@@ -600,6 +603,7 @@ export type SubscriptionActions = {
     modify: SubscriptionAction[];
     terminate: SubscriptionAction[];
     system: SubscriptionAction[];
+    validate: SubscriptionAction[];
 };
 
 export enum CacheTagType {