@orchestrator-ui/orchestrator-ui-components 8.8.1 → 8.9.0

package/src/pages/processes/WfoProductInformationWithLink.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { EuiButtonIcon, EuiFlexGroup, EuiText, EuiToolTip } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiToolTip } from '@elastic/eui';
 
-import { useGetOrchestratorConfig } from '@/hooks';
+import { useGetOrchestratorConfig, useOrchestratorTheme } from '@/hooks';
 
 interface WfoProductInformationWithLinkProps {
   workflowName: string;
@@ -15,8 +15,10 @@ export const WfoProductInformationWithLink = ({ workflowName, productNames }: Wf
   const { workflowInformationLinkUrl, showWorkflowInformationLink } = useGetOrchestratorConfig();
   const t = useTranslations('processes.detail');
   const docsUrl = workflowInformationLinkUrl + workflowName;
+  const { theme } = useOrchestratorTheme();
+
   return (
-    <EuiFlexGroup gutterSize={'s'} alignItems={'center'}>
+    <EuiFlexGroup css={{ paddingBottom: theme.size.xs }} gutterSize={'s'} alignItems={'center'}>
       {showWorkflowInformationLink && (
         <EuiToolTip content={t('openWorkflowTaskInfo')}>
           <a href={docsUrl} target="_blank">
@@ -24,7 +26,10 @@ export const WfoProductInformationWithLink = ({ workflowName, productNames }: Wf
           </a>
         </EuiToolTip>
       )}
-      <EuiText size="s">{productNames}</EuiText>
+      <EuiFlexItem>
+        <EuiSpacer size={'xs'} />
+        <EuiText size="m">{productNames}</EuiText>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

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

@@ -7,6 +7,7 @@ import {
   ProductBlockDefinition,
   ProductBlockDefinitionsResult,
 } from '@/types';
+import { getProductLifecycleStatus } from '@/utils';
 
 export const productBlocksQuery = `
     query MetadataProductBlocks(
@@ -69,7 +70,14 @@ const productBlocksApi = orchestratorApi.injectEndpoints({
         variables,
       }),
       transformResponse: (response: ProductBlockDefinitionsResult): ProductBlocksResponse => {
-        const productBlocks = response.productBlocks.page || [];
+        const productBlocks = (response.productBlocks.page || []).map((productBlock) => ({
+          ...productBlock,
+          status: getProductLifecycleStatus(productBlock.status),
+          dependsOn: productBlock.dependsOn.map((dependsOnBlock) => ({
+            ...dependsOnBlock,
+            status: getProductLifecycleStatus(dependsOnBlock.status),
+          })),
+        }));
         const pageInfo = response.productBlocks.pageInfo || {};
 
         return {

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

@@ -9,7 +9,7 @@ import {
   ProductDefinition,
   ProductDefinitionsResult,
 } from '@/types';
-import { getCacheTag } from '@/utils';
+import { getCacheTag, getProductLifecycleStatus } from '@/utils';
 
 export const products = `
     query MetadataProducts(
@@ -61,7 +61,10 @@ const productsApi = orchestratorApi.injectEndpoints({
         variables,
       }),
       transformResponse: (response: ProductDefinitionsResult): ProductsResponse => {
-        const products = response.products.page || [];
+        const products = (response.products.page || []).map((product) => ({
+          ...product,
+          status: getProductLifecycleStatus(product.status),
+        }));
         const pageInfo = response.products.pageInfo || {};
 
         return {

package/src/rtk/endpoints/startOptions.ts

@@ -5,6 +5,7 @@ import {
   WorkflowDefinition,
   WorkflowTarget,
 } from '@/types';
+import { getProductLifecycleStatus } from '@/utils';
 
 import { orchestratorApi } from '../api';
 
@@ -68,18 +69,18 @@ type TaskOptionsResult = StartOptionsResult<TaskOption>;
 
 const startButtonOptionsApi = orchestratorApi.injectEndpoints({
   endpoints: (build) => ({
-    getWorkflowOptions: build.query<StartOptionsResponse<WorkflowOption>, ProductLifecycleStatus | string>({
+    getWorkflowOptions: build.query<StartOptionsResponse<WorkflowOption>, ProductLifecycleStatus>({
       query: () => ({
         document: workflowOptionsQuery,
       }),
       transformResponse: (response: WorkflowOptionsResult | undefined, _, productStatus) => {
-        const statusToMatch = (productStatus ?? ProductLifecycleStatus.ACTIVE).toLowerCase();
+        const statusToMatch = productStatus ?? ProductLifecycleStatus.ACTIVE;
         const startOptions: WorkflowOption[] = [];
         const workflows = response?.workflows?.page || [];
         workflows.forEach((workflow) => {
           const workflowName = workflow.name;
           workflow.products
-            .filter((product) => product.status.toLowerCase() === statusToMatch)
+            .filter((product) => getProductLifecycleStatus(product.status) === statusToMatch)
             .forEach((product) => {
               startOptions.push({
                 workflowName,

package/src/types/search.ts

@@ -214,3 +214,11 @@ export type ExportArtifact = {
 
 export type ResultColumToPropertyMap<T> = Map<string, keyof T>;
 export type FieldToOperatorMap = Map<string, string[]>;
+
+export type WfoQueryBuilderContext = {
+  onFieldSelected: (field: string, operators: string[], pathInfo?: PathInfo) => void;
+  prefilledFieldOptions: FieldToOperatorMap;
+  fieldPathInfoMap: Map<string, PathInfo>;
+  onValueEditorEnter: () => void;
+  useAdvancedNestedSearch: boolean;
+};

package/src/types/types.ts

@@ -83,9 +83,9 @@ export interface ProductBlockDefinition {
 
 export enum ProductLifecycleStatus {
   ACTIVE = 'active',
-  PRE_PRODUCTION = 'pre_production',
-  PHASE_OUT = 'phase_out',
-  END_OF_LIFE = 'end_of_life',
+  PRE_PRODUCTION = 'pre production',
+  PHASE_OUT = 'phase out',
+  END_OF_LIFE = 'end of life',
 }
 
 export enum BadgeType {

package/src/utils/getProductLifecycleStatus.spec.ts

@@ -0,0 +1,26 @@
+import { ProductLifecycleStatus } from '@/types';
+
+import { getProductLifecycleStatus } from './getProductLifecycleStatus';
+
+describe('getProductLifecycleStatus()', () => {
+  it('converts an uppercase GraphQL key to its ProductLifecycleStatus value', () => {
+    expect(getProductLifecycleStatus('ACTIVE')).toBe(ProductLifecycleStatus.ACTIVE);
+    expect(getProductLifecycleStatus('PRE_PRODUCTION')).toBe(ProductLifecycleStatus.PRE_PRODUCTION);
+    expect(getProductLifecycleStatus('PHASE_OUT')).toBe(ProductLifecycleStatus.PHASE_OUT);
+    expect(getProductLifecycleStatus('END_OF_LIFE')).toBe(ProductLifecycleStatus.END_OF_LIFE);
+  });
+
+  it('converts a lowercase key to its ProductLifecycleStatus value', () => {
+    expect(getProductLifecycleStatus('pre_production')).toBe(ProductLifecycleStatus.PRE_PRODUCTION);
+  });
+
+  it('converts a mixed case key to its ProductLifecycleStatus value', () => {
+    expect(getProductLifecycleStatus('Phase_Out')).toBe(ProductLifecycleStatus.PHASE_OUT);
+  });
+
+  it('returns undefined for a status that does not match any ProductLifecycleStatus key', () => {
+    expect(getProductLifecycleStatus('not_a_status')).toBeUndefined();
+    expect(getProductLifecycleStatus('')).toBeUndefined();
+    expect(getProductLifecycleStatus('active_pending')).toBeUndefined();
+  });
+});

package/src/utils/getProductLifecycleStatus.ts

@@ -0,0 +1,13 @@
+import { ProductLifecycleStatus } from '@/types';
+
+const productStatusAsString = Object.values(ProductLifecycleStatus) as string[];
+
+export const getProductLifecycleStatus = (rawStatus: string): ProductLifecycleStatus => {
+  const trimmed = rawStatus.trim();
+  if (productStatusAsString.includes(trimmed)) {
+    return trimmed as ProductLifecycleStatus;
+  }
+
+  const normalizedKey = trimmed.replace(/\s+/g, '_').toUpperCase();
+  return ProductLifecycleStatus[normalizedKey as keyof typeof ProductLifecycleStatus];
+};

package/src/utils/index.ts

@@ -6,6 +6,7 @@ export * from './getDefaultTableConfig';
 export * from './getEnvironmentVariables';
 export * from './getObjectKeys';
 export * from './getQueryUrl';
+export * from './getProductLifecycleStatus';
 export * from './getProductNamesFromProcess';
 export * from './getQueryVariablesForExport';
 export * from './getStatusBadgeColor';