Refactor/omega id service [OWTR #2.1]

.gitignore

@@ -53,4 +53,6 @@ src/prisma/migrations
 
 .rest
 
-.vscode
+.vscode
+
+.claude

Dockerfile

@@ -30,6 +30,8 @@ RUN mkdir -p usr/src/app/store/images
 COPY public public
 COPY next-env.d.t[s] next.config.ts tsconfig.json ./
 
+COPY standard_store standard_store
+
 ############################################################
 FROM base AS prod
 
@@ -52,5 +54,6 @@ CMD ["npm", "run", "test"]
 FROM base AS dev
 
 ENV NODE_ENV=development
+# src is expected to be binded in dev
 
 CMD ["npm", "run", "dev-seed"]

docker-compose.dev.yml

@@ -12,6 +12,7 @@ services:
             - ${PROJECT_ROOT:-.}/logs:/usr/src/app/logs
             - devstore:/usr/src/app/store
             - dotnext:/usr/src/app/.next
+            - dobbelOmegaManifest:/usr/src/app/dobbelOmegaManifest
 
     db:
         extends:

docker-compose.prod.yml

@@ -8,6 +8,7 @@ services:
         volumes:
             - store:/usr/src/app/store
             - logs:/usr/src/app/logs
+            - dobbelOmegaManifest:/usr/src/app/dobbelOmegaManifest
         deploy:
             replicas: 2
         restart: always

docker-compose.test.yml

@@ -9,6 +9,7 @@ services:
         environment:
             DOMAIN: omega.ntnu.no
             MAIL_DOMAIN: sanctus.omega.ntnu.no
+            CI: ${CI:-}
         volumes:
             - ${PROJECT_ROOT:-.}/src:/usr/src/app/src
             - ${PROJECT_ROOT:-.}/tests:/usr/src/app/tests

jest.config.ts

@@ -12,6 +12,10 @@ const config: Config = {
     collectCoverage: true,
     collectCoverageFrom: ['src/**/*.{ts,tsx}'],
     coverageReporters: ['text-summary'],
+    // Each suite's beforeAll re-seeds all standard images through sharp/avif, which is CPU-heavy.
+    // Running many suites' seeds concurrently starves CI's limited cores and blows past the 30s
+    // beforeAll timeout in tests/setup.ts, even though a single seed() run only takes a few seconds.
+    maxWorkers: process.env.CI ? 2 : undefined,
     moduleNameMapper: {
         // This is needed becaue jest doesn't handle the this code is inside node_modules
         '^@/prisma-dobbel-omega/(.*)$': '<rootDir>/node_modules/.prisma-dobbel-omega/$1',

src/app/(auth)/layout.tsx

@@ -1,35 +1,23 @@
 import styles from './layout.module.scss'
-import { ServerSession } from '@/auth/session/ServerSession'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
-import { frontpageAuth } from '@/services/frontpage/auth'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 import React from 'react'
 
 type PropTypes = {
     children: React.ReactNode
 }
 
-export default async function AuthLayout({ children }: PropTypes) {
-    const session = await ServerSession.fromNextAuth()
-    const canEditAuthIcon = frontpageAuth.updateSpecialCmsImage.dynamicFields({}).auth(
-        session
-    ).toJsObject()
-
+export default function AuthLayout({ children }: PropTypes) {
     return (
         <div className={styles.wrapper}>
             <div className={styles.card}>
                 <div className={styles.input}>
                     {children}
                 </div>
                 <div className={styles.image}>
-                    <SpecialCmsImage
-                        canEdit={canEditAuthIcon}
-                        special="AUTH_ICON"
+                    <StandardImageServer
+                        standardImage="MAGISK_HATT"
                         alt="en kappemann sin hatt"
                         width={200}
-                        //TODO: Probably call through other service see comments in frontpage operations
-                        readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                        updateCmsImageAction={updateSpecialCmsImageFrontpage}
                     />
                 </div>
             </div>

src/app/(auth)/register/RegistrationForm.tsx

@@ -6,10 +6,10 @@ import Checkbox from '@/components/UI/Checkbox'
 import { SelectString } from '@/components/UI/Select'
 import TextInput from '@/components/UI/TextInput'
 import { sexConfig } from '@/services/users/constants'
+import { SEX, type User } from '@/prisma-generated-pn-types'
 import { signIn } from 'next-auth/react'
 import { useSearchParams } from 'next/navigation'
 import { useState } from 'react'
-import { SEX, type User } from '@/prisma-generated-pn-types'
 
 export default function RegistrationForm({
     userData,

src/app/(frontpage)/LoggedIn.tsx

@@ -5,13 +5,11 @@ import EventCard from '@/app/_components/Event/EventCard'
 import JobAd from '@/app/career/jobads/JobAd'
 import NewsCard from '@/app/news/NewsCard'
 import SocialIcons from '@/components/SocialIcons/SocialIcons'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 import { readNewsCurrentAction } from '@/services/news/actions'
 import { readActiveJobAdsAction } from '@/services/career/jobAds/actions'
 import { readCurrentEventsAction } from '@/services/events/actions'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
-import { frontpageAuth } from '@/services/frontpage/auth'
 import { eventAuth } from '@/services/events/auth'
 import { ServerSession } from '@/auth/session/ServerSession'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
@@ -28,9 +26,6 @@ export default async function LoggedInLandingPage() {
         .slice(0, MAX_NUMBER_OF_ELEMENTS)
 
     const session = await ServerSession.fromNextAuth()
-    const canEditFrontpageCmsImage = frontpageAuth.updateSpecialCmsImage.dynamicFields({}).auth(
-        session
-    ).toJsObject()
 
     const canEditEventCmsImage = eventAuth.updateCmsCoverImage.dynamicFields({}).auth(
         session
@@ -41,12 +36,9 @@ export default async function LoggedInLandingPage() {
             <div className={`${styles.part} ${styles.frontImg}`}>
                 <div className={styles.frontInfo}>
                     <div>
-                        <SpecialCmsImage
-                            canEdit={canEditFrontpageCmsImage}
-                            special="FRONTPAGE_LOGO"
+                        <StandardImageServer
+                            standardImage="LOGO_WHITE"
                             width={300}
-                            readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                            updateCmsImageAction={updateSpecialCmsImageFrontpage}
                         />
                         <div className={styles.socials}>
                             <SocialIcons />
@@ -74,7 +66,7 @@ export default async function LoggedInLandingPage() {
                             <JobAd key={key} jobAd={jobAd} />
                         ))}
                     </LoggedInSection>
-                    <LoggedInSection title="Bilder" link="/images">
+                    <LoggedInSection title="Bilder" link="/image-collections">
                         Her kan man kanskje vise noen bilder ellerno
                     </LoggedInSection>
                 </div>

src/app/(frontpage)/LoggedOut.tsx

@@ -3,9 +3,8 @@ import styles from './page.module.scss'
 import InfoBubbles from './InfoBubbles'
 import MazeMap from '@/components/MazeMap/MazeMap'
 import SocialIcons from '@/components/SocialIcons/SocialIcons'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 import YouTube from '@/components/YouTube/YouTube'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
 import { ServerSession } from '@/auth/session/ServerSession'
 import { frontpageAuth } from '@/services/frontpage/auth'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
@@ -26,12 +25,9 @@ export default async function LoggedOutLandingPage() {
             <div className={`${styles.part} ${styles.frontImg}`}>
                 <div className={styles.frontInfo}>
                     <div>
-                        <SpecialCmsImage
-                            canEdit={canEditSpecialCmsImage}
-                            special="FRONTPAGE_LOGO"
+                        <StandardImageServer
+                            standardImage="LOGO_WHITE"
                             width={300}
-                            readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                            updateCmsImageAction={updateSpecialCmsImageFrontpage}
                         />
 
                         <Link href="login">Logg inn</Link>

src/app/(frontpage)/Section.tsx

@@ -7,7 +7,6 @@ import {
     updateSpecialCmsImageFrontpage,
     updateSpecialCmsParagraphFrontpageSection
 } from '@/services/frontpage/actions'
-import React from 'react'
 import Link from 'next/link'
 import type {
     SpecialCmsImage as SpecialCmsImageT,

src/app/_components/Cms/AddParts.tsx

@@ -51,7 +51,7 @@ export default function AddParts({
                     <BorderButton
                         key={i}
                         onClick={() => onClick(part.part)}
-                        color="secondary"
+                        color="primary"
                     >
                         <FontAwesomeIcon icon={faPlus} />
                         {part.text}

src/app/_components/Cms/CmsImage/ChangeImage.tsx

@@ -2,26 +2,29 @@
 import styles from './ChangeImage.module.scss'
 import ChangeImageForm from './ChangeImageForm'
 import Image from '@/components/Image/Image'
-import { ImageSelectionContext } from '@/contexts/ImageSelection'
 import Form from '@/components/Form/Form'
 import { configureAction } from '@/services/configureAction'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTurnUp } from '@fortawesome/free-solid-svg-icons'
-import React, { useContext, useEffect, useEffectEvent, useState } from 'react'
+import React, { useEffect, useEffectEvent, useState } from 'react'
 import type { ImageSize, Image as ImageT } from '@/prisma-generated-pn-types'
 import type { UpdateCmsImageAction } from '@/cms/images/types'
 
 type PropTypes = {
-    currentImage: ImageT,
+    currentImage: ImageT | null,
+    selectedImage: ImageT | null,
     cmsImageId: number,
     currentImageSize: ImageSize,
     updateCmsImageAction: UpdateCmsImageAction
 }
 
-export default function ChangeImage({ currentImage, cmsImageId, currentImageSize, updateCmsImageAction }: PropTypes) {
-    const selectedContext = useContext(ImageSelectionContext)
-    if (!selectedContext) throw new Error('ImageSelectionContext required to use ChangeImage')
-
+export default function ChangeImage({
+    currentImage,
+    selectedImage,
+    cmsImageId,
+    currentImageSize,
+    updateCmsImageAction,
+}: PropTypes) {
     //What is the next option in quality. The image always cycles up.
     const [changeToSize, setChangeToSize] = useState<ImageSize>(currentImageSize)
 
@@ -46,47 +49,64 @@
         handleChangeSize()
     }, [currentImageSize])
 
+    // A selection only counts as "new" if it differs from the current image - or there is no
+    // current image yet, in which case this is the user's first choice for this slot.
+    const hasNewSelection = selectedImage !== null && selectedImage.id !== currentImage?.id
+    const displayImage = selectedImage ?? currentImage
+
+    const renderSubmitControls = () => {
+        if (hasNewSelection && selectedImage) {
+            return (
+                <ChangeImageForm
+                    cmsImageId={cmsImageId}
+                    selectedImage={selectedImage}
+                    updateCmsImageAction={updateCmsImageAction}
+                />
+            )
+        }
+        if (!currentImage) {
+            return <p>Velg et bilde for å legge det til</p>
+        }
+        return (
+            <div className={styles.resolution}>
+                <p>Resolution: {currentImageSize.toLowerCase()}</p>
+                <Form
+                    action={
+                        configureAction(
+                            updateCmsImageAction,
+                            { params: { cmsImageId } }
+                        ).bind(null, { data: { imageSize: changeToSize } })
+                    }
+                    submitText={`change to ${changeToSize.toLocaleLowerCase()}`}
+                    refreshOnSuccess
+                    submitColor="primary"
+                />
+            </div>
+        )
+    }
+
     return (
         <div className={styles.ChangeImage}>
             {
-                selectedContext.selectedImage && selectedContext.selectedImage.id !== currentImage.id ? (
+                currentImage && selectedImage && hasNewSelection ? (
                     <div className={styles.currentAndSelected}>
                         <div className={styles.imageClip}>
                             <Image width={200} image={currentImage} />
                         </div>
                         <div className={styles.imageClip}>
-                            <Image width={200} image={selectedContext.selectedImage} />
+                            <Image width={200} image={selectedImage} />
                         </div>
                         <FontAwesomeIcon className={styles.arrow1} icon={faTurnUp} />
                         <FontAwesomeIcon className={styles.arrow2} icon={faTurnUp} />
                     </div>
                 ) : (
                     <div className={`${styles.onlyCurrent} ${styles.imageClip}`}>
-                        <Image width={200} image={currentImage} />
-                    </div>
-                )
-            }
-            <i>image name: {currentImage.name}</i>
-            {
-                selectedContext.selectedImage && selectedContext.selectedImage.id !== currentImage.id ? (
-                    <ChangeImageForm cmsImageId={cmsImageId} updateCmsImageAction={updateCmsImageAction} />
-                ) : (
-                    <div className={styles.resolution}>
-                        <p>Resolution: {currentImageSize.toLowerCase()}</p>
-                        <Form
-                            action={
-                                configureAction(
-                                    updateCmsImageAction,
-                                    { params: { cmsImageId } }
-                                ).bind(null, { data: { imageSize: changeToSize } })
-                            }
-                            submitText={`change to ${changeToSize.toLocaleLowerCase()}`}
-                            refreshOnSuccess
-                            submitColor="primary"
-                        />
+                        {displayImage ? <Image width={200} image={displayImage} /> : <p>Ingen bilde valgt enda</p>}
                     </div>
                 )
             }
+            <i>{displayImage ? `image name: ${displayImage.name}` : 'ingen bilde valgt enda'}</i>
+            {renderSubmitControls()}
         </div>
     )
 }

src/app/_components/Cms/CmsImage/ChangeImageForm.tsx

@@ -1,21 +1,17 @@
 'use client'
 import Form from '@/components/Form/Form'
-import { ImageSelectionContext } from '@/contexts/ImageSelection'
 import { configureAction } from '@/services/configureAction'
-import { useContext } from 'react'
+import type { Image as ImageT } from '@/prisma-generated-pn-types'
 import type { UpdateCmsImageAction } from '@/cms/images/types'
 
 type PropTypes = {
     cmsImageId: number
+    selectedImage: ImageT
     className?: string
     updateCmsImageAction: UpdateCmsImageAction
 }
 
-export default function ChangeImageForm({ cmsImageId, className, updateCmsImageAction }: PropTypes) {
-    const selection = useContext(ImageSelectionContext)
-
-    if (!selection?.selectedImage) throw new Error('ImageSelectionContext required to use ChangeImage')
-
+export default function ChangeImageForm({ cmsImageId, selectedImage, className, updateCmsImageAction }: PropTypes) {
     return (
         <Form
             className={className}
@@ -24,7 +20,7 @@ export default function ChangeImageForm({ cmsImageId, className, updateCmsImageA
                 configureAction(
                     updateCmsImageAction,
                     { params: { cmsImageId } }
-                ).bind(null, { data: { imageId: selection?.selectedImage?.id } })
+                ).bind(null, { data: { imageId: selectedImage.id } })
             }
             submitText="change"
             refreshOnSuccess