refactor: address comments.

Author: knightedcodemonkey

playwright/app.spec.ts

@@ -649,7 +649,7 @@ test('Open PR drawer confirms and submits component/styles filepaths', async ({
   await connectByotWithSingleRepo(page)
   await ensureOpenPrDrawerOpen(page)
 
-  await page.locator('#github-pr-head-branch').fill('develop/open-pr-test')
+  await page.locator('#github-pr-head-branch').fill('Develop/Open-Pr-Test')
   await page.locator('#github-pr-component-path').fill('examples/component/App.tsx')
   await page.locator('#github-pr-styles-path').fill('examples/styles/app.css')
   await page.locator('#github-pr-title').fill('Apply editor updates from develop')
@@ -680,14 +680,41 @@ test('Open PR drawer confirms and submits component/styles filepaths', async ({
   const createdRefPayload = createdRefBody as CreateRefRequestBody | null
   const pullRequestPayload = pullRequestBody as PullRequestCreateBody | null
 
-  expect(createdRefPayload?.ref).toBe('refs/heads/develop/open-pr-test')
+  expect(createdRefPayload?.ref).toBe('refs/heads/Develop/Open-Pr-Test')
   expect(createdRefPayload?.sha).toBe('abc123mainsha')
 
   expect(upsertRequests).toHaveLength(2)
   expect(upsertRequests[0]?.path).toBe('examples/component/App.tsx')
   expect(upsertRequests[1]?.path).toBe('examples/styles/app.css')
-  expect(pullRequestPayload?.head).toBe('develop/open-pr-test')
+  expect(pullRequestPayload?.head).toBe('Develop/Open-Pr-Test')
   expect(pullRequestPayload?.base).toBe('main')
+
+  await ensureOpenPrDrawerOpen(page)
+  await expect(page.locator('#github-pr-component-path')).toHaveValue(
+    'examples/component/App.tsx',
+  )
+  await expect(page.locator('#github-pr-styles-path')).toHaveValue(
+    'examples/styles/app.css',
+  )
+  await expect(page.locator('#github-pr-base-branch')).toHaveValue('main')
+
+  await expect(page.locator('#github-pr-head-branch')).toHaveValue(
+    /^develop\/develop\/editor-sync-/,
+  )
+  await expect(page.locator('#github-pr-head-branch')).not.toHaveValue(
+    'Develop/Open-Pr-Test',
+  )
+  await expect(page.locator('#github-pr-title')).toHaveValue(
+    'Apply component and styles edits to knightedcodemonkey/develop',
+  )
+  await expect(page.locator('#github-pr-body')).toHaveValue(
+    [
+      'This PR was created from @knighted/develop editor content.',
+      '',
+      '- Component source -> examples/component/App.tsx',
+      '- Styles source -> examples/styles/app.css',
+    ].join('\n'),
+  )
 })
 
 test('Open PR drawer validates unsafe filepaths', async ({ page }) => {

src/modules/github-byot-controls.js

@@ -214,7 +214,7 @@ export const createGitHubByotControls = ({
 
   const getSelectedRepositoryObject = () => {
     if (!lastSelectedRepository) {
-      return
+      return null
     }
 
     return writableRepos.find(repo => repo.fullName === lastSelectedRepository) ?? null

src/modules/github-pr-drawer.js

@@ -40,16 +40,27 @@ const saveRepositoryPrConfig = ({ repositoryFullName, config }) => {
   }
 }
 
-const clearRepositoryPrConfig = repositoryFullName => {
+const clearRepositoryPrDraftFields = ({
+  repositoryFullName,
+  componentFilePath,
+  stylesFilePath,
+  baseBranch,
+}) => {
   if (typeof repositoryFullName !== 'string' || !repositoryFullName.trim()) {
     return
   }
 
-  try {
-    localStorage.removeItem(`${prConfigStoragePrefix}${repositoryFullName}`)
-  } catch {
-    /* noop */
-  }
+  saveRepositoryPrConfig({
+    repositoryFullName,
+    config: {
+      componentFilePath,
+      stylesFilePath,
+      baseBranch,
+      headBranch: '',
+      prTitle: '',
+      prBody: '',
+    },
+  })
 }
 
 const toSafeText = value => (typeof value === 'string' ? value.trim() : '')
@@ -97,18 +108,20 @@ const validateFilePath = value => {
 }
 
 const sanitizeBranchPart = value => {
-  const trimmed = toSafeText(value).toLowerCase()
+  const trimmed = toSafeText(value)
   if (!trimmed) {
     return ''
   }
 
   return trimmed
-    .replace(/[^a-z0-9._/-]/g, '-')
+    .replace(/[^A-Za-z0-9._/-]/g, '-')
     .replace(/\/+/g, '/')
     .replace(/-{2,}/g, '-')
     .replace(/^[-/.]+|[-/.]+$/g, '')
 }
 
+const sanitizeAutoBranchPart = value => sanitizeBranchPart(value).toLowerCase()
+
 const toUtcBranchStamp = () => {
   const now = new Date()
   const parts = [
@@ -137,7 +150,7 @@ const isAutoGeneratedHeadBranch = value => {
 }
 
 const createDefaultBranchName = repository => {
-  const repoName = sanitizeBranchPart(repository?.name ?? '') || 'repo'
+  const repoName = sanitizeAutoBranchPart(repository?.name ?? '') || 'repo'
   const stamp = toUtcBranchStamp()
   const entropy = createBranchEntropySuffix()
   return `develop/${repoName}/editor-sync-${stamp}-${entropy}`
@@ -322,7 +335,8 @@ export const createGitHubPrDrawer = ({
   const syncFormForRepository = ({ resetBranch = false, resetAll = false } = {}) => {
     const repository = getSelectedRepositoryObject()
     const repositoryFullName = getRepositoryFullName(repository)
-    const savedConfig = resetAll ? {} : readRepositoryPrConfig(repositoryFullName)
+    const savedConfig = readRepositoryPrConfig(repositoryFullName)
+    const savedDraftConfig = resetAll ? {} : savedConfig
 
     const componentFilePath =
       typeof savedConfig.componentFilePath === 'string' && savedConfig.componentFilePath
@@ -352,7 +366,7 @@ export const createGitHubPrDrawer = ({
 
     if (headBranchInput instanceof HTMLInputElement) {
       if (resetAll || resetBranch || !toSafeText(headBranchInput.value)) {
-        const savedHeadBranch = sanitizeBranchPart(savedConfig.headBranch)
+        const savedHeadBranch = sanitizeBranchPart(savedDraftConfig.headBranch)
         headBranchInput.value =
           savedHeadBranch && !isAutoGeneratedHeadBranch(savedHeadBranch)
             ? savedHeadBranch
@@ -363,15 +377,15 @@ export const createGitHubPrDrawer = ({
     if (prTitleInput instanceof HTMLInputElement) {
       if (resetAll || !toSafeText(prTitleInput.value)) {
         prTitleInput.value =
-          toSafeText(savedConfig.prTitle) || toDefaultPrTitle(repository)
+          toSafeText(savedDraftConfig.prTitle) || toDefaultPrTitle(repository)
       }
     }
 
     if (prBodyInput instanceof HTMLTextAreaElement) {
       if (resetAll || !toSafeText(prBodyInput.value)) {
         prBodyInput.value =
-          typeof savedConfig.prBody === 'string' && savedConfig.prBody
-            ? savedConfig.prBody
+          typeof savedDraftConfig.prBody === 'string' && savedDraftConfig.prBody
+            ? savedDraftConfig.prBody
             : toDefaultPrBody({ componentFilePath, stylesFilePath })
       }
     }
@@ -512,7 +526,12 @@ export const createGitHubPrDrawer = ({
         signal: abortController.signal,
       })
         .then(result => {
-          persistCurrentPaths()
+          clearRepositoryPrDraftFields({
+            repositoryFullName: repositoryLabel,
+            componentFilePath: componentPathValidation.value,
+            stylesFilePath: stylesPathValidation.value,
+            baseBranch: values.baseBranch,
+          })
           const url = result.pullRequest.htmlUrl
           setStatus(
             url ? `Pull request opened: ${url}` : 'Pull request opened successfully.',
@@ -522,7 +541,6 @@ export const createGitHubPrDrawer = ({
             url,
             pullRequestNumber: result.pullRequest.number,
           })
-          clearRepositoryPrConfig(repositoryLabel)
           resetOnNextOpen = true
           setOpen(false)
         })
@@ -534,7 +552,12 @@ export const createGitHubPrDrawer = ({
           const message =
             error instanceof Error ? error.message : 'Failed to open pull request.'
           setStatus(`Open PR failed: ${message}`, 'error')
-          clearRepositoryPrConfig(repositoryLabel)
+          clearRepositoryPrDraftFields({
+            repositoryFullName: repositoryLabel,
+            componentFilePath: componentPathValidation.value,
+            stylesFilePath: stylesPathValidation.value,
+            baseBranch: values.baseBranch,
+          })
           resetOnNextOpen = true
         })
         .finally(() => {