fix(onboarding): Do not display selection styles in the new changes

Author: priscilawebdev

static/app/components/platformPicker.tsx

@@ -59,6 +59,10 @@ interface PlatformPickerProps {
   showFilterBar?: boolean;
   showOther?: boolean;
   source?: string;
+  /**
+   * When `false`, hides the close button and does not display a custom background color.
+   */
+  visibleSelection?: boolean;
 }
 
 type State = {
@@ -69,6 +73,7 @@ type State = {
 class PlatformPicker extends Component<PlatformPickerProps, State> {
   static defaultProps = {
     showOther: true,
+    visibleSelection: true,
   };
 
   state: State = {
@@ -192,6 +197,7 @@ class PlatformPicker extends Component<PlatformPickerProps, State> {
           {platformList.map(platform => {
             return (
               <PlatformCard
+                visibleSelection={this.props.visibleSelection}
                 data-test-id={`platform-${platform.id}`}
                 key={platform.id}
                 platform={platform}
@@ -295,36 +301,40 @@ const ClearButton = styled(Button)`
   color: ${p => p.theme.textColor};
 `;
 
-const PlatformCard = styled(({platform, selected, onClear, ...props}: any) => (
-  <div {...props}>
-    <StyledPlatformIcon
-      platform={platform.id}
-      size={56}
-      radius={5}
-      withLanguageIcon
-      format="lg"
-    />
-    <h3>{platform.name}</h3>
-    {selected && (
-      <ClearButton
-        icon={<IconClose isCircled />}
-        borderless
-        size="xs"
-        onClick={onClear}
-        aria-label={t('Clear')}
+const PlatformCard = styled(
+  ({platform, selected, visibleSelection, onClear, ...props}: any) => (
+    <div {...props}>
+      <StyledPlatformIcon
+        platform={platform.id}
+        size={56}
+        radius={5}
+        withLanguageIcon
+        format="lg"
       />
-    )}
-  </div>
-))`
+      <h3>{platform.name}</h3>
+      {selected && visibleSelection && (
+        <ClearButton
+          icon={<IconClose isCircled />}
+          borderless
+          size="xs"
+          onClick={onClear}
+          aria-label={t('Clear')}
+        />
+      )}
+    </div>
+  )
+)`
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0 0 14px;
   border-radius: 4px;
-  background: ${p => p.selected && p.theme.alert.info.backgroundLight};
   cursor: pointer;
 
+  ${p =>
+    p.selected && p.visibleSelection && `background: ${p.theme.alert.info.background};`}
+
   &:hover {
     background: ${p => p.theme.alert.muted.backgroundLight};
   }

static/app/views/onboarding/onboarding.tsx

@@ -251,6 +251,18 @@ function Onboarding(props: Props) {
         ...onboardingContext.data,
         projects: currentProjects,
       });
+      if (docsOnPlatformClickEnabled) {
+        onboardingContext.setData({
+          ...onboardingContext.data,
+          projects: currentProjects,
+          selectedSDK: undefined,
+        });
+      } else {
+        onboardingContext.setData({
+          ...onboardingContext.data,
+          projects: currentProjects,
+        });
+      }
       handleXhrErrorResponse('Unable to delete project in onboarding', error);
       // we don't give the user any feedback regarding this error as this shall be silent
     }

static/app/views/onboarding/platformSelection.tsx

@@ -59,6 +59,7 @@ export function PlatformSelection(props: StepProps) {
         </p>
         <PlatformPicker
           noAutoFilter
+          visibleSelection={!docsOnPlatformClickEnabled}
           source="targeted-onboarding"
           platform={onboardingContext.data.selectedSDK?.key}
           defaultCategory={onboardingContext.data.selectedSDK?.category}