Feature/improve module management ux

backend/apps/mentorship/api/internal/nodes/module.py

@@ -44,7 +44,7 @@ class ModuleNode:
     @strawberry.field
     def mentors(self) -> list[MentorNode]:
         """Get the list of mentors for this module."""
-        return self.mentors.all()
+        return self.mentors.order_by("github_user__login")
 
     @strawberry.field
     def mentees(self) -> list[UserNode]:

backend/tests/unit/apps/mentorship/api/internal/nodes/api_internal_module_test.py

@@ -98,7 +98,7 @@ def mock_module_node():
     """Fixture for a mock ModuleNode instance."""
     m = FakeModuleNode()
 
-    m.mentors.all.return_value = [MagicMock(), MagicMock()]
+    m.mentors.order_by.return_value = [MagicMock(), MagicMock()]
     m.menteemodule_set.select_related.return_value.filter.return_value.values_list.return_value = [
         "github_user_id_1",
         "github_user_id_2",
@@ -136,7 +136,7 @@ def test_module_node_mentors(self, mock_module_node):
         """Test the mentors resolver."""
         mentors = mock_module_node.mock_mentors()
         assert len(mentors) == 2
-        mock_module_node.mentors.all.assert_called_once()
+        mock_module_node.mentors.order_by.assert_called_once_with("github_user__login")
 
     def test_module_node_mentees(self, mock_module_node):
         """Test the mentees resolver."""

frontend/src/app/globals.css

@@ -482,3 +482,29 @@ select:disabled,
 .chapter-map .leaflet-marker-shadow {
   cursor: pointer !important;
 }
+
+/* MarkdownWrapper CSS */
+
+.md-wrapper p {
+  margin: 0 0 16px;
+}
+
+.md-wrapper ul {
+  margin: 16px 0;
+  padding-left: 24px;
+}
+
+.md-wrapper ol {
+  margin: 16px 0;
+  padding-left: 24px;
+}
+
+.md-wrapper li {
+  margin-bottom: 8px;
+}
+
+.md-wrapper h1,
+.md-wrapper h2,
+.md-wrapper h3 {
+  margin: 24px 0 16px;
+}

frontend/src/components/ModuleCard.tsx

@@ -247,7 +247,7 @@ const ModuleItem = ({
       <div className="flex items-center justify-between">
         <Link
           href={`${pathname}/modules/${module.key}`}
-          className="text-start font-semibold text-gray-600 hover:underline dark:text-gray-300"
+          className="mr-2 min-w-0 flex-1 text-start font-semibold text-gray-600 hover:underline dark:text-gray-300"
         >
           <TruncatedText text={module?.name} />
         </Link>

frontend/src/components/ModuleForm.tsx

@@ -39,7 +39,7 @@
   setFormData: React.Dispatch<React.SetStateAction<ModuleFormProps['formData']>>
   onSubmit: (e: React.FormEvent) => void
   loading: boolean
   isEdit?: boolean
   title: string
   submitText?: string
   minDate?: string
@@ -60,7 +60,6 @@
   onSubmit,
   loading,
   title,
-  isEdit,
   submitText = 'Save',
   minDate,
   maxDate,
@@ -308,16 +307,14 @@
                     errorMessage={touched.projectId ? errors.projectId : undefined}
                   />
                 </div>
-                {isEdit && (
-                  <FormTextInput
-                    id="module-mentor-logins"
-                    label="Mentor GitHub Usernames"
-                    placeholder="johndoe, jane-doe"
-                    value={formData.mentorLogins}
-                    onValueChange={(value) => handleInputChange('mentorLogins', value)}
-                    className="w-full min-w-0 lg:col-span-2"
-                  />
-                )}
+                <FormTextInput
+                  id="module-mentor-logins"
+                  label="Mentor GitHub Usernames"
+                  placeholder="johndoe, jane-doe"
+                  value={formData.mentorLogins}
+                  onValueChange={(value) => handleInputChange('mentorLogins', value)}
+                  className="w-full min-w-0 lg:col-span-2"
+                />
               </div>
             </section>