feat: feedback editor component (#3866)

editor.planx.uk/docs/adding-a-new-component.md

@@ -2,7 +2,7 @@
 
 Let's add a `SetValue` component
 
-## Core directory & files
+## Core directory typing
 
 1. `planx-core/src/types/component.ts`
 
@@ -12,9 +12,11 @@ Add type to enum in `planx-core` repository
 SetValue = 380,
 ```
 
-2. `mkdir src/@planx/components/SetValue`
+## `planx-new` component files
 
-3. `model.ts`
+1. `mkdir src/@planx/components/SetValue`
+
+2. `model.ts`
 
 ```typescript
 import { BaseNodeData, parseBaseNodeData } from "../shared";
@@ -31,7 +33,7 @@ export const parseContent = (
 });
 ```
 
-4. `Editor.tsx`
+3. `Editor.tsx`
 
 ```typescript
 type Props = EditorProps<TYPES.SetValue, SetValue>;
@@ -60,7 +62,7 @@ function SetValueComponent(props: Props) {
 5. `Public.tsx`
 
 ```typescript
-import { PublicProps } from "@planx/components/ui";
+import { PublicProps } from "@planx/components/shared/types";
 
 type Props = PublicProps<SetValue>;
 
@@ -86,7 +88,7 @@ function SetValueComponent(props: Props) {
 
 ## Editor configurations
 
-1. `src/@planx/components/ui.tsx`
+1. `src/@planx/components/shared/icons.tsx`
 
 ```typescript
 import PlaylistAdd from "@mui/icons-material/PlaylistAdd";
@@ -135,13 +137,13 @@ case TYPES.SetValue:
 
 2. `src/@planx/components/shared/Preview/SummaryList`
 
-If/how should this component appear on the Review page?
+If/how should this component appear in a Review component:
 
 ```typescript
 [TYPES.SetValue]: undefined,
 ```
 
-3. `src/@planx/components/Send/bops/index`
+3. In `planx-core` - `src/export/bops/index`
 
 If/how should this component be formatted in Send data formats such as BOPS?
 
@@ -154,4 +156,4 @@ function isTypeForBopsPayload(type?: TYPES) {
     // ...
   }
 }
-```
+```

editor.planx.uk/package.json

@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.4",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#54be9e0",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#b4ca5a9",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

editor.planx.uk/src/@planx/components/Calculate/logic.test.ts

@@ -1,5 +1,8 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { clickContinue, visitedNodes } from "pages/FlowEditor/lib/__tests__/utils";
+import {
+  clickContinue,
+  visitedNodes,
+} from "pages/FlowEditor/lib/__tests__/utils";
 import { Store, useStore } from "pages/FlowEditor/lib/store";
 
 const { getState, setState } = useStore;
@@ -19,7 +22,7 @@ test("When formatOutputForAutomations is true, Calculate writes an array and fut
 
   // The Question can be auto-answered
   expect(visitedNodes()).toEqual(["Calculate"]);
-  expect(upcomingCardIds()).toEqual(["Question"])
+  expect(upcomingCardIds()).toEqual(["Question"]);
   expect(autoAnswerableOptions("Question")).toEqual(["Group2Response"]);
 });
 

editor.planx.uk/src/@planx/components/Checklist/Public.tsx

@@ -42,11 +42,11 @@ const ChecklistComponent: React.FC<Props> = (props) => {
   const autoAnswerableOptions = useStore(
     (state) => state.autoAnswerableOptions,
   );
-  
+
   if (props.neverAutoAnswer) {
     return <VisibleChecklist {...props} />;
   }
-  
+
   let idsThatCanBeAutoAnswered: string[] | undefined;
   if (props.id) idsThatCanBeAutoAnswered = autoAnswerableOptions(props.id);
   if (idsThatCanBeAutoAnswered) {
@@ -203,8 +203,9 @@ const VisibleChecklist: React.FC<Props> = (props) => {
                             pb={2}
                             aria-labelledby={`group-${index}-heading`}
                             id={`group-${index}-content`}
-                            data-testid={`group-${index}${isExpanded ? "-expanded" : ""
-                              }`}
+                            data-testid={`group-${index}${
+                              isExpanded ? "-expanded" : ""
+                            }`}
                           >
                             {group.children.map((option) => (
                               <ChecklistItem

editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.test.tsx

@@ -0,0 +1,18 @@
+import { screen } from "@testing-library/react";
+import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { setup } from "testUtils";
+
+import { FeedbackEditor } from "./Editor";
+
+describe("When the Feedback editor modal is rendered", () => {
+  it("does not throw an error", () => {
+    setup(
+      <DndProvider backend={HTML5Backend}>
+        <FeedbackEditor id="test-feedback-editor" />
+      </DndProvider>,
+    );
+    expect(screen.getByText("Feedback")).toBeInTheDocument();
+  });
+});