Merge branch 'main-hotfix' of https://github.com/frappe/lms into sync/main-hotfix-to-main-v2

# Conflicts:
#	pyproject.toml

Author: raizasafeel

.github/semgrep/tailwind-rtl.yml

@@ -0,0 +1,46 @@
+# Local run: semgrep scan --config .github/semgrep/tailwind-rtl.yml
+rules:
+    - id: tailwind-physical-class
+      message: |
+          RTL: replace physical Tailwind class with logical equivalent.
+      languages: [generic]
+      severity: WARNING
+      paths: { include: ["*.vue"] }
+      patterns:
+          - pattern-either:
+                - pattern-regex: |
+                      (?x)
+                      (?:^|[\s"'`(\[{,])
+                      !?
+                      (?:[^\s"':]+:)*
+                      -?
+                      (?:
+                          (?:scroll-)?[mp][lr]-(?:auto|px|full|\d+(?:[./]\d+)?|\[[^\]]+\])
+                        | (?:left|right)-(?:auto|px|full|\d+(?:[./]\d+)?|\[[^\]]+\])
+                        | (?:text|float|clear)-(?:left|right)
+                        | (?:border|rounded)-[lr](?:-[A-Za-z0-9\[\]./#%_-]+)?
+                        | rounded-(?:tl|tr|bl|br)(?:-[A-Za-z0-9\[\]./#%_-]+)?
+                      )
+                      !?
+                      (?=$|[\s'"`})\],>;])
+          - pattern-not-regex: '\b(?:rtl|ltr):'
+
+    - id: tailwind-space-x-needs-reverse-or-gap
+      message: |
+          RTL: `space-x-*` does not flip in RTL. add `rtl:space-x-reverse` or `gap-x-* ms-*`
+      languages: [generic]
+      severity: WARNING
+      paths: { include: ["*.vue"] }
+      patterns:
+          - pattern-regex: 'class\s*[:=]\s*"[^"]*\bspace-x-\S+[^"]*"'
+          - pattern-not-regex: '\brtl:space-x-reverse\b'
+
+    - id: tailwind-divide-x-needs-reverse
+      message: |
+          RTL: `divide-x-*` does not flip in RTL, sdd `rtl:divide-x-reverse`.
+      languages: [generic]
+      severity: WARNING
+      paths: { include: ["*.vue"] }
+      patterns:
+          - pattern-regex: 'class\s*[:=]\s*"[^"]*\bdivide-x(?:-\S+)?[^"]*"'
+          - pattern-not-regex: '\brtl:divide-x-reverse\b'

.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/App.vue

@@ -14,9 +14,9 @@ import { computed, onUnmounted, ref } from 'vue'
 import { useScreenSize } from './utils/composables'
 import { useSettings } from '@/stores/settings'
 import { useRouter } from 'vue-router'
-import DesktopLayout from './components/DesktopLayout.vue'
-import MobileLayout from './components/MobileLayout.vue'
-import NoSidebarLayout from './components/NoSidebarLayout.vue'
+import DesktopLayout from './components/Layouts/DesktopLayout.vue'
+import MobileLayout from './components/Layouts/MobileLayout.vue'
+import NoSidebarLayout from './components/Layouts/NoSidebarLayout.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
 
 const { isMobile } = useScreenSize()