feat: Allow customizing feedback hint and update dialog

- Allow customizing the hint text.
- Always show the text input to prevent layout shift
- Enable dynamic sizing for hint to prevent layout issues

backend/capellacollab/settings/configuration/models.py

@@ -157,6 +157,10 @@ class FeedbackConfiguration(core_pydantic.BaseModelStrict):
         description="Email addresses to send feedback to.",
         examples=[[], ["[email protected]"]],
     )
+    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):

backend/tests/test_feedback.py

@@ -203,6 +203,7 @@ def test_feedback_is_updated(
                 "on_session_card": True,
                 "interval": {"enabled": True, "hours_between_prompt": 24},
                 "recipients": ["[email protected]"],
+                "hint_text": "test",
             }
         },
     )
@@ -218,6 +219,7 @@ def test_feedback_is_updated(
         "on_session_card": True,
         "interval": {"enabled": True, "hours_between_prompt": 24},
         "recipients": ["[email protected]"],
+        "hint_text": "test",
     }
 
 

docs/docs/admin/configure-for-your-org.md

@@ -95,6 +95,7 @@ feedback:
     recipients: # (1)!
         - [email protected]
         - [email protected]
+    hint_text: Try to be specific. What happened? What were you doing?
 ```
 
 Prompts that are associated with a session automatically include anonymized

frontend/src/app/sessions/feedback/feedback-dialog/feedback-dialog.component.html

@@ -17,7 +17,7 @@ <h1 class="text-lg font-semibold">
       How were your sessions?
     }
   </h1>
-  <div class="space-y-4">
+  <div class="space-y-2">
     <div class="flex justify-center space-x-4">
       @for (rating of ratings; track rating) {
         <button
@@ -50,28 +50,27 @@ <h1 class="text-lg font-semibold">
       }
     </div>
 
-    @if (feedbackForm.get("rating")?.value) {
-      <mat-form-field class="!mb-2.5 w-full">
-        @if (feedbackForm.get("rating")?.value === "good") {
-          <mat-label>What was good?</mat-label>
-        } @else {
-          <mat-label>What can we do better?</mat-label>
-        }
-        <textarea
-          matInput
-          formControlName="feedbackText"
-          data-testid="feedback-text"
-        ></textarea>
-        @if (feedbackForm.controls.feedbackText.hasError("maxlength")) {
-          <mat-error>
-            Your feedback can't be longer than 500 characters.
-          </mat-error>
-        }
-        <mat-hint class="h-[42px]"
-          >Try to be specific. What happened? What were you doing?</mat-hint
-        >
-      </mat-form-field>
-    }
+    <mat-form-field class="w-full" subscriptSizing="dynamic">
+      @if (feedbackForm.get("rating")?.value === "good") {
+        <mat-label>What was good?</mat-label>
+      } @else {
+        <mat-label>What can we do better?</mat-label>
+      }
+
+      <textarea
+        matInput
+        formControlName="feedbackText"
+        data-testid="feedback-text"
+      ></textarea>
+      @if (feedbackForm.controls.feedbackText.hasError("maxlength")) {
+        <mat-error>
+          Your feedback can't be longer than 500 characters.
+        </mat-error>
+      }
+      <mat-hint
+        >{{ (feedbackWrapperService.feedbackConfig$ | async)?.hint_text }}
+      </mat-hint>
+    </mat-form-field>
 
     <mat-checkbox formControlName="shareContact">
       <span data-testid="share-user-information">

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({

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<FeedbackWrapperService> {