@orchestrator-ui/orchestrator-ui-components 7.1.1 → 7.2.1

package/src/pages/metadata/WfoScheduledTasksPage.tsx

@@ -0,0 +1,223 @@
+import React, { useEffect, useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+import {
+    WfoDataSorting,
+    WfoProductBlockBadge,
+    WfoScheduledTasksBadges,
+    getPageIndexChangeHandler,
+    getPageSizeChangeHandler,
+} from '@/components';
+import {
+    DEFAULT_PAGE_SIZE,
+    DEFAULT_PAGE_SIZES,
+    METADATA_SCHEDULES_LOCAL_STORAGE_KEY,
+    StoredTableConfig,
+    getDataSortHandler,
+    getQueryStringHandler,
+} from '@/components';
+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 {
+    useDataDisplayParams,
+    useGetWorkflowNameById,
+    useShowToastMessage,
+    useStoredTableConfig,
+} from '@/hooks';
+import {
+    ScheduledTasksResponse,
+    useGetScheduledTasksQuery,
+    useLazyGetScheduledTasksQuery,
+} from '@/rtk';
+import { mapRtkErrorToWfoError } from '@/rtk/utils';
+import { BadgeType } from '@/types';
+import type { GraphqlQueryVariables, ScheduledTaskDefinition } from '@/types';
+import { SortOrder } from '@/types';
+import { formatDate } from '@/utils';
+import {
+    getQueryVariablesForExport,
+    parseDateToLocaleDateTimeString,
+    parseIsoString,
+} from '@/utils';
+import {
+    csvDownloadHandler,
+    getCsvFileNameWithDate,
+} from '@/utils/csvDownload';
+
+import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
+
+const TASK_NAME_FIELD: keyof ScheduledTaskDefinition = 'name';
+
+type ScheduledTasksDefinitionExportItem = ScheduledTaskDefinition;
+
+const WfoWorkflowNameById = ({ workflowId }: { workflowId: string }) => {
+    const { workflowName } = useGetWorkflowNameById(workflowId);
+    return workflowName ? (
+        <WfoProductBlockBadge badgeType={BadgeType.TASK}>
+            {workflowName}
+        </WfoProductBlockBadge>
+    ) : (
+        ''
+    );
+};
+
+export const WfoScheduledTasksPage = () => {
+    const t = useTranslations('metadata.scheduledTasks');
+    const tError = useTranslations('errors');
+    const { showToastMessage } = useShowToastMessage();
+    const [tableDefaults, setTableDefaults] =
+        useState<StoredTableConfig<ScheduledTaskDefinition>>();
+
+    const getStoredTableConfig = useStoredTableConfig<ScheduledTaskDefinition>(
+        METADATA_SCHEDULES_LOCAL_STORAGE_KEY,
+    );
+
+    useEffect(() => {
+        const storedConfig = getStoredTableConfig();
+
+        if (storedConfig) {
+            setTableDefaults(storedConfig);
+        }
+    }, [getStoredTableConfig]);
+
+    const { dataDisplayParams, setDataDisplayParam } =
+        useDataDisplayParams<ScheduledTaskDefinition>({
+            // TODO: Improvement: A default pageSize value is set to avoid a graphql error when the query is executed
+            // the fist time before the useEffect has populated the tableDefaults. Better is to create a way for
+            // the query to wait for the values to be available
+            // https://github.com/workfloworchestrator/orchestrator-ui/issues/261
+            pageSize: tableDefaults?.selectedPageSize || DEFAULT_PAGE_SIZE,
+            sortBy: {
+                field: TASK_NAME_FIELD,
+                order: SortOrder.ASC,
+            },
+        });
+
+    const tableColumns: WfoAdvancedTableColumnConfig<ScheduledTaskDefinition> =
+        {
+            workflowId: {
+                columnType: ColumnType.DATA,
+                label: t('task'),
+                width: '180px',
+                renderData: (workflowId) => (
+                    <WfoWorkflowNameById workflowId={workflowId} />
+                ),
+            },
+            name: {
+                columnType: ColumnType.DATA,
+                label: t('taskDescription'),
+                width: '700px',
+            },
+            nextRunTime: {
+                columnType: ColumnType.DATA,
+                label: t('nextRuntime'),
+                width: '180px',
+                renderData: (date) => formatDate(date),
+                renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
+                clipboardText: parseIsoString(parseDateToLocaleDateTimeString),
+                renderTooltip: parseIsoString(parseDateToLocaleDateTimeString),
+            },
+            trigger: {
+                columnType: ColumnType.DATA,
+                label: t('schedule'),
+                width: '255px',
+                isSortable: false,
+                renderData: (trigger) => (
+                    <EuiFlexGroup
+                        gutterSize="s"
+                        justifyContent="flexStart"
+                        alignItems="center"
+                    >
+                        <EuiFlexItem grow={0}>
+                            <WfoScheduledTasksBadges
+                                workflowSchedules={[trigger]}
+                            />
+                        </EuiFlexItem>
+                        <EuiFlexItem>{trigger}</EuiFlexItem>
+                    </EuiFlexGroup>
+                ),
+            },
+        };
+
+    const { pageSize, pageIndex, sortBy, queryString } = dataDisplayParams;
+    const graphqlQueryVariables: GraphqlQueryVariables<ScheduledTaskDefinition> =
+        {
+            first: pageSize,
+            after: pageIndex * pageSize,
+            sortBy: sortBy,
+            query: queryString || undefined,
+        };
+    const { data, isFetching, error } = useGetScheduledTasksQuery(
+        graphqlQueryVariables,
+    );
+    const [getSchedulesTrigger, { isFetching: isFetchingCsv }] =
+        useLazyGetScheduledTasksQuery();
+    const getSchedulesForExport = () =>
+        getSchedulesTrigger(
+            getQueryVariablesForExport(graphqlQueryVariables),
+        ).unwrap();
+
+    const { totalItems, sortFields, filterFields } = data?.pageInfo ?? {};
+
+    const pagination: Pagination = {
+        pageSize: pageSize,
+        pageIndex: pageIndex,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
+        totalItemCount: totalItems ? totalItems : 0,
+        onChangePage: getPageIndexChangeHandler(setDataDisplayParam),
+        onChangeItemsPerPage: getPageSizeChangeHandler(setDataDisplayParam),
+    };
+
+    const dataSorting: WfoDataSorting<ScheduledTaskDefinition> = {
+        field: sortBy?.field ?? TASK_NAME_FIELD,
+        sortOrder: sortBy?.order ?? SortOrder.ASC,
+    };
+
+    const mapToExportItems = ({
+        schedules,
+    }: ScheduledTasksResponse): ScheduledTasksDefinitionExportItem[] => {
+        return schedules;
+    };
+
+    return (
+        <WfoMetadataPageLayout>
+            <WfoAdvancedTable
+                data={data?.schedules ?? []}
+                tableColumnConfig={mapSortableAndFilterableValuesToTableColumnConfig(
+                    tableColumns,
+                    sortFields,
+                    filterFields,
+                )}
+                dataSorting={[dataSorting]}
+                defaultHiddenColumns={tableDefaults?.hiddenColumns}
+                onUpdateDataSorting={getDataSortHandler<ScheduledTaskDefinition>(
+                    setDataDisplayParam,
+                )}
+                onUpdateQueryString={getQueryStringHandler<ScheduledTaskDefinition>(
+                    setDataDisplayParam,
+                )}
+                pagination={pagination}
+                isLoading={isFetching}
+                error={mapRtkErrorToWfoError(error)}
+                queryString={queryString}
+                localStorageKey={METADATA_SCHEDULES_LOCAL_STORAGE_KEY}
+                onExportData={csvDownloadHandler(
+                    getSchedulesForExport,
+                    mapToExportItems,
+                    (data) => data?.pageInfo || {},
+                    Object.keys(tableColumns),
+                    getCsvFileNameWithDate('Schedules'),
+                    showToastMessage,
+                    tError,
+                )}
+                exportDataIsLoading={isFetchingCsv}
+                disableSearch={true}
+            />
+        </WfoMetadataPageLayout>
+    );
+};

package/src/pages/metadata/WfoTasksPage.tsx

@@ -7,6 +7,7 @@ import { EuiBadgeGroup } from '@elastic/eui';
 import {
     PATH_METADATA_PRODUCTS,
     WfoFirstPartUUID,
+    WfoScheduledTasksBadgesContainer,
     WfoWorkflowTargetBadge,
     getPageIndexChangeHandler,
     getPageSizeChangeHandler,
@@ -42,7 +43,7 @@ import {
 } from '@/rtk';
 import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import type { GraphqlQueryVariables, TaskDefinition } from '@/types';
-import { BadgeType, SortOrder } from '@/types';
+import { BadgeType, ScheduleFrequency, SortOrder } from '@/types';
 import {
     getConcatenatedResult,
     getQueryUrl,
@@ -67,9 +68,13 @@ export type TaskListItem = Pick<
     'workflowId' | 'name' | 'description' | 'target' | 'createdAt'
 > & {
     productTags: string[];
+    scheduleFrequency: ScheduleFrequency[];
 };
 
-type TaskListExportItem = Omit<TaskListItem, 'productTags'> & {
+export type TaskListExportItem = Omit<
+    TaskListItem,
+    'productTags' | 'scheduleFrequency'
+> & {
     productTags: string;
 };
 
@@ -109,7 +114,7 @@ export const WfoTasksPage = () => {
         workflowId: {
             columnType: ColumnType.DATA,
             label: t('workflowId'),
-            width: '90px',
+            width: '95px',
             renderData: (value) => <WfoFirstPartUUID UUID={value} />,
             renderDetails: (value) => value,
             renderTooltip: (value) => value,
@@ -195,6 +200,16 @@ export const WfoTasksPage = () => {
                     ));
             },
         },
+        scheduleFrequency: {
+            columnType: ColumnType.DATA,
+            label: t('scheduled'),
+            renderData: (_, taskListItem) => (
+                <WfoScheduledTasksBadgesContainer
+                    workflowId={taskListItem.workflowId}
+                />
+            ),
+            width: '80px',
+        },
         createdAt: {
             columnType: ColumnType.DATA,
             label: t('createdAt'),
@@ -214,6 +229,7 @@ export const WfoTasksPage = () => {
         sortBy: graphQlTaskListMapper(sortBy),
         query: queryString || undefined,
     };
+
     const { data, isFetching, error } = useGetTasksQuery(
         taskListQueryVariables,
     );
@@ -246,6 +262,7 @@ export const WfoTasksPage = () => {
         tasksResponse: TasksResponse,
     ): TaskListExportItem[] => {
         const { tasks } = tasksResponse;
+
         return tasks.map(
             ({
                 workflowId,

package/src/pages/metadata/index.ts

@@ -4,4 +4,5 @@ export * from './WfoProductsPage';
 export * from './WfoWorkflowsPage';
 export * from './WfoTasksPage';
 export * from './WfoMetadataPageLayout';
+export * from './WfoScheduledTasksPage';
 export * from './workflowListObjectMapper';

package/src/pages/metadata/taskListObjectMapper.ts

@@ -18,6 +18,7 @@ export const mapTaskDefinitionToTaskListItem = (
             target,
             createdAt,
             productTags,
+            scheduleFrequency: [],
         };
     });
 
@@ -27,6 +28,8 @@ export const taskFieldMapper = (
     switch (field) {
         case 'productTags':
             return 'productTag' as keyof TaskDefinition;
+        case 'scheduleFrequency':
+            return 'scheduleFrequency' as keyof TaskDefinition;
         default:
             return field;
     }

package/src/pages/processes/WfoProcessDetail.tsx

@@ -230,7 +230,7 @@ export const WfoProcessDetail = ({
                             <WfoRefresh
                                 color={
                                     retryButtonIsDisabled
-                                        ? theme.colors.subduedText
+                                        ? theme.colors.textSubdued
                                         : theme.colors.link
                                 }
                             />
@@ -247,7 +247,7 @@ export const WfoProcessDetail = ({
                             <WfoXCircleFill
                                 color={
                                     abortButtonIsDisabled
-                                        ? theme.colors.subduedText
+                                        ? theme.colors.textSubdued
                                         : theme.colors.danger
                                 }
                             />
@@ -269,7 +269,7 @@ export const WfoProcessDetail = ({
                                     <WfoXCircleFill
                                         color={
                                             deleteButtonIsDisabled
-                                                ? theme.colors.subduedText
+                                                ? theme.colors.textSubdued
                                                 : theme.colors.danger
                                         }
                                     />

package/src/pages/processes/WfoProcessListSubscriptionsCell.tsx

@@ -74,7 +74,7 @@ export const WfoProcessListSubscriptionsCell: FC<
 
                 {numberOfNotVisibleSubscriptions > 0 && (
                     <WfoBadge
-                        textColor={theme.colors.primaryText}
+                        textColor={theme.colors.textPrimary}
                         color={toSecondaryColor(theme.colors.primary)}
                         onClick={() => onMoreSubscriptionsClick()}
                         iconOnClick={() => onMoreSubscriptionsClick()}

package/src/pages/processes/WfoProductInformationWithLink.tsx

@@ -26,7 +26,7 @@ export const WfoProductInformationWithLink = ({
                     <a href={docsUrl} target="_blank">
                         <EuiButtonIcon
                             iconSize={'l'}
-                            iconType={'iInCircle'}
+                            iconType={'info'}
                             aria-label={t('openWorkflowTaskInfo')}
                         />
                     </a>

package/src/pages/processes/WfoStartProcessPage.tsx

@@ -160,7 +160,12 @@ export const WfoStartProcessPage = ({
             timelineItems={timeLineItems}
             isLoading={isLoading}
         >
-            <EuiPanel css={{ marginTop: theme.base * 3 }}>
+            <EuiPanel
+                css={{
+                    backgroundColor: theme.colors.backgroundBaseNeutral,
+                    marginTop: theme.base * 3,
+                }}
+            >
                 <EuiFlexGroup css={getStepHeaderStyle(false)}>
                     <WfoStepStatusIcon stepStatus={StepStatus.FORM} />
 

package/src/pages/settings/WfoSettingsPage.tsx

@@ -98,7 +98,8 @@ export const WfoEnvSettings = () => {
                                     fontSize="m"
                                     paddingSize="m"
                                     css={css({
-                                        background: theme.colors.lightShade,
+                                        background:
+                                            theme.colors.borderBaseSubdued,
                                     })}
                                 >
                                     {showVariables}

package/src/pages/tasks/WfoTasksListPage.tsx

@@ -151,7 +151,7 @@ export const WfoTasksListPage = () => {
                     <EuiButton
                         onClick={handleRerunAllButtonClick}
                         iconType={() => (
-                            <WfoRefresh color={theme.colors.primaryText} />
+                            <WfoRefresh color={theme.colors.textPrimary} />
                         )}
                     >
                         {t('rerunAll')}

package/src/rtk/endpoints/metadata/index.ts

@@ -2,3 +2,4 @@ export * from './productBlocks';
 export * from './resourceTypes';
 export * from './workflows';
 export * from './tasks';
+export * from './scheduledTasks';

package/src/rtk/endpoints/metadata/scheduledTasks.ts

@@ -0,0 +1,66 @@
+import { orchestratorApi } from '@/rtk';
+import {
+    BaseGraphQlResult,
+    GraphqlQueryVariables,
+    ScheduledTaskDefinition,
+    ScheduledTasksDefinitionsResult,
+} from '@/types';
+
+export const scheduledTasks = `
+    query ScheduledTasks(
+        $first: Int!
+        $after: Int!
+        $sortBy: [GraphqlSort!]
+    ) {
+        scheduledTasks(first: $first, after: $after, sortBy: $sortBy) {
+            page {
+                id
+                name
+                nextRunTime
+                trigger
+                workflowId
+            }
+                pageInfo {
+                endCursor
+                hasNextPage
+                hasPreviousPage
+                startCursor
+                totalItems
+                sortFields
+                filterFields
+            }
+        }
+    }
+`;
+
+export type ScheduledTasksResponse = {
+    schedules: ScheduledTaskDefinition[];
+} & BaseGraphQlResult;
+
+const scheduledTasksApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getScheduledTasks: builder.query<
+            ScheduledTasksResponse,
+            GraphqlQueryVariables<ScheduledTaskDefinition>
+        >({
+            query: (variables) => ({
+                document: scheduledTasks,
+                variables,
+            }),
+            transformResponse: (
+                response: ScheduledTasksDefinitionsResult,
+            ): ScheduledTasksResponse => {
+                const schedules = response.scheduledTasks.page || [];
+                const pageInfo = response.scheduledTasks.pageInfo || {};
+
+                return {
+                    schedules,
+                    pageInfo,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetScheduledTasksQuery, useLazyGetScheduledTasksQuery } =
+    scheduledTasksApi;

package/src/rtk/endpoints/metadata/tasks.ts

@@ -7,7 +7,7 @@ import {
 } from '@/types';
 
 export const tasksQuery = `
-query MetadataWorkflows(
+query MetadataTasks(
     $first: Int!
     $after: Int!
     $sortBy: [GraphqlSort!]

package/src/theme/baseStyles/formFieldsBaseStyle.ts

@@ -1,14 +1,16 @@
 import { css } from '@emotion/react';
 
-import { WfoTheme } from '@/hooks';
+import { WfoThemeHelpers } from '@/hooks';
 
-export const getFormFieldsBaseStyle = ({ theme }: WfoTheme) => {
+export const getFormFieldsBaseStyle = ({ theme }: WfoThemeHelpers) => {
     const formFieldBaseStyle = css({
-        backgroundColor: theme.colors.body,
-        color: theme.colors.text,
-        '&:focus': {
-            backgroundColor: theme.colors.emptyShade,
+        backgroundColor: theme.colors.backgroundBaseSubdued,
+        color: theme.colors.textParagraph,
+        '&:focus, &:focus-visible, &:focus-within': {
+            backgroundColor: theme.colors.backgroundBaseNeutral,
+            boxShadow: `0 0 0 1px ${theme.colors.primary}`,
         },
+        // boxShadow: `0 0 0 1px ${theme.colors.borderBaseSubdued} !important`,
     });
 
     return {

package/src/theme/index.ts

@@ -1,2 +1,2 @@
 export * from './baseStyles';
-export * from './defaultOrchestratorTheme';
+export * from './wfoThemeModifications';

package/src/theme/wfoThemeModifications.ts

@@ -0,0 +1,117 @@
+import type { EuiThemeComputed, EuiThemeModifications } from '@elastic/eui';
+
+import {
+    shadeOrchestratorColor,
+    tintOrchestratorColor,
+} from '../hooks/useOrchestratorTheme';
+
+type WfoThemeExtraColors = {
+    colors: {
+        LIGHT: {
+            header: string;
+        };
+        DARK: {
+            header: string;
+        };
+    };
+};
+
+export type WfoComputedModifications = {
+    colors: {
+        header: string;
+    };
+};
+
+type WfoThemeModifications = EuiThemeModifications<WfoThemeExtraColors>;
+
+export type WfoComputedTheme = EuiThemeComputed<WfoComputedModifications>;
+
+/*
+ * Eui's default theme is Borealis. This is applied automatically. These are the modifications passed into modify
+ * property when calling EuiProvider
+ */
+export const wfoThemeModifications: WfoThemeModifications = {
+    base: 16,
+    breakpoint: {
+        xs: 0,
+        s: 575,
+        m: 768,
+        l: 992,
+        xl: 1200,
+        xxl: 1600,
+    },
+    size: {
+        base: '16px',
+        xxs: '2px',
+        xs: '4px',
+        s: '8px',
+        m: '12px',
+        l: '24px',
+        xl: '32px',
+        xxl: '40px',
+        xxxl: '48px',
+        xxxxl: '64px',
+    },
+    colors: {
+        DARK: {
+            accent: '#E67300',
+            backgroundBaseAccent: '#9CA3AF',
+            backgroundBaseDisabled: '#1F2937',
+            backgroundBaseNeutral: '#101827',
+            backgroundBaseSubdued: '#1F2937',
+            backgroundBasePlain: '#1F2937',
+            borderBasePlain: '#4B5563',
+            borderBaseSubdued: '#374151',
+            danger: '#FF4F46',
+            header: '#04385F',
+            highlight: '#51482F',
+            link: '#1F8DD8',
+            primary: '#0077C8',
+            backgroundLightPrimary: shadeOrchestratorColor('#0077C8'),
+            backgroundFilledPrimary: '#0167ad',
+            backgroundFilledDanger: '#BD271F',
+            shadow: '#000000',
+            success: '#13B054',
+            textAccent: '#E67300',
+            textDanger: '#FF4F46',
+            textDisabled: '#515c69',
+            textHeading: '#ffffff',
+            textParagraph: '#FFFFFF',
+            textPrimary: '#1F8DD8',
+            textSubdued: '#9CA3AF',
+            textSuccess: '#13B054',
+            textWarning: '#FFC514',
+            warning: '#FFC514',
+            textInverse: '#FFFFFF',
+        },
+        LIGHT: {
+            accent: '#E67300',
+            backgroundBaseAccent: '#64758B',
+            backgroundBaseDisabled: '#f1f1f8',
+            backgroundBaseNeutral: '#FFFFFF',
+            backgroundBaseSubdued: '#f4f6fa',
+            backgroundBasePlain: '#FFFFFF',
+            borderBasePlain: '#CCD5E2',
+            borderBaseSubdued: '#CCD5E2',
+            danger: '#BD271F',
+            header: '#04385F',
+            highlight: '#FFF6DE',
+            link: '#0067AC',
+            primary: '#0077C8',
+            backgroundLightPrimary: tintOrchestratorColor('#0077C8'),
+            backgroundFilledPrimary: '#0077C8',
+            shadow: '#000000',
+            success: '#008939',
+            textAccent: '#B05200',
+            textDanger: '#AC0A01',
+            textDisabled: '#879bad',
+            textHeading: '#0F172B',
+            textParagraph: '#334255',
+            textPrimary: '#0067AC',
+            textSubdued: '#64758B',
+            textSuccess: '#007832',
+            textWarning: '#8E6A00',
+            warning: '#FFC514',
+        },
+    },
+};

package/src/types/types.ts

@@ -278,8 +278,21 @@ export interface TaskDefinition {
     createdAt: string;
 }
 
+export interface ScheduledTaskDefinition {
+    id: string;
+    name: string;
+    nextRunTime: string;
+    trigger: string;
+    workflowId: string;
+}
+
 //// Utility types
 
+export enum ScheduleFrequency {
+    RECURRING = 'RECURRING',
+    ONCE = 'ONCE',
+}
+
 export enum SortOrder {
     ASC = 'ASC',
     DESC = 'DESC',
@@ -322,7 +335,9 @@ export type BaseGraphQlResult = {
 export interface SubscriptionsResult<T = Subscription> {
     subscriptions: GraphQlResultPage<T>;
 }
-
+export interface ProductDefinitionsResult<T = ProductDefinition> {
+    products: GraphQlResultPage<T>;
+}
 export interface SubscriptionDropdownOptionsResult {
     subscriptions: GraphQlSinglePage<SubscriptionDropdownOption>;
 }
@@ -331,8 +346,8 @@ export interface SubscriptionDetailResult {
     subscriptions: GraphQlResultPage<SubscriptionDetail>;
 }
 
-export interface ProductDefinitionsResult<T = ProductDefinition> {
-    products: GraphQlResultPage<T>;
+export interface ScheduledTasksDefinitionsResult<T = ScheduledTaskDefinition> {
+    scheduledTasks: GraphQlResultPage<T>;
 }
 export interface StartProcessStep {
     name: Step['name'];