@orchestrator-ui/orchestrator-ui-components 0.2.4 → 0.2.5

package/src/contexts/ToastContext.tsx

@@ -0,0 +1,136 @@
+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: 'cross',
+                };
+            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/contexts/TreeContext.tsx

@@ -2,11 +2,14 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 
 export type TreeContextType = {
+    setDepths: (depths: number[]) => void;
     selectedIds: number[];
     expandedIds: number[];
     toggleSelectedId: (id: number) => void;
     toggleExpandedId: (id: number) => void;
-    expandAll: (treeLength: number) => void;
+    expandNode: (id: number) => void;
+    collapseNode: (id: number) => void;
+    expandAll: () => void;
     collapseAll: () => void;
     resetSelection: () => void;
 };
@@ -18,70 +21,88 @@ export type TreeProviderProps = {
 };
 
 export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
+    const [depths, setDepths] = React.useState<number[]>([]);
     const [selectedIds, setSelectedIds] = React.useState<number[]>([]);
     const [expandedIds, setExpandedIds] = React.useState<number[]>([0]);
+
     const toggleSelectedId = (id: number) => {
         if (selectedIds.includes(id)) {
-            const newSelectedIds = selectedIds.filter(
-                (selectedId) => selectedId !== id,
-            );
-            setSelectedIds(newSelectedIds);
-            console.log(
-                `Removing id: ${id} from selected id's => `,
-                newSelectedIds,
+            setSelectedIds((prevSelectedIds) =>
+                prevSelectedIds
+                    .filter((selectedId) => selectedId !== id)
+                    .sort((a, b) => a - b),
             );
         } else {
-            const newSelectedIds = [...selectedIds, id];
-            setSelectedIds(newSelectedIds);
-            console.log(
-                `Adding id: ${id} to selected id's => `,
-                newSelectedIds,
+            setSelectedIds((prevSelectedIds) =>
+                [...prevSelectedIds, id].sort((a, b) => a - b),
             );
         }
     };
+
     const toggleExpandedId = (id: number) => {
         if (expandedIds.includes(id)) {
-            const newExpandedIds = expandedIds.filter(
-                (expandedId) => expandedId !== id,
-            );
-            setExpandedIds(newExpandedIds);
-            console.log(
-                `Removing id: ${id} from expanded id's => `,
-                newExpandedIds,
+            setExpandedIds((prevExpandedIds) =>
+                prevExpandedIds.filter((expandedId) => expandedId !== id),
             );
         } else {
-            const newExpandedIds = [...expandedIds, id];
-            setExpandedIds(newExpandedIds);
-            console.log(
-                `Adding id: ${id} to expanded id's => `,
-                newExpandedIds,
-            );
+            setExpandedIds((prevExpandedIds) => [...prevExpandedIds, id]);
         }
     };
 
-    const expandAll = (treeLength: number) => {
-        const newExpandedIds = Array.from(Array(treeLength).keys());
-        console.log(`Add all to expanded id's => `, newExpandedIds);
-        setExpandedIds(newExpandedIds);
+    const expandAll = () => {
+        setExpandedIds(Array.from(Array(depths.length).keys()));
     };
 
     const collapseAll = () => {
-        console.log("Removed all expanded id's");
         setExpandedIds([0]);
     };
 
+    const expandNode = (itemIndex: number) => {
+        const initialDepth = depths[itemIndex];
+        const expandedNodeIds = depths
+            .map((depth, i) => {
+                if (
+                    i === itemIndex ||
+                    (i > itemIndex && depth > initialDepth)
+                ) {
+                    return i;
+                }
+                return -1;
+            })
+            .filter((nodeId) => nodeId !== -1);
+        setExpandedIds((prevExpandedIds) => [
+            ...prevExpandedIds,
+            ...expandedNodeIds,
+        ]);
+    };
+
+    const collapseNode = (itemIndex: number) => {
+        const initialDepth = depths[itemIndex];
+        const collapsedNodeIds: number[] = [];
+        for (let i = itemIndex; i < depths.length; i++) {
+            if (i === itemIndex) collapsedNodeIds.push(i);
+            else if (depths[i] > initialDepth) collapsedNodeIds.push(i);
+            else if (depths[i] <= initialDepth) break;
+        }
+        setExpandedIds((prevExpandedIds) =>
+            prevExpandedIds.filter((id) => !collapsedNodeIds.includes(id)),
+        );
+    };
+
     const resetSelection = () => {
-        console.log("Removed all selected id's");
         setSelectedIds([]);
     };
 
     return (
         <TreeContext.Provider
             value={{
+                setDepths,
                 selectedIds,
                 expandedIds,
                 toggleSelectedId,
                 toggleExpandedId,
+                expandNode,
+                collapseNode,
                 expandAll,
                 collapseAll,
                 resetSelection,

package/src/contexts/index.ts

@@ -1,3 +1,5 @@
+export * from './ConfirmationDialogProvider';
 export * from './OrchestratorConfigContext';
-export * from './SubscriptionContext';
 export * from './TreeContext';
+export * from './ToastContext';
+export * from './ApiClientContext';

package/src/graphqlQueries/customersQuery.ts

@@ -0,0 +1,19 @@
+import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import { CustomersResult } from '../types';
+
+export const GET_CUSTOMER_GRAPHQL_QUERY: TypedDocumentNode<CustomersResult> =
+    parse(gql`
+        query Customers {
+            customers {
+                page {
+                    fullname
+                    identifier
+                    shortcode
+                }
+            }
+        }
+    `);

package/src/graphqlQueries/index.ts

@@ -2,3 +2,7 @@ export * from './subscriptionsListQuery';
 export * from './productBlocksQuery';
 export * from './productsQuery';
 export * from './resourceTypesQuery';
+export * from './subscriptionDetailQuery';
+export * from './processDetailQuery';
+export * from './customersQuery';
+export * from './subscriptionsDropdownOptionsQuery';

package/src/graphqlQueries/processDetailQuery.ts

@@ -0,0 +1,45 @@
+import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import { ProcessesDetailResult } from '../types';
+
+export const GET_PROCESS_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
+    ProcessesDetailResult,
+    { processId: string }
+> = parse(gql`
+    query ProcessDetail($processId: String!) {
+        processes(filterBy: { value: $processId, field: "processId" }) {
+            page {
+                processId
+                lastStatus
+                createdBy
+                startedAt
+                lastModifiedAt
+                lastStep
+                workflowName
+                isTask
+                steps {
+                    name
+                    status
+                    stepId
+                    executed
+                    stateDelta
+                }
+                customer {
+                    fullname
+                }
+                subscriptions {
+                    page {
+                        product {
+                            name
+                        }
+                        description
+                        subscriptionId
+                    }
+                }
+            }
+        }
+    }
+`);

package/src/graphqlQueries/processListQuery.ts

@@ -1,6 +1,8 @@
 import { parse } from 'graphql';
 import { gql } from 'graphql-request';
+
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
 import { GraphqlQueryVariables, Process, ProcessesResult } from '../types';
 
 export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
@@ -21,16 +23,22 @@ export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
         ) {
             page {
                 workflowName
-                step
-                status
-                product
-                customer
+                lastStep
+                lastStatus
+                workflowTarget
+                product {
+                    name
+                    tag
+                }
+                customer {
+                    fullname
+                    shortcode
+                }
                 createdBy
                 assignee
                 processId
-                started
-                lastModified
-                workflowTarget
+                startedAt
+                lastModifiedAt
                 subscriptions {
                     page {
                         subscriptionId
@@ -44,6 +52,8 @@ export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
                 startCursor
                 totalItems
                 endCursor
+                sortFields
+                filterFields
             }
         }
     }

package/src/graphqlQueries/productBlocksQuery.ts

@@ -1,5 +1,6 @@
-import { gql } from 'graphql-request';
 import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
 import type { ProductBlockDefinition } from '../types';
@@ -28,6 +29,15 @@ export const GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY: TypedDocumentNode<
                     resourceType
                     resourceTypeId
                 }
+                dependsOn {
+                    productBlockId
+                    name
+                    tag
+                    description
+                    status
+                    createdAt
+                    endDate
+                }
             }
             pageInfo {
                 endCursor
@@ -35,6 +45,8 @@ export const GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY: TypedDocumentNode<
                 hasPreviousPage
                 startCursor
                 totalItems
+                sortFields
+                filterFields
             }
         }
     }

package/src/graphqlQueries/productsQuery.ts

@@ -1,6 +1,8 @@
-import { gql } from 'graphql-request';
 import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
 import {
     GraphqlQueryVariables,
     ProductDefinition,
@@ -40,6 +42,8 @@ export const GET_PRODUCTS_GRAPHQL_QUERY: TypedDocumentNode<
                 hasPreviousPage
                 startCursor
                 totalItems
+                sortFields
+                filterFields
             }
         }
     }

package/src/graphqlQueries/relatedSubscriptionsQuery.ts

@@ -0,0 +1,65 @@
+import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import {
+    GraphqlFilter,
+    GraphqlQueryVariables,
+    RelatedSubscription,
+    RelatedSubscriptionsResult,
+    Subscription,
+} from '../types';
+
+export const GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY: TypedDocumentNode<
+    RelatedSubscriptionsResult,
+    GraphqlQueryVariables<RelatedSubscription> &
+        Pick<Subscription, 'subscriptionId'> & {
+            terminatedSubscriptionFilter?: GraphqlFilter<RelatedSubscription>;
+        }
+> = parse(gql`
+    query RelatedSubscriptions(
+        $subscriptionId: String!
+        $first: IntType!
+        $after: IntType!
+        $sortBy: [GraphqlSort!]
+        $terminatedSubscriptionFilter: [GraphqlFilter!]
+    ) {
+        subscriptions(
+            filterBy: { value: $subscriptionId, field: "subscriptionId" }
+        ) {
+            page {
+                subscriptionId
+                inUseBySubscriptions(
+                    first: $first
+                    after: $after
+                    sortBy: $sortBy
+                    filterBy: $terminatedSubscriptionFilter
+                ) {
+                    page {
+                        subscriptionId
+                        customer {
+                            fullname
+                        }
+                        description
+                        insync
+                        startDate
+                        status
+                        product {
+                            tag
+                        }
+                    }
+                    pageInfo {
+                        endCursor
+                        hasNextPage
+                        hasPreviousPage
+                        startCursor
+                        totalItems
+                        sortFields
+                        filterFields
+                    }
+                }
+            }
+        }
+    }
+`);

package/src/graphqlQueries/resourceTypesQuery.ts

@@ -1,11 +1,12 @@
-import { gql } from 'graphql-request';
 import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
 import type {
+    GraphqlQueryVariables,
     ResourceTypeDefinition,
     ResourceTypeDefinitionsResult,
-    GraphqlQueryVariables,
 } from '../types';
 
 export const GET_RESOURCE_TYPES_GRAPHQL_QUERY: TypedDocumentNode<
@@ -22,6 +23,14 @@ export const GET_RESOURCE_TYPES_GRAPHQL_QUERY: TypedDocumentNode<
                 resourceTypeId
                 resourceType
                 description
+                productBlocks {
+                    description
+                    name
+                    productBlockId
+                    status
+                    createdAt
+                    endDate
+                }
             }
             pageInfo {
                 endCursor
@@ -29,6 +38,8 @@ export const GET_RESOURCE_TYPES_GRAPHQL_QUERY: TypedDocumentNode<
                 hasPreviousPage
                 startCursor
                 totalItems
+                sortFields
+                filterFields
             }
         }
     }

package/src/graphqlQueries/subscriptionDetailQuery.ts

@@ -0,0 +1,62 @@
+import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import { SubscriptionDetailResult } from '../types';
+
+export const GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
+    SubscriptionDetailResult,
+    { subscriptionId: string }
+> = parse(gql`
+    query SubscriptionDetail($subscriptionId: String!) {
+        subscriptions(
+            filterBy: { value: $subscriptionId, field: "subscriptionId" }
+        ) {
+            page {
+                subscriptionId
+                description
+                fixedInputs
+                insync
+                note
+                product {
+                    createdAt
+                    name
+                    status
+                    endDate
+                    description
+                    tag
+                    productType
+                    productId
+                }
+                endDate
+                startDate
+                status
+                customerId
+                customer {
+                    fullname
+                    identifier
+                    shortcode
+                }
+                productBlockInstances {
+                    id
+                    ownerSubscriptionId
+                    parent
+                    productBlockInstanceValues
+                    subscriptionInstanceId
+                    inUseByRelations
+                }
+                processes(sortBy: { field: "startedAt", order: ASC }) {
+                    page {
+                        processId
+                        lastStatus
+                        startedAt
+                        createdBy
+                        workflowTarget
+                        workflowName
+                    }
+                }
+            }
+        }
+    }
+`);

package/src/graphqlQueries/subscriptionsDropdownOptionsQuery.ts

@@ -0,0 +1,47 @@
+import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import {
+    GraphqlQueryVariables,
+    SubscriptionDropdownOption,
+    SubscriptionDropdownOptionsResult,
+} from '../types';
+
+export const GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY = parse(gql`
+    query SubscriptionDropdownOptions($filterBy: [GraphqlFilter!]) {
+        subscriptions(filterBy: $filterBy) {
+            page {
+                description
+                subscriptionId
+                product {
+                    tag
+                    productId
+                }
+                customer {
+                    fullname
+                    identifier
+                }
+                productBlockInstances {
+                    id
+                    ownerSubscriptionId
+                    parent
+                    productBlockInstanceValues
+                    subscriptionInstanceId
+                    inUseByRelations
+                }
+                fixedInputs
+            }
+        }
+    }
+`);
+
+export function getSubscriptionDropdownOptionsGraphQlQuery<
+    QueryVariablesType = SubscriptionDropdownOption,
+>(): TypedDocumentNode<
+    SubscriptionDropdownOptionsResult,
+    GraphqlQueryVariables<QueryVariablesType>
+> {
+    return GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY;
+}

package/src/graphqlQueries/subscriptionsListQuery.ts

@@ -1,6 +1,8 @@
 import { parse } from 'graphql';
 import { gql } from 'graphql-request';
+
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
 import {
     GraphqlQueryVariables,
     Subscription,
@@ -40,6 +42,8 @@ export const GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY = parse(gql`
                 hasPreviousPage
                 hasNextPage
                 endCursor
+                sortFields
+                filterFields
             }
         }
     }