@orchestrator-ui/orchestrator-ui-components 2.5.0 → 2.6.0

package/package.json

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

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

@@ -4,13 +4,13 @@ import { EuiBadge } from '@elastic/eui';
 
 import { useSubscriptionDetailValueOverride } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { FieldValue } from '@/types';
+import { FieldValue, RenderableFieldValue } from '@/types';
 import { camelToHuman } from '@/utils';
 
 import { getStyles } from './styles';
 
 export type WfoProductBlockKeyValueRowProps = {
-    fieldValue: FieldValue;
+    fieldValue: FieldValue | RenderableFieldValue;
 };
 
 export const WfoProductBlockKeyValueRow: FC<
@@ -21,9 +21,9 @@ export const WfoProductBlockKeyValueRow: FC<
 
     const { field, value } = fieldValue;
 
-    const WfoProductBlockValue: FC<{ value: FieldValue['value'] }> = ({
-        value,
-    }) => {
+    const WfoProductBlockValue: FC<{
+        value: RenderableFieldValue['value'];
+    }> = ({ value }) => {
         if (typeof value === 'boolean') {
             return <EuiBadge>{value.toString()}</EuiBadge>;
         } else if (Array.isArray(value)) {

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

@@ -229,9 +229,10 @@ export const WfoSubscriptionProductBlock = ({
                                     .map((productBlockInstanceValue, index) => {
                                         if (
                                             productBlockInstanceValue &&
-                                            !isEmpty(
+                                            (!isEmpty(
                                                 productBlockInstanceValue.value,
-                                            )
+                                            ) ||
+                                                showDetails)
                                         ) {
                                             return (
                                                 <WfoProductBlockKeyValueRow

package/src/components/WfoSubscription/overrides/useSubscriptionDetailValueOverride.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ValueOverrideFunction } from '@/rtk';
 import { useAppSelector } from '@/rtk/hooks';
-import { FieldValue } from '@/types';
+import { FieldValue, RenderableFieldValue } from '@/types';
 
 export const useSubscriptionDetailValueOverride = () => {
     const valueOverrideConfiguration = useAppSelector(
@@ -12,7 +12,7 @@ export const useSubscriptionDetailValueOverride = () => {
     );
 
     const getOverriddenValue = (
-        fieldValue: FieldValue,
+        fieldValue: FieldValue | RenderableFieldValue,
     ): React.ReactNode | null => {
         if (!valueOverrideConfiguration) {
             return null;

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.5.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '2.6.0';

package/src/rtk/slices/orchestratorComponentOverride.ts

@@ -2,9 +2,11 @@ import { ReactElement, ReactNode } from 'react';
 
 import { Slice, createSlice } from '@reduxjs/toolkit';
 
-import { FieldValue, SubscriptionDetail } from '@/types';
+import { FieldValue, RenderableFieldValue, SubscriptionDetail } from '@/types';
 
-export type ValueOverrideFunction = (fieldValue: FieldValue) => ReactNode;
+export type ValueOverrideFunction = (
+    fieldValue: FieldValue | RenderableFieldValue,
+) => ReactNode;
 export type ValueOverrideConfiguration = Record<string, ValueOverrideFunction>;
 
 export type WfoSubscriptionDetailGeneralConfiguration = {

package/src/types/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 
 import { InputForm } from './forms';
@@ -11,6 +13,11 @@ export type FieldValue = {
     value: string | number | boolean | null;
 };
 
+export type RenderableFieldValue = {
+    field: string;
+    value: FieldValue['value'] | ReactNode;
+};
+
 export enum EngineStatus {
     RUNNING = 'RUNNING',
     PAUSING = 'PAUSING',