@orchestrator-ui/orchestrator-ui-components 0.2.7 → 0.3.0

package/src/pages/{processes/WfoProcessListPage.tsx → workflow/WfoWorkflowListPage.tsx}

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
+import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/router';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
@@ -9,33 +10,31 @@ import {
     ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY,
     COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY,
     DEFAULT_PAGE_SIZE,
-} from '../../components';
-import type { StoredTableConfig } from '../../components';
-import { WfoFilterTabs } from '../../components';
-import {
-    ProcessListItem,
-    WfoProcessList,
-} from '../../components/WfoProcessesList/WfoProcessList';
-import { useDataDisplayParams, useStoredTableConfig } from '../../hooks';
-import { SortOrder } from '../../types';
-import { getProcessListTabTypeFromString } from './getProcessListTabTypeFromString';
-import { WfoProcessListTabType, defaultProcessListTabs } from './tabConfig';
-
-export const WfoProcessListPage = () => {
-    const router = useRouter();
+    PATH_WORKFLOWS,
+} from '@/components';
+import type { StoredTableConfig } from '@/components';
+import { ProcessListItem, WfoFilterTabs, WfoProcessList } from '@/components';
+import { useDataDisplayParams, useStoredTableConfig } from '@/hooks';
+import { SortOrder } from '@/types';
 
+import { getWorkflowListTabTypeFromString } from './getWorkflowListTabTypeFromString';
+import { WfoWorkflowListTabType, defaultWorkflowListTabs } from './tabConfig';
+
+export const WfoWorkflowListPage = () => {
+    const router = useRouter();
+    const t = useTranslations('workflows.index');
     const [activeTab, setActiveTab] = useQueryParam(
         'activeTab',
-        withDefault(StringParam, WfoProcessListTabType.ACTIVE),
+        withDefault(StringParam, WfoWorkflowListTabType.ACTIVE),
     );
 
     const [tableDefaults, setTableDefaults] =
         useState<StoredTableConfig<ProcessListItem>>();
 
-    const selectedProcessListTab = getProcessListTabTypeFromString(activeTab);
+    const selectedProcessListTab = getWorkflowListTabTypeFromString(activeTab);
 
     const localStorageKey =
-        selectedProcessListTab === WfoProcessListTabType.ACTIVE
+        selectedProcessListTab === WfoWorkflowListTabType.ACTIVE
             ? ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY
             : COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY;
 
@@ -64,18 +63,18 @@ export const WfoProcessListPage = () => {
         });
 
     const handleChangeProcessListTab = (
-        updatedProcessListTab: WfoProcessListTabType,
+        updatedProcessListTab: WfoWorkflowListTabType,
     ) => {
         setActiveTab(updatedProcessListTab);
         setDataDisplayParam('pageIndex', 0);
     };
 
-    const alwaysOnFilters = defaultProcessListTabs.find(
+    const alwaysOnFilters = defaultWorkflowListTabs.find(
         ({ id }) => id === selectedProcessListTab,
     )?.alwaysOnFilters;
 
     if (!selectedProcessListTab) {
-        router.replace('/processes');
+        router.replace(PATH_WORKFLOWS);
         return null;
     }
 
@@ -83,12 +82,12 @@ export const WfoProcessListPage = () => {
         <>
             <EuiSpacer />
 
-            <EuiPageHeader pageTitle="Processes" />
+            <EuiPageHeader pageTitle={t('title')} />
             <EuiSpacer size="m" />
 
             <WfoFilterTabs
-                tabs={defaultProcessListTabs}
-                translationNamespace="processes.tabs"
+                tabs={defaultWorkflowListTabs}
+                translationNamespace="workflows.tabs"
                 selectedTab={selectedProcessListTab}
                 onChangeTab={handleChangeProcessListTab}
             />

package/src/pages/workflow/getWorkflowListTabTypeFromString.ts

@@ -0,0 +1,19 @@
+import { WfoWorkflowListTabType } from './tabConfig';
+
+export const getWorkflowListTabTypeFromString = (
+    tabId?: string,
+): WfoWorkflowListTabType | undefined => {
+    if (!tabId) {
+        return undefined;
+    }
+
+    switch (tabId.toUpperCase()) {
+        case WfoWorkflowListTabType.ACTIVE.toString():
+            return WfoWorkflowListTabType.ACTIVE;
+        case WfoWorkflowListTabType.COMPLETED.toString():
+            return WfoWorkflowListTabType.COMPLETED;
+
+        default:
+            return undefined;
+    }
+};

package/src/pages/workflow/index.ts

@@ -1 +1 @@
-export * from './WfoStartWorkflowPage';
+export * from './WfoWorkflowListPage';

package/src/pages/{processes → workflow}/tabConfig.ts

@@ -1,17 +1,17 @@
 import { WfoFilterTab } from '../../components';
-import { ProcessListItem } from '../../components/WfoProcessesList/WfoProcessList';
+import { ProcessListItem } from '../../components/WfoProcessList/WfoProcessList';
 
-export enum WfoProcessListTabType {
+export enum WfoWorkflowListTabType {
     ACTIVE = 'ACTIVE',
     COMPLETED = 'COMPLETED',
 }
 
-export const defaultProcessListTabs: WfoFilterTab<
-    WfoProcessListTabType,
+export const defaultWorkflowListTabs: WfoFilterTab<
+    WfoWorkflowListTabType,
     ProcessListItem
 >[] = [
     {
-        id: WfoProcessListTabType.ACTIVE,
+        id: WfoWorkflowListTabType.ACTIVE,
         translationKey: 'active',
         alwaysOnFilters: [
             {
@@ -30,7 +30,7 @@ export const defaultProcessListTabs: WfoFilterTab<
         ],
     },
     {
-        id: WfoProcessListTabType.COMPLETED,
+        id: WfoWorkflowListTabType.COMPLETED,
         translationKey: 'completed',
         alwaysOnFilters: [
             {

package/src/types/types.ts

@@ -1,11 +1,15 @@
 import { _EuiThemeColorsMode } from '@elastic/eui/src/global_styling/variables/colors';
 
+import { InputForm } from './forms';
+
 export type UnionOfInterfaceTypes<T> = T[keyof T];
 
 export type Nullable<T> = T | null;
 
 type GenericField = { [key: string]: number | string | boolean };
 
+type GenericResponse = { [key: string]: unknown };
+
 export type FieldValue = {
     field: string;
     value: string | number | boolean;
@@ -16,7 +20,11 @@ export type KeyValue = {
     value: string | number | boolean | undefined;
 };
 
-export type EngineStatusValue = 'RUNNING' | 'PAUSING' | 'PAUSED';
+export enum EngineStatus {
+    RUNNING = 'RUNNING',
+    PAUSING = 'PAUSING',
+    PAUSED = 'PAUSED',
+}
 
 export type Customer = {
     fullname: string;
@@ -169,6 +177,7 @@ export type Process = {
     processId: string;
     startedAt: string;
     lastModifiedAt: string;
+    isTask: boolean;
     subscriptions: {
         page: Pick<Subscription, 'subscriptionId' | 'description'>[];
     };
@@ -195,6 +204,7 @@ export interface ProcessDetail {
     createdBy: Process['createdBy'];
     startedAt: Process['startedAt'];
     lastStep: string;
+    form?: InputForm; // If there is a step that contains a form, this is the form
     lastModifiedAt: Process['lastModifiedAt'];
     workflowName: string;
     isTask: boolean;
@@ -289,6 +299,7 @@ export type GraphqlQueryVariables<Type> = {
     after?: number;
     sortBy?: GraphQLSort<Type>;
     filterBy?: GraphqlFilter<Type>[];
+    query?: string;
 };
 
 export type GraphQLPageInfo = {
@@ -316,6 +327,13 @@ export interface SubscriptionDetailResult {
 export interface ProductDefinitionsResult {
     products: GraphQlResultPage<ProductDefinition>;
 }
+export interface StartProcessStep {
+    name: Step['name'];
+}
+
+export interface ProcessStepsResult {
+    workflows: GraphQlSinglePage<{ steps: StartProcessStep[] }>;
+}
 
 export interface ProductBlockDefinitionsResult {
     productBlocks: GraphQlResultPage<ProductBlockDefinition>;
@@ -325,7 +343,7 @@ export interface ResourceTypeDefinitionsResult {
     resourceTypes: GraphQlResultPage<ResourceTypeDefinition>;
 }
 
-export interface ProcessesResult {
+export interface ProcessListResult {
     processes: GraphQlResultPage<Process>;
 }
 
@@ -333,6 +351,17 @@ export interface ProcessesDetailResult {
     processes: GraphQlSinglePage<ProcessDetail>;
 }
 
+export type ProcessDetailResultRaw = {
+    subscription?: object;
+    subscription_id?: string;
+    current_state: {
+        subscription?: {
+            subscription_id?: string;
+        } & GenericResponse;
+        __old_subscriptions__?: GenericResponse;
+    } & GenericResponse;
+} & GenericResponse;
+
 export interface CustomersResult {
     customers: GraphQlSinglePage<Customer>;
 }
@@ -364,7 +393,7 @@ export interface CacheOption {
 }
 
 export enum Locale {
-    enUS = 'en-Us',
+    enGB = 'en-GB',
     nlNL = 'nl-NL',
 }
 
@@ -438,6 +467,7 @@ export type SubscriptionDetailProcess = Pick<
     | 'createdBy'
     | 'workflowTarget'
     | 'workflowName'
+    | 'isTask'
 >;
 
 export type RelatedSubscription = Pick<

package/src/utils/getDefaultTableConfig.ts

@@ -10,7 +10,7 @@ import {
     TASK_LIST_TABLE_LOCAL_STORAGE_KEY,
 } from '../components';
 import type { StoredTableConfig } from '../components';
-import { ProcessListItem } from '../components/WfoProcessesList/WfoProcessList';
+import { ProcessListItem } from '../components/WfoProcessList/WfoProcessList';
 import { SubscriptionListItem } from '../components/WfoSubscriptionsList';
 import {
     ProductBlockDefinition,

package/src/components/WfoSettingsPage/WfoModifySettings.tsx

@@ -1,33 +0,0 @@
-import React, { FC } from 'react';
-
-import { EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
-
-import { EngineStatusValue } from '../../types';
-import { WfoEngineStatusButton } from './WfoEngineStatusButton';
-
-export type WfoModifySettingsProps = {
-    engineStatus?: EngineStatusValue;
-    changeEngineStatus: () => void;
-};
-
-export const WfoModifySettings: FC<WfoModifySettingsProps> = ({
-    engineStatus,
-    changeEngineStatus,
-}) => (
-    <EuiPanel
-        hasShadow={false}
-        color="subdued"
-        paddingSize="l"
-        css={{ width: '50%' }}
-    >
-        <EuiText size={'s'}>
-            <h4>Modify the engine settings</h4>
-            <p>Stop or start workflows through this menu</p>
-        </EuiText>
-        <EuiSpacer size="m"></EuiSpacer>
-        <WfoEngineStatusButton
-            engineStatus={engineStatus}
-            changeEngineStatus={changeEngineStatus}
-        />
-    </EuiPanel>
-);

package/src/components/WfoSettingsPage/WfoSettings.tsx

@@ -1,40 +0,0 @@
-import React, { FunctionComponent } from 'react';
-
-import { EuiHorizontalRule, EuiPageHeader, EuiSpacer } from '@elastic/eui';
-
-import { useEngineStatusMutation, useEngineStatusQuery } from '../../hooks';
-import { WfoFlushSettings } from './WfoFlushSettings';
-import { WfoModifySettings } from './WfoModifySettings';
-import { WfoStatus } from './WfoStatus';
-
-export const WfoSettings: FunctionComponent = () => {
-    const { data: engineStatus } = useEngineStatusQuery();
-    const { mutate, data: newEngineStatus } = useEngineStatusMutation();
-
-    const isRunning =
-        newEngineStatus?.global_status === 'RUNNING' ||
-        engineStatus?.global_status === 'RUNNING';
-    const currentEngineStatus =
-        newEngineStatus?.global_status || engineStatus?.global_status;
-
-    const changeEngineStatus = () => {
-        mutate({ global_lock: isRunning });
-    };
-
-    return (
-        <>
-            <EuiSpacer />
-
-            <EuiPageHeader pageTitle="Settings" />
-            <EuiHorizontalRule />
-            <WfoFlushSettings />
-            <EuiSpacer />
-            <WfoModifySettings
-                engineStatus={currentEngineStatus}
-                changeEngineStatus={changeEngineStatus}
-            />
-            <EuiSpacer />
-            <WfoStatus engineStatus={currentEngineStatus} />
-        </>
-    );
-};

package/src/hooks/ProcessesHooks/useDeleteProcess.ts

@@ -1,37 +0,0 @@
-import { useContext } from 'react';
-import { useMutation, useQueryClient } from 'react-query';
-
-import { signOut } from 'next-auth/react';
-
-import { OrchestratorConfigContext } from '../../contexts';
-import { useSessionWithToken } from '../useSessionWithToken';
-
-export const useDeleteProcess = () => {
-    const { processesEndpoint } = useContext(OrchestratorConfigContext);
-    const { session } = useSessionWithToken();
-    const queryClient = useQueryClient();
-
-    const requestHeaders = {
-        authorization: session ? `Bearer ${session.accessToken}` : '',
-    };
-
-    const deleteProcess = async (id: string) => {
-        const response = await fetch(`${processesEndpoint}/${id}`, {
-            method: 'DELETE',
-            headers: requestHeaders,
-        });
-
-        if (response.status < 200 || response.status >= 300) {
-            console.error(response.status, response.body);
-            if (response.status === 401 || response.status === 403) {
-                signOut();
-            }
-        }
-    };
-
-    return useMutation(deleteProcess, {
-        onSuccess: () => {
-            queryClient.invalidateQueries('processList');
-        },
-    });
-};

package/src/messages/getTranslationMessages.ts

@@ -1,26 +0,0 @@
-import { AbstractIntlMessages } from 'next-intl';
-
-import { Locale } from '../types';
-import enUS from './en-US.json';
-import nlNL from './nl-NL.json';
-
-export type TranslationMessagesMap = Map<Locale, AbstractIntlMessages>;
-
-const standardMessageMap: TranslationMessagesMap = new Map([
-    [Locale.enUS, enUS],
-    [Locale.nlNL, nlNL],
-]);
-
-export const getTranslationMessages = (
-    locale: string | undefined,
-    messages: TranslationMessagesMap = standardMessageMap,
-) => {
-    switch (locale) {
-        case Locale.enUS:
-            return messages.get(Locale.enUS);
-        case Locale.nlNL:
-            return messages.get(Locale.nlNL);
-        default:
-            return messages.get(Locale.enUS);
-    }
-};

package/src/pages/processes/getProcessListTabTypeFromString.ts

@@ -1,19 +0,0 @@
-import { WfoProcessListTabType } from './tabConfig';
-
-export const getProcessListTabTypeFromString = (
-    tabId?: string,
-): WfoProcessListTabType | undefined => {
-    if (!tabId) {
-        return undefined;
-    }
-
-    switch (tabId.toUpperCase()) {
-        case WfoProcessListTabType.ACTIVE.toString():
-            return WfoProcessListTabType.ACTIVE;
-        case WfoProcessListTabType.COMPLETED.toString():
-            return WfoProcessListTabType.COMPLETED;
-
-        default:
-            return undefined;
-    }
-};