@amp-labs/react 1.5.0 → 1.5.1

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/OAuthPopup.d.ts

@@ -1,6 +1,6 @@
 /**
  * OAuthPopup.tsx
- *
+ * @deprecated - this page will be deleted in the future
  * Takes a URL and creates a popup showing that page.
  */
 import React from 'react';
@@ -10,5 +10,11 @@ type PopupProps = {
     onClose: (err: string | null) => void;
     children: React.ReactNode;
 };
+/**
+ * v1 popup to manage oauth flow
+ * @deprecated
+ * @param param0
+ * @returns
+ */
 declare function OAuthPopup({ title, url, children, onClose, }: PopupProps): import("react/jsx-runtime").JSX.Element;
 export default OAuthPopup;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * OAuthPopup.tsx
- *
+ * @deprecated - this page will be deleted in the future
  * Takes a URL and creates a popup showing that page.
  */
 const react_1 = require("react");
@@ -22,6 +22,12 @@ const createPopup = ({ url, title, }) => {
     const popup = window.open(url, title, `width=${DEFAULT_WIDTH},height=${DEFAULT_HEIGHT},left=${left},top=${top}`);
     return popup;
 };
+/**
+ * v1 popup to manage oauth flow
+ * @deprecated
+ * @param param0
+ * @returns
+ */
 function OAuthPopup({ title = '', url, children, onClose, }) {
     const { projectId } = (0, ProjectContextProvider_1.useProject)();
     const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();

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

@@ -9,7 +9,7 @@ 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 fetchOAuthPopupURL_1 = require("../fetchOAuthPopupURL");
 const OAuthPopup_1 = __importDefault(require("../OAuthPopup"));
 const SalesforceSubdomainEntry_1 = require("../Salesforce/SalesforceSubdomainEntry");
 const WorkspaceEntry_1 = require("./WorkspaceEntry");
@@ -34,7 +34,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) {

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,9 +1,9 @@
 "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 : '' },
     });
@@ -11,7 +11,7 @@ const fetchOAuthCallbackURL = async (projectId, consumerRef, groupRef, apiKey, p
     if (!app) {
         throw new Error(`You must first set up a ${(0, utils_1.capitalize)(provider)} Connected 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.1";

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.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amp-labs/react",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "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/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>;