@amp-labs/react 1.0.1 → 1.0.2

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

@@ -3,45 +3,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getConfigureState = exports.setRequiredCustomMapFieldValue = exports.generateSelectedFieldMappingsFromConfigureState = exports.generateSelectedFieldsFromConfigureState = exports.resetAllObjectsConfigurationState = exports.resetConfigurationState = exports.generateConfigurationState = exports.checkFieldsEquality = exports.createSavedFields = void 0;
+exports.getConfigureState = exports.generateSelectedFieldMappingsFromConfigureState = exports.generateSelectedFieldsFromConfigureState = exports.resetAllObjectsConfigurationState = exports.setHydrateConfigState = exports.generateConfigurationState = exports.isFieldObjectEqual = void 0;
 const lodash_isequal_1 = __importDefault(require("lodash.isequal"));
 const utils_1 = require("../utils");
-function createSavedFields(fields) {
-    const savedFields = {};
-    fields === null || fields === void 0 ? void 0 : fields.forEach((field) => {
-        const { value } = field;
-        if (value) {
-            savedFields[field.mapToName] = value;
-        }
-    });
-    return savedFields;
-}
-exports.createSavedFields = createSavedFields;
 // uses lodash deep equality check to compare two saved fields objects
-function checkFieldsEquality(prevFields, currentFields) {
+function isFieldObjectEqual(prevFields, currentFields) {
     return (0, lodash_isequal_1.default)(prevFields, currentFields);
 }
-exports.checkFieldsEquality = checkFieldsEquality;
+exports.isFieldObjectEqual = isFieldObjectEqual;
 function generateConfigurationState(action, objectName, config) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // refactor this section to be immutable at hydrated revision level
     const object = (0, utils_1.getStandardObjectFromAction)(action, objectName);
     const requiredFields = object && (0, utils_1.getRequiredFieldsFromObject)(object);
     const optionalFields = object && (0, utils_1.getOptionalFieldsFromObject)(object);
-    // todo refactor requiredMapFields to separate form state from hydrated revision
-    // map over requiredMapFields and get value from config
-    const requiredMapFields = object ? (_a = (0, utils_1.getRequiredMapFieldsFromObject)(object)) === null || _a === void 0 ? void 0 : _a.map((field) => (Object.assign(Object.assign({}, field), { value: config ? (0, utils_1.getValueFromConfigCustomMapping)(config, objectName, 
-        // should only use mapToName for custom mapping fields
-        (0, utils_1.getFieldKeyValue)(field)) : '' }))) : null; // type hack - TODO fix
+    const requiredMapFields = object && (0, utils_1.getRequiredMapFieldsFromObject)(object);
+    /// //////////////////////////////////////////////////////////////////////
     const allFields = (object === null || object === void 0 ? void 0 : object.allFields) || [];
-    const selectedFields = ((_e = (_d = (_c = (_b = config === null || config === void 0 ? void 0 : config.content) === null || _b === void 0 ? void 0 : _b.read) === null || _c === void 0 ? void 0 : _c.standardObjects) === null || _d === void 0 ? void 0 : _d[objectName]) === null || _e === void 0 ? void 0 : _e.selectedFields) || {};
+    const selectedFields = ((_d = (_c = (_b = (_a = config === null || config === void 0 ? void 0 : config.content) === null || _a === void 0 ? void 0 : _a.read) === null || _b === void 0 ? void 0 : _b.standardObjects) === null || _c === void 0 ? void 0 : _c[objectName]) === null || _d === void 0 ? void 0 : _d.selectedFields) || {};
+    const selectedFieldMappings = ((_h = (_g = (_f = (_e = config === null || config === void 0 ? void 0 : config.content) === null || _e === void 0 ? void 0 : _e.read) === null || _f === void 0 ? void 0 : _f.standardObjects) === null || _g === void 0 ? void 0 : _g[objectName]) === null || _h === void 0 ? void 0 : _h.selectedFieldMappings) || {};
     const optionalFieldsSaved = Object.assign({}, selectedFields);
-    const requiredMapFieldsSaved = createSavedFields(requiredMapFields);
+    const requiredMapFieldsSaved = Object.assign({}, selectedFieldMappings);
     return {
         allFields,
         requiredFields,
         optionalFields,
         requiredMapFields,
+        // selected state
         selectedOptionalFields: selectedFields,
+        selectedFieldMappings,
         isOptionalFieldsModified: false,
         isRequiredMapFieldsModified: false,
         savedConfig: {
@@ -52,7 +42,7 @@ function generateConfigurationState(action, objectName, config) {
 }
 exports.generateConfigurationState = generateConfigurationState;
 // resets configure state for single object to hydrated revision values
-const resetConfigurationState = (hydratedRevision, config, selectedObjectName, setConfigureState) => {
+const setHydrateConfigState = (hydratedRevision, config, selectedObjectName, setConfigureState) => {
     var _a;
     const readAction = (_a = hydratedRevision === null || hydratedRevision === void 0 ? void 0 : hydratedRevision.content) === null || _a === void 0 ? void 0 : _a.read;
     if (!readAction) {
@@ -61,7 +51,7 @@ const resetConfigurationState = (hydratedRevision, config, selectedObjectName, s
     const state = generateConfigurationState(readAction, selectedObjectName, config);
     setConfigureState(selectedObjectName, state);
 };
-exports.resetConfigurationState = resetConfigurationState;
+exports.setHydrateConfigState = setHydrateConfigState;
 /**
  * resets configure state for all objects in hydrated revision to hydrated revision values
  */
@@ -98,47 +88,22 @@ exports.generateSelectedFieldsFromConfigureState = generateSelectedFieldsFromCon
  * @returns
  */
 const generateSelectedFieldMappingsFromConfigureState = (configureState) => {
-    const { requiredMapFields } = configureState;
-    const requiredMapFieldsConfig = (requiredMapFields || []).reduce((acc, field) => {
-        const key = (0, utils_1.getFieldKeyValue)(field);
-        return Object.assign(Object.assign({}, acc), { [key]: field.value });
-    }, {});
-    return requiredMapFieldsConfig;
-};
-exports.generateSelectedFieldMappingsFromConfigureState = generateSelectedFieldMappingsFromConfigureState;
-/**
- * returns a new configure state with one of its FieldMappings updated with a new value.
- * @param fieldKey
- * @param value
- * @param configureState
- * @returns
- */
-const setRequiredCustomMapFieldValue = (fieldKey, value, configureState) => {
-    const { requiredMapFields } = configureState;
-    if (requiredMapFields === null) {
-        return { isUpdated: false, newState: configureState };
-    }
-    // flag to know if field was updated
-    let isUpdated = false;
-    const updatedRequiredMapFields = requiredMapFields.map((field) => {
-        // updated field
-        if (field.mapToName === fieldKey) {
-            isUpdated = true;
-            return Object.assign(Object.assign({}, field), { value });
-        }
-        // else return a copy of the field
-        return Object.assign({}, field);
-    });
-    if (isUpdated) {
-        const savedFields = configureState.savedConfig.requiredMapFields;
-        const updatedFields = createSavedFields(updatedRequiredMapFields);
-        const isModified = !checkFieldsEquality(savedFields, updatedFields);
-        const newState = Object.assign(Object.assign({}, configureState), { requiredMapFields: updatedRequiredMapFields, isRequiredMapFieldsModified: isModified });
-        return { isUpdated, newState };
+    const { selectedFieldMappings: selectedRequiredMapFields } = configureState;
+    // filter out undefined values of selectedRequiredMapFields
+    const selectedRequiredMapFieldsSubmit = {};
+    if (selectedRequiredMapFields) {
+        Object.keys(selectedRequiredMapFields).forEach((key) => {
+            if (selectedRequiredMapFields[key] !== undefined) {
+                selectedRequiredMapFieldsSubmit[key] = selectedRequiredMapFields[key] || '';
+            }
+            else {
+                console.warn(`Error undefined when generating selectedRequiredMapFieldsSubmit for key: ${key}`);
+            }
+        });
     }
-    return { isUpdated: false, newState: configureState };
+    return selectedRequiredMapFieldsSubmit;
 };
-exports.setRequiredCustomMapFieldValue = setRequiredCustomMapFieldValue;
+exports.generateSelectedFieldMappingsFromConfigureState = generateSelectedFieldMappingsFromConfigureState;
 // get configure state of single object
 function getConfigureState(objectName, objectConfigurationsState) {
     return objectConfigurationsState[objectName] || undefined;

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

@@ -1,24 +1,21 @@
 import { HydratedIntegrationField, HydratedIntegrationFieldExistent, IntegrationFieldMapping } from '../../services/api';
-export type ConfigureStateIntegrationField = HydratedIntegrationFieldExistent & {
-    value: string | number | boolean | null;
-};
-export type ConfigureStateMappingIntegrationField = IntegrationFieldMapping & {
-    value: string | number | undefined;
-};
 export type SelectOptionalFields = {
     [key: string]: boolean;
 };
-export type SavedConfigureFields = Record<string, string | number | boolean | null>;
+export type SelectMappingFields = {
+    [key: string]: string | undefined;
+};
 type SavedConfigureState = {
     optionalFields: SelectOptionalFields;
-    requiredMapFields: SavedConfigureFields;
+    requiredMapFields: SelectMappingFields;
 };
 export type ConfigureState = {
     allFields: HydratedIntegrationFieldExistent[] | null;
     requiredFields: HydratedIntegrationField[] | null;
     optionalFields: HydratedIntegrationField[] | null;
-    requiredMapFields: ConfigureStateMappingIntegrationField[] | null;
+    requiredMapFields: IntegrationFieldMapping[] | null;
     selectedOptionalFields: SelectOptionalFields | null;
+    selectedFieldMappings: SelectMappingFields | null;
     isOptionalFieldsModified: boolean;
     isRequiredMapFieldsModified: boolean;
     savedConfig: SavedConfigureState;

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

@@ -1,5 +1,6 @@
+import { ErrorBoundary } from '../../context/ErrorContextProvider';
 import { Config, HydratedIntegrationField, HydratedIntegrationObject, HydratedIntegrationRead, HydratedRevision, IntegrationFieldMapping } from '../../services/api';
-import { NavObject } from './types';
+import { NavObject, SelectMappingFields } from './types';
 /**
  * type guard for IntegrationFieldMapping | IntegrationFieldExistent
  *
@@ -15,10 +16,11 @@ export declare function isIntegrationFieldMapping(field: HydratedIntegrationFiel
  */
 export declare function getStandardObjectFromAction(action: HydratedIntegrationRead, objectName: string): HydratedIntegrationObject | null;
 export declare function getRequiredFieldsFromObject(object: HydratedIntegrationObject): HydratedIntegrationField[] | null;
-export declare function getRequiredMapFieldsFromObject(object: HydratedIntegrationObject): HydratedIntegrationField[] | null;
+export declare function getRequiredMapFieldsFromObject(object: HydratedIntegrationObject): IntegrationFieldMapping[] | null;
 export declare function getOptionalFieldsFromObject(object: HydratedIntegrationObject): HydratedIntegrationField[] | null;
 export declare const getReadObject: (config: Config, objectName: string) => any;
-export declare function getValueFromConfigExist(config: Config, objectName: string, key: string): boolean;
-export declare function getValueFromConfigCustomMapping(config: Config, objectName: string, key: string): string;
 export declare function getFieldKeyValue(field: HydratedIntegrationField): string;
 export declare function generateNavObjects(config: Config | undefined, hydratedRevision: HydratedRevision): NavObject[];
+export declare function validateFieldMappings(requiredMapFields: IntegrationFieldMapping[] | null, selectedRequiredMapFields: SelectMappingFields | null, setErrors: (boundary: ErrorBoundary, errors: string[]) => void): {
+    errorList: string[];
+};

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateNavObjects = exports.getFieldKeyValue = exports.getValueFromConfigCustomMapping = exports.getValueFromConfigExist = exports.getReadObject = exports.getOptionalFieldsFromObject = exports.getRequiredMapFieldsFromObject = exports.getRequiredFieldsFromObject = exports.getStandardObjectFromAction = exports.isIntegrationFieldMapping = void 0;
+exports.validateFieldMappings = exports.generateNavObjects = exports.getFieldKeyValue = exports.getReadObject = exports.getOptionalFieldsFromObject = exports.getRequiredMapFieldsFromObject = exports.getRequiredFieldsFromObject = exports.getStandardObjectFromAction = exports.isIntegrationFieldMapping = void 0;
+const ErrorContextProvider_1 = require("../../context/ErrorContextProvider");
 /**
  * type guard for IntegrationFieldMapping | IntegrationFieldExistent
  *
@@ -32,7 +33,8 @@ exports.getRequiredFieldsFromObject = getRequiredFieldsFromObject;
 // 2b. get required custom mapping fields
 function getRequiredMapFieldsFromObject(object) {
     var _a;
-    return ((_a = object === null || object === void 0 ? void 0 : object.requiredFields) === null || _a === void 0 ? void 0 : _a.filter((rf) => isIntegrationFieldMapping(rf) && !!rf.mapToName)) || null;
+    const requiredMapFields = ((_a = object === null || object === void 0 ? void 0 : object.requiredFields) === null || _a === void 0 ? void 0 : _a.filter((rf) => isIntegrationFieldMapping(rf) && !!rf.mapToName)) || [];
+    return requiredMapFields; // type hack
 }
 exports.getRequiredMapFieldsFromObject = getRequiredMapFieldsFromObject;
 // 3. get optional fields
@@ -43,20 +45,6 @@ function getOptionalFieldsFromObject(object) {
 exports.getOptionalFieldsFromObject = getOptionalFieldsFromObject;
 const getReadObject = (config, objectName) => { var _a, _b, _c; return (_c = (_b = (_a = config === null || config === void 0 ? void 0 : config.content) === null || _a === void 0 ? void 0 : _a.read) === null || _b === void 0 ? void 0 : _b.standardObjects) === null || _c === void 0 ? void 0 : _c[objectName]; };
 exports.getReadObject = getReadObject;
-// 4a. get value for field
-function getValueFromConfigExist(config, objectName, key) {
-    var _a;
-    const object = (0, exports.getReadObject)(config, objectName);
-    return ((_a = object === null || object === void 0 ? void 0 : object.selectedFields) === null || _a === void 0 ? void 0 : _a[key]) || false;
-}
-exports.getValueFromConfigExist = getValueFromConfigExist;
-// 4b. get value for custom mapping field
-function getValueFromConfigCustomMapping(config, objectName, key) {
-    var _a;
-    const object = (0, exports.getReadObject)(config, objectName);
-    return ((_a = object === null || object === void 0 ? void 0 : object.selectedFieldMappings) === null || _a === void 0 ? void 0 : _a[key]) || '';
-}
-exports.getValueFromConfigCustomMapping = getValueFromConfigCustomMapping;
 // aux. get field value based on type guard
 function getFieldKeyValue(field) {
     if (isIntegrationFieldMapping(field)) {
@@ -80,3 +68,16 @@ function generateNavObjects(config, hydratedRevision) {
     return navObjects;
 }
 exports.generateNavObjects = generateNavObjects;
+// validates whether required fields are filled out or throws error
+function validateFieldMappings(requiredMapFields, selectedRequiredMapFields, setErrors) {
+    // check if fields with requirements are met
+    const fieldsWithRequirementsNotMet = (requiredMapFields === null || requiredMapFields === void 0 ? void 0 : requiredMapFields.filter((field) => !(selectedRequiredMapFields === null || selectedRequiredMapFields === void 0 ? void 0 : selectedRequiredMapFields[field === null || field === void 0 ? void 0 : field.mapToName]))) || [];
+    const errorList = fieldsWithRequirementsNotMet.map((field) => field.mapToName);
+    setErrors(ErrorContextProvider_1.ErrorBoundary.MAPPING, errorList);
+    // if requires fields are not met, set error fields and return
+    if (fieldsWithRequirementsNotMet === null || fieldsWithRequirementsNotMet === void 0 ? void 0 : fieldsWithRequirementsNotMet.length) {
+        console.error('required fields not met', fieldsWithRequirementsNotMet.map((field) => field.mapToDisplayName));
+    }
+    return { errorList };
+}
+exports.validateFieldMappings = validateFieldMappings;

package/build/src/components/Connect/ConnectProvider.d.ts

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const NavIcon_1 = require("../../assets/NavIcon");
+const ConnectionsContext_1 = require("../../context/ConnectionsContext");
+const ProjectContext_1 = require("../../context/ProjectContext");
+const utils_1 = require("../../utils");
+const ProtectedConnectionLayout_1 = require("../Configure/ProtectedConnectionLayout");
+function ConnectedSuccessBox({ provider }) {
+    const { appName } = (0, ProjectContext_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}.` })] }) }));
+}
+function ConnectProvider({ provider, consumerRef, consumerName, groupRef, groupName, }) {
+    return ((0, jsx_runtime_1.jsx)(ConnectionsContext_1.ConnectionsProvider, { provider: provider, groupRef: groupRef, children: (0, jsx_runtime_1.jsx)(ProtectedConnectionLayout_1.ProtectedConnectionLayout, { provider: provider, consumerRef: consumerRef, consumerName: consumerName, groupRef: groupRef, groupName: groupName, children: (0, jsx_runtime_1.jsx)(ConnectedSuccessBox, { provider: provider }) }) }));
+}
+exports.ConnectProvider = ConnectProvider;

package/build/src/components/{OAuthPopup → Connect}/OAuthPopup.js

@@ -7,7 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * Takes a URL and creates a popup showing that page.
  */
 const react_1 = require("react");
-const ApiKeyContext_1 = require("../../context/ApiKeyContext");
+const ApiKeyProvider_1 = require("../../context/ApiKeyProvider");
 const ConnectionsContext_1 = require("../../context/ConnectionsContext");
 const ProjectContext_1 = require("../../context/ProjectContext");
 const api_1 = require("../../services/api");
@@ -23,12 +23,12 @@ const createPopup = ({ url, title, }) => {
     return popup;
 };
 function OAuthPopup({ title = '', url, children, onClose, }) {
+    const { projectId } = (0, ProjectContext_1.useProject)();
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
     const [externalWindow, setExternalWindow] = (0, react_1.useState)();
     const intervalRef = (0, react_1.useRef)();
     const clearTimer = () => window.clearInterval(intervalRef.current);
     const { setSelectedConnection } = (0, ConnectionsContext_1.useConnections)();
-    const { projectId } = (0, ProjectContext_1.useProject)();
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
     (0, react_1.useEffect)(() => {
         if (url)
             setExternalWindow(createPopup({ url, title }));

package/build/src/components/Salesforce/SalesforceOauthFlow.js

@@ -12,54 +12,63 @@ const react_1 = require("react");
 const icons_1 = require("@chakra-ui/icons");
 const react_2 = require("@chakra-ui/react");
 const constants_1 = require("../../constants");
-const ApiKeyContext_1 = require("../../context/ApiKeyContext");
+const ApiKeyProvider_1 = require("../../context/ApiKeyProvider");
 const ProjectContext_1 = require("../../context/ProjectContext");
 const api_1 = require("../../services/api");
-const OAuthPopup_1 = __importDefault(require("../OAuthPopup/OAuthPopup"));
+const OAuthPopup_1 = __importDefault(require("../Connect/OAuthPopup"));
 function OAuthErrorAlert({ error }) {
     if (error) {
         return ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: "error", marginTop: "2em", children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { children: error })] }));
     }
     return null;
 }
+const SALESFORCE_HELP_URL = 'https://help.salesforce.com/articleView?id=domain_name_not_found.htm&type=5';
+function SubdomainEntry({ handleSubmit, setWorkspace, error, isButtonDisabled, }) {
+    return ((0, jsx_runtime_1.jsx)(react_2.Container, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { p: 8, maxWidth: "600px", borderWidth: 1, borderRadius: 8, boxShadow: "lg", textAlign: ['left'], margin: "auto", marginTop: "40px", bgColor: "white", children: (0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { marginTop: "16", marginBottom: "0", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h4", size: "md", children: "Enter your Salesforce subdomain" }) }), (0, jsx_runtime_1.jsxs)(react_2.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, { error: error }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { marginTop: "1em", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "MyDomain", onChange: (event) => setWorkspace(event.currentTarget.value) }), (0, jsx_runtime_1.jsx)(react_2.Text, { lineHeight: "2.2em", marginLeft: "0.4em", children: ".my.salesforce.com" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_2.Button, { isDisabled: isButtonDisabled, width: "100%", type: "submit", onClick: handleSubmit, children: "Next" })] }) }) }));
+}
+const fetchOAuthCallbackURL = async (projectId, workspace, consumerRef, groupRef, consumerName, groupName, apiKey, provider = constants_1.PROVIDER_SALESFORCE) => {
+    const providerApps = await (0, api_1.api)().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 ${provider} Connected App using the Ampersand Console.`);
+    }
+    const url = await (0, api_1.api)().oauthConnect({
+        connectOAuthParams: {
+            providerWorkspaceRef: workspace,
+            projectId,
+            groupRef,
+            groupName,
+            consumerRef,
+            consumerName,
+            providerAppId: app.id,
+            provider,
+        },
+    });
+    return url;
+};
 /**
  * SalesforceOauthFlow first prompts user for their workspace ("subdomain" in Salesforce lingo),
  * then launches a popup with the OAuth flow.
  */
 function SalesforceOauthFlow({ consumerRef, consumerName, groupRef, groupName, }) {
+    const { projectId } = (0, ProjectContext_1.useProject)();
+    const apiKey = (0, ApiKeyProvider_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);
-    const { projectId } = (0, ProjectContext_1.useProject)();
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
+    const isButtonDisabled = workspace.length === 0;
+    const provider = constants_1.PROVIDER_SALESFORCE;
+    // 1. fetch provider apps
+    // 2. find matching app to provider
+    // 3. fetch OAuth callback URL from connection so that oath popup can be launched
     const handleSubmit = async () => {
         var _a;
         setError(null);
-        if (workspace) {
+        if (workspace && consumerName && groupName && apiKey) {
             try {
-                const providerApps = await (0, api_1.api)().listProviderApps({
-                    projectId,
-                }, {
-                    headers: {
-                        'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '',
-                    },
-                });
-                const app = providerApps.find((a) => a.provider === constants_1.PROVIDER_SALESFORCE);
-                if (!app) {
-                    throw new Error('You must first set up a Salesforce Connected App using the Ampersand Console.');
-                }
-                const url = await (0, api_1.api)().oauthConnect({
-                    connectOAuthParams: {
-                        providerWorkspaceRef: workspace,
-                        projectId,
-                        groupRef,
-                        groupName,
-                        consumerRef,
-                        consumerName,
-                        providerAppId: app.id,
-                        provider: constants_1.PROVIDER_SALESFORCE,
-                    },
-                });
+                const url = await fetchOAuthCallbackURL(projectId, workspace, consumerRef, groupRef, consumerName, groupName, apiKey, provider);
                 setOAuthCallbackURL(url);
             }
             catch (err) {
@@ -67,12 +76,14 @@ function SalesforceOauthFlow({ consumerRef, consumerName, groupRef, groupName, }
                 setError((_a = err.message) !== null && _a !== void 0 ? _a : 'Unexpected error');
             }
         }
+        else {
+            setError('missing required fields');
+        }
     };
     const onClose = (0, react_1.useCallback)((err) => {
         setError(err);
         setOAuthCallbackURL(null);
     }, []);
-    const SubdomainEntry = ((0, jsx_runtime_1.jsx)(react_2.Container, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { p: 8, maxWidth: "600px", borderWidth: 1, borderRadius: 8, boxShadow: "lg", textAlign: ['left'], margin: "auto", marginTop: "40px", bgColor: "white", children: (0, jsx_runtime_1.jsxs)(react_2.FormControl, { children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { marginTop: "3em", marginBottom: "0", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h4", size: "lg", children: "Enter your Salesforce subdomain" }) }), (0, jsx_runtime_1.jsxs)(react_2.Link, { href: "https://help.salesforce.com/s/articleView?id=sf.faq_domain_name_what.htm&type=5", 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, { error: error }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { marginTop: "1em", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "MyDomain", onChange: (event) => setWorkspace(event.currentTarget.value) }), (0, jsx_runtime_1.jsx)(react_2.Text, { lineHeight: "2.2em", marginLeft: "0.4em", children: ".my.salesforce.com" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_2.Button, { type: "submit", onClick: handleSubmit, children: "Submit" })] }) }) }));
-    return ((0, jsx_runtime_1.jsx)(OAuthPopup_1.default, { title: "Connect to Salesforce", url: oAuthCallbackURL, onClose: onClose, children: SubdomainEntry }));
+    return ((0, jsx_runtime_1.jsx)(OAuthPopup_1.default, { title: "Connect to Salesforce", url: oAuthCallbackURL, onClose: onClose, children: (0, jsx_runtime_1.jsx)(SubdomainEntry, { handleSubmit: handleSubmit, setWorkspace: setWorkspace, error: error, isButtonDisabled: isButtonDisabled }) }));
 }
 exports.default = SalesforceOauthFlow;

package/build/src/components/ThemeProvider/Button/buttonTheme.d.ts

@@ -0,0 +1,13 @@
+export declare const buttonVariants: {
+    warning: {
+        bg: string;
+        outlineColor: string;
+        outline: string;
+        outlineOffset: string;
+        borderColor: string;
+        color: string;
+        _hover: {
+            bg: string;
+        };
+    };
+};

package/build/src/components/ThemeProvider/Button/buttonTheme.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariants = void 0;
+// define custom button variants
+exports.buttonVariants = {
+    warning: {
+        bg: 'red.50',
+        outlineColor: 'red.800',
+        outline: '2px solid',
+        outlineOffset: '0',
+        borderColor: 'red.800',
+        color: 'red.800',
+        _hover: {
+            bg: 'red.100', // Background color on hover
+        },
+    },
+};

package/build/src/components/ThemeProvider/Button/index.d.ts

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

package/build/src/components/ThemeProvider/Button/index.js

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

package/build/src/components/ThemeProvider/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const Button_1 = require("./Button");
 const customTheme = (0, react_1.extendTheme)({
     components: {
         Tabs: {
@@ -23,8 +24,28 @@ const customTheme = (0, react_1.extendTheme)({
                         },
                     },
                 },
+                // consider creating a warning variant tab
+                warningTab: {
+                    width: '100%',
+                    borderRadius: '4px',
+                    _hover: {
+                        bg: 'red.200',
+                    },
+                    _selected: {
+                        color: 'red.800',
+                        fontWeight: '500',
+                        bg: 'red.100',
+                        border: 'none',
+                        _hover: {
+                            bg: 'red.200',
+                        },
+                    },
+                },
             },
         },
+        Button: {
+            variants: Button_1.buttonVariants,
+        },
     },
 });
 const theme = (0, react_1.extendTheme)((0, react_1.withDefaultColorScheme)({

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

@@ -1,2 +1,3 @@
 export * from './AmpersandProvider';
 export * from './Configure';
+export * from './Connect/ConnectProvider';

package/build/src/components/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./AmpersandProvider"), exports);
 __exportStar(require("./Configure"), exports);
+__exportStar(require("./Connect/ConnectProvider"), exports);

package/build/src/context/{ApiKeyContext.d.ts → ApiKeyProvider.d.ts}

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 export declare const ApiKeyContext: import("react").Context<string | null>;
 export declare const ApiKeyProvider: import("react").Provider<string | null>;
+export declare const useApiKey: () => string;

package/build/src/context/ApiKeyProvider.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useApiKey = exports.ApiKeyProvider = exports.ApiKeyContext = void 0;
+const react_1 = require("react");
+exports.ApiKeyContext = (0, react_1.createContext)(null);
+exports.ApiKeyProvider = exports.ApiKeyContext.Provider;
+const useApiKey = () => {
+    const apiKey = (0, react_1.useContext)(exports.ApiKeyContext);
+    if (apiKey === null) {
+        throw new Error('useApiKey must be used within an ApiKeyProvider');
+    }
+    return apiKey;
+};
+exports.useApiKey = useApiKey;

package/build/src/context/ConnectionsContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { Connection } from '../services/api';
 interface ConnectionsContextValue {
     connections: Connection[] | null;
@@ -6,11 +6,12 @@ interface ConnectionsContextValue {
     setConnections: React.Dispatch<React.SetStateAction<Connection[] | null>>;
     setSelectedConnection: React.Dispatch<React.SetStateAction<Connection | null>>;
 }
-export declare const ConnectionsContext: React.Context<ConnectionsContextValue>;
+export declare const ConnectionsContext: import("react").Context<ConnectionsContextValue>;
 export declare const useConnections: () => ConnectionsContextValue;
 type ConnectionsProviderProps = {
-    projectId: string;
+    provider?: string;
+    groupRef: string;
     children?: React.ReactNode;
 };
-export declare function ConnectionsProvider({ projectId, children, }: ConnectionsProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectionsProvider({ provider, groupRef, children, }: ConnectionsProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/src/context/ConnectionsContext.js

@@ -6,9 +6,10 @@ const react_1 = require("react");
 const LoadingIcon_1 = require("../assets/LoadingIcon");
 const ErrorTextBox_1 = require("../components/Configure/ErrorTextBox");
 const api_1 = require("../services/api");
-const ApiKeyContext_1 = require("./ApiKeyContext");
+const ApiKeyProvider_1 = require("./ApiKeyProvider");
 const ErrorContextProvider_1 = require("./ErrorContextProvider");
 const InstallIntegrationContext_1 = require("./InstallIntegrationContext");
+const ProjectContext_1 = require("./ProjectContext");
 exports.ConnectionsContext = (0, react_1.createContext)({
     connections: null,
     selectedConnection: null,
@@ -18,18 +19,25 @@ exports.ConnectionsContext = (0, react_1.createContext)({
 const useConnections = () => {
     const context = (0, react_1.useContext)(exports.ConnectionsContext);
     if (!context) {
-        throw new Error('useConnections must be used within a ConnectionsListProvider');
+        throw new Error('useConnections must be used within a ConnectionsProvider');
     }
     return context;
 };
 exports.useConnections = useConnections;
-function ConnectionsProvider({ projectId, children, }) {
-    const { groupRef, provider } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+function ConnectionsProvider({ provider, groupRef, children, }) {
+    const apiKey = (0, ApiKeyProvider_1.useApiKey)();
+    const { projectId } = (0, ProjectContext_1.useProject)();
     const [connections, setConnections] = (0, react_1.useState)(null);
     const [selectedConnection, setSelectedConnection] = (0, react_1.useState)(null);
-    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
     const [isLoading, setLoadingState] = (0, react_1.useState)(true);
     const { setError, isError } = (0, ErrorContextProvider_1.useErrorState)();
+    const { provider: providerFromProps } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+    if (!projectId) {
+        throw new Error('ConnectionsProvider must be used within AmpersandProvider');
+    }
+    if (!provider && !providerFromProps) {
+        throw new Error('ConnectionsProvider must be given a provider prop or be used within InstallIntegrationProvider');
+    }
     (0, react_1.useEffect)(() => {
         (0, api_1.api)().listConnections({ projectId, groupRef, provider }, {
             headers: {

package/build/src/context/InstallIntegrationContext.d.ts

@@ -10,6 +10,7 @@ interface InstallIntegrationContextValue {
     groupName?: string;
     installation?: Installation;
     setInstallation: (installationObj: Installation) => void;
+    resetInstallations: () => void;
 }
 export declare function useInstallIntegrationProps(): InstallIntegrationContextValue;
 interface InstallIntegrationProviderProps {