@amp-labs/react 1.0.2 → 1.2.0

package/build/generated-sources/api/src/models/index.d.ts

@@ -10,8 +10,6 @@ export * from './ConfigContentAllOf';
 export * from './Connection';
 export * from './Consumer';
 export * from './CreateConsumerRequest';
-export * from './CreateDestinationRequest';
-export * from './CreateDestinationRequestMetadata';
 export * from './CreateGroupRequest';
 export * from './CreateInstallationRequest';
 export * from './CreateInstallationRequestConfig';
@@ -19,6 +17,8 @@ export * from './CreateIntegrationRequest';
 export * from './CreateIntegrationRequestLatestRevision';
 export * from './CreateProjectRequest';
 export * from './CreateProviderAppRequest';
+export * from './Destination';
+export * from './DestinationMetadata';
 export * from './Group';
 export * from './HydratedIntegration';
 export * from './HydratedIntegrationField';
@@ -44,6 +44,7 @@ export * from './IntegrationWriteObject';
 export * from './OauthConnectRequest';
 export * from './Operation';
 export * from './OperationError';
+export * from './OperationLog';
 export * from './OptionalFieldsAutoOption';
 export * from './Project';
 export * from './ProjectMembership';

package/build/generated-sources/api/src/models/index.js

@@ -28,8 +28,6 @@ __exportStar(require("./ConfigContentAllOf"), exports);
 __exportStar(require("./Connection"), exports);
 __exportStar(require("./Consumer"), exports);
 __exportStar(require("./CreateConsumerRequest"), exports);
-__exportStar(require("./CreateDestinationRequest"), exports);
-__exportStar(require("./CreateDestinationRequestMetadata"), exports);
 __exportStar(require("./CreateGroupRequest"), exports);
 __exportStar(require("./CreateInstallationRequest"), exports);
 __exportStar(require("./CreateInstallationRequestConfig"), exports);
@@ -37,6 +35,8 @@ __exportStar(require("./CreateIntegrationRequest"), exports);
 __exportStar(require("./CreateIntegrationRequestLatestRevision"), exports);
 __exportStar(require("./CreateProjectRequest"), exports);
 __exportStar(require("./CreateProviderAppRequest"), exports);
+__exportStar(require("./Destination"), exports);
+__exportStar(require("./DestinationMetadata"), exports);
 __exportStar(require("./Group"), exports);
 __exportStar(require("./HydratedIntegration"), exports);
 __exportStar(require("./HydratedIntegrationField"), exports);
@@ -62,6 +62,7 @@ __exportStar(require("./IntegrationWriteObject"), exports);
 __exportStar(require("./OauthConnectRequest"), exports);
 __exportStar(require("./Operation"), exports);
 __exportStar(require("./OperationError"), exports);
+__exportStar(require("./OperationLog"), exports);
 __exportStar(require("./OptionalFieldsAutoOption"), exports);
 __exportStar(require("./Project"), exports);
 __exportStar(require("./ProjectMembership"), exports);

package/build/src/assets/TrashIcon.js

@@ -4,6 +4,8 @@ exports.TrashIcon = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // red.800 trash icon
 function TrashIcon() {
-    return ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.25 4.5H3.75H15.75", stroke: "#991B1B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.25 4.5V15C14.25 15.3978 14.092 15.7794 13.8107 16.0607C13.5294 16.342 13.1478 16.5 12.75 16.5H5.25C4.85218 16.5 4.47064 16.342 4.18934 16.0607C3.90804 15.7794 3.75 15.3978 3.75 15V4.5M6 4.5V3C6 2.60218 6.15804 2.22064 6.43934 1.93934C6.72064 1.65804 7.10218 1.5 7.5 1.5H10.5C10.8978 1.5 11.2794 1.65804 11.5607 1.93934C11.842 2.22064 12 2.60218 12 3V4.5", stroke: "#991B1B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.5 8.25V12.75", stroke: "#991B1B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.5 8.25V12.75", stroke: "#991B1B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2.25 4.5H3.75H15.75", stroke: "#991B1B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { 
+                // eslint-disable-next-line max-len
+                d: "M14.25 4.5V15C14.25 15.3978 14.092 15.7794 13.8107 16.0607C13.5294 16.342 13.1478 16.5 12.75 16.5H5.25C4.85218 16.5 4.47064 16.342 4.18934 16.0607C3.90804 15.7794 3.75 15.3978 3.75 15V4.5M6 4.5V3C6 2.60218 6.15804 2.22064 6.43934 1.93934C6.72064 1.65804 7.10218 1.5 7.5 1.5H10.5C10.8978 1.5 11.2794 1.65804 11.5607 1.93934C11.842 2.22064 12 2.60218 12 3V4.5", stroke: "#991B1B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.5 8.25V12.75", stroke: "#991B1B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.5 8.25V12.75", stroke: "#991B1B", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 }
 exports.TrashIcon = TrashIcon;

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

@@ -1,9 +1,12 @@
+import { Config } from '../../services/api';
 interface InstallIntegrationProps {
     integration: string;
     consumerRef: string;
     consumerName?: string;
     groupRef: string;
     groupName?: string;
+    onInstallSuccess?: (installationId: string, config: Config) => void;
+    onUpdateSuccess?: (installationId: string, config: Config) => void;
 }
-export declare function InstallIntegration({ integration, consumerRef, consumerName, groupRef, groupName, }: InstallIntegrationProps): import("react/jsx-runtime").JSX.Element;
+export declare function InstallIntegration({ integration, consumerRef, consumerName, groupRef, groupName, onInstallSuccess, onUpdateSuccess, }: InstallIntegrationProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,38 +2,25 @@
 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 ConnectionsContextProvider_1 = require("../../context/ConnectionsContextProvider");
 const ErrorContextProvider_1 = require("../../context/ErrorContextProvider");
-const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
-const ProjectContext_1 = require("../../context/ProjectContext");
+const InstallIntegrationContextProvider_1 = require("../../context/InstallIntegrationContextProvider");
+const ProjectContextProvider_1 = require("../../context/ProjectContextProvider");
+const ErrorTextBox_1 = require("../ErrorTextBox");
+const InstallationContent_1 = require("./content/InstallationContent");
+const ProtectedConnectionLayout_1 = require("./layout/ProtectedConnectionLayout");
+const ObjectManagementNav_1 = require("./nav/ObjectManagementNav");
 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, {}));
-}
-function InstallIntegration({ integration, consumerRef, consumerName, groupRef, groupName, }) {
+function InstallIntegration({ integration, consumerRef, consumerName, groupRef, groupName, onInstallSuccess, onUpdateSuccess, }) {
     var _a;
-    const { projectId } = (0, ProjectContext_1.useProject)();
+    const { projectId } = (0, ProjectContextProvider_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, { 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, {}) }) }) }) }) }) }));
+    (0, jsx_runtime_1.jsx)(InstallIntegrationContextProvider_1.InstallIntegrationProvider, { integration: integration, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName, onInstallSuccess: onInstallSuccess, onUpdateSuccess: onUpdateSuccess, children: (0, jsx_runtime_1.jsx)(ConnectionsContextProvider_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_1.InstallationContent, {}) }) }) }) }) }) }));
 }
 exports.InstallIntegration = InstallIntegration;

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

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

package/build/src/components/Configure/actions/{onSaveCreate.js → onSaveReadCreateInstallation.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onSaveCreate = void 0;
+exports.onSaveReadCreateInstallation = void 0;
 const api_1 = require("../../../services/api");
 const utils_1 = require("../state/utils");
 /**
@@ -29,7 +29,7 @@ const getObjectFromHydratedRevision = (hydratedRevision, objectName) => {
  * @param consumerRef
  * @returns
  */
-const generateCreateConfigFromConfigureState = (configureState, objectName, hydratedRevision, consumerRef) => {
+const generateCreateReadConfigFromConfigureState = (configureState, objectName, hydratedRevision, consumerRef) => {
     const selectedFields = (0, utils_1.generateSelectedFieldsFromConfigureState)(configureState);
     const selectedFieldMappings = (0, utils_1.generateSelectedFieldMappingsFromConfigureState)(configureState);
     const obj = getObjectFromHydratedRevision(hydratedRevision, objectName);
@@ -58,8 +58,8 @@ const generateCreateConfigFromConfigureState = (configureState, objectName, hydr
     };
     return createConfigObj;
 };
-const onSaveCreate = (projectId, integrationId, groupRef, consumerRef, connectionId, objectName, apiKey, hydratedRevision, configureState, setInstallation) => {
-    const createConfig = generateCreateConfigFromConfigureState(configureState, objectName, hydratedRevision, consumerRef);
+const onSaveReadCreateInstallation = (projectId, integrationId, groupRef, consumerRef, connectionId, objectName, apiKey, hydratedRevision, configureState, setInstallation, onInstallSuccess) => {
+    const createConfig = generateCreateReadConfigFromConfigureState(configureState, objectName, hydratedRevision, consumerRef);
     if (!createConfig) {
         console.error('Error when generating createConfig from configureState');
         return Promise.resolve(null);
@@ -73,7 +73,7 @@ const onSaveCreate = (projectId, integrationId, groupRef, consumerRef, connectio
             config: createConfig,
         },
     };
-    return (0, api_1.api)().createInstallation(createInstallationRequest, {
+    return (0, api_1.api)().installationApi.createInstallation(createInstallationRequest, {
         headers: {
             'X-Api-Key': apiKey,
             'Content-Type': 'application/json',
@@ -82,9 +82,10 @@ const onSaveCreate = (projectId, integrationId, groupRef, consumerRef, connectio
         .then((installation) => {
         // update local installation state
         setInstallation(installation);
+        onInstallSuccess === null || onInstallSuccess === void 0 ? void 0 : onInstallSuccess(installation.id, installation.config);
     })
         .catch((err) => {
         console.error('ERROR: ', err);
     });
 };
-exports.onSaveCreate = onSaveCreate;
+exports.onSaveReadCreateInstallation = onSaveReadCreateInstallation;

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

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

package/build/src/components/Configure/actions/{onSaveUpdate.js → onSaveReadUpdateInstallation.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onSaveUpdate = void 0;
+exports.onSaveReadUpdateInstallation = void 0;
 const api_1 = require("../../../services/api");
 const utils_1 = require("../state/utils");
 /**
@@ -19,7 +19,7 @@ const utils_1 = require("../state/utils");
  * @param schedule
  * @returns
  */
-const generateUpdateConfigFromConfigureState = (configureState, objectName, hydratedObject, schedule) => {
+const generateUpdateReadConfigFromConfigureState = (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
@@ -41,10 +41,14 @@ const generateUpdateConfigFromConfigureState = (configureState, objectName, hydr
     };
     return updateConfigObject;
 };
-const onSaveUpdate = (projectId, integrationId, installationId, selectedObjectName, apiKey, configureState, setInstallation, hydratedObject) => {
+const onSaveReadUpdateInstallation = (projectId, integrationId, installationId, selectedObjectName, apiKey, configureState, setInstallation, hydratedObject, onUpdateSuccess) => {
     // get configuration state
     // transform configuration state to update shape
-    const updateConfig = generateUpdateConfigFromConfigureState(configureState, selectedObjectName || '', hydratedObject, hydratedObject.schedule);
+    const updateConfig = generateUpdateReadConfigFromConfigureState(configureState, selectedObjectName || '', hydratedObject, hydratedObject.schedule);
+    if (!updateConfig) {
+        console.error('Error when generating updateConfig from configureState');
+        return Promise.resolve(null);
+    }
     const updateInstallationRequest = {
         projectId,
         installationId,
@@ -59,16 +63,17 @@ const onSaveUpdate = (projectId, integrationId, installationId, selectedObjectNa
         },
     };
     // call api.updateInstallation
-    return (0, api_1.api)().updateInstallation(updateInstallationRequest, {
+    return (0, api_1.api)().installationApi.updateInstallation(updateInstallationRequest, {
         headers: {
             'X-Api-Key': apiKey,
             'Content-Type': 'application/json',
         },
-    }).then((data) => {
+    }).then((installation) => {
         // update local installation state
-        setInstallation(data);
+        setInstallation(installation);
+        onUpdateSuccess === null || onUpdateSuccess === void 0 ? void 0 : onUpdateSuccess(installation.id, installation.config);
     }).catch((err) => {
         console.error('ERROR: ', err);
     });
 };
-exports.onSaveUpdate = onSaveUpdate;
+exports.onSaveReadUpdateInstallation = onSaveReadUpdateInstallation;

package/build/src/components/Configure/actions/write/generateConfigWriteObjects.d.ts

@@ -0,0 +1,26 @@
+import { ConfigureState } from '../../types';
+type WriteObject = {
+    objectName: string;
+};
+type WriteObjects = {
+    [objectName: string]: WriteObject;
+};
+/**
+ * example type
+ * "objects":
+ *  {
+    objects: {
+      account: {
+        objectName: 'account',
+      },
+      contact: {
+        objectName: 'contact',
+      },
+    },
+  }
+ * @param writeObjects
+ * @param configureState
+ * @returns
+ */
+export declare const generateConfigWriteObjects: (configureState: ConfigureState) => WriteObjects;
+export {};

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateConfigWriteObjects = void 0;
+/**
+ * example type
+ * "objects":
+ *  {
+    objects: {
+      account: {
+        objectName: 'account',
+      },
+      contact: {
+        objectName: 'contact',
+      },
+    },
+  }
+ * @param writeObjects
+ * @param configureState
+ * @returns
+ */
+const generateConfigWriteObjects = (configureState) => {
+    var _a, _b;
+    const configWriteObjects = {}; // `any` is listed type in generated SDK
+    const configStateWriteObjects = (_a = configureState.write) === null || _a === void 0 ? void 0 : _a.writeObjects;
+    const selected = (_b = configureState.write) === null || _b === void 0 ? void 0 : _b.selectedNonConfigurableWriteFields;
+    const selectedKeys = selected ? Object.keys(selected) : [];
+    if (configStateWriteObjects) {
+        configStateWriteObjects.forEach((configStateWriteObject) => {
+            const obj = configStateWriteObject.objectName;
+            // object exists in config form
+            if (selectedKeys.includes(obj)) {
+                // insert objectName into configWriteObjects
+                configWriteObjects[obj] = {
+                    objectName: obj,
+                };
+            }
+        });
+    }
+    return configWriteObjects;
+};
+exports.generateConfigWriteObjects = generateConfigWriteObjects;

package/build/src/components/Configure/actions/write/onSaveWriteCreateInstallation.d.ts

@@ -0,0 +1,3 @@
+import { Config, HydratedRevision, Installation } from '../../../../services/api';
+import { ConfigureState } from '../../types';
+export declare const onSaveWriteCreateInstallation: (projectId: string, integrationId: string, groupRef: string, consumerRef: string, connectionId: string, apiKey: string, hydratedRevision: HydratedRevision, configureState: ConfigureState, setInstallation: (installationObj: Installation) => void, onInstallSuccess?: ((installationId: string, config: Config) => void) | undefined) => Promise<void | null>;

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.onSaveWriteCreateInstallation = void 0;
+const api_1 = require("../../../../services/api");
+const generateConfigWriteObjects_1 = require("./generateConfigWriteObjects");
+/**
+   * gets write objects from hydratedRevision
+   * @param hydratedRevision
+   * @param objectName
+   * @returns
+   */
+const getWriteObjectsFromHydratedRevision = (hydratedRevision) => {
+    const writeAction = hydratedRevision.content.write;
+    return writeAction === null || writeAction === void 0 ? void 0 : writeAction.objects;
+};
+/**
+   * 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 generateCreateWriteConfigFromConfigureState = (configureState, hydratedRevision, consumerRef) => {
+    const writeObjects = getWriteObjectsFromHydratedRevision(hydratedRevision);
+    if (!writeObjects) {
+        console.error('Error when getting write objects from hydratedRevision');
+        return null;
+    }
+    const configWriteObjects = (0, generateConfigWriteObjects_1.generateConfigWriteObjects)(configureState);
+    // create config request object
+    const createConfigObj = {
+        revisionId: hydratedRevision.id,
+        createdBy: `consumer:${consumerRef}`,
+        content: {
+            provider: hydratedRevision.content.provider,
+            // need empty read.standardObjects for update read
+            read: {
+                standardObjects: {},
+            },
+            write: {
+                objects: configWriteObjects,
+            },
+        },
+    };
+    return createConfigObj;
+};
+const onSaveWriteCreateInstallation = (projectId, integrationId, groupRef, consumerRef, connectionId, apiKey, hydratedRevision, configureState, setInstallation, onInstallSuccess) => {
+    const createConfig = generateCreateWriteConfigFromConfigureState(configureState, 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)().installationApi.createInstallation(createInstallationRequest, {
+        headers: {
+            'X-Api-Key': apiKey,
+            'Content-Type': 'application/json',
+        },
+    })
+        .then((installation) => {
+        // update local installation state
+        setInstallation(installation);
+        onInstallSuccess === null || onInstallSuccess === void 0 ? void 0 : onInstallSuccess(installation.id, installation.config);
+    })
+        .catch((err) => {
+        console.error('ERROR: ', err);
+    });
+};
+exports.onSaveWriteCreateInstallation = onSaveWriteCreateInstallation;

package/build/src/components/Configure/actions/write/onSaveWriteUpdateInstallation.d.ts

@@ -0,0 +1,3 @@
+import { Config, Installation } from '../../../../services/api';
+import { ConfigureState } from '../../types';
+export declare const onSaveWriteUpdateInstallation: (projectId: string, integrationId: string, installationId: string, apiKey: string, configureState: ConfigureState, setInstallation: (installationObj: Installation) => void, onUpdateSuccess?: ((installationId: string, config: Config) => void) | undefined) => Promise<void | null>;

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;