@amp-labs/react 1.2.0 → 1.4.0

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.onSaveWriteCreateInstallation = void 0;
-const api_1 = require("../../../../services/api");
+const createInstallationAndSetState_1 = require("../mutateAndSetState/createInstallationAndSetState");
+const isProxyEnabled_1 = require("../proxy/isProxyEnabled");
 const generateConfigWriteObjects_1 = require("./generateConfigWriteObjects");
 /**
    * gets write objects from hydratedRevision
@@ -41,7 +42,8 @@ const generateCreateWriteConfigFromConfigureState = (configureState, hydratedRev
         createdBy: `consumer:${consumerRef}`,
         content: {
             provider: hydratedRevision.content.provider,
-            // need empty read.standardObjects for update read
+            // hack: need empty read.standardObjects to be initialized for update read
+            // https://linear.app/ampersand/issue/ENG-780/bug-write-createupdate-installation-without-read
             read: {
                 standardObjects: {},
             },
@@ -50,6 +52,11 @@ const generateCreateWriteConfigFromConfigureState = (configureState, hydratedRev
             },
         },
     };
+    // insert proxy into config if it is enabled
+    const isProxyEnabled = (0, isProxyEnabled_1.getIsProxyEnabled)(hydratedRevision);
+    if (isProxyEnabled) {
+        createConfigObj.content.proxy = { enabled: true };
+    }
     return createConfigObj;
 };
 const onSaveWriteCreateInstallation = (projectId, integrationId, groupRef, consumerRef, connectionId, apiKey, hydratedRevision, configureState, setInstallation, onInstallSuccess) => {
@@ -58,28 +65,15 @@ const onSaveWriteCreateInstallation = (projectId, integrationId, groupRef, consu
         console.error('Error when generating createConfig from configureState');
         return Promise.resolve(null);
     }
-    const createInstallationRequest = {
+    return (0, createInstallationAndSetState_1.createInstallationAndSetState)({
+        createConfig,
         projectId,
         integrationId,
-        installation: {
-            groupRef,
-            connectionId,
-            config: createConfig,
-        },
-    };
-    return (0, api_1.api)().installationApi.createInstallation(createInstallationRequest, {
-        headers: {
-            'X-Api-Key': apiKey,
-            'Content-Type': 'application/json',
-        },
-    })
-        .then((installation) => {
-        // update local installation state
-        setInstallation(installation);
-        onInstallSuccess === null || onInstallSuccess === void 0 ? void 0 : onInstallSuccess(installation.id, installation.config);
-    })
-        .catch((err) => {
-        console.error('ERROR: ', err);
+        groupRef,
+        connectionId,
+        apiKey,
+        setInstallation,
+        onInstallSuccess,
     });
 };
 exports.onSaveWriteCreateInstallation = onSaveWriteCreateInstallation;

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

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

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.onSaveWriteUpdateInstallation = void 0;
 const api_1 = require("../../../../services/api");
+const isProxyEnabled_1 = require("../proxy/isProxyEnabled");
 const generateConfigWriteObjects_1 = require("./generateConfigWriteObjects");
 /**
    * given a configureState generate the config object that is need for
@@ -10,7 +11,7 @@ const generateConfigWriteObjects_1 = require("./generateConfigWriteObjects");
    * @param configureState
    * @returns
    */
-const generateUpdateWriteConfigFromConfigureState = (configureState) => {
+const generateUpdateWriteConfigFromConfigureState = (configureState, hydratedRevision) => {
     const configWriteObjects = (0, generateConfigWriteObjects_1.generateConfigWriteObjects)(configureState);
     // config request object type needs to be fixed
     const updateConfigObject = {
@@ -20,12 +21,19 @@ const generateUpdateWriteConfigFromConfigureState = (configureState) => {
             },
         },
     };
+    // insert proxy into config if it is enabled
+    const isProxyEnabled = (0, isProxyEnabled_1.getIsProxyEnabled)(hydratedRevision);
+    if (isProxyEnabled) {
+        if (!updateConfigObject.content)
+            updateConfigObject.content = {};
+        updateConfigObject.content.proxy = { enabled: true };
+    }
     return updateConfigObject;
 };
-const onSaveWriteUpdateInstallation = (projectId, integrationId, installationId, apiKey, configureState, setInstallation, onUpdateSuccess) => {
+const onSaveWriteUpdateInstallation = (projectId, integrationId, installationId, apiKey, configureState, hydratedRevision, setInstallation, onUpdateSuccess) => {
     // get configuration state
     // transform configuration state to update shape
-    const updateConfig = generateUpdateWriteConfigFromConfigureState(configureState);
+    const updateConfig = generateUpdateWriteConfigFromConfigureState(configureState, hydratedRevision);
     if (!updateConfig) {
         console.error('Error when generating write updateConfig from configureState');
         return Promise.resolve(null);

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

@@ -7,7 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  */
 const react_1 = require("react");
 const ErrorContextProvider_1 = require("../../../context/ErrorContextProvider");
-const onSaveReadCreateInstallation_1 = require("../actions/onSaveReadCreateInstallation");
+const onSaveReadCreateInstallation_1 = require("../actions/read/onSaveReadCreateInstallation");
 const onSaveWriteCreateInstallation_1 = require("../actions/write/onSaveWriteCreateInstallation");
 const constant_1 = require("../nav/ObjectManagementNav/constant");
 const utils_1 = require("../state/utils");

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

@@ -4,7 +4,7 @@ exports.UpdateInstallation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ErrorContextProvider_1 = require("../../../context/ErrorContextProvider");
-const onSaveReadUpdateInstallation_1 = require("../actions/onSaveReadUpdateInstallation");
+const onSaveReadUpdateInstallation_1 = require("../actions/read/onSaveReadUpdateInstallation");
 const onSaveWriteUpdateInstallation_1 = require("../actions/write/onSaveWriteUpdateInstallation");
 const constant_1 = require("../nav/ObjectManagementNav/constant");
 const utils_1 = require("../state/utils");
@@ -51,9 +51,9 @@ function UpdateInstallation({ installation, integrationObj }) {
         if (errorList.length > 0) {
             return;
         }
-        if (installation && selectedObjectName && apiKey && projectId && hydratedObject) {
+        if (hydratedRevision && installation && selectedObjectName && apiKey && projectId && hydratedObject) {
             setLoadingState(true);
-            const res = (0, onSaveReadUpdateInstallation_1.onSaveReadUpdateInstallation)(projectId, integrationObj.id, installation.id, selectedObjectName, apiKey, configureState, setInstallation, hydratedObject, onUpdateSuccess);
+            const res = (0, onSaveReadUpdateInstallation_1.onSaveReadUpdateInstallation)(projectId, integrationObj.id, installation.id, selectedObjectName, apiKey, configureState, setInstallation, hydratedObject, hydratedRevision, onUpdateSuccess);
             res.finally(() => {
                 setLoadingState(false);
                 resetPendingConfigurationState(selectedObjectName);
@@ -64,9 +64,9 @@ function UpdateInstallation({ installation, integrationObj }) {
         }
     };
     const onSaveWrite = () => {
-        if (installation && selectedObjectName && apiKey && projectId) {
+        if (installation && selectedObjectName && apiKey && projectId && hydratedRevision) {
             setLoadingState(true);
-            const res = (0, onSaveWriteUpdateInstallation_1.onSaveWriteUpdateInstallation)(projectId, integrationObj.id, installation.id, apiKey, configureState, setInstallation, onUpdateSuccess);
+            const res = (0, onSaveWriteUpdateInstallation_1.onSaveWriteUpdateInstallation)(projectId, integrationObj.id, installation.id, apiKey, configureState, hydratedRevision, setInstallation, onUpdateSuccess);
             res.finally(() => {
                 setLoadingState(false);
                 resetPendingConfigurationState(selectedObjectName);

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 onCreateInstallationProxyOnly_1 = require("../../actions/proxy/onCreateInstallationProxyOnly");
+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, onCreateInstallationProxyOnly_1.onCreateInstallationProxyOnly)({
+                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/layout/ProtectedConnectionLayout.js

@@ -3,12 +3,10 @@ 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 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");
+const OauthFlow_1 = require("../../Oauth/OauthFlow/OauthFlow");
 function ProtectedConnectionLayout({ provider, consumerRef, consumerName, groupRef, groupName, children, onSuccess, }) {
     const { provider: providerFromProps } = (0, InstallIntegrationContextProvider_1.useInstallIntegrationProps)();
     const { selectedConnection, setSelectedConnection, connections } = (0, ConnectionsContextProvider_1.useConnections)();
@@ -26,9 +24,6 @@ function ProtectedConnectionLayout({ provider, consumerRef, consumerName, groupR
     if (selectedConnection)
         return children;
     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 }));
-    }
-    return ((0, jsx_runtime_1.jsx)(NoSubdomainOauthFlow_1.NoSubdomainOauthFlow, { provider: selectedProvider, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName }));
+    return ((0, jsx_runtime_1.jsx)(OauthFlow_1.OauthFlow, { provider: selectedProvider, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName }));
 }
 exports.ProtectedConnectionLayout = ProtectedConnectionLayout;

package/build/src/components/Configure/state/utils.js

@@ -29,17 +29,17 @@ const generateConfigurationStateRead = (readAction, objectName, config) => {
     const optionalFieldsSaved = Object.assign({}, readSelectedFields);
     const requiredMapFieldsSaved = Object.assign({}, selectedFieldMappings);
     return {
-        allFields,
-        requiredFields,
-        optionalFields,
-        requiredMapFields,
+        allFields, // from hydrated revision
+        requiredFields, // from hydrated revision
+        optionalFields, // from hydrated revision
+        requiredMapFields, // from hydrated revision
         // selected state
         selectedOptionalFields: readSelectedFields,
         selectedFieldMappings,
         isOptionalFieldsModified: false,
         isRequiredMapFieldsModified: false,
         savedConfig: {
-            optionalFields: optionalFieldsSaved,
+            optionalFields: optionalFieldsSaved, // from config
             requiredMapFields: requiredMapFieldsSaved, // from config
         },
     };

package/build/src/components/Connect/ConnectedSuccessBox.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectedSuccessBox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
-const NavIcon_1 = require("../../assets/NavIcon");
 const ProjectContextProvider_1 = require("../../context/ProjectContextProvider");
 const utils_1 = require("../../utils");
+const SuccessTextBox_1 = require("../SuccessTextBox");
 function ConnectedSuccessBox({ provider }) {
     const { appName } = (0, ProjectContextProvider_1.useProject)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Box, { p: 8, maxWidth: "600px", minHeight: "290px", borderWidth: 1, borderRadius: 8, boxShadow: "lg", margin: "auto", marginTop: "40px", bgColor: "white", paddingTop: "100px", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { width: "100%", display: "flex", alignContent: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_1.Box, { margin: "auto", children: NavIcon_1.CheckMarkIcon }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { textAlign: "center", paddingTop: "25px", children: `You've successfully connected ${(0, utils_1.capitalize)(provider)} to ${appName}.` })] }) }));
+    const text = `You have successfully connected your ${(0, utils_1.capitalize)(provider)} account to ${appName}.`;
+    return ((0, jsx_runtime_1.jsx)(SuccessTextBox_1.SuccessTextBox, { text: text }));
 }
 exports.ConnectedSuccessBox = ConnectedSuccessBox;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LandingContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const utils_1 = require("../../../utils");
+const OauthCardLayout_1 = require("../OauthCardLayout");
+const OAuthErrorAlert_1 = require("../OAuthErrorAlert");
+function LandingContent({ provider, handleSubmit, error, isButtonDisabled, }) {
+    return ((0, jsx_runtime_1.jsx)(OauthCardLayout_1.OauthCardLayout, { children: (0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { marginTop: "16", marginBottom: "0", children: (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h4", size: "md", children: `Set up ${(0, utils_1.capitalize)(provider)} integration` }) }), (0, jsx_runtime_1.jsx)(OAuthErrorAlert_1.OAuthErrorAlert, { error: error }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Button, { isDisabled: isButtonDisabled, width: "100%", type: "submit", onClick: handleSubmit, children: "Next" })] }) }));
+}
+exports.LandingContent = LandingContent;

package/build/src/components/Oauth/{NoSubdomainEntry/NoSubdomainOauthFlow.d.ts → NoWorkspaceEntry/NoWorkspaceOauthFlow.d.ts}

@@ -1,7 +1,7 @@
 /**
- * OAuth flow for any providers that do not require the consumer to enter a subdomain first.
+ * OAuth flow for any providers that do not require the consumer to enter a workspace first.
  */
-interface NoSubdomainOauthFlowProps {
+interface NoWorkspaceOauthFlowProps {
     provider: string;
     consumerRef: string;
     consumerName?: string;
@@ -9,8 +9,8 @@ interface NoSubdomainOauthFlowProps {
     groupName?: string;
 }
 /**
- * NoSubdomainOauthFlow first prompts user with a next button,
+ * NoWorkspaceOauthFlow first prompts user with a next button,
  * then launches a popup with the OAuth flow.
  */
-export declare function NoSubdomainOauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }: NoSubdomainOauthFlowProps): import("react/jsx-runtime").JSX.Element;
+export declare function NoWorkspaceOauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }: NoWorkspaceOauthFlowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/src/components/Oauth/{NoSubdomainEntry/NoSubdomainOauthFlow.js → NoWorkspaceEntry/NoWorkspaceOauthFlow.js}

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoSubdomainOauthFlow = void 0;
+exports.NoWorkspaceOauthFlow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * OAuth flow for any providers that do not require the consumer to enter a subdomain first.
+ * OAuth flow for any providers that do not require the consumer to enter a workspace first.
  */
 const react_1 = require("react");
 const ApiKeyContextProvider_1 = require("../../../context/ApiKeyContextProvider");
@@ -16,17 +16,15 @@ const fetchOAuthCallbackURL_1 = require("../fetchOAuthCallbackURL");
 const OAuthPopup_1 = __importDefault(require("../OAuthPopup"));
 const LandingContent_1 = require("./LandingContent");
 /**
- * NoSubdomainOauthFlow first prompts user with a next button,
+ * NoWorkspaceOauthFlow first prompts user with a next button,
  * then launches a popup with the OAuth flow.
  */
-function NoSubdomainOauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }) {
+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 [error, setError] = (0, react_1.useState)(null);
-    // 1. fetch provider apps
-    // 2. find matching app to provider
-    // 3. fetch OAuth callback URL from connection so that oath popup can be launched
+    //  fetch OAuth callback URL from connection so that oath popup can be launched
     const handleSubmit = async () => {
         var _a;
         setError(null);
@@ -47,4 +45,4 @@ function NoSubdomainOauthFlow({ provider, consumerRef, consumerName, groupRef, g
     }, []);
     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 }) }));
 }
-exports.NoSubdomainOauthFlow = NoSubdomainOauthFlow;
+exports.NoWorkspaceOauthFlow = NoWorkspaceOauthFlow;

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

@@ -55,14 +55,10 @@ function OAuthPopup({ title = '', url, children, onClose, }) {
                         refreshConnections(connectionId);
                         onClose(null);
                     }
-                    if (externalWindow)
-                        externalWindow.close();
                 }
                 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 into your Salesforce subdomain. Please try again.');
-                    if (externalWindow)
-                        externalWindow.close();
+                    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.');
                 }
             }
         });

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type OauthCardLayoutProps = {
+    children: React.ReactNode;
+};
+export declare function OauthCardLayout({ children }: OauthCardLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OauthCardLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+function OauthCardLayout({ children }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Container, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { p: 8, maxWidth: "600px", borderWidth: 1, borderRadius: 8, boxShadow: "lg", textAlign: ['left'], margin: "auto", marginTop: "40px", bgColor: "white", children: children }) }));
+}
+exports.OauthCardLayout = OauthCardLayout;

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

@@ -0,0 +1,9 @@
+type OauthFlowProps = {
+    provider: string;
+    consumerRef: string;
+    consumerName?: string;
+    groupRef: string;
+    groupName?: string;
+};
+export declare function OauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }: OauthFlowProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OauthFlow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ApiKeyContextProvider_1 = require("../../../context/ApiKeyContextProvider");
+const api_1 = require("../../../services/api");
+const NoWorkspaceOauthFlow_1 = require("../NoWorkspaceEntry/NoWorkspaceOauthFlow");
+const WorkspaceOauthFlow_1 = require("../WorkspaceEntry/WorkspaceOauthFlow");
+function OauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }) {
+    var _a, _b;
+    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
+    const [providerInfo, setProviderInfo] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (provider && api_1.api) {
+            (0, api_1.api)().providerApi.getProvider({ provider }, {
+                headers: { 'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '' },
+            }).then((_providerInfo) => {
+                setProviderInfo(_providerInfo);
+            }).catch((err) => {
+                console.error('Error loading provider info: ', err);
+            });
+        }
+    }, [apiKey, provider]);
+    const workspaceRequired = (_b = (_a = providerInfo === null || providerInfo === void 0 ? void 0 : providerInfo.oauthOpts) === null || _a === void 0 ? void 0 : _a.explicitWorkspaceRequired) !== null && _b !== void 0 ? _b : false;
+    // required workspace
+    if (workspaceRequired) {
+        return ((0, jsx_runtime_1.jsx)(WorkspaceOauthFlow_1.WorkspaceOauthFlow, { provider: provider, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName }));
+    }
+    // no workspace required
+    return ((0, jsx_runtime_1.jsx)(NoWorkspaceOauthFlow_1.NoWorkspaceOauthFlow, { provider: provider, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName }));
+}
+exports.OauthFlow = OauthFlow;

package/build/src/components/Oauth/Salesforce/SalesforceSubdomainEntry.d.ts

@@ -0,0 +1,13 @@
+type SubdomainEntryProps = {
+    handleSubmit: () => void;
+    setWorkspace: (workspace: string) => void;
+    error: string | null;
+    isButtonDisabled?: boolean;
+};
+/**
+ * Salesforce specific subdomain entry component, use workspace entry for other providers.
+ * @param param0
+ * @returns
+ */
+export declare function SalesforceSubdomainEntry({ handleSubmit, setWorkspace, error, isButtonDisabled, }: SubdomainEntryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/components/Oauth/Salesforce/SalesforceSubdomainEntry.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SalesforceSubdomainEntry = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@chakra-ui/icons");
+const react_1 = require("@chakra-ui/react");
+const OauthCardLayout_1 = require("../OauthCardLayout");
+const OAuthErrorAlert_1 = require("../OAuthErrorAlert");
+const SALESFORCE_HELP_URL = 'https://help.salesforce.com/s/articleView?id=sf.faq_domain_name_what.htm&type=5';
+/**
+ * Salesforce specific subdomain entry component, use workspace entry for other providers.
+ * @param param0
+ * @returns
+ */
+function SalesforceSubdomainEntry({ handleSubmit, setWorkspace, error, isButtonDisabled, }) {
+    return ((0, jsx_runtime_1.jsx)(OauthCardLayout_1.OauthCardLayout, { children: (0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { marginTop: "16", marginBottom: "0", children: (0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h4", size: "md", children: "Enter your Salesforce subdomain" }) }), (0, jsx_runtime_1.jsxs)(react_1.Link, { href: SALESFORCE_HELP_URL, color: "blackAlpha.600", isExternal: true, children: ["What is my Salesforce subdomain?", (0, jsx_runtime_1.jsx)(icons_1.ExternalLinkIcon, { mx: "2px" })] }), (0, jsx_runtime_1.jsx)(OAuthErrorAlert_1.OAuthErrorAlert, { error: error }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { marginTop: "1em", children: [(0, jsx_runtime_1.jsx)(react_1.Input, { placeholder: "MyDomain", onChange: (event) => setWorkspace(event.currentTarget.value) }), (0, jsx_runtime_1.jsx)(react_1.Text, { lineHeight: "2.2em", marginLeft: "0.4em", children: ".my.salesforce.com" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Button, { isDisabled: isButtonDisabled, width: "100%", type: "submit", onClick: handleSubmit, children: "Next" })] }) }));
+}
+exports.SalesforceSubdomainEntry = SalesforceSubdomainEntry;

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

@@ -0,0 +1,9 @@
+type WorkspaceEntryProps = {
+    provider: string;
+    handleSubmit: () => void;
+    setWorkspace: (workspace: string) => void;
+    error: string | null;
+    isButtonDisabled?: boolean;
+};
+export declare function WorkspaceEntry({ provider, handleSubmit, setWorkspace, error, isButtonDisabled, }: WorkspaceEntryProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspaceEntry = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const utils_1 = require("../../../utils");
+const OauthCardLayout_1 = require("../OauthCardLayout");
+const OAuthErrorAlert_1 = require("../OAuthErrorAlert");
+function WorkspaceEntry({ provider, handleSubmit, setWorkspace, error, isButtonDisabled, }) {
+    return ((0, jsx_runtime_1.jsx)(OauthCardLayout_1.OauthCardLayout, { children: (0, jsx_runtime_1.jsxs)(react_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_1.FormLabel, { marginTop: "16", marginBottom: "0", children: (0, jsx_runtime_1.jsxs)(react_1.Heading, { as: "h4", size: "md", children: ["Enter your ", (0, utils_1.capitalize)(provider), " workspace"] }) }), (0, jsx_runtime_1.jsx)(OAuthErrorAlert_1.OAuthErrorAlert, { error: error }), (0, jsx_runtime_1.jsx)(react_1.Flex, { marginTop: "1em", children: (0, jsx_runtime_1.jsx)(react_1.Input, { placeholder: "MyWorkspace", onChange: (event) => setWorkspace(event.currentTarget.value) }) }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Button, { isDisabled: isButtonDisabled, width: "100%", type: "submit", onClick: handleSubmit, children: "Next" })] }) }));
+}
+exports.WorkspaceEntry = WorkspaceEntry;

package/build/src/components/Oauth/WorkspaceEntry/WorkspaceOauthFlow.d.ts

@@ -0,0 +1,14 @@
+interface WorkspaceOauthFlowProps {
+    provider: string;
+    consumerRef: string;
+    consumerName?: string;
+    groupRef: string;
+    groupName?: string;
+}
+/**
+ * Chooses workspace/subdomain entry component based on provider.
+ * WorkspaceEntry is generic for any provider that requires a workspace to be entered first,
+ * then launches a popup with the OAuth flow.
+ */
+export declare function WorkspaceOauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }: WorkspaceOauthFlowProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,58 @@
+"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");
+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 SalesforceSubdomainEntry_1 = require("../Salesforce/SalesforceSubdomainEntry");
+const WorkspaceEntry_1 = require("./WorkspaceEntry");
+const PROVIDER_SALESFORCE = 'salesforce';
+/**
+ * Chooses workspace/subdomain entry component based on provider.
+ * WorkspaceEntry is generic for any provider that requires a workspace to be entered first,
+ * then launches a popup with the OAuth flow.
+ */
+function WorkspaceOauthFlow({ provider, consumerRef, consumerName, groupRef, groupName, }) {
+    const { projectId } = (0, ProjectContextProvider_1.useProject)();
+    const apiKey = (0, ApiKeyContextProvider_1.useApiKey)();
+    const [workspace, setWorkspace] = (0, react_1.useState)('');
+    const [oAuthCallbackURL, setOAuthCallbackURL] = (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);
+        if (!workspace) {
+            setError('Workspace is required');
+            return;
+        }
+        if (consumerName && groupName && apiKey && workspace) {
+            try {
+                const url = await (0, fetchOAuthCallbackURL_1.fetchOAuthCallbackURL)(projectId, consumerRef, groupRef, consumerName, groupName, apiKey, provider, workspace);
+                setOAuthCallbackURL(url);
+            }
+            catch (err) {
+                console.error(err);
+                setError((_a = err === null || err === void 0 ? void 0 : err.message) !== null && _a !== void 0 ? _a : 'Unexpected error');
+            }
+        }
+    };
+    const onClose = (0, react_1.useCallback)((err) => {
+        setError(err);
+        setOAuthCallbackURL(null);
+    }, []);
+    // custom entry component for Salesforce provider
+    const workspaceEntryComponent = (provider === PROVIDER_SALESFORCE)
+        ? ((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 }));
+}
+exports.WorkspaceOauthFlow = WorkspaceOauthFlow;

package/build/src/components/SuccessTextBox.d.ts

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