@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.1

package/src/components/WfoTree/WfoTreeNodeListItem.tsx

@@ -2,13 +2,7 @@ import React, { useContext } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import {
-    EuiButtonIcon,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiText,
-    EuiTextTruncate,
-} from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiTextTruncate } from '@elastic/eui';
 
 import { getStyles } from '@/components/WfoTree/styles';
 import { TreeContext, TreeContextType } from '@/contexts';
@@ -17,49 +11,41 @@ import { WfoXMarkSmall } from '@/icons/WfoXMarkSmall';
 import { TreeBlock } from '@/types';
 
 interface WfoTreeNodeListItemProps {
-    item: TreeBlock;
-    selected: boolean;
+  item: TreeBlock;
+  selected: boolean;
 }
 
-export const WfoTreeNodeListItem = ({
-    item,
-    selected,
-}: WfoTreeNodeListItemProps) => {
-    const t = useTranslations('common');
-    const { toggleSelectedId } = useContext(TreeContext) as TreeContextType;
-    const { theme } = useOrchestratorTheme();
-    const { selectedTreeItemStyle, treeItemStyle } =
-        useWithOrchestratorTheme(getStyles);
+export const WfoTreeNodeListItem = ({ item, selected }: WfoTreeNodeListItemProps) => {
+  const t = useTranslations('common');
+  const { toggleSelectedId } = useContext(TreeContext) as TreeContextType;
+  const { theme } = useOrchestratorTheme();
+  const { selectedTreeItemStyle, treeItemStyle } = useWithOrchestratorTheme(getStyles);
 
-    const { isOutsideCurrentSubscription, id, label } = item;
-    const textLabel = label.toString();
+  const { isOutsideCurrentSubscription, id, label } = item;
+  const textLabel = label.toString();
 
-    return (
-        <EuiFlexGroup
-            alignItems="center"
-            css={
-                selected
-                    ? selectedTreeItemStyle(isOutsideCurrentSubscription)
-                    : treeItemStyle(isOutsideCurrentSubscription)
-            }
-            onClick={() => toggleSelectedId(id)}
-            gutterSize="xs"
-            justifyContent="spaceBetween"
-        >
-            <EuiFlexItem>
-                <EuiText title={textLabel}>
-                    <EuiTextTruncate text={textLabel} />
-                </EuiText>
-            </EuiFlexItem>
-            <EuiFlexItem css={{ maxWidth: theme.size.l }}>
-                <EuiButtonIcon
-                    color="primary"
-                    iconType={() => <WfoXMarkSmall color="currentColor" />}
-                    size="xs"
-                    aria-label={t('deselect')}
-                    css={{ display: selected ? 'block' : 'none' }}
-                />
-            </EuiFlexItem>
-        </EuiFlexGroup>
-    );
+  return (
+    <EuiFlexGroup
+      alignItems="center"
+      css={selected ? selectedTreeItemStyle(isOutsideCurrentSubscription) : treeItemStyle(isOutsideCurrentSubscription)}
+      onClick={() => toggleSelectedId(id)}
+      gutterSize="xs"
+      justifyContent="spaceBetween"
+    >
+      <EuiFlexItem>
+        <EuiText title={textLabel}>
+          <EuiTextTruncate text={textLabel} />
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem css={{ maxWidth: theme.size.l }}>
+        <EuiButtonIcon
+          color="primary"
+          iconType={() => <WfoXMarkSmall color="currentColor" />}
+          size="xs"
+          aria-label={t('deselect')}
+          css={{ display: selected ? 'block' : 'none' }}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
 };

package/src/components/WfoTree/styles.ts

@@ -1,48 +1,45 @@
 import type { WfoThemeHelpers } from '@/hooks';
 
 export const getStyles = ({ theme, toSecondaryColor }: WfoThemeHelpers) => {
-    const expandIconContainerStyle = {
-        cursor: 'pointer',
-    };
-
-    const treeContainerStyle = {
-        width: 0,
-        marginTop: theme.size.s,
-        marginRight: `-${theme.size.s}`,
-    };
+  const expandIconContainerStyle = {
+    cursor: 'pointer',
+  };
 
-    const treeItemStyle = (isOutsideCurrentSubscription: boolean) => {
-        return {
-            cursor: 'pointer',
-            paddingBlock: theme.size.xs,
-            paddingInline: theme.size.s,
-            borderRadius: theme.base - 10,
-            textDecoration: 'none',
-            backgroundColor: 'transparent',
-            transition: 'background-color 0.2s ease, text-decoration 0.3s ease', // Smooth transition for background
-            '&:hover': {
-                textDecoration: 'underline',
-            },
-            border: isOutsideCurrentSubscription
-                ? `1px dashed ${theme.colors.borderBaseSubdued}`
-                : 'none',
-        };
-    };
+  const treeContainerStyle = {
+    width: theme.size.m,
+    marginTop: theme.size.s,
+    marginRight: `-${theme.size.s}`,
+  };
 
-    const selectedTreeItemStyle = (isOutsideCurrentSubscription: boolean) => {
-        return {
-            ...treeItemStyle(isOutsideCurrentSubscription),
-            backgroundColor: isOutsideCurrentSubscription
-                ? theme.colors.borderBaseSubdued
-                : toSecondaryColor(theme.colors.primary),
-            color: theme.colors.textPrimary,
-        };
+  const treeItemStyle = (isOutsideCurrentSubscription: boolean) => {
+    return {
+      cursor: 'pointer',
+      paddingBlock: theme.size.xs,
+      paddingInline: theme.size.s,
+      borderRadius: theme.base - 10,
+      textDecoration: 'none',
+      backgroundColor: 'transparent',
+      transition: 'background-color 0.2s ease, text-decoration 0.3s ease', // Smooth transition for background
+      '&:hover': {
+        textDecoration: 'underline',
+      },
+      border: isOutsideCurrentSubscription ? `1px dashed ${theme.colors.borderBaseSubdued}` : 'none',
     };
+  };
 
+  const selectedTreeItemStyle = (isOutsideCurrentSubscription: boolean) => {
     return {
-        expandIconContainerStyle: expandIconContainerStyle,
-        treeContainerStyle: treeContainerStyle,
-        selectedTreeItemStyle,
-        treeItemStyle,
+      ...treeItemStyle(isOutsideCurrentSubscription),
+      backgroundColor:
+        isOutsideCurrentSubscription ? theme.colors.borderBaseSubdued : toSecondaryColor(theme.colors.primary),
+      color: theme.colors.textPrimary,
     };
+  };
+
+  return {
+    expandIconContainerStyle: expandIconContainerStyle,
+    treeContainerStyle: treeContainerStyle,
+    selectedTreeItemStyle,
+    treeItemStyle,
+  };
 };

package/src/components/WfoTree/treeUtils.spec.ts

@@ -3,126 +3,121 @@ import { FieldValue, TreeBlock, WfoTreeNodeMap } from '@/types';
 import { getPositionInTree, getWfoTreeNodeDepth } from './treeUtils';
 
 describe('getWfoTreeNodeDepth', () => {
-    const field: FieldValue = { field: 'test', value: 'test' };
-    const sampleTree: TreeBlock = {
-        id: 1,
-        subscriptionInstanceId: 'subscription-1',
-        parent: null,
-        icon: 'folder',
-        label: 'Root',
+  const field: FieldValue = { field: 'test', value: 'test' };
+  const sampleTree: TreeBlock = {
+    id: 1,
+    subscriptionInstanceId: 'subscription-1',
+    parent: null,
+    icon: 'folder',
+    label: 'Root',
+    callback: jest.fn(),
+    productBlockInstanceValues: [field],
+    inUseByRelations: [],
+    isOutsideCurrentSubscription: false,
+    subscription: {
+      subscriptionId: 'subscription-1',
+      description: 'Subscription 1',
+    },
+    children: [
+      {
+        id: 2,
+        subscriptionInstanceId: 'subscription-2',
+        parent: 1,
+        icon: 'file',
+        label: 'File 1',
         callback: jest.fn(),
         productBlockInstanceValues: [field],
         inUseByRelations: [],
+        children: [],
         isOutsideCurrentSubscription: false,
         subscription: {
-            subscriptionId: 'subscription-1',
-            description: 'Subscription 1',
+          subscriptionId: 'subscription-2',
+          description: 'Subscription 2',
+        },
+      },
+      {
+        id: 3,
+        subscriptionInstanceId: 'subscription-3',
+        parent: 1,
+        icon: 'file',
+        label: 'File 2',
+        callback: jest.fn(),
+        productBlockInstanceValues: [field],
+        inUseByRelations: [],
+        isOutsideCurrentSubscription: false,
+        subscription: {
+          subscriptionId: 'subscription-3',
+          description: 'Subscription 3',
         },
         children: [
-            {
-                id: 2,
-                subscriptionInstanceId: 'subscription-2',
-                parent: 1,
-                icon: 'file',
-                label: 'File 1',
-                callback: jest.fn(),
-                productBlockInstanceValues: [field],
-                inUseByRelations: [],
-                children: [],
-                isOutsideCurrentSubscription: false,
-                subscription: {
-                    subscriptionId: 'subscription-2',
-                    description: 'Subscription 2',
-                },
-            },
-            {
-                id: 3,
-                subscriptionInstanceId: 'subscription-3',
-                parent: 1,
-                icon: 'file',
-                label: 'File 2',
-                callback: jest.fn(),
-                productBlockInstanceValues: [field],
-                inUseByRelations: [],
-                isOutsideCurrentSubscription: false,
-                subscription: {
-                    subscriptionId: 'subscription-3',
-                    description: 'Subscription 3',
-                },
-                children: [
-                    {
-                        id: 4,
-                        subscriptionInstanceId: 'subscription-4',
-                        parent: 3,
-                        icon: 'file',
-                        label: 'File 2.1',
-                        callback: jest.fn(),
-                        productBlockInstanceValues: [field],
-                        inUseByRelations: [],
-                        children: [],
-                        isOutsideCurrentSubscription: false,
-                        subscription: {
-                            subscriptionId: 'subscription-4',
-                            description: 'Subscription 4',
-                        },
-                    },
-                ],
-            },
-        ],
-    };
-
-    const idToNodeMap: WfoTreeNodeMap = {
-        1: sampleTree,
-        2: sampleTree.children[0],
-        3: sampleTree.children[1],
-        4: sampleTree.children[1].children[0],
-    };
-
-    it('should return 0 for the root node', () => {
-        const rootDepth = getWfoTreeNodeDepth(sampleTree, idToNodeMap);
-        expect(rootDepth).toBe(0);
-    });
-
-    it('should return the correct depth for a child node', () => {
-        const depth2 = getWfoTreeNodeDepth(sampleTree.children[0], idToNodeMap);
-        const depth3 = getWfoTreeNodeDepth(sampleTree.children[1], idToNodeMap);
-        const depth4 = getWfoTreeNodeDepth(
-            sampleTree.children[1].children[0],
-            idToNodeMap,
-        );
-
-        expect(depth2).toBe(1);
-        expect(depth3).toBe(1);
-        expect(depth4).toBe(2);
-    });
-
-    it('should throw an error if the parent node is not found', () => {
-        const invalidNode = {
-            id: 1,
-            ownerSubscriptionId: 'subscription-1',
-            subscriptionInstanceId: 'subscription-1',
-            parent: 99, // Parent ID that does not exist
+          {
+            id: 4,
+            subscriptionInstanceId: 'subscription-4',
+            parent: 3,
             icon: 'file',
-            label: 'Invalid Node',
+            label: 'File 2.1',
             callback: jest.fn(),
             productBlockInstanceValues: [field],
             inUseByRelations: [],
             children: [],
             isOutsideCurrentSubscription: false,
             subscription: {
-                subscriptionId: 'subscription-1',
-                description: 'Subscription 1',
+              subscriptionId: 'subscription-4',
+              description: 'Subscription 4',
             },
-        };
+          },
+        ],
+      },
+    ],
+  };
+
+  const idToNodeMap: WfoTreeNodeMap = {
+    1: sampleTree,
+    2: sampleTree.children[0],
+    3: sampleTree.children[1],
+    4: sampleTree.children[1].children[0],
+  };
+
+  it('should return 0 for the root node', () => {
+    const rootDepth = getWfoTreeNodeDepth(sampleTree, idToNodeMap);
+    expect(rootDepth).toBe(0);
+  });
+
+  it('should return the correct depth for a child node', () => {
+    const depth2 = getWfoTreeNodeDepth(sampleTree.children[0], idToNodeMap);
+    const depth3 = getWfoTreeNodeDepth(sampleTree.children[1], idToNodeMap);
+    const depth4 = getWfoTreeNodeDepth(sampleTree.children[1].children[0], idToNodeMap);
+
+    expect(depth2).toBe(1);
+    expect(depth3).toBe(1);
+    expect(depth4).toBe(2);
+  });
+
+  it('should throw an error if the parent node is not found', () => {
+    const invalidNode = {
+      id: 1,
+      ownerSubscriptionId: 'subscription-1',
+      subscriptionInstanceId: 'subscription-1',
+      parent: 99, // Parent ID that does not exist
+      icon: 'file',
+      label: 'Invalid Node',
+      callback: jest.fn(),
+      productBlockInstanceValues: [field],
+      inUseByRelations: [],
+      children: [],
+      isOutsideCurrentSubscription: false,
+      subscription: {
+        subscriptionId: 'subscription-1',
+        description: 'Subscription 1',
+      },
+    };
 
-        expect(() => getWfoTreeNodeDepth(invalidNode, idToNodeMap)).toThrow(
-            'Parent node for 1 not found.',
-        );
-    });
+    expect(() => getWfoTreeNodeDepth(invalidNode, idToNodeMap)).toThrow('Parent node for 1 not found.');
+  });
 });
 
 describe('getPositionInTree', () => {
-    const json = `{
+  const json = `{
         "id": 0,
         "subscription": {
             "subscriptionId": "556facd3-6399-4c76-aeb1-114849da2f96",
@@ -299,60 +294,60 @@ describe('getPositionInTree', () => {
         "isOutsideCurrentSubscription": false
     }`;
 
-    const tree = JSON.parse(json) as TreeBlock;
+  const tree = JSON.parse(json) as TreeBlock;
 
-    it('should return 1 for the root node', () => {
-        const rootDepth = getPositionInTree(tree, 0);
-        expect(rootDepth).toBe(1);
-    });
+  it('should return 1 for the root node', () => {
+    const rootDepth = getPositionInTree(tree, 0);
+    expect(rootDepth).toBe(1);
+  });
 
-    it('should return 2 for the first node', () => {
-        const positionOfFirstLevelChild = getPositionInTree(tree, 2);
-        expect(positionOfFirstLevelChild).toBe(2);
-    });
+  it('should return 2 for the first node', () => {
+    const positionOfFirstLevelChild = getPositionInTree(tree, 2);
+    expect(positionOfFirstLevelChild).toBe(2);
+  });
 
-    it('should return correct node at position 3', () => {
-        const positionOfFirstLevelChild = getPositionInTree(tree, 3);
-        expect(positionOfFirstLevelChild).toBe(3);
-    });
+  it('should return correct node at position 3', () => {
+    const positionOfFirstLevelChild = getPositionInTree(tree, 3);
+    expect(positionOfFirstLevelChild).toBe(3);
+  });
 
-    it('should return correct node at position 4', () => {
-        const positionOfFirstLevelChild = getPositionInTree(tree, 4);
-        expect(positionOfFirstLevelChild).toBe(4);
-    });
+  it('should return correct node at position 4', () => {
+    const positionOfFirstLevelChild = getPositionInTree(tree, 4);
+    expect(positionOfFirstLevelChild).toBe(4);
+  });
 
-    it('should return correct node at position 5', () => {
-        const positionOfFirstLevelChild = getPositionInTree(tree, 5);
-        expect(positionOfFirstLevelChild).toBe(5);
-    });
+  it('should return correct node at position 5', () => {
+    const positionOfFirstLevelChild = getPositionInTree(tree, 5);
+    expect(positionOfFirstLevelChild).toBe(5);
+  });
 
-    it('should return correct node at position 6', () => {
-        const positionOfFirstLevelChild = getPositionInTree(tree, 6);
-        expect(positionOfFirstLevelChild).toBe(6);
-    });
+  it('should return correct node at position 6', () => {
+    const positionOfFirstLevelChild = getPositionInTree(tree, 6);
+    expect(positionOfFirstLevelChild).toBe(6);
+  });
 
-    it('should return correct node at position 7', () => {
-        const positionOfFirstLevelChild = getPositionInTree(tree, 7);
-        expect(positionOfFirstLevelChild).toBe(7);
-    });
+  it('should return correct node at position 7', () => {
+    const positionOfFirstLevelChild = getPositionInTree(tree, 7);
+    expect(positionOfFirstLevelChild).toBe(7);
+  });
 
-    it('should return correct node at position 8', () => {
-        const positionOfFirstLevelChild = getPositionInTree(tree, 8);
-        expect(positionOfFirstLevelChild).toBe(8);
-    });
+  it('should return correct node at position 8', () => {
+    const positionOfFirstLevelChild = getPositionInTree(tree, 8);
+    expect(positionOfFirstLevelChild).toBe(8);
+  });
 
-    it('should return correct node at position 9', () => {
-        const positionOfFirstLevelChild = getPositionInTree(tree, 9);
-        expect(positionOfFirstLevelChild).toBe(9);
-    });
+  it('should return correct node at position 9', () => {
+    const positionOfFirstLevelChild = getPositionInTree(tree, 9);
+    expect(positionOfFirstLevelChild).toBe(9);
+  });
 
-    it('should return correct node at position 10', () => {
-        const positionOfFirstLevelChild = getPositionInTree(tree, 1);
-        expect(positionOfFirstLevelChild).toBe(10);
-    });
+  it('should return correct node at position 10', () => {
+    const positionOfFirstLevelChild = getPositionInTree(tree, 1);
+    expect(positionOfFirstLevelChild).toBe(10);
+  });
 
-    it('should return undefined if the id is not found', () => {
-        const positionOfUndefined = getPositionInTree(tree, 9999);
-        expect(positionOfUndefined).toBeUndefined();
-    });
+  it('should return undefined if the id is not found', () => {
+    const positionOfUndefined = getPositionInTree(tree, 9999);
+    expect(positionOfUndefined).toBeUndefined();
+  });
 });

package/src/components/WfoTree/treeUtils.ts

@@ -1,53 +1,50 @@
 import { TreeBlock, WfoTreeNodeMap } from '@/types';
 
-export function getWfoTreeNodeDepth(
-    node: TreeBlock,
-    idToNodeMap: WfoTreeNodeMap,
-): number {
-    if (node.parent === null) {
-        // This is the root node, so its depth is 0.
-        return 0;
+export function getWfoTreeNodeDepth(node: TreeBlock, idToNodeMap: WfoTreeNodeMap): number {
+  if (node.parent === null) {
+    // This is the root node, so its depth is 0.
+    return 0;
+  } else {
+    // Find the parent node.
+    const parent = idToNodeMap[node.parent];
+    if (parent) {
+      // Recursively calculate the parent's depth and add 1.
+      return getWfoTreeNodeDepth(parent, idToNodeMap) + 1;
     } else {
-        // Find the parent node.
-        const parent = idToNodeMap[node.parent];
-        if (parent) {
-            // Recursively calculate the parent's depth and add 1.
-            return getWfoTreeNodeDepth(parent, idToNodeMap) + 1;
-        } else {
-            // Parent not found, something might be wrong with the tree structure.
-            throw new Error(`Parent node for ${node.id} not found.`);
-        }
+      // Parent not found, something might be wrong with the tree structure.
+      throw new Error(`Parent node for ${node.id} not found.`);
     }
+  }
 }
 
 export const sortTreeBlockByLabel = (
-    { label: labelA, id: idA }: TreeBlock,
-    { label: labelB, id: idB }: TreeBlock,
+  { label: labelA, id: idA }: TreeBlock,
+  { label: labelB, id: idB }: TreeBlock,
 ): number => {
-    if (labelA === labelB) {
-        if (idA < idB) {
-            return -1;
-        }
-        if (idA > idB) {
-            return 1;
-        }
-        return 0;
-    }
-    if (labelA < labelB) {
-        return -1;
+  if (labelA === labelB) {
+    if (idA < idB) {
+      return -1;
     }
-    if (labelA > labelB) {
-        return 1;
+    if (idA > idB) {
+      return 1;
     }
     return 0;
+  }
+  if (labelA < labelB) {
+    return -1;
+  }
+  if (labelA > labelB) {
+    return 1;
+  }
+  return 0;
 };
 
 const countDescendantNodes = (node: TreeBlock): number => {
-    let count = 0;
-    for (const child of node.children) {
-        count += 1 + countDescendantNodes(child);
-    }
-    return count;
+  let count = 0;
+  for (const child of node.children) {
+    count += 1 + countDescendantNodes(child);
+  }
+  return count;
 };
 
 /**
@@ -60,29 +57,26 @@ const countDescendantNodes = (node: TreeBlock): number => {
  * @param id
  * @returns number
  */
-export const getPositionInTree = (
-    tree: TreeBlock,
-    id: number,
-): number | undefined => {
-    let startPosition = 1;
-    if (tree.id === id) {
-        return startPosition;
-    }
+export const getPositionInTree = (tree: TreeBlock, id: number): number | undefined => {
+  let startPosition = 1;
+  if (tree.id === id) {
+    return startPosition;
+  }
 
-    for (const child of tree.children) {
-        startPosition += 1;
-        if (child.id === id) {
-            return startPosition;
-        }
-        if (child.children.length > 0) {
-            const childPosition = getPositionInTree(child, id);
-            if (childPosition) {
-                return startPosition + childPosition - 1;
-            } else {
-                startPosition += countDescendantNodes(child);
-            }
-        }
+  for (const child of tree.children) {
+    startPosition += 1;
+    if (child.id === id) {
+      return startPosition;
+    }
+    if (child.children.length > 0) {
+      const childPosition = getPositionInTree(child, id);
+      if (childPosition) {
+        return startPosition + childPosition - 1;
+      } else {
+        startPosition += countDescendantNodes(child);
+      }
     }
+  }
 
-    return undefined;
+  return undefined;
 };