@orchestrator-ui/orchestrator-ui-components 8.3.0 → 8.4.0

package/src/pages/metadata/WfoScheduleTaskFormPage.tsx

@@ -1,17 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
 
 import _ from 'lodash';
-import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 import { PydanticForm } from 'pydantic-forms';
 import type { PydanticFormApiProvider } from 'pydantic-forms';
-import { PydanticFormApiResponseType, PydanticFormFieldFormat, PydanticFormFieldType } from 'pydantic-forms';
-import type { PydanticFormDefinitionResponse, PydanticFormSuccessResponse, RawJsonProperties } from 'pydantic-forms';
 
 import { PATH_METADATA_SCHEDULED_TASKS } from '@/components';
-import { WfoContentHeader, WfoLoading } from '@/components';
 import { Footer } from '@/components/WfoPydanticForm/Footer';
-import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
 import { useShowToastMessage } from '@/hooks';
 import { useGetPydanticFormsConfig } from '@/hooks/useGetPydanticFormsConfig';
 import {
@@ -21,422 +16,12 @@ import {
   isRecord,
   useCreateScheduledTaskMutation,
 } from '@/rtk';
-import type { CronKwargs } from '@/rtk';
-import { useGetTasksQuery } from '@/rtk';
 import { useStartFormMutation } from '@/rtk/endpoints/forms';
-import { useGetVersionsQuery } from '@/rtk/endpoints/versions';
 import { ToastTypes } from '@/types';
-import { Intervals, TaskDefinition, TaskType } from '@/types';
-import { compareVersions } from '@/utils/compareVersions';
-
-type CreateScheduleFormStep1 = {
-  workflowId: TaskDefinition['workflowId'];
-  taskType: TaskType;
-};
-
-type CreateScheduleFormStep2Once = {
-  taskType: TaskType.DATE;
-  startDate: string;
-};
-type CreateScheduleFormStep2Cron = {
-  taskType: TaskType.CRON;
-  startDate: string;
-  cron: string;
-};
-type CreateScheduleFormStep2Interval = {
-  taskType: TaskType.INTERVAL;
-  startDate: string;
-  interval: Intervals;
-};
-
-type CreateScheduleFormStep2 =
-  | CreateScheduleFormStep2Once
-  | CreateScheduleFormStep2Cron
-  | CreateScheduleFormStep2Interval;
-
-type CreateScheduleFormInput = [CreateScheduleFormStep1, CreateScheduleFormStep2];
-
-// TODO: remove after 5.0.0 releases and rename WfoScheduleTaskFormPageBackend to WfoScheduleTaskFormPage
-export const WfoScheduleTaskFormPageHardCoded = () => {
-  const t = useTranslations('metadata.scheduleTaskForm');
-  const { showToastMessage } = useShowToastMessage();
-
-  const [createScheduledTask, mutationState] = useCreateScheduledTaskMutation();
-  const { data, isLoading } = useGetTasksQuery({
-    first: NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS,
-    after: 0,
-  });
-  const router = useRouter();
-  const { workflowId } = router.query;
-  const getFormStep2 = (userInput: CreateScheduleFormInput): PydanticFormDefinitionResponse => {
-    const getStep2Defs = () => ({
-      IntervalEnum: {
-        enum: [
-          Intervals.ONE_HOUR,
-          Intervals.TWO_HOURS,
-          Intervals.FOUR_HOURS,
-          Intervals.TWELVE_HOURS,
-          Intervals.TWENTY4_HOURS,
-          Intervals.ONE_WEEK,
-          Intervals.TWO_WEEKS,
-          Intervals.ONE_MONTH,
-        ],
-        options: {
-          [Intervals.ONE_HOUR]: t('1hour'),
-          [Intervals.TWO_HOURS]: t('2hours'),
-          [Intervals.FOUR_HOURS]: t('4hours'),
-          [Intervals.TWELVE_HOURS]: t('12hours'),
-          [Intervals.TWENTY4_HOURS]: t('24hours'),
-          [Intervals.ONE_WEEK]: t('1week'),
-          [Intervals.TWO_WEEKS]: t('2weeks'),
-          [Intervals.ONE_MONTH]: t('1month'),
-        },
-        title: t('selectTaskType'),
-        type: PydanticFormFieldType.STRING,
-      },
-      ButtonColor: {
-        enum: ['primary', 'accent', 'success', 'warning', 'danger', 'ghost', 'text'],
-        options: {},
-        title: 'ButtonColor',
-        type: PydanticFormFieldType.STRING,
-      },
-      ButtonConfig: {
-        additionalProperties: false,
-        properties: {
-          text: {
-            title: 'Text',
-            type: PydanticFormFieldType.STRING,
-          },
-          dialog: {
-            title: 'Dialog',
-            type: PydanticFormFieldType.STRING,
-          },
-          color: {
-            $ref: '#/$defs/ButtonColor',
-          },
-        },
-        enum: [],
-        title: 'ButtonConfig',
-        options: {},
-        type: PydanticFormFieldType.OBJECT,
-      },
-      Buttons: {
-        additionalProperties: false,
-        title: 'Buttons',
-        type: PydanticFormFieldType.OBJECT,
-        properties: {
-          previous: {
-            $ref: '#/$defs/ButtonConfig',
-          },
-          next: {
-            $ref: '#/$defs/ButtonConfig',
-          },
-        },
-        required: ['previous', 'next'],
-        enum: [],
-        options: {},
-      },
-    });
-
-    const getStep2Properties = (userInput: CreateScheduleFormInput): RawJsonProperties => {
-      const step1UserInput = userInput[0];
-
-      const step2Properties: RawJsonProperties = {
-        startDate: {
-          type: PydanticFormFieldType.NUMBER,
-          format: PydanticFormFieldFormat.DATETIME,
-          title: t('firstRunDate'),
-          $ref: '',
-          uniforms: {
-            showTimeSelect: true,
-          },
-        },
-      };
-
-      if (step1UserInput.taskType === TaskType.INTERVAL) {
-        step2Properties.interval = {
-          type: PydanticFormFieldType.STRING,
-          format: PydanticFormFieldFormat.DROPDOWN,
-          title: t('selectInterval'),
-          $ref: '#/$defs/IntervalEnum',
-        };
-      }
-      if (step1UserInput.taskType === TaskType.CRON) {
-        const cronRegex =
-          '^(?:(\\*|([0-5]?\\d))(?:\\/(\\d+))?\\s+){4}(?:(\\*|([0-5]?\\d))(?:\\/(\\d+))?\\s+)?(?:([0-9,/*\\-?LW#]+)(?:\\s+([0-9,/*\\-?LW#]+))?(?:\\s+([0-9,/*\\-?LW#]+))?)$';
-
-        step2Properties.cron = {
-          type: PydanticFormFieldType.STRING,
-          format: PydanticFormFieldFormat.DEFAULT,
-          pattern: cronRegex,
-          $ref: '',
-        };
-      }
-
-      return step2Properties;
-    };
-
-    const step2Properties = getStep2Properties(userInput);
-    const form2Defs = getStep2Defs();
-    const formStep2: PydanticFormDefinitionResponse = {
-      type: PydanticFormApiResponseType.FORM_DEFINITION,
-      form: {
-        type: PydanticFormFieldType.OBJECT,
-        properties: {
-          buttons: {
-            $ref: '#/$defs/Buttons',
-            default: {
-              previous: {},
-              next: { text: t('createScheduleButton') },
-            },
-            type: PydanticFormFieldType.OBJECT,
-            format: PydanticFormFieldFormat.HIDDEN,
-          },
-          ...step2Properties,
-        },
-        $defs: { ...form2Defs },
-      },
-      meta: {
-        hasNext: false,
-      },
-      status: 510,
-    };
-    return formStep2;
-  };
-
-  const onSuccess = () => {
-    router.replace(PATH_METADATA_SCHEDULED_TASKS);
-  };
-
-  const onCancel = () => {
-    router.replace(PATH_METADATA_SCHEDULED_TASKS);
-  };
-
-  const getTaskByWorkflowId = (workflowId: TaskDefinition['workflowId']) => {
-    return data?.tasks.find((task) => task.workflowId === workflowId);
-  };
-
-  const createTask = (userInput: CreateScheduleFormInput): PydanticFormSuccessResponse => {
-    const getIntervalArg = (interval: Intervals) => {
-      const intervalMap = new Map([
-        [Intervals.ONE_HOUR, { hours: 1 }],
-        [Intervals.TWO_HOURS, { hours: 2 }],
-        [Intervals.FOUR_HOURS, { hours: 4 }],
-        [Intervals.TWELVE_HOURS, { hours: 12 }],
-        [Intervals.TWENTY4_HOURS, { hours: 24 }],
-        [Intervals.ONE_WEEK, { weeks: 1 }],
-        [Intervals.TWO_WEEKS, { weeks: 2 }],
-        [Intervals.ONE_MONTH, { weeks: 4 }],
-      ]);
-      return intervalMap.has(interval) ? intervalMap.get(interval) : undefined;
-    };
-
-    const getCronKwargs = (cron: string, startDate: string): CronKwargs => {
-      const [minute, hour, day, month, day_of_week] = cron.split(' ');
-
-      return {
-        start_date: startDate,
-        minute: parseInt(minute, 10),
-        hour: parseInt(hour, 10),
-        day: parseInt(day, 10),
-        month: parseInt(month, 10),
-        day_of_week: parseInt(day_of_week, 10),
-      };
-    };
-
-    const getCreateTaskPayload = (userInput: CreateScheduleFormInput): ScheduledTaskPostPayload => {
-      const userInputStep1 = userInput[0];
-      const userInputStep2 = userInput[1];
-
-      if (!userInputStep1 || !userInputStep2) {
-        throw new Error('Unknown or missing form input');
-      }
-
-      const startTimestampMilliseconds = parseInt(userInputStep2.startDate, 10);
-      const startDate = new Date(startTimestampMilliseconds * 1000).toISOString();
-
-      const task = getTaskByWorkflowId(userInputStep1.workflowId);
-
-      if (!task) {
-        throw Error('No task found with id');
-      }
-
-      if (userInputStep1.taskType === TaskType.DATE) {
-        return {
-          scheduled_type: 'create',
-          workflow_id: task.workflowId,
-          workflow_name: task.name,
-          name: task.description,
-          trigger: userInputStep1.taskType,
-          trigger_kwargs: {
-            run_date: startDate,
-          },
-          user_inputs: [],
-        };
-      } else if (userInputStep1.taskType === TaskType.INTERVAL) {
-        const step2Input = userInputStep2 as CreateScheduleFormStep2Interval;
-        const intervalArg = getIntervalArg(step2Input.interval);
-
-        if (!intervalArg) {
-          throw new Error('Unknown or missing task interval');
-        }
-
-        return {
-          scheduled_type: 'create',
-          workflow_id: task.workflowId,
-          workflow_name: task.name,
-          name: task.description,
-          trigger: userInputStep1.taskType,
-          trigger_kwargs: {
-            start_date: startDate,
-            ...intervalArg,
-          },
-          user_inputs: [],
-        };
-      } else if (userInputStep1.taskType === TaskType.CRON) {
-        const step2Input = userInputStep2 as CreateScheduleFormStep2Cron;
-        // minute hour day month weekday
-        return {
-          scheduled_type: 'create',
-          workflow_id: task.workflowId,
-          workflow_name: task.name,
-          name: task.description,
-          trigger: userInputStep1.taskType,
-          trigger_kwargs: getCronKwargs(step2Input.cron, startDate),
-          user_inputs: [],
-        };
-      }
-      throw new Error('Unknown or missing task type');
-    };
-
-    const createSchedulePayload = getCreateTaskPayload(userInput);
-    createScheduledTask(createSchedulePayload);
-
-    return {
-      type: PydanticFormApiResponseType.SUCCESS,
-      data: userInput,
-      status: 201,
-    };
-  };
-
-  const validateForm = (formInput: unknown): boolean => {
-    if (!_.isEmpty(formInput) && _.isArray(formInput) && formInput.length === 2) {
-      return true;
-    }
-    return false;
-  };
-
-  const validateStep1 = (formInput: unknown): boolean => {
-    return !_.isEmpty(formInput);
-  };
-
-  const taskOptions =
-    data?.tasks.reduce((options, taskOption) => {
-      if (taskOption.isTask) {
-        return {
-          [taskOption.workflowId]: taskOption.description,
-          ...options,
-        };
-      }
-      return options;
-    }, {}) || {};
-
-  const formStep1: PydanticFormDefinitionResponse = {
-    type: PydanticFormApiResponseType.FORM_DEFINITION,
-    form: {
-      $defs: {
-        TaskTypeChoice: {
-          enum: ['once', 'recurring'],
-          options: {
-            [TaskType.DATE]: t('taskTypeDate'),
-            [TaskType.INTERVAL]: t('taskTypeInterval'),
-            [TaskType.CRON]: t('taskTypeCron'),
-          },
-          title: t('selectTaskType'),
-          type: PydanticFormFieldType.STRING,
-        },
-        TasksEnum: {
-          enum: Object.keys(taskOptions),
-          options: taskOptions,
-          title: t('selectTask'),
-          type: PydanticFormFieldType.STRING,
-        },
-      },
-      type: PydanticFormFieldType.OBJECT,
-      properties: {
-        workflowId: {
-          type: PydanticFormFieldType.STRING,
-          format: PydanticFormFieldFormat.DROPDOWN,
-          $ref: '#/$defs/TasksEnum',
-          default: workflowId as string,
-        },
-        taskType: {
-          type: PydanticFormFieldType.STRING,
-          format: PydanticFormFieldFormat.RADIO,
-          $ref: '#/$defs/TaskTypeChoice',
-        },
-      },
-      required: ['task', 'taskOption'],
-    },
-    meta: {
-      hasNext: true,
-    },
-    status: 510,
-  };
-
-  const getApiProvider = (): PydanticFormApiProvider => {
-    return ({
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      formKey,
-      requestBody,
-    }: {
-      formKey: string;
-      requestBody: CreateScheduleFormInput;
-    }) => {
-      const userInput = requestBody;
-      return new Promise<Record<string, unknown>>((resolve) => {
-        if (validateForm(userInput)) {
-          const successResponse = createTask(userInput);
-          return resolve(successResponse);
-        } else if (validateStep1(userInput[0])) {
-          const formStep2 = getFormStep2(userInput);
-          resolve(formStep2);
-        }
-
-        resolve(formStep1);
-      }).then((formDefinition) => {
-        return formDefinition;
-      });
-    };
-  };
-
-  const config = useGetPydanticFormsConfig(getApiProvider, Footer);
-
-  if (mutationState.isError) {
-    showToastMessage(ToastTypes.ERROR, '', 'Error while saving scheduled task');
-    console.error('Error saving scheduled task', mutationState);
-    return undefined;
-  }
-
-  return (
-    <>
-      <WfoContentHeader title={t('newSchedule')} />
-      {(isLoading && <WfoLoading />) || (
-        <PydanticForm
-          formKey="add-schedule-key"
-          formId="add-schedule-id"
-          onSuccess={onSuccess}
-          onCancel={onCancel}
-          config={config}
-        />
-      )}
-    </>
-  );
-};
 
 const START_SCHEDULE_PAYLOAD = {};
 
-export const WfoScheduleTaskFormPageBackend = () => {
+export const WfoScheduleTaskFormPage = () => {
   const { showToastMessage } = useShowToastMessage();
 
   const generateFormId = useMemo(() => {
@@ -530,11 +115,3 @@ export const WfoScheduleTaskFormPageBackend = () => {
     />
   );
 };
-
-export const WfoScheduleTaskFormPage = () => {
-  const { data } = useGetVersionsQuery();
-  const coreVersion = data?.version.applicationVersions[0].split(' ')[1] ?? '';
-
-  const isCompatible = compareVersions(coreVersion, '5.0.0a7') !== -1;
-  return isCompatible ? <WfoScheduleTaskFormPageBackend /> : <WfoScheduleTaskFormPageHardCoded />;
-};

package/src/rtk/endpoints/availability.ts

@@ -16,23 +16,7 @@ const availabilityApi = orchestratorApi.injectEndpoints({
         baseQueryType: BaseQueryTypes.fetch,
       },
     }),
-    checkAgentAvailability: build.query<AvailabilityCheckResponse, void>({
-      query: () => ({
-        url: '/agent/',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          messages: [],
-        }),
-      }),
-      extraOptions: {
-        baseQueryType: BaseQueryTypes.fetch,
-        apiName: 'agent',
-      },
-    }),
   }),
 });
 
-export const { useCheckSearchAvailabilityQuery, useCheckAgentAvailabilityQuery } = availabilityApi;
+export const { useCheckSearchAvailabilityQuery } = availabilityApi;

package/src/rtk/endpoints/index.ts

@@ -20,4 +20,3 @@ export * from './forms';
 export * from './fileUpload';
 export * from './search';
 export * from './availability';
-export * from './agentQueryResults';

package/src/utils/getDefaultTableConfig.ts

@@ -42,7 +42,7 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
       return getTableConfig<T>(resourceTypeColumns as (keyof T)[]);
     }
     case METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY: {
-      const productColumns: (keyof ProductDefinition)[] = ['productId', 'productType', 'status', 'createdAt'];
+      const productColumns: (keyof ProductDefinition)[] = ['productId', 'createdAt'];
       return getTableConfig<T>(productColumns as (keyof T)[]);
     }
     case METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY: {

package/src/components/WfoAgent/ExportButton/ExportButton.tsx

@@ -1,86 +0,0 @@
-import React from 'react';
-
-import { useTranslations } from 'next-intl';
-
-import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
-
-import { useShowToastMessage, useWithOrchestratorTheme } from '@/hooks';
-import { useLazyGetAgentExportQuery } from '@/rtk/endpoints/agentExport';
-import { ExportArtifact, GraphQLPageInfo } from '@/types';
-import { getCsvFileNameWithDate } from '@/utils';
-import { csvDownloadHandler } from '@/utils/csvDownload';
-
-import { getExportButtonStyles } from './styles';
-
-export type ExportButtonProps = {
-  artifact: ExportArtifact;
-};
-
-type ExportApiResponse = {
-  page: object[];
-  pageInfo?: GraphQLPageInfo;
-};
-
-export function ExportButton({ artifact }: ExportButtonProps) {
-  const { showToastMessage } = useShowToastMessage();
-  const tError = useTranslations('errors');
-  const [triggerExport, { isFetching }] = useLazyGetAgentExportQuery();
-
-  const {
-    containerStyle,
-    buttonWrapperStyle,
-    titleStyle,
-    fileRowStyle,
-    fileInfoStyle,
-    filenameStyle,
-    downloadButtonStyle,
-  } = useWithOrchestratorTheme(getExportButtonStyles);
-
-  const filename = getCsvFileNameWithDate('export');
-
-  const onDownloadClick = async () => {
-    const data = await triggerExport(artifact.download_url).unwrap();
-
-    const keyOrder = data.page.length > 0 ? Object.keys(data.page[0]) : [];
-
-    const handleExport = csvDownloadHandler(
-      async () => data,
-      (data: ExportApiResponse) => data.page,
-      (data: ExportApiResponse) =>
-        data.pageInfo ?? {
-          totalItems: data.page.length,
-          startCursor: 0,
-          endCursor: data.page.length - 1,
-          hasNextPage: false,
-          hasPreviousPage: false,
-          sortFields: [],
-          filterFields: [],
-        },
-      keyOrder,
-      filename,
-      showToastMessage,
-      tError,
-    );
-
-    await handleExport();
-  };
-
-  return (
-    <div css={containerStyle}>
-      <div css={buttonWrapperStyle}>
-        {artifact.description && <div css={titleStyle}>{artifact.description}</div>}
-        <div css={fileRowStyle} onClick={onDownloadClick}>
-          <div css={fileInfoStyle}>
-            <EuiIcon type="document" size="m" />
-            <span css={filenameStyle}>{filename}</span>
-          </div>
-          <div css={downloadButtonStyle}>
-            {isFetching ?
-              <EuiLoadingSpinner size="m" />
-            : <EuiIcon type="download" size="m" />}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/WfoAgent/ExportButton/index.ts

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

package/src/components/WfoAgent/ExportButton/styles.ts

@@ -1,69 +0,0 @@
-import { css } from '@emotion/react';
-
-import { WfoThemeHelpers } from '@/hooks';
-
-export const getExportButtonStyles = ({ theme }: WfoThemeHelpers) => {
-  const containerStyle = css({
-    marginTop: theme.size.xl,
-    marginBottom: theme.size.xl,
-    width: '50%',
-  });
-
-  const buttonWrapperStyle = css({
-    backgroundColor: theme.colors.backgroundBaseNeutral,
-    padding: `${theme.size.xl} ${theme.size.xl}`,
-    border: `${theme.border.width.thin} solid transparent`,
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.size.l,
-  });
-
-  const titleStyle = css({
-    fontSize: theme.size.m,
-    fontWeight: theme.font.weight.semiBold,
-    color: theme.colors.textParagraph,
-  });
-
-  const fileRowStyle = css({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: theme.size.m,
-    border: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
-    borderRadius: theme.border.radius.medium,
-    padding: `${theme.size.m} ${theme.size.l}`,
-    backgroundColor: theme.colors.backgroundBaseNeutral,
-    cursor: 'pointer',
-  });
-
-  const fileInfoStyle = css({
-    display: 'flex',
-    alignItems: 'center',
-    gap: theme.size.m,
-    flex: 1,
-    color: theme.colors.textParagraph,
-  });
-
-  const filenameStyle = css({
-    fontSize: theme.size.m,
-    fontWeight: theme.font.weight.medium,
-    color: theme.colors.textParagraph,
-  });
-
-  const downloadButtonStyle = css({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: theme.colors.textParagraph,
-  });
-
-  return {
-    containerStyle,
-    buttonWrapperStyle,
-    titleStyle,
-    fileRowStyle,
-    fileInfoStyle,
-    filenameStyle,
-    downloadButtonStyle,
-  };
-};