fix: automatically close /auth_flow page at end of Shopify OAuth UX and hide Shop field unless necessary (#16441)

Author: lmossman

airbyte-webapp/src/area/connector/types/oauthCallback.ts

@@ -12,4 +12,8 @@ interface CancelOAuthEvent {
   tabUuid: string;
 }
 
-export type OAuthEvent = CompletedOAuthEvent | TakeoverOAuthEvent | CancelOAuthEvent;
+interface CloseOAuthEvent {
+  type: "close";
+}
+
+export type OAuthEvent = CompletedOAuthEvent | TakeoverOAuthEvent | CancelOAuthEvent | CloseOAuthEvent;

airbyte-webapp/src/area/connector/utils/oauthCallback.ts

@@ -26,12 +26,18 @@ if (window.opener && window.opener.location.origin === window.location.origin) {
 const bc = new BroadcastChannel<OAuthEvent>(OAUTH_BROADCAST_CHANNEL_NAME);
 bc.postMessage({ type: "completed", query });
 
-const redirectToIndex = "redirect_to_index" in query ? true : false;
-// Close popup window once we're done
-if (redirectToIndex) {
-  // Redirect to the index page to support Shopify's strange integration requirements
-  // see https://shopify.dev/docs/apps/launch/app-requirements-checklist#b-permissions for more details
+bc.onmessage = async (event) => {
+  if (event.type === "close") {
+    window.close();
+  }
+};
+
+// Wait to receive the "close" event from the original tab.
+// This is necessary because Shopify requires clicking the Open app button to open our app homepage, rather than just close out immediately.
+// To satisfy this requirement, we wait 5 seconds in this /auth_flow page to receive the "close" event, which indicates that the user initiated
+// this from the Airbyte UI rather than the Shopify app.
+// If we don't receive it, redirect to the index page to satisfy Shopify's requirements.
+// See notion page for more details: https://www.notion.so/Shopify-App-Listing-Requirements-1f51b3df260c8029b2a7de0399c8d5d2
+setTimeout(() => {
   window.location.href = "/";
-} else {
-  window.close();
-}
+}, 5000);

airbyte-webapp/src/components/ui/Toast/Toast.module.scss

@@ -21,12 +21,19 @@
       // Use as a background color the primary color of the message as set via the Message component
       background-color: var(--message-color);
       animation: timeout-bar forwards 5s linear;
+      animation-play-state: paused;
     }
 
     &:hover::after {
       animation-play-state: paused;
     }
   }
+
+  &--focused {
+    &::after {
+      animation-play-state: running;
+    }
+  }
 }
 
 @keyframes timeout-bar {

airbyte-webapp/src/components/ui/Toast/Toast.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import styles from "./Toast.module.scss";
 import { Message, MessageProps } from "../Message";
@@ -9,12 +9,28 @@ export interface ToastProps extends MessageProps {
 }
 
 export const Toast: React.FC<ToastProps> = ({ timeout, ...props }) => {
+  // Delay the timeout animation until the user has focused the current tab
+  const [isFocused, setIsFocused] = useState(document.hasFocus());
+  useEffect(() => {
+    const onFocus = () => setIsFocused(true);
+    const onBlur = () => setIsFocused(false);
+
+    window.addEventListener("focus", onFocus);
+    window.addEventListener("blur", onBlur);
+
+    return () => {
+      window.removeEventListener("focus", onFocus);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, []);
+
   return (
     <div onAnimationEnd={props.onClose}>
       <Message
         {...props}
         className={classNames(props.className, styles.toastContainer, {
           [styles["toastContainer--timeout"]]: timeout,
+          [styles["toastContainer--focused"]]: isFocused,
         })}
         textClassName={styles.toastText}
       />

airbyte-webapp/src/hooks/services/useConnectorAuth.tsx

@@ -369,6 +369,9 @@ export function useRunOauthFlow({
               };
 
               await completeOauth(queryParams);
+
+              // Close the /auth_flow page after completing the oauth flow
+              bc.postMessage({ type: "close" });
             }
             // OAuth flow is completed or taken over by another tab, so close the broadcast channel
             // and popup window if it is still open.