Changes needed for the cim send email form wizard (#821)

* Changes needed for the cim send email form wizard

* Added string unit tests

* Change in unit tests descriptions

---------

Co-authored-by: Georgi2704 <[email protected]>

Author: Georgi2704

packages/orchestrator-ui-components/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');
     };

packages/orchestrator-ui-components/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);
             });
         },

packages/orchestrator-ui-components/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';

packages/orchestrator-ui-components/src/types/index.ts

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

packages/orchestrator-ui-components/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');
+    });
+});

packages/orchestrator-ui-components/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, '-');
+};