Merge pull request #2 from itk-dev/feature/release-json

Added release.json generation to builds

Author: tuj

.github/workflows/docker_build_stg_images.yml

@@ -34,13 +34,20 @@ jobs:
         with:
           images: os2display/display-api-service
 
+      - name: Set release timestamp
+        run: |
+          echo "APP_RELEASE_TIMESTAMP=$(echo $(date +%s))" >> $GITHUB_ENV
+          echo "APP_RELEASE_TIME=$(echo $(date))" >> $GITHUB_ENV
+
       - name: Build and push (API)
         uses: docker/build-push-action@v6
         with:
           context: ./infrastructure/display-api-service/
           file: ./infrastructure/display-api-service/Dockerfile
           build-args: |
-            VERSION=${{ env.APP_VERSION }}
+            APP_VERSION=${{ env.APP_VERSION }}
+            APP_RELEASE_TIMESTAMP=${{ env.APP_RELEASE_TIMESTAMP }}
+            APP_RELEASE_TIME=${{ env.APP_RELEASE_TIME }}
           push: true
           tags: ${{ steps.meta-api.outputs.tags }}
           labels: ${{ steps.meta-api.outputs.labels }}

.github/workflows/github_build_release.yml

@@ -35,6 +35,16 @@ jobs:
           docker compose run --rm node npm install
           docker compose run --rm node npm run build
 
+      - name: Set release timestamp
+        run: |
+          echo "APP_RELEASE_TIMESTAMP=$(echo $(date +%s))" >> $GITHUB_ENV
+          echo "APP_RELEASE_TIME=$(echo $(date))" >> $GITHUB_ENV
+
+      - name: Create release file
+        run: |
+          printf "{\n  \"releaseTimestamp\": ${{ env.APP_RELEASE_TIMESTAMP }},\n  \"releaseTime\": \"${{ env.APP_RELEASE_TIME }}\",\n  \"releaseVersion\": \"${{ github.ref_name }}\"\n}" > public/release.json
+          cat public/release.json
+
       - name: Cleanup after install
         run: |
           sudo chown -R runner:runner .
@@ -102,6 +112,11 @@ jobs:
           tags: |
             type=raw,value=${{ github.ref_name }}
 
+      - name: Set release timestamp
+        run: |
+          echo "APP_RELEASE_TIMESTAMP=$(echo $(date +%s))" >> $GITHUB_ENV
+          echo "APP_RELEASE_TIME=$(echo $(date))" >> $GITHUB_ENV
+
       - name: Build and push Docker image (main)
         id: push-main
         uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
@@ -110,6 +125,8 @@ jobs:
           file: ./infrastructure/display-api-service/Dockerfile
           build-args: |
             APP_VERSION=${{ github.ref_name }}
+            APP_RELEASE_TIMESTAMP=${{ env.APP_RELEASE_TIMESTAMP }}
+            APP_RELEASE_TIME=${{ env.APP_RELEASE_TIME }}
           push: true
           tags: ${{ steps.meta-main.outputs.tags }}
           labels: ${{ steps.meta-main.outputs.labels }}
@@ -132,6 +149,8 @@ jobs:
           file: ./infrastructure/nginx/Dockerfile
           build-args: |
             APP_VERSION=${{ github.ref_name }}
+            APP_RELEASE_TIMESTAMP=${{ env.APP_RELEASE_TIMESTAMP }}
+            APP_RELEASE_TIME=${{ env.APP_RELEASE_TIME }}
             APP_IMAGE=${{ env.IMAGE_NAME_MAIN }}
           push: true
           pull: true

.gitignore

@@ -64,3 +64,5 @@ phpstan.neon
 ###> vincentlanglet/twig-cs-fixer ###
 /.twig-cs-fixer.cache
 ###< vincentlanglet/twig-cs-fixer ###
+
+.claude/

CHANGELOG.md

@@ -31,6 +31,10 @@ All notable changes to this project will be documented in this file.
 - Added relations checksum feature flag.
 - Fixes saving issues described in issue where saving resulted in infinite spinner.
 - Fixed loading of routes containing null string values.
+- Fixed release.json creation in v3.
+- Fixed relations checksum test.
+- Optimized release data fetching.
+- Optimized list loading.
 
 ### NB! Prior to 3.x the project was split into separate repositories
 

README.md

@@ -509,9 +509,11 @@ CLIENT_DEBUG=false
   waiting for being activated in the administration.
 
   **Default**: 20 s.
-- CLIENT_REFRESH_TOKEN_TIMEOUT: How often (milliseconds) should it be checked whether the token needs to be refreshed?
+- CLIENT_RELEASE_TIMESTAMP_INTERVAL_TIMEOUT: How often (milliseconds) should it be checked whether a new release is
+  available?
+  Value should not be lower than 5 minutes, since release.json is only fetched with a minimum of 5 minutes interval.
 
-  **Default**: 30 s.
+  **Default**: 10 m.
 - CLIENT_REFRESH_TOKEN_TIMEOUT: How often (milliseconds) should it be checked whether the token needs to be refreshed?
 
   **Default**: 60 s.

Taskfile.yml

@@ -192,7 +192,7 @@ tasks:
     desc: "Runs API tests (PHPUnit)."
     cmds:
       - task composer -- test-setup
-      - task compose -- exec --env SYMFONY_DEPRECATIONS_HELPER=disabled phpfpm composer test
+      - task compose -- exec --env SYMFONY_DEPRECATIONS_HELPER=disabled phpfpm vendor/bin/phpunit --stop-on-failure {{.CLI_ARGS}}
 
   test:frontend-built:
     desc: "Runs frontend tests (Playwright) on the built files. This temporarily stops the node container."

assets/admin/components/groups/groups-columns.jsx

@@ -1,7 +1,57 @@
 import { useTranslation } from "react-i18next";
-import ListButton from "../util/list/list-button";
 import ColumnHoc from "../util/column-hoc";
 import SelectColumnHoc from "../util/select-column-hoc";
+import useModal from "../../context/modal-context/modal-context-hook.jsx";
+import { useDispatch } from "react-redux";
+import { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
+import idFromUrl from "../util/helpers/id-from-url.jsx";
+import getAllPages from "../util/helpers/get-all-pages.js";
+import { Link } from "react-router-dom";
+import { Button } from "react-bootstrap";
+
+function ScreensButton({ group }) {
+  const { t } = useTranslation("common", { keyPrefix: "groups-columns" });
+  const { setModal } = useModal();
+  const dispatch = useDispatch();
+
+  const onClick = () => {
+    getAllPages(dispatch, enhancedApi.endpoints.getV2ScreenGroupsByIdScreens, {
+      id: idFromUrl(group.id),
+    }).then((screens) => {
+      const content = (
+        <ul>
+          {screens.map((screen) => (
+            <li key={screen["@id"]}>
+              <Link
+                to={`screen/edit/${idFromUrl(screen["@id"])}`}
+                target="_blank"
+              >
+                {screen.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      );
+
+      setModal({
+        info: true,
+        modalTitle: t("screens-modal-title"),
+        content,
+      });
+    });
+  };
+
+  return (
+    <Button
+      variant="secondary"
+      type="button"
+      onClick={onClick}
+      disabled={group.screensLength === 0}
+    >
+      {group.screensLength}
+    </Button>
+  );
+}
 
 /**
  * Columns for group lists.
@@ -18,14 +68,7 @@ function getGroupColumns({ apiCall, infoModalRedirect, infoModalTitle }) {
   const columns = [
     {
       // eslint-disable-next-line react/prop-types
-      content: ({ screens }) => (
-        <ListButton
-          redirectTo={infoModalRedirect}
-          displayData={screens}
-          modalTitle={infoModalTitle}
-          apiCall={apiCall}
-        />
-      ),
+      content: (group) => <ScreensButton group={group} />,
       key: "screens",
       label: t("screens"),
     },

assets/admin/components/playlist/playlists-columns.jsx

@@ -1,11 +1,59 @@
-import { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import ColumnHoc from "../util/column-hoc";
 import SelectColumnHoc from "../util/select-column-hoc";
-import UserContext from "../../context/user-context";
-import ListButton from "../util/list/list-button";
 import DateValue from "../util/date-value";
 import PublishingStatus from "../util/publishingStatus";
+import useModal from "../../context/modal-context/modal-context-hook.jsx";
+import { useDispatch } from "react-redux";
+import { enhancedApi } from "../../../shared/redux/enhanced-api.ts";
+import idFromUrl from "../util/helpers/id-from-url.jsx";
+import getAllPages from "../util/helpers/get-all-pages.js";
+import { Link } from "react-router-dom";
+import { Button } from "react-bootstrap";
+
+function SlidesButton({ playlist }) {
+  const { t } = useTranslation("common", { keyPrefix: "playlists-columns" });
+  const { setModal } = useModal();
+  const dispatch = useDispatch();
+
+  const onClick = () => {
+    getAllPages(dispatch, enhancedApi.endpoints.getV2PlaylistsByIdSlides, {
+      id: idFromUrl(playlist.id),
+    }).then((playlistSlides) => {
+      const content = (
+        <ul>
+          {playlistSlides.map((playlistSlide) => (
+            <li key={playlistSlide?.slide["@id"]}>
+              <Link
+                to={`slide/edit/${idFromUrl(playlistSlide?.slide["@id"])}`}
+                target="_blank"
+              >
+                {playlistSlide?.slide.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      );
+
+      setModal({
+        info: true,
+        modalTitle: t("playlist-slide-modal-title"),
+        content,
+      });
+    });
+  };
+
+  return (
+    <Button
+      variant="secondary"
+      type="button"
+      onClick={onClick}
+      disabled={playlist.slidesLength === 0}
+    >
+      {playlist.slidesLength}
+    </Button>
+  );
+}
 
 /**
  * Columns for playlists lists.
@@ -17,40 +65,16 @@ import PublishingStatus from "../util/publishingStatus";
  * @param {string} props.dataKey The data key for mapping the data.
  * @returns {object} The columns for the playlists lists.
  */
-function getPlaylistColumns({
-  apiCall,
-  infoModalRedirect,
-  infoModalTitle,
-  dataKey,
-}) {
-  const context = useContext(UserContext);
+function getPlaylistColumns() {
   const { t } = useTranslation("common", {
     keyPrefix: "playlists-columns",
   });
 
   const columns = [
     {
-      key: "slides",
+      key: "playlist",
       label: t("number-of-slides"),
-      render: ({ tenants }) => {
-        return (
-          tenants?.length === 0 ||
-          !tenants.find(
-            (tenant) =>
-              tenant.tenantKey === context.selectedTenant.get.tenantKey,
-          )
-        );
-      },
-      // eslint-disable-next-line react/prop-types
-      content: ({ slides, playlistSlides }) => (
-        <ListButton
-          apiCall={apiCall}
-          redirectTo={infoModalRedirect}
-          displayData={slides || playlistSlides}
-          modalTitle={infoModalTitle}
-          dataKey={dataKey}
-        />
-      ),
+      content: (playlist) => <SlidesButton playlist={playlist} />,
     },
     {
       key: "publishing-from",

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

@@ -11,7 +11,6 @@ import useModal from "../../context/modal-context/modal-context-hook";
 import {
   useGetV2ScreensQuery,
   useDeleteV2ScreensByIdMutation,
-  useGetV2ScreensByIdScreenGroupsQuery,
 } from "../../../shared/redux/enhanced-api.ts";
 import {
   displaySuccess,
@@ -128,10 +127,6 @@ function ScreenList() {
 
   // The columns for the table.
   const columns = ScreenColumns({
-    handleDelete,
-    apiCall: useGetV2ScreensByIdScreenGroupsQuery,
-    infoModalRedirect: "/group/edit",
-    infoModalTitle: t("info-modal.screen-in-groups"),
     displayStatus: showScreenStatus,
   });
 

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

@@ -18,6 +18,7 @@ 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 AdminConfigLoader from "../util/admin-config-loader.js";
+import ReleaseLoader from "../../../shared/release-loader.js";
 
 /**
  * Displays screen status.
@@ -92,11 +93,7 @@ function ScreenStatus({ screen, handleInput = () => {}, mode = "default" }) {
 
   useEffect(() => {
     if (status) {
-      const now = dayjs().startOf("minute").valueOf();
-
-      fetch(`/release.json?ts=${now}`)
-        .then((res) => res.json())
-        .then((data) => setClientRelease(data));
+      ReleaseLoader.loadRelease().then((data) => setClientRelease(data));
     }
   }, [status]);