From fa107ff809f190839161271b2745a333923cb2e0 Mon Sep 17 00:00:00 2001
From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com>
Date: Wed, 18 Dec 2024 10:02:32 +0100
Subject: [PATCH] 3208: Added colibo feed type

---
 .../feed-sources/feed-source-form.jsx         |  61 +++++++---
 .../feed-sources/feed-source-manager.jsx      |  33 ++++--
 .../templates/colibo-feed-type.jsx            | 107 ++++++++++++++++++
 src/components/slide/content/content-form.jsx |   2 +-
 .../slide/content/feed-selector.jsx           |   3 +-
 src/translations/da/common.json               |  18 ++-
 6 files changed, 196 insertions(+), 28 deletions(-)
 create mode 100644 src/components/feed-sources/templates/colibo-feed-type.jsx

diff --git a/src/components/feed-sources/feed-source-form.jsx b/src/components/feed-sources/feed-source-form.jsx
index 2cce65ae..10414974 100644
--- a/src/components/feed-sources/feed-source-form.jsx
+++ b/src/components/feed-sources/feed-source-form.jsx
@@ -1,5 +1,5 @@
 import { React } from "react";
-import { Button } from "react-bootstrap";
+import { Alert, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
@@ -13,6 +13,7 @@ import FormInput from "../util/forms/form-input";
 import CalendarApiFeedType from "./templates/calendar-api-feed-type";
 import NotifiedFeedType from "./templates/notified-feed-type";
 import EventDatabaseApiFeedType from "./templates/event-database-feed-type";
+import ColiboFeedType from "./templates/colibo-feed-type.jsx";
 
 /**
  * The feed-source form component.
@@ -47,6 +48,10 @@ function FeedSourceForm({
   const { t } = useTranslation("common", { keyPrefix: "feed-source-form" });
   const navigate = useNavigate();
 
+  const typeInOptions =
+    !feedSource?.feedType ||
+    feedSourceTypeOptions.find((el) => el.value === feedSource.feedType);
+
   return (
     <>
       <Form>
@@ -72,17 +77,36 @@ function FeedSourceForm({
             value={feedSource.description}
             onChange={handleInput}
           />
-          <FormSelect
-            name="feedType"
-            formGroupClasses="mb-2"
-            label={t("feed-source-feed-type-label")}
-            value={feedSource.feedType}
-            onChange={onFeedTypeChange}
-            disabled={mode === "PUT"}
-            options={feedSourceTypeOptions}
-          />
+          {typeInOptions && (
+            <FormSelect
+              name="feedType"
+              formGroupClasses="mb-2"
+              label={t("feed-source-feed-type-label")}
+              value={feedSource.feedType}
+              onChange={onFeedTypeChange}
+              disabled={mode === "PUT"}
+              options={feedSourceTypeOptions}
+            />
+          )}
+          {!typeInOptions && (
+            <>
+              <FormInput
+                name="title"
+                formGroupClasses="mb-2"
+                type="text"
+                disabled
+                label={t("feed-source-feed-type-label")}
+                value={feedSource.feedType}
+                onChange={() => {}}
+              />
+              <Alert className="mt-4" variant="warning">
+                {t("feed-type-not-supported")}
+              </Alert>
+            </>
+          )}
 
-          {feedSource?.feedType === "App\\Feed\\CalendarApiFeedType" && (
+          {feedSource?.feedType ===
+            "App\\Feed\\SourceType\\Calendar\\CalendarApiFeedType" && (
             <CalendarApiFeedType
               handleInput={handleSecretInput}
               formStateObject={feedSource.secrets}
@@ -90,14 +114,25 @@ function FeedSourceForm({
               feedSourceId={feedSource["@id"]}
             />
           )}
-          {feedSource?.feedType === "App\\Feed\\EventDatabaseApiFeedType" && (
+          {feedSource?.feedType ===
+            "App\\Feed\\SourceType\\Colibo\\ColiboFeedType" && (
+            <ColiboFeedType
+              handleInput={handleSecretInput}
+              formStateObject={feedSource.secrets}
+              mode={mode}
+              feedSourceId={feedSource["@id"]}
+            />
+          )}
+          {feedSource?.feedType ===
+            "App\\Feed\\SourceType\\EventDatabase\\EventDatabaseApiFeedType" && (
             <EventDatabaseApiFeedType
               handleInput={handleSecretInput}
               formStateObject={feedSource.secrets}
               mode={mode}
             />
           )}
-          {feedSource?.feedType === "App\\Feed\\NotifiedFeedType" && (
+          {feedSource?.feedType ===
+            "App\\Feed\\SourceType\\Notified\\NotifiedFeedType" && (
             <NotifiedFeedType
               handleInput={handleSecretInput}
               formStateObject={feedSource.secrets}
diff --git a/src/components/feed-sources/feed-source-manager.jsx b/src/components/feed-sources/feed-source-manager.jsx
index 04fb2d9b..51f63102 100644
--- a/src/components/feed-sources/feed-source-manager.jsx
+++ b/src/components/feed-sources/feed-source-manager.jsx
@@ -60,7 +60,26 @@ function FeedSourceManager({
 
   const feedSourceTypeOptions = [
     {
-      value: "App\\Feed\\EventDatabaseApiFeedType",
+      value: "App\\Feed\\SourceType\\Calendar\\CalendarApiFeedType",
+      title: t("dynamic-fields.calendar-api-feed-type.title"),
+      key: "0",
+      secretsDefault: {
+        locations: [],
+      },
+    },
+    {
+      value: "App\\Feed\\SourceType\\Colibo\\ColiboFeedType",
+      title: t("colibo-feed-type.title"),
+      key: "5",
+      secretsDefault: {
+        api_base_uri: "",
+        client_id: "",
+        client_secret: "",
+        recipients: [],
+      },
+    },
+    {
+      value: "App\\Feed\\SourceType\\EventDatabase\\EventDatabaseApiFeedType",
       title: t("dynamic-fields.event-database-api-feed-type.title"),
       key: "1",
       secretsDefault: {
@@ -68,7 +87,7 @@ function FeedSourceManager({
       },
     },
     {
-      value: "App\\Feed\\NotifiedFeedType",
+      value: "App\\Feed\\SourceType\\Notified\\NotifiedFeedType",
       title: t("dynamic-fields.notified-feed-type.title"),
       key: "2",
       secretsDefault: {
@@ -76,15 +95,7 @@ function FeedSourceManager({
       },
     },
     {
-      value: "App\\Feed\\CalendarApiFeedType",
-      title: t("dynamic-fields.calendar-api-feed-type.title"),
-      key: "0",
-      secretsDefault: {
-        locations: [],
-      },
-    },
-    {
-      value: "App\\Feed\\RssFeedType",
+      value: "App\\Feed\\SourceType\\Rss\\RssFeedType",
       title: t("dynamic-fields.rss-feed-type.title"),
       key: "4",
       secretsDefault: {},
diff --git a/src/components/feed-sources/templates/colibo-feed-type.jsx b/src/components/feed-sources/templates/colibo-feed-type.jsx
new file mode 100644
index 00000000..aec9f1c2
--- /dev/null
+++ b/src/components/feed-sources/templates/colibo-feed-type.jsx
@@ -0,0 +1,107 @@
+import { React, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Alert } from "react-bootstrap";
+import MultiselectFromEndpoint from "../../slide/content/multiselect-from-endpoint";
+import ConfigLoader from "../../../config-loader";
+import FormInput from "../../util/forms/form-input.jsx";
+
+const ColiboFeedType = ({
+  feedSourceId,
+  handleInput,
+  formStateObject,
+  mode,
+}) => {
+  const { t } = useTranslation("common", {
+    keyPrefix: "colibo-feed-type",
+  });
+
+  const [optionsEndpoint, setOptionsEndpoint] = useState(null);
+
+  useEffect(() => {
+    if (feedSourceId && feedSourceId !== "") {
+      ConfigLoader.loadConfig().then((config) => {
+        let endpoint = config.api;
+        endpoint = endpoint.replace(/\/$/, "");
+        endpoint += feedSourceId;
+        endpoint += "/config/FeedEntryRecipients";
+
+        setOptionsEndpoint(endpoint);
+      });
+    }
+  }, [feedSourceId]);
+
+  return (
+    <>
+      {!feedSourceId && (
+        <Alert className="mt-4" variant="warning">
+          {t("save-before-recipients-can-be-set")}
+        </Alert>
+      )}
+
+      <FormInput
+        name="api_base_uri"
+        type="text"
+        label={t("api-base-uri")}
+        className="mb-2"
+        onChange={handleInput}
+        placeholder={
+          mode === "PUT" ? t("redacted-value-input-placeholder") : ""
+        }
+        value={formStateObject?.api_base_uri}
+      />
+
+      <FormInput
+        name="client_id"
+        type="text"
+        className="mb-2"
+        label={t("client-id")}
+        onChange={handleInput}
+        placeholder={
+          mode === "PUT" ? t("redacted-value-input-placeholder") : ""
+        }
+        value={formStateObject?.client_id}
+      />
+
+      <FormInput
+        name="client_secret"
+        type="text"
+        label={t("client-secret")}
+        onChange={handleInput}
+        placeholder={
+          mode === "PUT" ? t("redacted-value-input-placeholder") : ""
+        }
+        value={formStateObject?.client_secret}
+      />
+
+      <Alert className="mt-4" variant="info">
+        {t("values-info")}
+      </Alert>
+
+      {optionsEndpoint && (
+        <MultiselectFromEndpoint
+          onChange={handleInput}
+          name="recipients"
+          disableSearch={false}
+          label={t("recipients")}
+          value={formStateObject.recipients ?? []}
+          optionsEndpoint={optionsEndpoint}
+        />
+      )}
+    </>
+  );
+};
+
+ColiboFeedType.propTypes = {
+  handleInput: PropTypes.func,
+  formStateObject: PropTypes.shape({
+    api_base_uri: PropTypes.string,
+    client_id: PropTypes.string,
+    client_secret: PropTypes.string,
+    recipients: PropTypes.arrayOf(PropTypes.string),
+  }),
+  feedSourceId: PropTypes.string,
+  mode: PropTypes.string,
+};
+
+export default ColiboFeedType;
diff --git a/src/components/slide/content/content-form.jsx b/src/components/slide/content/content-form.jsx
index 254e2051..435c1f9e 100644
--- a/src/components/slide/content/content-form.jsx
+++ b/src/components/slide/content/content-form.jsx
@@ -72,7 +72,7 @@ function ContentForm({
         }
 
         returnElement = (
-          <div key={formData.key}>
+          <div key={formData.key} className={formData.formGroupClasses}>
             {formData?.label && (
               <label htmlFor={formData.name} className="form-label">
                 {formData.label}
diff --git a/src/components/slide/content/feed-selector.jsx b/src/components/slide/content/feed-selector.jsx
index 897fbddf..f20f1b7a 100644
--- a/src/components/slide/content/feed-selector.jsx
+++ b/src/components/slide/content/feed-selector.jsx
@@ -123,7 +123,8 @@ function FeedSelector({
           value={getValueFromConfiguration(element.name)}
           label={element.label}
           optionsEndpoint={element.endpoint}
-          singleSelect={formElement.singleSelect ?? false}
+          disableSearch={element.disableSearch ?? false}
+          singleSelect={element.singleSelect ?? false}
         />
       );
     }
diff --git a/src/translations/da/common.json b/src/translations/da/common.json
index 4bc6340d..d0c2fc27 100644
--- a/src/translations/da/common.json
+++ b/src/translations/da/common.json
@@ -261,6 +261,9 @@
       "save-feed-source-error": "Der skete en fejl da feed source skulle gemmes:",
       "load-feed-source-error": "Der skete en fejl da feed source med følgende id: {{id}} skulle hentes:"
     },
+    "colibo-feed-type": {
+      "title": "Colibo"
+    },
     "dynamic-fields": {
       "event-database-api-feed-type": {
         "title": "Eventdatabase API",
@@ -273,13 +276,13 @@
         "redacted-value-input-placeholder": "Skjult værdi"
       },
       "calendar-api-feed-type": {
-        "title": "Kalender feed",
+        "title": "Kalender",
         "locations": "Lokationer",
         "redacted-value-input-placeholder": "Skjult værdi",
         "save-before-locations-can-be-set": "Bemærk! Datakilden skal gemmes før der kan tilkobles lokationer. Gem og åbn datakilden igen."
       },
       "rss-feed-type": {
-        "title": "RSS feed"
+        "title": "RSS"
       }
     }
   },
@@ -287,6 +290,7 @@
     "feed-source-name-label": "Navn",
     "feed-source-description-label": "Beskrivelse",
     "feed-source-feed-type-label": "Type",
+    "feed-type-not-supported": "Typen understøttes ikke af administrationen.",
     "save-button": "Gem datakilde",
     "cancel-button": "Annuller"
   },
@@ -1075,5 +1079,15 @@
     "active": "Aktiv",
     "future": "Fremtidig",
     "expired": "Udløbet"
+  },
+  "colibo-feed-type": {
+    "title": "Colibo feed",
+    "api-base-uri": "API Base URI",
+    "client-id": "Client ID",
+    "client-secret": "Client Secret",
+    "values-info": "Værdierne Client ID og Client Secret findes ved at oprette en API klient i \"Systemadministration\" -> \"API adgangshåndtering\" i Colibo intranet.",
+    "recipients": "Modtagergrupper",
+    "redacted-value-input-placeholder": "Skjult værdi",
+    "save-before-recipients-can-be-set": "Bemærk! Datakilden skal gemmes før der kan tilkobles modtagergrupper. Gem og åbn datakilden igen."
   }
 }