@orchestrator-ui/orchestrator-ui-components 5.3.0 → 5.3.2

package/src/components/WfoPydanticForm/fields/Summary.tsx

@@ -5,10 +5,9 @@ import type { PydanticFormElement } from 'pydantic-forms';
 import { EuiFlexItem, EuiFormRow, EuiText } from '@elastic/eui';
 import { tint } from '@elastic/eui';
 import { css } from '@emotion/react';
-import type { WfoTheme } from '@orchestrator-ui/orchestrator-ui-components';
 
-import { getCommonFormFieldStyles } from '@/components/WfoForms/formFields/commonStyles';
-import { useWithOrchestratorTheme } from '@/hooks';
+import { getCommonFormFieldStyles } from '@/components';
+import { WfoTheme, useWithOrchestratorTheme } from '@/hooks';
 
 export const getStyles = ({ theme }: WfoTheme) => {
     const toShadeColor = (color: string) => tint(color, 0.9);

package/src/components/WfoPydanticForm/fields/WfoArrayField/WfoArrayField.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { useFieldArray } from 'react-hook-form';
+
+import {
+    PydanticFormElementProps,
+    RenderFields,
+    fieldToComponentMatcher,
+    itemizeArrayItem,
+    usePydanticFormContext,
+} from 'pydantic-forms';
+
+import { EuiIcon } from '@elastic/eui';
+
+import { getWfoArrayFieldStyles } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+
+export const MinusButton = ({
+    index,
+    onRemove,
+}: {
+    index: number;
+    onRemove: (index: number) => void;
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const { minusButton } = getWfoArrayFieldStyles();
+
+    return (
+        <span css={minusButton} onClick={() => onRemove(index)}>
+            <EuiIcon type="minus" size="xxl" color={theme.colors.danger} />
+        </span>
+    );
+};
+
+export const PlusButton = ({ onClick }: { onClick: () => void }) => {
+    const { theme } = useOrchestratorTheme();
+    const { plusButtonWrapper } = getWfoArrayFieldStyles();
+
+    return (
+        <div css={plusButtonWrapper}>
+            <EuiIcon
+                onClick={onClick}
+                type="plus"
+                size="xxl"
+                color={theme.colors.success}
+            />
+        </div>
+    );
+};
+
+export const WfoArrayField = ({
+    pydanticFormField,
+}: PydanticFormElementProps) => {
+    const { config, rhf } = usePydanticFormContext();
+    const { control } = rhf;
+    const { id: arrayName, arrayItem } = pydanticFormField;
+    const { minItems, maxItems } = pydanticFormField.validations;
+    const { container, fieldWrapper } = getWfoArrayFieldStyles();
+
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: arrayName,
+    });
+
+    const showMinus = !minItems || fields.length > minItems;
+    const showPlus = !maxItems || fields.length < maxItems;
+
+    if (!arrayItem) return null;
+
+    const component = fieldToComponentMatcher(
+        arrayItem,
+        config?.componentMatcherExtender,
+    );
+
+    const renderField = (field: Record<'id', string>, index: number) => {
+        const arrayField = itemizeArrayItem(index, arrayItem);
+
+        return (
+            <div key={field.id} css={fieldWrapper}>
+                <RenderFields
+                    pydanticFormComponents={[
+                        {
+                            Element: component.Element,
+                            pydanticFormField: arrayField,
+                        },
+                    ]}
+                    extraTriggerFields={[arrayName]}
+                />
+                {showMinus && <MinusButton index={index} onRemove={remove} />}
+            </div>
+        );
+    };
+
+    return (
+        <div css={container}>
+            {fields.map(renderField)}
+
+            {showPlus && (
+                <PlusButton
+                    onClick={() => {
+                        append({
+                            [arrayName]: arrayItem.default ?? undefined,
+                        });
+                    }}
+                />
+            )}
+        </div>
+    );
+};

package/src/components/WfoPydanticForm/fields/WfoArrayField/arrayFieldStyles.ts

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+
+export const getWfoArrayFieldStyles = () => {
+    const container = css({
+        padding: '1rem',
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+    });
+
+    const fieldWrapper = css({
+        display: 'flex',
+        gap: '10px',
+        alignItems: 'center',
+    });
+
+    const minusButton = css({
+        width: '40px',
+        cursor: 'pointer',
+    });
+
+    const plusButtonWrapper = css({
+        display: 'flex',
+        cursor: 'pointer',
+        justifyContent: 'end',
+    });
+
+    return {
+        container,
+        fieldWrapper,
+        minusButton,
+        plusButtonWrapper,
+    };
+};

package/src/components/WfoPydanticForm/fields/WfoArrayField/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoArrayField';
+export * from './arrayFieldStyles';

package/src/components/WfoPydanticForm/fields/WfoArrayField/styles.ts

@@ -0,0 +1,34 @@
+import { css } from '@emotion/react';
+
+export const getWfoArrayFieldStyles = () => {
+    const container = css({
+        padding: '1rem',
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+    });
+
+    const fieldWrapper = css({
+        display: 'flex',
+        gap: '10px',
+        alignItems: 'center',
+    });
+
+    const minusButton = css({
+        width: '40px',
+        cursor: 'pointer',
+    });
+
+    const plusButtonWrapper = css({
+        display: 'flex',
+        cursor: 'pointer',
+        justifyContent: 'end',
+    });
+
+    return {
+        container,
+        fieldWrapper,
+        minusButton,
+        plusButtonWrapper,
+    };
+};

package/src/components/WfoPydanticForm/fields/WfoObjectField/WfoObjectField.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {
+    PydanticFormElementProps,
+    RenderFields,
+    getPydanticFormComponents,
+    usePydanticFormContext,
+} from 'pydantic-forms';
+
+import { EuiFlexGroup } from '@elastic/eui';
+
+import { getWfoObjectFieldStyles } from './getWfoObjectFieldStyles';
+
+export const WfoObjectField = ({
+    pydanticFormField,
+}: PydanticFormElementProps) => {
+    const { config } = usePydanticFormContext();
+    const { wfoObjectFieldStyles } = getWfoObjectFieldStyles();
+    const components = getPydanticFormComponents(
+        pydanticFormField.properties || {},
+        config?.componentMatcherExtender,
+    );
+
+    return (
+        <EuiFlexGroup css={wfoObjectFieldStyles}>
+            <RenderFields pydanticFormComponents={components} />
+        </EuiFlexGroup>
+    );
+};

package/src/components/WfoPydanticForm/fields/WfoObjectField/getWfoObjectFieldStyles.ts

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+
+export const getWfoObjectFieldStyles = () => {
+    const wfoObjectFieldStyles = css({
+        width: '100%',
+        '& > div': {
+            width: '100%',
+        },
+    });
+    return {
+        wfoObjectFieldStyles,
+    };
+};

package/src/components/WfoPydanticForm/fields/WfoObjectField/index.ts

@@ -0,0 +1,2 @@
+export * from './WfoObjectField';
+export * from './getWfoObjectFieldStyles';

package/src/components/WfoPydanticForm/fields/index.ts

@@ -4,3 +4,7 @@ export * from './Label';
 export * from './Divider';
 export * from './Checkbox';
 export * from './Summary';
+export * from './WfoObjectField';
+export * from './WfoArrayField';
+export * from './Radio';
+export * from './Integer';

package/src/components/WfoPydanticForm/fields/styles.ts

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+
+export const getWfoObjectFieldStyles = () => {
+    const wfoObjectFieldStyles = css({
+        width: '100%',
+        '& > div': {
+            width: '100%',
+        },
+    });
+    return {
+        wfoObjectFieldStyles,
+    };
+};

package/src/components/WfoPydanticForm/index.ts

@@ -1 +1,4 @@
 export * from './WfoPydanticForm';
+export * from './fields';
+export * from './Row';
+export * from './Footer';

package/src/components/WfoSettings/WfoAoStackStatus.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    EuiButton,
+    EuiFlexItem,
+    EuiPanel,
+    EuiSpacer,
+    EuiText,
+} from '@elastic/eui';
+
+import { useGetOrchestratorConfig } from '@/hooks';
+import { WfoChartBar } from '@/icons';
+
+export const WfoAoStackStatus = () => {
+    const t = useTranslations('settings.page');
+    const { aoStackStatusUrl } = useGetOrchestratorConfig();
+
+    const openStatusPage = () => {
+        window.open(aoStackStatusUrl, '_blank');
+    };
+
+    return (
+        <EuiFlexItem>
+            <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+                <EuiText size="s">
+                    <h4>{t('aoStackStatus')}</h4>
+                </EuiText>
+                <EuiSpacer size="m" />
+                <EuiButton
+                    iconType={() => <WfoChartBar />}
+                    onClick={openStatusPage}
+                >
+                    {t('viewStatusPage')}
+                </EuiButton>
+            </EuiPanel>
+        </EuiFlexItem>
+    );
+};

package/src/components/WfoSubscription/WfoSubscriptionActions/WfoSubscriptionActionExpandableMenuItem.tsx

@@ -60,6 +60,7 @@ export const WfoSubscriptionActionExpandableMenuItem: FC<
                             <Link
                                 css={linkStyle}
                                 href={`${PATH_SUBSCRIPTIONS}/${relation}`}
+                                target="_blank"
                                 onClick={() => onClickLockedRelation(relation)}
                             >
                                 {relation}

package/src/components/WfoTable/WfoTable/WfoTable.tsx

@@ -13,6 +13,7 @@ import {
     WfoDataSorting,
 } from '../utils/columns';
 import { DEFAULT_PAGE_SIZES } from '../utils/constants';
+import { getPageCount } from '../utils/tableUtils';
 import { WfoTableDataRows } from './WfoTableDataRows';
 import { WfoTableHeaderRow } from './WfoTableHeaderRow';
 import { getWfoTableStyles } from './styles';
@@ -232,9 +233,7 @@ export const WfoTable = <T extends object>({
                 <div css={paginationStyle}>
                     <EuiSpacer size="xs" />
                     <EuiTablePagination
-                        pageCount={Math.ceil(
-                            pagination.totalItemCount / pagination.pageSize,
-                        )}
+                        pageCount={getPageCount(pagination)}
                         activePage={pagination.pageIndex}
                         itemsPerPage={pagination.pageSize}
                         itemsPerPageOptions={

package/src/components/WfoTable/utils/tableUtils.spec.ts

@@ -1,7 +1,10 @@
+import { Pagination } from '@/components';
+
 import { SortOrder } from '../../../types';
 import {
     determineNewSortOrder,
     determinePageIndex,
+    getPageCount,
     hasSpecialCharacterOrSpace,
 } from './tableUtils';
 
@@ -103,4 +106,30 @@ describe('tableUtils', () => {
             expect(hasSpecialCharacterOrSpace('@#$%^&*')).toBe(true);
         });
     });
+
+    describe('getPageCount', () => {
+        it('returns the page count', () => {
+            const pagination: Pagination = {
+                pageIndex: 0,
+                pageSize: 10,
+                totalItemCount: 101,
+            };
+
+            const result = getPageCount(pagination);
+
+            expect(result).toEqual(11);
+        });
+
+        it('returns the current page as value when the current page is out of range', () => {
+            const pagination: Pagination = {
+                pageIndex: 50,
+                pageSize: 10,
+                totalItemCount: 101,
+            };
+
+            const result = getPageCount(pagination);
+
+            expect(result).toEqual(51);
+        });
+    });
 });

package/src/components/WfoTable/utils/tableUtils.ts

@@ -1,3 +1,4 @@
+import { Pagination } from '@/components';
 import type { DataDisplayReturnValues } from '@/hooks';
 import { SortOrder } from '@/types';
 
@@ -63,4 +64,12 @@ export const getQueryStringHandler =
                 ? `${queryString}*`
                 : queryString;
         setDataDisplayParam('queryString', query);
+        setDataDisplayParam('pageIndex', 0);
     };
+
+export const getPageCount = (pagination: Pagination) =>
+    // In case the pageIndex is out of range calculated by totalItemCount and pageSize, the pageIndex should be returned to be transparent to the user
+    Math.max(
+        Math.ceil(pagination.totalItemCount / pagination.pageSize),
+        pagination.pageIndex + 1,
+    );

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.3.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '5.3.2';

package/src/contexts/OrchestratorConfigContext.tsx

@@ -16,6 +16,8 @@ export const emptyOrchestratorConfig: OrchestratorConfig = {
     workflowInformationLinkUrl: '',
     enableSupportMenuItem: false,
     supportMenuItemUrl: '',
+    enableAoStackStatus: false,
+    aoStackStatusUrl: '',
 };
 
 export const OrchestratorConfigContext = createContext<OrchestratorConfig>(

package/src/icons/WfoChartBar.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoChartBar: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = 'currentColor',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        color={color}
+        xmlns="http://www.w3.org/2000/svg"
+        className="wfoChartBarSquareIcon"
+    >
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="2"
+            stroke="currentColor"
+            className="size-6"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
+            />
+        </svg>
+    </svg>
+);

package/src/icons/index.ts

@@ -40,3 +40,4 @@ export * from './WfoMalfunction';
 export * from './WfoPlannedWork';
 export * from './WfoCubeFill';
 export * from './WfoExclamationTriangle';
+export * from './WfoChartBar';

package/src/messages/en-GB.json

@@ -130,6 +130,7 @@
             "nodePort": {
                 "loadingNodes": "Loading Node subscriptions...",
                 "loadingPorts": "Loading IMS ports...",
+                "noPorts": "NO PORTS FOUND FOR THIS NODE",
                 "selectNode": "Select node",
                 "selectPort": "Select port",
                 "selectNodeFirst": "Select a node first"
@@ -409,7 +410,9 @@
             "status": "Status",
             "numberOfQueuedJobs": "Number of queued jobs",
             "numberOfRunningJobs": "Number of running jobs",
-            "numberOfWorkersOnline": "Number of workers online"
+            "numberOfWorkersOnline": "Number of workers online",
+            "viewStatusPage": "View AO status page",
+            "aoStackStatus": "AO stack status"
         }
     },
     "startPage": {
@@ -447,6 +450,7 @@
         "openMenu": "Open menu",
         "support": "Support",
         "softwareVersions": "Software Versions",
-        "logout": "Logout"
+        "logout": "Logout",
+        "aoStatusPage": "A&O application status page"
     }
 }

package/src/messages/nl-NL.json

@@ -131,6 +131,7 @@
                 "loadingPorts": "IMS poorten laden...",
                 "selectNode": "Selecteer node",
                 "selectPort": "Selecteer poort",
+                "noPorts": "GEEN POORTEN GEVONDEN VOOR DEZE NODE",
                 "selectNodeFirst": "Selecteer eerst een node"
             },
             "fileUpload": {

package/src/pages/processes/WfoProcessListSubscriptionsCell.tsx

@@ -55,7 +55,6 @@ export const WfoProcessListSubscriptionsCell: FC<
                         ? 'row'
                         : 'column'
                 }
-                alignItems="center"
                 gutterSize={
                     renderDirection === RenderDirection.HORIZONTAL ? 's' : 'xs'
                 }

package/src/pages/settings/WfoSettingsPage.tsx

@@ -11,11 +11,13 @@ import {
     WfoWorkerStatus,
 } from '@/components';
 import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
-import { useOrchestratorTheme } from '@/hooks';
+import { WfoAoStackStatus } from '@/components/WfoSettings/WfoAoStackStatus';
+import { useGetOrchestratorConfig, useOrchestratorTheme } from '@/hooks';
 
 export const WfoSettingsPage = () => {
     const { theme } = useOrchestratorTheme();
     const t = useTranslations('main');
+    const { enableAoStackStatus } = useGetOrchestratorConfig();
 
     return (
         <>
@@ -30,6 +32,12 @@ export const WfoSettingsPage = () => {
                 <WfoModifySettings />
                 <EuiSpacer />
                 <WfoEngineStatus />
+                {enableAoStackStatus && (
+                    <>
+                        <EuiSpacer />
+                        <WfoAoStackStatus />
+                    </>
+                )}
                 <EuiSpacer />
                 <WfoWorkerStatus />
             </div>

package/src/rtk/slices/pydanticForm.ts

@@ -1,9 +1,9 @@
-import type { ComponentMatcher } from 'pydantic-forms';
+import type { ComponentMatcherExtender } from 'pydantic-forms';
 
 import { Slice, createSlice } from '@reduxjs/toolkit';
 
 export type PydanticForm = {
-    componentMatcher?: ComponentMatcher;
+    componentMatcherExtender?: ComponentMatcherExtender;
 };
 
 type PydanticFormComponentMatcherSlice = Slice<PydanticForm>;

package/src/rtk/storeProvider.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import type { ReactNode } from 'react';
 import { Provider } from 'react-redux';
 
-import type { ComponentMatcher } from 'pydantic-forms';
+import type { ComponentMatcherExtender } from 'pydantic-forms';
 
 import { emptyOrchestratorConfig } from '@/contexts';
 import { CustomApiConfig } from '@/rtk/slices/customApis';
@@ -14,7 +14,7 @@ import { getOrchestratorStore } from './store';
 export type StoreProviderProps = {
     initialOrchestratorConfig: OrchestratorConfig | null;
     orchestratorComponentOverride?: OrchestratorComponentOverride;
-    componentMatcher?: ComponentMatcher;
+    componentMatcherExtender?: ComponentMatcherExtender;
     customApis?: CustomApiConfig[];
     children: ReactNode;
 };
@@ -22,7 +22,7 @@ export type StoreProviderProps = {
 export const StoreProvider = ({
     initialOrchestratorConfig,
     orchestratorComponentOverride,
-    componentMatcher,
+    componentMatcherExtender,
     customApis = [],
     children,
 }: StoreProviderProps) => {
@@ -31,7 +31,7 @@ export const StoreProvider = ({
             initialOrchestratorConfig ?? emptyOrchestratorConfig,
         orchestratorComponentOverride,
         pydanticForm: {
-            componentMatcher: componentMatcher || undefined,
+            componentMatcherExtender: componentMatcherExtender || undefined,
         },
         customApis,
     });

package/src/rtk/utils.ts

@@ -80,6 +80,26 @@ export const mapRtkErrorToWfoError = (
     return error;
 };
 
+export const isRecord = (value: unknown): value is Record<string, unknown> => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+
+export const isFetchBaseQueryError = (
+    error: FetchBaseQueryError | GraphQLError[] | SerializedError | undefined,
+): error is FetchBaseQueryError => {
+    if (typeof error === 'object' && error !== null && 'status' in error) {
+        const status = error.status;
+        return (
+            typeof status === 'number' ||
+            status === 'FETCH_ERROR' ||
+            status === 'PARSING_ERROR' ||
+            status === 'TIMEOUT_ERROR' ||
+            status === 'CUSTOM_ERROR'
+        );
+    }
+    return false;
+};
+
 export const getWebSocket = async (url: string) => {
     const session = (await getSession()) as WfoSession;