feat: replace thumbs up/down with 5-star rating UI

apps/backend/src/app/modules/admin-feedback/admin-feedback.controller.ts

@@ -17,7 +17,7 @@ const logger = createLoggerWithLabel(module)
 
 const valdiateSubmitAdminFeedbackParams = celebrate({
   [Segments.BODY]: Joi.object().keys({
-    rating: Joi.number().integer().min(0).max(5).required(),
+    rating: Joi.number().integer().min(1).max(5).required(),
     comment: Joi.string(),
     triggerSource: Joi.string()
       .valid('field-edit', 'publish', 'workflow')

apps/frontend/src/features/workspace/WorkspaceService.ts

@@ -1,6 +1,7 @@
 import {
   AdminFeedbackDto,
   AdminFeedbackRating,
+  AdminFeedbackTriggerSource,
   AdminUseEmailModeFeedbackDto,
   ErrorDto,
 } from 'formsg-shared/types'
@@ -235,17 +236,22 @@ export const deleteAdminForm = async (formId: string): Promise<void> => {
 
 export const createAdminFeedback = async (
   rating: AdminFeedbackRating,
+  triggerSource?: AdminFeedbackTriggerSource,
+  formId?: string,
 ): Promise<AdminFeedbackDto> => {
-  return ApiService.post(`${ADMIN_FORM_ENDPOINT}/feedback`, { rating }).then(
-    ({ data }) => data.feedback,
-  )
+  return ApiService.post(`${ADMIN_FORM_ENDPOINT}/feedback`, {
+    rating,
+    ...(triggerSource ? { triggerSource } : {}),
+    ...(formId ? { formId } : {}),
+  }).then(({ data }) => data.feedback)
 }
 
 export const updateAdminFeedback = async (
   feedbackId: string,
-  comment: string,
+  params: { comment?: string; rating?: AdminFeedbackRating },
 ): Promise<boolean> => {
-  return ApiService.patch(`${ADMIN_FORM_ENDPOINT}/feedback/${feedbackId}`, {
-    comment,
-  }).then(({ data }) => data)
+  return ApiService.patch(
+    `${ADMIN_FORM_ENDPOINT}/feedback/${feedbackId}`,
+    params,
+  ).then(({ data }) => data)
 }

apps/frontend/src/features/workspace/components/AdminFeedbackBox/AdminFeedbackBox.stories.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+
+import { viewports } from '~/utils/storybook'
+
+import { AdminFeedbackBox } from './AdminFeedbackBox'
+
+export default {
+  title: 'Features/AdminFeedbackBox',
+  component: AdminFeedbackBox,
+} as Meta
+
+const Template: StoryFn = () => {
+  const [isOpen, setIsOpen] = useState(true)
+  return isOpen ? (
+    <AdminFeedbackBox
+      onClose={() => setIsOpen(false)}
+      triggerSource="field-edit"
+      formId="mock-form-id"
+    />
+  ) : (
+    <button onClick={() => setIsOpen(true)}>Reopen feedback</button>
+  )
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'Empty state (no stars selected)'
+
+export const Mobile = Template.bind({})
+Mobile.storyName = 'Mobile viewport'
+Mobile.parameters = {
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+  chromatic: { viewports: [viewports.xs] },
+}