@amp-labs/react 1.1.0 → 1.3.0

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;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WriteFields = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useSelectedConfigureState_1 = require("../../useSelectedConfigureState");
+const FieldHeader_1 = require("../FieldHeader");
+const setNonConfigurableWriteField_1 = require("./setNonConfigurableWriteField");
+function WriteFields() {
+    var _a, _b, _c, _d;
+    const { appName, selectedObjectName, configureState, setConfigureState, } = (0, useSelectedConfigureState_1.useSelectedConfigureState)();
+    const selectedWriteFields = (_a = configureState === null || configureState === void 0 ? void 0 : configureState.write) === null || _a === void 0 ? void 0 : _a.selectedNonConfigurableWriteFields;
+    const onCheckboxChange = (e) => {
+        const { name, checked } = e.target;
+        if (selectedObjectName && configureState) {
+            (0, setNonConfigurableWriteField_1.setNonConfigurableWriteField)(selectedObjectName, setConfigureState, name, checked);
+        }
+    };
+    const shouldRender = !!((_b = configureState === null || configureState === void 0 ? void 0 : configureState.write) === null || _b === void 0 ? void 0 : _b.writeObjects);
+    return (shouldRender && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { string: `Allow ${appName} to write to these object` }), (0, jsx_runtime_1.jsx)(react_1.Stack, { marginBottom: 10, height: 300, overflowY: "scroll", border: "2px solid #EFEFEF", borderRadius: 8, padding: 4, children: (_d = (_c = configureState === null || configureState === void 0 ? void 0 : configureState.write) === null || _c === void 0 ? void 0 : _c.writeObjects) === null || _d === void 0 ? void 0 : _d.map((field) => ((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.objectName, id: field.objectName, onChange: onCheckboxChange, isChecked: !!(selectedWriteFields === null || selectedWriteFields === void 0 ? void 0 : selectedWriteFields[field.objectName]), children: field.displayName }) }, field.objectName))) })] })));
+}
+exports.WriteFields = WriteFields;

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

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

package/build/src/components/Configure/content/fields/WriteFields/index.js

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

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

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

package/build/src/components/Configure/content/fields/WriteFields/setNonConfigurableWriteField.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setNonConfigurableWriteField = void 0;
+const utils_1 = require("../../../state/utils");
+function setNonConfigurableWriteFieldProducer(draft, fieldKey, checked) {
+    var _a, _b, _c;
+    if (((_a = draft === null || draft === void 0 ? void 0 : draft.write) === null || _a === void 0 ? void 0 : _a.selectedNonConfigurableWriteFields) === null) {
+        // immer syntax to set a value
+        // eslint-disable-next-line no-param-reassign
+        draft.write.selectedNonConfigurableWriteFields = {};
+    }
+    if (draft === null || draft === void 0 ? void 0 : draft.write) {
+        const draftSelectedWriteFields = draft.write.selectedNonConfigurableWriteFields;
+        draftSelectedWriteFields[fieldKey] = checked;
+        if (!checked) {
+            delete draftSelectedWriteFields[fieldKey];
+        }
+        // check is modified
+        if ((_c = (_b = draft === null || draft === void 0 ? void 0 : draft.write) === null || _b === void 0 ? void 0 : _b.savedConfig) === null || _c === void 0 ? void 0 : _c.selectedNonConfigurableWriteFields) {
+            const savedFields = draft.write.savedConfig.selectedNonConfigurableWriteFields;
+            const updatedFields = draftSelectedWriteFields;
+            const isModified = !(0, utils_1.isFieldObjectEqual)(savedFields, updatedFields);
+            // immer syntax to set a value
+            // eslint-disable-next-line no-param-reassign
+            draft.write.isWriteModified = isModified;
+        }
+    }
+}
+function setNonConfigurableWriteField(selectedObjectName, setConfigureState, fieldKey, checked) {
+    setConfigureState(selectedObjectName, (draft) => { setNonConfigurableWriteFieldProducer(draft, fieldKey, checked); });
+}
+exports.setNonConfigurableWriteField = setNonConfigurableWriteField;

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

@@ -0,0 +1,23 @@
+/**
+ * state hook for installation flows (Create/Update)
+ * */
+export declare const useMutateInstallation: () => {
+    integrationId: string;
+    groupRef: string;
+    consumerRef: string;
+    setInstallation: (installationObj: import("../../../services/api").Installation) => void;
+    hydratedRevision: import("../../../services/api").HydratedRevision | null;
+    loading: boolean;
+    selectedObjectName: string | undefined;
+    selectedConnection: import("../../../services/api").Connection | null;
+    apiKey: string;
+    projectId: string;
+    resetBoundary: (boundary: import("../../../context/ErrorContextProvider").ErrorBoundary) => void;
+    setErrors: (boundary: import("../../../context/ErrorContextProvider").ErrorBoundary, keys: string[]) => void;
+    resetConfigureState: (objectName: string, configureState: import("../types").ConfigureState) => void;
+    objectConfigurationsState: import("../types").ObjectConfigurationsState;
+    resetPendingConfigurationState: (objectName: string) => void;
+    configureState: import("../types").ConfigureState;
+    onInstallSuccess: ((installationId: string, config: import("../../../services/api").Config) => void) | undefined;
+    onUpdateSuccess: ((installationId: string, config: import("../../../services/api").Config) => void) | undefined;
+};

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMutateInstallation = void 0;
+const ApiKeyContextProvider_1 = require("../../../context/ApiKeyContextProvider");
+const ConnectionsContextProvider_1 = require("../../../context/ConnectionsContextProvider");
+const ErrorContextProvider_1 = require("../../../context/ErrorContextProvider");
+const InstallIntegrationContextProvider_1 = require("../../../context/InstallIntegrationContextProvider");
+const ProjectContextProvider_1 = require("../../../context/ProjectContextProvider");
+const ObjectManagementNav_1 = require("../nav/ObjectManagementNav");
+const ConfigurationStateProvider_1 = require("../state/ConfigurationStateProvider");
+const HydratedRevisionContext_1 = require("../state/HydratedRevisionContext");
+const utils_1 = require("../state/utils");
+/**
+ * state hook for installation flows (Create/Update)
+ * */
+const useMutateInstallation = () => {
+    const { integrationId, groupRef, consumerRef, setInstallation, onInstallSuccess, onUpdateSuccess, } = (0, InstallIntegrationContextProvider_1.useInstallIntegrationProps)();
+    const { hydratedRevision, loading } = (0, HydratedRevisionContext_1.useHydratedRevision)();
+    const { selectedObjectName } = (0, ObjectManagementNav_1.useSelectedObjectName)();
+    const { selectedConnection } = (0, ConnectionsContextProvider_1.useConnections)();
+    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
+    const { projectId } = (0, ProjectContextProvider_1.useProject)();
+    const { resetBoundary, setErrors } = (0, ErrorContextProvider_1.useErrorState)();
+    const { resetConfigureState, objectConfigurationsState, resetPendingConfigurationState, } = (0, ConfigurationStateProvider_1.useObjectsConfigureState)();
+    const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
+    return {
+        integrationId,
+        groupRef,
+        consumerRef,
+        setInstallation,
+        hydratedRevision,
+        loading,
+        selectedObjectName,
+        selectedConnection,
+        apiKey,
+        projectId,
+        resetBoundary,
+        setErrors,
+        resetConfigureState,
+        objectConfigurationsState,
+        resetPendingConfigurationState,
+        configureState,
+        onInstallSuccess,
+        onUpdateSuccess,
+    };
+};
+exports.useMutateInstallation = useMutateInstallation;

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

@@ -0,0 +1,72 @@
+/**
+ *
+ * @returns {object} configureState for the selected object in nav
+ */
+export declare const useSelectedConfigureState: () => {
+    appName: string;
+    configureState: import("../types").ConfigureState;
+    setConfigureState: (objectName: string, producer: (draft: {
+        read: {
+            allFields: {
+                fieldName: string;
+                displayName: string;
+            }[] | null;
+            requiredFields: ({
+                fieldName: string;
+                displayName: string;
+            } | {
+                mapToName: string;
+                mapToDisplayName?: string | undefined;
+                _default?: string | undefined;
+                prompt?: string | undefined;
+            })[] | null;
+            optionalFields: ({
+                fieldName: string;
+                displayName: string;
+            } | {
+                mapToName: string;
+                mapToDisplayName?: string | undefined;
+                _default?: string | undefined;
+                prompt?: string | undefined;
+            })[] | null;
+            requiredMapFields: {
+                mapToName: string;
+                mapToDisplayName?: string | undefined;
+                _default?: string | undefined;
+                prompt?: string | undefined;
+            }[] | null;
+            selectedOptionalFields: {
+                [x: string]: boolean;
+            } | null;
+            selectedFieldMappings: {
+                [x: string]: string | undefined;
+            } | null;
+            isOptionalFieldsModified: boolean;
+            isRequiredMapFieldsModified: boolean;
+            savedConfig: {
+                optionalFields: {
+                    [x: string]: boolean;
+                };
+                requiredMapFields: {
+                    [x: string]: string | undefined;
+                };
+            };
+        } | null;
+        write: {
+            writeObjects: {
+                objectName: string;
+                displayName: string;
+            }[] | null;
+            selectedNonConfigurableWriteFields: {
+                [x: string]: boolean;
+            } | null;
+            isWriteModified: boolean;
+            savedConfig: {
+                selectedNonConfigurableWriteFields: {
+                    [x: string]: boolean;
+                };
+            };
+        } | null;
+    }) => void) => void;
+    selectedObjectName: string | undefined;
+};

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSelectedConfigureState = void 0;
+const ProjectContextProvider_1 = require("../../../context/ProjectContextProvider");
+const ObjectManagementNav_1 = require("../nav/ObjectManagementNav");
+const ConfigurationStateProvider_1 = require("../state/ConfigurationStateProvider");
+const utils_1 = require("../state/utils");
+/**
+ *
+ * @returns {object} configureState for the selected object in nav
+ */
+const useSelectedConfigureState = () => {
+    const { appName } = (0, ProjectContextProvider_1.useProject)();
+    const { objectConfigurationsState, setConfigureState } = (0, ConfigurationStateProvider_1.useObjectsConfigureState)();
+    const { selectedObjectName } = (0, ObjectManagementNav_1.useSelectedObjectName)();
+    const configureState = (0, utils_1.getConfigureState)(selectedObjectName || '', objectConfigurationsState);
+    return {
+        appName,
+        configureState,
+        setConfigureState,
+        selectedObjectName,
+    };
+};
+exports.useSelectedConfigureState = useSelectedConfigureState;

package/build/src/components/Configure/layout/ConditionalProxyLayout/ConditionalProxyLayout.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface ConditionalProxyLayoutProps {
+    children: React.ReactNode;
+}
+/**
+ * if the hydratedRevision only has proxy actions,
+ * then it will not render the ConfigureInstallation
+ * @returns
+ */
+export declare function ConditionalProxyLayout({ children }: ConditionalProxyLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Configure/layout/ConditionalProxyLayout/ConditionalProxyLayout.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConditionalProxyLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const LoadingIcon_1 = require("../../../../assets/LoadingIcon");
+const ApiKeyContextProvider_1 = require("../../../../context/ApiKeyContextProvider");
+const ConnectionsContextProvider_1 = require("../../../../context/ConnectionsContextProvider");
+const InstallIntegrationContextProvider_1 = require("../../../../context/InstallIntegrationContextProvider");
+const ProjectContextProvider_1 = require("../../../../context/ProjectContextProvider");
+const ErrorTextBox_1 = require("../../../ErrorTextBox");
+const createInstallationProxyOnly_1 = require("../../actions/proxy/createInstallationProxyOnly");
+const HydratedRevisionContext_1 = require("../../state/HydratedRevisionContext");
+const InstalledSuccessBox_1 = require("./InstalledSuccessBox");
+// explicity check other actions (i.e. read, write) to determine if it's proxy only
+// returns false if it's not proxy only or no hydratedRevision
+const getIsProxyOnly = (hydratedRevision) => {
+    var _a;
+    const { read, write, proxy } = (_a = hydratedRevision === null || hydratedRevision === void 0 ? void 0 : hydratedRevision.content) !== null && _a !== void 0 ? _a : {};
+    return (!read && !write && (proxy === null || proxy === void 0 ? void 0 : proxy.enabled)) || false;
+};
+/**
+ * if the hydratedRevision only has proxy actions,
+ * then it will not render the ConfigureInstallation
+ * @returns
+ */
+function ConditionalProxyLayout({ children }) {
+    var _a;
+    const { projectId } = (0, ProjectContextProvider_1.useProject)();
+    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
+    const { hydratedRevision, loading: hydratedRevisionLoading } = (0, HydratedRevisionContext_1.useHydratedRevision)();
+    const { integrationObj, installation, groupRef, consumerRef, setInstallation, } = (0, InstallIntegrationContextProvider_1.useInstallIntegrationProps)();
+    const { selectedConnection } = (0, ConnectionsContextProvider_1.useConnections)();
+    const [createInstallLoading, setCreateInstallLoading] = (0, react_1.useState)(false);
+    const isLoading = hydratedRevisionLoading || createInstallLoading;
+    const provider = (_a = hydratedRevision === null || hydratedRevision === void 0 ? void 0 : hydratedRevision.content) === null || _a === void 0 ? void 0 : _a.provider;
+    const isProxyOnly = getIsProxyOnly(hydratedRevision);
+    (0, react_1.useEffect)(() => {
+        if (hydratedRevision && isProxyOnly && !installation && selectedConnection && apiKey && (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id)) {
+            setCreateInstallLoading(true);
+            (0, createInstallationProxyOnly_1.createInstallationProxyOnly)({
+                apiKey,
+                projectId,
+                integrationId: integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id,
+                groupRef,
+                consumerRef,
+                connectionId: selectedConnection === null || selectedConnection === void 0 ? void 0 : selectedConnection.id,
+                hydratedRevision,
+                setInstallation,
+            }).then(() => {
+                setCreateInstallLoading(false);
+            }).catch((e) => {
+                setCreateInstallLoading(false);
+                console.error('Error when creating proxy installation:', e);
+            });
+        }
+    }, [hydratedRevision, isProxyOnly, installation,
+        selectedConnection, apiKey, projectId, integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id, groupRef, consumerRef, setInstallation]);
+    if (!integrationObj)
+        return (0, jsx_runtime_1.jsx)(ErrorTextBox_1.ErrorTextBox, { message: "We can't load the integration" });
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, {});
+    if (isProxyOnly && provider && installation)
+        return (0, jsx_runtime_1.jsx)(InstalledSuccessBox_1.InstalledSuccessBox, { provider: provider });
+    return ((0, jsx_runtime_1.jsx)("div", { children: children }));
+}
+exports.ConditionalProxyLayout = ConditionalProxyLayout;

package/build/src/components/Configure/layout/ConditionalProxyLayout/InstalledSuccessBox.d.ts

@@ -0,0 +1,5 @@
+type InstalledSuccessBoxProps = {
+    provider: string;
+};
+export declare function InstalledSuccessBox({ provider }: InstalledSuccessBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Configure/layout/ConditionalProxyLayout/InstalledSuccessBox.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InstalledSuccessBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../../utils");
+const SuccessTextBox_1 = require("../../../SuccessTextBox");
+function InstalledSuccessBox({ provider }) {
+    const text = `You have successfully installed your ${(0, utils_1.capitalize)(provider)} integration.`;
+    return ((0, jsx_runtime_1.jsx)(SuccessTextBox_1.SuccessTextBox, { text: text }));
+}
+exports.InstalledSuccessBox = InstalledSuccessBox;

package/build/src/components/Configure/{ProtectedConnectionLayout.d.ts → layout/ProtectedConnectionLayout.d.ts}

@@ -5,7 +5,8 @@ interface ProtectedConnectionLayoutProps {
     consumerName?: string;
     groupRef: string;
     groupName?: string;
+    onSuccess?: (connectionID: string) => void;
     children: JSX.Element;
 }
-export declare function ProtectedConnectionLayout({ provider, consumerRef, consumerName, groupRef, groupName, children, }: ProtectedConnectionLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProtectedConnectionLayout({ provider, consumerRef, consumerName, groupRef, groupName, children, onSuccess, }: ProtectedConnectionLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/src/components/Configure/{ProtectedConnectionLayout.js → layout/ProtectedConnectionLayout.js}

@@ -3,32 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProtectedConnectionLayout = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const constants_1 = require("../../constants");
-const ConnectionsContext_1 = require("../../context/ConnectionsContext");
-const InstallIntegrationContext_1 = require("../../context/InstallIntegrationContext");
-const HubspotOauthFlow_1 = require("../Oauth/Hubspot/HubspotOauthFlow");
-const SalesforceOauthFlow_1 = require("../Oauth/Salesforce/SalesforceOauthFlow");
-function ProtectedConnectionLayout({ provider, consumerRef, consumerName, groupRef, groupName, children, }) {
-    const { selectedConnection, setSelectedConnection, connections } = (0, ConnectionsContext_1.useConnections)();
+const constants_1 = require("../../../constants");
+const ConnectionsContextProvider_1 = require("../../../context/ConnectionsContextProvider");
+const InstallIntegrationContextProvider_1 = require("../../../context/InstallIntegrationContextProvider");
+const useConnectionHandler_1 = require("../../Connect/useConnectionHandler");
+const NoSubdomainOauthFlow_1 = require("../../Oauth/NoSubdomainEntry/NoSubdomainOauthFlow");
+const SalesforceOauthFlow_1 = require("../../Oauth/Salesforce/SalesforceOauthFlow");
+function ProtectedConnectionLayout({ provider, consumerRef, consumerName, groupRef, groupName, children, onSuccess, }) {
+    const { provider: providerFromProps } = (0, InstallIntegrationContextProvider_1.useInstallIntegrationProps)();
+    const { selectedConnection, setSelectedConnection, connections } = (0, ConnectionsContextProvider_1.useConnections)();
+    (0, useConnectionHandler_1.useConnectionHandler)({ onSuccess });
     (0, react_1.useEffect)(() => {
         if (!selectedConnection && connections && connections.length > 0) {
             const [connection] = connections;
             setSelectedConnection(connection);
         }
     }, [connections, selectedConnection, setSelectedConnection]);
-    const { provider: providerFromProps } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
     if (!provider && !providerFromProps) {
         throw new Error('ProtectedConnectionLayout must be given a provider prop or be used within InstallIntegrationProvider');
     }
     // a selected connection exists, render children
     if (selectedConnection)
         return children;
-    if (provider === constants_1.PROVIDER_SALESFORCE || providerFromProps === constants_1.PROVIDER_SALESFORCE) {
+    const selectedProvider = provider || providerFromProps;
+    if (selectedProvider === constants_1.PROVIDER_SALESFORCE) {
         return ((0, jsx_runtime_1.jsx)(SalesforceOauthFlow_1.SalesforceOauthFlow, { consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName }));
     }
-    if (provider === constants_1.PROVIDER_HUBSPOT || providerFromProps === constants_1.PROVIDER_HUBSPOT) {
-        return ((0, jsx_runtime_1.jsx)(HubspotOauthFlow_1.HubspotOauthFlow, { consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName }));
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { children: "Unsupported provider" }));
+    return ((0, jsx_runtime_1.jsx)(NoSubdomainOauthFlow_1.NoSubdomainOauthFlow, { provider: selectedProvider, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName }));
 }
 exports.ProtectedConnectionLayout = ProtectedConnectionLayout;

package/build/src/components/Configure/{ObjectManagementNav → nav/ObjectManagementNav}/NavObjectItem.d.ts

@@ -3,6 +3,7 @@ interface NavObjectItemProps {
     objectName: string;
     completed: boolean;
     pending?: boolean;
+    displayName?: string;
 }
 export declare const NavObjectItem: import("react").ForwardRefExoticComponent<NavObjectItemProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/build/src/components/Configure/{ObjectManagementNav → nav/ObjectManagementNav}/NavObjectItem.js

@@ -4,11 +4,11 @@ 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) => {
+const NavIcon_1 = require("../../../../assets/NavIcon");
+exports.NavObjectItem = (0, react_1.forwardRef)(({ objectName, completed, pending, displayName, }, 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] })));
+    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: displayName || objectName }), pending && (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: 10, fontStyle: "italic", children: "pending" })] })] }), tabProps.children] })));
 });

package/build/src/components/Configure/nav/ObjectManagementNav/OtherTab.d.ts

@@ -0,0 +1,7 @@
+type OtherTabProps = {
+    pending?: boolean;
+    completed: boolean;
+    displayName?: 'other' | 'write';
+};
+export declare function OtherTab({ pending, completed, displayName }: OtherTabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Configure/nav/ObjectManagementNav/OtherTab.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OtherTab = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const constant_1 = require("./constant");
+const NavObjectItem_1 = require("./NavObjectItem");
+function OtherTab({ pending, completed, displayName }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Divider, { marginY: 3 }), (0, jsx_runtime_1.jsx)(NavObjectItem_1.NavObjectItem, { objectName: constant_1.OTHER_CONST, completed: completed, pending: pending, displayName: displayName }, "other-write")] }));
+}
+exports.OtherTab = OtherTab;

package/build/src/components/Configure/{ObjectManagementNav → nav/ObjectManagementNav}/UninstallInstallation.d.ts

@@ -2,6 +2,6 @@
 interface NavObjectItemProps {
     text?: string;
 }
-export declare const UNINSTALL_INSTALLATION_CONST = "uninstall-intallation";
+export declare const UNINSTALL_INSTALLATION_CONST = "uninstall-installation";
 export declare const UninstallInstallation: import("react").ForwardRefExoticComponent<NavObjectItemProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/build/src/components/Configure/{ObjectManagementNav → nav/ObjectManagementNav}/UninstallInstallation.js

@@ -4,8 +4,8 @@ exports.UninstallInstallation = exports.UNINSTALL_INSTALLATION_CONST = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
-const TrashIcon_1 = require("../../../assets/TrashIcon");
-exports.UNINSTALL_INSTALLATION_CONST = 'uninstall-intallation';
+const TrashIcon_1 = require("../../../../assets/TrashIcon");
+exports.UNINSTALL_INSTALLATION_CONST = 'uninstall-installation';
 exports.UninstallInstallation = (0, react_1.forwardRef)(({ text = 'Uninstall' }, ref) => {
     // 1. Reuse the `useTab` hook
     const tabProps = (0, react_2.useTab)({ ref });

package/build/src/components/Configure/nav/ObjectManagementNav/constant.d.ts

@@ -0,0 +1 @@
+export declare const OTHER_CONST = "other";

package/build/src/components/Configure/nav/ObjectManagementNav/constant.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OTHER_CONST = void 0;
+exports.OTHER_CONST = 'other';

package/build/src/components/Configure/{ObjectManagementNav → nav/ObjectManagementNav}/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const SelectedObjectNameContext: import("react").Context<string | null | undefined>;
 export declare function useSelectedObjectName(): {
     selectedObjectName: string | undefined;
 };