WIP: Dynamic Admin Forms

.github/workflows/playwright.yaml

@@ -33,7 +33,7 @@ jobs:
 
       - name: Run playwright
         env:
-          CI: "true"
+          CI: true
         run: |
           docker compose run --rm playwright npx playwright install --with-deps
           docker compose run --rm playwright npx playwright test

CHANGELOG.md

@@ -28,6 +28,7 @@ All notable changes to this project will be documented in this file.
 - Replaced lodash functions with native ones.
 - Aligned environment variable names.
 - Aligned with v. 2.6.0.
+- Added support for component based template admin forms.
 
 ### NB! Prior to 3.x the project was split into separate repositories
 

assets/admin/components/activation-code/activation-code-activate.jsx

@@ -10,7 +10,7 @@ import {
 } from "../util/list/toast-component/display-toast";
 import LoadingComponent from "../util/loading-component/loading-component";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input.jsx";
 import ContentFooter from "../util/content-footer/content-footer";
 
 /**

assets/admin/components/activation-code/activation-code-form.jsx

@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
-import RadioButtons from "../util/forms/radio-buttons";
+import FormInput from "../../../shared/forms/form-input";
+import RadioButtons from "../../../shared/forms/radio-buttons";
 import StickyFooter from "../util/sticky-footer";
 
 /**

assets/admin/components/feed-sources/feed-source-form.jsx

@@ -3,10 +3,10 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
-import FormInputArea from "../util/forms/form-input-area";
-import FormSelect from "../util/forms/select";
+import FormInputArea from "../../../shared/forms/form-input-area";
+import FormSelect from "../../../shared/forms/select";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/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";

assets/admin/components/feed-sources/templates/brnd-feed-type.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 
 const BrndFeedType = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {

assets/admin/components/feed-sources/templates/colibo-feed-type.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert } from "react-bootstrap";
 import MultiselectFromEndpoint from "../../slide/content/multiselect-from-endpoint";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 
 const ColiboFeedType = ({
   feedSourceId,

assets/admin/components/feed-sources/templates/event-database-feed-type.jsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 
 const EventDatabaseApiTemplate = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {

assets/admin/components/feed-sources/templates/event-database-v2-feed-type.jsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 
 const EventDatabaseApiV2FeedType = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {

assets/admin/components/feed-sources/templates/notified-feed-type.jsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 
 const NotifiedFeedType = ({ handleInput, formStateObject, mode }) => {
   const { t } = useTranslation("common", {

assets/admin/components/groups/group-form.jsx

@@ -5,7 +5,7 @@ import Form from "react-bootstrap/Form";
 import LoadingComponent from "../util/loading-component/loading-component";
 import ContentBody from "../util/content-body/content-body";
 import ContentFooter from "../util/content-footer/content-footer";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input";
 
 /**
  * The group form component.

assets/admin/components/media/media-list.jsx

@@ -17,7 +17,7 @@ import {
   useGetV2MediaQuery,
   useDeleteV2MediaByIdMutation,
 } from "../../../shared/redux/enhanced-api.ts";
-import FormCheckbox from "../util/forms/form-checkbox";
+import FormCheckbox from "../../../shared/forms/form-checkbox";
 import "./media-list.scss";
 
 /**

assets/admin/components/playlist-drag-and-drop/playlist-drag-and-drop.jsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { SelectPlaylistColumns } from "../playlist/playlists-columns";
-import PlaylistsDropdown from "../util/forms/multiselect-dropdown/playlists/playlists-dropdown";
+import PlaylistsDropdown from "../util/multiselect-dropdown/playlists/playlists-dropdown";
 import DragAndDropTable from "../util/drag-and-drop-table/drag-and-drop-table";
-import FormCheckbox from "../util/forms/form-checkbox";
+import FormCheckbox from "../../../shared/forms/form-checkbox";
 import {
   useGetV2PlaylistsByIdSlidesQuery,
   useGetV2PlaylistsQuery,

assets/admin/components/playlist/playlist-campaign-form.jsx

@@ -5,15 +5,15 @@ import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpand } from "@fortawesome/free-solid-svg-icons";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
-import FormInputArea from "../util/forms/form-input-area";
+import FormInput from "../../../shared/forms/form-input";
+import FormInputArea from "../../../shared/forms/form-input-area";
 import SelectSlidesTable from "../util/multi-and-table/select-slides-table";
 import LoadingComponent from "../util/loading-component/loading-component";
 import Preview from "../preview/preview";
 import idFromUrl from "../util/helpers/id-from-url";
 import StickyFooter from "../util/sticky-footer";
 import localStorageKeys from "../util/local-storage-keys";
-import Select from "../util/forms/select";
+import Select from "../../../shared/forms/select";
 import userContext from "../../context/user-context";
 
 /**

assets/admin/components/playlist/playlist-form.jsx

@@ -5,7 +5,7 @@ import UserContext from "../../context/user-context";
 import Schedule from "../util/schedule/schedule";
 import { useGetV2TenantsQuery } from "../../../shared/redux/enhanced-api.ts";
 import ContentBody from "../util/content-body/content-body";
-import TenantsDropdown from "../util/forms/multiselect-dropdown/tenants/tenants-dropdown";
+import TenantsDropdown from "../util/multiselect-dropdown/tenants/tenants-dropdown";
 
 /**
  * The playlist form component.

assets/admin/components/playlist/playlist-gantt-chart.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import GanttChart from "../util/gantt-chart";
 import localStorageKeys from "../util/local-storage-keys";
-import FormCheckbox from "../util/forms/form-checkbox";
+import FormCheckbox from "../../../shared/forms/form-checkbox";
 
 /**
  * @param {object} props The props.

assets/admin/components/screen/screen-form.jsx

@@ -5,20 +5,20 @@ import { useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExpand } from "@fortawesome/free-solid-svg-icons";
 import ContentBody from "../util/content-body/content-body";
-import FormInput from "../util/forms/form-input";
-import FormInputArea from "../util/forms/form-input-area";
+import FormInput from "../../../shared/forms/form-input";
+import FormInputArea from "../../../shared/forms/form-input-area";
 import SelectGroupsTable from "../util/multi-and-table/select-groups-table";
 import GridGenerationAndSelect from "./util/grid-generation-and-select";
-import MultiSelectComponent from "../util/forms/multiselect-dropdown/multi-dropdown";
+import MultiSelectComponent from "../util/multiselect-dropdown/multi-dropdown";
 import idFromUrl from "../util/helpers/id-from-url";
 import {
   useGetV2LayoutsQuery,
   enhancedApi,
 } from "../../../shared/redux/enhanced-api.ts";
-import FormCheckbox from "../util/forms/form-checkbox";
+import FormCheckbox from "../../../shared/forms/form-checkbox";
 import Preview from "../preview/preview";
 import StickyFooter from "../util/sticky-footer";
-import Select from "../util/forms/select";
+import Select from "../../../shared/forms/select";
 import userContext from "../../context/user-context";
 import ScreenStatus from "./screen-status";
 import { displayError } from "../util/list/toast-component/display-toast";

assets/admin/components/screen/screen-status.jsx

@@ -16,7 +16,7 @@ import { useDispatch } from "react-redux";
 import idFromUrl from "../util/helpers/id-from-url";
 import { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
 import { displayError } from "../util/list/toast-component/display-toast";
-import FormInput from "../util/forms/form-input";
+import FormInput from "../../../shared/forms/form-input";
 import AdminConfigLoader from "../util/admin-config-loader.js";
 
 /**

assets/admin/components/screen/util/screen-gantt-chart.jsx

@@ -3,7 +3,7 @@ import { RRule } from "rrule";
 import { useTranslation } from "react-i18next";
 import GanttChart from "../../util/gantt-chart";
 import localStorageKeys from "../../util/local-storage-keys";
-import FormCheckbox from "../../util/forms/form-checkbox";
+import FormCheckbox from "../../../../shared/forms/form-checkbox";
 import UserContext from "../../../context/user-context";
 
 /**

assets/admin/components/slide/content/contacts/contact-form.jsx

@@ -1,7 +1,7 @@
 import { Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import FileSelector from "../file-selector";
-import FormInput from "../../../util/forms/form-input";
+import FormInput from "../../../../../shared/forms/form-input";
 
 /**
  * Contact form.

assets/admin/components/slide/content/content-form.jsx

@@ -1,13 +1,14 @@
-import FormCheckbox from "../../util/forms/form-checkbox";
-import FormInput from "../../util/forms/form-input";
-import Select from "../../util/forms/select";
+import FormCheckbox from "../../../../shared/forms/form-checkbox";
+import FormInput from "../../../../shared/forms/form-input";
+import Select from "../../../../shared/forms/select";
 import Contacts from "./contacts/contacts";
-import RichText from "../../util/forms/rich-text/rich-text";
-import FormTable from "../../util/forms/form-table/form-table";
+import RichText from "../../../../shared/forms/rich-text/rich-text";
+import FormTable from "../../../../shared/forms/form-table/form-table";
 import FileSelector from "./file-selector";
 import StationSelector from "./station/station-selector";
-import RadioButtons from "../../util/forms/radio-buttons";
-import CheckboxOptions from "../../util/forms/checkbox-options";
+import RadioButtons from "../../../../shared/forms/radio-buttons";
+import CheckboxOptions from "../../../../shared/forms/checkbox-options";
+import getInputFiles from "../../../../shared/utils/helper";
 
 /**
  * Render form elements for content form.
@@ -29,20 +30,6 @@ function ContentForm({
   onChange = null,
   mediaData = {},
 }) {
-  const getInputFiles = (field) => {
-    const inputFiles = [];
-
-    if (Array.isArray(field)) {
-      field.forEach((mediaId) => {
-        if (Object.prototype.hasOwnProperty.call(mediaData, mediaId)) {
-          inputFiles.push(mediaData[mediaId]);
-        }
-      });
-    }
-
-    return inputFiles;
-  };
-
   /**
    * @param {object} formData - The data for form input.
    * @returns {object | string} - Returns a rendered jsx object.
@@ -78,7 +65,7 @@ function ContentForm({
             )}
 
             <FileSelector
-              files={getInputFiles(formStateObject[formData.name])}
+              files={getInputFiles(formStateObject[formData.name], mediaData)}
               multiple={formData.multipleImages}
               onFilesChange={onFileChange}
               name={formData.name}

assets/admin/components/slide/content/feed-selector.jsx

@@ -6,7 +6,7 @@ import {
   enhancedApi,
   useGetV2FeedSourcesQuery,
 } from "../../../../shared/redux/enhanced-api.ts";
-import MultiSelectComponent from "../../util/forms/multiselect-dropdown/multi-dropdown";
+import MultiSelectComponent from "../../util/multiselect-dropdown/multi-dropdown.jsx";
 import idFromUrl from "../../util/helpers/id-from-url";
 import ContentForm from "./content-form";
 import MultiselectFromEndpoint from "./multiselect-from-endpoint";
@@ -167,7 +167,7 @@ function FeedSelector({
         onChange={configurationChange}
         name={element.name}
         formStateObject={value?.configuration ?? {}}
-        onFileChange={() => {}}
+        onFileChange={() => {}} // Todo perhaps an error instead of an empty default
       />
     );
   };

assets/admin/components/slide/content/file-dropzone.jsx

@@ -40,7 +40,7 @@ function FileDropzone({ onFilesAdded, acceptedMimetypes = null }) {
     <>
       {/* TODO: Fix styling for dropzone: https://react-dropzone.js.org/#section-styling-dropzone */}
       {/* eslint-disable react/jsx-props-no-spreading */}
-      <div {...getRootProps({ className: "dropzone drag-drop-area" })}>
+      <div {...getRootProps({ className: "dropzone drag-drop-area my-1" })}>
         <input {...getInputProps()} />
         <div>
           <span>{t("file-dropzone.drag-and-drop-text")}</span>

assets/admin/components/slide/content/file-form-element.jsx

@@ -1,6 +1,6 @@
 import { Button, Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import FormInput from "../../util/forms/form-input";
+import FormInput from "../../../../shared/forms/form-input";
 import FilePreview from "./file-preview";
 
 /**

assets/admin/components/slide/content/file-selector.jsx

@@ -107,19 +107,21 @@ function FileSelector({
       />
       {enableMediaLibrary && (
         <>
-          <Button
-            disabled={!multiple && files.length > 0}
-            variant="success"
-            onClick={() => setShowMediaModal(true)}
-          >
-            {t("file-selector.open-media-library")}
-          </Button>
-          {/*
+          <div className="d-flex align-items-center mt-2">
+            <Button
+              disabled={!multiple && files.length > 0}
+              variant="success"
+              onClick={() => setShowMediaModal(true)}
+            >
+              {t("file-selector.open-media-library")}
+            </Button>
+            {/*
               TODO: Make this configurable. It should always align with sizes in
               https://github.com/os2display/display-api-service/blob/develop/src/Entity/Tenant/Media.php
           */}
-          <div className="small mt-3">
-            {t("file-selector.max-size")}: 200 MB
+            <div className="small mt-1 mx-2">
+              {t("file-selector.max-size")}: 200 MB
+            </div>
           </div>
           <MediaSelectorModal
             selectedMedia={files}

assets/admin/components/slide/content/multiselect-from-endpoint.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import MultiSelectComponent from "../../util/forms/multiselect-dropdown/multi-dropdown";
+import MultiSelectComponent from "../../util/multiselect-dropdown/multi-dropdown";
 import localStorageKeys from "../../util/local-storage-keys";
 import { displayError } from "../../util/list/toast-component/display-toast";
 

assets/admin/components/slide/content/poster/poster-selector-v1.jsx

@@ -5,9 +5,9 @@ import AsyncSelect from "react-select/async";
 import Col from "react-bootstrap/Col";
 import dayjs from "dayjs";
 import localeDa from "dayjs/locale/da";
-import Select from "../../../util/forms/select";
-import FormInput from "../../../util/forms/form-input";
-import FormCheckbox from "../../../util/forms/form-checkbox";
+import Select from "../../../../../shared/forms/select";
+import FormInput from "../../../../../shared/forms/form-input";
+import FormCheckbox from "../../../../../shared/forms/form-checkbox";
 import localStorageKeys from "../../../util/local-storage-keys";
 
 /**

assets/admin/components/slide/content/poster/poster-single-override.jsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
-import FormInput from "../../../util/forms/form-input";
-import FormCheckbox from "../../../util/forms/form-checkbox";
+import FormInput from "../../../../../shared/forms/form-input";
+import FormCheckbox from "../../../../../shared/forms/form-checkbox";
 
 /**
  * @param {object} props The props.

assets/admin/components/slide/content/poster/poster-single-search.jsx

@@ -4,7 +4,7 @@ import Col from "react-bootstrap/Col";
 import { useTranslation } from "react-i18next";
 import { MultiSelect } from "react-multi-select-component";
 import Form from "react-bootstrap/Form";
-import FormInput from "../../../util/forms/form-input";
+import FormInput from "../../../../../shared/forms/form-input";
 import { getHeaders, loadDropdownOptionsPromise } from "./poster-helper";
 
 /**

assets/admin/components/slide/content/station/station-selector.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useContext } from "react";
 import { useTranslation } from "react-i18next";
-import MultiSelectComponent from "../../../util/forms/multiselect-dropdown/multi-dropdown";
+import MultiSelectComponent from "../../../util/multiselect-dropdown/multi-dropdown";
 import { displayError } from "../../../util/list/toast-component/display-toast";
 import userContext from "../../../../context/user-context";