@integry/sdk 4.7.14 → 4.7.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.7.14",
+  "version": "4.7.16",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/components/MultipurposeField/Dropdown/index.tsx

@@ -322,22 +322,23 @@ const ListBox = (props: ListBoxProps) => {
         >(new URL(endpointUrl), data, requestBodyData)
         .then((res: any) => {
           if (res) {
-            setItems(dynamicResponseMapper(res));
+            const tempFilteredItems = dynamicResponseMapper(res);
+            setItems(tempFilteredItems);
             if (res.hasOwnProperty('_cursor') && res._cursor !== null) {
-              const tempFilteredItems = dynamicResponseMapper(res);
               setFilteredItems(tempFilteredItems);
               setSortedFilteredItems(tempFilteredItems);
-              if (tempFilteredItems.length === 1) {
-                setEditableTextValue(tempFilteredItems[0].value);
-                onChange(tempFilteredItems[0].id, true);
-              } else if (value) {
-                const item = tempFilteredItems.find((a) => a.id === value);
-                if (item) {
-                  setEditableTextValue(item.value);
-                  onChange(item.id, true);
-                }
+            } else {
+              setSortedFilteredItems(tempFilteredItems);
+            }
+            if (tempFilteredItems.length === 1) {
+              setEditableTextValue(tempFilteredItems[0].value);
+              onChange(tempFilteredItems[0].id, true);
+            } else if (value) {
+              const item = tempFilteredItems.find((a) => a.id === value);
+              if (item) {
+                setEditableTextValue(item.value);
+                onChange(item.id, true);
               }
-              setSortedFilteredItems(dynamicResponseMapper(res));
             }
             // if value was selected before items were loaded, select it again
             if (value && isSearchable) {

package/src/components/form/ObjectField/index.ts.test.tsx

@@ -0,0 +1,213 @@
+// ```bash
+// npm install vitest @testing-library/preact @testing-library/user-event --save-dev
+// ```
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent, screen } from '@testing-library/preact';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+import { ObjectField } from './index';
+
+// Mock components and styles if necessary
+vi.mock('@/components/Input', () => ({ Input: () => <div>Input</div> }));
+vi.mock('@/components/TextArea', () => ({
+  TextArea: () => <div>TextArea</div>,
+}));
+vi.mock('@/components/CheckboxGroup', () => ({
+  CheckboxGroup: () => <div>CheckboxGroup</div>,
+}));
+vi.mock('@/components/ConfigureFieldWrapper', () => ({
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+vi.mock('@/components/MultipurposeField/Dropdown', () => ({
+  ListBox: () => <div>ListBox</div>,
+}));
+vi.mock('@/components/MultipurposeField', () => ({
+  MultipurposeField: () => <div>MultipurposeField</div>,
+}));
+vi.mock('./styles.module.scss', () => ({
+  objectContainer: 'objectContainer',
+  objectFieldWrap: 'objectFieldWrap',
+  label: 'label',
+  subLabel: 'subLabel',
+  removeButton: 'removeButton',
+}));
+
+describe('ObjectField Component', () => {
+  const mockOnChange = vi.fn();
+  const mockOnChangeInFlow = vi.fn();
+  const mockApiHandler = vi.fn();
+
+  const baseProps = {
+    field: {
+      title: 'Test Field',
+      description: 'Test Description',
+      template_fields: [],
+      type: 'TEXTFIELD',
+      properties: {},
+    },
+    functionArguments: {},
+    connectedAccount: 'test-account',
+    appName: 'Test App',
+    onChange: mockOnChange,
+    onChangeInFlow: mockOnChangeInFlow,
+    apiHandler: mockApiHandler,
+    activityOutputData: {},
+    activityOutputDataRaw: {},
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(<ObjectField {...baseProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('calls onChange when input changes', async () => {
+    const user = userEvent.setup();
+    render(<ObjectField {...baseProps} />);
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'New Value');
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+
+  it('conditionally renders add more button based on isArray prop', () => {
+    const { rerender } = render(<ObjectField {...baseProps} isArray={true} />);
+    expect(screen.queryByText('+ Add another Test Field')).toBeInTheDocument();
+
+    rerender(<ObjectField {...baseProps} isArray={false} />);
+    expect(
+      screen.queryByText('+ Add another Test Field'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('handles array of objects and adds more on button click', async () => {
+    const user = userEvent.setup();
+    render(<ObjectField {...baseProps} isArray={true} />);
+    await user.click(screen.getByText('+ Add another Test Field'));
+    expect(screen.getAllByText('Test Field').length).toBe(2);
+  });
+
+  it('removes an item from the list when delete is clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <ObjectField {...baseProps} isArray={true} objectValue={[{}, {}]} />,
+    );
+    expect(screen.getAllByText('Test Field').length).toBe(2);
+    await user.click(screen.getAllByRole('button')[0]); // Assuming the delete button is the first button
+    expect(screen.getAllByText('Test Field').length).toBe(1);
+  });
+
+  it('validates props and throws if required props are missing', () => {
+    const consoleError = vi.spyOn(console, 'error');
+    consoleError.mockImplementation(() => {});
+
+    expect(() => render(<ObjectField />)).toThrow();
+    expect(consoleError).toHaveBeenCalled();
+
+    consoleError.mockRestore();
+  });
+
+  it('renders with minimal props', () => {
+    const { container } = render(
+      <ObjectField field={{}} onChange={vi.fn()} apiHandler={vi.fn()} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('handles add more fields', async () => {
+    const onChange = vi.fn();
+    render(
+      <ObjectField
+        field={{ title: 'Test Field', isArray: true }}
+        onChange={onChange}
+        apiHandler={vi.fn()}
+      />,
+    );
+    const addButton = screen.getByText('+ Add another Test Field');
+    await fireEvent.click(addButton);
+    expect(screen.getAllByText('Test Field').length).toBe(2);
+  });
+
+  it('handles field changes', async () => {
+    const onChange = vi.fn();
+    const field = {
+      title: 'Number Field',
+      isArray: true,
+      properties: {
+        numberField: {
+          meta: {
+            title: 'Number',
+            ui: { ui_field: { type: 'TEXTFIELD' } },
+            is_required: true,
+          },
+          type: 'number',
+        },
+      },
+    };
+    render(
+      <ObjectField field={field} onChange={onChange} apiHandler={vi.fn()} />,
+    );
+    const input = screen.getByTitle('Number');
+    await fireEvent.change(input, { target: { value: '123' } });
+    expect(onChange).toHaveBeenCalledWith(
+      expect.anything(),
+      '123',
+      expect.anything(),
+      true,
+      expect.anything(),
+      expect.anything(),
+    );
+  });
+
+  it('renders a textarea when no fields are provided', () => {
+    const field = { type: 'TEXTAREA' };
+    const { container } = render(
+      <ObjectField field={field} onChange={vi.fn()} apiHandler={vi.fn()} />,
+    );
+    expect(container.querySelector('textarea')).not.toBeNull();
+  });
+
+  it('renders nested fields correctly', () => {
+    const field = {
+      properties: {
+        nestedField: {
+          meta: {
+            title: 'Nested Field',
+            ui: { ui_field: { type: 'CHECKBOX' } },
+            is_required: false,
+          },
+        },
+      },
+    };
+    render(
+      <ObjectField field={field} onChange={vi.fn()} apiHandler={vi.fn()} />,
+    );
+    expect(screen.getByText('CheckboxGroup')).toBeInTheDocument();
+  });
+  it('handles empty array as objectValue gracefully', () => {
+    render(
+      <ObjectField
+        field={{}}
+        onChange={vi.fn()}
+        apiHandler={vi.fn()}
+        objectValue={[]}
+      />,
+    );
+    expect(screen.getByText('+ Add another')).toBeInTheDocument();
+  });
+
+  it('handles null objectValue without crashing', () => {
+    render(
+      <ObjectField
+        field={{}}
+        onChange={vi.fn()}
+        apiHandler={vi.fn()}
+        objectValue={null}
+      />,
+    );
+    expect(screen.queryByText('TextArea')).toBeNull(); // Assuming TextArea is not rendered by default
+  });
+
+  // Additional tests can be added here to cover more complex interactions and edge cases
+});

package/src/features/common/FunctionForm/index.ts

@@ -29,6 +29,7 @@ interface FunctionFormPropsType extends StoreType {
   functionArguments: any;
   variables: any;
   autoMapVars: boolean;
+  version?: string | null;
   onClose: (response: any) => void;
   apiHandler: any;
   customSaveCallback?: (response: any) => void; // Optional callback: Helps the implementor to implement their own save button
@@ -99,6 +100,7 @@ class FunctionForm extends Component<
       .getFunctionDetails(
         this.props.functionName,
         this.props.autoMapVars ? this.props.variables : {},
+        this.props.version,
       )
       .then((response: any) => {
         this.setState({ functionDetails: response });

package/src/index.ts

@@ -592,6 +592,7 @@ export class IntegryJS {
       payload: {},
       connectedAccountId: '',
       autoMapPayload: false,
+      version: null,
     },
   ): Promise<Record<any, any>> => {
     const store = createSDKStore();
@@ -601,6 +602,7 @@ export class IntegryJS {
         .getFunctionDetails(
           functionName,
           options.autoMapPayload ? options.payload : {},
+          options.version,
         )
         .then((response: any) => {
           if (!response) {
@@ -668,6 +670,7 @@ export class IntegryJS {
                       functionArguments=${options.params}
                       variables=${options.payload}
                       autoMapVars=${options.autoMapPayload}
+                      version=${options.version}
                       apiHandler=${this.apiHandler}
                       onClose=${(functionUIResponse: any) => {
                         const authIdElement = document.getElementById(
@@ -735,13 +738,20 @@ export class IntegryJS {
       [key: string]: any;
     } = {},
     connectedAccountId: string,
+    version: string | null = null,
   ): Promise<Record<any, any>> =>
     new Promise((resolve, reject) => {
       // Prepare the request body by encoding `args` to JSON
+      const headers: Record<string, string> = {
+        ...this.getHeaders(),
+      };
+      if (version) {
+        headers.Version = version;
+      }
       const functionDetails = {
         method: this.getMethod(),
         url: `${this.getBaseAPIUrl()}/functions/${functionName}/call/`,
-        headers: this.getHeaders(),
+        headers,
         args: params,
         vars,
       };

package/src/modules/api/index.ts

@@ -1172,6 +1172,7 @@ class IntegryAPI {
   public getFunctionDetails = async (
     functionName: string,
     variables: Record<string, unknown> = {},
+    version: string | null = null,
   ): Promise<any | null> => {
     const url = new URL(
       `${this.config.baseAPIUrl}/functions/${functionName}/get/`,
@@ -1185,14 +1186,18 @@ class IntegryAPI {
     });
 
     try {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      };
+      if (version) {
+        headers.Version = version;
+      }
       const response = await fetch(url.toString(), {
         method: 'POST',
         body: JSON.stringify({
           _variables: variables,
         }),
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers,
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       }).then((data) => ResponseHandler<BrandingApp>(data));
       return response.data;

package/src/types/index.ts

@@ -315,4 +315,5 @@ export type ShowFunctionOptions = {
   payload?: Record<string, any>;
   connectedAccountId?: string;
   autoMapPayload?: boolean;
+  version?: string | null;
 };