From 78354165cb804ab8b31ebeb51b44eede5aeb6f11 Mon Sep 17 00:00:00 2001
From: Arthur Knaus <arthur.knaus@sentry.io>
Date: Thu, 9 Jan 2025 14:35:13 +0100
Subject: [PATCH] fix(onboarding): Safari text selection

---
 .../gettingStartedDoc/onboardingLayout.tsx    |  14 +--
 .../onboarding/gettingStartedDoc/step.tsx     | 101 ++++++++++--------
 2 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx b/static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx
index a5f467c3c23f9c..dd9145c5a56375 100644
--- a/static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx
+++ b/static/app/components/onboarding/gettingStartedDoc/onboardingLayout.tsx
@@ -167,11 +167,11 @@ export function OnboardingLayout({
           ) : null}
         </Header>
         <Divider withBottomMargin />
-        <Steps>
+        <div>
           {steps.map(step => (
-            <Step key={step.title ?? step.type} {...step} />
+            <StyledStep key={step.title ?? step.type} {...step} />
           ))}
-        </Steps>
+        </div>
         {nextSteps.length > 0 && (
           <Fragment>
             <Divider />
@@ -222,10 +222,10 @@ const Divider = styled('hr')<{withBottomMargin?: boolean}>`
   ${p => p.withBottomMargin && `margin-bottom: ${space(3)}`}
 `;
 
-const Steps = styled('div')`
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
+const StyledStep = styled(Step)`
+  :not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
 `;
 
 const Wrapper = styled('div')`
diff --git a/static/app/components/onboarding/gettingStartedDoc/step.tsx b/static/app/components/onboarding/gettingStartedDoc/step.tsx
index 2233c1a4e45490..5fc9e9c8772b92 100644
--- a/static/app/components/onboarding/gettingStartedDoc/step.tsx
+++ b/static/app/components/onboarding/gettingStartedDoc/step.tsx
@@ -1,3 +1,4 @@
+import type React from 'react';
 import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 import beautify from 'js-beautify';
@@ -14,7 +15,7 @@ export enum StepType {
   VERIFY = 'verify',
 }
 
-export const StepTitle = {
+export const StepTitles = {
   [StepType.INSTALL]: t('Install'),
   [StepType.CONFIGURE]: t('Configure SDK'),
   [StepType.VERIFY]: t('Verify'),
@@ -117,7 +118,7 @@ export type Configuration = {
 };
 
 // TODO(aknaus): move to types
-interface BaseStepProps {
+interface BaseStepProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Additional information to be displayed below the configurations
    */
@@ -210,49 +211,47 @@ export function Step({
   onOptionalToggleClick,
   collapsible = false,
   codeHeader,
+  ...props
 }: StepProps) {
   const [showOptionalConfig, setShowOptionalConfig] = useState(false);
 
   const config = (
-    <Fragment>
+    <ContentWrapper>
       {description && <Description>{description}</Description>}
 
-      {!!configurations?.length && (
-        <Configurations>
-          {configurations.map((configuration, index) => {
-            if (configuration.configurations) {
-              return (
-                <Fragment key={index}>
-                  {getConfiguration(configuration)}
-                  {configuration.configurations.map(
-                    (nestedConfiguration, nestedConfigurationIndex) => (
-                      <Fragment key={nestedConfigurationIndex}>
-                        {nestedConfigurationIndex ===
-                        (configuration.configurations?.length ?? 1) - 1
-                          ? codeHeader
-                          : null}
-                        {getConfiguration(nestedConfiguration)}
-                      </Fragment>
-                    )
-                  )}
-                </Fragment>
-              );
-            }
+      {!!configurations?.length &&
+        configurations.map((configuration, index) => {
+          if (configuration.configurations) {
             return (
               <Fragment key={index}>
-                {index === configurations.length - 1 ? codeHeader : null}
                 {getConfiguration(configuration)}
+                {configuration.configurations.map(
+                  (nestedConfiguration, nestedConfigurationIndex) => (
+                    <Fragment key={nestedConfigurationIndex}>
+                      {nestedConfigurationIndex ===
+                      (configuration.configurations?.length ?? 1) - 1
+                        ? codeHeader
+                        : null}
+                      {getConfiguration(nestedConfiguration)}
+                    </Fragment>
+                  )
+                )}
               </Fragment>
             );
-          })}
-        </Configurations>
-      )}
+          }
+          return (
+            <Fragment key={index}>
+              {index === configurations.length - 1 ? codeHeader : null}
+              {getConfiguration(configuration)}
+            </Fragment>
+          );
+        })}
       {additionalInfo && <GeneralAdditionalInfo>{additionalInfo}</GeneralAdditionalInfo>}
-    </Fragment>
+    </ContentWrapper>
   );
 
   return collapsible ? (
-    <div>
+    <div {...props}>
       <OptionalConfigWrapper
         expanded={showOptionalConfig}
         onClick={() => {
@@ -260,7 +259,7 @@ export function Step({
           setShowOptionalConfig(!showOptionalConfig);
         }}
       >
-        <h4 style={{marginBottom: 0}}>{title ?? StepTitle[type]}</h4>
+        <StepTitle>{title ?? StepTitles[type]}</StepTitle>
         <ToggleButton
           priority="link"
           borderless
@@ -272,21 +271,31 @@ export function Step({
       {showOptionalConfig ? config : null}
     </div>
   ) : (
-    <div>
-      <h4>{title ?? StepTitle[type]}</h4>
+    <div {...props}>
+      <StepTitle>{title ?? StepTitles[type]}</StepTitle>
       {config}
     </div>
   );
 }
 
-const Configuration = styled('div')`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+// NOTE: We intentionally avoid using flex or grid here
+// as it leads to weird text selection behavior in Safari
+// see https://github.com/getsentry/sentry/issues/79958
+
+const CONTENT_SPACING = space(2);
+
+const ContentWrapper = styled('div')`
+  margin-top: ${CONTENT_SPACING};
+`;
+
+const StepTitle = styled('h4')`
+  margin-bottom: 0 !important;
 `;
 
-const Configurations = styled(Configuration)`
-  margin-top: ${space(2)};
+const Configuration = styled('div')`
+  :not(:last-child) {
+    margin-bottom: ${CONTENT_SPACING};
+  }
 `;
 
 const Description = styled('div')`
@@ -294,18 +303,26 @@ const Description = styled('div')`
     color: ${p => p.theme.pink400};
   }
 
+  :not(:last-child) {
+    margin-bottom: ${CONTENT_SPACING};
+  }
+
   && > p,
   && > h4,
   && > h5,
   && > h6 {
-    margin-bottom: ${space(1)};
+    &:not(:last-child) {
+      margin-bottom: ${CONTENT_SPACING};
+    }
   }
 `;
 
-const AdditionalInfo = styled(Description)``;
+const AdditionalInfo = styled(Description)`
+  margin-top: ${CONTENT_SPACING};
+`;
 
 const GeneralAdditionalInfo = styled(Description)`
-  margin-top: ${space(2)};
+  margin-top: ${CONTENT_SPACING};
 `;
 
 const OptionalConfigWrapper = styled('div')<{expanded: boolean}>`