@amp-labs/react 1.5.1 → 1.5.2

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

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

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

@@ -11,7 +11,7 @@ function RequiredFields() {
     var _a, _b, _c;
     const { configureState, selectedObjectName } = (0, useSelectedConfigureState_1.useSelectedConfigureState)();
     const { appName } = (0, ProjectContextProvider_1.useProject)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { string: `${appName} reads the following ${selectedObjectName} fields` }), (0, jsx_runtime_1.jsx)(react_1.Box, { marginBottom: "20px", children: ((_b = (_a = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _a === void 0 ? void 0 : _a.requiredFields) === null || _b === void 0 ? void 0 : _b.length)
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { string: `${appName} reads the following ${selectedObjectName} fields` }), (0, jsx_runtime_1.jsx)(react_1.Box, { marginBottom: "20px", display: "flex", gap: 1, children: ((_b = (_a = configureState === null || configureState === void 0 ? void 0 : configureState.read) === null || _a === void 0 ? void 0 : _a.requiredFields) === null || _b === void 0 ? void 0 : _b.length)
                     ? ((_c = configureState.read) === null || _c === void 0 ? void 0 : _c.requiredFields.map((field) => {
                         if (!(0, utils_1.isIntegrationFieldMapping)(field)) {
                             return (0, jsx_runtime_1.jsx)(react_1.Tag, { children: field.displayName }, field.fieldName);

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

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

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

@@ -9,7 +9,7 @@ const fetchOAuthPopupURL = async (projectId, consumerRef, groupRef, apiKey, prov
     });
     const app = providerApps.find((a) => a.provider === provider);
     if (!app) {
-        throw new Error(`You must first set up a ${(0, utils_1.capitalize)(provider)} Connected App using the Ampersand Console.`);
+        throw new Error(`You must first set up a ${(0, utils_1.capitalize)(provider)} Provider App using the Ampersand Console.`);
     }
     const request = {
         connectOAuthParams: {

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

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

package/build/src/services/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amp-labs/react",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Ampersand React library.",
   "author": {
     "name": "Ampersand Labs",

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

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

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

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