From f53dcbb5a0209b71e79365be02a55997263aba40 Mon Sep 17 00:00:00 2001
From: Jeff Davidson <jpd@google.com>
Date: Mon, 21 Oct 2024 21:41:30 -0700
Subject: [PATCH] Revert DeepLinks in favor of regular links.

This component was originally added in 2017 to deep link to native
Sheets/Docs apps when installed on mobile devices. On reasonably modern
devices, regular HTTP links should be intercepted by native apps when
present, so no special machinery is needed.

Fixes #1963
Fixes #2282
---
 imports/client/components/DeepLink.tsx        | 80 -------------------
 imports/client/components/DocumentDisplay.tsx | 12 +--
 2 files changed, 3 insertions(+), 89 deletions(-)
 delete mode 100644 imports/client/components/DeepLink.tsx

diff --git a/imports/client/components/DeepLink.tsx b/imports/client/components/DeepLink.tsx
deleted file mode 100644
index 5caf3485e..000000000
--- a/imports/client/components/DeepLink.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { Meteor } from "meteor/meteor";
-import React, { useCallback, useState } from "react";
-
-interface DeepLinkProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  nativeUrl: string;
-  browserUrl: string;
-}
-
-enum DeepLinkLoadState {
-  IDLE = "idle",
-  ATTEMPTING_NATIVE = "attemptingNative",
-}
-
-type DeepLinkState =
-  | {
-      state: DeepLinkLoadState.IDLE;
-    }
-  | {
-      state: DeepLinkLoadState.ATTEMPTING_NATIVE;
-      startNativeLoad: Date;
-    };
-
-const DeepLink = ({
-  children,
-  nativeUrl,
-  browserUrl,
-  ...rest
-}: DeepLinkProps) => {
-  const [state, setState] = useState<DeepLinkState>({
-    state: DeepLinkLoadState.IDLE,
-  });
-
-  const browserOpen = useCallback(() => {
-    window.open(browserUrl, "_blank");
-  }, [browserUrl]);
-
-  const onAttemptingNativeTimeout = useCallback(() => {
-    if (state.state === DeepLinkLoadState.IDLE) {
-      return;
-    }
-
-    setState({ state: DeepLinkLoadState.IDLE });
-    if (new Date().getTime() - state.startNativeLoad.getTime() < 10000) {
-      browserOpen();
-    }
-  }, [state, browserOpen]);
-
-  const onClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      // window.orientation is a good proxy for mobile device
-      if (window.screen?.orientation) {
-        setState({
-          state: DeepLinkLoadState.ATTEMPTING_NATIVE,
-          startNativeLoad: new Date(),
-        });
-        Meteor.setTimeout(onAttemptingNativeTimeout, 25);
-      } else {
-        browserOpen();
-      }
-    },
-    [browserOpen, onAttemptingNativeTimeout],
-  );
-
-  const nativeIframe = () => {
-    return (
-      <iframe title="Open document" width="1px" height="1px" src={nativeUrl} />
-    );
-  };
-
-  return (
-    <div onClick={onClick} {...rest}>
-      {state.state === "attemptingNative" && nativeIframe()}
-      {children}
-    </div>
-  );
-};
-
-export default DeepLink;
diff --git a/imports/client/components/DocumentDisplay.tsx b/imports/client/components/DocumentDisplay.tsx
index 71da762ee..6f5a917e8 100644
--- a/imports/client/components/DocumentDisplay.tsx
+++ b/imports/client/components/DocumentDisplay.tsx
@@ -5,14 +5,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React from "react";
 import styled from "styled-components";
 import type { DocumentType } from "../../lib/models/Documents";
-import DeepLink from "./DeepLink";
 
 interface DocumentDisplayProps {
   document: DocumentType;
   displayMode: "link" | "embed";
 }
 
-const StyledDeepLink = styled(DeepLink)`
+const StyledDeepLink = styled.a`
   display: inline-block;
   font-weight: bold;
   white-space: nowrap;
@@ -46,19 +45,16 @@ const GoogleDocumentDisplay = ({
   displayMode,
 }: DocumentDisplayProps) => {
   let url: string;
-  let deepUrl: string;
   let title: string;
   let icon: IconDefinition;
   switch (document.value.type) {
     case "spreadsheet":
       url = `https://docs.google.com/spreadsheets/d/${document.value.id}/edit?ui=2&rm=embedded&gid=0#gid=0`;
-      deepUrl = `googlesheets://${url}`;
       title = "Sheet";
       icon = faTable;
       break;
     case "document":
       url = `https://docs.google.com/document/d/${document.value.id}/edit?ui=2&rm=embedded#gid=0`;
-      deepUrl = `googledocs://${url}`;
       title = "Doc";
       icon = faFileAlt;
       break;
@@ -74,10 +70,8 @@ const GoogleDocumentDisplay = ({
   switch (displayMode) {
     case "link":
       return (
-        <StyledDeepLink nativeUrl={deepUrl} browserUrl={url}>
-          <a href={url} target="new">
-            <FontAwesomeIcon fixedWidth icon={icon} /> <span>{title}</span>
-          </a>
+        <StyledDeepLink href={url} target="_blank" rel="noreferrer noopener">
+          <FontAwesomeIcon fixedWidth icon={icon} /> <span>{title}</span>
         </StyledDeepLink>
       );
     case "embed":