added label on the module frontend

Rajgupta36 · Rajgupta36 · commit ca49e13b9baf · 2025-10-10T03:39:09.000+05:30
diff --git a/backend/apps/mentorship/api/internal/mutations/module.py b/backend/apps/mentorship/api/internal/mutations/module.py
@@ -100,6 +100,7 @@ def create_module(self, info: strawberry.Info, input_data: CreateModuleInput) ->
             started_at=started_at,
             ended_at=ended_at,
             domains=input_data.domains,
+            labels=input_data.labels,
             tags=input_data.tags,
             program=program,
             project=project,
@@ -239,6 +240,7 @@ def update_module(self, info: strawberry.Info, input_data: UpdateModuleInput) ->
             "started_at": started_at,
             "ended_at": ended_at,
             "domains": input_data.domains,
+            "labels": input_data.labels,
             "tags": input_data.tags,
         }
 
diff --git a/backend/apps/mentorship/api/internal/nodes/module.py b/backend/apps/mentorship/api/internal/nodes/module.py
@@ -24,6 +24,7 @@ class ModuleNode:
     domains: list[str] | None = None
     ended_at: datetime
     experience_level: ExperienceLevelEnum
+    labels: list[str] | None = None
     program: ProgramNode | None = None
     project_id: strawberry.ID | None = None
     started_at: datetime
@@ -109,6 +110,7 @@ class CreateModuleInput:
     domains: list[str] = strawberry.field(default_factory=list)
     ended_at: datetime
     experience_level: ExperienceLevelEnum
+    labels: list[str] = strawberry.field(default_factory=list)
     mentor_logins: list[str] | None = None
     program_key: str
     project_name: str
@@ -128,6 +130,7 @@ class UpdateModuleInput:
     domains: list[str] = strawberry.field(default_factory=list)
     ended_at: datetime
     experience_level: ExperienceLevelEnum
+    labels: list[str] = strawberry.field(default_factory=list)
     mentor_logins: list[str] | None = None
     project_id: strawberry.ID
     project_name: str
diff --git a/frontend/__tests__/unit/components/SingleModuleCard.test.tsx b/frontend/__tests__/unit/components/SingleModuleCard.test.tsx
@@ -106,6 +106,7 @@ const mockModule: Module = {
   endedAt: '2024-12-31T23:59:59Z',
   domains: ['frontend', 'backend'],
   tags: ['react', 'nodejs'],
+  labels: ['good first issue', 'bug'],
 }
 
 const mockAdmins = [{ login: 'admin1' }, { login: 'admin2' }]
diff --git a/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx b/frontend/src/app/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
@@ -65,6 +65,7 @@ const ModuleDetailsPage = () => {
       admins={admins}
       tags={module.tags}
       domains={module.domains}
+      labels={module.labels}
       summary={module.description}
       mentors={module.mentors}
       type="module"
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/edit/page.tsx
@@ -82,6 +82,7 @@ const EditModulePage = () => {
         domains: (m.domains || []).join(', '),
         projectName: m.projectName,
         tags: (m.tags || []).join(', '),
+        labels: (m.labels || []).join(', '),
         projectId: m.projectId || '',
         mentorLogins: (m.mentors || []).map((mentor: { login: string }) => mentor.login).join(', '),
       })
@@ -103,6 +104,7 @@ const EditModulePage = () => {
         endedAt: formData.endedAt || null,
         domains: parseCommaSeparated(formData.domains),
         tags: parseCommaSeparated(formData.tags),
+        labels: parseCommaSeparated(formData.labels),
         projectName: formData.projectName,
         projectId: formData.projectId,
         mentorLogins: parseCommaSeparated(formData.mentorLogins),
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/[moduleKey]/page.tsx
@@ -65,6 +65,7 @@ const ModuleDetailsPage = () => {
       admins={admins}
       tags={module.tags}
       domains={module.domains}
+      labels={module.labels}
       summary={module.description}
       mentors={module.mentors}
       type="module"
diff --git a/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx b/frontend/src/app/my/mentorship/programs/[programKey]/modules/create/page.tsx
@@ -39,6 +39,7 @@ const CreateModulePage = () => {
     endedAt: '',
     domains: '',
     tags: '',
+    labels: '',
     projectId: '',
     projectName: '',
     mentorLogins: '',
@@ -88,6 +89,7 @@ const CreateModulePage = () => {
         endedAt: formData.endedAt || null,
         domains: parseCommaSeparated(formData.domains),
         tags: parseCommaSeparated(formData.tags),
+        labels: parseCommaSeparated(formData.labels),
         programKey: programKey,
         projectId: formData.projectId,
         projectName: formData.projectName,
diff --git a/frontend/src/components/CardDetailsPage.tsx b/frontend/src/components/CardDetailsPage.tsx
@@ -43,6 +43,7 @@ const DetailsCard = ({
   canUpdateStatus,
   tags,
   domains,
+  labels,
   modules,
   mentors,
   admins,
@@ -211,26 +212,38 @@ const DetailsCard = ({
           </div>
         )}
         {(type === 'program' || type === 'module') && (
-          <div
-            className={`mb-8 grid grid-cols-1 gap-6 ${(tags?.length || 0) === 0 || (domains?.length || 0) === 0 ? 'md:col-span-1' : 'md:grid-cols-2'}`}
-          >
-            {tags?.length > 0 && (
-              <ToggleableList
-                items={tags}
-                icon={faTags}
-                label={<AnchorTitle title="Tags" />}
-                isDisabled={true}
-              />
-            )}
-            {domains?.length > 0 && (
-              <ToggleableList
-                items={domains}
-                icon={faChartPie}
-                label={<AnchorTitle title="Domains" />}
-                isDisabled={true}
-              />
+          <>
+            <div
+              className={`mb-8 grid grid-cols-1 gap-6 ${(tags?.length || 0) === 0 || (domains?.length || 0) === 0 ? 'md:col-span-1' : 'md:grid-cols-2'}`}
+            >
+              {tags?.length > 0 && (
+                <ToggleableList
+                  items={tags}
+                  icon={faTags}
+                  label={<AnchorTitle title="Tags" />}
+                  isDisabled={true}
+                />
+              )}
+              {domains?.length > 0 && (
+                <ToggleableList
+                  items={domains}
+                  icon={faChartPie}
+                  label={<AnchorTitle title="Domains" />}
+                  isDisabled={true}
+                />
+              )}
+            </div>
+            {labels?.length > 0 && (
+              <div className="mb-8">
+                <ToggleableList
+                  items={labels}
+                  icon={faTags}
+                  label={<AnchorTitle title="Labels" />}
+                  isDisabled={true}
+                />
+              </div>
             )}
-          </div>
+          </>
         )}
         {topContributors && (
           <TopContributorsList
diff --git a/frontend/src/components/LabelList.tsx b/frontend/src/components/LabelList.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+
+interface LabelProps {
+  label: string
+  className?: string
+}
+
+const Label: React.FC<LabelProps> = ({ label, className = '' }) => {
+  return (
+    <span
+      className={`inline-block rounded-lg border border-gray-400 px-2 py-0.5 text-xs text-gray-700 hover:bg-gray-200 dark:border-gray-300 dark:text-gray-300 dark:hover:bg-gray-700 ${className}`}
+    >
+      {label}
+    </span>
+  )
+}
+
+interface LabelListProps {
+  labels: string[]
+  maxVisible?: number
+  className?: string
+}
+
+const LabelList: React.FC<LabelListProps> = ({ labels, maxVisible = 5, className = '' }) => {
+  if (!labels || labels.length === 0) return null
+
+  const visibleLabels = labels.slice(0, maxVisible)
+  const remainingCount = labels.length - maxVisible
+
+  return (
+    <div className={`flex flex-wrap gap-2 ${className}`}>
+      {visibleLabels.map((label, index) => (
+        <Label key={`${label}-${index}`} label={label} />
+      ))}
+      {remainingCount > 0 && <Label label={`+${remainingCount} more`} />}
+    </div>
+  )
+}
+
+export { LabelList }
diff --git a/frontend/src/components/ModuleCard.tsx b/frontend/src/components/ModuleCard.tsx
@@ -13,6 +13,7 @@ import { useState } from 'react'
 import type { Module } from 'types/mentorship'
 import { formatDate } from 'utils/dateFormatter'
 import { TextInfoItem } from 'components/InfoItem'
+import { LabelList } from 'components/LabelList'
 import SingleModuleCard from 'components/SingleModuleCard'
 import { TruncatedText } from 'components/TruncatedText'
 
@@ -85,6 +86,11 @@ const ModuleItem = ({ details }: { details: Module }) => {
         label="Duration"
         value={getSimpleDuration(details.startedAt, details.endedAt)}
       />
+      {details.labels && details.labels.length > 0 && (
+        <div className="mt-2">
+          <LabelList labels={details.labels} maxVisible={3} />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/frontend/src/components/ModuleForm.tsx b/frontend/src/components/ModuleForm.tsx
@@ -16,6 +16,7 @@ interface ModuleFormProps {
     endedAt: string
     domains: string
     tags: string
+    labels: string
     projectId: string
     projectName: string
     mentorLogins: string
@@ -185,6 +186,20 @@ const ModuleForm = ({
                     className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
                   />
                 </div>
+                <div>
+                  <label htmlFor="labels" className="mb-2 block text-sm font-semibold">
+                    Labels
+                  </label>
+                  <input
+                    id="labels"
+                    type="text"
+                    name="labels"
+                    value={formData.labels}
+                    onChange={handleInputChange}
+                    placeholder="good first issue, bug, enhancement"
+                    className="w-full rounded-lg border border-gray-600 bg-gray-50 px-4 py-3 text-gray-800 focus:border-[#1D7BD7] focus:outline-none focus-visible:ring-1 focus-visible:ring-[#1D7BD7] dark:bg-gray-800 dark:text-gray-200 dark:focus-visible:ring-[#1D7BD7]"
+                  />
+                </div>
                 <div>
                   <ProjectSelector
                     value={formData.projectId}
diff --git a/frontend/src/server/mutations/moduleMutations.ts b/frontend/src/server/mutations/moduleMutations.ts
@@ -12,6 +12,7 @@ export const UPDATE_MODULE = gql`
       endedAt
       tags
       domains
+      labels
       projectId
       mentors {
         id
@@ -35,6 +36,7 @@ export const CREATE_MODULE = gql`
       endedAt
       domains
       tags
+      labels
       projectId
       mentors {
         id
diff --git a/frontend/src/server/queries/moduleQueries.ts b/frontend/src/server/queries/moduleQueries.ts
@@ -60,6 +60,7 @@ export const GET_PROGRAM_ADMINS_AND_MODULES = gql`
       name
       description
       tags
+      labels
       projectId
       projectName
       domains
diff --git a/frontend/src/types/card.ts b/frontend/src/types/card.ts
@@ -49,6 +49,7 @@ export interface DetailsCardProps {
   healthMetricsData?: HealthMetricsProps[]
   heatmap?: JSX.Element
   isActive?: boolean
+  labels?: string[]
   languages?: string[]
   status?: string
   setStatus?: (newStatus: string) => void
diff --git a/frontend/src/types/mentorship.ts b/frontend/src/types/mentorship.ts
@@ -61,6 +61,7 @@ export type Module = {
   endedAt: string
   domains: string[]
   tags: string[]
+  labels: string[]
 }
 
 export type ModuleFormData = {
@@ -71,6 +72,7 @@ export type ModuleFormData = {
   endedAt: string
   domains: string
   tags: string
+  labels: string
   projectName: string
   projectId: string
   mentorLogins: string

Original file line number	Diff line number	Diff line change
`@@ -106,6 +106,7 @@ const mockModule: Module = {`
`106`	`106`	`endedAt: '2024-12-31T23:59:59Z',`
`107`	`107`	`domains: ['frontend', 'backend'],`
`108`	`108`	`tags: ['react', 'nodejs'],`
	`109`	`+ labels: ['good first issue', 'bug'],`
`109`	`110`	`}`
`110`	`111`
`111`	`112`	`const mockAdmins = [{ login: 'admin1' }, { login: 'admin2' }]`