EES-5469: Move full feedback details to a modal, truncate long text i…

…n the table.

src/explore-education-statistics-admin/src/pages/admin-dashboard/components/FeedbackDetailsModal.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import ButtonText from '@common/components/ButtonText';
+import Modal from '@common/components/Modal';
+import { FeedbackViewModel } from '@common/services/types/feedback';
+import FormattedDate from '@common/components/FormattedDate';
+
+interface Props {
+  feedback: FeedbackViewModel;
+  getResponseText: (
+    response: FeedbackViewModel['response'],
+  ) => 'Useful' | 'Not useful' | 'Problem encountered' | '';
+}
+
+export default function FeedbackDetailsModal({
+  feedback,
+  getResponseText,
+}: Props) {
+  return (
+    <Modal
+      title="Feedback details"
+      showClose
+      triggerButton={
+        <ButtonText className="dfe-white-space--nowrap">
+          View details
+        </ButtonText>
+      }
+    >
+      <table>
+        <tbody>
+          <tr>
+            <th scope="row">Date</th>
+            <td>
+              <FormattedDate format="d MMM yyyy, HH:mm">
+                {feedback.created}
+              </FormattedDate>
+            </td>
+          </tr>
+          <tr>
+            <th scope="row">URL</th>
+            <td>{feedback.url}</td>
+          </tr>
+          <tr>
+            <th scope="row">Response</th>
+            <td>{getResponseText(feedback.response)}</td>
+          </tr>
+          {feedback.response !== 'Useful' && (
+            <>
+              <tr>
+                <th scope="row" className="dfe-white-space--nowrap">
+                  What were you doing?
+                </th>
+                <td>{feedback.context ?? '-'}</td>
+              </tr>
+              <tr>
+                <th scope="row" className="dfe-white-space--nowrap">
+                  What went wrong?
+                </th>
+                <td>{feedback.issue ?? '-'}</td>
+              </tr>
+              <tr>
+                <th scope="row" className="dfe-white-space--nowrap">
+                  What did you hope to achieve?
+                </th>
+                <td>{feedback.intent ?? '-'}</td>
+              </tr>
+            </>
+          )}
+          <tr>
+            <th scope="row">User agent</th>
+            <td>{feedback.userAgent}</td>
+          </tr>
+        </tbody>
+      </table>
+    </Modal>
+  );
+}

src/explore-education-statistics-admin/src/pages/bau/FeedbackPage.tsx

@@ -5,13 +5,13 @@ import FormattedDate from '@common/components/FormattedDate';
 import { useQuery } from '@tanstack/react-query';
 import feedbackQueries from '@admin/queries/feedbackQueries';
 import feedbackService from '@admin/services/feedbackService';
-import Modal from '@common/components/Modal';
 import ButtonText from '@common/components/ButtonText';
-import SearchIcon from '@common/components/SearchIcon';
 import InsetText from '@common/components/InsetText';
 import ButtonLink from '@admin/components/ButtonLink';
 import useQueryParams from '@admin/hooks/useQueryParams';
 import { FeedbackViewModel } from '@common/services/types/feedback';
+import truncateAround from '@common/utils/string/truncateAround';
+import FeedbackDetailsModal from '../admin-dashboard/components/FeedbackDetailsModal';
 
 type Params = {
   showRead?: string;
@@ -31,7 +31,7 @@ const FeedbackPage = () => {
 
   const { showRead } = useQueryParams<Params>();
 
-  function getText(response: FeedbackViewModel['response']) {
+  const getResponseText = (response: FeedbackViewModel['response']) => {
     switch (response) {
       case 'Useful':
         return 'Useful';
@@ -42,7 +42,16 @@ const FeedbackPage = () => {
       default:
         return '';
     }
-  }
+  };
+
+  const truncateTextOrBlank = (text: string) => {
+    return text
+      ? truncateAround(text, 0, {
+          startTruncateLength: 200,
+          endTruncateLength: 200,
+        })
+      : '-';
+  };
 
   return (
     <Page
@@ -71,7 +80,6 @@ const FeedbackPage = () => {
               <th scope="col">What were you doing?</th>
               <th scope="col">What went wrong?</th>
               <th scope="col">What did you hope to achieve?</th>
-              <th scope="col">User agent</th>
               <th scope="col">Actions</th>
             </tr>
           </thead>
@@ -89,36 +97,29 @@ const FeedbackPage = () => {
                       </td>
                       <td>{feedback.url}</td>
                       <td className="dfe-white-space--nowrap">
-                        {getText(feedback.response)}
+                        {getResponseText(feedback.response)}
                       </td>
                       <td className="dfe-white-space--pre-wrap">
-                        {feedback.context ?? '-'}
+                        {truncateTextOrBlank(feedback.context)}
                       </td>
                       <td className="dfe-white-space--pre-wrap">
-                        {feedback.issue ?? '-'}
+                        {truncateTextOrBlank(feedback.issue)}
                       </td>
                       <td className="dfe-white-space--pre-wrap">
-                        {feedback.intent ?? '-'}
-                      </td>
-                      <td>
-                        <Modal
-                          title="User agent"
-                          showClose
-                          triggerButton={
-                            <ButtonText>
-                              <SearchIcon />
-                            </ButtonText>
-                          }
-                        >
-                          <p>{feedback.userAgent}</p>
-                        </Modal>
+                        {truncateTextOrBlank(feedback.intent)}
                       </td>
                       <td>
                         <ButtonText
+                          className="dfe-white-space--nowrap govuk-!-margin-bottom-3"
                           onClick={() => toggleReadStatus(feedback.id)}
                         >
                           Mark as {feedback.read ? 'unread' : 'read'}
                         </ButtonText>
+
+                        <FeedbackDetailsModal
+                          feedback={feedback}
+                          getResponseText={getResponseText}
+                        />
                       </td>
                     </tr>
                   );