@orchestrator-ui/orchestrator-ui-components 6.7.8 → 6.8.0

package/package.json

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

package/src/components/WfoPageTemplate/WfoPageTemplate/WfoPageTemplate.tsx

@@ -5,6 +5,7 @@ import { EuiPageTemplate, EuiSideNavItemType } from '@elastic/eui';
 
 import { WfoBreadcrumbs, WfoPageHeader, WfoSidebar } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
+import { ProductLifecycleStatus } from '@/types';
 
 import { ContentContextProvider } from './ContentContext';
 import { getPageTemplateStyles } from './styles';
@@ -14,6 +15,7 @@ export interface WfoPageTemplateProps {
     overrideMenuItems?: (
         defaultMenuItems: EuiSideNavItemType<object>[],
     ) => EuiSideNavItemType<object>[];
+    overrideStartWorkflowFilters?: (ProductLifecycleStatus | string)[];
     onThemeSwitch: (theme: EuiThemeColorMode) => void;
     children: ReactNode;
 }
@@ -22,6 +24,7 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
     children,
     getAppLogo,
     overrideMenuItems,
+    overrideStartWorkflowFilters,
     onThemeSwitch,
 }) => {
     const { getSidebarStyle, NAVIGATION_HEIGHT } = useWithOrchestratorTheme(
@@ -50,7 +53,12 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
                     <EuiPageTemplate.Sidebar
                         css={getSidebarStyle(NAVIGATION_HEIGHT)}
                     >
-                        <WfoSidebar overrideMenuItems={overrideMenuItems} />
+                        <WfoSidebar
+                            overrideMenuItems={overrideMenuItems}
+                            overrideStartWorkflowFilters={
+                                overrideStartWorkflowFilters
+                            }
+                        />
                     </EuiPageTemplate.Sidebar>
                 )}
 

package/src/components/WfoPageTemplate/WfoSidebar/WfoSidebar.tsx

@@ -17,6 +17,7 @@ import { getMenuStyles } from '@/components/WfoPageTemplate/WfoSidebar/styles';
 import { WfoStartWorkflowButtonComboBox } from '@/components/WfoStartButton/WfoStartWorkflowComboBox';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { usePolicy, useWithOrchestratorTheme } from '@/hooks';
+import { ProductLifecycleStatus } from '@/types';
 
 import {
     PATH_METADATA,
@@ -51,9 +52,13 @@ export type WfoSidebarProps = {
     overrideMenuItems?: (
         defaultMenuItems: EuiSideNavItemType<object>[],
     ) => EuiSideNavItemType<object>[];
+    overrideStartWorkflowFilters?: (ProductLifecycleStatus | string)[];
 };
 
-export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
+export const WfoSidebar: FC<WfoSidebarProps> = ({
+    overrideMenuItems,
+    overrideStartWorkflowFilters,
+}) => {
     const { menuStyle } = useWithOrchestratorTheme(getMenuStyles);
 
     const t = useTranslations('main');
@@ -243,7 +248,9 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
                     <WfoIsAllowedToRender
                         resource={PolicyResource.SUBSCRIPTION_CREATE}
                     >
-                        <WfoStartWorkflowButtonComboBox />
+                        <WfoStartWorkflowButtonComboBox
+                            startWorkflowFilters={overrideStartWorkflowFilters}
+                        />
                     </WfoIsAllowedToRender>
                     <EuiSpacer size="xl" />
                     <WfoCopyright />

package/src/components/WfoStartButton/WfoStartButtonComboBox.tsx

@@ -1,10 +1,19 @@
 import React, { useState } from 'react';
 
-import { EuiButton, EuiPopover, EuiSelectable, EuiSpacer } from '@elastic/eui';
+import { capitalize } from 'lodash';
+
+import {
+    EuiButton,
+    EuiButtonEmpty,
+    EuiFlexGroup,
+    EuiPopover,
+    EuiSelectable,
+    EuiSpacer,
+} from '@elastic/eui';
 
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
-import { WfoPlusCircleFill } from '@/icons';
-import { StartComboBoxOption } from '@/types';
+import { WfoChevronDown, WfoPlusCircleFill } from '@/icons';
+import { ProductLifecycleStatus, StartComboBoxOption } from '@/types';
 
 import { getStyles } from './styles';
 
@@ -14,6 +23,11 @@ export type WfoStartButtonComboBoxProps = {
     onOptionChange: (selectedOption: StartComboBoxOption) => void;
     isProcess: boolean;
     className?: string;
+    selectedProductStatus?: ProductLifecycleStatus | string;
+    setSelectedProductStatus?: (
+        status: ProductLifecycleStatus | string,
+    ) => void;
+    startWorkflowFilters?: (ProductLifecycleStatus | string)[];
 };
 
 export const WfoStartButtonComboBox = ({
@@ -22,6 +36,9 @@ export const WfoStartButtonComboBox = ({
     onOptionChange,
     isProcess,
     className,
+    selectedProductStatus,
+    setSelectedProductStatus,
+    startWorkflowFilters,
 }: WfoStartButtonComboBoxProps) => {
     const [isPopoverOpen, setPopoverOpen] = useState(false);
     const { theme, isDarkThemeActive } = useOrchestratorTheme();
@@ -42,6 +59,58 @@ export const WfoStartButtonComboBox = ({
         </EuiButton>
     );
 
+    const [isFilterPopoverOpen, setFilterPopoverOpen] = React.useState(false);
+
+    const ProductStatePicker = () => {
+        return setSelectedProductStatus ? (
+            <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
+                <EuiPopover
+                    button={
+                        <EuiButtonEmpty
+                            css={{
+                                '.euiButtonEmpty__content': {
+                                    gap: theme.size.xxs,
+                                },
+                            }}
+                            size="xs"
+                            iconSide="right"
+                            iconType={() => (
+                                <WfoChevronDown
+                                    height={18}
+                                    width={18}
+                                    color="currentColor"
+                                />
+                            )}
+                            onClick={() => setFilterPopoverOpen((v) => !v)}
+                        >
+                            <b>{capitalize(selectedProductStatus)}</b>
+                        </EuiButtonEmpty>
+                    }
+                    isOpen={isFilterPopoverOpen}
+                    closePopover={() => setFilterPopoverOpen(false)}
+                    anchorPosition="downRight"
+                >
+                    {startWorkflowFilters?.map((productStatus) => (
+                        <div key={productStatus}>
+                            <EuiButtonEmpty
+                                key={productStatus}
+                                size="xs"
+                                onClick={() => {
+                                    setSelectedProductStatus(productStatus);
+                                    setFilterPopoverOpen(false);
+                                }}
+                            >
+                                {capitalize(productStatus)}
+                            </EuiButtonEmpty>
+                        </div>
+                    ))}
+                </EuiPopover>
+            </EuiFlexGroup>
+        ) : (
+            <></>
+        );
+    };
+
     return (
         <EuiPopover
             initialFocus={`.euiSelectable .euiFieldSearch`}
@@ -49,6 +118,7 @@ export const WfoStartButtonComboBox = ({
             isOpen={isPopoverOpen}
             closePopover={() => setPopoverOpen(false)}
         >
+            {startWorkflowFilters && <ProductStatePicker />}
             <EuiSelectable<StartComboBoxOption>
                 className={className}
                 css={selectableStyle}

package/src/components/WfoStartButton/WfoStartWorkflowComboBox.tsx

@@ -5,17 +5,26 @@ import { useRouter } from 'next/router';
 
 import { useCheckEngineStatus } from '@/hooks';
 import { useGetWorkflowOptionsQuery } from '@/rtk';
-import { StartComboBoxOption } from '@/types';
+import { ProductLifecycleStatus, StartComboBoxOption } from '@/types';
 
 import { PATH_START_NEW_WORKFLOW } from '../WfoPageTemplate';
 import { WfoStartButtonComboBox } from './WfoStartButtonComboBox';
 
-export const WfoStartWorkflowButtonComboBox = () => {
+interface WfoStartWorkflowButtonComboBoxProps {
+    startWorkflowFilters?: (ProductLifecycleStatus | string)[];
+}
+
+export const WfoStartWorkflowButtonComboBox = ({
+    startWorkflowFilters,
+}: WfoStartWorkflowButtonComboBoxProps) => {
     const router = useRouter();
     const t = useTranslations('common');
     const { isEngineRunningNow } = useCheckEngineStatus();
+    const [selectedProductStatus, setSelectedProductStatus] = React.useState<
+        ProductLifecycleStatus | string
+    >(ProductLifecycleStatus.ACTIVE);
 
-    const { data } = useGetWorkflowOptionsQuery();
+    const { data } = useGetWorkflowOptionsQuery(selectedProductStatus);
     const workflowOptions = data?.startOptions || [];
 
     const comboBoxOptions: StartComboBoxOption[] = [...workflowOptions]
@@ -48,6 +57,9 @@ export const WfoStartWorkflowButtonComboBox = () => {
             onOptionChange={handleOptionChange}
             isProcess
             css={{ width: '300px' }}
+            selectedProductStatus={selectedProductStatus}
+            setSelectedProductStatus={setSelectedProductStatus}
+            startWorkflowFilters={startWorkflowFilters}
         />
     );
 };

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.7.8';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '6.8.0';

package/src/rtk/endpoints/startOptions.ts

@@ -1,5 +1,6 @@
 import {
     ProductDefinition,
+    ProductLifecycleStatus,
     StartOptionsResult,
     WorkflowDefinition,
     WorkflowTarget,
@@ -18,6 +19,7 @@ const workflowOptionsQuery = `
                     productId
                     name
                     tag
+                    status
                 }
             }
         }
@@ -53,6 +55,7 @@ type WorkflowOptionsResult = StartOptionsResult<{
         productId: ProductDefinition['productId'];
         productType: ProductDefinition['productType'];
         tag: ProductDefinition['tag'];
+        status: ProductDefinition['status'];
     }[];
 }>;
 
@@ -70,28 +73,38 @@ const startButtonOptionsApi = orchestratorApi.injectEndpoints({
     endpoints: (build) => ({
         getWorkflowOptions: build.query<
             StartOptionsResponse<WorkflowOption>,
-            void
+            ProductLifecycleStatus | string
         >({
             query: () => ({
                 document: workflowOptionsQuery,
             }),
             transformResponse: (
                 response: WorkflowOptionsResult | undefined,
+                _,
+                productStatus,
             ) => {
+                const statusToMatch = (
+                    productStatus ?? ProductLifecycleStatus.ACTIVE
+                ).toLowerCase();
                 const startOptions: WorkflowOption[] = [];
                 const workflows = response?.workflows?.page || [];
                 workflows.forEach((workflow) => {
                     const workflowName = workflow.name;
-                    workflow.products.forEach((product) => {
-                        startOptions.push({
-                            workflowName,
-                            isAllowed: workflow.isAllowed,
-                            productName: product.name,
-                            productId: product.productId,
-                            productType: product.productType,
-                            productTag: product.tag,
+                    workflow.products
+                        .filter(
+                            (product) =>
+                                product.status.toLowerCase() === statusToMatch,
+                        )
+                        .forEach((product) => {
+                            startOptions.push({
+                                workflowName,
+                                isAllowed: workflow.isAllowed,
+                                productName: product.name,
+                                productId: product.productId,
+                                productType: product.productType,
+                                productTag: product.tag,
+                            });
                         });
-                    });
                 });
 
                 return { startOptions };