refined-github · fregante · Jul 8, 2021 · Jun 26, 2021 · Jun 27, 2021 · Jun 27, 2021
diff --git a/readme.md b/readme.md
@@ -202,6 +202,7 @@ Thanks for contributing! 🦋🙌
 - [](# "wait-for-attachments") [Wait for the attachments to finish uploading before allowing to post a comment.](https://user-images.githubusercontent.com/46634000/104294547-9b8b0c80-54bf-11eb-93e5-65ae158353b3.gif)
 - [](# "delete-review-comments-faster") [Adds a button to delete review comments in one click when editing them.](https://user-images.githubusercontent.com/46634000/115445792-9fdd6900-a216-11eb-9ba3-6dab4d2f9d32.png)
 - [](# "avoid-accidental-submissions") [Disables the <kbd>enter</kbd>-to-submit shortcut in some commit/PR/issue title fields to avoid accidental submissions. Use <kbd>ctrl</kbd><kbd>enter</kbd> instead.](https://user-images.githubusercontent.com/723651/115148453-5818df00-a068-11eb-92d4-51ac6e937b8b.gif)
+- [](# "comment-on-draft-pr-indicator") [Reminds you you’re commenting on a draft PR by changing the submit button’s label.](https://user-images.githubusercontent.com/723651/123682081-39e31280-d853-11eb-9c86-97be400aca67.jpg)
 
 <!-- Refer to style guide above. Keep this message between sections. -->
 

diff --git a/source/features/comment-on-draft-pr-indicator.tsx b/source/features/comment-on-draft-pr-indicator.tsx
@@ -0,0 +1,37 @@
+import select from 'select-dom';
+import * as pageDetect from 'github-url-detection';
+
+import features from '.';
+import onReplacedElement from '../helpers/on-replaced-element';
+
+function addIndicator(button: HTMLElement): void {
+	const preposition = button.textContent!.includes('Add') ? ' to ' : ' on ';
+	button.textContent += preposition + 'draft PR';
+}
+
+function init(): void {
+	const buttons = select.all([
+		'.review-simple-reply-button', // "Add single comment" button
+		'.add-comment-label', // "Add review comment" button
+		'.start-review-label', // "Start a review" button
+	]);
+	for (const button of buttons) {
+		addIndicator(button);
+	}
+
+	if (pageDetect.isPRConversation()) {
+		// The button is part of a .js-updatable-content partial
+		void onReplacedElement('#partial-new-comment-form-actions .btn-primary', addIndicator, {runCallbackOnStart: true});
+	}
+}
+
+void features.add(__filebasename, {
+	include: [
+		pageDetect.isPRConversation,
+		pageDetect.isPRFiles,
+	],
+	exclude: [
+		() => !pageDetect.isDraftPR(),
+	],
+	init,
+});
diff --git a/source/helpers/on-replaced-element.ts b/source/helpers/on-replaced-element.ts
@@ -9,18 +9,26 @@ Tracks the replacement of an element, identified via selector.
 @param callback The function to call after it's replaced
 */
 
-export default async function onReplacedElement(selector: string, callback: VoidCallback): Promise<void> {
+export default async function onReplacedElement(
+	selector: string,
+	callback: (element: HTMLElement) => void,
+	{runCallbackOnStart = false} = {},
+): Promise<void> {
 	let trackedElement = select(selector);
 	if (!trackedElement) {
 		throw new Error('The element can’t be found');
 	}
 
+	if (runCallbackOnStart) {
+		callback(trackedElement);
+	}
+
 	while (trackedElement) {
 		// eslint-disable-next-line no-await-in-loop
 		await onElementRemoval(trackedElement);
 		trackedElement = select(selector);
 		if (trackedElement) {
-			callback();
+			callback(trackedElement);
 		}
 	}
 }
diff --git a/source/refined-github.ts b/source/refined-github.ts
@@ -220,6 +220,7 @@ import './features/delete-review-comments-faster';
 import './features/no-useless-split-diff-view';
 import './features/list-pr-for-branch';
 import './features/cancel-wiki-edit-button';
+import './features/comment-on-draft-pr-indicator';
 import './features/select-notifications';
 
 // Add global for easier debugging