Enhanced preview

CHANGELOG.md

@@ -1,4 +1,3 @@
-
 # Changelog
 
 All notable changes to this project will be documented in this file.

e2e/feed-sources.spec.js

@@ -219,7 +219,7 @@ test.describe("fest", () => {
 
   test("It loads create datakilde page", async ({ page }) => {
     page.getByText("Opret ny datakilde").click();
-    await expect(page.locator("#save_feed-source")).toBeVisible();
+    await expect(page.locator("#save")).toBeVisible();
   });
 
   test("It display error toast on save error", async ({ page }) => {
@@ -238,7 +238,7 @@ test.describe("fest", () => {
     await expect(
       page.locator(".Toastify").locator(".Toastify__toast--error")
     ).not.toBeVisible();
-    await page.locator("#save_feed-source").click();
+    await page.locator("#save").click();
     await expect(
       page.locator(".Toastify").locator(".Toastify__toast--error")
     ).toBeVisible();
@@ -253,9 +253,9 @@ test.describe("fest", () => {
   });
   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();
+    await expect(page.locator("#cancel")).toBeVisible();
+    await page.locator("#cancel").click();
+    await expect(page.locator("#cancel")).not.toBeVisible();
   });
 });
 

e2e/playlist.spec.js

@@ -59,7 +59,7 @@ test.describe("Playlist create tests", () => {
     await expect(
       page.locator(".Toastify").locator(".Toastify__toast--success")
     ).not.toBeVisible();
-    await page.locator("#save_playlist").click();
+    await page.locator("#save_slide_and_close").click();
     await expect(
       page
         .locator(".Toastify")

infrastructure/itkdev/etc/confd/templates/config.tmpl

@@ -1,6 +1,7 @@
 {
   "api": "{{ getenv "API_PATH" "/" }}",
   "touchButtonRegions": "{{ getenv "APP_TOUCH_BUTTON_REGIONS" "false"}}",
+  "previewClient": "{{ getenv "APP_PREVIEW_CLIENT" "null"}}",
   "rejseplanenApiKey": "{{ getenv "APP_REJSEPLANEN_API_KEY" "null"}}",
   "loginMethods": [
     {

infrastructure/os2display/etc/confd/templates/config.tmpl

@@ -1,6 +1,7 @@
 {
   "api": "{{ getenv "API_PATH" "/" }}",
   "touchButtonRegions": "{{ getenv "APP_TOUCH_BUTTON_REGIONS" "false"}}",
+  "previewClient": "{{ getenv "APP_PREVIEW_CLIENT" "null"}}",
   "rejseplanenApiKey": "{{ getenv "APP_REJSEPLANEN_API_KEY" "null"}}",
   "loginMethods": [
     {

public/example_config.json

@@ -1,6 +1,7 @@
 {
   "api": "/",
   "touchButtonRegions": false,
+  "previewClient": null,
   "rejseplanenApiKey": null,
   "loginMethods": [
     {

src/app.jsx

@@ -213,7 +213,7 @@ function App() {
                       <Col lg={9} xl={10}>
                         <Topbar />
                         {accessConfig && (
-                          <main className="col p-3">
+                          <main>
                             <Routes>
                               <Route path="campaign">
                                 <Route

src/components/activation-code/activation-code-activate.jsx

@@ -67,7 +67,7 @@ function ActivationCodeActivate() {
   };
 
   return (
-    <>
+    <div className="p-3">
       <LoadingComponent
         isLoading={isSaving}
         loadingMessage={t("loading-messages.saving-activation-code")}
@@ -99,7 +99,7 @@ function ActivationCodeActivate() {
           </Button>
         </ContentFooter>
       </Form>
-    </>
+    </div>
   );
 }
 

src/components/activation-code/activation-code-form.jsx

@@ -1,14 +1,14 @@
 import { React } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button } from "react-bootstrap";
+import { Button, Col, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import PropTypes from "prop-types";
 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 RadioButtons from "../util/forms/radio-buttons";
+import StickyFooter from "../util/sticky-footer";
 
 /**
  * The user form component.
@@ -48,44 +48,48 @@ function ActivationCodeForm({
     <>
       <LoadingComponent isLoading={isLoading} loadingMessage={loadingMessage} />
       <Form>
-        <h1 id="h1UserDisplayName">{headerText}</h1>
-        <ContentBody>
-          <div className="mb-2">
-            <FormInput
-              title="display-name"
-              type="text"
-              label={t("display-name-label")}
-              placeholder={t("display-name-placeholder")}
-              value={activationCode.displayName}
-              onChange={handleInput}
-              name="displayName"
-              required
-            />
-          </div>
-          <div className="mb-2">
-            <RadioButtons
-              radioGroupName="role"
-              handleChange={handleInput}
-              options={roles}
-              label={t("role-label")}
-              selected={activationCode.role}
-            />
-            <div>
-              <small>{t("role-external-user-helptext")}</small>
-            </div>
-            <div>
-              <small>{t("role-external-user-admin-helptext")}</small>
-            </div>
-          </div>
-        </ContentBody>
-        <ContentFooter>
+        <Row className="m-3">
+          <h1 id="h1UserDisplayName">{headerText}</h1>
+          <Col>
+            <ContentBody>
+              <div className="mb-2">
+                <FormInput
+                  title="display-name"
+                  type="text"
+                  label={t("display-name-label")}
+                  placeholder={t("display-name-placeholder")}
+                  value={activationCode.displayName}
+                  onChange={handleInput}
+                  name="displayName"
+                  required
+                />
+              </div>
+              <div className="mb-2">
+                <RadioButtons
+                  radioGroupName="role"
+                  handleChange={handleInput}
+                  options={roles}
+                  label={t("role-label")}
+                  selected={activationCode.role}
+                />
+                <div>
+                  <small>{t("role-external-user-helptext")}</small>
+                </div>
+                <div>
+                  <small>{t("role-external-user-admin-helptext")}</small>
+                </div>
+              </div>
+            </ContentBody>
+          </Col>
+        </Row>
+
+        <StickyFooter>
           <Button
             variant="secondary"
             type="button"
             id="cancel_user"
             onClick={() => navigate("/activation/list/")}
             className="margin-right-button"
-            size="lg"
           >
             {t("cancel-button")}
           </Button>
@@ -94,12 +98,10 @@ function ActivationCodeForm({
             type="button"
             onClick={handleSubmit}
             id="save_user"
-            size="lg"
-            className="col"
           >
             {t("save-button")}
           </Button>
-        </ContentFooter>
+        </StickyFooter>
       </Form>
     </>
   );

src/components/activation-code/activation-code-list.jsx

@@ -185,7 +185,7 @@ function ActivationCodeList() {
   }, [listData]);
 
   return (
-    <>
+    <div className="p-3">
       <ContentHeader
         title={t("header")}
         newBtnTitle={t("create-activation-codes")}
@@ -208,7 +208,7 @@ function ActivationCodeList() {
           )}
         </>
       </ContentBody>
-    </>
+    </div>
   );
 }