@orchestrator-ui/orchestrator-ui-components 0.2.6 → 0.3.0

package/src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx

@@ -1,14 +1,10 @@
 import React, { Ref, useImperativeHandle, useRef } from 'react';
 
-import { useOrchestratorTheme } from '../../../hooks';
-import { Step } from '../../../types';
+import { useOrchestratorTheme } from '@/hooks';
+
 import { WfoStep } from '../WfoStep';
 import { getStyles } from '../styles';
-
-export type StepListItem = {
-    step: Step;
-    isExpanded: boolean;
-};
+import { StepListItem } from './../WfoWorkflowStepList';
 
 export type WfoStepListRef = {
     scrollToStep: (stepId: string) => void;
@@ -20,6 +16,8 @@ export type WfoStepListProps = {
     startedAt: string;
     onToggleExpandStepListItem: (stepListItem: StepListItem) => void;
     onTriggerExpandStepListItem: (stepListItem: StepListItem) => void;
+    isTask: boolean;
+    processId: string;
 };
 
 export const WfoStepList = React.forwardRef(
@@ -30,6 +28,8 @@ export const WfoStepList = React.forwardRef(
             startedAt,
             onToggleExpandStepListItem,
             onTriggerExpandStepListItem,
+            isTask,
+            processId,
         }: WfoStepListProps,
         reference: Ref<WfoStepListRef>,
     ) => {
@@ -61,7 +61,10 @@ export const WfoStepList = React.forwardRef(
                         behavior: 'smooth',
                     });
                 } catch {
-                    console.log('Error scrolling to step with stepId ', stepId);
+                    console.error(
+                        'Error scrolling to step with stepId ',
+                        stepId,
+                    );
                 }
             },
         }));
@@ -82,15 +85,15 @@ export const WfoStepList = React.forwardRef(
                                 ref={getReferenceCallbackForStepId(
                                     stepListItem.step.stepId,
                                 )}
-                                stepDetailIsOpen={stepListItem.isExpanded}
                                 onToggleStepDetail={() =>
                                     onToggleExpandStepListItem(stepListItem)
                                 }
-                                step={stepListItem.step}
-                                stepDelta={stepListItem.step.stateDelta || {}}
+                                stepListItem={stepListItem}
                                 startedAt={stepStartTime}
                                 showHiddenKeys={showHiddenKeys}
                                 isStartStep={index === 0}
+                                isTask={isTask}
+                                processId={processId}
                             />
                         </div>
                     );

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx

@@ -12,6 +12,8 @@ import {
     EuiText,
 } from '@elastic/eui';
 
+import { WfoTextAnchor } from '@/components/WfoTextAnchor/WfoTextAnchor';
+
 import { useOrchestratorTheme } from '../../../hooks';
 import { WfoCode, WfoEyeFill } from '../../../icons';
 import { getStyles } from '../styles';
@@ -19,19 +21,25 @@ import { getStyles } from '../styles';
 export type WfoStepListHeaderProps = {
     showHiddenKeys: boolean;
     showRaw: boolean;
+    showDelta: boolean;
     allDetailToggleText: string;
     onChangeShowRaw: (showRaw: boolean) => void;
+    onChangeShowDelta: (showRaw: boolean) => void;
     onChangeShowHiddenKeys: (showHiddenKeys: boolean) => void;
     onToggleAllDetailsIsOpen: () => void;
+    isTask: boolean;
 };
 
 export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
     showHiddenKeys,
     showRaw,
+    showDelta,
     onChangeShowHiddenKeys,
     onChangeShowRaw,
+    onChangeShowDelta,
     allDetailToggleText,
     onToggleAllDetailsIsOpen,
+    isTask,
 }) => {
     const t = useTranslations('processes.steps');
     const { theme } = useOrchestratorTheme();
@@ -39,7 +47,6 @@ export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
         stepListHeaderStyle,
         stepListContentStyle,
         stepListContentBoldTextStyle,
-        stepListContentAnchorStyle,
         stepListOptionsContainerStyle,
     } = getStyles(theme);
 
@@ -65,15 +72,13 @@ export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
             {/* Left side: header and expand/collapse button */}
             <EuiFlexGroup css={stepListContentStyle}>
                 <EuiText css={stepListContentBoldTextStyle}>
-                    {t('steps')}
+                    {t(isTask ? 'taskSteps' : 'workflowSteps')}
                 </EuiText>
                 {!showRaw && (
-                    <EuiText
-                        css={stepListContentAnchorStyle}
+                    <WfoTextAnchor
+                        text={allDetailToggleText}
                         onClick={onToggleAllDetailsIsOpen}
-                    >
-                        {allDetailToggleText}
-                    </EuiText>
+                    />
                 )}
             </EuiFlexGroup>
 
@@ -84,22 +89,16 @@ export const WfoStepListHeader: FC<WfoStepListHeaderProps> = ({
                 css={stepListOptionsContainerStyle}
                 gutterSize="s"
             >
-                <EuiButton
-                    onClick={(
-                        e: React.MouseEvent<
-                            HTMLButtonElement | HTMLElement,
-                            MouseEvent
-                        >,
-                    ) => {
-                        e.preventDefault();
-                        alert('TODO: Implement Show delta');
-                    }}
-                    iconSide="right"
-                    size="s"
-                    iconType={() => <WfoCode color={theme.colors.link} />}
-                >
-                    {t('showDelta')}
-                </EuiButton>
+                {!showRaw && (
+                    <EuiButton
+                        onClick={() => onChangeShowDelta(!showDelta)}
+                        iconSide="right"
+                        size="s"
+                        iconType={() => <WfoCode color={theme.colors.link} />}
+                    >
+                        {showDelta ? t('hideDelta') : t('showDelta')}
+                    </EuiButton>
+                )}
                 <EuiPopover
                     button={viewOptionButton}
                     isOpen={isViewOptionOpen}

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx

@@ -2,18 +2,27 @@ import React, { Ref, useEffect, useState } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { useRawProcessDetails } from '../../../hooks';
-import { Step } from '../../../types';
-import { WfoJsonCodeBlock } from '../../WfoJsonCodeBlock/WfoJsonCodeBlock';
-import { WfoLoading } from '../../WfoLoading';
-import { StepListItem, WfoStepList, WfoStepListRef } from '../WfoStepList';
-import { updateStepListItems } from '../stepListUtils';
+import { WfoJsonCodeBlock, WfoLoading } from '@/components';
+import WfoDiff from '@/components/WfoDiff/WfoDiff';
+import { useRawProcessDetails } from '@/hooks';
+import { Step, StepStatus } from '@/types';
+import { InputForm } from '@/types/forms';
+
+import { WfoStepList, WfoStepListRef } from '../WfoStepList';
 import { WfoStepListHeader } from './WfoStepListHeader';
 
+export type StepListItem = {
+    step: Step;
+    isExpanded: boolean;
+    userInputForm?: InputForm;
+};
+
 export interface WfoWorkflowStepListProps {
     steps: Step[];
     startedAt: string;
     processId: string;
+    isTask: boolean;
+    userInputForm?: InputForm;
 }
 
 export const WfoProcessRawData = ({ processId }: { processId: string }) => {
@@ -21,31 +30,95 @@ export const WfoProcessRawData = ({ processId }: { processId: string }) => {
     return isFetching ? <WfoLoading /> : <WfoJsonCodeBlock data={data || {}} />;
 };
 
+export const WfoProcessSubscriptionDelta = ({
+    processId,
+}: {
+    processId: string;
+}) => {
+    const { data, isFetching } = useRawProcessDetails(processId);
+
+    const subscriptionKey =
+        data?.current_state?.subscription?.subscription_id ?? '';
+    const newText = data?.current_state?.subscription ?? null;
+    const oldText =
+        data?.current_state?.__old_subscriptions__ &&
+        subscriptionKey in data?.current_state?.__old_subscriptions__
+            ? data?.current_state?.__old_subscriptions__[subscriptionKey]
+            : null;
+
+    return isFetching ? (
+        <WfoLoading />
+    ) : (
+        <WfoDiff
+            oldText={oldText ? JSON.stringify(oldText, null, 2) : ''}
+            newText={newText ? JSON.stringify(newText, null, 2) : ''}
+            syntax="javascript"
+        />
+    );
+};
+
 export const WfoWorkflowStepList = React.forwardRef(
     (
-        { steps = [], startedAt, processId }: WfoWorkflowStepListProps,
+        {
+            steps = [],
+            startedAt,
+            processId,
+            isTask,
+            userInputForm,
+        }: WfoWorkflowStepListProps,
         reference: Ref<WfoStepListRef>,
     ) => {
         const [showHiddenKeys, setShowHiddenKeys] = useState(false);
         const [showRaw, setShowRaw] = useState(false);
+        const [showDelta, setShowDelta] = useState(false);
 
         const t = useTranslations('processes.steps');
 
         const initialStepListItems: StepListItem[] = steps.map((step) => ({
             step,
             isExpanded: false,
-        }));
+        })); // If the step is in the suspend state, we show the user input form
 
         const [stepListItems, setStepListItems] =
             useState(initialStepListItems);
 
-        useEffect(
-            () =>
-                setStepListItems((previousStepListItems) =>
-                    updateStepListItems(previousStepListItems, steps),
+        const persistStepListItemState = (
+            previousStepListItems: StepListItem[],
+            updatedSteps: Step[],
+            userInputForm?: InputForm,
+        ): StepListItem[] => {
+            const reversedSteps = [...updatedSteps].reverse();
+            const lastStepWithSuspendStatusStepId = reversedSteps.find(
+                (step) => step.status === StepStatus.SUSPEND,
+            )?.stepId;
+
+            return updatedSteps.map((step) => {
+                const previousStepListItem = previousStepListItems.find(
+                    (previousStepListItem) =>
+                        previousStepListItem.step.stepId === step.stepId,
+                );
+                return {
+                    step,
+                    isExpanded: previousStepListItem?.isExpanded || false,
+                    userInputForm:
+                        lastStepWithSuspendStatusStepId === step.stepId &&
+                        userInputForm
+                            ? userInputForm
+                            : undefined,
+                };
+            });
+        };
+
+        useEffect(() => {
+            // We want to preserve the state of stepListItems between renders
+            setStepListItems((previousStepListItems) =>
+                persistStepListItemState(
+                    previousStepListItems,
+                    steps,
+                    userInputForm,
                 ),
-            [steps],
-        );
+            );
+        }, [steps, userInputForm]);
 
         const updateStepListItem = (
             stepListItemToUpdate: StepListItem,
@@ -89,27 +162,34 @@ export const WfoWorkflowStepList = React.forwardRef(
                 <WfoStepListHeader
                     showHiddenKeys={showHiddenKeys}
                     showRaw={showRaw}
+                    showDelta={showDelta}
                     allDetailToggleText={
                         allStepsAreExpanded ? t('collapseAll') : t('expandAll')
                     }
                     onChangeShowHiddenKeys={setShowHiddenKeys}
                     onChangeShowRaw={setShowRaw}
+                    onChangeShowDelta={setShowDelta}
                     onToggleAllDetailsIsOpen={() =>
                         setExpandedStateStepListItems(!allStepsAreExpanded)
                     }
+                    isTask={isTask}
                 />
 
-                {showRaw ? (
-                    <WfoProcessRawData processId={processId} />
-                ) : (
+                {showRaw && <WfoProcessRawData processId={processId} />}
+                {showDelta && (
+                    <WfoProcessSubscriptionDelta processId={processId} />
+                )}
+                {!showRaw && !showDelta && (
                     <WfoStepList
                         ref={reference}
                         stepListItems={stepListItems}
                         startedAt={startedAt}
                         showHiddenKeys={showHiddenKeys}
+                        isTask={isTask}
                         onToggleExpandStepListItem={
                             toggleExpandedStateStepListItem
                         }
+                        processId={processId}
                         onTriggerExpandStepListItem={handleExpandStepListItem}
                     />
                 )}

package/src/components/WfoWorkflowSteps/stepListUtils.ts

@@ -1,5 +1,4 @@
-import { Step, StepState } from '../../types';
-import { StepListItem } from './WfoStepList';
+import { StepState } from '@/types';
 
 export const STEP_STATE_HIDDEN_KEYS = [
     'label_',
@@ -28,29 +27,3 @@ export const getStepContent = (
             {},
         );
 };
-
-export const updateStepListItems = (
-    previousStepListItems: StepListItem[],
-    updatedSteps: Step[],
-) => {
-    const currentExpandedStateByStepId = previousStepListItems.reduce<
-        Map<string, boolean>
-    >(
-        (previousValue, currentValue) =>
-            previousValue.set(
-                currentValue.step.stepId,
-                currentValue.isExpanded,
-            ),
-        new Map(),
-    );
-
-    return updatedSteps.map((step) => {
-        const isCurrentlyExpanded = currentExpandedStateByStepId.get(
-            step.stepId,
-        );
-        return {
-            step,
-            isExpanded: isCurrentlyExpanded ?? false,
-        };
-    });
-};

package/src/components/confirmationDialog/WfoConfirmationDialog.tsx

@@ -62,8 +62,8 @@ export default function WfoConfirmationDialog({
                 <section
                     className={`dialog-content ${isError ? ' error' : ''}`}
                 >
-                    <h2>{t('leavePage')}</h2>
-                    <p>{t('leavePageSub')}</p>
+                    <h2>{question || t('leavePage')}</h2>
+                    {!question && <p>{t('leavePageSub')}</p>}
                 </section>
             ) : (
                 <section className="dialog-content">
@@ -81,7 +81,7 @@ export default function WfoConfirmationDialog({
                 <EuiModal
                     css={confirmationDialogStyling}
                     className="confirm-modal"
-                    onClose={cancel}
+                    onClose={leavePage ? confirm : cancel}
                     initialFocus="[name=popfirst]"
                 >
                     <EuiModalHeader>

package/src/components/index.ts

@@ -5,7 +5,7 @@ export * from './WfoKeyValueTable';
 export * from './WfoPageTemplate';
 export * from './WfoSearchBar';
 export * from './WfoSettingsModal';
-export * from './WfoSettingsPage';
+export * from '../pages/settings/WfoSettingsPage';
 export * from './WfoStartPage';
 export * from './WfoSubscription';
 export * from './WfoTable';
@@ -17,3 +17,8 @@ export * from './WfoStartTaskButtonComboBox';
 export * from './WfoDateTime';
 export * from './WfoAuth';
 export * from './WfoDropdownButton';
+export * from './WfoProcessList';
+export * from './WfoTextAnchor';
+export * from './WfoJsonCodeBlock';
+export * from './WfoDiff';
+export * from './WfoSettings';

package/src/contexts/ConfirmationDialogProvider.tsx

@@ -9,6 +9,7 @@ export interface ConfirmDialogActions {
         e:
             | React.KeyboardEvent<HTMLDivElement>
             | React.MouseEvent<HTMLButtonElement, MouseEvent>
+            | React.MouseEvent<HTMLDivElement, MouseEvent>
             | undefined,
         confirm?: boolean,
     ) => void;
@@ -30,13 +31,12 @@ export type ShowConfirmDialogType = ({
     isError,
 }: ShowConfirmDialog) => void;
 
-const ConfirmationDialogContext = createContext<ConfirmDialogActions>({
+export const ConfirmationDialogContext = createContext<ConfirmDialogActions>({
     showConfirmDialog: () => {},
     closeConfirmDialog: () => {},
 });
 
 export const ConfirmationDialogProvider = ConfirmationDialogContext.Provider;
-export default ConfirmationDialogContext;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function ConfirmationDialogContextWrapper({ children }: any) {

package/src/contexts/TreeContext.tsx

@@ -12,6 +12,7 @@ export type TreeContextType = {
     expandAll: () => void;
     collapseAll: () => void;
     resetSelection: () => void;
+    selectAll: () => void;
 };
 
 export const TreeContext = React.createContext<TreeContextType | null>(null);
@@ -38,6 +39,9 @@ export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
             );
         }
     };
+    const selectAll = () => {
+        setSelectedIds(Array.from(Array(depths.length).keys()));
+    };
 
     const toggleExpandedId = (id: number) => {
         if (expandedIds.includes(id)) {
@@ -106,6 +110,7 @@ export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
                 expandAll,
                 collapseAll,
                 resetSelection,
+                selectAll,
             }}
         >
             {children}

package/src/graphqlQueries/index.ts

@@ -6,3 +6,4 @@ export * from './subscriptionDetailQuery';
 export * from './processDetailQuery';
 export * from './customersQuery';
 export * from './subscriptionsDropdownOptionsQuery';
+export * from './processStepsQuery';

package/src/graphqlQueries/processDetailQuery.ts

@@ -20,6 +20,14 @@ export const GET_PROCESS_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
                 lastStep
                 workflowName
                 isTask
+                form {
+                    additionalProperties
+                    definitions
+                    properties
+                    required
+                    title
+                    type
+                }
                 steps {
                     name
                     status

package/src/graphqlQueries/processListQuery.ts

@@ -3,23 +3,23 @@ import { gql } from 'graphql-request';
 
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
-import { GraphqlQueryVariables, Process, ProcessesResult } from '../types';
+import { GraphqlQueryVariables, Process, ProcessListResult } from '@/types';
 
 export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
-    ProcessesResult,
+    ProcessListResult,
     GraphqlQueryVariables<Process>
 > = parse(gql`
     query ProcessList(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
-        $filterBy: [GraphqlFilter!]
+        $filterBy: [GraphqlFilter!] # $query: String
     ) {
         processes(
             first: $first
             after: $after
             sortBy: $sortBy
-            filterBy: $filterBy
+            filterBy: $filterBy # query: $query
         ) {
             page {
                 workflowName
@@ -39,6 +39,7 @@ export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
                 processId
                 startedAt
                 lastModifiedAt
+                isTask
                 subscriptions {
                     page {
                         subscriptionId

package/src/graphqlQueries/processStepsQuery.ts

@@ -0,0 +1,22 @@
+import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import { ProcessStepsResult } from '@/types';
+
+export const GET_PROCESS_STEPS_GRAPHQL_QUERY: TypedDocumentNode<
+    ProcessStepsResult,
+    { processName: string }
+> = parse(gql`
+    query ProcessSteps($processName: String!) {
+        workflows(filterBy: { field: "name", value: $processName }) {
+            page {
+                steps {
+                    name
+                    assignee
+                }
+            }
+        }
+    }
+`);

package/src/graphqlQueries/productBlocksQuery.ts

@@ -3,19 +3,23 @@ import { gql } from 'graphql-request';
 
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
-import type { ProductBlockDefinition } from '../types';
-import { GraphqlQueryVariables, ProductBlockDefinitionsResult } from '../types';
+import type { ProductBlockDefinition } from '@/types';
+import { GraphqlQueryVariables, ProductBlockDefinitionsResult } from '@/types';
 
 export const GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY: TypedDocumentNode<
     ProductBlockDefinitionsResult,
     GraphqlQueryVariables<ProductBlockDefinition>
 > = parse(gql`
     query MetadataProductBlocks(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
     ) {
-        productBlocks(first: $first, after: $after, sortBy: $sortBy) {
+        productBlocks(
+            first: $first
+            after: $after
+            sortBy: $sortBy # query: $query
+        ) {
             page {
                 productBlockId
                 name

package/src/graphqlQueries/productsQuery.ts

@@ -14,11 +14,15 @@ export const GET_PRODUCTS_GRAPHQL_QUERY: TypedDocumentNode<
     GraphqlQueryVariables<ProductDefinition>
 > = parse(gql`
     query MetadataProducts(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
     ) {
-        products(first: $first, after: $after, sortBy: $sortBy) {
+        products(
+            first: $first
+            after: $after
+            sortBy: $sortBy # query: $query
+        ) {
             page {
                 productId
                 name

package/src/graphqlQueries/relatedSubscriptionsQuery.ts

@@ -20,8 +20,8 @@ export const GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY: TypedDocumentNode<
 > = parse(gql`
     query RelatedSubscriptions(
         $subscriptionId: String!
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
         $terminatedSubscriptionFilter: [GraphqlFilter!]
     ) {

package/src/graphqlQueries/resourceTypesQuery.ts

@@ -7,18 +7,22 @@ import type {
     GraphqlQueryVariables,
     ResourceTypeDefinition,
     ResourceTypeDefinitionsResult,
-} from '../types';
+} from '@/types';
 
 export const GET_RESOURCE_TYPES_GRAPHQL_QUERY: TypedDocumentNode<
     ResourceTypeDefinitionsResult,
     GraphqlQueryVariables<ResourceTypeDefinition>
 > = parse(gql`
     query MetadataResourceTypes(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
     ) {
-        resourceTypes(first: $first, after: $after, sortBy: $sortBy) {
+        resourceTypes(
+            first: $first
+            after: $after
+            sortBy: $sortBy # query: $query
+        ) {
             page {
                 resourceTypeId
                 resourceType

package/src/graphqlQueries/subscriptionDetailQuery.ts

@@ -54,6 +54,7 @@ export const GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
                         createdBy
                         workflowTarget
                         workflowName
+                        isTask
                     }
                 }
             }

package/src/graphqlQueries/subscriptionsListQuery.ts

@@ -7,20 +7,22 @@ import {
     GraphqlQueryVariables,
     Subscription,
     SubscriptionsResult,
-} from '../types';
+} from '@/types';
 
 export const GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY = parse(gql`
     query SubscriptionsList(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
         $filterBy: [GraphqlFilter!]
+        $query: String
     ) {
         subscriptions(
             first: $first
             after: $after
             sortBy: $sortBy
             filterBy: $filterBy
+            query: $query
         ) {
             page {
                 note