@amp-labs/react 1.0.0 → 1.0.2

package/build/src/components/Configure/CreateInstallation.js

@@ -6,7 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * this page is wip: untested
  */
 const react_1 = require("react");
-const ApiKeyContext_1 = require("../../context/ApiKeyContext");
+const ApiKeyProvider_1 = require("../../context/ApiKeyProvider");
 const ConnectionsContext_1 = require("../../context/ConnectionsContext");
 const ErrorContextProvider_1 = require("../../context/ErrorContextProvider");
 const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
@@ -17,6 +17,7 @@ const HydratedRevisionContext_1 = require("./state/HydratedRevisionContext");
 const utils_1 = require("./state/utils");
 const ConfigureInstallationBase_1 = require("./ConfigureInstallationBase");
 const ObjectManagementNav_1 = require("./ObjectManagementNav");
+const utils_2 = require("./utils");
 // the config should be undefined for create flow
 const UNDEFINED_CONFIG = undefined;
 //  Create Installation Flow
@@ -25,18 +26,18 @@ function CreateInstallation() {
     const { hydratedRevision, loading } = (0, HydratedRevisionContext_1.useHydratedRevision)();
     const { selectedObjectName } = (0, ObjectManagementNav_1.useSelectedObjectName)();
     const { selectedConnection } = (0, ConnectionsContext_1.useConnections)();
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
     const { projectId } = (0, ProjectContext_1.useProject)();
     const { resetBoundary, setErrors } = (0, ErrorContextProvider_1.useErrorState)();
-    const { setConfigureState, objectConfigurationsState, resetPendingConfigurationState, } = (0, ConfigurationStateProvider_1.useConfigureState)();
+    const { resetConfigureState, objectConfigurationsState, resetPendingConfigurationState, } = (0, ConfigurationStateProvider_1.useConfigureState)();
     const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
     const [isLoading, setLoadingState] = (0, react_1.useState)(false);
     const resetState = (0, react_1.useCallback)(() => {
         resetBoundary(ErrorContextProvider_1.ErrorBoundary.MAPPING);
         if ((hydratedRevision === null || hydratedRevision === void 0 ? void 0 : hydratedRevision.content) && !loading && selectedObjectName) {
-            (0, utils_1.resetConfigurationState)(hydratedRevision, UNDEFINED_CONFIG, selectedObjectName, setConfigureState);
+            (0, utils_1.setHydrateConfigState)(hydratedRevision, UNDEFINED_CONFIG, selectedObjectName, resetConfigureState);
         }
-    }, [hydratedRevision, loading, selectedObjectName, setConfigureState, resetBoundary]);
+    }, [resetBoundary, hydratedRevision, loading, selectedObjectName, resetConfigureState]);
     (0, react_1.useEffect)(() => {
         // set configurationState when hydratedRevision is loaded
         if (!configureState && (hydratedRevision === null || hydratedRevision === void 0 ? void 0 : hydratedRevision.content) && !loading) {
@@ -45,16 +46,12 @@ function CreateInstallation() {
     }, [configureState, objectConfigurationsState, hydratedRevision, loading, resetState]);
     const onSave = (e) => {
         e.preventDefault();
-        const { requiredMapFields } = configureState;
-        const fieldsWithRequirementsNotMet = (requiredMapFields === null || requiredMapFields === void 0 ? void 0 : requiredMapFields.filter((field) => !field.value))
-            || [];
-        const errList = fieldsWithRequirementsNotMet.map((field) => field.mapToName);
-        setErrors(ErrorContextProvider_1.ErrorBoundary.MAPPING, errList);
-        // if requires fields are not met, set error fields and return
-        if (fieldsWithRequirementsNotMet === null || fieldsWithRequirementsNotMet === void 0 ? void 0 : fieldsWithRequirementsNotMet.length) {
-            console.error('required fields not met', fieldsWithRequirementsNotMet.map((field) => field.mapToDisplayName));
+        // check if fields with requirements are met
+        const { requiredMapFields, selectedFieldMappings } = configureState || {};
+        const { errorList } = (0, utils_2.validateFieldMappings)(requiredMapFields, selectedFieldMappings, setErrors);
+        if (errorList.length > 0) {
             return;
-        }
+        } // skip if there are errors
         if (selectedObjectName && (selectedConnection === null || selectedConnection === void 0 ? void 0 : selectedConnection.id) && apiKey && projectId
             && integrationId && groupRef && consumerRef && hydratedRevision) {
             setLoadingState(true);

package/build/src/components/Configure/InstallIntegration.js

@@ -25,7 +25,6 @@ function InstallationContent() {
     // No installation, render create installation flow
     (0, jsx_runtime_1.jsx)(CreateInstallation_1.CreateInstallation, {}));
 }
-// TODO consider creating an integration obj context
 function InstallIntegration({ integration, consumerRef, consumerName, groupRef, groupName, }) {
     var _a;
     const { projectId } = (0, ProjectContext_1.useProject)();
@@ -35,6 +34,6 @@ function InstallIntegration({ integration, consumerRef, consumerName, groupRef,
     }
     return (
     // install integration provider provides all props, integrationObj and installation
-    (0, jsx_runtime_1.jsx)(InstallIntegrationContext_1.InstallIntegrationProvider, { integration: integration, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName, children: (0, jsx_runtime_1.jsx)(ConnectionsContext_1.ConnectionsProvider, { projectId: projectId, children: (0, jsx_runtime_1.jsx)(ProtectedConnectionLayout_1.ProtectedConnectionLayout, { children: (0, jsx_runtime_1.jsx)(HydratedRevisionContext_1.HydratedRevisionProvider, { projectId: projectId, children: (0, jsx_runtime_1.jsx)(ConfigurationStateProvider_1.ConfigurationProvider, { children: (0, jsx_runtime_1.jsx)(ObjectManagementNav_1.ObjectManagementNav, { children: (0, jsx_runtime_1.jsx)(InstallationContent, {}) }) }) }) }) }) }));
+    (0, jsx_runtime_1.jsx)(InstallIntegrationContext_1.InstallIntegrationProvider, { integration: integration, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName, children: (0, jsx_runtime_1.jsx)(ConnectionsContext_1.ConnectionsProvider, { groupRef: groupRef, children: (0, jsx_runtime_1.jsx)(ProtectedConnectionLayout_1.ProtectedConnectionLayout, { consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName, children: (0, jsx_runtime_1.jsx)(HydratedRevisionContext_1.HydratedRevisionProvider, { projectId: projectId, children: (0, jsx_runtime_1.jsx)(ConfigurationStateProvider_1.ConfigurationProvider, { children: (0, jsx_runtime_1.jsx)(ObjectManagementNav_1.ObjectManagementNav, { children: (0, jsx_runtime_1.jsx)(InstallationContent, {}) }) }) }) }) }) }));
 }
 exports.InstallIntegration = InstallIntegration;

package/build/src/components/Configure/ObjectManagementNav/UninstallInstallation.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface NavObjectItemProps {
+    text?: string;
+}
+export declare const UNINSTALL_INSTALLATION_CONST = "uninstall-intallation";
+export declare const UninstallInstallation: import("react").ForwardRefExoticComponent<NavObjectItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/build/src/components/Configure/ObjectManagementNav/UninstallInstallation.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UninstallInstallation = exports.UNINSTALL_INSTALLATION_CONST = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const TrashIcon_1 = require("../../../assets/TrashIcon");
+exports.UNINSTALL_INSTALLATION_CONST = 'uninstall-intallation';
+exports.UninstallInstallation = (0, react_1.forwardRef)(({ text = 'Uninstall' }, ref) => {
+    // 1. Reuse the `useTab` hook
+    const tabProps = (0, react_2.useTab)({ ref });
+    // 2. Hook into the Tabs `size`, `variant`, props
+    const styles = (0, react_2.useMultiStyleConfig)('Tabs', tabProps);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Button, Object.assign({ __css: styles.warningTab }, tabProps, { minHeight: 15, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "flex", alignItems: "center", gap: 2, my: 2, mx: 4, children: [(0, TrashIcon_1.TrashIcon)(), (0, jsx_runtime_1.jsx)(react_2.Box, { textAlign: "left", children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: "red.800", children: text }) })] }), tabProps.children] })));
+});

package/build/src/components/Configure/ObjectManagementNav/index.js

@@ -10,6 +10,7 @@ const ConfigurationStateProvider_1 = require("../state/ConfigurationStateProvide
 const HydratedRevisionContext_1 = require("../state/HydratedRevisionContext");
 const utils_1 = require("../utils");
 const NavObjectItem_1 = require("./NavObjectItem");
+const UninstallInstallation_1 = require("./UninstallInstallation");
 // Create a context for the selected navObject's name
 const SelectedObjectNameContext = (0, react_1.createContext)(null);
 // Custom hook to access the selected navObject's name
@@ -22,7 +23,13 @@ function useSelectedObjectName() {
 }
 exports.useSelectedObjectName = useSelectedObjectName;
 function getSelectedObject(navObjects, tabIndex) {
-    return navObjects === null || navObjects === void 0 ? void 0 : navObjects[tabIndex];
+    if (navObjects === null || navObjects === void 0 ? void 0 : navObjects[tabIndex]) {
+        return navObjects[tabIndex];
+    }
+    if (tabIndex > navObjects.length - 1) {
+        return { name: UninstallInstallation_1.UNINSTALL_INSTALLATION_CONST, completed: false };
+    }
+    return undefined;
 }
 // note: when the object key exists in the config; the user has already completed the object before
 function ObjectManagementNav({ children, }) {
@@ -36,10 +43,10 @@ function ObjectManagementNav({ children, }) {
     const selectedObject = getSelectedObject(navObjects || [], tabIndex);
     const { project } = (0, ProjectContext_1.useProject)();
     const appName = (project === null || project === void 0 ? void 0 : project.appName) || '';
-    return ((0, jsx_runtime_1.jsx)(SelectedObjectNameContext.Provider, { value: selectedObject === null || selectedObject === void 0 ? void 0 : selectedObject.name, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 8, maxWidth: "55rem", border: "1px solid #EFEFEF", borderRadius: 6, boxShadow: "md", margin: "auto", bgColor: "whitesmoke", display: "flex", gap: "6", minHeight: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { width: "20rem", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { children: "Salesforce integration" }), (0, jsx_runtime_1.jsx)(react_2.Text, { marginBottom: "20px", fontSize: "1.125rem", fontWeight: "500", children: appName }), navObjects && ((0, jsx_runtime_1.jsx)(react_2.Tabs, { index: tabIndex, onChange: handleTabsChange, orientation: "horizontal", children: navObjects.map((object) => {
-                                var _a, _b;
-                                return ((0, jsx_runtime_1.jsx)(NavObjectItem_1.NavObjectItem, { objectName: object.name, completed: object.completed, pending: ((_a = objectConfigurationsState[object.name]) === null || _a === void 0 ? void 0 : _a.isOptionalFieldsModified)
-                                        || ((_b = objectConfigurationsState[object.name]) === null || _b === void 0 ? void 0 : _b.isRequiredMapFieldsModified) }, object.name));
-                            }) }))] }), children] }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectedObjectNameContext.Provider, { value: selectedObject === null || selectedObject === void 0 ? void 0 : selectedObject.name, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 8, maxWidth: "55rem", border: "1px solid #EFEFEF", borderRadius: 6, boxShadow: "md", margin: "auto", bgColor: "whitesmoke", display: "flex", gap: "6", minHeight: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { width: "20rem", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { children: "Salesforce integration" }), (0, jsx_runtime_1.jsx)(react_2.Text, { marginBottom: "20px", fontSize: "1.125rem", fontWeight: "500", children: appName }), navObjects && ((0, jsx_runtime_1.jsxs)(react_2.Tabs, { index: tabIndex, onChange: handleTabsChange, orientation: "horizontal", children: [navObjects.map((object) => {
+                                    var _a, _b;
+                                    return ((0, jsx_runtime_1.jsx)(NavObjectItem_1.NavObjectItem, { objectName: object.name, completed: object.completed, pending: ((_a = objectConfigurationsState[object.name]) === null || _a === void 0 ? void 0 : _a.isOptionalFieldsModified)
+                                            || ((_b = objectConfigurationsState[object.name]) === null || _b === void 0 ? void 0 : _b.isRequiredMapFieldsModified) }, object.name));
+                                }), installation && ((0, jsx_runtime_1.jsx)(UninstallInstallation_1.UninstallInstallation, { text: "Uninstall" }, "uninstall-intallation"))] }))] }), children] }) }));
 }
 exports.ObjectManagementNav = ObjectManagementNav;

package/build/src/components/Configure/ProtectedConnectionLayout.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
-interface ConfigureIntegrationBaseProps {
+interface ProtectedConnectionLayoutProps {
+    provider?: string;
+    consumerRef: string;
+    consumerName?: string;
+    groupRef: string;
+    groupName?: string;
     children: JSX.Element;
 }
-export declare function ProtectedConnectionLayout({ children }: ConfigureIntegrationBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProtectedConnectionLayout({ provider, consumerRef, consumerName, groupRef, groupName, children, }: ProtectedConnectionLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/src/components/Configure/ProtectedConnectionLayout.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProtectedConnectionLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const constants_1 = require("../../constants");
 const ConnectionsContext_1 = require("../../context/ConnectionsContext");
 const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
 const SalesforceOauthFlow_1 = __importDefault(require("../Salesforce/SalesforceOauthFlow"));
-// if connection does not exist, render SalesforceOauthFlow
-function ProtectedConnectionLayout({ children }) {
-    const { consumerRef, consumerName, groupRef, groupName, } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+function ProtectedConnectionLayout({ provider, consumerRef, consumerName, groupRef, groupName, children, }) {
     const { selectedConnection, setSelectedConnection, connections } = (0, ConnectionsContext_1.useConnections)();
     (0, react_1.useEffect)(() => {
         if (!selectedConnection && connections && connections.length > 0) {
@@ -19,10 +18,16 @@ function ProtectedConnectionLayout({ children }) {
             setSelectedConnection(connection);
         }
     }, [connections, selectedConnection, setSelectedConnection]);
+    const { provider: providerFromProps } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+    if (!provider && !providerFromProps) {
+        throw new Error('ProtectedConnectionLayout must be given a provider prop or be used within InstallIntegrationProvider');
+    }
     // a selected connection exists, render children
     if (selectedConnection)
         return children;
-    // Require user to login to Saleforce if there are no connections yet.
-    return ((0, jsx_runtime_1.jsx)(SalesforceOauthFlow_1.default, { consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName }));
+    if (provider === constants_1.PROVIDER_SALESFORCE || providerFromProps === constants_1.PROVIDER_SALESFORCE) {
+        return ((0, jsx_runtime_1.jsx)(SalesforceOauthFlow_1.default, { consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { children: "Unsupported provider" }));
 }
 exports.ProtectedConnectionLayout = ProtectedConnectionLayout;

package/build/src/components/Configure/UninstallContent.d.ts

@@ -0,0 +1 @@
+export declare function UninstallContent(): import("react/jsx-runtime").JSX.Element;

package/build/src/components/Configure/UninstallContent.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UninstallContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
+const ProjectContext_1 = require("../../context/ProjectContext");
+const api_1 = require("../../services/api");
+function UninstallContent() {
+    const { projectId, appName } = (0, ProjectContext_1.useProject)();
+    const { integrationId, installation, resetInstallations } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const isDisabled = !projectId || !integrationId || !(installation === null || installation === void 0 ? void 0 : installation.id) || loading;
+    const onDelete = async () => {
+        if (!isDisabled) {
+            setLoading(true);
+            console.warn('uninstalling installation', { projectId, integrationId, installationId: installation.id });
+            try {
+                await (0, api_1.api)().deleteInstallation({ projectId, integrationId, installationId: installation.id });
+                resetInstallations();
+                console.warn('successfully uninstalled installation: ', installation.id);
+            }
+            catch (e) {
+                console.error('error uninstalling installation', e);
+            }
+            finally {
+                setLoading(false);
+            }
+        }
+    };
+    const buttonContent = loading ? 'Uninstalling...' : 'Yes, uninstall';
+    const content = (installation === null || installation === void 0 ? void 0 : installation.id) ? `Once you uninstall this integration, all your configuration will be lost, and "${appName}" may stop working.`
+        : "You've successfully uninstalled the integration.";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Stack, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { paddingBottom: 3, children: content }), (installation === null || installation === void 0 ? void 0 : installation.id) && ((0, jsx_runtime_1.jsx)(react_2.Button, { onClick: onDelete, variant: "warning", isDisabled: isDisabled, children: buttonContent }))] }));
+}
+exports.UninstallContent = UninstallContent;

package/build/src/components/Configure/UpdateInstallation.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateInstallation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ApiKeyContext_1 = require("../../context/ApiKeyContext");
+const ApiKeyProvider_1 = require("../../context/ApiKeyProvider");
 const ErrorContextProvider_1 = require("../../context/ErrorContextProvider");
 const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
 const ProjectContext_1 = require("../../context/ProjectContext");
@@ -13,36 +13,30 @@ const HydratedRevisionContext_1 = require("./state/HydratedRevisionContext");
 const utils_1 = require("./state/utils");
 const ConfigureInstallationBase_1 = require("./ConfigureInstallationBase");
 const ObjectManagementNav_1 = require("./ObjectManagementNav");
+const utils_2 = require("./utils");
 //  Update Installation Flow
 function UpdateInstallation({ installation, integrationObj }) {
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
     const { setInstallation } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
     const { hydratedRevision, loading } = (0, HydratedRevisionContext_1.useHydratedRevision)();
     const { selectedObjectName } = (0, ObjectManagementNav_1.useSelectedObjectName)();
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
     const { projectId } = (0, ProjectContext_1.useProject)();
+    const [isLoading, setLoadingState] = (0, react_1.useState)(false);
     // when no installation or config exists, render create flow
     const { config } = installation;
-    const [isLoading, setLoadingState] = (0, react_1.useState)(false);
     // 1. get config from installations (contains form selection state)
     // 2. get the hydrated revision (contains full form)
     // 3. generate the configuration state from the hydrated revision and config
     const { resetBoundary, setErrors } = (0, ErrorContextProvider_1.useErrorState)();
-    const { setConfigureState, objectConfigurationsState, resetPendingConfigurationState, } = (0, ConfigurationStateProvider_1.useConfigureState)();
+    const { resetConfigureState, objectConfigurationsState, resetPendingConfigurationState, } = (0, ConfigurationStateProvider_1.useConfigureState)();
     const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
     const resetState = (0, react_1.useCallback)(() => {
         resetBoundary(ErrorContextProvider_1.ErrorBoundary.MAPPING);
         // set configurationState when hydratedRevision is loaded
         if ((hydratedRevision === null || hydratedRevision === void 0 ? void 0 : hydratedRevision.content) && !loading && selectedObjectName) {
-            (0, utils_1.resetConfigurationState)(hydratedRevision, config, selectedObjectName, setConfigureState);
+            (0, utils_1.setHydrateConfigState)(hydratedRevision, config, selectedObjectName, resetConfigureState);
         }
-    }, [
-        hydratedRevision,
-        loading,
-        config,
-        selectedObjectName,
-        setConfigureState,
-        resetBoundary,
-    ]);
+    }, [resetBoundary, hydratedRevision, loading, selectedObjectName, config, resetConfigureState]);
     (0, react_1.useEffect)(() => {
         if (!configureState) {
             resetState();
@@ -56,14 +50,9 @@ function UpdateInstallation({ installation, integrationObj }) {
     const onSave = (e) => {
         e.preventDefault();
         // check if fields with requirements are met
-        const { requiredMapFields } = configureState;
-        const fieldsWithRequirementsNotMet = (requiredMapFields === null || requiredMapFields === void 0 ? void 0 : requiredMapFields.filter((field) => !field.value))
-            || [];
-        const errList = fieldsWithRequirementsNotMet.map((field) => field.mapToName);
-        setErrors(ErrorContextProvider_1.ErrorBoundary.MAPPING, errList);
-        // if requires fields are not met, set error fields and return
-        if (fieldsWithRequirementsNotMet === null || fieldsWithRequirementsNotMet === void 0 ? void 0 : fieldsWithRequirementsNotMet.length) {
-            console.error('required fields not met', fieldsWithRequirementsNotMet.map((field) => field.mapToDisplayName));
+        const { requiredMapFields, selectedFieldMappings } = configureState || {};
+        const { errorList } = (0, utils_2.validateFieldMappings)(requiredMapFields, selectedFieldMappings, setErrors);
+        if (errorList.length > 0) {
             return;
         }
         if (installation

package/build/src/components/Configure/fields/{FieldMapping.d.ts → FieldMappings/FieldMapping.d.ts}

@@ -1,8 +1,7 @@
 /// <reference types="react" />
-import { HydratedIntegrationFieldExistent } from '../../../services/api';
-import { ConfigureStateMappingIntegrationField } from '../types';
+import { HydratedIntegrationFieldExistent, IntegrationFieldMapping } from '../../../../services/api';
 interface FieldMappingProps {
-    field: ConfigureStateMappingIntegrationField;
+    field: IntegrationFieldMapping;
     onSelectChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
     allFields: HydratedIntegrationFieldExistent[];
 }

package/build/src/components/Configure/fields/{FieldMapping.js → FieldMappings/FieldMapping.js}

@@ -4,25 +4,26 @@ exports.FieldMapping = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
-const ObjectManagementNav_1 = require("../ObjectManagementNav");
-const ConfigurationStateProvider_1 = require("../state/ConfigurationStateProvider");
-const utils_1 = require("../state/utils");
+const ObjectManagementNav_1 = require("../../ObjectManagementNav");
+const ConfigurationStateProvider_1 = require("../../state/ConfigurationStateProvider");
+const utils_1 = require("../../state/utils");
+const setFieldMapping_1 = require("./setFieldMapping");
 function FieldMapping({ field, onSelectChange, allFields }) {
     const { selectedObjectName } = (0, ObjectManagementNav_1.useSelectedObjectName)();
     const { objectConfigurationsState, setConfigureState } = (0, ConfigurationStateProvider_1.useConfigureState)();
-    const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
     const [disabled, setDisabled] = (0, react_1.useState)(true);
+    const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
+    const { selectedFieldMappings: selectedRequiredMapFields } = configureState || {};
+    const fieldValue = selectedRequiredMapFields === null || selectedRequiredMapFields === void 0 ? void 0 : selectedRequiredMapFields[field.mapToName];
     (0, react_1.useEffect)(() => {
         /* eslint no-underscore-dangle: ["error", { "allow": ["_default"] }] */
-        if (!!field._default && !field.value) {
-            const { isUpdated, newState } = (0, utils_1.setRequiredCustomMapFieldValue)(field.mapToName, field._default, /* eslint no-underscore-dangle: ["error", { "allow": ["_default"] }] */ configureState);
-            if (isUpdated && selectedObjectName) {
-                setConfigureState(selectedObjectName, newState);
-            }
+        if (!!field._default && !fieldValue && selectedObjectName && !!configureState) {
+            // set field mapping default value if no value exists
+            (0, setFieldMapping_1.setFieldMapping)(selectedObjectName, setConfigureState, field.mapToName, field._default);
         }
         setDisabled(false);
-    }, [field, allFields, configureState, setConfigureState, selectedObjectName]);
+    }, [field, setConfigureState, selectedObjectName, fieldValue, configureState]);
     const options = (0, react_1.useMemo)(() => allFields === null || allFields === void 0 ? void 0 : allFields.map((f) => (0, jsx_runtime_1.jsx)("option", { value: f.fieldName, children: f.displayName }, f.fieldName)), [allFields]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Stack, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "500", children: field.mapToDisplayName }), (0, jsx_runtime_1.jsx)(react_2.Text, { marginBottom: "5px", fontSize: 14, children: field === null || field === void 0 ? void 0 : field.prompt }), (0, jsx_runtime_1.jsx)(react_2.Select, { name: field.mapToName, variant: "flushed", value: field.value, onChange: onSelectChange, placeholder: !field.value ? 'Please select one' : undefined, disabled: disabled, children: options })] }, field.mapToName));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Stack, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "500", children: field.mapToDisplayName }), (0, jsx_runtime_1.jsx)(react_2.Text, { marginBottom: "5px", fontSize: 14, children: field === null || field === void 0 ? void 0 : field.prompt }), (0, jsx_runtime_1.jsx)(react_2.Select, { name: field.mapToName, variant: "flushed", value: fieldValue || undefined, onChange: onSelectChange, placeholder: !fieldValue ? 'Please select one' : undefined, disabled: disabled, children: options })] }, field.mapToName));
 }
 exports.FieldMapping = FieldMapping;

package/build/src/components/Configure/fields/{RequiredFieldMappings.js → FieldMappings/RequiredFieldMappings.js}

@@ -4,13 +4,14 @@ exports.RequiredFieldMappings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
-const ErrorContextProvider_1 = require("../../../context/ErrorContextProvider");
-const ObjectManagementNav_1 = require("../ObjectManagementNav");
-const ConfigurationStateProvider_1 = require("../state/ConfigurationStateProvider");
-const utils_1 = require("../state/utils");
-const utils_2 = require("../utils");
-const FieldHeader_1 = require("./FieldHeader");
+const ErrorContextProvider_1 = require("../../../../context/ErrorContextProvider");
+const ObjectManagementNav_1 = require("../../ObjectManagementNav");
+const ConfigurationStateProvider_1 = require("../../state/ConfigurationStateProvider");
+const utils_1 = require("../../state/utils");
+const utils_2 = require("../../utils");
+const FieldHeader_1 = require("../FieldHeader");
 const FieldMapping_1 = require("./FieldMapping");
+const setFieldMapping_1 = require("./setFieldMapping");
 function RequiredFieldMappings() {
     const { selectedObjectName } = (0, ObjectManagementNav_1.useSelectedObjectName)();
     const { objectConfigurationsState, setConfigureState } = (0, ConfigurationStateProvider_1.useConfigureState)();
@@ -22,9 +23,8 @@ function RequiredFieldMappings() {
             // if place holder value is chosen, we don't change state
             return;
         }
-        const { isUpdated, newState } = (0, utils_1.setRequiredCustomMapFieldValue)(name, value, configureState);
-        if (isUpdated && selectedObjectName) {
-            setConfigureState(selectedObjectName, newState);
+        if (selectedObjectName) {
+            (0, setFieldMapping_1.setFieldMapping)(selectedObjectName, setConfigureState, name, value);
         }
         if (isError(ErrorContextProvider_1.ErrorBoundary.MAPPING, name)) {
             removeError(ErrorContextProvider_1.ErrorBoundary.MAPPING, name);

package/build/src/components/Configure/fields/FieldMappings/index.d.ts

@@ -0,0 +1,3 @@
+import { FieldMapping } from './FieldMapping';
+import { RequiredFieldMappings } from './RequiredFieldMappings';
+export { FieldMapping, RequiredFieldMappings };

package/build/src/components/Configure/fields/FieldMappings/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RequiredFieldMappings = exports.FieldMapping = void 0;
+const FieldMapping_1 = require("./FieldMapping");
+Object.defineProperty(exports, "FieldMapping", { enumerable: true, get: function () { return FieldMapping_1.FieldMapping; } });
+const RequiredFieldMappings_1 = require("./RequiredFieldMappings");
+Object.defineProperty(exports, "RequiredFieldMappings", { enumerable: true, get: function () { return RequiredFieldMappings_1.RequiredFieldMappings; } });

package/build/src/components/Configure/fields/FieldMappings/setFieldMapping.d.ts

@@ -0,0 +1,3 @@
+import { Draft } from 'immer';
+import { ConfigureState } from '../../types';
+export declare function setFieldMapping(selectedObjectName: string, setConfigureState: (objectName: string, producer: (draft: Draft<ConfigureState>) => void) => void, fieldKey: string, newValue: string): void;

package/build/src/components/Configure/fields/FieldMappings/setFieldMapping.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFieldMapping = void 0;
+const utils_1 = require("../../state/utils");
+function setFieldMappingProducer(draft, fieldKey, newValue) {
+    const draftRequiredMapFields = (draft === null || draft === void 0 ? void 0 : draft.selectedFieldMappings) || {};
+    draftRequiredMapFields[fieldKey] = newValue;
+    const savedFields = draft.savedConfig.requiredMapFields;
+    const updatedFields = draftRequiredMapFields;
+    const isModified = !(0, utils_1.isFieldObjectEqual)(savedFields, updatedFields);
+    // immer exception if we try to set a value
+    // eslint-disable-next-line no-param-reassign
+    draft.isRequiredMapFieldsModified = isModified;
+}
+function setFieldMapping(selectedObjectName, setConfigureState, fieldKey, newValue) {
+    setConfigureState(selectedObjectName, (draft) => setFieldMappingProducer(draft, fieldKey, newValue));
+}
+exports.setFieldMapping = setFieldMapping;

package/build/src/components/Configure/fields/{OptionalFields.js → OptionalFields/OptionalFields.js}

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionalFields = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-const ProjectContext_1 = require("../../../context/ProjectContext");
-const ObjectManagementNav_1 = require("../ObjectManagementNav");
-const ConfigurationStateProvider_1 = require("../state/ConfigurationStateProvider");
-const utils_1 = require("../state/utils");
-const utils_2 = require("../utils");
-const FieldHeader_1 = require("./FieldHeader");
+const ProjectContext_1 = require("../../../../context/ProjectContext");
+const ObjectManagementNav_1 = require("../../ObjectManagementNav");
+const ConfigurationStateProvider_1 = require("../../state/ConfigurationStateProvider");
+const utils_1 = require("../../state/utils");
+const utils_2 = require("../../utils");
+const FieldHeader_1 = require("../FieldHeader");
+const setOptionalField_1 = require("./setOptionalField");
 function OptionalFields() {
     var _a;
     const { appName } = (0, ProjectContext_1.useProject)();
@@ -17,21 +18,9 @@ function OptionalFields() {
     const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
     const { selectedOptionalFields } = configureState || {};
     const onCheckboxChange = (e) => {
-        var _a;
         const { name, checked } = e.target;
         if (selectedObjectName && configureState) {
-            // Update the value property to new checked value
-            const updatedSelectOptionalFields = Object.assign(Object.assign({}, selectedOptionalFields), { [name]: checked });
-            // removed from check fields if not checked
-            if (!checked) {
-                delete updatedSelectOptionalFields[name];
-            }
-            // Compare saved fields from updated fields
-            const savedOptionalFields = (_a = configureState.savedConfig) === null || _a === void 0 ? void 0 : _a.optionalFields;
-            // Check if the optionalFields are modified
-            const isModified = !(0, utils_1.checkFieldsEquality)(savedOptionalFields, updatedSelectOptionalFields);
-            // update state
-            setConfigureState(selectedObjectName, Object.assign(Object.assign({}, configureState), { selectedOptionalFields: updatedSelectOptionalFields, isOptionalFieldsModified: isModified }));
+            (0, setOptionalField_1.setOptionalField)(selectedObjectName, setConfigureState, name, checked);
         }
     };
     const shouldRender = !!((configureState === null || configureState === void 0 ? void 0 : configureState.optionalFields) && (configureState === null || configureState === void 0 ? void 0 : configureState.optionalFields));

package/build/src/components/Configure/fields/OptionalFields/index.d.ts

@@ -0,0 +1,2 @@
+import { OptionalFields } from './OptionalFields';
+export { OptionalFields };

package/build/src/components/Configure/fields/OptionalFields/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionalFields = void 0;
+const OptionalFields_1 = require("./OptionalFields");
+Object.defineProperty(exports, "OptionalFields", { enumerable: true, get: function () { return OptionalFields_1.OptionalFields; } });

package/build/src/components/Configure/fields/OptionalFields/setOptionalField.d.ts

@@ -0,0 +1,3 @@
+import { Draft } from 'immer';
+import { ConfigureState } from '../../types';
+export declare function setOptionalField(selectedObjectName: string, setConfigureState: (objectName: string, producer: (draft: Draft<ConfigureState>) => void) => void, fieldKey: string, checked: boolean): void;

package/build/src/components/Configure/fields/OptionalFields/setOptionalField.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setOptionalField = void 0;
+const utils_1 = require("../../state/utils");
+function setOptionalFieldProducer(draft, fieldKey, checked) {
+    const draftSelectedOptionalFields = (draft === null || draft === void 0 ? void 0 : draft.selectedOptionalFields) || {};
+    draftSelectedOptionalFields[fieldKey] = checked;
+    if (!checked) {
+        delete draftSelectedOptionalFields[fieldKey];
+    }
+    const savedFields = draft.savedConfig.optionalFields;
+    const updatedFields = draftSelectedOptionalFields;
+    const isModified = !(0, utils_1.isFieldObjectEqual)(savedFields, updatedFields);
+    // immer exception if we try to set a value
+    // eslint-disable-next-line no-param-reassign
+    draft.isOptionalFieldsModified = isModified;
+}
+function setOptionalField(selectedObjectName, setConfigureState, fieldKey, checked) {
+    setConfigureState(selectedObjectName, (draft) => setOptionalFieldProducer(draft, fieldKey, checked));
+}
+exports.setOptionalField = setOptionalField;

package/build/src/components/Configure/state/ConfigurationStateProvider.d.ts

@@ -3,7 +3,53 @@ import { ConfigureState, ObjectConfigurationsState } from '../types';
 export declare function useConfigureState(): {
     objectConfigurationsState: ObjectConfigurationsState;
     setObjectConfigurationsState: React.Dispatch<React.SetStateAction<ObjectConfigurationsState>>;
-    setConfigureState: (objectName: string, configureState: ConfigureState) => void;
+    setConfigureState: (objectName: string, producer: (draft: {
+        allFields: {
+            fieldName: string;
+            displayName: string;
+        }[] | null;
+        requiredFields: ({
+            fieldName: string;
+            displayName: string;
+        } | {
+            mapToName: string;
+            mapToDisplayName?: string | undefined;
+            _default?: string | undefined;
+            prompt?: string | undefined;
+        })[] | null;
+        optionalFields: ({
+            fieldName: string;
+            displayName: string;
+        } | {
+            mapToName: string;
+            mapToDisplayName?: string | undefined;
+            _default?: string | undefined;
+            prompt?: string | undefined;
+        })[] | null;
+        requiredMapFields: {
+            mapToName: string;
+            mapToDisplayName?: string | undefined;
+            _default?: string | undefined;
+            prompt?: string | undefined;
+        }[] | null;
+        selectedOptionalFields: {
+            [x: string]: boolean;
+        } | null;
+        selectedFieldMappings: {
+            [x: string]: string | undefined;
+        } | null;
+        isOptionalFieldsModified: boolean;
+        isRequiredMapFieldsModified: boolean;
+        savedConfig: {
+            optionalFields: {
+                [x: string]: boolean;
+            };
+            requiredMapFields: {
+                [x: string]: string | undefined;
+            };
+        };
+    }) => void) => void;
+    resetConfigureState: (objectName: string, configureState: ConfigureState) => void;
     resetPendingConfigurationState: (objectName: string) => void;
 };
 type ConfigurationProviderProps = {