Tidy up how Code Editor and Code Classroom users can provide feedback

README.md

@@ -113,6 +113,7 @@ The `editor-wc` tag accepts the following attributes, which must be provided as
 - `code`: A preset blob of code to show in the editor pane (overrides content of `main.py`/`index.html`)
 - `editable_instructions`: Boolean whether to show edit panel for instructions
 - `embedded`: Enable embedded mode which hides some functionality (defaults to `false`)
+- `feedback_form_url`: URL used by the Feedback link in the info panel (defaults to the Code Editor feedback form)
 - `host_styles`: Styles passed into the web component from the host page
 - `identifier`: Load the project with this identifier from the database
 - `instructions`: Stringified JSON containing steps to be displayed in the instructions panel in the sidebar

src/components/Editor/Project/Project.jsx

@@ -24,6 +24,7 @@ const Project = (props) => {
     withProjectbar = true,
     withSidebar = true,
     sidebarOptions = [],
+    feedbackFormUrl,
     sidebarPlugins = [],
   } = props;
   const saving = useSelector((state) => state.editor.saving);
@@ -73,6 +74,7 @@ const Project = (props) => {
           <Sidebar
             options={sidebarOptions}
             plugins={sidebarPlugins}
+            feedbackFormUrl={feedbackFormUrl}
             allowMobileView={!isCodeEditorScratchProject}
           />
         )}

src/components/Menus/Sidebar/InfoPanel/InfoPanel.jsx

@@ -4,7 +4,25 @@ import SidebarPanel from "../SidebarPanel";
 
 import "../../../../assets/stylesheets/InfoPanel.scss";
 
-const InfoPanel = () => {
+const CODE_EDITOR_FEEDBACK_URL =
+  "https://form.raspberrypi.org/f/code-editor-feedback";
+
+const feedbackUrl = (url) => {
+  if (typeof url !== "string" || url.trim() === "") {
+    return CODE_EDITOR_FEEDBACK_URL;
+  }
+
+  try {
+    const parsedUrl = new URL(url.trim());
+    return parsedUrl.protocol === "https:"
+      ? parsedUrl.href
+      : CODE_EDITOR_FEEDBACK_URL;
+  } catch {
+    return CODE_EDITOR_FEEDBACK_URL;
+  }
+};
+
+const InfoPanel = ({ feedbackFormUrl = CODE_EDITOR_FEEDBACK_URL }) => {
   const { t } = useTranslation();
   const links = [
     {
@@ -15,7 +33,7 @@ const InfoPanel = () => {
     {
       id: "feedback",
       text: t("sidebar.feedback"),
-      href: "https://form.raspberrypi.org/f/code-editor-feedback",
+      href: feedbackUrl(feedbackFormUrl),
     },
     {
       id: "privacy",

src/components/Menus/Sidebar/InfoPanel/InfoPanel.test.js

@@ -6,40 +6,44 @@ import { MemoryRouter } from "react-router-dom";
 
 import InfoPanel from "./InfoPanel";
 
-describe("Info panel", () => {
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
-    const initialState = {
-      editor: {
-        project: {
-          components: [
-            {
-              name: "main",
-              extension: "py",
-            },
-          ],
-        },
+const renderInfoPanel = (props = {}) => {
+  const middlewares = [];
+  const mockStore = configureStore(middlewares);
+  const initialState = {
+    editor: {
+      project: {
+        components: [
+          {
+            name: "main",
+            extension: "py",
+          },
+        ],
       },
-    };
-    const store = mockStore(initialState);
-
-    render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <InfoPanel t={() => {}} />
-        </MemoryRouter>
-      </Provider>,
-    );
-  });
+    },
+  };
+  const store = mockStore(initialState);
+
+  render(
+    <Provider store={store}>
+      <MemoryRouter>
+        <InfoPanel {...props} />
+      </MemoryRouter>
+    </Provider>,
+  );
+};
 
+describe("Info panel", () => {
   test("Links are rendered", () => {
+    renderInfoPanel();
+
     expect(screen.queryByText("sidebar.help")).toBeInTheDocument();
     expect(screen.queryByText("sidebar.feedback")).toBeInTheDocument();
     expect(screen.queryByText("sidebar.privacy")).toBeInTheDocument();
   });
 
-  test("Links have the expected source", () => {
+  test("Links have the expected default source", () => {
+    renderInfoPanel();
+
     expect(screen.queryByText("sidebar.feedback")).toHaveAttribute(
       "href",
       "https://form.raspberrypi.org/f/code-editor-feedback",
@@ -49,4 +53,33 @@ describe("Info panel", () => {
       "https://help.editor.raspberrypi.org/hc/en-us",
     );
   });
+
+  test("Uses the supplied feedback form source", () => {
+    renderInfoPanel({
+      feedbackFormUrl: "https://form.raspberrypi.org/4873801",
+    });
+
+    expect(screen.queryByText("sidebar.feedback")).toHaveAttribute(
+      "href",
+      "https://form.raspberrypi.org/4873801",
+    );
+  });
+
+  test.each([
+    `java${"script"}:alert(1)`,
+    "http://example.com",
+    "ftp://example.com",
+    "not-a-url",
+    "",
+  ])(
+    "Falls back to the default feedback form for invalid feedback form source %p",
+    (feedbackFormUrl) => {
+      renderInfoPanel({ feedbackFormUrl });
+
+      expect(screen.queryByText("sidebar.feedback")).toHaveAttribute(
+        "href",
+        "https://form.raspberrypi.org/f/code-editor-feedback",
+      );
+    },
+  );
 });

src/components/Menus/Sidebar/Sidebar.jsx

@@ -26,7 +26,12 @@ import InstructionsPanel from "./InstructionsPanel/InstructionsPanel";
 import SidebarPanel from "./SidebarPanel";
 import { setSidebarOption } from "../../../redux/EditorSlice";
 
-const Sidebar = ({ options = [], plugins = [], allowMobileView = true }) => {
+const Sidebar = ({
+  options = [],
+  plugins = [],
+  feedbackFormUrl,
+  allowMobileView = true,
+}) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const projectType = useSelector((state) => state.editor.project.project_type);
@@ -92,6 +97,7 @@ const Sidebar = ({ options = [], plugins = [], allowMobileView = true }) => {
       title: t("sidebar.information"),
       position: "bottom",
       panel: InfoPanel,
+      panelProps: { feedbackFormUrl },
     },
   ].filter((option) => {
     if (!options.includes(option.name)) return false;
@@ -203,7 +209,12 @@ const Sidebar = ({ options = [], plugins = [], allowMobileView = true }) => {
         instructions={instructionsSteps}
         allowMobileView={allowMobileView}
       />
-      {activeOption && <CustomSidebarPanel isMobile={isMobile} />}
+      {activeOption && (
+        <CustomSidebarPanel
+          isMobile={isMobile}
+          {...(optionDict.panelProps || {})}
+        />
+      )}
     </div>
   );
 };

src/components/Menus/Sidebar/Sidebar.test.js

@@ -511,6 +511,30 @@ describe("When plugins are provided", () => {
   });
 });
 
+describe("When a feedback form URL is provided", () => {
+  test("Passes the feedback form URL to the info panel", () => {
+    const initialState = {
+      editor: {
+        project: {
+          components: [],
+          image_list: [],
+        },
+      },
+      instructions: {},
+    };
+    renderSidebarWithState(initialState, {
+      feedbackFormUrl: "https://form.raspberrypi.org/4873801",
+    });
+
+    fireEvent.click(screen.getByTitle("sidebar.information"));
+
+    expect(screen.queryByText("sidebar.feedback")).toHaveAttribute(
+      "href",
+      "https://form.raspberrypi.org/4873801",
+    );
+  });
+});
+
 describe("When the project type is code_editor_scratch", () => {
   beforeEach(() => {
     const mockStore = configureStore([]);

src/components/Mobile/MobileProject/MobileProject.jsx

@@ -17,6 +17,7 @@ import { showSidebar } from "../../../redux/EditorSlice";
 const MobileProject = ({
   withSidebar,
   sidebarOptions = [],
+  feedbackFormUrl,
   sidebarPlugins = [],
 }) => {
   const projectType = useSelector((state) => state.editor.project.project_type);
@@ -52,7 +53,11 @@ const MobileProject = ({
       >
         {withSidebar && (
           <TabPanel>
-            <Sidebar options={sidebarOptions} plugins={sidebarPlugins} />
+            <Sidebar
+              options={sidebarOptions}
+              plugins={sidebarPlugins}
+              feedbackFormUrl={feedbackFormUrl}
+            />
           </TabPanel>
         )}
         <TabPanel>

src/components/WebComponentProject/WebComponentProject.jsx

@@ -35,6 +35,7 @@ const WebComponentProject = ({
   outputOnly = false,
   outputPanels = ["text", "visual"],
   outputSplitView = false,
+  feedbackFormUrl,
   sidebarPlugins = [],
 }) => {
   const loading = useSelector((state) => state.editor.loading);
@@ -161,6 +162,7 @@ const WebComponentProject = ({
           <MobileProject
             withSidebar={withSidebar}
             sidebarOptions={sidebarOptions}
+            feedbackFormUrl={feedbackFormUrl}
             sidebarPlugins={sidebarPlugins}
           />
         ) : (
@@ -169,6 +171,7 @@ const WebComponentProject = ({
             withProjectbar={withProjectbar}
             withSidebar={withSidebar}
             sidebarOptions={sidebarOptions}
+            feedbackFormUrl={feedbackFormUrl}
             sidebarPlugins={sidebarPlugins}
           />
         ))}

src/containers/WebComponentLoader.jsx

@@ -36,6 +36,9 @@ import {
   projectOwnerLoadedEvent,
 } from "../events/WebComponentCustomEvents";
 
+const CODE_EDITOR_FEEDBACK_URL =
+  "https://form.raspberrypi.org/f/code-editor-feedback";
+
 const TOAST_CONTAINER_DEFAULTS = {
   ...(ToastContainer.defaultProps || {}),
 };
@@ -54,6 +57,7 @@ const WebComponentLoader = (props) => {
     code,
     embedded = false,
     editableInstructions,
+    feedbackFormUrl = CODE_EDITOR_FEEDBACK_URL,
     hostStyles, // Pass in styles from the host
     identifier,
     instructions,
@@ -259,6 +263,7 @@ const WebComponentLoader = (props) => {
               outputPanels={outputPanels}
               outputSplitView={outputSplitView}
               editableInstructions={editableInstructions}
+              feedbackFormUrl={feedbackFormUrl}
               sidebarPlugins={sidebarPlugins}
             />
             {errorModalShowing && <ErrorModal />}

src/web-component.js

@@ -59,6 +59,7 @@ class WebComponent extends HTMLElement {
       "code",
       "editable_instructions",
       "embedded",
+      "feedback_form_url",
       "host_styles",
       "identifier",
       "initial_project",