Merge pull request #269 from os2display/feature/2826-2

Adjustments

Author: tuj

e2e/feed-sources.spec.js

@@ -26,8 +26,8 @@ const feedSourcesJson = {
     {
       "@id": "/v2/feed-sources/01JB9MSQEH75HC3GG75XCVP2WH",
       "@type": "FeedSource",
-      title: "Ny feed source test 3",
-      description: "Ny feed source test 3",
+      title: "Ny datakilde test 3",
+      description: "Ny datakilde test 3",
       outputType: "",
       feedType: "App\\Feed\\RssFeedType",
       secrets: [],
@@ -75,7 +75,7 @@ const feedSourcesJson = {
     {
       "@id": "/v2/feed-sources/01JB1DH8G4CXKGX5JRTYDHDPSP",
       "@type": "FeedSource",
-      title: "Calendar feed source test",
+      title: "Calendar datakilde test",
       description: "test",
       outputType: "",
       feedType: "App\\Feed\\CalendarApiFeedType",
@@ -217,8 +217,8 @@ test.describe("fest", () => {
     await page.locator("#login").click();
   });
 
-  test("It loads create feed source page", async ({ page }) => {
-    page.getByText("Opret ny feed source").click();
+  test("It loads create datakilde page", async ({ page }) => {
+    page.getByText("Opret ny datakilde").click();
     await expect(page.locator("#save_feed-source")).toBeVisible();
   });
 
@@ -232,7 +232,7 @@ test.describe("fest", () => {
       };
       await route.fulfill({ status: 500, json });
     });
-    page.getByText("Opret ny feed source").click();
+    page.getByText("Opret ny datakilde").click();
 
     // Displays error toast and stays on page
     await expect(
@@ -251,16 +251,16 @@ test.describe("fest", () => {
     ).toBeVisible();
     await expect(page).toHaveURL(/feed-sources\/create/);
   });
-  test("Cancel create feed source", async ({ page }) => {
-    page.getByText("Opret ny feed source").click();
+  test("Cancel create datakilde", async ({ page }) => {
+    page.getByText("Opret ny datakilde").click();
     await expect(page.locator("#cancel_feed-source")).toBeVisible();
     await page.locator("#cancel_feed-source").click();
     await expect(page.locator("#cancel_feed-source")).not.toBeVisible();
   });
 });
 
 
-test.describe("Feed source list work", () => {
+test.describe("datakilde list work", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/admin/feed-sources/list");
     await page.route("**/token", async (route) => {
@@ -291,7 +291,7 @@ test.describe("Feed source list work", () => {
     await page.locator("#login").click();
   });
 
-  test("It loads feed source list", async ({ page }) => {
+  test("It loads datakilde list", async ({ page }) => {
     await expect(page.locator("table").locator("tbody")).not.toBeEmpty();
     await expect(page.locator("tbody").locator("tr td").first()).toBeVisible();
   });

src/components/feed-sources/feed-source-form.jsx

@@ -10,6 +10,9 @@ import FormSelect from "../util/forms/select";
 import ContentBody from "../util/content-body/content-body";
 import ContentFooter from "../util/content-footer/content-footer";
 import FormInput from "../util/forms/form-input";
+import CalendarFeedType from "./templates/calendar-feed-type.jsx";
+import NotifiedFeedType from "./templates/notified-feed-type.jsx";
+import EventDatabaseFeedType from "./templates/event-database-feed-type.jsx";
 
 /**
  * The feed-source form component.
@@ -25,7 +28,6 @@ import FormInput from "../util/forms/form-input";
  *   spinner. Default is `""`
  * @param {object} props.feedSource The feed source object
  * @param {object} props.feedSourceTypeOptions The options for feed source types
- * @param {element} props.dynamicFormElement The dynamic form element
  * @param {string} props.mode The mode
  * @returns {object} The feed-source form.
  */
@@ -37,7 +39,8 @@ function FeedSourceForm({
   loadingMessage = "",
   feedSource = null,
   feedSourceTypeOptions = null,
-  dynamicFormElement = null,
+  onFeedTypeChange = () => {},
+  handleSecretInput = () => {},
   mode = null,
 }) {
   const { t } = useTranslation("common", { keyPrefix: "feed-source-form" });
@@ -67,15 +70,23 @@ function FeedSourceForm({
             onChange={handleInput}
           />
           <FormSelect
-            label={t("feed-source-feed-type-label")}
             name="feedType"
+            label={t("feed-source-feed-type-label")}
             value={feedSource.feedType}
-            onChange={handleInput}
+            onChange={onFeedTypeChange}
             disabled={mode === "PUT"}
             options={feedSourceTypeOptions}
           />
 
-          {dynamicFormElement}
+          {feedSource?.feedType === "App\\Feed\\CalendarApiFeedType" &&
+            (<CalendarFeedType handleInput={handleSecretInput} formStateObject={feedSource.secrets} mode={mode} />)
+          }
+          {feedSource?.feedType === "App\\Feed\\NotifiedFeedType" &&
+            (<NotifiedFeedType handleInput={handleSecretInput} formStateObject={feedSource.secrets} mode={mode} />)
+          }
+          {feedSource?.feedType === "App\\Feed\\EventDatabaseApiFeedType" &&
+            (<EventDatabaseFeedType handleInput={handleSecretInput} formStateObject={feedSource.secrets} mode={mode} />)
+          }
         </ContentBody>
         <ContentFooter>
           <Button

src/components/feed-sources/feed-source-manager.jsx

@@ -11,9 +11,9 @@ import {
   displayError,
   displaySuccess,
 } from "../util/list/toast-component/display-toast";
-import EventDatabaseApiFeedTypeTemplate from "./feed-source-type-templates/EventDatabaseApiFeedType.template";
-import NotifiedFeedTypeTemplate from "./feed-source-type-templates/NotifiedFeedType.template";
-import CalendarFeedTypeTemplate from "./feed-source-type-templates/CalendarFeedType.template";
+import EventDatabaseFeedType from "./templates/event-database-feed-type.jsx";
+import NotifiedFeedType from "./templates/notified-feed-type.jsx";
+import CalendarFeedType from "./templates/calendar-feed-type.jsx";
 
 /**
  * The theme manager component.
@@ -50,7 +50,7 @@ function FeedSourceManager({
 
   const [dynamicFormElement, setDynamicFormElement] = useState();
   const [submitting, setSubmitting] = useState(false);
-  const [formStateObject, setFormStateObject] = useState();
+  const [formStateObject, setFormStateObject] = useState({});
 
   const [
     postV2FeedSources,
@@ -67,28 +67,31 @@ function FeedSourceManager({
       value: "App\\Feed\\EventDatabaseApiFeedType",
       title: t("dynamic-fields.event-database-api-feed-type.title"),
       key: "1",
-      secrets: "host",
-      template: <EventDatabaseApiFeedTypeTemplate mode={saveMethod} />,
+      secretsDefault: {
+        "host": ""
+      },
     },
     {
       value: "App\\Feed\\NotifiedFeedType",
       title: t("dynamic-fields.notified-feed-type.title"),
       key: "2",
-      secrets: "token",
-      template: <NotifiedFeedTypeTemplate mode={saveMethod} />,
+      secretsDefault: {
+        "token": "",
+      },
     },
     {
       value: "App\\Feed\\CalendarApiFeedType",
       title: t("dynamic-fields.calendar-api-feed-type.title"),
       key: "3",
-      secrets: "resources",
-      template: <CalendarFeedTypeTemplate mode={saveMethod} />,
+      secretsDefault: {
+        "resources": []
+      },
     },
     {
       value: "App\\Feed\\RssFeedType",
       title: t("dynamic-fields.rss-feed-type.title"),
-      key: "5",
-      template: null,
+      key: "4",
+      secretsDefault: {},
     },
   ];
 
@@ -109,46 +112,28 @@ function FeedSourceManager({
     setFormStateObject({ ...initialState });
   }, [initialState]);
 
-  useEffect(() => {
-    if (formStateObject) {
-      const option = feedSourceTypeOptions.find(
-        (opt) => opt.value === formStateObject.feedType
-      );
-      if (option && option.template) {
-        setDynamicFormElement(
-          cloneElement(option.template, {
-            handleInput,
-            formStateObject,
-          })
-        );
-      } else {
-        setDynamicFormElement(null);
-      }
+  const handleSecretInput = ({target}) => {
+    const localFormStateObject = { ...formStateObject };
+    if (!localFormStateObject.secrets) {
+      localFormStateObject.secrets = {};
     }
-  }, [formStateObject]);
+    localFormStateObject.secrets[target.id] = target.value;
+    setFormStateObject(localFormStateObject);
+  };
 
-  useEffect(() => {
-    if (formStateObject?.feedType) {
-      const selectedFeedTypeSecret = feedSourceTypeOptions.find(
-        (option) => option.value === formStateObject.feedType
-      ).secrets;
-
-      if (selectedFeedTypeSecret) {
-        const secretsArray = selectedFeedTypeSecret
-          .split(",")
-          .map((prop) => prop.trim());
-
-        formStateObject.secrets = secretsArray?.reduce((acc, secret) => {
-          acc[secret] = formStateObject[secret];
-          return acc;
-        }, {});
-      }
-    }
-  }, [formStateObject, formStateObject?.feedType]);
+  const onFeedTypeChange = ({target}) => {
+    const value = target.value
+    const option = feedSourceTypeOptions.find((opt) => opt.value === value);
+    const newFormStateObject = {...formStateObject};
+    newFormStateObject.feedType = value;
+    newFormStateObject.secrets = {...option.secretsDefault};
+    setFormStateObject(newFormStateObject);
+  }
 
   /** Save feed source. */
   function saveFeedSource() {
     setLoadingMessage(t("loading-messages.saving-feed-source"));
+
     if (saveMethod === "POST") {
       postV2FeedSources({
         feedSourceFeedSourceInput: JSON.stringify(formStateObject),
@@ -205,6 +190,8 @@ function FeedSourceManager({
           handleSubmit={handleSubmit}
           isLoading={isLoading || submitting}
           loadingMessage={loadingMessage}
+          onFeedTypeChange={onFeedTypeChange}
+          handleSecretInput={handleSecretInput}
           feedSourceTypeOptions={feedSourceTypeOptions}
           dynamicFormElement={dynamicFormElement}
           mode={saveMethod}

src/components/feed-sources/feed-sources-list.jsx

@@ -45,6 +45,7 @@ function FeedSourcesList() {
     page: { get: page },
     createdBy: { get: createdBy },
   } = useContext(ListContext);
+
   const {
     data,
     error: feedSourcesGetError,
@@ -97,6 +98,7 @@ function FeedSourcesList() {
       displayError(t("error-messages.feed-source-delete-error"), isDeleteError);
     }
   }, [isDeleteError]);
+
   const handleDelete = () => {
     setIsDeleting(true);
     setLoadingMessage(t("loading-messages.deleting-feed-source"));

src/components/feed-sources/feed-source-type-templates/CalendarFeedType.template.jsx renamed to src/components/feed-sources/templates/calendar-feed-type.jsx

@@ -3,10 +3,11 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import FormInput from "../../util/forms/form-input";
 
-const CalendarFeedTypeTemplate = ({ handleInput, formStateObject, mode }) => {
+const CalendarFeedType = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {
     keyPrefix: "feed-source-manager.dynamic-fields.calendar-api-feed-type",
   });
+
   return (
     <>
       <FormInput
@@ -25,11 +26,12 @@ const CalendarFeedTypeTemplate = ({ handleInput, formStateObject, mode }) => {
   );
 };
 
-CalendarFeedTypeTemplate.propTypes = {
+CalendarFeedType.propTypes = {
   handleInput: PropTypes.func,
   formStateObject: PropTypes.shape({
     resources: PropTypes.string,
   }),
   mode: PropTypes.string,
 };
-export default CalendarFeedTypeTemplate;
+
+export default CalendarFeedType;

src/components/feed-sources/feed-source-type-templates/EventDatabaseApiFeedType.template.jsx renamed to src/components/feed-sources/templates/event-database-feed-type.jsx

@@ -21,7 +21,7 @@ const EventDatabaseApiTemplate = ({
             ? t("redacted-value-input-placeholder")
             : ""
         }
-        value={formStateObject.host}
+        value={formStateObject?.host}
       />
     </>
   );
@@ -36,4 +36,5 @@ EventDatabaseApiTemplate.propTypes = {
   }),
   mode: PropTypes.string,
 };
+
 export default EventDatabaseApiTemplate;

src/components/feed-sources/feed-source-type-templates/NotifiedFeedType.template.jsx renamed to src/components/feed-sources/templates/notified-feed-type.jsx

@@ -3,14 +3,15 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import FormInput from "../../util/forms/form-input";
 
-const NotifiedFeedTypeTemplate = ({
+const NotifiedFeedType = ({
   handleInput,
   formStateObject,
   mode,
 }) => {
   const { t } = useTranslation("common", {
     keyPrefix: "feed-source-manager.dynamic-fields.notified-feed-type",
   });
+
   return (
     <>
       <FormInput
@@ -29,11 +30,12 @@ const NotifiedFeedTypeTemplate = ({
   );
 };
 
-NotifiedFeedTypeTemplate.propTypes = {
+NotifiedFeedType.propTypes = {
   handleInput: PropTypes.func,
   formStateObject: PropTypes.shape({
     token: PropTypes.string,
   }),
   mode: PropTypes.string,
 };
-export default NotifiedFeedTypeTemplate;
+
+export default NotifiedFeedType;