@amp-labs/react 1.1.0 → 1.2.0

package/build/src/components/Configure/actions/write/onSaveWriteUpdateInstallation.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onSaveWriteUpdateInstallation = void 0;
+const api_1 = require("../../../../services/api");
+const generateConfigWriteObjects_1 = require("./generateConfigWriteObjects");
+/**
+   * given a configureState generate the config object that is need for
+   * update installation request.
+   *
+   * @param configureState
+   * @returns
+   */
+const generateUpdateWriteConfigFromConfigureState = (configureState) => {
+    const configWriteObjects = (0, generateConfigWriteObjects_1.generateConfigWriteObjects)(configureState);
+    // config request object type needs to be fixed
+    const updateConfigObject = {
+        content: {
+            write: {
+                objects: configWriteObjects,
+            },
+        },
+    };
+    return updateConfigObject;
+};
+const onSaveWriteUpdateInstallation = (projectId, integrationId, installationId, apiKey, configureState, setInstallation, onUpdateSuccess) => {
+    // get configuration state
+    // transform configuration state to update shape
+    const updateConfig = generateUpdateWriteConfigFromConfigureState(configureState);
+    if (!updateConfig) {
+        console.error('Error when generating write updateConfig from configureState');
+        return Promise.resolve(null);
+    }
+    const updateInstallationRequest = {
+        projectId,
+        installationId,
+        integrationId,
+        installationUpdate: {
+            // update mask will recurse to the object path and replace the object at the object path
+            // this example will replace the object at the object (i.e. accounts)
+            updateMask: ['config.content.write.objects'],
+            installation: {
+                config: updateConfig,
+            },
+        },
+    };
+    // call api.updateInstallation
+    return (0, api_1.api)().installationApi.updateInstallation(updateInstallationRequest, {
+        headers: {
+            'X-Api-Key': apiKey,
+            'Content-Type': 'application/json',
+        },
+    }).then((installation) => {
+        // update local installation state
+        setInstallation(installation);
+        onUpdateSuccess === null || onUpdateSuccess === void 0 ? void 0 : onUpdateSuccess(installation.id, installation.config);
+    }).catch((err) => {
+        console.error('ERROR: ', err);
+    });
+};
+exports.onSaveWriteUpdateInstallation = onSaveWriteUpdateInstallation;

package/build/src/components/Configure/{ConfigureInstallationBase.d.ts → content/ConfigureInstallationBase.d.ts}

@@ -1,8 +1,9 @@
 import { FormEventHandler } from 'react';
 interface ConfigureInstallationBaseProps {
+    isCreateMode?: boolean;
     onSave: FormEventHandler;
     onReset: () => void;
     isLoading: boolean;
 }
-export declare function ConfigureInstallationBase({ onSave, onReset, isLoading }: ConfigureInstallationBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConfigureInstallationBase({ onSave, onReset, isLoading, isCreateMode, }: ConfigureInstallationBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/src/components/Configure/content/ConfigureInstallationBase.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigureInstallationBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const LoadingIcon_1 = require("../../../assets/LoadingIcon");
+const constant_1 = require("../nav/ObjectManagementNav/constant");
+const UninstallInstallation_1 = require("../nav/ObjectManagementNav/UninstallInstallation");
+const HydratedRevisionContext_1 = require("../state/HydratedRevisionContext");
+const ReadFields_1 = require("./fields/ReadFields");
+const WriteFields_1 = require("./fields/WriteFields");
+const UninstallContent_1 = require("./UninstallContent");
+const useSelectedConfigureState_1 = require("./useSelectedConfigureState");
+// Installation UI Base
+function ConfigureInstallationBase({ onSave, onReset, isLoading, isCreateMode = false, }) {
+    var _a, _b, _c;
+    const { hydratedRevision, loading } = (0, HydratedRevisionContext_1.useHydratedRevision)();
+    const { configureState, selectedObjectName } = (0, useSelectedConfigureState_1.useSelectedConfigureState)();
+    // has the form been modified?
+    const isReadModified = ((_a = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _a === void 0 ? void 0 : _a.isOptionalFieldsModified)
+        || ((_b = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _b === void 0 ? void 0 : _b.isRequiredMapFieldsModified);
+    const isWriteModified = (_c = configureState === null || configureState === void 0 ? void 0 : configureState.write) === null || _c === void 0 ? void 0 : _c.isWriteModified;
+    const isModified = isReadModified || isWriteModified;
+    // is this a new state (modified or creating a new state)
+    const isStateNew = isModified || isCreateMode;
+    // should the save button be disabled?
+    const isDisabled = loading || isLoading || !configureState || !selectedObjectName
+        || !isStateNew;
+    // is other selected?
+    const isNonConfigurableWrite = selectedObjectName === constant_1.OTHER_CONST;
+    // is the form in the uninstall case?
+    const isUninstall = selectedObjectName === UninstallInstallation_1.UNINSTALL_INSTALLATION_CONST;
+    return (isLoading ? (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, {})
+        : ((0, jsx_runtime_1.jsxs)("form", { style: { width: '100%', maxWidth: '50rem' }, onSubmit: onSave, children: [(0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", spacing: 4, marginBottom: "20px", flexDir: "row-reverse", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { backgroundColor: "gray.800", _hover: { backgroundColor: 'gray.600' }, type: "submit", isDisabled: isDisabled, children: isCreateMode ? 'Install' : 'Save' }), (0, jsx_runtime_1.jsx)(react_1.Button, { backgroundColor: "gray.200", color: "blackAlpha.700", _hover: { backgroundColor: 'gray.300' }, isDisabled: isDisabled, onClick: onReset, children: "Reset" })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { p: 8, width: "100%", border: "1px solid #EFEFEF", borderRadius: 8, boxShadow: "md", textAlign: ['left'], margin: "auto", bgColor: "white", maxHeight: "100%", overflowY: "scroll", children: [loading && (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, {}), hydratedRevision && !isUninstall && !isNonConfigurableWrite && (0, jsx_runtime_1.jsx)(ReadFields_1.ReadFields, {}), hydratedRevision && !isUninstall && isNonConfigurableWrite && (0, jsx_runtime_1.jsx)(WriteFields_1.WriteFields, {}), !loading && isUninstall && (0, jsx_runtime_1.jsx)(UninstallContent_1.UninstallContent, {})] })] })));
+}
+exports.ConfigureInstallationBase = ConfigureInstallationBase;

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateInstallation = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * this page is wip: untested
+ */
+const react_1 = require("react");
+const ErrorContextProvider_1 = require("../../../context/ErrorContextProvider");
+const onSaveReadCreateInstallation_1 = require("../actions/onSaveReadCreateInstallation");
+const onSaveWriteCreateInstallation_1 = require("../actions/write/onSaveWriteCreateInstallation");
+const constant_1 = require("../nav/ObjectManagementNav/constant");
+const utils_1 = require("../state/utils");
+const utils_2 = require("../utils");
+const ConfigureInstallationBase_1 = require("./ConfigureInstallationBase");
+const useMutateInstallation_1 = require("./useMutateInstallation");
+// the config should be undefined for create flow
+const UNDEFINED_CONFIG = undefined;
+//  Create Installation Flow
+function CreateInstallation() {
+    const { integrationId, groupRef, consumerRef, setInstallation, hydratedRevision, loading, selectedObjectName, selectedConnection, apiKey, projectId, resetBoundary, setErrors, resetConfigureState, objectConfigurationsState, resetPendingConfigurationState, configureState, onInstallSuccess, } = (0, useMutateInstallation_1.useMutateInstallation)();
+    const [isLoading, setLoadingState] = (0, react_1.useState)(false);
+    // is other selected?
+    const isOtherSelected = selectedObjectName === constant_1.OTHER_CONST;
+    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.setHydrateConfigState)(hydratedRevision, UNDEFINED_CONFIG, selectedObjectName, resetConfigureState);
+        }
+    }, [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) {
+            resetState();
+        }
+    }, [configureState, objectConfigurationsState, hydratedRevision, loading, resetState]);
+    const onSaveRead = () => {
+        // check if fields with requirements are met
+        const { requiredMapFields, selectedFieldMappings } = (configureState === null || configureState === void 0 ? void 0 : configureState.read) || {};
+        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);
+            const res = (0, onSaveReadCreateInstallation_1.onSaveReadCreateInstallation)(projectId, integrationId, groupRef, consumerRef, selectedConnection.id, selectedObjectName, apiKey, hydratedRevision, configureState, setInstallation, onInstallSuccess);
+            res.finally(() => {
+                setLoadingState(false);
+                resetPendingConfigurationState(selectedObjectName);
+            });
+        }
+        else {
+            console.error('CreateInstallallation - onSaveReadCreate: missing required props');
+        }
+    };
+    const onSaveWrite = () => {
+        // check if fields with requirements are met
+        if (selectedObjectName && (selectedConnection === null || selectedConnection === void 0 ? void 0 : selectedConnection.id) && apiKey && projectId
+            && integrationId && groupRef && consumerRef && hydratedRevision) {
+            setLoadingState(true);
+            const res = (0, onSaveWriteCreateInstallation_1.onSaveWriteCreateInstallation)(projectId, integrationId, groupRef, consumerRef, selectedConnection.id, apiKey, hydratedRevision, configureState, setInstallation, onInstallSuccess);
+            res.finally(() => {
+                setLoadingState(false);
+                resetPendingConfigurationState(selectedObjectName); // reset write pending/isModified state
+            });
+        }
+        else {
+            console.error('CreateInstallallation - onSaveWriteCreate: missing required props');
+        }
+    };
+    const onSave = (e) => {
+        e.preventDefault();
+        if (!isOtherSelected) {
+            onSaveRead();
+        }
+        else {
+            onSaveWrite();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(ConfigureInstallationBase_1.ConfigureInstallationBase, { isCreateMode: true, isLoading: isLoading, onSave: onSave, onReset: resetState }));
+}
+exports.CreateInstallation = CreateInstallation;

package/build/src/components/Configure/content/InstallationContent.d.ts

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

package/build/src/components/Configure/content/InstallationContent.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InstallationContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InstallIntegrationContextProvider_1 = require("../../../context/InstallIntegrationContextProvider");
+const ErrorTextBox_1 = require("../../ErrorTextBox");
+const CreateInstallation_1 = require("./CreateInstallation");
+const UpdateInstallation_1 = require("./UpdateInstallation");
+function InstallationContent() {
+    const { integrationObj, installation } = (0, InstallIntegrationContextProvider_1.useInstallIntegrationProps)();
+    if (!integrationObj) {
+        return (0, jsx_runtime_1.jsx)(ErrorTextBox_1.ErrorTextBox, { message: "We can't load the integration" });
+    }
+    return installation && integrationObj ? (
+    // If installation exists, render update installation flow
+    (0, jsx_runtime_1.jsx)(UpdateInstallation_1.UpdateInstallation, { installation: installation, integrationObj: integrationObj })) : (
+    // No installation, render create installation flow
+    (0, jsx_runtime_1.jsx)(CreateInstallation_1.CreateInstallation, {}));
+}
+exports.InstallationContent = InstallationContent;

package/build/src/components/Configure/{UninstallContent.js → content/UninstallContent.js}

@@ -4,14 +4,14 @@ 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 ApiKeyProvider_1 = require("../../context/ApiKeyProvider");
-const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
-const ProjectContext_1 = require("../../context/ProjectContext");
-const api_1 = require("../../services/api");
+const ApiKeyContextProvider_1 = require("../../../context/ApiKeyContextProvider");
+const InstallIntegrationContextProvider_1 = require("../../../context/InstallIntegrationContextProvider");
+const ProjectContextProvider_1 = require("../../../context/ProjectContextProvider");
+const api_1 = require("../../../services/api");
 function UninstallContent() {
-    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
-    const { projectId, appName } = (0, ProjectContext_1.useProject)();
-    const { integrationId, installation, resetInstallations } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
+    const { projectId, appName } = (0, ProjectContextProvider_1.useProject)();
+    const { integrationId, installation, resetInstallations } = (0, InstallIntegrationContextProvider_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 () => {
@@ -19,7 +19,7 @@ function UninstallContent() {
             setLoading(true);
             console.warn('uninstalling installation', { projectId, integrationId, installationId: installation.id });
             try {
-                await (0, api_1.api)().deleteInstallation({ projectId, integrationId, installationId: installation.id }, {
+                await (0, api_1.api)().installationApi.deleteInstallation({ projectId, integrationId, installationId: installation.id }, {
                     headers: {
                         'X-Api-Key': apiKey,
                         'Content-Type': 'application/json',
@@ -37,7 +37,8 @@ function UninstallContent() {
         }
     };
     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.`
+    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 }))] }));
 }

package/build/src/components/Configure/{UpdateInstallation.d.ts → content/UpdateInstallation.d.ts}

@@ -1,4 +1,4 @@
-import { Installation, Integration } from '../../services/api';
+import { Installation, Integration } from '../../../services/api';
 interface UpdateInstallationProps {
     installation: Installation;
     integrationObj: Integration;

package/build/src/components/Configure/{UpdateInstallation.js → content/UpdateInstallation.js}

@@ -3,33 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UpdateInstallation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const ApiKeyProvider_1 = require("../../context/ApiKeyProvider");
-const ErrorContextProvider_1 = require("../../context/ErrorContextProvider");
-const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
-const ProjectContext_1 = require("../../context/ProjectContext");
-const onSaveUpdate_1 = require("./actions/onSaveUpdate");
-const ConfigurationStateProvider_1 = require("./state/ConfigurationStateProvider");
-const HydratedRevisionContext_1 = require("./state/HydratedRevisionContext");
-const utils_1 = require("./state/utils");
+const ErrorContextProvider_1 = require("../../../context/ErrorContextProvider");
+const onSaveReadUpdateInstallation_1 = require("../actions/onSaveReadUpdateInstallation");
+const onSaveWriteUpdateInstallation_1 = require("../actions/write/onSaveWriteUpdateInstallation");
+const constant_1 = require("../nav/ObjectManagementNav/constant");
+const utils_1 = require("../state/utils");
+const utils_2 = require("../utils");
 const ConfigureInstallationBase_1 = require("./ConfigureInstallationBase");
-const ObjectManagementNav_1 = require("./ObjectManagementNav");
-const utils_2 = require("./utils");
+const useMutateInstallation_1 = require("./useMutateInstallation");
 //  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 { projectId } = (0, ProjectContext_1.useProject)();
+    const { setInstallation, hydratedRevision, loading, selectedObjectName, apiKey, projectId, resetBoundary, setErrors, resetConfigureState, resetPendingConfigurationState, configureState, onUpdateSuccess, } = (0, useMutateInstallation_1.useMutateInstallation)();
     const [isLoading, setLoadingState] = (0, react_1.useState)(false);
+    // is other selected?
+    const isOtherSelected = selectedObjectName === constant_1.OTHER_CONST;
     // when no installation or config exists, render create flow
     const { config } = installation;
     // 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 { 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
@@ -42,33 +34,55 @@ function UpdateInstallation({ installation, integrationObj }) {
             resetState();
         }
     }, [configureState, resetState]);
+    // reset state when installation (i.e. config) is reloaded.
+    (0, react_1.useEffect)(() => {
+        if (installation)
+            resetState();
+    }, [installation, resetState]);
     const hydratedObject = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         const hydrated = (_c = (_b = (_a = hydratedRevision === null || hydratedRevision === void 0 ? void 0 : hydratedRevision.content) === null || _a === void 0 ? void 0 : _a.read) === null || _b === void 0 ? void 0 : _b.standardObjects) === null || _c === void 0 ? void 0 : _c.find((obj) => (obj === null || obj === void 0 ? void 0 : obj.objectName) === selectedObjectName);
         return hydrated;
     }, [hydratedRevision, selectedObjectName]);
-    const onSave = (e) => {
-        e.preventDefault();
+    const onSaveRead = () => {
         // check if fields with requirements are met
-        const { requiredMapFields, selectedFieldMappings } = configureState || {};
+        const { requiredMapFields, selectedFieldMappings } = (configureState === null || configureState === void 0 ? void 0 : configureState.read) || {};
         const { errorList } = (0, utils_2.validateFieldMappings)(requiredMapFields, selectedFieldMappings, setErrors);
         if (errorList.length > 0) {
             return;
         }
-        if (installation
-            && selectedObjectName
-            && apiKey
-            && projectId
-            && hydratedObject) {
+        if (installation && selectedObjectName && apiKey && projectId && hydratedObject) {
             setLoadingState(true);
-            const res = (0, onSaveUpdate_1.onSaveUpdate)(projectId, integrationObj.id, installation.id, selectedObjectName, apiKey, configureState, setInstallation, hydratedObject);
+            const res = (0, onSaveReadUpdateInstallation_1.onSaveReadUpdateInstallation)(projectId, integrationObj.id, installation.id, selectedObjectName, apiKey, configureState, setInstallation, hydratedObject, onUpdateSuccess);
             res.finally(() => {
                 setLoadingState(false);
                 resetPendingConfigurationState(selectedObjectName);
             });
         }
         else {
-            console.error('update installation props missing');
+            console.error('UpdateInstallation - onSaveUpdate missing required props');
+        }
+    };
+    const onSaveWrite = () => {
+        if (installation && selectedObjectName && apiKey && projectId) {
+            setLoadingState(true);
+            const res = (0, onSaveWriteUpdateInstallation_1.onSaveWriteUpdateInstallation)(projectId, integrationObj.id, installation.id, apiKey, configureState, setInstallation, onUpdateSuccess);
+            res.finally(() => {
+                setLoadingState(false);
+                resetPendingConfigurationState(selectedObjectName);
+            });
+        }
+        else {
+            console.error('UpdateInstallation - onSaveUpdate missing required props');
+        }
+    };
+    const onSave = (e) => {
+        e.preventDefault();
+        if (!isOtherSelected) {
+            onSaveRead();
+        }
+        else {
+            onSaveWrite();
         }
     };
     return ((0, jsx_runtime_1.jsx)(ConfigureInstallationBase_1.ConfigureInstallationBase, { onSave: onSave, onReset: resetState, isLoading: isLoading }));

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

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

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

@@ -4,16 +4,13 @@ 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 useSelectedConfigureState_1 = require("../../useSelectedConfigureState");
 const setFieldMapping_1 = require("./setFieldMapping");
 function FieldMapping({ field, onSelectChange, allFields }) {
-    const { selectedObjectName } = (0, ObjectManagementNav_1.useSelectedObjectName)();
-    const { objectConfigurationsState, setConfigureState } = (0, ConfigurationStateProvider_1.useConfigureState)();
+    var _a;
+    const { configureState, selectedObjectName, setConfigureState } = (0, useSelectedConfigureState_1.useSelectedConfigureState)();
     const [disabled, setDisabled] = (0, react_1.useState)(true);
-    const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
-    const { selectedFieldMappings: selectedRequiredMapFields } = configureState || {};
+    const selectedRequiredMapFields = (_a = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _a === void 0 ? void 0 : _a.selectedFieldMappings;
     const fieldValue = selectedRequiredMapFields === null || selectedRequiredMapFields === void 0 ? void 0 : selectedRequiredMapFields[field.mapToName];
     (0, react_1.useEffect)(() => {
         /* eslint no-underscore-dangle: ["error", { "allow": ["_default"] }] */

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

@@ -4,18 +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 ErrorContextProvider_1 = require("../../../../../context/ErrorContextProvider");
+const utils_1 = require("../../../utils");
+const useSelectedConfigureState_1 = require("../../useSelectedConfigureState");
 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)();
-    const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
+    const { selectedObjectName, configureState, setConfigureState } = (0, useSelectedConfigureState_1.useSelectedConfigureState)();
     const { isError, removeError } = (0, ErrorContextProvider_1.useErrorState)();
     const onSelectChange = (e) => {
         const { value, name } = e.target;
@@ -31,10 +27,13 @@ function RequiredFieldMappings() {
         }
     };
     const integrationFieldMappings = (0, react_1.useMemo)(() => {
-        var _a;
-        return ((_a = configureState === null || configureState === void 0 ? void 0 : configureState.requiredMapFields) === null || _a === void 0 ? void 0 : _a.filter(utils_2.isIntegrationFieldMapping)) || [];
+        var _a, _b;
+        return ((_b = (_a = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _a === void 0 ? void 0 : _a.requiredMapFields) === null || _b === void 0 ? void 0 : _b.filter(utils_1.isIntegrationFieldMapping)) || [];
     }, [configureState]);
-    return (integrationFieldMappings.length ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { string: "Map the following fields (required)" }), (0, jsx_runtime_1.jsx)(react_2.Stack, { children: integrationFieldMappings.map((field) => ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: isError(ErrorContextProvider_1.ErrorBoundary.MAPPING, field.mapToName), children: [(0, jsx_runtime_1.jsx)(FieldMapping_1.FieldMapping, { allFields: configureState.allFields || [], field: field, onSelectChange: onSelectChange }), (0, jsx_runtime_1.jsx)(react_2.FormErrorMessage, { children: " * required" })] }, field.mapToName))) })] }))
+    return (integrationFieldMappings.length ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { string: "Map the following fields (required)" }), (0, jsx_runtime_1.jsx)(react_2.Stack, { children: integrationFieldMappings.map((field) => {
+                    var _a;
+                    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: isError(ErrorContextProvider_1.ErrorBoundary.MAPPING, field.mapToName), children: [(0, jsx_runtime_1.jsx)(FieldMapping_1.FieldMapping, { allFields: ((_a = configureState.read) === null || _a === void 0 ? void 0 : _a.allFields) || [], field: field, onSelectChange: onSelectChange }), (0, jsx_runtime_1.jsx)(react_2.FormErrorMessage, { children: " * required" })] }, field.mapToName));
+                }) })] }))
         : null);
 }
 exports.RequiredFieldMappings = RequiredFieldMappings;

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

@@ -1,3 +1,3 @@
 import { Draft } from 'immer';
-import { ConfigureState } from '../../types';
+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/content/fields/FieldMappings/setFieldMapping.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFieldMapping = void 0;
+const utils_1 = require("../../../state/utils");
+function setFieldMappingProducer(draft, fieldKey, newValue) {
+    var _a;
+    const draftRequiredMapFields = ((_a = draft === null || draft === void 0 ? void 0 : draft.read) === null || _a === void 0 ? void 0 : _a.selectedFieldMappings) || {};
+    draftRequiredMapFields[fieldKey] = newValue;
+    if (draft === null || draft === void 0 ? void 0 : draft.read) {
+        const savedFields = draft.read.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.read.isRequiredMapFieldsModified = isModified;
+    }
+}
+function setFieldMapping(selectedObjectName, setConfigureState, fieldKey, newValue) {
+    setConfigureState(selectedObjectName, (draft) => setFieldMappingProducer(draft, fieldKey, newValue));
+}
+exports.setFieldMapping = setFieldMapping;

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

@@ -3,29 +3,24 @@ 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 utils_1 = require("../../../utils");
+const useSelectedConfigureState_1 = require("../../useSelectedConfigureState");
 const FieldHeader_1 = require("../FieldHeader");
 const setOptionalField_1 = require("./setOptionalField");
 function OptionalFields() {
-    var _a;
-    const { appName } = (0, ProjectContext_1.useProject)();
-    const { objectConfigurationsState, setConfigureState } = (0, ConfigurationStateProvider_1.useConfigureState)();
-    const { selectedObjectName } = (0, ObjectManagementNav_1.useSelectedObjectName)();
-    const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
-    const { selectedOptionalFields } = configureState || {};
+    var _a, _b, _c, _d, _e;
+    const { appName, configureState, setConfigureState, selectedObjectName, } = (0, useSelectedConfigureState_1.useSelectedConfigureState)();
+    const selectedOptionalFields = (_a = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _a === void 0 ? void 0 : _a.selectedOptionalFields;
     const onCheckboxChange = (e) => {
         const { name, checked } = e.target;
         if (selectedObjectName && configureState) {
             (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));
-    return (shouldRender && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { string: `${appName} reads the following optional fields` }), (0, jsx_runtime_1.jsx)(react_1.Stack, { marginBottom: 10, height: 300, overflowY: "scroll", border: "2px solid #EFEFEF", borderRadius: 8, padding: 4, children: (_a = configureState === null || configureState === void 0 ? void 0 : configureState.optionalFields) === null || _a === void 0 ? void 0 : _a.map((field) => {
-                    if (!(0, utils_2.isIntegrationFieldMapping)(field)) {
+    const shouldRender = !!(((_b = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _b === void 0 ? void 0 : _b.optionalFields)
+        && ((_c = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _c === void 0 ? void 0 : _c.optionalFields));
+    return (shouldRender && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { string: `${appName} reads the following optional fields` }), (0, jsx_runtime_1.jsx)(react_1.Stack, { marginBottom: 10, height: 300, overflowY: "scroll", border: "2px solid #EFEFEF", borderRadius: 8, padding: 4, children: (_e = (_d = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _d === void 0 ? void 0 : _d.optionalFields) === null || _e === void 0 ? void 0 : _e.map((field) => {
+                    if (!(0, utils_1.isIntegrationFieldMapping)(field)) {
                         return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", gap: "5px", borderBottom: "1px", borderColor: "gray.100", children: (0, jsx_runtime_1.jsx)(react_1.Checkbox, { name: field.fieldName, id: field.fieldName, isChecked: !!(selectedOptionalFields === null || selectedOptionalFields === void 0 ? void 0 : selectedOptionalFields[field === null || field === void 0 ? void 0 : field.fieldName]), onChange: onCheckboxChange, children: field.displayName }) }, field.fieldName));
                     }
                     return null; // fallback for customed mapped fields

package/build/src/components/Configure/{fields → content/fields}/OptionalFields/setOptionalField.d.ts

@@ -1,3 +1,3 @@
 import { Draft } from 'immer';
-import { ConfigureState } from '../../types';
+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/content/fields/OptionalFields/setOptionalField.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setOptionalField = void 0;
+const utils_1 = require("../../../state/utils");
+function setOptionalFieldProducer(draft, fieldKey, checked) {
+    var _a, _b;
+    const draftSelectedOptionalFields = ((_a = draft === null || draft === void 0 ? void 0 : draft.read) === null || _a === void 0 ? void 0 : _a.selectedOptionalFields) || {};
+    draftSelectedOptionalFields[fieldKey] = checked;
+    if (!checked) {
+        delete draftSelectedOptionalFields[fieldKey];
+    }
+    if ((_b = draft.read) === null || _b === void 0 ? void 0 : _b.savedConfig.optionalFields) {
+        const savedFields = draft.read.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.read.isOptionalFieldsModified = isModified;
+    }
+    else {
+        console.warn('read.savedConfig.optionalFields is undefined');
+    }
+}
+function setOptionalField(selectedObjectName, setConfigureState, fieldKey, checked) {
+    setConfigureState(selectedObjectName, (draft) => setOptionalFieldProducer(draft, fieldKey, checked));
+}
+exports.setOptionalField = setOptionalField;

package/build/src/components/Configure/content/fields/ReadFields.d.ts

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

package/build/src/components/Configure/content/fields/ReadFields.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReadFields = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FieldMappings_1 = require("./FieldMappings");
+const OptionalFields_1 = require("./OptionalFields");
+const RequiredFields_1 = require("./RequiredFields");
+function ReadFields() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(RequiredFields_1.RequiredFields, {}), (0, jsx_runtime_1.jsx)(FieldMappings_1.RequiredFieldMappings, {}), (0, jsx_runtime_1.jsx)(OptionalFields_1.OptionalFields, {})] }));
+}
+exports.ReadFields = ReadFields;

package/build/src/components/Configure/content/fields/RequiredFields.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RequiredFields = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const ProjectContextProvider_1 = require("../../../../context/ProjectContextProvider");
+const utils_1 = require("../../utils");
+const useSelectedConfigureState_1 = require("../useSelectedConfigureState");
+const FieldHeader_1 = require("./FieldHeader");
+function RequiredFields() {
+    var _a, _b, _c;
+    const { configureState, selectedObjectName } = (0, useSelectedConfigureState_1.useSelectedConfigureState)();
+    const { appName } = (0, ProjectContextProvider_1.useProject)();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { string: `${appName} reads the following ${selectedObjectName} fields` }), (0, jsx_runtime_1.jsx)(react_1.Box, { marginBottom: "20px", children: ((_b = (_a = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _a === void 0 ? void 0 : _a.requiredFields) === null || _b === void 0 ? void 0 : _b.length)
+                    ? ((_c = configureState.read) === null || _c === void 0 ? void 0 : _c.requiredFields.map((field) => {
+                        if (!(0, utils_1.isIntegrationFieldMapping)(field)) {
+                            return (0, jsx_runtime_1.jsx)(react_1.Tag, { children: field.displayName }, field.fieldName);
+                        }
+                        return null; // fallback for customed mapped fields
+                    }))
+                    : 'There are no required fields.' })] }));
+}
+exports.RequiredFields = RequiredFields;

package/build/src/components/Configure/content/fields/WriteFields/WriteFields.d.ts

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