diff --git a/backend/capellacollab/settings/configuration/models.py b/backend/capellacollab/settings/configuration/models.py index 6382332c0..5dbb91d2c 100644 --- a/backend/capellacollab/settings/configuration/models.py +++ b/backend/capellacollab/settings/configuration/models.py @@ -157,6 +157,10 @@ class FeedbackConfiguration(core_pydantic.BaseModelStrict): description="Email addresses to send feedback to.", examples=[[], ["test@example.com"]], ) + hint_text: str = pydantic.Field( + default="Try to be specific. What happened? What were you doing?", + description="Text to display as a hint in the feedback form.", + ) class BetaConfiguration(core_pydantic.BaseModelStrict): diff --git a/docs/docs/admin/configure-for-your-org.md b/docs/docs/admin/configure-for-your-org.md index 774c6866c..c1adc2ee6 100644 --- a/docs/docs/admin/configure-for-your-org.md +++ b/docs/docs/admin/configure-for-your-org.md @@ -95,6 +95,7 @@ feedback: recipients: # (1)! - test1@example.com - test2@example.com + hint_text: Try to be specific. What happened? What were you doing? ``` Prompts that are associated with a session automatically include anonymized diff --git a/frontend/src/app/openapi/model/feedback-configuration-input.ts b/frontend/src/app/openapi/model/feedback-configuration-input.ts index 921877fd5..6d07bb741 100644 --- a/frontend/src/app/openapi/model/feedback-configuration-input.ts +++ b/frontend/src/app/openapi/model/feedback-configuration-input.ts @@ -37,5 +37,9 @@ export interface FeedbackConfigurationInput { * Email addresses to send feedback to. */ recipients?: Array; + /** + * Text to display as a hint in the feedback form. + */ + hint_text?: string; } diff --git a/frontend/src/app/openapi/model/feedback-configuration-output.ts b/frontend/src/app/openapi/model/feedback-configuration-output.ts index 2f69bf3d7..5b32d748c 100644 --- a/frontend/src/app/openapi/model/feedback-configuration-output.ts +++ b/frontend/src/app/openapi/model/feedback-configuration-output.ts @@ -37,5 +37,9 @@ export interface FeedbackConfigurationOutput { * Email addresses to send feedback to. */ recipients: Array; + /** + * Text to display as a hint in the feedback form. + */ + hint_text: string; } diff --git a/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html b/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html index b711e1872..0ea4f6873 100644 --- a/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html +++ b/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html @@ -17,7 +17,7 @@

How were your sessions? }

-
+
@for (rating of ratings; track rating) {
- @if (feedbackForm.get("rating")?.value) { - - @if (feedbackForm.get("rating")?.value === "good") { - What was good? - } @else { - What can we do better? - } - - @if (feedbackForm.controls.feedbackText.hasError("maxlength")) { - - Your feedback can't be longer than 500 characters. - - } - Try to be specific. What happened? What were you doing? - - } + + @if (feedbackForm.get("rating")?.value === "good") { + What was good? + } @else { + What can we do better? + } + + + @if (feedbackForm.controls.feedbackText.hasError("maxlength")) { + + Your feedback can't be longer than 500 characters. + + } + {{ (feedbackWrapperService.feedbackConfig$ | async)?.hint_text }} + + diff --git a/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.stories.ts b/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.stories.ts index 54eeea726..3ff91d298 100644 --- a/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.stories.ts +++ b/frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.stories.ts @@ -6,6 +6,10 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog'; import { Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { userEvent, within } from '@storybook/test'; import { dialogWrapper } from 'src/storybook/decorators'; +import { + mockFeedbackConfig, + mockFeedbackWrapperServiceProvider, +} from '../../../../storybook/feedback'; import { mockPersistentSession } from '../../../../storybook/session'; import { FeedbackDialogComponent } from './feedback-dialog.component'; @@ -32,6 +36,43 @@ export const NoSessions: Story = { ], }; +export const ShortHint: Story = { + args: {}, + decorators: [ + moduleMetadata({ + providers: [ + { + provide: MAT_DIALOG_DATA, + useValue: { sessions: [], trigger: 'storybook' }, + }, + mockFeedbackWrapperServiceProvider({ + ...mockFeedbackConfig, + hint_text: 'Hint', + }), + ], + }), + ], +}; + +export const LongHint: Story = { + args: {}, + decorators: [ + moduleMetadata({ + providers: [ + { + provide: MAT_DIALOG_DATA, + useValue: { sessions: [], trigger: 'storybook' }, + }, + mockFeedbackWrapperServiceProvider({ + ...mockFeedbackConfig, + hint_text: + 'This is a very long hint text that should be displayed in the feedback dialog.', + }), + ], + }), + ], +}; + export const RatingSelected: Story = { args: {}, decorators: [ @@ -68,7 +109,7 @@ export const OneSession: Story = { ], }; -export const OneSessionWithUserInformation: Story = { +export const OneSessionWithoutUserInformation: Story = { args: {}, decorators: [ moduleMetadata({ diff --git a/frontend/src/storybook/feedback.ts b/frontend/src/storybook/feedback.ts index 851d9737f..6ac9cf05e 100644 --- a/frontend/src/storybook/feedback.ts +++ b/frontend/src/storybook/feedback.ts @@ -16,6 +16,7 @@ export const mockFeedbackConfig: FeedbackConfigurationOutput = { hours_between_prompt: 1, }, recipients: [], + hint_text: 'Hint text', }; class MockFeedbackWrapperService implements Partial {