@orchestrator-ui/orchestrator-ui-components 0.3.1 → 0.5.0

package/src/utils/sortObjectKeys.spec.ts

@@ -0,0 +1,34 @@
+import { sortObjectKeys } from './sortObjectKeys';
+
+describe('sortObjectKeys', () => {
+    it('sorts the keys of an object', () => {
+        const testObject = {
+            a: 1,
+            b: 2,
+            c: 3,
+        };
+        const sortedObject = sortObjectKeys(testObject, ['b', 'a', 'c']);
+
+        // Verifies order of keys
+        expect(Object.keys(sortedObject).join('-')).toEqual('b-a-c');
+
+        // Verifies values
+        expect(sortedObject).toEqual({ a: 1, b: 2, c: 3 });
+    });
+
+    it('handles missing keys in the keyOrder array', () => {
+        const testObject = {
+            a: 1,
+            b: 2,
+            c: 3,
+            d: 4,
+        };
+        const sortedObject = sortObjectKeys(testObject, ['d', 'a']);
+
+        // Verifies order of keys
+        expect(Object.keys(sortedObject).join('-')).toEqual('d-a-b-c');
+
+        // Verifies values
+        expect(sortedObject).toEqual({ a: 1, b: 2, c: 3, d: 4 });
+    });
+});

package/src/utils/sortObjectKeys.ts

@@ -0,0 +1,33 @@
+// Some components in this project need the keys of an object to be in a certain order
+// This function sorts the keys of an object based on an array of strings
+// Keys that do not exist in the object will be ignored
+export const sortObjectKeys = <T extends object>(
+    inputObject: T,
+    keyOrder: string[],
+): T => {
+    const allInputObjectKeys = Object.keys(inputObject) as Array<keyof T>;
+    allInputObjectKeys.sort((left, right) => {
+        const leftIndex = keyOrder.indexOf(left.toString());
+        const rightIndex = keyOrder.indexOf(right.toString());
+
+        if (leftIndex === -1 && rightIndex === -1) {
+            return 0;
+        }
+
+        if (leftIndex === -1) {
+            return 1;
+        }
+
+        if (rightIndex === -1) {
+            return -1;
+        }
+
+        return leftIndex - rightIndex;
+    });
+
+    // Using all keys from the input object means the result will contain all keys of T, meaning the type is T
+    return allInputObjectKeys.reduce((acc, key) => {
+        acc[key] = inputObject[key];
+        return acc;
+    }, {} as T);
+};

package/src/components/WfoSettings/WfoSettings.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { EuiHorizontalRule, EuiPageHeader, EuiSpacer } from '@elastic/eui';
-
-import { EngineStatus } from '@/types';
-
-import { WfoFlushSettings } from './WfoFlushSettings';
-import { WfoModifySettings } from './WfoModifySettings';
-import { WfoStatus } from './WfoStatus';
-
-interface WfoSettingsProps {
-    currentEngineStatus: EngineStatus | undefined;
-    currentRunningProcesses: number | undefined;
-    changeEngineStatus: () => void;
-}
-export const WfoSettings = ({
-    currentEngineStatus,
-    currentRunningProcesses,
-    changeEngineStatus,
-}: WfoSettingsProps) => {
-    return (
-        <>
-            <EuiSpacer />
-
-            <EuiPageHeader pageTitle="Settings" />
-            <EuiHorizontalRule />
-            <WfoFlushSettings />
-            <EuiSpacer />
-            <WfoModifySettings
-                engineStatus={currentEngineStatus}
-                changeEngineStatus={changeEngineStatus}
-            />
-            <EuiSpacer />
-            <WfoStatus
-                engineStatus={currentEngineStatus || EngineStatus.PAUSED}
-                runningProcesses={currentRunningProcesses}
-            />
-        </>
-    );
-};

package/src/contexts/ToastContext.tsx

@@ -1,136 +0,0 @@
-import React, { createContext, useReducer } from 'react';
-import type { ReactElement, ReactNode, Reducer } from 'react';
-
-import type { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
-
-export enum ToastTypes {
-    ERROR = 'ERROR',
-    SUCCESS = 'SUCCESS',
-}
-
-enum ToastActionTypes {
-    ADD = 'ADD',
-    REMOVE = 'REMOVE',
-}
-
-type ToastAddAction = {
-    type: ToastActionTypes.ADD;
-    payload: Toast; // From eui
-};
-
-type ToastRemoveAction = {
-    type: ToastActionTypes.REMOVE;
-    payload: {
-        id: string;
-    };
-};
-
-type ToastsState = {
-    toasts: Toast[];
-};
-
-export interface ToastContextProps {
-    addToast: (
-        type: ToastTypes,
-        text: ReactElement | string,
-        title: string,
-    ) => void;
-    removeToast: (id: string) => void;
-    toasts: Toast[];
-}
-
-export const ToastContext = createContext<ToastContextProps>({
-    addToast: () => {},
-    removeToast: () => {},
-    toasts: [],
-});
-
-interface ToastsContextProviderProps {
-    children: ReactNode;
-}
-
-const toastsReducer = (
-    state: ToastsState,
-    action: ToastAddAction | ToastRemoveAction,
-): ToastsState => {
-    switch (action.type) {
-        case ToastActionTypes.ADD:
-            return {
-                toasts: [...state.toasts, action.payload],
-            };
-        case ToastActionTypes.REMOVE:
-            const toasts = state.toasts.filter(
-                (toast) => toast.id !== action.payload.id,
-            );
-            return {
-                toasts: [...toasts],
-            };
-
-        default:
-            throw new Error('Unhandled notification action type');
-    }
-};
-
-export const ToastsContextProvider = ({
-    children,
-}: ToastsContextProviderProps) => {
-    const initialState: ToastsState = {
-        toasts: [],
-    };
-
-    const [state, dispatch] = useReducer<
-        Reducer<ToastsState, ToastAddAction | ToastRemoveAction>
-    >(toastsReducer, initialState);
-
-    const getTypeProps = (type: ToastTypes): Partial<Toast> => {
-        switch (type) {
-            case ToastTypes.ERROR:
-                return {
-                    color: 'danger',
-                    iconType: 'warning',
-                };
-            case ToastTypes.SUCCESS:
-                return {
-                    color: 'success',
-                    iconType: 'check',
-                };
-        }
-    };
-
-    const addToast = (
-        type: ToastTypes,
-        text: ReactElement | string,
-        title: string,
-    ) => {
-        const typeProps = getTypeProps(type);
-        const id = Math.floor(Math.random() * 10000000).toString();
-        dispatch({
-            type: ToastActionTypes.ADD,
-            payload: {
-                id,
-                text,
-                title,
-                ...typeProps,
-            },
-        });
-    };
-
-    const removeToast = (id: string) => {
-        dispatch({
-            type: ToastActionTypes.REMOVE,
-            payload: { id },
-        });
-    };
-
-    return (
-        <ToastContext.Provider
-            value={{
-                addToast,
-                removeToast,
-                toasts: state.toasts,
-            }}
-        >
-            {children}
-        </ToastContext.Provider>
-    );
-};

package/src/graphqlQueries/customersQuery.ts

@@ -1,20 +0,0 @@
-import { parse } from 'graphql';
-import { gql } from 'graphql-request';
-
-import { TypedDocumentNode } from '@graphql-typed-document-node/core';
-
-import { CustomersResult } from '../types';
-
-// Avoiding pagination by passing a large number to first. TODO: Fix this better
-export const GET_CUSTOMER_GRAPHQL_QUERY: TypedDocumentNode<CustomersResult> =
-    parse(gql`
-        query Customers {
-            customers(first: 1000000, after: 0) {
-                page {
-                    fullname
-                    identifier
-                    shortcode
-                }
-            }
-        }
-    `);

package/src/hooks/useEngineStatusQuery.ts

@@ -1,64 +0,0 @@
-import { useContext } from 'react';
-import { useMutation, useQueryClient } from 'react-query';
-
-import { OrchestratorConfigContext } from '@/contexts';
-import { EngineStatus } from '@/types';
-
-import { useQueryWithFetch } from './useQueryWithFetch';
-import { useSessionWithToken } from './useSessionWithToken';
-
-export interface EngineStatusReturnValue {
-    global_lock: boolean;
-    running_processes: number;
-    global_status: EngineStatus;
-}
-
-interface EngineStatusPayload {
-    global_lock: boolean;
-}
-
-export const useEngineStatusQuery = () => {
-    const { engineStatusEndpoint } = useContext(OrchestratorConfigContext);
-
-    return useQueryWithFetch<EngineStatusReturnValue, Record<string, never>>(
-        engineStatusEndpoint,
-        {},
-        'engineStatus',
-    );
-};
-
-export const useEngineStatusMutation = () => {
-    const { engineStatusEndpoint } = useContext(OrchestratorConfigContext);
-    const queryClient = useQueryClient();
-    const { session } = useSessionWithToken();
-    let requestHeaders = {};
-
-    if (session) {
-        const { accessToken } = session;
-
-        requestHeaders = {
-            Authorization: `Bearer ${accessToken}`,
-        };
-    }
-
-    const setEngineStatus = async (data: EngineStatusPayload) => {
-        const response = await fetch(engineStatusEndpoint, {
-            method: 'PUT',
-            body: JSON.stringify(data),
-            headers: {
-                'Content-Type': 'application/json',
-                ...requestHeaders,
-            },
-        });
-        return (await response.json()) as EngineStatusReturnValue;
-    };
-
-    return useMutation('engineStatus', setEngineStatus, {
-        onMutate: () => {
-            queryClient.setQueryData(['engineStatus'], null); // Set loading state of the button
-        },
-        onSuccess: (data: EngineStatusReturnValue) => {
-            queryClient.setQueryData(['engineStatus'], data); // Set global status
-        },
-    });
-};

package/src/hooks/useToastMessage.ts

@@ -1,5 +0,0 @@
-import { useContext } from 'react';
-
-import { ToastContext } from '../contexts/ToastContext';
-
-export const useToastMessage = () => useContext(ToastContext);