@orchestrator-ui/orchestrator-ui-components 1.38.2 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.38.2",
+    "version": "2.1.0",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {
@@ -24,7 +24,7 @@
     "scripts": {
         "test": "jest",
         "generate-version": "node -p \"'export const ORCHESTRATOR_UI_LIBRARY_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/configuration/version.ts && prettier --write src/configuration/version.ts",
-        "build": "npm run generate-version && tsup src/index.ts --format esm --dts --tsconfig tsconfig.build.json",
+        "build": "npm run generate-version && tsup src/index.ts",
         "tsc": "tsc --noEmit",
         "lint": "eslint \"src/**/*.ts*\"",
         "dev": "npm run build -- --watch",

package/src/components/WfoContentHeader/WfoContentHeader.tsx

@@ -0,0 +1,55 @@
+import React, { FC, ReactElement } from 'react';
+
+import {
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiPageHeader,
+    EuiSpacer,
+} from '@elastic/eui';
+
+import { WfoRenderElementOrString } from '@/components';
+
+export type WfoContentHeaderProps = {
+    title: ReactElement | string;
+    subtitle?: ReactElement | string;
+    children?: ReactElement | ReactElement[] | string;
+};
+
+export const WfoContentHeader: FC<WfoContentHeaderProps> = ({
+    title,
+    subtitle,
+    children,
+}) => (
+    <>
+        <EuiFlexGroup>
+            <EuiFlexItem>
+                <WfoRenderElementOrString
+                    renderString={(value) => (
+                        <EuiPageHeader pageTitle={value} />
+                    )}
+                >
+                    {title}
+                </WfoRenderElementOrString>
+            </EuiFlexItem>
+
+            {children && (
+                <EuiFlexItem>
+                    <EuiFlexGroup justifyContent="flexEnd">
+                        <WfoRenderElementOrString>
+                            {children}
+                        </WfoRenderElementOrString>
+                    </EuiFlexGroup>
+                </EuiFlexItem>
+            )}
+        </EuiFlexGroup>
+
+        {subtitle && (
+            <>
+                <EuiSpacer size="m" />
+                <WfoRenderElementOrString>{subtitle}</WfoRenderElementOrString>
+            </>
+        )}
+
+        <EuiSpacer size="l" />
+    </>
+);

package/src/components/WfoContentHeader/index.ts

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

package/src/components/WfoForms/formFields/SubscriptionSummaryField.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019-2023 SURF.
+ * Copyright 2019-2024 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
@@ -18,7 +18,7 @@ import { connectField, filterDOMProps } from 'uniforms';
 
 import { EuiFormRow, EuiText } from '@elastic/eui';
 
-import { WfoLoading, WfoSubscriptionGeneral } from '@/components';
+import { WfoLoading, WfoSubscriptionDetailSection } from '@/components';
 import { useGetSubscriptionDetailQuery } from '@/rtk';
 
 import { FieldProps } from './types';
@@ -35,14 +35,15 @@ const SubscriptionSummaryDisplay = ({
     const { data, isFetching } = useGetSubscriptionDetailQuery({
         subscriptionId,
     });
+    const subscriptionDetail = data?.subscription;
 
-    if (!data) {
+    if (!subscriptionDetail) {
         return <WfoLoading />;
     }
 
     return (
-        <WfoSubscriptionGeneral
-            subscriptionDetail={data.subscription}
+        <WfoSubscriptionDetailSection
+            subscriptionDetail={subscriptionDetail}
             isFetching={isFetching}
         />
     );

package/src/components/WfoInlineNoteEdit/WfoInlineNoteEdit.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import type { ChangeEvent, FC } from 'react';
+
+import { EuiInlineEditText } from '@elastic/eui';
+
+import { useStartProcessMutation } from '@/rtk/endpoints/forms';
+import type { Subscription } from '@/types';
+
+interface WfoInlineNoteEditProps {
+    value: Subscription['note'];
+    subscriptionId?: Subscription['subscriptionId'];
+    onlyShowOnHover?: boolean;
+}
+
+export const WfoInlineNoteEdit: FC<WfoInlineNoteEditProps> = ({
+    value,
+    subscriptionId,
+    onlyShowOnHover = false,
+}) => {
+    const initialNote = useMemo(() => value || '', [value]);
+    const [note, setNote] = useState<string>(initialNote);
+
+    const [startProcess] = useStartProcessMutation();
+    const triggerNoteModifyWorkflow = () => {
+        const noteModifyPayload = [
+            { subscription_id: subscriptionId },
+            { note },
+        ];
+        startProcess({
+            workflowName: 'modify_note',
+            userInputs: noteModifyPayload,
+        });
+    };
+
+    // This useEffect makes sure the note is updated when a new value property is passed in
+    // for example by a parent component that is update through a websocket event
+    useEffect(() => {
+        setNote(initialNote);
+    }, [initialNote]);
+
+    return (
+        <div
+            css={{
+                width: '100%',
+                ':hover': {
+                    '.euiIcon': {
+                        visibility: 'visible',
+                    },
+                },
+            }}
+        >
+            <EuiInlineEditText
+                inputAriaLabel="Edit note"
+                value={note}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                    setNote(e.target.value);
+                }}
+                onCancel={() => setNote(initialNote)}
+                onSave={() => triggerNoteModifyWorkflow()}
+                size={'s'}
+                css={{
+                    '.euiFlexItem:nth-of-type(2)': { justifyContent: 'center' },
+                }}
+                readModeProps={{
+                    css: {
+                        '.euiIcon': {
+                            visibility: onlyShowOnHover ? 'hidden' : 'visible',
+                        },
+                    },
+                }}
+                editModeProps={{
+                    saveButtonProps: {
+                        color: 'primary',
+                        size: 'xs',
+                    },
+                    cancelButtonProps: {
+                        color: 'danger',
+                        size: 'xs',
+                    },
+                    inputProps: {
+                        css: {
+                            height: '32px',
+                            paddingLeft: '4px',
+                            margin: '0',
+                            width: '98%',
+                        },
+                    },
+                    formRowProps: {
+                        css: {
+                            padding: 0,
+                            margin: 0,
+                            height: '32px',
+                            '.euiFormRow__fieldWrapper': {
+                                minHeight: '32px',
+                                height: '32px',
+                                padding: 0,
+                                margin: 0,
+                            },
+                        },
+                    },
+                }}
+            />
+        </div>
+    );
+};

package/src/components/WfoInlineNoteEdit/index.ts

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

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

@@ -52,7 +52,9 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
     return (
         <EuiHeader css={getHeaderStyle(navigationHeight)}>
             <EuiHeaderSection>
-                <EuiToolTip content={'v' + ORCHESTRATOR_UI_LIBRARY_VERSION}>
+                <EuiToolTip
+                    content={'UI version' + ORCHESTRATOR_UI_LIBRARY_VERSION}
+                >
                     <EuiHeaderSectionItem css={{ paddingTop: theme.size.xs }}>
                         <EuiHeaderLogo iconType={() => <WfoAppLogo />} />
                         <div css={appNameStyle}>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useWithOrchestratorTheme } from '@orchestrator-ui/orchestrator-ui-components/src/hooks';
+import { useWithOrchestratorTheme } from '@/hooks';
 
 import { getCopyrightStyles } from './styles';
 

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

@@ -74,39 +74,39 @@ export const WfoSidebar: FC<WfoSidebarProps> = ({ overrideMenuItems }) => {
         {
             name: t('subscriptions'),
             id: '3',
-            isSelected: router.pathname === PATH_SUBSCRIPTIONS,
+            isSelected: router.pathname.startsWith(PATH_SUBSCRIPTIONS),
             href: PATH_SUBSCRIPTIONS,
             renderItem: () => (
                 <WfoMenuItemLink
                     path={PATH_SUBSCRIPTIONS}
                     translationString="subscriptions"
-                    isSelected={router.pathname === PATH_SUBSCRIPTIONS}
+                    isSelected={router.pathname.startsWith(PATH_SUBSCRIPTIONS)}
                 />
             ),
         },
         {
             name: t('workflows'),
             id: '4',
-            isSelected: router.pathname === PATH_WORKFLOWS,
+            isSelected: router.pathname.startsWith(PATH_WORKFLOWS),
             href: PATH_WORKFLOWS,
             renderItem: () => (
                 <WfoMenuItemLink
                     path={PATH_WORKFLOWS}
                     translationString="workflows"
-                    isSelected={router.pathname === PATH_WORKFLOWS}
+                    isSelected={router.pathname.startsWith(PATH_WORKFLOWS)}
                 />
             ),
         },
         {
             name: t('tasks'),
-            isSelected: router.pathname === PATH_TASKS,
+            isSelected: router.pathname.startsWith(PATH_TASKS),
             id: '5',
             href: PATH_TASKS,
             renderItem: () => (
                 <WfoMenuItemLink
                     path={PATH_TASKS}
                     translationString="tasks"
-                    isSelected={router.pathname === PATH_TASKS}
+                    isSelected={router.pathname.startsWith(PATH_TASKS)}
                 />
             ),
         },

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -3,27 +3,27 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
-import { Pagination } from '@elastic/eui';
-
 import {
     FilterQuery,
     PATH_WORKFLOWS,
     WfoDateTime,
     WfoProcessStatusBadge,
     WfoWorkflowTargetBadge,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
 } from '@/components';
 import {
     DEFAULT_PAGE_SIZES,
     TableColumnKeys,
     WfoDataSorting,
     WfoFirstPartUUID,
-    WfoTableColumns,
-    WfoTableWithFilter,
     getDataSortHandler,
-    getPageChangeHandler,
     getQueryStringHandler,
-    mapSortableAndFilterableValuesToTableColumnConfig,
 } from '@/components/WfoTable';
+import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
+import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
+import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
+import { mapSortableAndFilterableValuesToTableColumnConfig } from '@/components/WfoTable/WfoTable/utils';
 import { useShowToastMessage } from '@/hooks';
 import { DataDisplayParams } from '@/hooks';
 import { WfoProcessListSubscriptionsCell } from '@/pages';
@@ -84,8 +84,8 @@ export type WfoProcessesListProps = {
         value: DataDisplayParams<ProcessListItem>[DisplayParamKey],
     ) => void;
     overrideDefaultTableColumns?: (
-        defaultTableColumns: WfoTableColumns<ProcessListItem>,
-    ) => WfoTableColumns<ProcessListItem>;
+        defaultTableColumns: WfoAdvancedTableColumnConfig<ProcessListItem>,
+    ) => WfoAdvancedTableColumnConfig<ProcessListItem>;
 };
 
 export const WfoProcessesList = ({
@@ -93,66 +93,66 @@ export const WfoProcessesList = ({
     defaultHiddenColumns = [],
     localStorageKey,
     dataDisplayParams,
-    setDataDisplayParam,
     overrideDefaultTableColumns,
+    setDataDisplayParam,
 }: WfoProcessesListProps) => {
     const t = useTranslations('processes.index');
     const tError = useTranslations('errors');
     const { showToastMessage } = useShowToastMessage();
 
-    const defaultTableColumns: WfoTableColumns<ProcessListItem> = {
+    const defaultTableColumns: WfoAdvancedTableColumnConfig<ProcessListItem> = {
         workflowName: {
-            field: 'workflowName',
-            name: t('workflowName'),
+            columnType: ColumnType.DATA,
+            label: t('workflowName'),
             width: '20%',
-            render: (value, { processId }) => (
+            renderData: (value, { processId }) => (
                 <Link href={`${PATH_WORKFLOWS}/${processId}`}>{value}</Link>
             ),
         },
         lastStep: {
-            field: 'lastStep',
-            name: t('step'),
+            columnType: ColumnType.DATA,
+            label: t('step'),
             width: '15%',
         },
         lastStatus: {
-            field: 'lastStatus',
-            name: t('status'),
+            columnType: ColumnType.DATA,
+            label: t('status'),
             width: '100',
-            render: (cellValue) => (
+            renderData: (cellValue) => (
                 <WfoProcessStatusBadge processStatus={cellValue} />
             ),
         },
         workflowTarget: {
-            field: 'workflowTarget',
-            name: t('workflowTarget'),
+            columnType: ColumnType.DATA,
+            label: t('workflowTarget'),
             width: '100',
-            render: (target) => <WfoWorkflowTargetBadge target={target} />,
+            renderData: (target) => <WfoWorkflowTargetBadge target={target} />,
         },
         tag: {
-            field: 'tag',
-            name: t('productTag'),
+            columnType: ColumnType.DATA,
+            label: t('productTag'),
             width: '100',
         },
         productName: {
-            field: 'productName',
-            name: t('product'),
+            columnType: ColumnType.DATA,
+            label: t('product'),
             width: '10%',
         },
         customer: {
-            field: 'customer',
-            name: t('customer'),
+            columnType: ColumnType.DATA,
+            label: t('customer'),
             width: '10%',
         },
         customerAbbreviation: {
-            field: 'customerAbbreviation',
-            name: t('customerAbbreviation'),
+            columnType: ColumnType.DATA,
+            label: t('customerAbbreviation'),
             width: '10%',
         },
         subscriptions: {
-            field: 'subscriptions',
-            name: t('subscriptions'),
+            columnType: ColumnType.DATA,
+            label: t('subscriptions'),
             width: '15%',
-            render: ({ page: subscriptions }) => (
+            renderData: ({ page: subscriptions }) => (
                 <WfoProcessListSubscriptionsCell
                     subscriptions={subscriptions}
                     numberOfSubscriptionsToRender={1}
@@ -169,41 +169,41 @@ export const WfoProcessesList = ({
                     .join(', '),
         },
         createdBy: {
-            field: 'createdBy',
-            name: t('createdBy'),
+            columnType: ColumnType.DATA,
+            label: t('createdBy'),
             width: '10%',
         },
         assignee: {
-            field: 'assignee',
-            name: t('assignee'),
+            columnType: ColumnType.DATA,
+            label: t('assignee'),
             width: '5%',
         },
         processId: {
-            field: 'processId',
-            name: t('processId'),
+            columnType: ColumnType.DATA,
+            label: t('processId'),
             width: '90',
-            render: (value) => <WfoFirstPartUUID UUID={value} />,
+            renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
         },
         startedAt: {
-            field: 'startedAt',
-            name: t('started'),
+            columnType: ColumnType.DATA,
+            label: t('started'),
             width: '100',
-            render: (value) => <WfoDateTime dateOrIsoString={value} />,
+            renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,
         },
         lastModifiedAt: {
-            field: 'lastModifiedAt',
-            name: t('lastModified'),
+            columnType: ColumnType.DATA,
+            label: t('lastModified'),
             width: '100',
-            render: (value) => <WfoDateTime dateOrIsoString={value} />,
+            renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
             renderDetails: parseDateToLocaleDateTimeString,
             clipboardText: parseDateToLocaleDateTimeString,
         },
     };
 
-    const tableColumns: WfoTableColumns<ProcessListItem> =
+    const tableColumns: WfoAdvancedTableColumnConfig<ProcessListItem> =
         overrideDefaultTableColumns
             ? overrideDefaultTableColumns(defaultTableColumns)
             : defaultTableColumns;
@@ -231,6 +231,8 @@ export const WfoProcessesList = ({
         pageIndex: pageIndex,
         pageSizeOptions: DEFAULT_PAGE_SIZES,
         totalItemCount: pageInfo?.totalItems ? pageInfo.totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
     };
     const dataSorting: WfoDataSorting<ProcessListItem> = {
         field: sortBy?.field ?? 'lastModified',
@@ -243,17 +245,17 @@ export const WfoProcessesList = ({
         ).unwrap();
 
     return (
-        <WfoTableWithFilter<ProcessListItem>
+        <WfoAdvancedTable<ProcessListItem>
             queryString={queryString}
             data={mapGraphQlProcessListResultToProcessListItems(
                 processes || [],
             )}
-            tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
+            tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
                 tableColumns,
                 pageInfo?.sortFields,
                 pageInfo?.filterFields,
             )}
-            dataSorting={dataSorting}
+            dataSorting={[dataSorting]}
             pagination={pagination}
             isLoading={isFetching}
             error={mapRtkErrorToWfoError(error)}
@@ -261,8 +263,7 @@ export const WfoProcessesList = ({
             localStorageKey={localStorageKey}
             detailModalTitle={'Details - Process'}
             onUpdateQueryString={getQueryStringHandler(setDataDisplayParam)}
-            onUpdatePage={getPageChangeHandler(setDataDisplayParam)}
-            onUpdateDataSort={getDataSortHandler(setDataDisplayParam)}
+            onUpdateDataSorting={getDataSortHandler(setDataDisplayParam)}
             onExportData={csvDownloadHandler<
                 ProcessListResponse,
                 ProcessListExportItem

package/src/components/WfoRadioDropdown/WfoRadioDropdown.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+
+import {
+    EuiButtonEmpty,
+    EuiFlexGroup,
+    EuiPopover,
+    EuiRadioGroup,
+} from '@elastic/eui';
+import { EuiRadioGroupOption } from '@elastic/eui/src/components/form/radio/radio_group';
+
+export interface WfoRadioDropdownProps<T> {
+    options: WfoRadioDropdownOption<T>[];
+    selectedOption: WfoRadioDropdownOption<T>;
+    onUpdateOption: (value: WfoRadioDropdownOption<T>) => void;
+}
+
+export type WfoRadioDropdownOption<T> = {
+    label: string;
+    id: string;
+    value: T;
+};
+
+export const WfoRadioDropdown = <T,>({
+    options,
+    onUpdateOption,
+    selectedOption,
+}: WfoRadioDropdownProps<T>) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleClose = () => {
+        if (isOpen) {
+            setIsOpen(false);
+        }
+    };
+    const handleSelectRadio = (id: string) => {
+        const updatedOption = options.find((option) => option.id === id);
+        setTimeout(handleClose, 100);
+        if (updatedOption) {
+            onUpdateOption(updatedOption);
+        }
+    };
+
+    const buttonLabel = options.find(
+        (option) => option.id === selectedOption.id,
+    )?.label;
+    const radioGroupOptions: EuiRadioGroupOption[] = options.map((option) => ({
+        id: option.id,
+        label: option.label,
+    }));
+
+    return (
+        <EuiFlexGroup
+            gutterSize="s"
+            alignItems="center"
+            justifyContent="flexEnd"
+        >
+            <EuiPopover
+                button={
+                    <EuiButtonEmpty
+                        size="s"
+                        iconType="arrowDown"
+                        iconSide="right"
+                        onClick={() => {
+                            setIsOpen((isOpen) => !isOpen);
+                        }}
+                        css={{
+                            '&:focus': {
+                                backgroundColor: 'transparent',
+                                textDecoration: 'none',
+                            },
+                        }}
+                    >
+                        {buttonLabel}
+                    </EuiButtonEmpty>
+                }
+                isOpen={isOpen}
+                closePopover={handleClose}
+                anchorPosition="downLeft"
+            >
+                <EuiRadioGroup
+                    options={radioGroupOptions}
+                    idSelected={selectedOption.id}
+                    onChange={handleSelectRadio}
+                />
+            </EuiPopover>
+        </EuiFlexGroup>
+    );
+};

package/src/components/WfoRadioDropdown/index.ts

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

package/src/components/WfoRenderElementOrString/WfoRenderElementOrString.tsx

@@ -0,0 +1,16 @@
+import React, { FC, ReactElement } from 'react';
+
+export type WfoRenderElementOrStringProps = {
+    renderString?: (value: string) => ReactElement;
+    children: ReactElement | ReactElement[] | string;
+};
+export const WfoRenderElementOrString: FC<WfoRenderElementOrStringProps> = ({
+    children,
+    renderString,
+}): ReactElement => {
+    if (typeof children === 'string' && renderString) {
+        return renderString(children);
+    }
+
+    return <>{children}</>;
+};

package/src/components/WfoRenderElementOrString/index.ts

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

package/src/components/WfoSubscription/WfoInSyncField.tsx

@@ -5,12 +5,14 @@ import Link from 'next/link';
 
 import { EuiButton } from '@elastic/eui';
 
+import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import { useOrchestratorTheme, useShowToastMessage } from '@/hooks';
 import { useSetSubscriptionInSyncMutation } from '@/rtk/endpoints';
 import { SubscriptionDetail, ToastTypes } from '@/types';
 import { formatDate } from '@/utils';
 
+import { WfoIsAllowedToRender } from '../WfoAuth/WfoIsAllowedToRender';
 import { WfoInsyncIcon } from '../WfoInsyncIcon/WfoInsyncIcon';
 import { PATH_TASKS, PATH_WORKFLOWS } from '../WfoPageTemplate';
 import { getLastUncompletedProcess, getLatestTaskDate } from './utils';
@@ -82,15 +84,17 @@ export const WfoInSyncField = ({
                 >
                     {t('see')} {lastUncompletedProcess?.processId}
                 </Link>
-                <EuiButton
-                    isLoading={isFetching}
-                    isDisabled={isFetching}
-                    color="danger"
-                    size="s"
-                    onClick={confirmSetInSync}
-                >
-                    {t('setInSync')}
-                </EuiButton>
+                <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>
+                    <EuiButton
+                        isLoading={isFetching}
+                        isDisabled={isFetching}
+                        color="danger"
+                        size="s"
+                        onClick={confirmSetInSync}
+                    >
+                        {t('setInSync')}
+                    </EuiButton>
+                </WfoIsAllowedToRender>
             </>
         );
     };