From 1870f946468fc89807d3d97075fcf8c00627c6da Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 1 Mar 2024 15:43:27 +0000 Subject: [PATCH 1/2] Remove jQuery AJAX from the repo tag edit form - Removed all jQuery AJAX calls and replaced with our fetch wrapper - Tested the repo tag edit form functionality and it works as before Signed-off-by: Yarden Shoham --- web_src/js/features/repo-home.js | 46 ++++++++++++++++---------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index 3603fae2e928d..0f4f7b242735a 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -1,8 +1,9 @@ import $ from 'jquery'; import {stripTags} from '../utils.js'; import {hideElem, showElem} from '../utils/dom.js'; +import {POST} from '../modules/fetch.js'; -const {appSubUrl, csrfToken} = window.config; +const {appSubUrl} = window.config; export function initRepoTopicBar() { const mgrBtn = $('#manage_topic'); @@ -30,50 +31,49 @@ export function initRepoTopicBar() { mgrBtn.focus(); }); - saveBtn.on('click', () => { + saveBtn.on('click', async () => { const topics = $('input[name=topics]').val(); + const formData = new FormData(); + formData.append('topics', topics); + try { + const response = await POST(saveBtn.attr('data-link'), {data: formData}); + const data = await response.json(); - $.post(saveBtn.attr('data-link'), { - _csrf: csrfToken, - topics - }, (_data, _textStatus, xhr) => { - if (xhr.responseJSON.status === 'ok') { + if (data.status === 'ok') { viewDiv.children('.topic').remove(); if (topics.length) { const topicArray = topics.split(','); topicArray.sort(); - for (let i = 0; i < topicArray.length; i++) { + for (const topic of topicArray) { const link = $(''); - link.attr('href', `${appSubUrl}/explore/repos?q=${encodeURIComponent(topicArray[i])}&topic=1`); - link.text(topicArray[i]); + link.attr('href', `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`); + link.text(topic); link.insertBefore(mgrBtn); // insert all new topics before manage button } } hideElem(editDiv); showElem(viewDiv); } - }).fail((xhr) => { - if (xhr.status === 422) { - if (xhr.responseJSON.invalidTopics.length > 0) { - topicPrompts.formatPrompt = xhr.responseJSON.message; + } catch (error) { + if (error.response?.status === 422) { + const responseJSON = await error.response.json(); + if (responseJSON.invalidTopics.length > 0) { + topicPrompts.formatPrompt = responseJSON.message; - const {invalidTopics} = xhr.responseJSON; + const {invalidTopics} = responseJSON; const topicLabels = topicDropdown.children('a.ui.label'); - for (const [index, value] of topics.split(',').entries()) { - for (let i = 0; i < invalidTopics.length; i++) { - if (invalidTopics[i] === value) { - topicLabels.eq(index).removeClass('green').addClass('red'); - } + if (invalidTopics.includes(value)) { + topicLabels.eq(index).removeClass('green').addClass('red'); } } } else { - topicPrompts.countPrompt = xhr.responseJSON.message; + topicPrompts.countPrompt = responseJSON.message; } } - }).always(() => { + } finally { topicForm.form('validate form'); - }); + } }); topicDropdown.dropdown({ From 394334ad306d61ceee79f0ece36d594d9cf16e05 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 1 Mar 2024 17:02:49 +0000 Subject: [PATCH 2/2] Fix --- web_src/js/features/repo-home.js | 45 ++++++++++++++++---------------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js index 0f4f7b242735a..bbba7b103e199 100644 --- a/web_src/js/features/repo-home.js +++ b/web_src/js/features/repo-home.js @@ -33,13 +33,15 @@ export function initRepoTopicBar() { saveBtn.on('click', async () => { const topics = $('input[name=topics]').val(); - const formData = new FormData(); - formData.append('topics', topics); - try { - const response = await POST(saveBtn.attr('data-link'), {data: formData}); - const data = await response.json(); - if (data.status === 'ok') { + const data = new FormData(); + data.append('topics', topics); + + const response = await POST(saveBtn.attr('data-link'), {data}); + + if (response.ok) { + const responseData = await response.json(); + if (responseData.status === 'ok') { viewDiv.children('.topic').remove(); if (topics.length) { const topicArray = topics.split(','); @@ -54,26 +56,25 @@ export function initRepoTopicBar() { hideElem(editDiv); showElem(viewDiv); } - } catch (error) { - if (error.response?.status === 422) { - const responseJSON = await error.response.json(); - if (responseJSON.invalidTopics.length > 0) { - topicPrompts.formatPrompt = responseJSON.message; - - const {invalidTopics} = responseJSON; - const topicLabels = topicDropdown.children('a.ui.label'); - for (const [index, value] of topics.split(',').entries()) { - if (invalidTopics.includes(value)) { - topicLabels.eq(index).removeClass('green').addClass('red'); - } + } else if (response.status === 422) { + const responseData = await response.json(); + if (responseData.invalidTopics.length > 0) { + topicPrompts.formatPrompt = responseData.message; + + const {invalidTopics} = responseData; + const topicLabels = topicDropdown.children('a.ui.label'); + for (const [index, value] of topics.split(',').entries()) { + if (invalidTopics.includes(value)) { + topicLabels.eq(index).removeClass('green').addClass('red'); } - } else { - topicPrompts.countPrompt = responseJSON.message; } + } else { + topicPrompts.countPrompt = responseData.message; } - } finally { - topicForm.form('validate form'); } + + // Always validate the form + topicForm.form('validate form'); }); topicDropdown.dropdown({