Skip to content

Conversation

@FelberMartin
Copy link
Contributor

@FelberMartin FelberMartin commented Apr 10, 2025

Checklist

General

Client

  • Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data (e.g. using paging).
  • I strictly followed the principle of data economy for all client-server REST calls.
  • I strictly followed the client coding and design guidelines.
  • Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
  • I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
  • I documented the TypeScript code using JSDoc style.
  • I added multiple screenshots/screencasts of my UI changes.
  • I translated all newly inserted strings into English and German.

Motivation and Context

With #10601 we adapted the messages endpoint to allow for searching messages with a specific author or in specific channels. This PR introduces the frontend changes to make this new functionality available in the web UI.

Description

  • In the search bar you can search for messages by an author with typing "from: ..." and selecting the author
  • We removed the filterToOwn checkbox. Instead you can search for "from:me" or "by:" with your username
  • Search within a conversation by typing "in: ..." or by clicking the search icon within a chat

Steps for Testing

Prerequisites:

  • 1 Student
  1. Log in to Artemis
  2. Go to the communication section of a course
  3. Play around with the new filter options by typing "from: ..." and "in: ..." and using the checkboxes in the search results
  4. See that everything works and looks as expected
  5. Go to any chat and click the search icon in the top right -> See that "in:" automatically gets filled into the global search and the search bar is focussed

Testserver States

You can manage test servers using Helios. Check environment statuses in the environment list. To deploy to a test server, go to the CI/CD page, find your PR or branch, and trigger the deployment.

Review Progress

Code Review

  • Code Review 1
  • Code Review 2

Manual Tests

  • Test 1
  • Test 2

Screenshots

image
image

Test Coverage

Client

Class/File Line Coverage Confirmation (assert/expect)
course-wide-search.component.ts 94.64%
conversation-header.component.ts 95.91%
conversation-messages.component.ts 94.07%
metis.util.ts 100%
metis.service.ts 90.33%
post.service.ts 78.43%
conversation-global-search.component.ts 95.18%
course-conversations.component.ts 92.22%
discussion-section.component.ts 93.98%

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features

    • Introduced a global search component for conversations and users with advanced filtering by conversation and author.
    • Added UI controls for course-wide filtering and multi-criteria selection in conversation search.
    • Expanded localization with new search-related strings in English and German.
  • Refactor

    • Removed the deprecated "filter to own" feature, replacing it with explicit author selection for post filtering.
    • Updated filtering logic and configuration to support multiple selected conversations and authors.
    • Simplified search bar UI by removing redundant controls and deprecated search input handling.
    • Renamed event emitter in conversation header for clearer interaction handling.
    • Replaced previous course-wide search input with the new global search component in conversation views.
    • Updated post filtering to use author ID lists instead of a boolean own filter.
  • Bug Fixes

    • Enhanced filtering accuracy by excluding announcement channels from unresolved post queries.
  • Style

    • Added new styles for the global search component.
  • Tests

    • Updated tests to remove deprecated filters and cover new search and filtering behaviors.
    • Added tests for the global search component’s filtering, selection, and keyboard navigation.
  • Documentation

    • Enhanced localization and tooltips for search features.

@FelberMartin FelberMartin self-assigned this Apr 10, 2025
@github-project-automation github-project-automation bot moved this to Work In Progress in Artemis Development Apr 10, 2025
@github-actions github-actions bot added server Pull requests that update Java code. (Added Automatically!) client Pull requests that update TypeScript code. (Added Automatically!) communication Pull requests that affect the corresponding module labels Apr 10, 2025
coderabbitai[bot]
coderabbitai bot previously approved these changes May 5, 2025
Copy link
Contributor

@cremertim cremertim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Had some remarks on the code during testing session.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
src/main/webapp/app/communication/shared/conversation-global-search/conversation-global-search.component.ts (3)

142-163: Consider optimizing the filtering logic

The filtering of conversations happens in two steps: first filtering out already selected conversations, then filtering by search query. These operations could be combined for better performance.

-        const notYetSelectedConversations = this.conversations().filter((conversation) => {
-            return !this.selectedConversations.some((selected) => selected.id === conversation.id);
-        });
-
-        let matchingConversations = notYetSelectedConversations;
-        if (searchQuery) {
-            matchingConversations = matchingConversations.filter((conversation) => {
-                const name = this.getConversationName(conversation);
-                return name.toLowerCase().includes(searchQuery);
-            });
-        }
+        let matchingConversations = this.conversations().filter((conversation) => {
+            // Filter out already selected conversations
+            const isNotSelected = !this.selectedConversations.some((selected) => selected.id === conversation.id);
+            
+            // If we have a search query, also filter by name
+            if (!isNotSelected) return false;
+            if (!searchQuery) return true;
+            
+            const name = this.getConversationName(conversation);
+            return name.toLowerCase().includes(searchQuery);
+        });

165-204: Address optional chaining in user filtering conditions

The static analysis tool flagged potential null/undefined access in the user filtering logic. Use optional chaining to make these checks safer.

-                if (
-                    (this.user && this.user.name?.toLowerCase().includes(searchQuery.toLowerCase())) ||
-                    (this.user && this.user.login?.toLowerCase().includes(searchQuery.toLowerCase()))
-                ) {
+                if (
+                    this.user?.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                    this.user?.login?.toLowerCase().includes(searchQuery.toLowerCase())
+                ) {
🧰 Tools
🪛 Biome (1.9.4)

[error] 197-197: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 198-198: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


165-204: Improve error handling in user search

The error handling in the user search HTTP request is minimal. Consider displaying a user-friendly error message when the request fails.

                catchError(() => of([])),
+               catchError((error) => {
+                   console.error('Error searching users:', error);
+                   this.userSearchStatus = UserSearchStatus.RESULTS;
+                   return of([]);
+               }),
                takeUntil(this.destroy$),
🧰 Tools
🪛 Biome (1.9.4)

[error] 197-197: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 198-198: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ff49c7f and 1b6fb49.

📒 Files selected for processing (1)
  • src/main/webapp/app/communication/shared/conversation-global-search/conversation-global-search.component.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`src/main/webapp/**/*.ts`: angular_style:https://angular.io/guide/styleguide;methods_in_html:false;lazy_loading:true;code_reuse:true;tests:meaningful;types:PascalCase;enums:PascalC...

src/main/webapp/**/*.ts: angular_style:https://angular.io/guide/styleguide;methods_in_html:false;lazy_loading:true;code_reuse:true;tests:meaningful;types:PascalCase;enums:PascalCase;funcs:camelCase;props:camelCase;no_priv_prefix:true;strings:single_quotes;localize:true;btns:functionality;links:navigation;icons_text:newline;labels:associate;code_style:arrow_funcs,curly_braces,open_braces_same_line,indent_4;memory_leak_prevention:true;routes:naming_schema;chart_framework:ngx-charts;responsive_layout:true

  • src/main/webapp/app/communication/shared/conversation-global-search/conversation-global-search.component.ts
🪛 Biome (1.9.4)
src/main/webapp/app/communication/shared/conversation-global-search/conversation-global-search.component.ts

[error] 197-197: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


[error] 198-198: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

⏰ Context from checks skipped due to timeout of 90000ms (9)
  • GitHub Check: Build and Push Docker Image / Build Docker Image for ls1intum/artemis
  • GitHub Check: Build and Push Docker Image / Build Docker Image for ls1intum/artemis
  • GitHub Check: Build .war artifact
  • GitHub Check: client-style
  • GitHub Check: client-tests-selected
  • GitHub Check: client-tests
  • GitHub Check: server-style
  • GitHub Check: server-tests
  • GitHub Check: Analyse
🔇 Additional comments (6)
src/main/webapp/app/communication/shared/conversation-global-search/conversation-global-search.component.ts (6)

1-19: Well-structured imports and organization

Good job on organizing imports following Angular best practices. The component imports are properly classified by type (Angular core, models, services, etc.) while keeping everything needed for the functionality.


20-48: Good use of interfaces and enums

Clean definition of interfaces and enums with descriptive names following PascalCase convention. The search prefixes as constants also make the code more maintainable.


49-93: Component setup follows Angular best practices

Good implementation using Angular's input/output signals and viewChild. The component is properly set up with necessary dependencies and follows the coding guidelines for naming conventions.


94-103: Proper lifecycle management

The component correctly implements OnInit and OnDestroy interfaces with appropriate cleanup of observables using the destroy$ subject, which prevents memory leaks.


307-333: Well-implemented keyboard navigation with visual focus

Excellent implementation of keyboard navigation for the dropdown with proper scrolling to keep the active item visible. This enhances accessibility and user experience.


342-356: Good implementation of keyboard shortcut and click outside handling

The component properly handles document-level events for closing the dropdown when clicking outside and focusing the search input using Ctrl+K or Cmd+K, which enhances the user experience.

@github-actions
Copy link

github-actions bot commented May 5, 2025

End-to-End (E2E) Test Results Summary

TestsPassed ✅SkippedFailedTime ⏱
End-to-End (E2E) Test Report1 ran1 passed0 skipped0 failed1s 608ms
TestResultTime ⏱
No test annotations available

@helios-aet helios-aet bot temporarily deployed to artemis-test1.artemis.cit.tum.de May 5, 2025 11:11 Inactive
@github-actions
Copy link

github-actions bot commented May 5, 2025

End-to-End (E2E) Test Results Summary

TestsPassed ☑️Skipped ⚠️Failed ❌️Time ⏱
End-to-End (E2E) Test Report201 ran195 passed3 skipped3 failed52m 37s 978ms
TestResultTime ⏱
End-to-End (E2E) Test Report
e2e/course/CourseMessages.spec.ts
ts.Course messages › Channel messages › Write/edit/delete message in channel › Student should be able to edit message in channel❌ failure2m 2s 800ms
e2e/exercise/quiz-exercise/QuizExerciseManagement.spec.ts
ts.Quiz Exercise Management › Quiz Exercise Creation › Creates a Quiz with Drag and Drop❌ failure2m 2s 617ms
e2e/exercise/quiz-exercise/QuizExerciseParticipation.spec.ts
ts.Quiz Exercise Participation › DnD Quiz participation › Student can participate in DnD Quiz❌ failure2m 2s 427ms

@helios-aet helios-aet bot temporarily deployed to artemis-test5.artemis.cit.tum.de May 5, 2025 21:07 Inactive
Copy link
Contributor

@eylulnc eylulnc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on TS5, work as expected.
Screenshot 2025-05-05 at 23 17 21

@helios-aet helios-aet bot temporarily deployed to artemis-test3.artemis.cit.tum.de May 6, 2025 08:45 Inactive
Copy link
Contributor

@HawKhiem HawKhiem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Retested on TS3. The "by:..." doesn't work anymore, the "in:..." still works

image

@julian-wls
Copy link
Contributor

julian-wls commented May 6, 2025

Retested on TS3. The "by:..." doesn't work anymore, the "in:..." still works

Sorry, we forgot to mention: 'by:' has been changed to 'from:'

@julian-wls julian-wls requested a review from HawKhiem May 6, 2025 09:10
@helios-aet helios-aet bot temporarily deployed to artemis-test5.artemis.cit.tum.de May 6, 2025 09:13 Inactive
Copy link
Contributor

@HawKhiem HawKhiem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Retested on TS5. Works now

image

Copy link
Contributor

@PaRangger PaRangger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested on TS5, works very well 😄

Copy link
Contributor

@cremertim cremertim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code changes lgtm. thanks for incorporating my remarks!

@krusche krusche added this to the 8.0.6 milestone May 7, 2025
@krusche krusche changed the title Communication: Add conversation and author selection to search bar Communication: Allow users to search in specific conversations and from specific authors May 7, 2025
@krusche krusche merged commit cc99655 into develop May 7, 2025
53 of 59 checks passed
@krusche krusche deleted the feature/communication/filter-labels-in-search-bar branch May 7, 2025 07:00
@github-project-automation github-project-automation bot moved this from Todo to Done in Communication Webclient May 7, 2025
@github-project-automation github-project-automation bot moved this from Ready For Review to Merged in Artemis Development May 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

client Pull requests that update TypeScript code. (Added Automatically!) communication Pull requests that affect the corresponding module feature plagiarism Pull requests that affect the corresponding module ready to merge server Pull requests that update Java code. (Added Automatically!) tests

Projects

Archived in project
Status: Done

Development

Successfully merging this pull request may close these issues.