@orchestrator-ui/orchestrator-ui-components 2.14.1 → 2.15.0

package/package.json

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

package/src/components/WfoForms/AutoFieldLoader.tsx

@@ -55,6 +55,8 @@ export function autoFieldFunction(
             switch (format) {
                 case 'optGroup':
                     return OptGroupField;
+                case 'summary':
+                    return SummaryField;
             }
             break;
         case String:

package/src/components/WfoSubscription/WfoRelatedSubscriptions.tsx

@@ -52,10 +52,12 @@ export type RelatedSubscriptionListItem = Pick<
 
 interface WfoRelatedSubscriptionsProps {
     subscriptionId: string;
+    subscriptionPath?: string;
 }
 
 export const WfoRelatedSubscriptions = ({
     subscriptionId,
+    subscriptionPath = PATH_SUBSCRIPTIONS,
 }: WfoRelatedSubscriptionsProps) => {
     const [hideTerminatedSubscriptions, setHideTerminatedSubscriptions] =
         useState<boolean>(true);
@@ -109,7 +111,7 @@ export const WfoRelatedSubscriptions = ({
             renderData: (value, record) => (
                 <Link
                     target="_blank"
-                    href={`${PATH_SUBSCRIPTIONS}/${record.subscriptionId}`}
+                    href={`${subscriptionPath}/${record.subscriptionId}`}
                 >
                     {value}
                 </Link>

package/src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl';
 
 import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 
-import { WfoLoading, WfoTextAnchor } from '@/components';
+import { PATH_SUBSCRIPTIONS, WfoLoading, WfoTextAnchor } from '@/components';
 import { TreeContext, TreeContextType } from '@/contexts';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import {
@@ -24,11 +24,13 @@ import { getProductBlockTitle } from './utils';
 interface WfoSubscriptionDetailTreeProps {
     productBlockInstances: ProductBlockInstance[];
     subscriptionId: Subscription['subscriptionId'];
+    subscriptionPath?: string;
 }
 
 export const WfoSubscriptionDetailTree = ({
     productBlockInstances,
     subscriptionId,
+    subscriptionPath = PATH_SUBSCRIPTIONS,
 }: WfoSubscriptionDetailTreeProps) => {
     const t = useTranslations('subscriptions.detail');
     const { theme } = useOrchestratorTheme();
@@ -210,6 +212,7 @@ export const WfoSubscriptionDetailTree = ({
                                     key={id}
                                     subscriptionId={subscriptionId}
                                     productBlock={block}
+                                    subscriptionPath={subscriptionPath}
                                 />
                             );
                         })}

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

@@ -13,11 +13,7 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import {
-    PATH_SUBSCRIPTIONS,
-    WfoProductBlockKeyValueRow,
-    WfoValueCell,
-} from '@/components';
+import { WfoProductBlockKeyValueRow, WfoValueCell } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
 import { ProductBlockInstance, Subscription } from '@/types';
 import { getFirstUuidPart } from '@/utils';
@@ -32,6 +28,7 @@ import { getStyles } from './styles';
 interface WfoSubscriptionProductBlockProps {
     productBlock: ProductBlockInstance;
     subscriptionId: Subscription['subscriptionId'];
+    subscriptionPath: string;
 }
 
 export const HIDDEN_KEYS = ['title', 'name', 'label', 'inUseByIds'];
@@ -39,6 +36,7 @@ export const HIDDEN_KEYS = ['title', 'name', 'label', 'inUseByIds'];
 export const WfoSubscriptionProductBlock = ({
     productBlock,
     subscriptionId,
+    subscriptionPath,
 }: WfoSubscriptionProductBlockProps) => {
     const t = useTranslations('subscriptions.detail');
     const {
@@ -139,7 +137,7 @@ export const WfoSubscriptionProductBlock = ({
                                             value={
                                                 <>
                                                     <a
-                                                        href={`${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`}
+                                                        href={`${subscriptionPath}/${ownerSubscriptionId}`}
                                                         target="_blank"
                                                     >
                                                         {

package/src/components/WfoTable/WfoTable/WfoExpandedRow.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { Fragment, ReactNode } from 'react';
 
 import { WfoTableProps } from './WfoTable';
 
@@ -29,5 +29,13 @@ export const WfoExpandedRow = <T extends object>({
                     rowData[rowExpandingConfiguration.uniqueRowId] as string
                 ).toLowerCase(),
         )
-        .map(([, expandedRowComponent]) => expandedRowComponent);
+        .map(([, expandedRowComponent], index) => (
+            <Fragment
+                key={`${index}-${
+                    rowData[rowExpandingConfiguration.uniqueRowId]
+                }`}
+            >
+                {expandedRowComponent}
+            </Fragment>
+        ));
 };

package/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx

@@ -20,6 +20,10 @@ export type WfoTableDataRowsProps<T extends object> = Pick<
     | 'className'
 >;
 
+export const DATA_ROW_CLASS = 'data-row';
+export const CONTROL_CELL_CLASS = 'control-cell';
+export const DATA_CELL_CLASS = 'data-cell';
+
 export const WfoTableDataRows = <T extends object>({
     data,
     columnConfig,
@@ -49,7 +53,7 @@ export const WfoTableDataRows = <T extends object>({
             {data.map((row, index) => (
                 <Fragment key={`table-data-row-${index}`}>
                     <tr
-                        className={className}
+                        className={`${className} ${DATA_ROW_CLASS}`}
                         css={[
                             rowStyle,
                             dataRowStyle,
@@ -63,6 +67,7 @@ export const WfoTableDataRows = <T extends object>({
                             ) {
                                 return (
                                     <td
+                                        className={CONTROL_CELL_CLASS}
                                         colSpan={
                                             columnConfig.numberOfColumnsToSpan ??
                                             1
@@ -88,6 +93,7 @@ export const WfoTableDataRows = <T extends object>({
                             const result = row[key as keyof T];
                             return (
                                 <td
+                                    className={DATA_CELL_CLASS}
                                     key={key}
                                     css={[
                                         ...toOptionalArrayEntry(

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

@@ -10,6 +10,7 @@ export * from './WfoMultilineCell';
 
 export * from './WfoTable';
 export * from './WfoTableHeaderCell';
+export * from './WfoTableDataRows';
 
 export * from './WfoTruncateCell';
 export * from './WfoDataCell';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.14.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.15.0';