@orchestrator-ui/orchestrator-ui-components 0.2.4 → 0.2.5

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

@@ -0,0 +1,121 @@
+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 { WfoStepListHeader } from './WfoStepListHeader';
+
+export interface WfoWorkflowStepListProps {
+    steps: Step[];
+    startedAt: string;
+    processId: string;
+}
+
+export const WfoProcessRawData = ({ processId }: { processId: string }) => {
+    const { data, isFetching } = useRawProcessDetails(processId);
+    return isFetching ? <WfoLoading /> : <WfoJsonCodeBlock data={data || {}} />;
+};
+
+export const WfoWorkflowStepList = React.forwardRef(
+    (
+        { steps = [], startedAt, processId }: WfoWorkflowStepListProps,
+        reference: Ref<WfoStepListRef>,
+    ) => {
+        const [showHiddenKeys, setShowHiddenKeys] = useState(false);
+        const [showRaw, setShowRaw] = useState(false);
+
+        const t = useTranslations('processes.steps');
+
+        const initialStepListItems: StepListItem[] = steps.map((step) => ({
+            step,
+            isExpanded: false,
+        }));
+
+        const [stepListItems, setStepListItems] =
+            useState(initialStepListItems);
+
+        useEffect(
+            () =>
+                setStepListItems((previousStepListItems) =>
+                    updateStepListItems(previousStepListItems, steps),
+                ),
+            [steps],
+        );
+
+        const updateStepListItem = (
+            stepListItemToUpdate: StepListItem,
+            updateFunction: (stepListItem: StepListItem) => StepListItem,
+        ) =>
+            setStepListItems(
+                stepListItems.map((stepListItem) =>
+                    stepListItem === stepListItemToUpdate
+                        ? updateFunction(stepListItem)
+                        : stepListItem,
+                ),
+            );
+
+        const allStepsAreExpanded = stepListItems.every(
+            (item) => item.isExpanded,
+        );
+
+        const setExpandedStateStepListItems = (isExpanded: boolean) => {
+            setStepListItems(
+                stepListItems.map((item) => ({
+                    ...item,
+                    isExpanded,
+                })),
+            );
+        };
+
+        const toggleExpandedStateStepListItem = (stepListItem: StepListItem) =>
+            updateStepListItem(stepListItem, (item) => ({
+                ...item,
+                isExpanded: !item.isExpanded,
+            }));
+
+        const handleExpandStepListItem = (stepListItem: StepListItem) =>
+            updateStepListItem(stepListItem, (item) => ({
+                ...item,
+                isExpanded: true,
+            }));
+
+        return (
+            <>
+                <WfoStepListHeader
+                    showHiddenKeys={showHiddenKeys}
+                    showRaw={showRaw}
+                    allDetailToggleText={
+                        allStepsAreExpanded ? t('collapseAll') : t('expandAll')
+                    }
+                    onChangeShowHiddenKeys={setShowHiddenKeys}
+                    onChangeShowRaw={setShowRaw}
+                    onToggleAllDetailsIsOpen={() =>
+                        setExpandedStateStepListItems(!allStepsAreExpanded)
+                    }
+                />
+
+                {showRaw ? (
+                    <WfoProcessRawData processId={processId} />
+                ) : (
+                    <WfoStepList
+                        ref={reference}
+                        stepListItems={stepListItems}
+                        startedAt={startedAt}
+                        showHiddenKeys={showHiddenKeys}
+                        onToggleExpandStepListItem={
+                            toggleExpandedStateStepListItem
+                        }
+                        onTriggerExpandStepListItem={handleExpandStepListItem}
+                    />
+                )}
+            </>
+        );
+    },
+);
+
+WfoWorkflowStepList.displayName = 'WfoWorkflowStepList';

package/src/components/WfoWorkflowSteps/WfoWorkflowStepList/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoWorkflowStepList';
+export * from './WfoStepListHeader';

package/src/components/WfoWorkflowSteps/index.ts

@@ -0,0 +1,4 @@
+export * from './WfoStep';
+export * from './WfoStepList';
+export * from './WfoStepStatusIcon';
+export * from './WfoWorkflowStepList';

package/src/components/WfoWorkflowSteps/stepListUtils.spec.ts

@@ -0,0 +1,26 @@
+import { StepState } from '../../types';
+import { getStepContent } from './stepListUtils';
+
+describe('getStepContent()', () => {
+    const testStepState: StepState = {
+        testProp1: 'testValue1',
+        testProp2: 'testValue2',
+        label_1: 'testLabel1',
+        confirmation_mail: 'testConfirmationMail',
+    };
+
+    it('returns the same object as the input if showHiddenKeys is true', () => {
+        const result = getStepContent(testStepState, true);
+
+        expect(result).toEqual(testStepState);
+    });
+    it('returns an object without hidden keys if showHiddenKeys is false', () => {
+        const result = getStepContent(testStepState, false);
+
+        expect(Object.keys(result).length).toEqual(2);
+        expect(result.testProp1).toEqual('testValue1');
+        expect(result.testProp2).toEqual('testValue2');
+        expect(result.label_1).toBeUndefined();
+        expect(result.confirmation_mail).toBeUndefined();
+    });
+});

package/src/components/WfoWorkflowSteps/stepListUtils.ts

@@ -0,0 +1,56 @@
+import { Step, StepState } from '../../types';
+import { StepListItem } from './WfoStepList';
+
+export const STEP_STATE_HIDDEN_KEYS = [
+    'label_',
+    'divider_',
+    '__',
+    'confirmation_mail',
+];
+export const getStepContent = (
+    stepDelta: StepState,
+    showHiddenKeys: boolean,
+): StepState => {
+    if (showHiddenKeys) {
+        return stepDelta;
+    }
+
+    return Object.entries(stepDelta)
+        .filter(
+            ([key]) =>
+                !STEP_STATE_HIDDEN_KEYS.some((word) => key.startsWith(word)),
+        )
+        .reduce<StepState>(
+            (previousValue, currentValue) => ({
+                ...previousValue,
+                [currentValue[0]]: currentValue[1],
+            }),
+            {},
+        );
+};
+
+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/WfoWorkflowSteps/styles.ts

@@ -0,0 +1,121 @@
+import { EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+import { css } from '@emotion/react';
+
+export const getStyles = (theme: EuiThemeComputed) => {
+    const stepSpacerStyle = css({
+        borderLeft: `1px solid ${theme.colors.darkShade}`,
+        height: '24px',
+        marginLeft: '36px',
+    });
+
+    const stepRowStyle = css({
+        flexGrow: 1,
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    });
+
+    const stepListHeaderStyle = css({
+        marginBottom: '24px',
+        marginTop: '60px',
+        alignItems: 'flex-end',
+    });
+
+    const stepListContentStyle = css({
+        flexDirection: 'row',
+        alignItems: 'center',
+    });
+
+    const stepListContentBoldTextStyle = css({
+        fontSize: theme.size.base,
+        fontWeight: theme.font.weight.bold,
+    });
+
+    const stepListContentAnchorStyle = css({
+        marginTop: 2,
+        marginLeft: 0,
+        fontSize: theme.size.m,
+        fontWeight: theme.font.weight.bold,
+        color: theme.colors.link,
+        cursor: 'pointer',
+    });
+
+    const stepListOptionsContainerStyle = css({
+        flexGrow: 0,
+    });
+
+    const stepStateIcon = {
+        height: '40px',
+        width: '40px',
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        borderRadius: '24px',
+    };
+
+    const stepDurationStyle = {
+        fontSize: theme.size.m,
+        color: theme.colors.disabled,
+        fontWeight: theme.font.weight.semiBold,
+    };
+
+    const stepStateSuccessIconStyle = css({
+        ...stepStateIcon,
+        backgroundColor: '#CCE3F4',
+    });
+
+    const stepStateSuspendIconStyle = css({
+        ...stepStateIcon,
+        backgroundColor: '#FFF3D0',
+    });
+
+    const stepStatePendingIconStyle = css({
+        ...stepStateIcon,
+        backgroundColor: '#DCE4EF',
+    });
+    const stepStateFailedIconStyle = css({
+        ...stepStateIcon,
+        backgroundColor: '#F2D4D2',
+    });
+
+    const stepHeaderRightStyle = css({
+        alignItems: 'center',
+    });
+
+    const stepEmailContainerStyle = css({
+        paddingLeft: 24,
+        width: 600,
+        marginTop: 0,
+    });
+
+    const getStepHeaderStyle = (isClickable: boolean) =>
+        css({
+            gap: 0,
+            alignItems: 'center',
+            cursor: isClickable ? 'pointer' : 'default',
+        });
+
+    const getStepToggleExpandStyle = (isVisible: boolean) =>
+        css({
+            marginRight: theme.base / 2,
+            visibility: isVisible ? 'visible' : 'hidden',
+        });
+
+    return {
+        stepDurationStyle,
+        stepEmailContainerStyle,
+        stepHeaderRightStyle,
+        stepListContentAnchorStyle,
+        stepListContentBoldTextStyle,
+        stepListContentStyle,
+        stepListHeaderStyle,
+        stepListOptionsContainerStyle,
+        stepRowStyle,
+        stepSpacerStyle,
+        stepStateFailedIconStyle,
+        stepStatePendingIconStyle,
+        stepStateSuccessIconStyle,
+        stepStateSuspendIconStyle,
+        getStepHeaderStyle,
+        getStepToggleExpandStyle,
+    };
+};

package/src/components/confirmationDialog/ConfirmationDialogStyling.ts

@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+
+export const confirmationDialogStyling = css`
+    .dialog-content {
+        h2 {
+            margin: 10px 0;
+            line-height: 22px;
+            font-size: 16px;
+            font-weight: normal;
+        }
+    }
+`;

package/src/components/confirmationDialog/WfoConfirmationDialog.tsx

@@ -0,0 +1,112 @@
+/*
+ * Copyright 2019-2023 SURF.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiButton,
+    EuiModal,
+    EuiModalBody,
+    EuiModalFooter,
+    EuiModalHeader,
+    EuiModalHeaderTitle,
+    EuiOverlayMask,
+} from '@elastic/eui';
+
+import { confirmationDialogStyling } from './ConfirmationDialogStyling';
+
+interface IProps {
+    isOpen?: boolean;
+    cancel: (
+        e:
+            | React.KeyboardEvent<HTMLDivElement>
+            | React.MouseEvent<HTMLButtonElement, MouseEvent>
+            | undefined,
+    ) => void;
+    confirm: (
+        e:
+            | React.KeyboardEvent<HTMLDivElement>
+            | React.MouseEvent<HTMLButtonElement, MouseEvent>
+            | undefined,
+    ) => void;
+    question?: string;
+    leavePage?: boolean;
+    isError?: boolean;
+}
+
+export default function WfoConfirmationDialog({
+    isOpen = false,
+    cancel,
+    confirm,
+    question = '',
+    leavePage = false,
+    isError = false,
+}: IProps) {
+    const t = useTranslations('confirmationDialog');
+    const modalContent = (
+        <div>
+            {leavePage ? (
+                <section
+                    className={`dialog-content ${isError ? ' error' : ''}`}
+                >
+                    <h2>{t('leavePage')}</h2>
+                    <p>{t('leavePageSub')}</p>
+                </section>
+            ) : (
+                <section className="dialog-content">
+                    <h2>{question}</h2>
+                </section>
+            )}
+        </div>
+    );
+
+    let modal;
+
+    if (isOpen) {
+        modal = (
+            <EuiOverlayMask>
+                <EuiModal
+                    css={confirmationDialogStyling}
+                    className="confirm-modal"
+                    onClose={cancel}
+                    initialFocus="[name=popfirst]"
+                >
+                    <EuiModalHeader>
+                        <EuiModalHeaderTitle>{t('title')}</EuiModalHeaderTitle>
+                    </EuiModalHeader>
+
+                    <EuiModalBody>{modalContent}</EuiModalBody>
+
+                    <EuiModalFooter>
+                        <EuiButton
+                            onClick={cancel}
+                            id="dialog-cancel"
+                            fill={false}
+                        >
+                            {leavePage ? t('leave') : t('cancel')}
+                        </EuiButton>
+
+                        <EuiButton onClick={confirm} fill id="dialog-confirm">
+                            {leavePage ? t('stay') : t('confirm')}
+                        </EuiButton>
+                    </EuiModalFooter>
+                </EuiModal>
+            </EuiOverlayMask>
+        );
+    }
+
+    return <div className="confirmation-dialog-overlay">{modal}</div>;
+}

package/src/components/confirmationDialog/index.ts

@@ -0,0 +1 @@
+export * from './WfoConfirmationDialog';

package/src/components/index.ts

@@ -1,11 +1,19 @@
-export * from './WFOBadges';
-export * from './WFOPageTemplate/WFOBreadcrumbs';
-export * from './WFOFilterTabs';
-export * from './WFOPageTemplate';
-export * from './WFOSearchBar';
-export * from './WFOSettingsModal';
-export * from './WFOSettingsPage';
-export * from './WFOStartPage';
-export * from './WFOSubscription';
-export * from './WFOTable';
-export * from './WFOLoading';
+export * from './WfoBadges';
+export * from './WfoPageTemplate/WfoBreadcrumbs';
+export * from './WfoFilterTabs';
+export * from './WfoKeyValueTable';
+export * from './WfoPageTemplate';
+export * from './WfoSearchBar';
+export * from './WfoSettingsModal';
+export * from './WfoSettingsPage';
+export * from './WfoStartPage';
+export * from './WfoSubscription';
+export * from './WfoTable';
+export * from './WfoTimeline';
+export * from './WfoLoading';
+export * from './WfoToastsList';
+export * from './WfoForms';
+export * from './WfoStartTaskButtonComboBox';
+export * from './WfoDateTime';
+export * from './WfoAuth';
+export * from './WfoDropdownButton';

package/src/contexts/ApiClientContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+import { ApiClient, getApiClient } from '../api';
+import { OrchestratorConfigContext } from './OrchestratorConfigContext';
+
+export interface ApiContext {
+    apiClient: ApiClient;
+}
+
+export const ApiClientContext = createContext<ApiContext>({
+    apiClient: getApiClient(''),
+});
+
+export type ApiClientContextProviderProps = {
+    children: ReactNode;
+};
+
+export const ApiClientContextProvider = ({
+    children,
+}: ApiClientContextProviderProps) => {
+    const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
+    const apiClient = getApiClient(orchestratorApiBaseUrl);
+
+    return (
+        <ApiClientContext.Provider value={{ apiClient: apiClient }}>
+            {children}
+        </ApiClientContext.Provider>
+    );
+};

package/src/contexts/ConfirmationDialogProvider.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { createContext, useState } from 'react';
+
+import WfoConfirmationDialog from '../components/confirmationDialog/WfoConfirmationDialog';
+
+export interface ConfirmDialogActions {
+    showConfirmDialog: ShowConfirmDialogType;
+    closeConfirmDialog: (
+        e:
+            | React.KeyboardEvent<HTMLDivElement>
+            | React.MouseEvent<HTMLButtonElement, MouseEvent>
+            | undefined,
+        confirm?: boolean,
+    ) => void;
+}
+
+export interface ShowConfirmDialog {
+    question: string;
+    confirmAction: ConfirmDialogActions['closeConfirmDialog'];
+    cancelAction?: ConfirmDialogActions['closeConfirmDialog'];
+    leavePage?: boolean;
+    isError?: boolean;
+}
+
+export type ShowConfirmDialogType = ({
+    question,
+    confirmAction,
+    cancelAction,
+    leavePage,
+    isError,
+}: ShowConfirmDialog) => void;
+
+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) {
+    const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
+    const [state, setState] = useState<{
+        confirmationDialogQuestion: string;
+        confirmDialogAction: ConfirmDialogActions['closeConfirmDialog'];
+        leavePage: boolean;
+        isError: boolean;
+    }>({
+        confirmationDialogQuestion: '',
+        confirmDialogAction: () => {},
+        leavePage: false,
+        isError: false,
+    });
+
+    const closeConfirmDialog = () => setConfirmationDialogOpen(false);
+
+    const showConfirmDialog = ({
+        question,
+        confirmAction,
+        cancelAction,
+        leavePage,
+        isError,
+    }: ShowConfirmDialog) => {
+        setConfirmationDialogOpen(true);
+        setState({
+            confirmationDialogQuestion: question,
+            leavePage: !!leavePage,
+            isError: !!isError,
+            confirmDialogAction: (e, cancelConfirm = false) => {
+                closeConfirmDialog();
+
+                if (!cancelConfirm) {
+                    return confirmAction(e);
+                }
+
+                if (cancelAction) {
+                    return cancelAction(e);
+                }
+            },
+        });
+    };
+
+    return (
+        <ConfirmationDialogProvider
+            value={{ showConfirmDialog, closeConfirmDialog }}
+        >
+            <WfoConfirmationDialog
+                isOpen={confirmationDialogOpen}
+                cancel={(e) => state.confirmDialogAction(e, true)}
+                confirm={state.confirmDialogAction}
+                question={state.confirmationDialogQuestion}
+                leavePage={state.leavePage}
+                isError={state.isError}
+            />
+            {children}
+        </ConfirmationDialogProvider>
+    );
+}

package/src/contexts/OrchestratorConfigContext.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
-import { createContext, FC, ReactNode } from 'react';
+import { FC, ReactNode, createContext } from 'react';
+
 import {
     OrchestratorConfig,
     useOrchestratorConfig,
 } from '../hooks/useOrchestratorConfig';
 
 export const OrchestratorConfigContext = createContext<OrchestratorConfig>({
-    engineStatusEndpoint: '',
     environmentName: '',
-    graphqlEndpointPythia: '',
+    engineStatusEndpoint: '',
     graphqlEndpointCore: '',
     orchestratorApiBaseUrl: '',
     processStatusCountsEndpoint: '',
+    processesEndpoint: '',
     subscriptionActionsEndpoint: '',
     subscriptionProcessesEndpoint: '',
+    dataRefetchInterval: {
+        processDetail: 0,
+    },
+    authActive: true,
 });
 
 export type OrchestratorConfigProviderProps = {