@orchestrator-ui/orchestrator-ui-components 3.4.0 → 3.4.2

package/package.json

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

package/src/components/WfoBadges/WfoVersionIncompatibleBadge/WfoVersionIncompatibleBadge.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+
+import { WfoVersionIncompatibleBadge } from './WfoVersionIncompatibleBadge';
+
+const Story: Meta<typeof WfoVersionIncompatibleBadge> = {
+    component: (args) => (
+        <div style={{ display: 'flex' }}>
+            <WfoVersionIncompatibleBadge {...args} />
+        </div>
+    ),
+    title: 'Badges/WfoVersionIncompatibleBadge',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/components/WfoBadges/WfoVersionIncompatibleBadge/WfoVersionIncompatibleBadge.tsx

@@ -0,0 +1,65 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiSpacer, EuiToolTip } from '@elastic/eui';
+
+import { WfoHeaderBadge } from '@/components';
+import { useOrchestratorTheme } from '@/hooks';
+import { MappedVersion } from '@/types';
+import { getOrchestratorCoreVersionIfNotCompatible } from '@/utils/compareVersions';
+
+import versionCompatibility from '../../../../../../version-compatibility.json';
+
+interface WfoVersionIncompatibleBadgeProps {
+    orchestratorUiVersion: string;
+    orchestratorCoreVersion: string;
+}
+
+export const WfoVersionIncompatibleBadge: FC<
+    WfoVersionIncompatibleBadgeProps
+> = ({ orchestratorUiVersion, orchestratorCoreVersion }) => {
+    const t = useTranslations('main');
+    const { theme } = useOrchestratorTheme();
+    const mappedVersions: MappedVersion[] = versionCompatibility;
+    const minimumOrchestratorCoreVersion =
+        getOrchestratorCoreVersionIfNotCompatible(
+            orchestratorUiVersion,
+            orchestratorCoreVersion,
+            mappedVersions,
+        );
+
+    return (
+        <EuiToolTip
+            content={
+                <>
+                    <p>{t('incompatibleVersionText')}</p>
+                    <EuiSpacer size="s" />
+                    <p>
+                        WFO UI: <b>{orchestratorUiVersion}</b>
+                    </p>
+                    <p>
+                        orchestrator-core: <b>{orchestratorCoreVersion}</b>
+                    </p>
+                    <p>
+                        {t('minimumOrchestratorCoreVersion')}:{' '}
+                        <b>{minimumOrchestratorCoreVersion}</b>
+                    </p>
+                </>
+            }
+        >
+            <WfoHeaderBadge
+                color="danger"
+                textColor={theme.colors.ghost}
+                css={{
+                    marginLeft: theme.size.s,
+                    visibility: minimumOrchestratorCoreVersion
+                        ? 'visible'
+                        : 'hidden',
+                }}
+            >
+                {t('incompatibleVersion')}
+            </WfoHeaderBadge>
+        </EuiToolTip>
+    );
+};

package/src/components/WfoBadges/WfoVersionIncompatibleBadge/index.ts

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

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

@@ -2,6 +2,7 @@ import React, { FC, ReactElement } from 'react';
 
 import { useTranslations } from 'next-intl';
 
+import type { EuiThemeColorMode } from '@elastic/eui';
 import {
     EuiBadgeGroup,
     EuiButtonIcon,
@@ -11,7 +12,6 @@ import {
     EuiHeaderSectionItem,
     EuiToolTip,
 } from '@elastic/eui';
-import type { EuiThemeColorMode } from '@elastic/eui';
 
 import {
     WfoEngineStatusBadge,
@@ -19,6 +19,7 @@ import {
     WfoFailedTasksBadge,
     WfoWebsocketStatusBadge,
 } from '@/components';
+import { WfoVersionIncompatibleBadge } from '@/components/WfoBadges/WfoVersionIncompatibleBadge/WfoVersionIncompatibleBadge';
 import { WfoAppLogo } from '@/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo';
 import { getWfoPageHeaderStyles } from '@/components/WfoPageTemplate/WfoPageHeader/styles';
 import { ORCHESTRATOR_UI_LIBRARY_VERSION } from '@/configuration';
@@ -27,6 +28,7 @@ import {
     useOrchestratorTheme,
     useWithOrchestratorTheme,
 } from '@/hooks';
+import { useGetVersionsQuery } from '@/rtk/endpoints/versions';
 import { ColorModes } from '@/types';
 
 import { WfoHamburgerMenu } from './WfoHamburgerMenu';
@@ -49,6 +51,9 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
     const { getHeaderStyle, appNameStyle } = useWithOrchestratorTheme(
         getWfoPageHeaderStyles,
     );
+    const { data } = useGetVersionsQuery();
+    const coreVersion =
+        data?.version.applicationVersions[0].split(' ')[1] ?? '';
 
     return (
         <EuiHeader css={getHeaderStyle(navigationHeight)}>
@@ -66,6 +71,12 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
                 <EuiHeaderSectionItem>
                     <WfoEnvironmentBadge />
                 </EuiHeaderSectionItem>
+                <EuiHeaderSectionItem>
+                    <WfoVersionIncompatibleBadge
+                        orchestratorUiVersion={ORCHESTRATOR_UI_LIBRARY_VERSION}
+                        orchestratorCoreVersion={coreVersion}
+                    />
+                </EuiHeaderSectionItem>
             </EuiHeaderSection>
 
             <EuiHeaderSection>

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

@@ -44,7 +44,6 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
                 panelled={false}
                 grow={false}
                 contentBorder={false}
-                minHeight={`calc(100vh - ${NAVIGATION_HEIGHT}px)`}
                 restrictWidth={false}
             >
                 {isSideMenuVisible && (
@@ -59,7 +58,11 @@ export const WfoPageTemplate: FC<WfoPageTemplateProps> = ({
                     contentRef={headerRowRef}
                     navigationHeight={NAVIGATION_HEIGHT}
                 >
-                    <EuiPageTemplate.Section>
+                    <EuiPageTemplate.Section
+                        css={{
+                            minHeight: `calc(100vh - ${NAVIGATION_HEIGHT}px)`,
+                        }}
+                    >
                         <WfoBreadcrumbs
                             handleSideMenuClick={() =>
                                 setIsSideMenuVisible((prevState) => !prevState)

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

@@ -33,20 +33,27 @@ export const WfoDragHandler: FC<WfoDragHandlerProps> = ({
 
     const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles);
 
+    const thElement =
+        headerRowRef.current &&
+        (headerRowRef.current.querySelector(
+            `th[data-field-name="${fieldName}"]`,
+        ) as HTMLTableCellElement);
+    const startWidth =
+        thElement?.getBoundingClientRect().width ?? MINIMUM_COLUMN_WIDTH;
+
     return (
         <div>
             <Draggable
                 axis="x"
                 position={position}
                 onDrag={onDrag}
-                bounds="thead"
+                bounds={{
+                    left: MINIMUM_COLUMN_WIDTH - startWidth,
+                    top: 0,
+                    bottom: 0,
+                }}
                 onStop={(_, data) => {
                     if (headerRowRef.current) {
-                        const thElement = headerRowRef.current.querySelector(
-                            `th[data-field-name="${fieldName}"]`,
-                        ) as HTMLTableCellElement;
-                        const startWidth =
-                            thElement.getBoundingClientRect().width;
                         const newWidth = startWidth + data.x;
 
                         onUpdateColumWidth(

package/src/components/WfoTable/WfoTable/WfoGroupedTable/useGroupedTableConfig.tsx

@@ -72,6 +72,7 @@ export const useGroupedTableConfig = <T extends object>({
         groupName: {
             columnType: ColumnType.CONTROL,
             label: groupNameLabel,
+            width: 'calc(100vw - 300px)', //TODO: #1807
             numberOfColumnsToSpan: numberOfColumnsInnerTable,
             renderControl: ({ groupName }) => {
                 const isExpanded = expandedRowIds.includes(groupName);

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

@@ -146,6 +146,7 @@ export const WfoTable = <T extends object>({
         cellStyle,
         rowStyle,
         emptyTableMessageStyle,
+        paginationStyle,
     } = useWithOrchestratorTheme(getWfoTableStyles);
     const t = useTranslations('common');
 
@@ -228,7 +229,7 @@ export const WfoTable = <T extends object>({
                 </table>
             </div>
             {pagination && (
-                <>
+                <div css={paginationStyle}>
                     <EuiSpacer size="xs" />
                     <EuiTablePagination
                         pageCount={Math.ceil(
@@ -242,7 +243,7 @@ export const WfoTable = <T extends object>({
                         onChangePage={pagination.onChangePage}
                         onChangeItemsPerPage={pagination.onChangeItemsPerPage}
                     />
-                </>
+                </div>
             )}
         </>
     );

package/src/components/WfoTable/WfoTable/styles.ts

@@ -37,7 +37,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
     });
 
     const tableStyle = css({
-        width: '100%',
+        width: 'auto',
     });
 
     const headerStyle = css({
@@ -136,14 +136,31 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
         height: '100%',
         zIndex: theme.levels.modal,
         '&:hover, &:active': {
+            transition: 'background-color 0.15s',
             backgroundColor: isDarkThemeActive
                 ? theme.colors.mediumShade
                 : theme.colors.header,
         },
         '&::after': {
-            content: '""',
+            display: 'flex',
+            paddingTop: theme.base - (theme.base / 16) * 2,
+            content: `"|"`, // Inserts a vertical line
+            fontSize: theme.size.m,
+            color: theme.colors.mediumShade,
+            cursor: 'col-resize',
+            opacity: 0.6,
+            zIndex: theme.levels.navigation,
+        },
+        '&:hover::after, &:active::after': {
+            transition: 'opacity 0.15s',
+            opacity: 0,
         },
     });
+
+    const paginationStyle = css({
+        '.eui-xScroll': { display: 'flex', justifyContent: 'flex-start' },
+    });
+
     return {
         tableContainerStyle,
         tableStyle,
@@ -159,6 +176,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
         emptyTableMessageStyle,
         clickableStyle,
         dragAndDropStyle,
+        paginationStyle,
         setWidth,
     };
 };

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.4.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '3.4.2';

package/src/messages/en-GB.json

@@ -24,7 +24,11 @@
         "resetToDefault": "Reset to default",
         "savePreferences": "Save preferences",
         "numberOfRows": "Number of rows",
-        "tableSettings": "Table settings"
+        "tableSettings": "Table settings",
+        "openMenu": "Open menu",
+        "incompatibleVersion": "Incompatible version",
+        "incompatibleVersionText": "The version of the WFO UI is incompatible with this version of orchestrator-core.",
+        "minimumOrchestratorCoreVersion": "Minimum orchestrator-core version"
     },
     "common": {
         "product": "Product",

package/src/messages/nl-NL.json

@@ -25,7 +25,9 @@
         "savePreferences": "Voorkeuren opslaan",
         "numberOfRows": "Aantal rijen",
         "tableSettings": "Tabel instellingen",
-        "openMenu": "Open menu"
+        "openMenu": "Open menu",
+        "incompatibleVersion": "Incompatibele versie",
+        "minimumOrchestratorCoreVersion": "Minimale versie van orchestrator-core"
     },
     "common": {
         "product": "Produkt",

package/src/types/types.ts

@@ -604,6 +604,13 @@ export enum CacheTagType {
     processStatusCounts = 'processStatusCounts',
     subscriptions = 'subscriptions',
 }
+
+export interface MappedVersion {
+    orchestratorUiVersion: string;
+    minimumOrchestratorCoreVersion: string;
+    changes: string;
+}
+
 export type CacheTag = { type: CacheTagType; id?: string };
 
 export const CACHETAG_TYPE_LIST = 'LIST';

package/src/utils/compareVersions.spec.ts

@@ -0,0 +1,129 @@
+import { MappedVersion } from '@/types';
+
+import { getOrchestratorCoreVersionIfNotCompatible } from './compareVersions';
+
+const TEST_VERSIONS: MappedVersion[] = [
+    {
+        orchestratorUiVersion: '3.4.0',
+        minimumOrchestratorCoreVersion: '2.10.0',
+        changes: 'Endpoints in BE to modify description on metadata pages',
+    },
+    {
+        orchestratorUiVersion: '3.8.1',
+        minimumOrchestratorCoreVersion: '3.0.0',
+        changes: 'Endpoints in BE to modify description on metadata pages',
+    },
+    {
+        orchestratorUiVersion: '3.10.0',
+        minimumOrchestratorCoreVersion: '3.1.1',
+        changes: 'Endpoints in BE to modify description on metadata pages',
+    },
+];
+
+describe('isOrchestratorUiVersionCompatible', () => {
+    test('returns true if orchestratorCoreVersion matches exactly the minimum required orchestratorCoreVersion', () => {
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.4.0',
+                '2.10.0',
+                TEST_VERSIONS,
+            ),
+        ).toBe(null);
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.8.1',
+                '3.0.0',
+                TEST_VERSIONS,
+            ),
+        ).toBe(null);
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.10.0',
+                '3.1.1',
+                TEST_VERSIONS,
+            ),
+        ).toBe(null);
+    });
+
+    test('returns true if orchestratorCoreVersion is newer than the minimum required orchestratorCoreVersion', () => {
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.4.0',
+                '2.11.0',
+                TEST_VERSIONS,
+            ),
+        ).toBe(null);
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.8.1',
+                '3.0.1',
+                TEST_VERSIONS,
+            ),
+        ).toBe(null);
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.10.0',
+                '4.2.0',
+                TEST_VERSIONS,
+            ),
+        ).toBe(null);
+    });
+
+    test('returns false if orchestratorCoreVersion is older than minimum required orchestratorCoreVersion', () => {
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.4.0',
+                '2.9.9',
+                TEST_VERSIONS,
+            ),
+        ).toBe('2.10.0');
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.8.1',
+                '2.10.9',
+                TEST_VERSIONS,
+            ),
+        ).toBe('3.0.0');
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.10.0',
+                '3.0.5',
+                TEST_VERSIONS,
+            ),
+        ).toBe('3.1.1');
+    });
+
+    test('handles orchestratorUiVersions not exactly in MAPPED_VERSIONS by selecting previous compatible minimum version', () => {
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.9.0',
+                '3.0.0',
+                TEST_VERSIONS,
+            ),
+        ).toBe(null); // nearest lower mapped version is 3.8.1
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '3.11.0',
+                '3.1.1',
+                TEST_VERSIONS,
+            ),
+        ).toBe(null); // nearest lower mapped is 3.10.0
+    });
+
+    test('handles orchestratorUiVersions lower than lowest mapped version', () => {
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '1.0.0',
+                '2.10.0',
+                TEST_VERSIONS,
+            ),
+        ).toBe(null); // falls back to first MAPPED_VERSION
+        expect(
+            getOrchestratorCoreVersionIfNotCompatible(
+                '1.0.0',
+                '2.9.9',
+                TEST_VERSIONS,
+            ),
+        ).toBe('2.10.0');
+    });
+});

package/src/utils/compareVersions.ts

@@ -0,0 +1,64 @@
+import { MappedVersion } from '@/types';
+
+const compareVersions = (
+    versionString1: string,
+    versionString2: string,
+): number => {
+    const splittedVersion1 = versionString1.split('.');
+    const splittedVersion2 = versionString2.split('.');
+
+    for (let i = 0; i < splittedVersion1.length; i++) {
+        if (parseInt(splittedVersion1[i]) > parseInt(splittedVersion2[i])) {
+            return 1;
+        } else if (
+            parseInt(splittedVersion1[i]) < parseInt(splittedVersion2[i])
+        ) {
+            return -1;
+        }
+    }
+    return 0;
+};
+
+const findMinimumOrchestratorCoreVersion = (
+    orchestratorUiVersion: string,
+    versionMappings: MappedVersion[],
+): string => {
+    const orchestratorUiVersions = versionMappings.map(
+        (version) => version.orchestratorUiVersion,
+    );
+    let mappedVersion = versionMappings[0];
+
+    for (let i = 0; i < orchestratorUiVersions.length; i++) {
+        if (
+            [0, 1].includes(
+                compareVersions(
+                    orchestratorUiVersion,
+                    orchestratorUiVersions[i],
+                ),
+            )
+        ) {
+            mappedVersion = versionMappings[i];
+        }
+    }
+
+    return mappedVersion.minimumOrchestratorCoreVersion;
+};
+
+export const getOrchestratorCoreVersionIfNotCompatible = (
+    orchestratorUiVersion: string,
+    orchestratorCoreVersion: string,
+    versionMappings: MappedVersion[],
+): string | null => {
+    const minimumOrchestratorCoreVersion = findMinimumOrchestratorCoreVersion(
+        orchestratorUiVersion,
+        versionMappings,
+    );
+    const comparison = compareVersions(
+        orchestratorCoreVersion,
+        minimumOrchestratorCoreVersion,
+    );
+    if (comparison === -1) {
+        return minimumOrchestratorCoreVersion;
+    }
+    return null;
+};