@amp-labs/react 1.0.0

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

@@ -0,0 +1,73 @@
+"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 ApiKeyContext_1 = require("../../context/ApiKeyContext");
+const ConnectionsContext_1 = require("../../context/ConnectionsContext");
+const ErrorContextProvider_1 = require("../../context/ErrorContextProvider");
+const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
+const ProjectContext_1 = require("../../context/ProjectContext");
+const onSaveCreate_1 = require("./actions/onSaveCreate");
+const ConfigurationStateProvider_1 = require("./state/ConfigurationStateProvider");
+const HydratedRevisionContext_1 = require("./state/HydratedRevisionContext");
+const utils_1 = require("./state/utils");
+const ConfigureInstallationBase_1 = require("./ConfigureInstallationBase");
+const ObjectManagementNav_1 = require("./ObjectManagementNav");
+// the config should be undefined for create flow
+const UNDEFINED_CONFIG = undefined;
+//  Create Installation Flow
+function CreateInstallation() {
+    const { integrationId, groupRef, consumerRef, setInstallation, } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+    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 { projectId } = (0, ProjectContext_1.useProject)();
+    const { resetBoundary, setErrors } = (0, ErrorContextProvider_1.useErrorState)();
+    const { setConfigureState, 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);
+        }
+    }, [hydratedRevision, loading, selectedObjectName, setConfigureState, resetBoundary]);
+    (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 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));
+            return;
+        }
+        if (selectedObjectName && (selectedConnection === null || selectedConnection === void 0 ? void 0 : selectedConnection.id) && apiKey && projectId
+            && integrationId && groupRef && consumerRef && hydratedRevision) {
+            setLoadingState(true);
+            const res = (0, onSaveCreate_1.onSaveCreate)(projectId, integrationId, groupRef, consumerRef, selectedConnection.id, selectedObjectName, apiKey, hydratedRevision, configureState, setInstallation);
+            res.finally(() => {
+                setLoadingState(false);
+                resetPendingConfigurationState(selectedObjectName);
+            });
+        }
+        else {
+            console.error('OnSaveCreate: missing required props');
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(ConfigureInstallationBase_1.ConfigureInstallationBase, { isLoading: isLoading, onSave: onSave, onReset: resetState }));
+}
+exports.CreateInstallation = CreateInstallation;

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

@@ -0,0 +1,5 @@
+interface ErrorTextBoxProps {
+    message: string;
+}
+export declare function ErrorTextBox({ message }: ErrorTextBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorTextBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+function ErrorTextBox({ message }) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { minHeight: "300px", padding: "30px", display: "flex", flexDirection: "column", justifyContent: "space-evenly", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M20.5796 7.72236L3.63955 36.0024C3.29029 36.6072 3.10549 37.293 3.10353 37.9914C3.10158 38.6898 3.28254 39.3766 3.62841 39.9834C3.97428 40.5902 4.473 41.0959 5.07497 41.4501C5.67693 41.8043 6.36115 41.9947 7.05955 42.0024H40.9396C41.638 41.9947 42.3222 41.8043 42.9241 41.4501C43.5261 41.0959 44.0248 40.5902 44.3707 39.9834C44.7166 39.3766 44.8975 38.6898 44.8956 37.9914C44.8936 37.293 44.7088 36.6072 44.3596 36.0024L27.4196 7.72236C27.063 7.13458 26.561 6.6486 25.9619 6.31133C25.3629 5.97406 24.687 5.79688 23.9996 5.79688C23.3121 5.79688 22.6362 5.97406 22.0372 6.31133C21.4381 6.6486 20.9361 7.13458 20.5796 7.72236Z", stroke: "#7F1D1D", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 18V26", stroke: "#7F1D1D", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 34H24.02", stroke: "#7F1D1D", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { boxSizing: "border-box", display: "flex", justifyContent: "center", alignItems: "center", "align-self": "stretch", padding: "12px 50px 12px 50px", borderRadius: "8px", border: "2px solid #FECACA", background: "#FEF2F2", children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: "#991B1B", children: message }) })] }));
+}
+exports.ErrorTextBox = ErrorTextBox;

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

@@ -0,0 +1,9 @@
+interface InstallIntegrationProps {
+    integration: string;
+    consumerRef: string;
+    consumerName?: string;
+    groupRef: string;
+    groupName?: string;
+}
+export declare function InstallIntegration({ integration, consumerRef, consumerName, groupRef, groupName, }: InstallIntegrationProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InstallIntegration = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ConnectionsContext_1 = require("../../context/ConnectionsContext");
+const ErrorContextProvider_1 = require("../../context/ErrorContextProvider");
+const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
+const ProjectContext_1 = require("../../context/ProjectContext");
+const ConfigurationStateProvider_1 = require("./state/ConfigurationStateProvider");
+const HydratedRevisionContext_1 = require("./state/HydratedRevisionContext");
+const CreateInstallation_1 = require("./CreateInstallation");
+const ErrorTextBox_1 = require("./ErrorTextBox");
+const ObjectManagementNav_1 = require("./ObjectManagementNav");
+const ProtectedConnectionLayout_1 = require("./ProtectedConnectionLayout");
+const UpdateInstallation_1 = require("./UpdateInstallation");
+// todo : add the install integration provider to supply these properties
+function InstallationContent() {
+    const { integrationObj, installation } = (0, InstallIntegrationContext_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, {}));
+}
+// TODO consider creating an integration obj context
+function InstallIntegration({ integration, consumerRef, consumerName, groupRef, groupName, }) {
+    var _a;
+    const { projectId } = (0, ProjectContext_1.useProject)();
+    const { errorState } = (0, ErrorContextProvider_1.useErrorState)();
+    if ((_a = errorState[ErrorContextProvider_1.ErrorBoundary.INTEGRATION_LIST]) === null || _a === void 0 ? void 0 : _a.apiError) {
+        return (0, jsx_runtime_1.jsx)(ErrorTextBox_1.ErrorTextBox, { message: "Something went wrong, couldn't find integration information" });
+    }
+    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, {}) }) }) }) }) }) }));
+}
+exports.InstallIntegration = InstallIntegration;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface NavObjectItemProps {
+    objectName: string;
+    completed: boolean;
+    pending?: boolean;
+}
+export declare const NavObjectItem: import("react").ForwardRefExoticComponent<NavObjectItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavObjectItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const NavIcon_1 = require("../../../assets/NavIcon");
+exports.NavObjectItem = (0, react_1.forwardRef)(({ objectName, completed, pending }, 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.tab }, tabProps, { variant: "outline", minHeight: 15, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "flex", alignItems: "center", gap: 2, mr: "3", children: [(0, NavIcon_1.NavIcon)(completed, pending), (0, jsx_runtime_1.jsxs)(react_2.Box, { textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { children: objectName }), pending && (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: 10, fontStyle: "italic", children: "pending" })] })] }), tabProps.children] })));
+});

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare function useSelectedObjectName(): {
+    selectedObjectName: string | undefined;
+};
+type ObjectManagementNavProps = {
+    children?: React.ReactNode;
+};
+export declare function ObjectManagementNav({ children, }: ObjectManagementNavProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectManagementNav = exports.useSelectedObjectName = 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 ConfigurationStateProvider_1 = require("../state/ConfigurationStateProvider");
+const HydratedRevisionContext_1 = require("../state/HydratedRevisionContext");
+const utils_1 = require("../utils");
+const NavObjectItem_1 = require("./NavObjectItem");
+// 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
+function useSelectedObjectName() {
+    const selectedNavObjectName = (0, react_1.useContext)(SelectedObjectNameContext);
+    if (selectedNavObjectName === null) {
+        throw new Error('useSelectedNavObjectName must be used within a SelectedNavObjectNameProvider');
+    }
+    return { selectedObjectName: selectedNavObjectName }; // Return as an object
+}
+exports.useSelectedObjectName = useSelectedObjectName;
+function getSelectedObject(navObjects, tabIndex) {
+    return navObjects === null || navObjects === void 0 ? void 0 : navObjects[tabIndex];
+}
+// note: when the object key exists in the config; the user has already completed the object before
+function ObjectManagementNav({ children, }) {
+    const { installation } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+    const { hydratedRevision } = (0, HydratedRevisionContext_1.useHydratedRevision)();
+    const { objectConfigurationsState } = (0, ConfigurationStateProvider_1.useConfigureState)();
+    const config = installation === null || installation === void 0 ? void 0 : installation.config;
+    const navObjects = hydratedRevision && (0, utils_1.generateNavObjects)(config, hydratedRevision);
+    const [tabIndex, setTabIndex] = (0, react_1.useState)(0);
+    const handleTabsChange = (index) => { setTabIndex(index); };
+    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] }) }));
+}
+exports.ObjectManagementNav = ObjectManagementNav;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface ConfigureIntegrationBaseProps {
+    children: JSX.Element;
+}
+export declare function ProtectedConnectionLayout({ children }: ConfigureIntegrationBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProtectedConnectionLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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)();
+    const { selectedConnection, setSelectedConnection, connections } = (0, ConnectionsContext_1.useConnections)();
+    (0, react_1.useEffect)(() => {
+        if (!selectedConnection && connections && connections.length > 0) {
+            const [connection] = connections;
+            setSelectedConnection(connection);
+        }
+    }, [connections, selectedConnection, setSelectedConnection]);
+    // 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 }));
+}
+exports.ProtectedConnectionLayout = ProtectedConnectionLayout;

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

@@ -0,0 +1,7 @@
+import { Installation, Integration } from '../../services/api';
+interface UpdateInstallationProps {
+    installation: Installation;
+    integrationObj: Integration;
+}
+export declare function UpdateInstallation({ installation, integrationObj }: UpdateInstallationProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,87 @@
+"use strict";
+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 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 ConfigureInstallationBase_1 = require("./ConfigureInstallationBase");
+const ObjectManagementNav_1 = require("./ObjectManagementNav");
+//  Update Installation Flow
+function UpdateInstallation({ installation, integrationObj }) {
+    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)();
+    // 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 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);
+        }
+    }, [
+        hydratedRevision,
+        loading,
+        config,
+        selectedObjectName,
+        setConfigureState,
+        resetBoundary,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!configureState) {
+            resetState();
+        }
+    }, [configureState, 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();
+        // 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));
+            return;
+        }
+        if (installation
+            && selectedObjectName
+            && apiKey
+            && projectId
+            && hydratedObject) {
+            setLoadingState(true);
+            const res = (0, onSaveUpdate_1.onSaveUpdate)(projectId, integrationObj.id, installation.id, selectedObjectName, apiKey, configureState, setInstallation, hydratedObject);
+            res.finally(() => {
+                setLoadingState(false);
+                resetPendingConfigurationState(selectedObjectName);
+            });
+        }
+        else {
+            console.error('update installation props missing');
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(ConfigureInstallationBase_1.ConfigureInstallationBase, { onSave: onSave, onReset: resetState, isLoading: isLoading }));
+}
+exports.UpdateInstallation = UpdateInstallation;

package/build/src/components/Configure/actions/onSaveCreate.d.ts

@@ -0,0 +1,3 @@
+import { HydratedRevision, Installation } from '../../../services/api';
+import { ConfigureState } from '../types';
+export declare const onSaveCreate: (projectId: string, integrationId: string, groupRef: string, consumerRef: string, connectionId: string, objectName: string, apiKey: string, hydratedRevision: HydratedRevision, configureState: ConfigureState, setInstallation: (installationObj: Installation) => void) => Promise<any>;

package/build/src/components/Configure/actions/onSaveCreate.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onSaveCreate = void 0;
+const api_1 = require("../../../services/api");
+const utils_1 = require("../state/utils");
+/**
+ * gets matching object from hydratedRevision
+ * @param hydratedRevision
+ * @param objectName
+ * @returns
+ */
+const getObjectFromHydratedRevision = (hydratedRevision, objectName) => {
+    const readAction = hydratedRevision.content.read;
+    const standardObjects = readAction === null || readAction === void 0 ? void 0 : readAction.standardObjects;
+    return standardObjects === null || standardObjects === void 0 ? void 0 : standardObjects.find((obj) => obj.objectName === objectName);
+};
+/**
+ * given a configureState, objectName, hyrdatedRevision, and consumerRef
+ * generate the config object that is need for update installation request.
+ *
+ * 1. get required fields from configureState
+ * 2. get optional fields from configureState
+ * 3. merge required fields and optional fields into selectedFields
+ * 4. get required custom map fields from configureState
+ * 5. generate create config object
+ * @param configureState
+ * @param objectName
+ * @param hydratedRevision
+ * @param consumerRef
+ * @returns
+ */
+const generateCreateConfigFromConfigureState = (configureState, objectName, hydratedRevision, consumerRef) => {
+    const selectedFields = (0, utils_1.generateSelectedFieldsFromConfigureState)(configureState);
+    const selectedFieldMappings = (0, utils_1.generateSelectedFieldMappingsFromConfigureState)(configureState);
+    const obj = getObjectFromHydratedRevision(hydratedRevision, objectName);
+    if (!obj) {
+        console.error(`Error when getting object from hydratedRevision for objectName: ${objectName}`);
+        return null;
+    }
+    // create config request object
+    const createConfigObj = {
+        revisionId: hydratedRevision.id,
+        createdBy: `consumer:${consumerRef}`,
+        content: {
+            provider: hydratedRevision.content.provider,
+            read: {
+                standardObjects: {
+                    [objectName]: {
+                        objectName,
+                        schedule: obj.schedule,
+                        destination: obj.destination,
+                        selectedFields,
+                        selectedFieldMappings,
+                    },
+                },
+            },
+        },
+    };
+    return createConfigObj;
+};
+const onSaveCreate = (projectId, integrationId, groupRef, consumerRef, connectionId, objectName, apiKey, hydratedRevision, configureState, setInstallation) => {
+    const createConfig = generateCreateConfigFromConfigureState(configureState, objectName, hydratedRevision, consumerRef);
+    if (!createConfig) {
+        console.error('Error when generating createConfig from configureState');
+        return Promise.resolve(null);
+    }
+    const createInstallationRequest = {
+        projectId,
+        integrationId,
+        installation: {
+            groupRef,
+            connectionId,
+            config: createConfig,
+        },
+    };
+    return (0, api_1.api)().createInstallation(createInstallationRequest, {
+        headers: {
+            'X-Api-Key': apiKey,
+            'Content-Type': 'application/json',
+        },
+    })
+        .then((installation) => {
+        // update local installation state
+        setInstallation(installation);
+    })
+        .catch((err) => {
+        console.error('ERROR: ', err);
+    });
+};
+exports.onSaveCreate = onSaveCreate;

package/build/src/components/Configure/actions/onSaveUpdate.d.ts

@@ -0,0 +1,3 @@
+import { HydratedIntegrationObject, Installation } from '../../../services/api';
+import { ConfigureState } from '../types';
+export declare const onSaveUpdate: (projectId: string, integrationId: string, installationId: string, selectedObjectName: string, apiKey: string, configureState: ConfigureState, setInstallation: (installationObj: Installation) => void, hydratedObject: HydratedIntegrationObject) => Promise<any>;

package/build/src/components/Configure/actions/onSaveUpdate.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onSaveUpdate = void 0;
+const api_1 = require("../../../services/api");
+const utils_1 = require("../state/utils");
+/**
+ * given a configureState, config, and objectName, generate the config object that is need for
+ * update installation request.
+ *
+ * 1. get required fields from configureState
+ * 2. get optional fields from configureState
+ * 3. merge required fields and optional fields into selectedFields
+ * 4. get required custom map fields from configureState
+ * 5. generate modified config object based on update mask
+ * @param configureState
+ * @param config
+ * @param objectName
+ * @param hydratedObject
+ * @param schedule
+ * @returns
+ */
+const generateUpdateConfigFromConfigureState = (configureState, objectName, hydratedObject, schedule) => {
+    const selectedFields = (0, utils_1.generateSelectedFieldsFromConfigureState)(configureState);
+    const selectedFieldMappings = (0, utils_1.generateSelectedFieldMappingsFromConfigureState)(configureState);
+    // config request object type needs to be fixed
+    const updateConfigObject = {
+        content: {
+            read: {
+                standardObjects: {
+                    [objectName]: {
+                        objectName,
+                        // these two fields are copied from previous config, otherwise they will override null
+                        schedule,
+                        destination: (hydratedObject === null || hydratedObject === void 0 ? void 0 : hydratedObject.destination) || '',
+                        selectedFields,
+                        selectedFieldMappings,
+                    },
+                },
+            },
+        },
+    };
+    return updateConfigObject;
+};
+const onSaveUpdate = (projectId, integrationId, installationId, selectedObjectName, apiKey, configureState, setInstallation, hydratedObject) => {
+    // get configuration state
+    // transform configuration state to update shape
+    const updateConfig = generateUpdateConfigFromConfigureState(configureState, selectedObjectName || '', hydratedObject, hydratedObject.schedule);
+    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.read.standardObjects.${selectedObjectName}`],
+            installation: {
+                config: updateConfig,
+            },
+        },
+    };
+    // call api.updateInstallation
+    return (0, api_1.api)().updateInstallation(updateInstallationRequest, {
+        headers: {
+            'X-Api-Key': apiKey,
+            'Content-Type': 'application/json',
+        },
+    }).then((data) => {
+        // update local installation state
+        setInstallation(data);
+    }).catch((err) => {
+        console.error('ERROR: ', err);
+    });
+};
+exports.onSaveUpdate = onSaveUpdate;

package/build/src/components/Configure/fields/FieldHeader.d.ts

@@ -0,0 +1,5 @@
+interface FieldHeaderProps {
+    string: string;
+}
+export declare function FieldHeader({ string }: FieldHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Configure/fields/FieldHeader.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+function FieldHeader({ string }) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { position: "relative", paddingTop: 8, paddingBottom: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { color: "gray.500", as: "h3", fontSize: 16, fontWeight: "500", children: string }), (0, jsx_runtime_1.jsx)(react_1.Flex, { flex: "1", justifyContent: "flex-end", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_1.Divider, { marginLeft: 2 }) })] }));
+}
+exports.FieldHeader = FieldHeader;

package/build/src/components/Configure/fields/FieldMapping.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { HydratedIntegrationFieldExistent } from '../../../services/api';
+import { ConfigureStateMappingIntegrationField } from '../types';
+interface FieldMappingProps {
+    field: ConfigureStateMappingIntegrationField;
+    onSelectChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    allFields: HydratedIntegrationFieldExistent[];
+}
+export declare function FieldMapping({ field, onSelectChange, allFields }: FieldMappingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Configure/fields/FieldMapping.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+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);
+    (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);
+            }
+        }
+        setDisabled(false);
+    }, [field, allFields, configureState, setConfigureState, selectedObjectName]);
+    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));
+}
+exports.FieldMapping = FieldMapping;

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

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