chore: merge develop into main-hotfix

.github/semgrep/tailwind-rtl.yml

@@ -0,0 +1,22 @@
+# Local run: semgrep scan --config .github/semgrep/tailwind-rtl.yml --metrics off .
+rules:
+    - id: tailwind-physical-class
+      message: |
+          RTL: replace physical Tailwind class with logical equivalent.
+      languages: [generic]
+      severity: WARNING
+      paths: { include: ["*.vue"] }
+      pattern-regex: |
+          (?x)
+          (?:^|[\s'"`{(\[,]) !?(?:[a-z][a-z0-9-]*:)*-?
+          (?:
+              (?:scroll-)?[mp][lr]-(?:auto|px|full|\d+(?:[./]\d+)?|\[[^\]]+\])
+            | (?:left|right)-(?:auto|px|full|\d+(?:[./]\d+)?|\[[^\]]+\])
+            | text-(?:left|right)
+            | float-(?:left|right)
+            | clear-(?:left|right)
+            | (?:border|rounded)-[lr](?:-[A-Za-z0-9\[\]./#%_-]+)?
+            | rounded-(?:tl|tr|bl|br)(?:-[A-Za-z0-9\[\]./#%_-]+)?
+            | space-x-(?:auto|px|reverse|\d+(?:[./]\d+)?|\[[^\]]+\])
+          )
+          !? (?=$|[\s'"`})\],>;])

.github/workflows/linters.yml

@@ -58,4 +58,7 @@ jobs:
         run: pip install semgrep
 
       - name: Run Semgrep rules
-        run: semgrep ci --config ./frappe-semgrep-rules/rules
+        run: semgrep ci --config ./frappe-semgrep-rules/rules
+
+      - name: Run RTL Semgrep rules
+        run: semgrep scan --config ./.github/semgrep/tailwind-rtl.yml

README.md

@@ -152,11 +152,19 @@ You need Docker, docker-compose and git setup on your machine. Refer [Docker doc
 To setup the repository locally follow the steps mentioned below:
 
 1. Install bench and setup a `frappe-bench` directory by following the [Installation Steps](https://frappeframework.com/docs/user/en/installation)
-1. Start the server by running `bench start`
-1. In a separate terminal window, create a new site by running `bench new-site learning.test`
-1. Map your site to localhost with the command `bench --site learning.test add-to-hosts`
-1. Get the Learning app. Run `bench get-app https://github.com/frappe/lms`
-1. Run `bench --site learning.test install-app lms`.
+1. Start the server by running
+	```sh
+	$ bench start
+	```
+1. In a separate terminal window, run the following commands.
+	```sh
+	$ bench new-site learning.test
+ 	$ bench --site learning.test add-to-hosts
+ 	$ bench get-app https://github.com/frappe/payments
+ 	$ bench get-app https://github.com/frappe/lms
+ 	$ bench --site learning.test install-app lms
+
+	```
 1. Now open the URL `http://learning.test:8000/lms` in your browser, you should see the app running
 
 ## Learn and connect

cypress/e2e/batch_creation.cy.js

@@ -7,7 +7,7 @@ describe("Batch Creation", () => {
 
 		// Open Settings
 		cy.get("span").contains("Learning").click();
-		cy.get("span").contains("Settings").click();
+		cy.contains('[role="menuitem"]', "Settings").click();
 
 		// Add a new member
 		cy.get("[data-dismissable-layer]")
@@ -38,7 +38,7 @@ describe("Batch Creation", () => {
 			.find("button")
 			.contains("New")
 			.click();
-		cy.get("span").contains("New Evaluator").click();
+		cy.contains('[role="menuitem"]', "New Evaluator").click();
 
 		const randomEvaluator = `evaluator${dateNow}@example.com`;
 		cy.get("input[placeholder='jane@doe.com']").type(randomEvaluator);
@@ -52,7 +52,7 @@ describe("Batch Creation", () => {
 
 		// Create a batch
 		cy.get("button").contains("Create").click();
-		cy.get("span").contains("New Batch").click();
+		cy.contains('[role="menuitem"]', "New Batch").click();
 		cy.wait(500);
 		cy.get("label").contains("Title").type("Test Batch");
 		cy.get("label").contains("Start Date").type("2030-10-01");
@@ -65,7 +65,7 @@ describe("Batch Creation", () => {
 		cy.get("label")
 			.contains("Description")
 			.type("Test Batch Short Description to test the UI");
-		cy.get("div[contenteditable=true").invoke(
+		cy.get("div.ProseMirror").invoke(
 			"text",
 			"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."
 		);
@@ -74,7 +74,7 @@ describe("Batch Creation", () => {
 			.contains("Instructors")
 			.parent()
 			.within(() => {
-				cy.get("input").click().type("evaluator");
+				cy.get("input").click().clear().type(randomEvaluator);
 				cy.get("input")
 					.invoke("attr", "aria-controls")
 					.as("instructor_list_id");
@@ -87,7 +87,20 @@ describe("Batch Creation", () => {
 				});
 		});
 		cy.button("Save").click();
-		cy.get("label").contains("Published").click();
+		cy.wait(1000);
+
+		// going to batch settings and publishing the batch
+		cy.url().should("include", "#settings");
+		cy.closeOnboardingModal();
+		cy.contains("label", "Published")
+			.invoke("attr", "for")
+			.then((id) => {
+				cy.get(`#${id}`)
+					.scrollIntoView()
+					.should("be.visible")
+					.click({ force: true });
+				cy.get(`#${id}`).should("have.attr", "aria-checked", "true");
+			});
 		cy.button("Save").click();
 		cy.wait(1000);
 		let batchName;
@@ -105,11 +118,7 @@ describe("Batch Creation", () => {
 
 		cy.url().should("include", "/lms/batches");
 
-		cy.get('[id^="headlessui-radiogroup-v-"]')
-			.find("span")
-			.contains("Upcoming")
-			.should("be.visible")
-			.click();
+		cy.contains('[role="radio"]', "Upcoming").should("be.visible").click();
 
 		cy.get("@batchName").then((batchName) => {
 			cy.get(`a[href='/lms/batches/${batchName}'`).within(() => {
@@ -154,6 +163,7 @@ describe("Batch Creation", () => {
 		cy.get("button:visible").contains("Dashboard").click();
 
 		/* Add student to batch */
+		cy.closeOnboardingModal();
 		cy.get("button").contains("Enroll").click();
 		cy.get('div[role="dialog"]')
 			.first()

cypress/e2e/course_creation.cy.js

@@ -9,14 +9,14 @@ describe("Course Creation", () => {
 
 		// Create a course
 		cy.get("button").contains("Create").click();
-		cy.get("span").contains("New Course").click();
+		cy.contains('[role="menuitem"]', "New Course").click();
 		cy.wait(500);
 
 		cy.get("label").contains("Title").type("Test Course");
 		cy.get("label")
 			.contains("Short Introduction")
 			.type("Test Course Short Introduction to test the UI");
-		cy.get("div[contenteditable=true").invoke(
+		cy.get("div.ProseMirror").invoke(
 			"text",
 			"Test Course 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."
 		);
@@ -61,7 +61,7 @@ describe("Course Creation", () => {
 		});
 
 		cy.button("Save").last().click();
-
+		cy.closeOnboardingModal();
 		// Edit Course Details
 		cy.wait(500);
 		cy.get("label")
@@ -153,7 +153,7 @@ describe("Course Creation", () => {
 		cy.wait(500);
 		cy.get("[data-dismissable-layer]").within(() => {
 			cy.get("label").contains("Title").type("Test Discussion");
-			cy.get("div[contenteditable=true]").invoke(
+			cy.get("div.ProseMirror").invoke(
 				"text",
 				"This is a test discussion. This will check if the UI is working properly."
 			);
@@ -163,7 +163,7 @@ describe("Course Creation", () => {
 		// View Discussion
 		cy.wait(500);
 		cy.get("div").contains("Test Discussion").click();
-		cy.get("div[contenteditable=true").invoke(
+		cy.get("div.ProseMirror").invoke(
 			"text",
 			"This is a test comment. This will check if the UI is working properly."
 		);
@@ -179,7 +179,7 @@ describe("Course Creation", () => {
 			cy.get("svg.lucide.lucide-ellipsis-icon").click();
 		});
 		cy.get("div[role=menu]").within(() => {
-			cy.get("span").contains("Delete").click();
+			cy.contains('[role="menuitem"]', "Delete").click();
 		});
 		cy.get("span").contains("Delete").click();
 		cy.wait(500);

cypress/support/commands.js

@@ -72,15 +72,19 @@ Cypress.Commands.add("paste", { prevSubject: true }, (subject, text) => {
 
 Cypress.Commands.add("closeOnboardingModal", () => {
 	cy.wait(500);
+	const modalSelector = '[data-testid="onboarding-help-modal"]';
 	cy.get("body").then(($body) => {
-		// Check if any element with class including 'z-50' exists
-		if ($body.find('[class*="z-50"]').length > 0) {
-			cy.get('[class*="z-50"]')
-				.find('button:has(svg[class*="feather-x"])')
-				.realClick();
-			cy.wait(1000);
-		} else {
-			cy.log("Onboarding modal not found, skipping close.");
+		if (!$body.find(modalSelector).length) {
+			cy.log("Onboarding modal not present, skipping close.");
+			return;
 		}
+
+		// Skip onboarding steps if the button exists, otherwise just close the modal.
+		if ($body.find(`${modalSelector} button:contains("Skip all")`).length) {
+			cy.get(modalSelector).contains("button", "Skip all").click();
+		}
+
+		cy.get(modalSelector).find("button:has(svg.feather-x)").click();
+		cy.get(modalSelector).should("not.exist");
 	});
 });

frontend/components.d.ts

@@ -46,15 +46,15 @@ declare module 'vue' {
     CourseReviews: typeof import('./src/components/CourseReviews.vue')['default']
     CreateOutline: typeof import('./src/components/CreateOutline.vue')['default']
     DateRange: typeof import('./src/components/Common/DateRange.vue')['default']
-    DesktopLayout: typeof import('./src/components/DesktopLayout.vue')['default']
+    DesktopLayout: typeof import('./src/components/Layouts/DesktopLayout.vue')['default']
     DiscussionModal: typeof import('./src/components/Modals/DiscussionModal.vue')['default']
     DiscussionReplies: typeof import('./src/components/DiscussionReplies.vue')['default']
     Discussions: typeof import('./src/components/Discussions.vue')['default']
     EditCoverImage: typeof import('./src/components/Modals/EditCoverImage.vue')['default']
     EditProfile: typeof import('./src/components/Modals/EditProfile.vue')['default']
     EmailTemplateModal: typeof import('./src/components/Modals/EmailTemplateModal.vue')['default']
     EmailTemplates: typeof import('./src/components/Settings/EmailTemplates.vue')['default']
-    EmptyState: typeof import('./src/components/EmptyState.vue')['default']
+    EmptyStateLayout: typeof import('./src/components/Layouts/EmptyStateLayout.vue')['default']
     EvaluationModal: typeof import('./src/components/Modals/EvaluationModal.vue')['default']
     Evaluators: typeof import('./src/components/Settings/Evaluators.vue')['default']
     Event: typeof import('./src/components/Modals/Event.vue')['default']
@@ -70,18 +70,19 @@ declare module 'vue' {
     InviteIcon: typeof import('./src/components/Icons/InviteIcon.vue')['default']
     JobApplicationModal: typeof import('./src/components/Modals/JobApplicationModal.vue')['default']
     JobCard: typeof import('./src/components/JobCard.vue')['default']
+    LayoutHeader: typeof import('./src/components/Layouts/LayoutHeader.vue')['default']
     LessonContent: typeof import('./src/components/LessonContent.vue')['default']
     LessonHelp: typeof import('./src/components/LessonHelp.vue')['default']
     Link: typeof import('./src/components/Controls/Link.vue')['default']
     LiveClassAttendance: typeof import('./src/components/Modals/LiveClassAttendance.vue')['default']
     LiveClassModal: typeof import('./src/components/Modals/LiveClassModal.vue')['default']
     LMSLogo: typeof import('./src/components/Icons/LMSLogo.vue')['default']
     Members: typeof import('./src/components/Settings/Members.vue')['default']
-    MobileLayout: typeof import('./src/components/MobileLayout.vue')['default']
+    MobileLayout: typeof import('./src/components/Layouts/MobileLayout.vue')['default']
     MultiSelect: typeof import('./src/components/Controls/MultiSelect.vue')['default']
     NewMemberModal: typeof import('./src/components/Modals/NewMemberModal.vue')['default']
     NoPermission: typeof import('./src/components/NoPermission.vue')['default']
-    NoSidebarLayout: typeof import('./src/components/NoSidebarLayout.vue')['default']
+    NoSidebarLayout: typeof import('./src/components/Layouts/NoSidebarLayout.vue')['default']
     Notes: typeof import('./src/components/Notes/Notes.vue')['default']
     NotPermitted: typeof import('./src/components/NotPermitted.vue')['default']
     NumberChartGraph: typeof import('./src/components/NumberChartGraph.vue')['default']

frontend/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ boot.lang }}" dir="{{ boot.text_direction }}">
 	<head>
 		<meta charset="UTF-8" />
 		<link rel="icon" href="{{ favicon }}" />

frontend/package.json

@@ -31,7 +31,7 @@
     "dayjs": "1.11.10",
     "dompurify": "3.2.6",
     "feather-icons": "4.28.0",
-    "frappe-ui": "^0.1.264",
+    "frappe-ui": "^0.1.276",
     "highlight.js": "11.11.1",
     "lucide-vue-next": "0.383.0",
     "markdown-it": "14.0.0",
@@ -49,7 +49,7 @@
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-     "@vitejs/plugin-vue": "5.0.3",
+    "@vitejs/plugin-vue": "5.0.3",
     "autoprefixer": "10.4.2",
     "postcss": "8.4.5",
     "tailwindcss": "^3.4.15",

frontend/src/components/Assignment.vue

@@ -5,7 +5,7 @@
 		:class="{ 'border rounded-lg overflow-auto': !showTitle }"
 	>
 		<div
-			class="border-r p-5 overflow-y-auto h-[calc(100vh-3.2rem)]"
+			class="border-e p-5 overflow-y-auto h-[calc(100vh-3.2rem)]"
 			:class="{ 'h-full': !showTitle }"
 		>
 			<div v-if="showTitle" class="text-lg font-semibold mb-5 text-ink-gray-9">
@@ -31,7 +31,7 @@
 					<div class="font-semibold text-ink-gray-9">
 						{{ __('Submission') }}
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<Badge v-if="isDirty" theme="orange">
 							{{ __('Not Saved') }}
 						</Badge>
@@ -106,7 +106,7 @@
 								class="cursor-pointer !no-underline text-sm leading-5"
 							>
 								<div class="flex items-center">
-									<div class="border rounded-md p-2 mr-2">
+									<div class="border rounded-md p-2 me-2">
 										<FileText class="h-5 w-5 stroke-1.5" />
 									</div>
 									<span>
@@ -117,7 +117,7 @@
 							<X
 								v-if="canModifyAssignment"
 								@click="removeSubmission()"
-								class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
+								class="bg-surface-gray-3 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ms-4"
 							/>
 						</div>
 					</div>

frontend/src/components/AudioBlock.vue

@@ -6,7 +6,7 @@
 		<audio @ended="handleAudioEnd" controlsList="nodownload" class="mb-4">
 			<source :src="encodeURI(file)" type="audio/mp3" />
 		</audio>
-		<div class="flex items-center space-x-2 shadow rounded-lg p-1 w-1/2">
+		<div class="flex items-center gap-x-2 shadow rounded-lg p-1 w-1/2">
 			<Button variant="ghost" @click="togglePlay">
 				<template #icon>
 					<Play v-if="!isPlaying" class="w-4 h-4 text-ink-gray-9" />

frontend/src/components/CommandPalette/CommandPalette.vue

@@ -2,13 +2,13 @@
 	<Dialog v-model="show" :options="{ size: '2xl' }">
 		<template #body>
 			<div class="text-base">
-				<div class="flex items-center space-x-2 pl-4.5 border-b">
+				<div class="flex items-center gap-x-2 ps-4.5 border-b">
 					<Search class="size-4 text-ink-gray-4" />
 					<input
 						ref="inputRef"
 						type="text"
 						placeholder="Search"
-						class="w-full border-none bg-transparent py-3 !pl-2 pr-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
+						class="w-full border-none bg-transparent py-3 !ps-2 pe-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
 						@input="onInput"
 						v-model="query"
 						autocomplete="off"
@@ -32,9 +32,9 @@
 				</div>
 
 				<div
-					class="flex items-center space-x-5 w-full border-t py-2 text-sm text-ink-gray-7 px-4.5"
+					class="flex items-center gap-x-5 w-full border-t py-2 text-sm text-ink-gray-7 px-4.5"
 				>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<MoveUp
 							class="size-5 stroke-1.5 bg-surface-gray-2 p-1 rounded-sm"
 						/>
@@ -45,15 +45,15 @@
 							{{ __('to navigate') }}
 						</span>
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<CornerDownLeft
 							class="size-5 stroke-1.5 bg-surface-gray-2 p-1 rounded-sm"
 						/>
 						<span>
 							{{ __('to select') }}
 						</span>
 					</div>
-					<div class="flex items-center space-x-2">
+					<div class="flex items-center gap-x-2">
 						<span class="bg-surface-gray-2 p-1 rounded-sm"> esc </span>
 						<span>
 							{{ __('to close') }}

frontend/src/components/CommandPalette/CommandPaletteGroup.vue

@@ -10,7 +10,7 @@
 				:class="{ 'bg-surface-gray-2': item.isActive }"
 				@click="emit('navigateTo', item.route)"
 			>
-				<div class="flex items-center space-x-3">
+				<div class="flex items-center gap-x-3">
 					<component
 						v-if="item.icon"
 						:is="item.icon"

frontend/src/components/Common/DateRange.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="flex items-center text-ink-gray-7">
-		<Calendar class="h-4 w-4 stroke-1.5 mr-2" />
+		<Calendar class="h-4 w-4 stroke-1.5 me-2" />
 		<span>
 			{{ getFormattedDateRange(props.startDate, props.endDate) }}
 		</span>