The Topics feature has been fully implemented with the following components:
- ✅ Topics list page with table, search, and pagination (
Topics.tsx) - ✅ Create Topic dialog (
CreateTopicDialog.tsx) - ✅ Edit Topic dialog (
EditTopicDialog.tsx) - ✅ Topics service with API integration (
topics.service.ts) - ✅ Route configuration added to React Router
- ✅ Sidebar icon mapping added (Topic icon)
- ✅ Reuses existing Material-UI components for consistency
- ✅ Topics controller with CRUD operations (
topics.controller.ts) - ✅ Topics routes with authentication middleware (
topics.routes.ts) - ✅ Route registered in main server file (
index.ts) - ✅ Audit logging integration for all operations
- ✅ JIRA link requirement for compliance
- ✅ List all topics with pagination (configurable: 5, 10, 25, 50 per page)
- ✅ Search topics by name
- ✅ Filter by status (Active, Inactive, Draft)
- ✅ Create new topics with name and description
- ✅ Edit existing topics
- ✅ Delete topics (only if no communities associated)
- ✅ JIRA link popup for audit compliance
- ✅ Color-coded status chips
- ✅ Responsive Material-UI design
- ✅ Loading states and error handling
- ✅ Success/error notifications
Run this SQL command in PostgreSQL to make Topics visible in the sidebar:
INSERT INTO modules ("name", "url", "isVisible", "isAdminModule", "isRootModule", "root")
VALUES ('Topics', '/topics', true, true, false, null)
ON CONFLICT ("url") DO NOTHING;Or use the provided SQL file:
psql -U your_user -d your_database -f add-topics-module.sqlEnsure these are set in support-tool-server/.env:
KONG_API_URL=https://portal.uat.karmayogibharat.net
AUTHORIZATION=Bearer YOUR_TOKEN_HERE# Backend
cd support-tool-server
npm run dev
# Frontend
cd support-tool-react-client
npm start- Login to the support tool
- Look for "Topics" in the sidebar (Admin section if
isAdminModule=true) - Click to access the Topics management page
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/topics/list |
Get topics with pagination/filters |
| POST | /api/topics/create |
Create a new topic |
| PUT | /api/topics/update |
Update an existing topic |
| DELETE | /api/topics/delete |
Delete a topic |
- Full Documentation: See TOPICS_FEATURE_DOCUMENTATION.md
- General Patterns: See INSTRUCTIONS.md
- Action Interceptor Pattern: JIRA link requirement for audit compliance
- Reusable Components: Material-UI Table, Dialogs, and Forms
- Service Layer: Axios-based API calls through
apiClient - Context API: AppContext for global state and notifications
- TypeScript: Strongly typed interfaces for Topics
- Responsive Grid: Material-UI Grid system for mobile support
Frontend:
- src/Components/topics/Topics.tsx
- src/Components/topics/CreateTopicDialog.tsx
- src/Components/topics/EditTopicDialog.tsx
- src/services/topics.service.ts
Backend:
- src/controllers/topics.controller.ts
- src/routes/topics.routes.ts
Navigate to /topics to see the full list with:
- Pagination controls
- Search box for topic names
- Status filter dropdown
- Total count display
- Click "Create Topic" button
- Fill in topic name (required) and description
- Click "Create"
- Enter JIRA link when prompted
- Topic appears in the list
- Click three-dot menu in Actions column
- Select "Edit"
- Modify fields
- Click "Update"
- Enter JIRA link when prompted
- Click three-dot menu in Actions column
- Select "Delete" (only visible if no communities)
- Confirm deletion
- Enter JIRA link when prompted
→ Run the SQL script to add the module to the database
→ Check user session and authentication
→ Verify KONG_API_URL and AUTHORIZATION in backend .env
→ Check network tab for API responses and verify external API is accessible
- Run the SQL script to add Topics to modules table
- Configure environment variables
- Restart the application
- Test the feature with different operations
- Grant appropriate permissions to user roles
Status: ✅ Ready for Testing
Version: 1.0.0
Date: November 2025