From d4b1ed859ce09d7662a022c6c118b65c608ac152 Mon Sep 17 00:00:00 2001 From: Mai-Lapyst Date: Mon, 20 May 2024 23:32:48 +0000 Subject: [PATCH] Port: Fix issue/PR title edit (gitea#30858) (#3797) This PR ports [gitea#30858](https://github.com/go-gitea/gitea/pull/30858) / [this commit](https://github.com/go-gitea/gitea/commit/5c236bd4c024dbe4a71516b10aa812893651983a) to forgejo. [week 2024-20 cherry pick](https://codeberg.org/forgejo/forgejo/pulls/3729) ## Tests - [ ] Click "edit" to get into edit mode, change the title and then use Alt+Enter to save the title ## Screenshots Before: ![grafik](/attachments/bb0b2562-7da0-4205-a647-3270d66f2ad7) ![grafik](/attachments/c3d05a21-659d-4616-b357-87de57232182) After: ![grafik](/attachments/d9af6966-3282-439b-a845-76618a24b9a6) ![grafik](/attachments/5acd6684-69c4-41a4-8e27-7cb75fe3c7e4) Co-authored-by: wxiaoguang Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3797 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-authored-by: Mai-Lapyst Co-committed-by: Mai-Lapyst --- templates/repo/issue/view_title.tmpl | 42 ++++---- tests/integration/issue_test.go | 2 +- tests/integration/pull_create_test.go | 2 +- web_src/css/repo.css | 15 +-- web_src/js/features/repo-issue.js | 134 ++++++++++++-------------- 5 files changed, 93 insertions(+), 102 deletions(-) diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl index 19a1d0c304..c4cad8ff4e 100644 --- a/templates/repo/issue/view_title.tmpl +++ b/templates/repo/issue/view_title.tmpl @@ -4,29 +4,35 @@ {{end}}
-
+ {{$canEditIssueTitle := and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} +

- {{RenderIssueTitle $.Context .Issue.Title ($.Repository.ComposeMetas ctx) | RenderCodeBlock}} #{{.Issue.Index}} - -
- -
+ {{RenderIssueTitle $.Context .Issue.Title ($.Repository.ComposeMetas ctx) | RenderCodeBlock}} + #{{.Issue.Index}}

- {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} - + {{if $canEditIssueTitle}} + {{end}} {{if not .Issue.IsPull}} - {{ctx.Locale.Tr "repo.issues.new"}} + {{ctx.Locale.Tr "repo.issues.new"}} {{end}}
- {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} -
- - -
- {{end}}
+ {{if $canEditIssueTitle}} +
+
+ +
+
+ + +
+
+ {{end}}
{{if .HasMerged}}
{{svg "octicon-git-merge" 16 "tw-mr-1"}} {{if eq .Issue.PullRequest.Status 3}}{{ctx.Locale.Tr "repo.pulls.manually_merged"}}{{else}}{{ctx.Locale.Tr "repo.pulls.merged"}}{{end}}
@@ -65,9 +71,9 @@ {{end}} {{else}} {{if .Issue.OriginalAuthor}} - {{.Issue.OriginalAuthor}} {{ctx.Locale.TrN .NumCommits "repo.pulls.title_desc_one" "repo.pulls.title_desc_few" .NumCommits $headHref $baseHref}} + {{.Issue.OriginalAuthor}} {{ctx.Locale.TrN .NumCommits "repo.pulls.title_desc_one" "repo.pulls.title_desc_few" .NumCommits $headHref $baseHref}} {{else}} - + {{.Issue.Poster.GetDisplayName}} {{ctx.Locale.TrN .NumCommits "repo.pulls.title_desc_one" "repo.pulls.title_desc_few" .NumCommits $headHref $baseHref}} @@ -81,7 +87,7 @@ {{end}} - +
{{ctx.Locale.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}} diff --git a/tests/integration/issue_test.go b/tests/integration/issue_test.go index b63127be82..83d353c935 100644 --- a/tests/integration/issue_test.go +++ b/tests/integration/issue_test.go @@ -148,7 +148,7 @@ func testNewIssue(t *testing.T, session *TestSession, user, repo, title, content resp = session.MakeRequest(t, req, http.StatusOK) htmlDoc = NewHTMLParser(t, resp.Body) - val := htmlDoc.doc.Find("#issue-title").Text() + val := htmlDoc.doc.Find("#issue-title-display").Text() assert.Contains(t, val, title) val = htmlDoc.doc.Find(".comment .render-content p").First().Text() assert.Equal(t, content, val) diff --git a/tests/integration/pull_create_test.go b/tests/integration/pull_create_test.go index a1252fa014..2eb7cd7dcd 100644 --- a/tests/integration/pull_create_test.go +++ b/tests/integration/pull_create_test.go @@ -213,7 +213,7 @@ func TestPullCreate_TitleEscape(t *testing.T) { req := NewRequest(t, "GET", url) resp = session.MakeRequest(t, req, http.StatusOK) htmlDoc := NewHTMLParser(t, resp.Body) - editTestTitleURL, exists := htmlDoc.doc.Find("#save-edit-title").First().Attr("data-update-url") + editTestTitleURL, exists := htmlDoc.doc.Find(".top-right-buttons button[data-update-url]").First().Attr("data-update-url") assert.True(t, exists, "The template has changed") req = NewRequestWithValues(t, "POST", editTestTitleURL, map[string]string{ diff --git a/web_src/css/repo.css b/web_src/css/repo.css index e58525af0f..2b1c24fa46 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -628,12 +628,12 @@ td .commit-summary { .repository.view.issue .issue-title { display: flex; align-items: center; + gap: 0.5em; margin-bottom: 8px; + min-height: var(--repo-header-issue-min-height); } .repository.view.issue .issue-title h1 { - display: flex; - align-items: center; flex: 1; width: 100%; font-weight: var(--font-weight-normal); @@ -641,14 +641,13 @@ td .commit-summary { line-height: 40px; margin: 0; padding-right: 0.5rem; - min-height: var(--repo-header-issue-min-height); } -.repository.view.issue .issue-title h1 .ui.input { - font-size: 0.5em; +.repository.view.issue .issue-title .ui.input { + font-size: 16px; } -.repository.view.issue .issue-title h1 .ui.input input { +.repository.view.issue .issue-title .ui.input input { font-size: 1.5em; padding: 2px .5rem; } @@ -661,10 +660,6 @@ td .commit-summary { margin-right: 10px; } -.repository.view.issue .issue-title .edit-zone { - margin-top: 10px; -} - .issue-state-label { display: flex !important; align-items: center !important; diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 7432cbc65a..dc61ea4dda 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -7,6 +7,7 @@ import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkd import {toAbsoluteUrl} from '../utils.js'; import {initDropzone} from './common-global.js'; import {POST, GET} from '../modules/fetch.js'; +import {showErrorToast} from '../modules/toast.js'; const {appSubUrl} = window.config; @@ -602,85 +603,74 @@ export function initRepoIssueWipToggle() { }); } -async function pullrequest_targetbranch_change(update_url) { - const targetBranch = $('#pull-target-branch').data('branch'); - const $branchTarget = $('#branch_target'); - if (targetBranch === $branchTarget.text()) { - window.location.reload(); - return false; - } - try { - await POST(update_url, {data: new URLSearchParams({target_branch: targetBranch})}); - } catch (error) { - console.error(error); - } finally { - window.location.reload(); - } -} - export function initRepoIssueTitleEdit() { - // Edit issue title - const $issueTitle = $('#issue-title'); - const $editInput = $('#edit-title-input input'); + const issueTitleDisplay = document.querySelector('#issue-title-display'); + const issueTitleEditor = document.querySelector('#issue-title-editor'); + if (!issueTitleEditor) return; - const editTitleToggle = function () { - toggleElem($issueTitle); - toggleElem('.not-in-edit'); - toggleElem('#edit-title-input'); - toggleElem('#pull-desc'); - toggleElem('#pull-desc-edit'); - toggleElem('.in-edit'); - toggleElem('.new-issue-button'); - document.getElementById('issue-title-wrapper')?.classList.toggle('edit-active'); - $editInput[0].focus(); - $editInput[0].select(); - return false; - }; - - $('#edit-title').on('click', editTitleToggle); - $('#cancel-edit-title').on('click', editTitleToggle); - $('#save-edit-title').on('click', editTitleToggle).on('click', async function () { - const pullrequest_target_update_url = this.getAttribute('data-target-update-url'); - if (!$editInput.val().length || $editInput.val() === $issueTitle.text()) { - $editInput.val($issueTitle.text()); - await pullrequest_targetbranch_change(pullrequest_target_update_url); - } else { - try { - const params = new URLSearchParams(); - params.append('title', $editInput.val()); - const response = await POST(this.getAttribute('data-update-url'), {data: params}); - const data = await response.json(); - $editInput.val(data.title); - $issueTitle.text(data.title); - if (pullrequest_target_update_url) { - await pullrequest_targetbranch_change(pullrequest_target_update_url); // it will reload the window - } else { - window.location.reload(); - } - } catch (error) { - console.error(error); - } + const issueTitleInput = issueTitleEditor.querySelector('input'); + const oldTitle = issueTitleInput.getAttribute('data-old-title'); + issueTitleDisplay.querySelector('#issue-title-edit-show').addEventListener('click', () => { + hideElem(issueTitleDisplay); + hideElem('#pull-desc-display'); + showElem(issueTitleEditor); + showElem('#pull-desc-editor'); + if (!issueTitleInput.value.trim()) { + issueTitleInput.value = oldTitle; } - return false; + issueTitleInput.focus(); }); + issueTitleEditor.querySelector('.ui.cancel.button').addEventListener('click', () => { + hideElem(issueTitleEditor); + hideElem('#pull-desc-editor'); + showElem(issueTitleDisplay); + showElem('#pull-desc-display'); + }); + + const pullDescEditor = document.querySelector('#pull-desc-editor'); // it may not exist for a merged PR + const prTargetUpdateUrl = pullDescEditor?.getAttribute('data-target-update-url'); + + const editSaveButton = issueTitleEditor.querySelector('.ui.primary.button'); + const saveAndRefresh = async () => { + const newTitle = issueTitleInput.value.trim(); + try { + if (newTitle && newTitle !== oldTitle) { + const resp = await POST(editSaveButton.getAttribute('data-update-url'), {data: new URLSearchParams({title: newTitle})}); + if (!resp.ok) { + throw new Error(`Failed to update issue title: ${resp.statusText}`); + } + } + if (prTargetUpdateUrl) { + const newTargetBranch = document.querySelector('#pull-target-branch').getAttribute('data-branch'); + const oldTargetBranch = document.querySelector('#branch_target').textContent; + if (newTargetBranch !== oldTargetBranch) { + const resp = await POST(prTargetUpdateUrl, {data: new URLSearchParams({target_branch: newTargetBranch})}); + if (!resp.ok) { + throw new Error(`Failed to update PR target branch: ${resp.statusText}`); + } + } + } + window.location.reload(); + } catch (error) { + console.error(error); + showErrorToast(error.message); + } + }; + editSaveButton.addEventListener('click', saveAndRefresh); + issueTitleEditor.querySelector('input').addEventListener('ce-quick-submit', saveAndRefresh); } export function initRepoIssueBranchSelect() { - const changeBranchSelect = function () { - const $selectionTextField = $('#pull-target-branch'); - - const baseName = $selectionTextField.data('basename'); - const branchNameNew = $(this).data('branch'); - const branchNameOld = $selectionTextField.data('branch'); - - // Replace branch name to keep translation from HTML template - $selectionTextField.html($selectionTextField.html().replace( - `${baseName}:${branchNameOld}`, - `${baseName}:${branchNameNew}`, - )); - $selectionTextField.data('branch', branchNameNew); // update branch name in setting - }; - $('#branch-select > .item').on('click', changeBranchSelect); + document.querySelector('#branch-select')?.addEventListener('click', (e) => { + const el = e.target.closest('.item[data-branch]'); + if (!el) return; + const pullTargetBranch = document.querySelector('#pull-target-branch'); + const baseName = pullTargetBranch.getAttribute('data-basename'); + const branchNameNew = el.getAttribute('data-branch'); + const branchNameOld = pullTargetBranch.getAttribute('data-branch'); + pullTargetBranch.textContent = pullTargetBranch.textContent.replace(`${baseName}:${branchNameOld}`, `${baseName}:${branchNameNew}`); + pullTargetBranch.setAttribute('data-branch', branchNameNew); + }); } export function initSingleCommentEditor($commentForm) {