@amp-labs/react 1.0.0

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

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

package/build/src/components/Salesforce/SalesforceOauthFlow.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Prompts customer to input their Salesforce subdomain, then creates an OAuth connection to
+ * that Salesforce instance.
+ */
+interface SalesforceOauthFlowProps {
+    consumerRef: string;
+    consumerName?: string;
+    groupRef: string;
+    groupName?: string;
+}
+/**
+ * SalesforceOauthFlow first prompts user for their workspace ("subdomain" in Salesforce lingo),
+ * then launches a popup with the OAuth flow.
+ */
+declare function SalesforceOauthFlow({ consumerRef, consumerName, groupRef, groupName, }: SalesforceOauthFlowProps): import("react/jsx-runtime").JSX.Element;
+export default SalesforceOauthFlow;

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

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Prompts customer to input their Salesforce subdomain, then creates an OAuth connection to
+ * that Salesforce instance.
+ */
+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 ProjectContext_1 = require("../../context/ProjectContext");
+const api_1 = require("../../services/api");
+const OAuthPopup_1 = __importDefault(require("../OAuthPopup/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;
+}
+/**
+ * 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 [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 handleSubmit = async () => {
+        var _a;
+        setError(null);
+        if (workspace) {
+            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,
+                    },
+                });
+                setOAuthCallbackURL(url);
+            }
+            catch (err) {
+                console.error(err);
+                setError((_a = err.message) !== null && _a !== void 0 ? _a : 'Unexpected error');
+            }
+        }
+    };
+    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 }));
+}
+exports.default = SalesforceOauthFlow;

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+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 customTheme = (0, react_1.extendTheme)({
+    components: {
+        Tabs: {
+            baseStyle: {
+                tab: {
+                    width: '100%',
+                    borderRadius: '4px',
+                    _hover: {
+                        bg: 'gray.300',
+                    },
+                    _selected: {
+                        color: 'black',
+                        fontWeight: '500',
+                        bg: 'gray.200',
+                        border: 'none',
+                        _hover: {
+                            bg: 'gray.300',
+                        },
+                    },
+                },
+            },
+        },
+    },
+});
+const theme = (0, react_1.extendTheme)((0, react_1.withDefaultColorScheme)({
+    colorScheme: 'facebook',
+    components: ['Button'],
+}), customTheme);
+function ThemeProvider({ children }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.ChakraProvider, { theme: theme, children: children }));
+}
+exports.ThemeProvider = ThemeProvider;

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

@@ -0,0 +1,2 @@
+export * from './AmpersandProvider';
+export * from './Configure';

package/build/src/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AmpersandProvider"), exports);
+__exportStar(require("./Configure"), exports);

package/build/src/constants.d.ts

@@ -0,0 +1 @@
+export declare const PROVIDER_SALESFORCE = "salesforce";

package/build/src/constants.js

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

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

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

package/build/src/context/ApiKeyContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiKeyProvider = exports.ApiKeyContext = void 0;
+const react_1 = require("react");
+exports.ApiKeyContext = (0, react_1.createContext)(null);
+exports.ApiKeyProvider = exports.ApiKeyContext.Provider;

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

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

package/build/src/context/ConnectionsContext.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectionsProvider = exports.useConnections = exports.ConnectionsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 ErrorContextProvider_1 = require("./ErrorContextProvider");
+const InstallIntegrationContext_1 = require("./InstallIntegrationContext");
+exports.ConnectionsContext = (0, react_1.createContext)({
+    connections: null,
+    selectedConnection: null,
+    setConnections: () => { },
+    setSelectedConnection: () => { },
+});
+const useConnections = () => {
+    const context = (0, react_1.useContext)(exports.ConnectionsContext);
+    if (!context) {
+        throw new Error('useConnections must be used within a ConnectionsListProvider');
+    }
+    return context;
+};
+exports.useConnections = useConnections;
+function ConnectionsProvider({ projectId, children, }) {
+    const { groupRef, provider } = (0, InstallIntegrationContext_1.useInstallIntegrationProps)();
+    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)();
+    (0, react_1.useEffect)(() => {
+        (0, api_1.api)().listConnections({ projectId, groupRef, provider }, {
+            headers: {
+                'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '',
+            },
+        }).then((_connections) => {
+            setLoadingState(false);
+            setConnections(_connections);
+        }).catch((err) => {
+            setLoadingState(false);
+            setError(ErrorContextProvider_1.ErrorBoundary.CONNECTION_LIST, projectId);
+            console.error(`Error retrieving existing OAuth connections for group ID ${groupRef}:`, err);
+        });
+    }, [projectId, apiKey, groupRef, provider, setError]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        connections,
+        selectedConnection,
+        setConnections,
+        setSelectedConnection,
+    }), [connections, selectedConnection, setConnections, setSelectedConnection]);
+    return (isError(ErrorContextProvider_1.ErrorBoundary.CONNECTION_LIST, projectId)
+        ? (0, jsx_runtime_1.jsx)(ErrorTextBox_1.ErrorTextBox, { message: "Error retrieving existing connections" })
+        : ((0, jsx_runtime_1.jsx)(exports.ConnectionsContext.Provider, { value: contextValue, children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, {}) : children })));
+}
+exports.ConnectionsProvider = ConnectionsProvider;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+export declare enum ErrorBoundary {
+    MAPPING = "mappingError",
+    INTEGRATION_LIST = "integrationListError",
+    PROJECT = "projectError",
+    CONNECTION_LIST = "connectionListError",
+    HYDRATED_REVISION = "hydratedRevisionError",
+    INSTALLATION_LIST = "installationListError"
+}
+export type ErrorState = {
+    [boundary in ErrorBoundary]: {
+        [key: string]: boolean;
+    };
+};
+export declare const ErrorContext: React.Context<{
+    errorState: ErrorState;
+    setErrorState: React.Dispatch<React.SetStateAction<ErrorState>>;
+    resetBoundary: (boundary: ErrorBoundary) => void;
+    setError: (boundary: ErrorBoundary, key: string) => void;
+    isError: (boundary: ErrorBoundary, key: string) => boolean;
+    removeError: (boundary: ErrorBoundary, key: string) => void;
+    setErrors: (boundary: ErrorBoundary, keys: string[]) => void;
+} | undefined>;
+export declare function useErrorState(): {
+    errorState: ErrorState;
+    setErrorState: React.Dispatch<React.SetStateAction<ErrorState>>;
+    resetBoundary: (boundary: ErrorBoundary) => void;
+    setError: (boundary: ErrorBoundary, key: string) => void;
+    isError: (boundary: ErrorBoundary, key: string) => boolean;
+    removeError: (boundary: ErrorBoundary, key: string) => void;
+    setErrors: (boundary: ErrorBoundary, keys: string[]) => void;
+};
+type ErrorProviderProps = {
+    children: React.ReactNode;
+};
+export declare function ErrorStateProvider({ children }: ErrorProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/context/ErrorContextProvider.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorStateProvider = exports.useErrorState = exports.ErrorContext = exports.ErrorBoundary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+var ErrorBoundary;
+(function (ErrorBoundary) {
+    ErrorBoundary["MAPPING"] = "mappingError";
+    ErrorBoundary["INTEGRATION_LIST"] = "integrationListError";
+    ErrorBoundary["PROJECT"] = "projectError";
+    ErrorBoundary["CONNECTION_LIST"] = "connectionListError";
+    ErrorBoundary["HYDRATED_REVISION"] = "hydratedRevisionError";
+    ErrorBoundary["INSTALLATION_LIST"] = "installationListError";
+})(ErrorBoundary || (exports.ErrorBoundary = ErrorBoundary = {}));
+exports.ErrorContext = (0, react_1.createContext)(undefined);
+function useErrorState() {
+    const context = (0, react_1.useContext)(exports.ErrorContext);
+    if (!context) {
+        throw new Error('useErrorState must be used within a ErrorProvider');
+    }
+    return context;
+}
+exports.useErrorState = useErrorState;
+const initialState = (() => {
+    const obj = {};
+    Object.values(ErrorBoundary).forEach((key) => {
+        obj[key] = {};
+    });
+    return obj;
+})();
+function ErrorStateProvider({ children }) {
+    const [errorState, setErrorState] = (0, react_1.useState)(initialState);
+    const setError = (0, react_1.useCallback)((boundary, key) => {
+        setErrorState((prevState) => {
+            const newErrorState = Object.assign({}, prevState);
+            newErrorState[boundary] = newErrorState[boundary] || {};
+            newErrorState[boundary][key] = true;
+            return newErrorState;
+        });
+    }, [setErrorState]);
+    const isError = (0, react_1.useCallback)((boundary, key) => { var _a; return !!((_a = errorState[boundary]) === null || _a === void 0 ? void 0 : _a[key]); }, [errorState]);
+    const removeError = (0, react_1.useCallback)((boundary, key) => {
+        setErrorState((prevState) => {
+            var _a;
+            const newErrorState = Object.assign({}, prevState);
+            (_a = newErrorState[boundary]) === null || _a === void 0 ? true : delete _a[key];
+            return newErrorState;
+        });
+    }, [setErrorState]);
+    const resetBoundary = (0, react_1.useCallback)((boundary) => {
+        setErrorState((prevState) => {
+            const newErrorState = Object.assign({}, prevState);
+            newErrorState[boundary] = {};
+            return newErrorState;
+        });
+    }, [setErrorState]);
+    const setErrors = (0, react_1.useCallback)((boundary, keys) => {
+        setErrorState((prevState) => {
+            const newErrorState = Object.assign({}, prevState);
+            newErrorState[boundary] = newErrorState[boundary] || {};
+            keys.forEach((key) => {
+                newErrorState[boundary][key] = true;
+            });
+            return newErrorState;
+        });
+    }, [setErrorState]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        errorState, setErrorState, setError, isError, removeError, resetBoundary, setErrors,
+    }), [errorState, setErrorState, setError, isError, removeError, resetBoundary, setErrors]);
+    return ((0, jsx_runtime_1.jsx)(exports.ErrorContext.Provider, { value: contextValue, children: children }));
+}
+exports.ErrorStateProvider = ErrorStateProvider;

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

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Installation, Integration } from '../services/api';
+interface InstallIntegrationContextValue {
+    integrationId: string;
+    provider: string;
+    integrationObj?: Integration | null;
+    consumerRef: string;
+    consumerName?: string;
+    groupRef: string;
+    groupName?: string;
+    installation?: Installation;
+    setInstallation: (installationObj: Installation) => void;
+}
+export declare function useInstallIntegrationProps(): InstallIntegrationContextValue;
+interface InstallIntegrationProviderProps {
+    integration: string;
+    consumerRef: string;
+    consumerName?: string;
+    groupRef: string;
+    groupName?: string;
+    children: React.ReactNode;
+}
+export declare function InstallIntegrationProvider({ children, integration, consumerRef, consumerName, groupRef, groupName, }: InstallIntegrationProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/context/InstallIntegrationContext.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InstallIntegrationProvider = exports.useInstallIntegrationProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 utils_1 = require("../utils");
+const ApiKeyContext_1 = require("./ApiKeyContext");
+const ErrorContextProvider_1 = require("./ErrorContextProvider");
+const IntegrationListContext_1 = require("./IntegrationListContext");
+const ProjectContext_1 = require("./ProjectContext");
+// Create a context to pass down the props
+const InstallIntegrationContext = (0, react_1.createContext)({
+    integrationId: '',
+    provider: '',
+    integrationObj: undefined,
+    consumerRef: '',
+    consumerName: '',
+    groupRef: '',
+    groupName: '',
+    installation: undefined,
+    setInstallation: () => { },
+});
+// Create a custom hook to access the props
+function useInstallIntegrationProps() {
+    const context = (0, react_1.useContext)(InstallIntegrationContext);
+    if (!context) {
+        throw new Error('useInstallIntegrationProps must be used within an InstallIntegrationProvider');
+    }
+    return context;
+}
+exports.useInstallIntegrationProps = useInstallIntegrationProps;
+// Wrap your parent component with the context provider
+function InstallIntegrationProvider({ children, integration, consumerRef, consumerName, groupRef, groupName, }) {
+    const { projectId } = (0, ProjectContext_1.useProject)();
+    const [installations, setInstallations] = (0, react_1.useState)([]);
+    const installation = (installations === null || installations === void 0 ? void 0 : installations[0]) || null; // there should only be one installation for mvp
+    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
+    const { integrations } = (0, IntegrationListContext_1.useIntegrationList)();
+    const integrationObj = (0, react_1.useMemo)(() => (0, utils_1.findIntegrationFromList)(integration, integrations || []), [integration, integrations]);
+    const [isLoading, setLoadingState] = (0, react_1.useState)(true);
+    const { setError, isError } = (0, ErrorContextProvider_1.useErrorState)();
+    (0, react_1.useEffect)(() => {
+        if (integrationObj === null && (integrations === null || integrations === void 0 ? void 0 : integrations.length)) {
+            console.error(`Integration "${integration}" not found in integration list`);
+        }
+    }, [integration, integrationObj, integrations]);
+    // default set the installations array with a single installation object
+    // may need to find and update the installation object in the future
+    const setInstallation = (0, react_1.useCallback)((installationObj) => {
+        setInstallations([installationObj]);
+    }, [setInstallations]);
+    const integrationErrorKey = (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) || '';
+    // check if integration has been installed in AmpersandProvider
+    (0, react_1.useEffect)(() => {
+        if (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) {
+            // check if installation exists on selected integration
+            (0, api_1.api)().listInstallations({ projectId, integrationId: integrationObj.id, groupRef }, {
+                headers: {
+                    'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '',
+                },
+            })
+                .then((_installations) => {
+                setLoadingState(false);
+                setInstallations(_installations || []);
+            })
+                .catch((err) => {
+                setError(ErrorContextProvider_1.ErrorBoundary.INSTALLATION_LIST, integrationObj.id);
+                setLoadingState(false);
+                console.error('Error retrieving installation information: ', err);
+            });
+        }
+    }, [projectId, integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id, apiKey, groupRef, setError]);
+    const props = (0, react_1.useMemo)(() => ({
+        integrationId: (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.id) || '',
+        provider: (integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.provider) || '',
+        integrationObj,
+        consumerRef,
+        consumerName,
+        groupRef,
+        groupName,
+        installation,
+        setInstallation,
+    }), [integrationObj, consumerRef, consumerName, groupRef,
+        groupName, installation, setInstallation]);
+    return (isError(ErrorContextProvider_1.ErrorBoundary.INSTALLATION_LIST, integrationErrorKey)) ? (0, jsx_runtime_1.jsx)(ErrorTextBox_1.ErrorTextBox, { message: `Error retrieving installation information for integration "${(integrationObj === null || integrationObj === void 0 ? void 0 : integrationObj.name) || 'unknown'}"` }) : ((0, jsx_runtime_1.jsx)(InstallIntegrationContext.Provider, { value: props, children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, {}) : children }));
+}
+exports.InstallIntegrationProvider = InstallIntegrationProvider;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Integration } from '../services/api';
+interface IntegrationListContextValue {
+    integrations: Integration[] | null;
+}
+export declare const IntegrationListContext: import("react").Context<IntegrationListContextValue>;
+export declare const useIntegrationList: () => IntegrationListContextValue;
+type IntegrationListContextProviderProps = {
+    projectId: string;
+    children?: React.ReactNode;
+};
+export declare function IntegrationListProvider({ projectId, children }: IntegrationListContextProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/src/context/IntegrationListContext.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntegrationListProvider = exports.useIntegrationList = exports.IntegrationListContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 ErrorContextProvider_1 = require("./ErrorContextProvider");
+exports.IntegrationListContext = (0, react_1.createContext)({
+    integrations: null,
+});
+const useIntegrationList = () => {
+    const context = (0, react_1.useContext)(exports.IntegrationListContext);
+    if (!context) {
+        throw new Error('useIntegrationList must be used within a IntegrationListProvider');
+    }
+    return context;
+};
+exports.useIntegrationList = useIntegrationList;
+function IntegrationListProvider({ projectId, children }) {
+    const [integrations, setIntegrations] = (0, react_1.useState)(null);
+    const apiKey = (0, react_1.useContext)(ApiKeyContext_1.ApiKeyContext);
+    const { setError, isError } = (0, ErrorContextProvider_1.useErrorState)();
+    const [isLoading, setLoadingState] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        (0, api_1.api)().listIntegrations({ projectId }, {
+            headers: {
+                'X-Api-Key': apiKey !== null && apiKey !== void 0 ? apiKey : '',
+            },
+        }).then((_integrations) => {
+            setLoadingState(false);
+            setIntegrations(_integrations || []);
+        }).catch((err) => {
+            setLoadingState(false);
+            setError(ErrorContextProvider_1.ErrorBoundary.INTEGRATION_LIST, projectId);
+            console.error('Error retrieving integration information for : ', err);
+        });
+    }, [projectId, apiKey, setError]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        integrations,
+    }), [integrations]);
+    return (isError(ErrorContextProvider_1.ErrorBoundary.INTEGRATION_LIST, projectId)
+        ? (0, jsx_runtime_1.jsx)(ErrorTextBox_1.ErrorTextBox, { message: "Error retrieving integrations for the project, double check the API key" })
+        : ((0, jsx_runtime_1.jsx)(exports.IntegrationListContext.Provider, { value: contextValue, children: isLoading ? (0, jsx_runtime_1.jsx)(LoadingIcon_1.LoadingIcon, {}) : children })));
+}
+exports.IntegrationListProvider = IntegrationListProvider;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { Project } from '../services/api';
+interface ProjectContextValue {
+    project: Project | null;
+    appName: string;
+    projectId: string;
+}
+export declare const ProjectContext: import("react").Context<ProjectContextValue>;
+export declare const useProject: () => ProjectContextValue;
+type ProjectProviderProps = {
+    projectId: string;
+    children?: React.ReactNode;
+};
+export declare function ProjectProvider({ projectId, children }: ProjectProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};