`General`: Unify filter UI/UX

[florian-glombik]

Problem & Motivation

Right now we have multiple different approaches to implement filters in Artemis, neither do they look, nor do they work in the same way. This should be unified for a better User Exprience in Artemis.

Identified approaches

Filter indicator	Filter active	Filter inactive	Default	Appearance	Functionality	example
Blue Text with "Link" appearance	Blue, different icon	Blue	inactive	Modal	No filter set = show everything, Filter set = only show elements that satisfy the filter conditions	Student Exercise / Lecture overview
Button	Green	Grey	active	Popup, overlay	Not really a filter, rather a selection of what to include (no "filter" selected = no results)	Student Statistics view - Performance in Exercises
Button	Blue	- cannot be inactive	active	Popup, overlay	Only show elements that satisy the filter conditions (one option for everything)	Exercises < Scores (Instructor feature)
Button	Green	Grey	inactive	Modal (grey Background)	No filter set = show everything, Filter set = only show elements that satisfy the filter conditions	Server Administration > Build Overview > Build Queue (Admin Feature)
Icon	Black	Black	inactive	Integrated in view	No filter set = show everything, Filter set = only show elements that satisfy the filter conditions	Exercise Communication Filter (student view, when working on exercise)

Further examples

Student Exercise / Lecture overview

Student Statistics view - Overall points

Student Statistics view - Performance in Exercises

Lecture Overview (Instructors)

User Management (admin feature)

Exercises < Scores (Instructor feature)

Server Administration > Build Overview > Build Queue (Admin Feature)

course statistics

Exercise Communication Filter (student view, when working on exercise)

Describe the solution you'd like

1. Discuss and develop an approach to filters that combines the advantages of the currently different approaches
2. Introduce a shared component for opening filters
3. Find a way to unify the appearance of modals, maybe there can be an abstract shared filter component that enforces some layout?
4. Replace all occurrences of filters in Artemis with the unified approach from step 1
   Based on a search for faFilter
   • src/main/webapp/app/admin/user-management (3 results)
   • src/main/webapp/app/exercises/programming/manage/grading/feedback-analysis (3 results)
   • src/main/webapp/app/exercises/shared/exercise-scores (3 results)
   • src/main/webapp/app/faq (3 results)
   • src/main/webapp/app/lecture (3 results)
   • src/main/webapp/app/localci/build-queue (3 results)
   • src/main/webapp/app/overview/course-conversations (2 results)
   • src/main/webapp/app/overview/course-conversations/course-wide-search (3 results)
   • src/main/webapp/app/overview/course-faq (3 results)
   • src/main/webapp/app/overview/course-statistics (3 results)
   • src/main/webapp/app/overview/discussion-section (1 result)
   • src/main/webapp/app/overview/visualizations/exercise-scores-chart (3 results)
   • src/main/webapp/app/shared/exercise-filter (3 results)
   • src/main/webapp/app/shared/metis (2 results)
   • src/main/webapp/app/shared/sidebar (5 results)
   • src/main/webapp/app/shared/statistics-graph (3 results)

Additional context

Current Artemis Version: 7.8.0