@amp-labs/react 1.5.0 → 1.5.2

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

@@ -8,7 +8,7 @@ const useSelectedConfigureState_1 = require("../../useSelectedConfigureState");
 const FieldHeader_1 = require("../FieldHeader");
 const setOptionalField_1 = require("./setOptionalField");
 function OptionalFields() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b;
     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) => {
@@ -17,13 +17,25 @@ function OptionalFields() {
             (0, setOptionalField_1.setOptionalField)(selectedObjectName, setConfigureState, name, checked);
         }
     };
-    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, maxHeight: 300, overflowY: "scroll", border: "2px solid #EFEFEF", borderRadius: 8, gap: 0, 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, { paddingX: 4, paddingY: 2, 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
-                }) })] })));
+    const readOptionalFields = (_b = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _b === void 0 ? void 0 : _b.optionalFields;
+    const onSelectAllCheckboxChange = (e) => {
+        const { checked } = e.target;
+        if (selectedObjectName && readOptionalFields) {
+            readOptionalFields.forEach((field) => {
+                if (!(0, utils_1.isIntegrationFieldMapping)(field)) {
+                    (0, setOptionalField_1.setOptionalField)(selectedObjectName, setConfigureState, field.fieldName, checked);
+                }
+            });
+        }
+    };
+    const shouldRender = !!(readOptionalFields && readOptionalFields.length > 0);
+    const isAllChecked = Object.keys(selectedOptionalFields || {}).length === (readOptionalFields === null || readOptionalFields === void 0 ? void 0 : readOptionalFields.length);
+    const isIndeterminate = !isAllChecked && Object.keys(selectedOptionalFields || {}).length > 0;
+    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.jsxs)(react_1.Stack, { marginBottom: 10, maxHeight: 300, overflowY: "scroll", border: "2px solid #EFEFEF", borderRadius: 8, gap: 0, children: [((readOptionalFields === null || readOptionalFields === void 0 ? void 0 : readOptionalFields.length) || 0) >= 2 && ((0, jsx_runtime_1.jsx)(react_1.Box, { backgroundColor: "gray.50", paddingX: 4, paddingY: 2, children: (0, jsx_runtime_1.jsx)(react_1.Checkbox, { name: "selectAll", id: "selectAll", onChange: onSelectAllCheckboxChange, isIndeterminate: isIndeterminate, isChecked: isAllChecked, children: "Select all" }) })), readOptionalFields.map((field) => {
+                        if (!(0, utils_1.isIntegrationFieldMapping)(field)) {
+                            return ((0, jsx_runtime_1.jsx)(react_1.Box, { paddingX: 4, paddingY: 2, 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
+                    })] })] })));
 }
 exports.OptionalFields = OptionalFields;

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

@@ -11,7 +11,7 @@ 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)
+    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", display: "flex", gap: 1, 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);

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

@@ -36,7 +36,8 @@ function ConditionalProxyLayout({ children }) {
     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 (!isLoading && hydratedRevision && isProxyOnly && !installation && selectedConnection && apiKey && (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id)) {
+        if (!isLoading && hydratedRevision && isProxyOnly
+            && !installation && selectedConnection && apiKey && (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id)) {
             setCreateInstallLoading(true);
             (0, onCreateInstallationProxyOnly_1.onCreateInstallationProxyOnly)({
                 apiKey,

package/build/src/components/Oauth/NoWorkspaceEntry/NoWorkspaceOauthFlow.js

@@ -1,7 +1,4 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NoWorkspaceOauthFlow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -12,8 +9,8 @@ const react_1 = require("react");
 const ApiKeyContextProvider_1 = require("../../../context/ApiKeyContextProvider");
 const ProjectContextProvider_1 = require("../../../context/ProjectContextProvider");
 const utils_1 = require("../../../utils");
-const fetchOAuthCallbackURL_1 = require("../fetchOAuthCallbackURL");
-const OAuthPopup_1 = __importDefault(require("../OAuthPopup"));
+const fetchOAuthPopupURL_1 = require("../fetchOAuthPopupURL");
+const OAuthWindow_1 = require("../OAuthWindow/OAuthWindow");
 const LandingContent_1 = require("./LandingContent");
 /**
  * NoWorkspaceOauthFlow first prompts user with a next button,
@@ -22,25 +19,25 @@ const LandingContent_1 = require("./LandingContent");
 function NoWorkspaceOauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }) {
     const { projectId } = (0, ProjectContextProvider_1.useProject)();
     const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
-    const [oAuthCallbackURL, setOAuthCallbackURL] = (0, react_1.useState)(null);
+    const [oAuthPopupURL, setOAuthPopupURL] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     //  fetch OAuth callback URL from connection so that oath popup can be launched
     const handleSubmit = async () => {
         var _a;
         setError(null);
         try {
-            const url = await (0, fetchOAuthCallbackURL_1.fetchOAuthCallbackURL)(projectId, consumerRef, groupRef, apiKey, provider, undefined, consumerName, groupName);
-            setOAuthCallbackURL(url);
+            const url = await (0, fetchOAuthPopupURL_1.fetchOAuthPopupURL)(projectId, consumerRef, groupRef, apiKey, provider, undefined, consumerName, groupName);
+            setOAuthPopupURL(url);
         }
         catch (err) {
-            console.error(err);
+            console.error('Could not fetch OAuth popup URL', { err });
             setError((_a = err.message) !== null && _a !== void 0 ? _a : 'Unexpected error');
         }
     };
     const onClose = (0, react_1.useCallback)((err) => {
         setError(err);
-        setOAuthCallbackURL(null);
+        setOAuthPopupURL(null);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(OAuthPopup_1.default, { title: `Connect to ${(0, utils_1.capitalize)(provider)}`, url: oAuthCallbackURL, onClose: onClose, children: (0, jsx_runtime_1.jsx)(LandingContent_1.LandingContent, { provider: provider, handleSubmit: handleSubmit, error: error }) }));
+    return ((0, jsx_runtime_1.jsx)(OAuthWindow_1.OAuthWindow, { windowTitle: `Connect to ${(0, utils_1.capitalize)(provider)}`, oauthUrl: oAuthPopupURL, onClose: onClose, children: (0, jsx_runtime_1.jsx)(LandingContent_1.LandingContent, { provider: provider, handleSubmit: handleSubmit, error: error }) }));
 }
 exports.NoWorkspaceOauthFlow = NoWorkspaceOauthFlow;

package/build/src/components/Oauth/OAuthWindow/OAuthWindow.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+type OAuthWindowProps = {
+    children: React.ReactNode;
+    windowTitle: string;
+    oauthUrl: string | null;
+    onClose: (err: string | null) => void;
+};
+/**
+ * v2 OAuth window to manage OAuth flow
+ * @param param0
+ * @returns
+ */
+export declare function OAuthWindow({ children, oauthUrl, windowTitle, onClose, }: OAuthWindowProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Oauth/OAuthWindow/OAuthWindow.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OAuthWindow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ApiKeyContextProvider_1 = require("../../../context/ApiKeyContextProvider");
+const ConnectionsContextProvider_1 = require("../../../context/ConnectionsContextProvider");
+const ProjectContextProvider_1 = require("../../../context/ProjectContextProvider");
+const windowHelpers_1 = require("./windowHelpers");
+/**
+ * v2 OAuth window to manage OAuth flow
+ * @param param0
+ * @returns
+ */
+function OAuthWindow({ children, oauthUrl, windowTitle = 'Connect to Provider', onClose, }) {
+    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
+    const { projectId } = (0, ProjectContextProvider_1.useProject)();
+    const [connectionId, setConnectionId] = (0, react_1.useState)(null);
+    const [oauthWindow, setOauthWindow] = (0, react_1.useState)(null);
+    const { setSelectedConnection } = (0, ConnectionsContextProvider_1.useConnections)();
+    const receiveMessage = (0, windowHelpers_1.getReceiveMessageEventHandler)(setConnectionId);
+    const openOAuthWindow = (0, windowHelpers_1.getOpenWindowHandler)(windowTitle, setOauthWindow, receiveMessage, oauthUrl);
+    const refreshConnections = (0, windowHelpers_1.getRefreshConnectionHandler)(projectId, apiKey, setSelectedConnection);
+    // open the OAuth window on mount and prop change
+    (0, react_1.useEffect)(() => {
+        if (oauthUrl && !oauthWindow) {
+            openOAuthWindow(); // creates new window and adds event listener
+        }
+    }, [oauthUrl, oauthWindow, openOAuthWindow, receiveMessage, windowTitle]);
+    // refresh connections on connectionId change
+    (0, react_1.useEffect)(() => {
+        if (connectionId) {
+            refreshConnections(connectionId)
+                .then(() => {
+                oauthWindow === null || oauthWindow === void 0 ? void 0 : oauthWindow.close(); // only close the window if connection is successful
+                // console.debug('Connection successful');
+            }).catch((err) => {
+                var _a;
+                console.error('Error refreshing connection: ', err);
+                onClose((_a = err.message) !== null && _a !== void 0 ? _a : 'Unexpected error: not able to refresh connection');
+            });
+        }
+    }, [connectionId, apiKey, setSelectedConnection, refreshConnections, oauthWindow, onClose]);
+    // check if the window is closed
+    const interval = oauthWindow && setInterval(() => {
+        if (((oauthWindow === null || oauthWindow === void 0 ? void 0 : oauthWindow.closed) || !oauthWindow) && !!interval) {
+            clearInterval(interval);
+            // cleanup event listener and window reference
+            window.removeEventListener('message', receiveMessage);
+            setOauthWindow(null);
+            if (!connectionId) {
+                // if connectionId is not set, then set OAuth failed error
+                console.error('OAuth failed. Please try again.');
+                if (onClose)
+                    onClose('OAuth failed. Please try again.');
+            }
+            else if (connectionId && onClose) {
+                // if connectionId is set, then set OAuth success -- no error in onClose
+                onClose(null);
+            }
+        }
+    }, 500);
+    return (0, jsx_runtime_1.jsx)("div", { children: children });
+}
+exports.OAuthWindow = OAuthWindow;

package/build/src/components/Oauth/OAuthWindow/windowHelpers.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Connection } from '../../../services/api';
+/**
+ * returns a function to refresh the connection
+ * @param projectId
+ * @param apiKey
+ * @param setSelectedConnection
+ * @returns
+ */
+export declare function getRefreshConnectionHandler(projectId: string, apiKey: string, setSelectedConnection: React.Dispatch<React.SetStateAction<Connection | null>>): (_connectionId: string) => Promise<void>;
+/**
+ * opens a new window with the OAuth URL
+ *  side effect: adds a message event listener to the window
+ * @param oauthUrl
+ * @param windowTitle
+ * @param setOauthWindow
+ * @param receiveMessage
+ * @returns a function to open the oauth window
+ */
+export declare function getOpenWindowHandler(windowTitle: string, setOauthWindow: React.Dispatch<React.SetStateAction<Window | null>>, receiveMessage: (event: MessageEvent) => void, oauthUrl: string | null): () => void;
+/**
+  * returns a function to handle the message event
+  */
+export declare function getReceiveMessageEventHandler(setConnectionId: React.Dispatch<React.SetStateAction<null>>): (event: MessageEvent) => void;

package/build/src/components/Oauth/OAuthWindow/windowHelpers.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReceiveMessageEventHandler = exports.getOpenWindowHandler = exports.getRefreshConnectionHandler = void 0;
+const react_1 = require("react");
+const api_1 = require("../../../services/api");
+const DEFAULT_WIDTH = 600; // px
+const DEFAULT_HEIGHT = 600; // px
+const SUCCESS_EVENT = 'AUTHORIZATION_SUCCEEDED';
+const FAILURE_EVENT = 'AUTHORIZATION_FAILED';
+/**
+ * returns a function to refresh the connection
+ * @param projectId
+ * @param apiKey
+ * @param setSelectedConnection
+ * @returns
+ */
+function getRefreshConnectionHandler(projectId, apiKey, setSelectedConnection) {
+    return (0, react_1.useCallback)(async (_connectionId) => {
+        const connection = await (0, api_1.api)().connectionApi.getConnection({ projectId, connectionId: _connectionId }, {
+            headers: { 'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '' },
+        });
+        setSelectedConnection(connection);
+    }, [projectId, apiKey, setSelectedConnection]);
+}
+exports.getRefreshConnectionHandler = getRefreshConnectionHandler;
+/**
+ * opens a new window with the OAuth URL
+ *  side effect: adds a message event listener to the window
+ * @param oauthUrl
+ * @param windowTitle
+ * @param setOauthWindow
+ * @param receiveMessage
+ * @returns a function to open the oauth window
+ */
+function getOpenWindowHandler(windowTitle, setOauthWindow, receiveMessage, oauthUrl) {
+    return (0, react_1.useCallback)(() => {
+        if (!oauthUrl)
+            return;
+        const left = window.screenX + (window.outerWidth - DEFAULT_WIDTH) / 2;
+        const top = window.screenY + (window.outerHeight - DEFAULT_HEIGHT) / 2.5;
+        const windowDimensions = `width=${DEFAULT_WIDTH},height=${DEFAULT_HEIGHT},left=${left},top=${top}`;
+        // creates a new window
+        const newWindow = window.open(oauthUrl, windowTitle, windowDimensions);
+        setOauthWindow(newWindow);
+        window.addEventListener('message', receiveMessage, false);
+    }, [oauthUrl, windowTitle, setOauthWindow, receiveMessage]);
+}
+exports.getOpenWindowHandler = getOpenWindowHandler;
+/**
+  * returns a function to handle the message event
+  */
+function getReceiveMessageEventHandler(setConnectionId) {
+    return (0, react_1.useCallback)((event) => {
+        var _a;
+        // Ignore messages from unexpected origins
+        if (event.origin !== api_1.AMP_SERVER) {
+            return;
+        }
+        // success case
+        if (event.data.eventType === SUCCESS_EVENT) {
+            const connection = (_a = event.data.data) === null || _a === void 0 ? void 0 : _a.connection; // connection id
+            if (connection) {
+                setConnectionId(connection);
+                // do not close the window if connection is successful yet
+            }
+            else {
+                console.error('Connection ID not found in event data: ', { event });
+            }
+        }
+        // failure case
+        if (event.data.eventType === FAILURE_EVENT) {
+            console.error('OAuth failed: ', { event });
+            // do not close the window if error occurs
+        }
+    }, [setConnectionId]);
+}
+exports.getReceiveMessageEventHandler = getReceiveMessageEventHandler;

package/build/src/components/Oauth/WorkspaceEntry/WorkspaceOauthFlow.js

@@ -1,7 +1,4 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WorkspaceOauthFlow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -9,8 +6,8 @@ const react_1 = require("react");
 const ApiKeyContextProvider_1 = require("../../../context/ApiKeyContextProvider");
 const ProjectContextProvider_1 = require("../../../context/ProjectContextProvider");
 const utils_1 = require("../../../utils");
-const fetchOAuthCallbackURL_1 = require("../fetchOAuthCallbackURL");
-const OAuthPopup_1 = __importDefault(require("../OAuthPopup"));
+const fetchOAuthPopupURL_1 = require("../fetchOAuthPopupURL");
+const OAuthWindow_1 = require("../OAuthWindow/OAuthWindow");
 const SalesforceSubdomainEntry_1 = require("../Salesforce/SalesforceSubdomainEntry");
 const WorkspaceEntry_1 = require("./WorkspaceEntry");
 const PROVIDER_SALESFORCE = 'salesforce';
@@ -34,7 +31,7 @@ function WorkspaceOauthFlow({ provider, consumerRef, consumerName, groupRef, gro
             return;
         }
         try {
-            const url = await (0, fetchOAuthCallbackURL_1.fetchOAuthCallbackURL)(projectId, consumerRef, groupRef, apiKey, provider, workspace, consumerName, groupName);
+            const url = await (0, fetchOAuthPopupURL_1.fetchOAuthPopupURL)(projectId, consumerRef, groupRef, apiKey, provider, workspace, consumerName, groupName);
             setOAuthCallbackURL(url);
         }
         catch (err) {
@@ -51,6 +48,6 @@ function WorkspaceOauthFlow({ provider, consumerRef, consumerName, groupRef, gro
         ? ((0, jsx_runtime_1.jsx)(SalesforceSubdomainEntry_1.SalesforceSubdomainEntry, { handleSubmit: handleSubmit, setWorkspace: setWorkspace, error: error, isButtonDisabled: workspace.length === 0 })) : (
     // general workspace entry component
     (0, jsx_runtime_1.jsx)(WorkspaceEntry_1.WorkspaceEntry, { provider: provider, handleSubmit: handleSubmit, setWorkspace: setWorkspace, error: error, isButtonDisabled: workspace.length === 0 }));
-    return ((0, jsx_runtime_1.jsx)(OAuthPopup_1.default, { title: `Connect to ${(0, utils_1.capitalize)(provider)}`, url: oAuthCallbackURL, onClose: onClose, children: workspaceEntryComponent }));
+    return ((0, jsx_runtime_1.jsx)(OAuthWindow_1.OAuthWindow, { windowTitle: `Connect to ${(0, utils_1.capitalize)(provider)}`, oauthUrl: oAuthCallbackURL, onClose: onClose, children: workspaceEntryComponent }));
 }
 exports.WorkspaceOauthFlow = WorkspaceOauthFlow;

package/build/src/components/Oauth/fetchOAuthPopupURL.d.ts

@@ -0,0 +1 @@
+export declare const fetchOAuthPopupURL: (projectId: string, consumerRef: string, groupRef: string, apiKey: string, provider: string, workspace?: string, consumerName?: string, groupName?: string) => Promise<string>;

package/build/src/components/Oauth/{fetchOAuthCallbackURL.js → fetchOAuthPopupURL.js}

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fetchOAuthCallbackURL = void 0;
+exports.fetchOAuthPopupURL = void 0;
 const api_1 = require("../../services/api");
 const utils_1 = require("../../utils");
-const fetchOAuthCallbackURL = async (projectId, consumerRef, groupRef, apiKey, provider, workspace, consumerName, groupName) => {
+const fetchOAuthPopupURL = async (projectId, consumerRef, groupRef, apiKey, provider, workspace, consumerName, groupName) => {
     const providerApps = await (0, api_1.api)().providerAppApi.listProviderApps({ projectId }, {
         headers: { 'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '' },
     });
     const app = providerApps.find((a) => a.provider === provider);
     if (!app) {
-        throw new Error(`You must first set up a ${(0, utils_1.capitalize)(provider)} Connected App using the Ampersand Console.`);
+        throw new Error(`You must first set up a ${(0, utils_1.capitalize)(provider)} Provider App using the Ampersand Console.`);
     }
-    const url = await (0, api_1.api)().oAuthApi.oauthConnect({
+    const request = {
         connectOAuthParams: {
             providerWorkspaceRef: workspace,
             projectId,
@@ -22,7 +22,8 @@ const fetchOAuthCallbackURL = async (projectId, consumerRef, groupRef, apiKey, p
             providerAppId: app.id,
             provider,
         },
-    });
+    };
+    const url = await (0, api_1.api)().oAuthApi.oauthConnect(request);
     return url;
 };
-exports.fetchOAuthCallbackURL = fetchOAuthCallbackURL;
+exports.fetchOAuthPopupURL = fetchOAuthPopupURL;

package/build/src/services/api.d.ts

@@ -1,4 +1,4 @@
-import { Config, Connection, CreateInstallationOperationRequest, CreateInstallationRequestConfig, HydratedIntegrationField, HydratedIntegrationFieldExistent, HydratedIntegrationObject, HydratedIntegrationRead, HydratedIntegrationWrite, HydratedIntegrationWriteObject, HydratedRevision, Installation, Integration, IntegrationFieldMapping, Project, ProviderApp, ProviderInfo, UpdateInstallationOperationRequest, UpdateInstallationRequestInstallationConfig } from '../../generated-sources/api/src';
+import { Config, Connection, CreateInstallationOperationRequest, CreateInstallationRequestConfig, HydratedIntegrationField, HydratedIntegrationFieldExistent, HydratedIntegrationObject, HydratedIntegrationRead, HydratedIntegrationWrite, HydratedIntegrationWriteObject, HydratedRevision, Installation, Integration, IntegrationFieldMapping, OauthConnectOperationRequest, Project, ProviderApp, ProviderInfo, UpdateInstallationOperationRequest, UpdateInstallationRequestInstallationConfig } from '../../generated-sources/api/src';
 import { ApiService } from './ApiService';
 export declare const AMP_SERVER: string;
 export declare const AMP_API_ROOT: string;
@@ -7,4 +7,4 @@ export declare const api: () => ApiService;
 /**
    * Types exported from generated api
    */
-export type { Config, Connection, CreateInstallationOperationRequest, CreateInstallationRequestConfig, HydratedIntegrationRead, HydratedIntegrationWrite, HydratedIntegrationWriteObject, HydratedIntegrationObject, HydratedIntegrationField, HydratedRevision, Installation, Integration, HydratedIntegrationFieldExistent, IntegrationFieldMapping, Project, ProviderApp, ProviderInfo, UpdateInstallationOperationRequest, UpdateInstallationRequestInstallationConfig, };
+export type { Config, Connection, CreateInstallationOperationRequest, CreateInstallationRequestConfig, HydratedIntegrationRead, HydratedIntegrationWrite, HydratedIntegrationWriteObject, HydratedIntegrationObject, HydratedIntegrationField, HydratedRevision, Installation, Integration, HydratedIntegrationFieldExistent, IntegrationFieldMapping, OauthConnectOperationRequest, Project, ProviderApp, ProviderInfo, UpdateInstallationOperationRequest, UpdateInstallationRequestInstallationConfig, };

package/build/src/services/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.5.0";
+export declare const LIB_VERSION = "1.5.2";

package/build/src/services/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amp-labs/react",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Ampersand React library.",
   "author": {
     "name": "Ampersand Labs",
@@ -49,12 +49,12 @@
     "@openapitools/openapi-generator-cli": "^2.7.0",
     "@types/lodash.isequal": "^4.5.7",
     "@types/react": "^18.2.33",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@typescript-eslint/eslint-plugin": "^7.10.0",
+    "@typescript-eslint/parser": "^7.10.0",
     "babel-jest": "^29.7.0",
     "eslint": "^8.52.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-n": "^17.2.0",

package/build/src/components/Oauth/OAuthPopup.d.ts

@@ -1,14 +0,0 @@
-/**
- * OAuthPopup.tsx
- *
- * Takes a URL and creates a popup showing that page.
- */
-import React from 'react';
-type PopupProps = {
-    url: string | null;
-    title: string;
-    onClose: (err: string | null) => void;
-    children: React.ReactNode;
-};
-declare function OAuthPopup({ title, url, children, onClose, }: PopupProps): import("react/jsx-runtime").JSX.Element;
-export default OAuthPopup;

package/build/src/components/Oauth/OAuthPopup.js

@@ -1,79 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * OAuthPopup.tsx
- *
- * Takes a URL and creates a popup showing that page.
- */
-const react_1 = require("react");
-const ApiKeyContextProvider_1 = require("../../context/ApiKeyContextProvider");
-const ConnectionsContextProvider_1 = require("../../context/ConnectionsContextProvider");
-const ProjectContextProvider_1 = require("../../context/ProjectContextProvider");
-const api_1 = require("../../services/api");
-const DEFAULT_WIDTH = 600; // px
-const DEFAULT_HEIGHT = 600; // px
-const DEFAULT_INTERVAL = 500; // ms
-const SUCCESS_EVENT = 'AUTHORIZATION_SUCCEEDED';
-const FAILURE_EVENT = 'AUTHORIZATION_FAILED';
-const createPopup = ({ url, title, }) => {
-    const left = window.screenX + (window.outerWidth - DEFAULT_WIDTH) / 2;
-    const top = window.screenY + (window.outerHeight - DEFAULT_HEIGHT) / 2.5; // a lil shorter
-    const popup = window.open(url, title, `width=${DEFAULT_WIDTH},height=${DEFAULT_HEIGHT},left=${left},top=${top}`);
-    return popup;
-};
-function OAuthPopup({ title = '', url, children, onClose, }) {
-    const { projectId } = (0, ProjectContextProvider_1.useProject)();
-    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
-    const [externalWindow, setExternalWindow] = (0, react_1.useState)();
-    const intervalRef = (0, react_1.useRef)();
-    const clearTimer = () => window.clearInterval(intervalRef.current);
-    const { setSelectedConnection } = (0, ConnectionsContextProvider_1.useConnections)();
-    (0, react_1.useEffect)(() => {
-        if (url)
-            setExternalWindow(createPopup({ url, title }));
-    }, [url, title]);
-    const refreshConnections = (0, react_1.useCallback)(async (connectionId) => {
-        const connection = await (0, api_1.api)().connectionApi.getConnection({ projectId, connectionId }, {
-            headers: { 'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '' },
-        });
-        setSelectedConnection(connection);
-    }, [projectId, apiKey, setSelectedConnection]);
-    (0, react_1.useEffect)(() => {
-        window.addEventListener('message', (event) => {
-            var _a, _b, _c, _d, _e;
-            if (event.origin === api_1.AMP_SERVER) {
-                //  this event come from our own server
-                if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.eventType) === SUCCESS_EVENT) {
-                    clearTimer();
-                    const connectionId = (_b = event.data.data) === null || _b === void 0 ? void 0 : _b.connection;
-                    if (!connectionId) {
-                        console.error('Ampersand server returned a successful authorization event, but did not return a connection ID.');
-                        onClose('There is an unexpected server issue.');
-                    }
-                    else {
-                        refreshConnections(connectionId);
-                        onClose(null);
-                    }
-                }
-                else if (((_c = event.data) === null || _c === void 0 ? void 0 : _c.eventType) === FAILURE_EVENT) {
-                    clearTimer();
-                    onClose((_e = (_d = event.data.data) === null || _d === void 0 ? void 0 : _d.message) !== null && _e !== void 0 ? _e : 'There was an error logging you in. Please try again.');
-                }
-            }
-        });
-    }, [externalWindow, onClose, refreshConnections]);
-    (0, react_1.useEffect)(() => {
-        if (externalWindow && !intervalRef.current) {
-            intervalRef.current = window.setInterval(() => {
-                // Check if window was closed prematurely.
-                if (!externalWindow || externalWindow.closed) {
-                    clearTimer();
-                    onClose('The popup was closed too quickly. Please try again.');
-                }
-            }, DEFAULT_INTERVAL);
-        }
-    }, [externalWindow, onClose]);
-    return ((0, jsx_runtime_1.jsx)("div", { children: children }));
-}
-exports.default = OAuthPopup;

package/build/src/components/Oauth/fetchOAuthCallbackURL.d.ts

@@ -1 +0,0 @@
-export declare const fetchOAuthCallbackURL: (projectId: string, consumerRef: string, groupRef: string, apiKey: string, provider: string, workspace?: string, consumerName?: string, groupName?: string) => Promise<string>;