Merge pull request frappe#2442 from raizasafeel/courseform-label-input-consistency

fix(ui): batch form layout polish and rich-text instructor bios

Author: raizasafeel

cypress/e2e/batch_creation.cy.js

@@ -96,23 +96,22 @@ describe("Batch Creation", () => {
 			.type(
 				"Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
 			);
-		/* Instructor */
+		// Instructors — frappe-ui MultiSelect. Click the trigger button;
+		// the search input lives in a popover portalled to body, so we
+		// type it outside the field wrapper.
 		cy.get("label")
 			.contains("Instructors")
 			.parent()
-			.within(() => {
-				cy.get("input").click().clear().type(randomEvaluator);
-				cy.get("input")
-					.invoke("attr", "aria-controls")
-					.as("instructor_list_id");
-			});
-		cy.get("@instructor_list_id").then((instructor_list_id) => {
-			cy.get(`[id^=${instructor_list_id}`)
-				.should("be.visible")
-				.within(() => {
-					cy.get("[id^=headlessui-combobox-option-").first().click();
-				});
-		});
+			.find("button")
+			.first()
+			.click();
+		cy.get('[data-slot="content-body"] [data-slot="input"]')
+			.should("be.visible")
+			.type(randomEvaluator);
+		cy.wait(500);
+		cy.get('[data-slot="content-body"] [role="option"]').first().click();
+		// Close the popover so it doesn't overlay the Save button.
+		cy.get("body").type("{esc}");
 		cy.button("Save").click();
 		cy.wait(1000);
 

frontend/src/components/Controls/Link.vue

@@ -20,7 +20,7 @@
 			<template #footer>
 				<div
 					data-popover-footer-sticky
-					class="-m-1 border-t border-outline-gray-2 bg-surface-modal p-2"
+					class="-m-1 border-t border-outline-gray-2 bg-surface-modal p-2 mt-1"
 				>
 					<div v-if="creating" class="flex items-center gap-1">
 						<button

frontend/src/components/Controls/MultiLink.vue

@@ -55,7 +55,7 @@
 			<template #footer="{ clearAll }">
 				<slot name="footer" :close="closePopover">
 					<div
-						class="flex items-center justify-between gap-2 border-t border-outline-gray-1 px-2 py-1.5"
+						class="flex items-center justify-between gap-2 border-t border-outline-gray-1 px-2 py-1.5 mt-1"
 					>
 						<Button
 							variant="ghost"

frontend/src/components/CourseCreatorCard.vue

@@ -18,12 +18,11 @@
 					</div>
 				</div>
 			</router-link>
-			<p
-				v-if="instructors[0].bio"
-				class="text-p-sm text-ink-gray-7 leading-6 mt-4 line-clamp-3"
-			>
-				{{ instructors[0].bio }}
-			</p>
+			<div
+				v-if="hasBio(instructors[0].bio)"
+				v-html="renderBio(instructors[0].bio)"
+				class="ProseMirror prose prose-sm max-w-none text-p-sm text-ink-gray-7 leading-6 mt-4 line-clamp-3"
+			></div>
 		</template>
 
 		<template v-else>
@@ -39,12 +38,11 @@
 					</div>
 				</div>
 			</router-link>
-			<p
-				v-if="focused?.bio"
-				class="text-p-sm text-ink-gray-7 leading-6 mt-4 line-clamp-3"
-			>
-				{{ focused.bio }}
-			</p>
+			<div
+				v-if="hasBio(focused?.bio)"
+				v-html="renderBio(focused?.bio)"
+				class="ProseMirror prose prose-sm max-w-none text-p-sm text-ink-gray-7 leading-6 mt-4 line-clamp-3"
+			></div>
 
 			<div class="mt-4 pt-4 border-t border-outline-gray-2">
 				<div
@@ -83,7 +81,9 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import DOMPurify from 'dompurify'
 import UserAvatar from '@/components/UserAvatar.vue'
+import { decodeEntities, htmlToText } from '@/utils'
 import type { CourseInstructorInfo } from '@/types/api'
 
 const props = defineProps<{
@@ -142,6 +142,30 @@ const headerLabel = computed<string>(() => {
 	return __('Taught by a team of {0}').format(String(n))
 })
 
+function hasBio(bio?: string | null): boolean {
+	if (!bio) return false
+	return htmlToText(bio).trim().length > 0 || /<img\b/i.test(bio)
+}
+
+function renderBio(bio?: string | null): string {
+	return DOMPurify.sanitize(decodeEntities(bio || ''), {
+		ALLOWED_TAGS: [
+			'b',
+			'i',
+			'em',
+			'strong',
+			'a',
+			'p',
+			'br',
+			'ul',
+			'ol',
+			'li',
+			'img',
+		],
+		ALLOWED_ATTR: ['href', 'target', 'rel', 'src'],
+	})
+}
+
 function profileLink(instructor: CourseInstructorInfo) {
 	return { name: 'Profile', params: { username: instructor.username } }
 }

frontend/src/components/Modals/BatchCourseModal.vue

@@ -20,6 +20,7 @@
 				:label="__('Course')"
 				:required="true"
 				:filters="{ published: 1 }"
+				variant="outline"
 				:onCreate="
 					(value, close) => {
 						close()
@@ -34,6 +35,7 @@
 				doctype="Course Evaluator"
 				v-model="evaluator"
 				:label="__('Evaluator')"
+				variant="outline"
 				:onCreate="(value, close) => openSettings('Evaluators', close)"
 				class="mt-4"
 			/>