Assessment Initialize new component

.github/workflows/build-and-push-clients.yml

@@ -24,6 +24,9 @@ on:
       intro_course_tutor_image_tag:
         description: "The tag of the intro course tutor component image that was built"
         value: ${{ jobs.intro-course-tutor.outputs.image_tag }}
+      assessment_image_tag:
+        description: "The tag of the assessment component image that was built"
+        value: ${{ jobs.assessment.outputs.image_tag }}
       devops_challenge_image_tag:
         description: "The tag of the devops challenge image that was built"
         value: ${{ jobs.devops-challenge.outputs.image_tag }}
@@ -119,6 +122,18 @@ jobs:
         "CORE_HOST=${{ vars.CORE_HOST }}"
     secrets: inherit
 
+  assessment:
+    needs: clients-base
+    uses: ls1intum/.github/.github/workflows/[email protected]
+    with:
+      image-name: ghcr.io/ls1intum/prompt2/prompt-clients-assessment-component
+      docker-file: clients/assessment_component/Dockerfile # Defaults to Dockerfile
+      docker-context: ./clients/assessment_component
+      build-args: |
+        "IMAGE_TAG=${{ needs.clients-base.outputs.image_tag }}"
+        "CORE_HOST=${{ vars.CORE_HOST }}"
+    secrets: inherit
+
   devops-challenge:
     needs: clients-base
     uses: ls1intum/.github/.github/workflows/[email protected]

.github/workflows/deploy-docker.yml

@@ -30,6 +30,9 @@ on:
       server_intro_course_image_tag:
         required: true
         type: string
+      assessment_image_tag:
+        required: true
+        type: string
       devops_challenge_image_tag:
         required: true
         type: string
@@ -160,6 +163,7 @@ jobs:
             echo "MATCHING_IMAGE_TAG=${{ inputs.matching_image_tag }}" >> .env.prod
             echo "INTRO_COURSE_DEVELOPER_IMAGE_TAG=${{ inputs.intro_course_developer_image_tag }}" >> .env.prod
             echo "INTRO_COURSE_TUTOR_IMAGE_TAG=${{ inputs.intro_course_tutor_image_tag }}" >> .env.prod
+            echo "ASSESSMENT_IMAGE_TAG=${{ inputs.assessment_image_tag }}" >> .env.prod
             echo "DEVOPS_CHALLENGE_IMAGE_TAG=${{ inputs.devops_challenge_image_tag }}" >> .env.prod
 
             echo "SENDER_EMAIL=${{ vars.SENDER_EMAIL_ADDRESS }}" >> .env.prod

.github/workflows/dev.yml

@@ -23,6 +23,7 @@ jobs:
       matching_image_tag: ${{ needs.build-clients.outputs.matching_image_tag }}
       intro_course_developer_image_tag: ${{ needs.build-clients.outputs.intro_course_developer_image_tag }}
       intro_course_tutor_image_tag: ${{ needs.build-clients.outputs.intro_course_tutor_image_tag }}
+      assessment_image_tag: ${{ needs.build-clients.outputs.assessment_image_tag }}
       server_core_image_tag: ${{ needs.build-servers.outputs.server_core_image_tag }}
       server_intro_course_image_tag: ${{ needs.build-servers.outputs.server_intro_course_image_tag }}
       devops_challenge_image_tag: ${{ needs.build-clients.outputs.devops_challenge_image_tag }}

.github/workflows/prod.yml

@@ -23,6 +23,7 @@ jobs:
       matching_image_tag: ${{ needs.build-clients.outputs.matching_image_tag }}
       intro_course_developer_image_tag: ${{ needs.build-clients.outputs.intro_course_developer_image_tag }}
       intro_course_tutor_image_tag: ${{ needs.build-clients.outputs.intro_course_tutor_image_tag }}
+      assessment_image_tag: ${{ needs.build-clients.outputs.assessment_image_tag }}
       server_core_image_tag: ${{ needs.build-servers.outputs.server_core_image_tag }}
       server_intro_course_image_tag: ${{ needs.build-servers.outputs.server_intro_course_image_tag }}
       devops_challenge_image_tag: ${{ needs.build-clients.outputs.devops_challenge_image_tag }}

clients/assessment_component/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

clients/assessment_component/Dockerfile

@@ -0,0 +1,17 @@
+ARG IMAGE_TAG
+FROM ghcr.io/ls1intum/prompt2/prompt-clients-base:${IMAGE_TAG} AS core-base
+
+
+WORKDIR /app/assessment_component
+COPY . ./
+RUN yarn install
+
+RUN yarn build
+
+# Build the final image
+FROM nginx:stable-alpine
+
+COPY --from=core-base /app/assessment_component/build /usr/share/nginx/html
+COPY --from=core-base /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

clients/assessment_component/eslint.config.mjs

@@ -0,0 +1,10 @@
+import rootConfig from '../eslint.config.mjs'
+
+export default [
+  ...rootConfig,
+  {
+    // Optionally add any subfolder-specific rules or settings
+    files: ['**/*.ts', '**/*.tsx'],
+    rules: {},
+  },
+]

clients/assessment_component/package.json

@@ -0,0 +1,18 @@
+{
+    "name": "assessment_component",
+    "version": "1.0.0",
+    "main": "src/index.ts",
+    "license": "MIT",
+    "scripts": {
+        "dev": "webpack serve --open --mode development",
+        "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
+        "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
+        "build": "webpack --mode=production --env NODE_ENV=production",
+        "check-performance": "webpack --mode=production --env NODE_ENV=production --env BUNDLE_SIZE=true"
+    },
+    "devDependencies": {
+        "webpack": "^5.91.0",
+        "webpack-cli": "^5.1.4"
+    },
+    "packageManager": "[email protected]"
+}

clients/assessment_component/public/template.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/prompt_logo.svg" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Prompt: Assessment Component</title>
+  </head>
+  <body>
+    <div id="template-root"></div>
+  </body>
+  <html></html>
+</html>

clients/assessment_component/readme

@@ -0,0 +1,6 @@
+# Assessment component
+
+In project-based learning, assessment processes are crucial for evaluating student performance and providing actionable feedback that fosters meaningful learning. 
+This component focuses on developing a standardized and scalable tool within the PROMPT system, making assessment more efficient, transparent, and adaptable to the needs of instructors and students alike.
+
+TODO: Tutorial how to setup the component

clients/assessment_component/routes/index.tsx

@@ -0,0 +1,20 @@
+import { ExtendedRouteObject } from '@/interfaces/extendedRouteObject'
+import { Role } from '@tumaet/prompt-shared-state'
+import OverviewPage from '../src/assessment/Overview/OverviewPage'
+import SettingsPage from '../src/assessment/Settings/SettingsPage'
+
+const routes: ExtendedRouteObject[] = [
+  {
+    path: '',
+    element: <OverviewPage />,
+    requiredPermissions: [], // empty means no permissions required
+  },
+  {
+    path: '/settings',
+    element: <SettingsPage />,
+    requiredPermissions: [Role.PROMPT_ADMIN, Role.COURSE_LECTURER],
+  },
+  // Add more routes here as needed
+]
+
+export default routes

clients/assessment_component/sidebar/index.tsx

@@ -0,0 +1,18 @@
+import { ClipboardList } from 'lucide-react'
+import { SidebarMenuItemProps } from '@/interfaces/sidebar'
+import { Role } from '@tumaet/prompt-shared-state'
+
+const sidebarItems: SidebarMenuItemProps = {
+  title: 'Assessment Component',
+  icon: <ClipboardList />,
+  goToPath: '',
+  subitems: [
+    {
+      title: 'Settings',
+      goToPath: '/settings',
+      requiredPermissions: [Role.PROMPT_ADMIN, Role.COURSE_LECTURER],
+    },
+  ],
+}
+
+export default sidebarItems

clients/assessment_component/src/App.tsx

@@ -0,0 +1,10 @@
+export const App = (): JSX.Element => {
+  return (
+    <>
+      <h1>Prompt Assessment Component</h1>
+      <p>Please load this component from inside the Prompt Core!</p>
+    </>
+  )
+}
+
+export default App

clients/assessment_component/src/assessment/Overview/OverviewPage.tsx

@@ -0,0 +1,32 @@
+import { Badge } from '@/components/ui/badge'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Construction } from 'lucide-react'
+import { useLocation } from 'react-router-dom'
+
+export const OverviewPage = (): JSX.Element => {
+  const path = useLocation().pathname
+
+  return (
+    <Card className='w-full max-w-2xl mx-auto'>
+      <CardHeader>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center space-x-2'>
+            <Construction className='h-6 w-6 text-yellow-500' />
+            <CardTitle className='text-2xl'>Assessment Component</CardTitle>
+          </div>
+          <Badge variant='secondary' className='bg-yellow-200 text-yellow-800'>
+            In Development
+          </Badge>
+        </div>
+        <CardDescription>This component is currently under development</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className='p-4 border-2 border-dashed border-gray-300 rounded-lg'>
+          You are currently at {path}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default OverviewPage

clients/assessment_component/src/assessment/Settings/SettingsPage.tsx

@@ -0,0 +1,10 @@
+export const SettingsPage = (): JSX.Element => {
+  return (
+    <div>
+      <h1>Settings Page</h1>
+      <p>This is the settings page.</p>
+    </div>
+  )
+}
+
+export default SettingsPage

clients/assessment_component/src/bootstrap.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+const remoteElement = document.getElementById('assessment-root') as unknown as HTMLElement
+const remote = createRoot(remoteElement)
+remote.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

clients/assessment_component/src/index.js

@@ -0,0 +1,3 @@
+import '@/src/index.css'
+
+import('./bootstrap')

clients/assessment_component/tailwind.config.js

@@ -0,0 +1,5 @@
+import sharedConfig from '../shared_library/tailwind.config.js'
+
+/** @type {import('tailwindcss').Config} */
+export const presets = [sharedConfig]
+export const content = ['src/**/*.{ts,tsx}', '../shared_library/components/**/*.{ts,tsx}']

clients/assessment_component/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "strict": true,
+    "skipLibCheck": true,
+    "noImplicitAny": false,
+    "typeRoots": ["./node_modules/@types", "./@types"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["../shared_library/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", "src/index.js",  "tailwind.config.js"]
+}