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

package/src/contexts/TreeContext.tsx

@@ -12,6 +12,7 @@ export type TreeContextType = {
     expandAll: () => void;
     collapseAll: () => void;
     resetSelection: () => void;
+    selectAll: () => void;
 };
 
 export const TreeContext = React.createContext<TreeContextType | null>(null);
@@ -22,7 +23,7 @@ export type TreeProviderProps = {
 
 export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
     const [depths, setDepths] = React.useState<number[]>([]);
-    const [selectedIds, setSelectedIds] = React.useState<number[]>([]);
+    const [selectedIds, setSelectedIds] = React.useState<number[]>([0]);
     const [expandedIds, setExpandedIds] = React.useState<number[]>([0]);
 
     const toggleSelectedId = (id: number) => {
@@ -38,6 +39,9 @@ export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
             );
         }
     };
+    const selectAll = () => {
+        setSelectedIds(Array.from(Array(depths.length).keys()));
+    };
 
     const toggleExpandedId = (id: number) => {
         if (expandedIds.includes(id)) {
@@ -106,6 +110,7 @@ export const TreeProvider: React.FC<TreeProviderProps> = ({ children }) => {
                 expandAll,
                 collapseAll,
                 resetSelection,
+                selectAll,
             }}
         >
             {children}

package/src/graphqlQueries/customersQuery.ts

@@ -5,10 +5,11 @@ 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 {
+            customers(first: 1000000, after: 0) {
                 page {
                     fullname
                     identifier

package/src/graphqlQueries/index.ts

@@ -6,3 +6,4 @@ export * from './subscriptionDetailQuery';
 export * from './processDetailQuery';
 export * from './customersQuery';
 export * from './subscriptionsDropdownOptionsQuery';
+export * from './processStepsQuery';

package/src/graphqlQueries/processDetailQuery.ts

@@ -20,6 +20,14 @@ export const GET_PROCESS_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
                 lastStep
                 workflowName
                 isTask
+                form {
+                    additionalProperties
+                    definitions
+                    properties
+                    required
+                    title
+                    type
+                }
                 steps {
                     name
                     status

package/src/graphqlQueries/processListQuery.ts

@@ -3,23 +3,22 @@ import { gql } from 'graphql-request';
 
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
-import { GraphqlQueryVariables, Process, ProcessesResult } from '../types';
+import { GraphqlQueryVariables, Process, ProcessListResult } from '@/types';
 
-export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
-    ProcessesResult,
-    GraphqlQueryVariables<Process>
-> = parse(gql`
+export const GET_PROCESS_LIST_GRAPHQL_QUERY = parse(gql`
     query ProcessList(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
         $filterBy: [GraphqlFilter!]
+        $query: String
     ) {
         processes(
             first: $first
             after: $after
             sortBy: $sortBy
             filterBy: $filterBy
+            query: $query
         ) {
             page {
                 workflowName
@@ -39,6 +38,7 @@ export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
                 processId
                 startedAt
                 lastModifiedAt
+                isTask
                 subscriptions {
                     page {
                         subscriptionId
@@ -58,3 +58,44 @@ export const GET_PROCESS_LIST_GRAPHQL_QUERY: TypedDocumentNode<
         }
     }
 `);
+
+export const GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql`
+    query ProcessListSummary(
+        $first: Int!
+        $after: Int!
+        $sortBy: [GraphqlSort!]
+        $filterBy: [GraphqlFilter!]
+        $query: String
+    ) {
+        processes(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            filterBy: $filterBy
+            query: $query
+        ) {
+            page {
+                processId
+                workflowName
+                startedAt
+            }
+            pageInfo {
+                totalItems
+                startCursor
+                endCursor
+            }
+        }
+    }
+`);
+
+export const getProcessListGraphQlQuery = (): TypedDocumentNode<
+    ProcessListResult,
+    GraphqlQueryVariables<Process>
+> => GET_PROCESS_LIST_GRAPHQL_QUERY;
+
+export const getProcessListSummaryGraphQlQuery = (): TypedDocumentNode<
+    ProcessListResult<
+        Pick<Process, 'processId' | 'workflowName' | 'startedAt'>
+    >,
+    GraphqlQueryVariables<Process>
+> => GET_PROCESS_LIST_SUMMARY_GRAPHQL_QUERY;

package/src/graphqlQueries/processStepsQuery.ts

@@ -0,0 +1,22 @@
+import { parse } from 'graphql';
+import { gql } from 'graphql-request';
+
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+
+import { ProcessStepsResult } from '@/types';
+
+export const GET_PROCESS_STEPS_GRAPHQL_QUERY: TypedDocumentNode<
+    ProcessStepsResult,
+    { processName: string }
+> = parse(gql`
+    query ProcessSteps($processName: String!) {
+        workflows(filterBy: { field: "name", value: $processName }) {
+            page {
+                steps {
+                    name
+                    assignee
+                }
+            }
+        }
+    }
+`);

package/src/graphqlQueries/productBlocksQuery.ts

@@ -3,19 +3,25 @@ import { gql } from 'graphql-request';
 
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
 
-import type { ProductBlockDefinition } from '../types';
-import { GraphqlQueryVariables, ProductBlockDefinitionsResult } from '../types';
+import type { ProductBlockDefinition } from '@/types';
+import { GraphqlQueryVariables, ProductBlockDefinitionsResult } from '@/types';
 
 export const GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY: TypedDocumentNode<
     ProductBlockDefinitionsResult,
     GraphqlQueryVariables<ProductBlockDefinition>
 > = parse(gql`
     query MetadataProductBlocks(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
+        $query: String
     ) {
-        productBlocks(first: $first, after: $after, sortBy: $sortBy) {
+        productBlocks(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            query: $query
+        ) {
             page {
                 productBlockId
                 name

package/src/graphqlQueries/productsQuery.ts

@@ -7,18 +7,17 @@ import {
     GraphqlQueryVariables,
     ProductDefinition,
     ProductDefinitionsResult,
+    SubscriptionsResult,
 } from '../types';
 
-export const GET_PRODUCTS_GRAPHQL_QUERY: TypedDocumentNode<
-    ProductDefinitionsResult,
-    GraphqlQueryVariables<ProductDefinition>
-> = parse(gql`
+export const GET_PRODUCTS_GRAPHQL_QUERY = parse(gql`
     query MetadataProducts(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
+        $query: String
     ) {
-        products(first: $first, after: $after, sortBy: $sortBy) {
+        products(first: $first, after: $after, sortBy: $sortBy, query: $query) {
             page {
                 productId
                 name
@@ -48,3 +47,39 @@ export const GET_PRODUCTS_GRAPHQL_QUERY: TypedDocumentNode<
         }
     }
 `);
+
+export const GET_PRODUCTS_SUMMARY_GRAPHQL_QUERY = parse(gql`
+    query MetadataProducts(
+        $first: Int!
+        $after: Int!
+        $sortBy: [GraphqlSort!]
+    ) {
+        products(first: $first, after: $after, sortBy: $sortBy) {
+            page {
+                name
+                subscriptions {
+                    pageInfo {
+                        totalItems
+                    }
+                }
+            }
+            pageInfo {
+                totalItems
+                startCursor
+                endCursor
+            }
+        }
+    }
+`);
+
+export const getProductsSummaryQuery = (): TypedDocumentNode<
+    ProductDefinitionsResult<
+        Pick<ProductDefinition, 'name'> & SubscriptionsResult<never>
+    >,
+    GraphqlQueryVariables<ProductDefinition>
+> => GET_PRODUCTS_SUMMARY_GRAPHQL_QUERY;
+
+export const getProductsQuery = (): TypedDocumentNode<
+    ProductDefinitionsResult,
+    GraphqlQueryVariables<ProductDefinition>
+> => GET_PRODUCTS_GRAPHQL_QUERY;

package/src/graphqlQueries/relatedSubscriptionsQuery.ts

@@ -20,8 +20,8 @@ export const GET_RELATED_SUBSCRIPTIONS_GRAPHQL_QUERY: TypedDocumentNode<
 > = parse(gql`
     query RelatedSubscriptions(
         $subscriptionId: String!
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
         $terminatedSubscriptionFilter: [GraphqlFilter!]
     ) {

package/src/graphqlQueries/resourceTypesQuery.ts

@@ -7,18 +7,24 @@ import type {
     GraphqlQueryVariables,
     ResourceTypeDefinition,
     ResourceTypeDefinitionsResult,
-} from '../types';
+} from '@/types';
 
 export const GET_RESOURCE_TYPES_GRAPHQL_QUERY: TypedDocumentNode<
     ResourceTypeDefinitionsResult,
     GraphqlQueryVariables<ResourceTypeDefinition>
 > = parse(gql`
     query MetadataResourceTypes(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
+        $query: String
     ) {
-        resourceTypes(first: $first, after: $after, sortBy: $sortBy) {
+        resourceTypes(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            query: $query
+        ) {
             page {
                 resourceTypeId
                 resourceType

package/src/graphqlQueries/subscriptionDetailQuery.ts

@@ -46,7 +46,10 @@ export const GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
                     subscriptionInstanceId
                     inUseByRelations
                 }
-                processes(sortBy: { field: "startedAt", order: ASC }) {
+                processes(
+                    sortBy: { field: "startedAt", order: ASC }
+                    filterBy: { field: "isTask", value: "false" }
+                ) {
                     page {
                         processId
                         lastStatus
@@ -54,6 +57,7 @@ export const GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
                         createdBy
                         workflowTarget
                         workflowName
+                        isTask
                     }
                 }
             }

package/src/graphqlQueries/subscriptionsDropdownOptionsQuery.ts

@@ -9,9 +9,10 @@ import {
     SubscriptionDropdownOptionsResult,
 } from '../types';
 
+// Avoiding pagination by passing a large number to first. TODO: Fix this better
 export const GET_SUBSCRIPTION_DROPDOWN_OPTIONS_GRAPHQL_QUERY = parse(gql`
     query SubscriptionDropdownOptions($filterBy: [GraphqlFilter!]) {
-        subscriptions(filterBy: $filterBy) {
+        subscriptions(filterBy: $filterBy, first: 1000000, after: 0) {
             page {
                 description
                 subscriptionId

package/src/graphqlQueries/subscriptionsListQuery.ts

@@ -7,20 +7,22 @@ import {
     GraphqlQueryVariables,
     Subscription,
     SubscriptionsResult,
-} from '../types';
+} from '@/types';
 
 export const GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY = parse(gql`
     query SubscriptionsList(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
         $filterBy: [GraphqlFilter!]
+        $query: String
     ) {
         subscriptions(
             first: $first
             after: $after
             sortBy: $sortBy
             filterBy: $filterBy
+            query: $query
         ) {
             page {
                 note
@@ -35,6 +37,10 @@ export const GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY = parse(gql`
                     tag
                     productType
                 }
+                customer {
+                    fullname
+                    shortcode
+                }
             }
             pageInfo {
                 totalItems
@@ -49,11 +55,44 @@ export const GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY = parse(gql`
     }
 `);
 
-export function getSubscriptionsListGraphQlQuery<
+export const GET_SUBSCRIPTIONS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql`
+    query SubscriptionsList(
+        $first: Int!
+        $after: Int!
+        $sortBy: [GraphqlSort!]
+        $filterBy: [GraphqlFilter!]
+        $query: String
+    ) {
+        subscriptions(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            filterBy: $filterBy
+            query: $query
+        ) {
+            page {
+                description
+                subscriptionId
+            }
+            pageInfo {
+                totalItems
+                startCursor
+                endCursor
+            }
+        }
+    }
+`);
+
+export const getSubscriptionsListGraphQlQuery = <
     QueryVariablesType = Subscription,
 >(): TypedDocumentNode<
     SubscriptionsResult,
     GraphqlQueryVariables<QueryVariablesType>
-> {
-    return GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY;
-}
+> => GET_SUBSCRIPTIONS_LIST_GRAPHQL_QUERY;
+
+export const getSubscriptionsListSummaryGraphQlQuery = <
+    QueryVariablesType = Subscription,
+>(): TypedDocumentNode<
+    SubscriptionsResult<Pick<Subscription, 'subscriptionId' | 'description'>>,
+    GraphqlQueryVariables<QueryVariablesType>
+> => GET_SUBSCRIPTIONS_LIST_SUMMARY_GRAPHQL_QUERY;

package/src/graphqlQueries/workflows/workflowsQuery.ts

@@ -7,18 +7,24 @@ import {
     GraphqlQueryVariables,
     WorkflowDefinition,
     WorkflowDefinitionsResult,
-} from '../../types';
+} from '@/types';
 
 export const GET_WORKFLOWS_GRAPHQL_QUERY: TypedDocumentNode<
     WorkflowDefinitionsResult,
     GraphqlQueryVariables<WorkflowDefinition>
 > = parse(gql`
     query MetadataWorkflows(
-        $first: IntType!
-        $after: IntType!
+        $first: Int!
+        $after: Int!
         $sortBy: [GraphqlSort!]
+        $query: String
     ) {
-        workflows(first: $first, after: $after, sortBy: $sortBy) {
+        workflows(
+            first: $first
+            after: $after
+            sortBy: $sortBy
+            query: $query
+        ) {
             page {
                 name
                 description

package/src/graphqlQueries/workflows/workflowsQueryForDropdownList.ts

@@ -9,16 +9,13 @@ import {
     WorkflowDefinitionsResult,
 } from '../../types';
 
+// Avoiding pagination by passing a large number to first. TODO: Fix this better
 export const GET_WORKFLOWS_FOR_DROPDOWN_LIST_GRAPHQL_QUERY: TypedDocumentNode<
     WorkflowDefinitionsResult<WorkflowDefinition>,
     GraphqlQueryVariables<WorkflowDefinition>
 > = parse(gql`
-    query StartWorkflows(
-        $first: IntType!
-        $after: IntType!
-        $filterBy: [GraphqlFilter!]
-    ) {
-        workflows(first: $first, after: $after, filterBy: $filterBy) {
+    query StartWorkflows($filterBy: [GraphqlFilter!]) {
+        workflows(first: 1000000, after: 0, filterBy: $filterBy) {
             page {
                 name
                 description

package/src/hooks/DataFetchHooks.ts

@@ -1,70 +1,21 @@
 import { useContext } from 'react';
 import { useQuery } from 'react-query';
 
-import { OrchestratorConfigContext } from '../contexts/OrchestratorConfigContext';
-import { GraphqlFilter, ItemsList, ProcessFromRestApi } from '../types';
+import { OrchestratorConfigContext } from '@/contexts';
+import { GraphqlFilter, ProcessDetailResultRaw } from '@/types';
+
 import { useQueryWithFetch } from './useQueryWithFetch';
+import { useSessionWithToken } from './useSessionWithToken';
 
 export type CacheNames = { [key: string]: string };
 
-export const useFavouriteSubscriptions = () => {
-    const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
-    const url = `${orchestratorApiBaseUrl}/subscriptions/?range=10%2C15`;
-    const initialData: ItemsList = {
-        buttonName: 'Show all favourites',
-        items: [],
-        title: 'Favourite Subscriptions',
-        type: 'subscription',
-    };
-
-    const { data, isLoading } = useQueryWithFetch<
-        ProcessFromRestApi[],
-        Record<string, never>
-    >(url, {}, 'favouriteSubscriptions');
-    return isLoading ? initialData : { ...initialData, items: data || [] };
-};
-
-export const useProcessesAttention = () => {
-    const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
-    const url = `${orchestratorApiBaseUrl}/processes/?range=100%2C105`;
-    const initialData: ItemsList = {
-        type: 'process',
-        title: 'Processes that need attention',
-        items: [],
-        buttonName: 'Show all active processes',
-    };
-
-    const { data, isLoading } = useQueryWithFetch<
-        ProcessFromRestApi[],
-        Record<string, never>
-    >(url, {}, 'processesAttention');
-    return isLoading ? initialData : { ...initialData, items: data || [] };
-};
-
-export const useRecentProcesses = () => {
-    const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
-    const url = `${orchestratorApiBaseUrl}/processes/?range=106%2C111`;
-    const initialData: ItemsList = {
-        type: 'process',
-        title: 'Recently completed processes',
-        items: [],
-        buttonName: 'Show all completed processes',
-    };
-
-    const { data, isLoading } = useQueryWithFetch<
-        ProcessFromRestApi[],
-        Record<string, never>
-    >(url, {}, 'recentProcesses');
-    return isLoading ? initialData : { ...initialData, items: data || [] };
-};
-
 export const useRawProcessDetails = (processId: string) => {
     const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
     const url = `${orchestratorApiBaseUrl}/processes/${processId}`;
-    return useQueryWithFetch<object, Record<string, never>>(
+    return useQueryWithFetch<ProcessDetailResultRaw, Record<string, never>>(
         url,
         {},
-        'RawProcessDetails',
+        `RawProcessDetails-${processId}`,
     );
 };
 
@@ -74,7 +25,7 @@ export const useCacheNames = () => {
     return useQueryWithFetch<CacheNames, Record<string, never>>(
         url,
         {},
-        'recentProcesses',
+        'cacheNames',
     );
 };
 
@@ -82,23 +33,31 @@ const filterDataByCriteria = <Type>(
     data: Type[],
     filterCriteria: GraphqlFilter<Type>[],
 ): Type[] => {
-    return data.filter((item) => {
+    return data.filter((dataItem) => {
         return filterCriteria.some((filter) => {
-            return item[filter.field] === filter.value;
+            const dataValue = dataItem[filter.field] as unknown as string;
+            const filterValue = filter.value;
+            return dataValue === filterValue;
         });
     });
 };
 
 export const useFilterQueryWithRest = <Type>(
-    endpoint: string,
+    url: string,
     queryKey: string[],
     filters?: GraphqlFilter<Type>[],
     refetchInterval?: number,
 ) => {
-    const { orchestratorApiBaseUrl } = useContext(OrchestratorConfigContext);
+    const { session } = useSessionWithToken();
 
     const fetchFromApi = async () => {
-        const response = await fetch(orchestratorApiBaseUrl + endpoint);
+        const response = await fetch(url, {
+            headers: {
+                Authorization: session?.accessToken
+                    ? `Bearer ${session.accessToken}`
+                    : '',
+            },
+        });
         const data = await response.json();
         return filters ? filterDataByCriteria(data, filters) : data;
     };

package/src/hooks/index.ts

@@ -1,5 +1,7 @@
+export * from './useCheckEngineStatus';
 export * from './useQueryWithGraphql';
 export * from './useEngineStatusQuery';
+export * from './useMutateProcess';
 export * from './useOrchestratorConfig';
 export * from './useOrchestratorTheme';
 export * from './useProcessStatusCountsQuery';
@@ -10,3 +12,4 @@ export * from './useToastMessage';
 export * from './useStoredTableConfig';
 export * from './useWithOrchestratorTheme';
 export * from './useSessionWithToken';
+export * from './useQueryWithFetch';

package/src/hooks/surf/useGetSubscriptionDropdownOptions.ts

@@ -34,6 +34,7 @@ export const useGetSubscriptionDropdownOptions = (
             filterBy: filters,
         },
         'subscriptionOptions',
+        { refetchOnWindowFocus: false },
     );
 
     const subscriptions = (() => {

package/src/hooks/surf/useIsTaggedPort.ts

@@ -10,8 +10,7 @@ export const useIsTaggedPort = (subscriptionId: string): [boolean, boolean] => {
         GET_SUBSCRIPTION_DETAIL_GRAPHQL_QUERY,
         { subscriptionId },
         `subscription-${subscriptionId}`,
-        false,
-        !!subscriptionId,
+        { enabled: !!subscriptionId },
     );
     const subscriptionDetail = data?.subscriptions.page[0];
 

package/src/hooks/useCheckEngineStatus.ts

@@ -0,0 +1,30 @@
+import { useTranslations } from 'next-intl';
+
+import { ToastTypes } from '@/contexts';
+import { useEngineStatusQuery } from '@/hooks/useEngineStatusQuery';
+import { useToastMessage } from '@/hooks/useToastMessage';
+
+export const useCheckEngineStatus = () => {
+    const tErrors = useTranslations('errors');
+    const toastMessage = useToastMessage();
+    const { refetch } = useEngineStatusQuery();
+
+    const isEngineRunningNow = async () => {
+        const result = await refetch();
+        const isEngineRunning = result.data?.global_status === 'RUNNING';
+
+        if (!isEngineRunning) {
+            toastMessage.addToast(
+                ToastTypes.ERROR,
+                tErrors('notAllowedWhenEngineIsNotRunningMessage'),
+                tErrors('notAllowedWhenEngineIsNotRunningTitle'),
+            );
+        }
+
+        return isEngineRunning;
+    };
+
+    return {
+        isEngineRunningNow,
+    };
+};