Add JustConnectedModal (exercism#7896)

* Add JustConnectedModal

* Remove unused imports

* Handle all json-less error responses

* Restore accidentally deleted component

* Make internal green again

* Fix delete

---------

Co-authored-by: Jeremy Walker <[email protected]>

Author: dem4ron

app/controllers/settings/github_syncer_controller.rb

@@ -1,5 +1,5 @@
 class Settings::GithubSyncerController < ApplicationController
-  skip_before_action :verify_authenticity_token, only: %i[update sync_everything sync_track sync_solution sync_iteration]
+  skip_before_action :verify_authenticity_token, only: %i[update sync_everything sync_track sync_solution sync_iteration destroy]
 
   def show
     @just_connected = !!params[:connected]

app/javascript/components/modals/welcome-modal/WelcomeModal.tsx

@@ -52,7 +52,11 @@ export const WelcomeModalContext =
     setOpen: () => null,
     currentView: 'initial',
     setCurrentView: () => null,
-    links: { hideModalEndpoint: '', apiUserEndpoint: '', codingFundamentalsCourse: '' },
+    links: {
+      hideModalEndpoint: '',
+      apiUserEndpoint: '',
+      codingFundamentalsCourse: '',
+    },
   })
 
 export default function WelcomeModal({
@@ -63,7 +67,7 @@ export default function WelcomeModal({
   links: {
     hideModalEndpoint: string
     apiUserEndpoint: string
-    bootcampUrl: string
+    codingFundamentalsCourse: string
   }
   numTracks: number
 }): JSX.Element {

app/javascript/components/settings/BootcampFreeCouponForm.tsx

@@ -6,13 +6,15 @@ type Links = {
   bootcampFreeCouponCode: string
 }
 
+export type BootcampFreeCouponFormProps = {
+  bootcampFreeCouponCode: string
+  links: Links
+}
+
 export default function BootcampFreeCouponForm({
   bootcampFreeCouponCode,
   links,
-}: {
-  bootcampFreeCouponCode: string
-  links: Links
-}): JSX.Element {
+}: BootcampFreeCouponFormProps): JSX.Element {
   const [couponCode, setCouponCode] = useState(bootcampFreeCouponCode)
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)

app/javascript/components/settings/github-syncer/common/SectionHeader.tsx

@@ -1,9 +1,7 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { InsiderBubble } from './InsiderBubble'
-import { GitHubSyncerContext } from '../GitHubSyncerForm'
 
 export function SectionHeader({ title }: { title: string }) {
-  const { isUserInsider } = useContext(GitHubSyncerContext)
   return (
     <div className="!mb-6 flex justify-start items-center gap-12">
       <h2 className="!mb-0">{title}</h2>

app/javascript/components/settings/github-syncer/fetchWithParams.tsx

@@ -1,3 +1,5 @@
+import toast from 'react-hot-toast'
+
 export function fetchWithParams({
   url,
   params,
@@ -13,8 +15,26 @@ export function fetchWithParams({
       'Content-Type': 'application/json',
       Accept: 'application/json',
     },
-    body: JSON.stringify({
-      github_solution_syncer: params,
-    }),
+    body: params
+      ? JSON.stringify({
+          github_solution_syncer: params,
+        })
+      : null,
   })
 }
+
+export async function handleJsonErrorResponse(
+  response: Response,
+  fallbackMessage: string
+) {
+  const text = await response.text()
+
+  try {
+    const data = JSON.parse(text)
+    const message = data?.error?.message || fallbackMessage
+    toast.error(message)
+  } catch {
+    console.error('Expected JSON, but received:', text)
+    toast.error(fallbackMessage)
+  }
+}

app/javascript/components/settings/github-syncer/sections/ConnectedSection/CommitMessageTemplateSection.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import toast from 'react-hot-toast'
 import { ConfirmationModal } from '../../common/ConfirmationModal'
-import { fetchWithParams } from '../../fetchWithParams'
+import { fetchWithParams, handleJsonErrorResponse } from '../../fetchWithParams'
 import { GitHubSyncerContext } from '../../GitHubSyncerForm'
 import { SectionHeader } from '../../common/SectionHeader'
 import { flushSync } from 'react-dom'
@@ -32,10 +32,7 @@ export function CommitMessageTemplateSection() {
           if (response.ok) {
             toast.success('Saved changes successfully!')
           } else {
-            const data = await response.json()
-            toast.error(
-              'Failed to save changes: ' + data.error.message || 'Unknown error'
-            )
+            await handleJsonErrorResponse(response, 'Failed to save changes.')
           }
         })
         .catch((error) => {

app/javascript/components/settings/github-syncer/sections/ConnectedSection/DangerZoneSection.tsx

@@ -51,15 +51,24 @@ export function DangerZoneSection() {
           toast.success('GitHub sync deleted successfully')
           setDeleteConfirmationModalOpen(false)
         } else {
-          const data = await response.json()
-          toast.error(
-            `Failed to delete GitHub sync: ${
-              data.error.message || 'Unknown error'
-            }`
-          )
+          const text = await response.text()
+          try {
+            const data = JSON.parse(text)
+            toast.error(
+              `Failed to delete GitHub sync: ${
+                data.error?.message || 'Unknown error'
+              }`
+            )
+          } catch {
+            console.error('Expected JSON, but received:', text)
+            toast.error('Failed to delete GitHub sync.')
+          }
         }
       })
       .catch((error) => {
+        toast.error(
+          `Oops! We received an unexpected error while deleting the GitHub sync.`
+        )
         console.error('Error:', error)
       })
   }, [links.settings])

app/javascript/components/settings/github-syncer/sections/ConnectedSection/FileStructureSection.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'
 import { flushSync } from 'react-dom'
 import toast from 'react-hot-toast'
 import { ConfirmationModal } from '../../common/ConfirmationModal'
-import { fetchWithParams } from '../../fetchWithParams'
+import { fetchWithParams, handleJsonErrorResponse } from '../../fetchWithParams'
 import { GitHubSyncerContext } from '../../GitHubSyncerForm'
 import { SectionHeader } from '../../common/SectionHeader'
 import { assembleClassNames } from '@/utils/assemble-classnames'
@@ -40,10 +40,7 @@ export function FileStructureSection() {
           if (response.ok) {
             toast.success('Saved changes successfully!')
           } else {
-            const data = await response.json()
-            toast.error(
-              'Failed to save changes: ' + data.error.message || 'Unknown error'
-            )
+            await handleJsonErrorResponse(response, 'Failed to save changes.')
           }
         })
         .catch((error) => {

app/javascript/components/settings/github-syncer/sections/ConnectedSection/IterationFilesSection.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react'
 import toast from 'react-hot-toast'
 import { assembleClassNames } from '@/utils/assemble-classnames'
 import { GitHubSyncerContext } from '../../GitHubSyncerForm'
-import { fetchWithParams } from '../../fetchWithParams'
+import { fetchWithParams, handleJsonErrorResponse } from '../../fetchWithParams'
 import { SectionHeader } from '../../common/SectionHeader'
 import { GraphicalIcon } from '@/components/common'
 
@@ -23,10 +23,7 @@ export function IterationFilesSection() {
         if (response.ok) {
           toast.success('Saved changes successfully!')
         } else {
-          const data = await response.json()
-          toast.error(
-            'Failed to save changes: ' + data.error.message || 'Unknown error'
-          )
+          await handleJsonErrorResponse(response, 'Failed to save changes.')
         }
       })
       .catch((error) => {

app/javascript/components/settings/github-syncer/sections/ConnectedSection/JustConnectedModal.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import Modal from '@/components/modals/Modal'
+import { GitHubSyncerContext } from '../../GitHubSyncerForm'
+import { Icon } from '@/components/common'
+import { handleSyncEverything } from './ManualSyncSection'
+
+export function JustConnectedModal(): JSX.Element {
+  const { links } = React.useContext(GitHubSyncerContext)
+  const [isModalOpen, setIsModalOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search)
+    if (searchParams.get('connected') === 'true') {
+      setIsModalOpen(true)
+    }
+  }, [])
+
+  const handleRemoveParam = React.useCallback(() => {
+    const url = new URL(window.location.href)
+    url.searchParams.delete('connected')
+    window.history.replaceState({}, '', url.toString())
+    setIsModalOpen(false)
+  }, [])
+
+  const handleSync = React.useCallback(() => {
+    handleSyncEverything({ syncEverythingEndpoint: links.syncEverything })
+    handleRemoveParam()
+  }, [links.syncEverything])
+
+  const handleCloseModal = React.useCallback(() => {
+    handleRemoveParam()
+    setIsModalOpen(false)
+  }, [])
+
+  return (
+    <Modal
+      className="m-generic-confirmation"
+      onClose={handleCloseModal}
+      open={isModalOpen}
+    >
+      <div className="flex flex-col items-start max-w-[540px] mx-auto pb-1">
+        <div className="flex gap-20 items-center mb-8">
+          <Icon
+            icon="exercism-face"
+            category="icons"
+            alt="Exercism"
+            className="mb-16 h-[64px]"
+          />
+          <Icon
+            icon="sync"
+            category="graphics"
+            alt="Sync with"
+            className="mb-16 h-[64px]"
+          />
+          <Icon
+            icon="external-site-github"
+            category="icons"
+            alt="Github"
+            className="mb-16 h-[64px]"
+          />
+        </div>
+        <h3 className="!text-[24px] !mb-8">
+          Repository connected successfully!
+        </h3>
+        <p className="!text-18 leading-140 mb-8">
+          We've connected your Exercism account to your chosen repository.
+        </p>
+        <p className="!text-18 leading-140 mb-12">
+          If you're happy with the defaults, you can back everything up now. Or
+          you can tweak your settings, then use the button at the bottom of the
+          settings page to back up later. Do you want to backup everything now?
+        </p>
+      </div>
+
+      <div className="flex gap-8 items-center">
+        <button className="btn btn-l btn-primary w-fit" onClick={handleSync}>
+          Back up everything now
+        </button>
+        <button className="btn btn-default btn-l" onClick={handleCloseModal}>
+          Back up later
+        </button>
+      </div>
+    </Modal>
+  )
+}