@orchestrator-ui/orchestrator-ui-components 0.11.1 → 0.13.0

package/src/api/index.ts

@@ -24,9 +24,9 @@ import { ProductDefinition } from '@/types';
 
 import { getAxiosInstance } from './axios';
 
-const CIM_FORMS_ENDPOINT = 'surf/cim/forms/';
 const PROCESS_ENDPOINT = 'processes/';
 const PRODUCTS_ENDPOINT = 'products/';
+const FORMS_ENDPOINT = 'surf/forms/';
 
 export class BaseApiClient {
     private _axiosInstance: AxiosInstance;
@@ -105,14 +105,20 @@ export class BaseApiClient {
     };
 }
 
-abstract class ApiClientInterface extends BaseApiClient {
-    abstract cimStartForm: (
+export class ApiClient extends BaseApiClient {
+    startForm = (
         formKey: string,
         userInputs: object[],
-    ) => Promise<object>;
-}
+    ): Promise<{ id: string }> => {
+        return this.postPutJson(
+            `${FORMS_ENDPOINT}${formKey}`,
+            userInputs,
+            'post',
+            false,
+            true,
+        );
+    };
 
-export class ApiClient extends ApiClientInterface {
     startProcess = (
         workflowName: string,
         processInput: object,
@@ -142,18 +148,6 @@ export class ApiClient extends ApiClientInterface {
     productById = (productId: string): Promise<ProductDefinition> => {
         return this.fetchJson(`${PRODUCTS_ENDPOINT}${productId}`);
     };
-    cimStartForm = (
-        formKey: string,
-        userInputs: object[],
-    ): Promise<{ id: string }> => {
-        return this.postPutJson(
-            `${CIM_FORMS_ENDPOINT}${formKey}`,
-            userInputs,
-            'post',
-            false,
-            true,
-        );
-    };
     prefix_filters = (): Promise<IpPrefix[]> => {
         return this.fetchJson('surf/ipam/prefix_filters');
     };

package/src/components/WfoForms/CreateForm.tsx

@@ -35,7 +35,7 @@ export function CreateForm(props: IProps) {
 
     const submit = useCallback(
         (userInputs: object[]) => {
-            return apiClient.cimStartForm(formKey, userInputs).then((form) => {
+            return apiClient.startForm(formKey, userInputs).then((form) => {
                 handleSubmit(form);
             });
         },

package/src/components/WfoForms/index.ts

@@ -1,5 +1,5 @@
-export * from './CreateForm';
 export * from './AutoFields';
 export * from './UserInputForm';
 export * from './UserInputFormWizard';
 export * from './formFields';
+export * from './CreateForm';

package/src/graphqlQueries/index.ts

@@ -3,7 +3,6 @@ export * from './productBlocksQuery';
 export * from './productsQuery';
 export * from './resourceTypesQuery';
 export * from './subscriptionDetailQuery';
-export * from './processDetailQuery';
 export * from './subscriptionsDropdownOptionsQuery';
 export * from './processStepsQuery';
 export * from './processListQuery';

package/src/hooks/useQueryWithFetch.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { UseQueryOptions, useQuery } from 'react-query';
 
 import { Variables } from 'graphql-request/build/cjs/types';
 import { signOut } from 'next-auth/react';
@@ -9,6 +9,7 @@ export const useQueryWithFetch = <T, V extends Variables>(
     url: string,
     queryVars: V,
     queryKey: string,
+    options?: UseQueryOptions<T, unknown, T, [string, ...unknown[]]>,
 ) => {
     const { session } = useWfoSession();
     const requestHeaders = {
@@ -29,5 +30,9 @@ export const useQueryWithFetch = <T, V extends Variables>(
         }
         return (await response.json()) as T;
     };
-    return useQuery([queryKey, ...Object.values(queryVars)], fetchData);
+    return useQuery(
+        [queryKey, ...Object.values(queryVars)],
+        fetchData,
+        options,
+    );
 };

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -5,6 +5,21 @@ import { useTranslations } from 'next-intl';
 import { EuiBadgeGroup } from '@elastic/eui';
 import type { Pagination } from '@elastic/eui/src/components';
 
+import {
+    useDataDisplayParams,
+    useQueryWithGraphql,
+    useQueryWithGraphqlLazy,
+    useShowToastMessage,
+    useStoredTableConfig,
+} from '@/hooks';
+import type { GraphqlQueryVariables, WorkflowDefinition } from '@/types';
+import { BadgeType, SortOrder } from '@/types';
+import {
+    getQueryVariablesForExport,
+    onlyUnique,
+    parseDateToLocaleDateTimeString,
+    parseIsoString,
+} from '@/utils';
 import {
     csvDownloadHandler,
     getCsvFileNameWithDate,
@@ -28,20 +43,6 @@ import { WfoWorkflowTargetBadge } from '../../components/WfoBadges/WfoWorkflowTa
 import { WfoDateTime } from '../../components/WfoDateTime/WfoDateTime';
 import { mapSortableAndFilterableValuesToTableColumnConfig } from '../../components/WfoTable/utils/mapSortableAndFilterableValuesToTableColumnConfig';
 import { GET_WORKFLOWS_GRAPHQL_QUERY } from '../../graphqlQueries/workflows/workflowsQuery';
-import {
-    useDataDisplayParams,
-    useQueryWithGraphql,
-    useQueryWithGraphqlLazy,
-    useShowToastMessage,
-    useStoredTableConfig,
-} from '../../hooks';
-import type { GraphqlQueryVariables, WorkflowDefinition } from '../../types';
-import { BadgeType, SortOrder } from '../../types';
-import {
-    getQueryVariablesForExport,
-    parseDateToLocaleDateTimeString,
-    parseIsoString,
-} from '../../utils';
 import { WfoMetadataPageLayout } from './WfoMetadataPageLayout';
 import {
     graphQlWorkflowListMapper,
@@ -115,26 +116,30 @@ export const WfoWorkflowsPage = () => {
             name: t('productTags'),
             render: (productTags) => (
                 <>
-                    {productTags?.map((productTag, index) => (
-                        <WfoProductBlockBadge
-                            key={index}
-                            badgeType={BadgeType.PRODUCT_TAG}
-                        >
-                            {productTag}
-                        </WfoProductBlockBadge>
-                    ))}
+                    {productTags
+                        ?.filter(onlyUnique)
+                        .map((productTag, index) => (
+                            <WfoProductBlockBadge
+                                key={index}
+                                badgeType={BadgeType.PRODUCT_TAG}
+                            >
+                                {productTag}
+                            </WfoProductBlockBadge>
+                        ))}
                 </>
             ),
             renderDetails: (productTags) => (
                 <EuiBadgeGroup gutterSize="s">
-                    {productTags?.map((productTag, index) => (
-                        <WfoProductBlockBadge
-                            key={index}
-                            badgeType={BadgeType.PRODUCT_TAG}
-                        >
-                            {productTag}
-                        </WfoProductBlockBadge>
-                    ))}
+                    {productTags
+                        ?.filter(onlyUnique)
+                        .map((productTag, index) => (
+                            <WfoProductBlockBadge
+                                key={index}
+                                badgeType={BadgeType.PRODUCT_TAG}
+                            >
+                                {productTag}
+                            </WfoProductBlockBadge>
+                        ))}
                 </EuiBadgeGroup>
             ),
         },

package/src/pages/processes/WfoProcessDetailPage.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { TimelineItem, WfoError, WfoLoading } from '@/components';
+import { useGetProcessDetailQuery } from '@/rtk/endpoints/processDetail';
 
 import {
     WfoStepListRef,
     WfoWorkflowStepList,
 } from '../../components/WfoWorkflowSteps';
-import { GET_PROCESS_DETAIL_GRAPHQL_QUERY } from '../../graphqlQueries';
-import { useQueryWithGraphql } from '../../hooks';
 import {
     ProcessDetail,
     ProcessDoneStatuses,
@@ -39,13 +38,10 @@ export const WfoProcessDetailPage = ({
     const stepListRef = useRef<WfoStepListRef>(null);
     const [fetchInterval, setFetchInterval] = useState<number | undefined>();
     const [process, setProcess] = useState<ProcessDetail | undefined>();
-    const { data, isLoading, isError } = useQueryWithGraphql(
-        GET_PROCESS_DETAIL_GRAPHQL_QUERY,
-        {
-            processId,
-        },
-        'processDetail',
-        { refetchInterval: fetchInterval, refetchOnWindowFocus: false },
+
+    const { data, isLoading, isError } = useGetProcessDetailQuery(
+        { processId },
+        { pollingInterval: fetchInterval },
     );
 
     if (isError) {
@@ -55,7 +51,7 @@ export const WfoProcessDetailPage = ({
     }
 
     useEffect(() => {
-        const process = data?.processes.page[0];
+        const process = data?.processes[0];
         // We need to cast here because the backend might return the string in upperCase and
         // toLowerCase() will converts the value type to string
         const lastStatus =
@@ -71,7 +67,7 @@ export const WfoProcessDetailPage = ({
     }, [data, processDetailRefetchInterval]);
 
     useEffect(() => {
-        const fetchedProcessDetails = data?.processes.page[0];
+        const fetchedProcessDetails = data?.processes[0];
 
         if (!process) {
             setProcess(fetchedProcessDetails);

package/src/pages/startPage/WfoStartPage.tsx

@@ -107,7 +107,7 @@ export const WfoStartPage = () => {
             ) ?? [],
         button: {
             name: t('outOfSyncSubscriptions.buttonText'),
-            url: `${PATH_SUBSCRIPTIONS}?activeTab=ALL&sortBy=field-startDate_order-ASC&queryString=status%3A%28initial%7Cactive%29+insync%3Afalse`,
+            url: `${PATH_SUBSCRIPTIONS}?activeTab=ALL&sortBy=field-startDate_order-ASC&queryString=status%3A%28provisioning%7Cactive%29+insync%3Afalse`,
         },
         isLoading: outOfSyncsubscriptionsSummaryIsFetching,
     };

package/src/rtk/endpoints/processDetail.ts

@@ -0,0 +1,66 @@
+import { orchestratorApi } from '@/rtk';
+import { ProcessDetail, ProcessesDetailResult } from '@/types';
+
+export const processDetailQuery = `query ProcessDetail($processId: String!) {
+        processes(filterBy: { value: $processId, field: "processId" }) {
+            page {
+                processId
+                lastStatus
+                createdBy
+                startedAt
+                lastModifiedAt
+                lastStep
+                workflowName
+                isTask
+                form
+                steps {
+                    name
+                    status
+                    stepId
+                    executed
+                    stateDelta
+                }
+                customer {
+                    fullname
+                }
+                subscriptions {
+                    page {
+                        product {
+                            name
+                        }
+                        description
+                        subscriptionId
+                    }
+                }
+            }
+        }
+    }`;
+
+export type ProcessDetailResponse = {
+    processes: ProcessDetail[];
+};
+
+const processDetailApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getProcessDetail: builder.query<
+            ProcessDetailResponse,
+            { processId: string }
+        >({
+            query: (variables) => ({
+                document: processDetailQuery,
+                variables,
+            }),
+            transformResponse: (
+                response: ProcessesDetailResult,
+            ): ProcessDetailResponse => {
+                const processes = response.processes.page || [];
+
+                return {
+                    processes,
+                };
+            },
+        }),
+    }),
+});
+
+export const { useGetProcessDetailQuery } = processDetailApi;

package/src/rtk/endpoints/processList.ts

@@ -75,7 +75,7 @@ const processApi = orchestratorApi.injectEndpoints({
             transformResponse: (
                 response: ProcessListResult,
             ): ProcessListResponse => {
-                const processes = response?.processes?.page || [];
+                const processes = response.processes.page || [];
 
                 return {
                     processes,

package/src/types/index.ts

@@ -1 +1,2 @@
 export * from './types';
+export * from './forms';

package/src/utils/index.ts

@@ -6,3 +6,4 @@ export * from './uuid';
 export * from './strings';
 export * from './getProductNamesFromProcess';
 export * from './getQueryVariablesForExport';
+export * from './onlyUnique';

package/src/utils/onlyUnique.spec.ts

@@ -0,0 +1,19 @@
+import { onlyUnique } from './onlyUnique';
+
+describe('onlyUnique()', () => {
+    it('returns array as array with only unique values', () => {
+        const test1 = ['SP', 'SP', 'FW', 'SP', 'FW', 'LP'];
+        const result = test1?.filter(onlyUnique);
+        expect(result).toEqual(['SP', 'FW', 'LP']);
+    });
+    it('returns array as array with only single value', () => {
+        const test2 = ['SP', 'SP', 'SP'];
+        const result = test2?.filter(onlyUnique);
+        expect(result).toEqual(['SP']);
+    });
+    it('returns array as empty array', () => {
+        const test3 = [''];
+        const result = test3?.filter(onlyUnique);
+        expect(result).toEqual(['']);
+    });
+});

package/src/utils/onlyUnique.ts

@@ -0,0 +1,3 @@
+export const onlyUnique = (value: string, index: number, array: string[]) => {
+    return array.indexOf(value) === index;
+};

package/src/utils/string.spec.ts

@@ -1,4 +1,10 @@
-import { camelToHuman, removeSuffix, upperCaseFirstChar } from './strings';
+import {
+    camelToHuman,
+    removeSuffix,
+    snakeToHuman,
+    snakeToKebab,
+    upperCaseFirstChar,
+} from './strings';
 
 describe('upperCaseFirstChar()', () => {
     it("Doesn't crash on an empty string but returns empty string", () => {
@@ -68,3 +74,33 @@ describe('camelToHuman()', () => {
         expect(result).toEqual('A Quick Brown Fox');
     });
 });
+
+describe('snakeToHuman()', () => {
+    it('Returns an empty string when input is an empty string', () => {
+        const result = snakeToHuman('');
+        expect(result).toEqual('');
+    });
+    it('Returns two words from a single underscore snake case word', () => {
+        const result = snakeToHuman('hello_world');
+        expect(result).toEqual('hello world');
+    });
+    it('Returns multiple words from a multiple underscore snake case word', () => {
+        const result = snakeToHuman('quick_brown_fox');
+        expect(result).toEqual('quick brown fox');
+    });
+});
+
+describe('snakeToKebab()', () => {
+    it('Returns an empty string when input is an empty string', () => {
+        const result = snakeToKebab('');
+        expect(result).toEqual('');
+    });
+    it('Returns kebab case word from a single underscore snake case word', () => {
+        const result = snakeToKebab('hello_world');
+        expect(result).toEqual('hello-world');
+    });
+    it('Returns kebab case word from a multiple underscore snake case word', () => {
+        const result = snakeToKebab('quick_brown_fox');
+        expect(result).toEqual('quick-brown-fox');
+    });
+});

package/src/utils/strings.ts

@@ -13,3 +13,12 @@ export const camelToHuman = (value: string): string => {
     const result = value.replace(/([A-Z])/g, ' $1').trimStart();
     return result.charAt(0).toUpperCase() + result.slice(1);
 };
+
+export const snakeToHuman = (value: string): string => {
+    const result = value.replace(/_/g, ' ');
+    return result.charAt(0) + result.slice(1);
+};
+
+export const snakeToKebab = (value: string): string => {
+    return value.replace(/_/g, '-');
+};

package/src/graphqlQueries/processDetailQuery.ts

@@ -1,46 +0,0 @@
-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
-                form
-                steps {
-                    name
-                    status
-                    stepId
-                    executed
-                    stateDelta
-                }
-                customer {
-                    fullname
-                }
-                subscriptions {
-                    page {
-                        product {
-                            name
-                        }
-                        description
-                        subscriptionId
-                    }
-                }
-            }
-        }
-    }
-`);