feat(cms): implement file area block and seed a dedicated page

closed COD-292

Author: hakalb

.vscode/settings.json

@@ -17,6 +17,7 @@
     "runAllTestsOnStartup": false,
     "type": "on-save"
   },
+  "nxConsole.generateAiAgentRules": true,
   "vitest.filesWatcherInclude": "apps/**,libs/**,packages/**",
   "[json]": {
     "editor.codeActionsOnSave": {

apps/cms/.env.local

@@ -38,12 +38,12 @@ SENDGRID_FROM_NAME=
 # Ethereal email credentials (provide all details to enable)
 # Create an account at https://ethereal.email/create
 # Read your email at https://ethereal.email/messages
-ETHEREAL_FROM_ADDRESS=
-ETHEREAL_FROM_NAME=
+ETHEREAL_FROM_ADDRESS=info@ethereal.email
+ETHEREAL_FROM_NAME=Codeware Ethereal
 ETHEREAL_HOST=smtp.ethereal.email
 ETHEREAL_PORT=587
-ETHEREAL_USERNAME=
-ETHEREAL_PASSWORD=
+ETHEREAL_USERNAME=nestor.jones@ethereal.email
+ETHEREAL_PASSWORD=1TgEpNJqdeeKpuQFF7
 
 # Set to true to prevent database sync and behave as if it's production.
 # This is required when serving the app after running migrations locally.

apps/cms/src/collections/categories/categories.collection.ts

@@ -14,7 +14,7 @@ const categories: CollectionConfig = {
   slug: 'categories',
   admin: {
     group: adminGroups.content,
-    defaultColumns: ['name', 'slug', 'tenant'],
+    defaultColumns: ['name', 'slug'],
     useAsTitle: 'name'
   },
   access: {

apps/cms/src/collections/media/access/external-or-api-key-access.ts

@@ -0,0 +1,73 @@
+import type { Access, Where } from 'payload';
+
+import { verifyApiKeyAccess } from '@codeware/app-cms/util/access';
+import type { Media } from '@codeware/shared/util/payload-types';
+
+/**
+ * This access control ensures unauthenticated static file request
+ * must have external property enabled.
+ *
+ * For all other requests, api key access is verified via `verifyApiKeyAccess`,
+ * which is required for all tenant enabled collections.
+ *
+ * @param secret - The secret used to verify the api key
+ */
+export const externalOrApiKeyAccess =
+  (secret: string): Access<Media> =>
+  async (args) => {
+    const { data, isReadingStaticFile, req } = args;
+    const { payload, user } = req;
+
+    // If the request is for a static file and no user is authenticated,
+    // lookup the document via filename and check if external is enabled.
+    if (isReadingStaticFile && !user) {
+      const filename = data?.filename;
+      if (!filename) {
+        payload.logger.error(
+          'externalOrApiKeyAccess: Expected a filename value in data'
+        );
+        return false;
+      }
+      const { config } = payload.collections.media;
+
+      // File name can be the main name or one of the image sizes
+      // e.g. filename: 'image.jpg', sizes: { small: { filename: 'image-small.jpg' } }
+      const filenamesQuery: Array<Where> = [];
+
+      // Main filename
+      filenamesQuery.push({
+        filename: {
+          equals: filename
+        }
+      });
+
+      // Image sizes filenames
+      if (config.upload.imageSizes) {
+        config.upload.imageSizes.forEach(({ name }) => {
+          filenamesQuery.push({
+            [`sizes.${name}.filename`]: {
+              equals: filename
+            }
+          });
+        });
+      }
+
+      const doc = await payload.find({
+        collection: 'media',
+        limit: 1,
+        depth: 0,
+        where: { or: filenamesQuery },
+        req
+      });
+
+      if (!doc.totalDocs) {
+        return false;
+      }
+
+      // Allow access if the file is marked external
+      return doc.docs[0].external === true;
+    }
+
+    // Default: Resolve api key access for tenant enabled collection
+    return verifyApiKeyAccess({ secret })(args);
+  };

apps/cms/src/collections/media/media.collection.ts

@@ -1,43 +1,79 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
 
-import type { CollectionConfig, GenerateImageName } from 'payload';
+import mimeTypes from 'mime-types';
+import type {
+  CollectionBeforeValidateHook,
+  CollectionConfig,
+  Condition,
+  GenerateImageName,
+  TypeWithID
+} from 'payload';
 
-import { adminGroups } from '@codeware/app-cms/util/definitions';
+import { getEnv } from '@codeware/app-cms/feature/env-loader';
+import { tagsSelectField } from '@codeware/app-cms/ui/fields';
+import { adminGroups, getMimeTypes } from '@codeware/app-cms/util/definitions';
+import { Media } from '@codeware/shared/util/payload-types';
+
+import { externalOrApiKeyAccess } from './access/external-or-api-key-access';
 
 const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);
+const env = getEnv();
 
 /** Custom image name */
 const imageName: GenerateImageName = ({ extension, originalName, sizeName }) =>
   `${originalName}-${sizeName}.${extension}`;
 
+const isImageOrVideo: Condition<TypeWithID, Media> = (_, siblingData) =>
+  !!siblingData.mimeType && siblingData.mimeType.match(/image|video/) !== null;
+
+// Extracting mime type during seed has a flaky bewhavior.
+// The mime type is not always available when the file is uploaded.
+const ensureMimeType: CollectionBeforeValidateHook<Media> = ({
+  data,
+  operation
+}) => {
+  if (!data) {
+    return data;
+  }
+  if (data.mimeType) {
+    return data;
+  }
+  if (operation === 'create' || operation === 'update') {
+    // Try to lookup the mime type from the filename
+    data.mimeType = mimeTypes.lookup(data.filename ?? '') || undefined;
+  }
+  return data;
+};
+
 /**
- * Media images collection.
+ * Media collection for files with supported mime types.
  *
- * Upload limited to `image/*` mime types and images are converted to webp format.
+ * Uploaded images are converted to webp format.
+ *
+ * **Mime types**
+ *
+ * `@codeware/app-cms/util/definitions`
  */
 const media: CollectionConfig = {
   slug: 'media',
   admin: {
     group: adminGroups.fileArea,
-    defaultColumns: ['filename', 'alt', 'tenant', 'updatedAt'],
-    description: {
-      en: 'Media images to use in posts and pages.',
-      sv: 'Bilder som kan användas i inlägg och sidor.'
-    }
+    defaultColumns: ['filename', 'mimeType', 'fileSize', 'tags', 'createdAt']
   },
   access: {
-    // Media files like images are not fetched, hence no api key to verify.
-    // For admin access, the plugin appends proper permission filters.
-    read: () => true
+    read: externalOrApiKeyAccess(env.SIGNATURE_SECRET)
+  },
+  hooks: {
+    beforeValidate: [ensureMimeType]
   },
   labels: {
     singular: { en: 'Media', sv: 'Media' },
     plural: { en: 'Media', sv: 'Media' }
   },
   upload: {
-    mimeTypes: ['image/*'],
+    mimeTypes: getMimeTypes(),
     // Uploaded image is converted to a backward compatible format known by all browsers.
     // This image should be used as the default image in a `<picture />` element.
     formatOptions: { format: 'jpeg' },
@@ -102,28 +138,35 @@ const media: CollectionConfig = {
       type: 'richText',
       localized: true,
       admin: {
+        condition: isImageOrVideo,
         description: {
-          en: 'The caption for the media.',
-          sv: 'Bildtext för media.'
+          en: 'Caption to display below an image or video.',
+          sv: 'Text som visas under en bild eller video.'
         }
       }
     },
+    tagsSelectField({
+      buildIndex: true,
+      overrides: {
+        // TODO: Would like to use 'drawer' but it doesn't work with bulk upload media.
+        // Better to be safe and wait for a fix.
+        admin: { appearance: 'select' }
+      }
+    }),
     {
-      type: 'tabs',
-      tabs: [
-        {
-          label: { en: 'Posts', sv: 'Inlägg' },
-          fields: [
-            {
-              name: 'relatedPosts',
-              label: { en: 'Posts', sv: 'Inlägg' },
-              type: 'join',
-              collection: 'posts',
-              on: 'heroImage'
-            }
-          ]
-        }
-      ]
+      // Media files are not fetched, hence there's no api key to verify.
+      // This property will be used as alternative access control for static file requests.
+      name: 'external',
+      type: 'checkbox',
+      label: { en: 'External access', sv: 'Extern åtkomst' },
+      admin: {
+        description: {
+          en: 'Allow external access to the file without authentication. For example, this is required for file areas and document images.',
+          sv: 'Tillåt extern åtkomst till filen utan autentisering. Detta krävs till exempel för filytor och bilder i dokument.'
+        },
+        position: 'sidebar'
+      },
+      defaultValue: false
     }
   ]
 };

apps/cms/src/collections/pages/pages.collection.ts

@@ -18,12 +18,16 @@ const env = getEnv();
 const blocks: Record<BlockSlug, boolean> = {
   content: true,
   card: true,
+  'file-area': true,
   form: true,
+  image: true,
   media: true,
   code: true,
   'reusable-content': true,
   'social-media': true,
-  spacing: true
+  spacing: true,
+  // Unsupported blocks
+  video: false
 };
 
 /**
@@ -33,7 +37,7 @@ const pages: CollectionConfig<'pages'> = {
   slug: 'pages',
   admin: {
     group: adminGroups.content,
-    defaultColumns: ['name', 'slug', 'tenant', 'updatedAt'],
+    defaultColumns: ['name', 'slug', 'updatedAt'],
     useAsTitle: 'name',
     description: {
       en: 'Pages are the building blocks of the site and are used to create menus and navigation.',

apps/cms/src/collections/posts/posts.collection.ts

@@ -3,7 +3,7 @@ import { BlocksFeature } from '@payloadcms/richtext-lexical';
 import type { CollectionConfig } from 'payload';
 
 import { getEnv } from '@codeware/app-cms/feature/env-loader';
-import { slugField } from '@codeware/app-cms/ui/fields';
+import { mediaUploadField, slugField } from '@codeware/app-cms/ui/fields';
 import { multiTenantLinkFeature } from '@codeware/app-cms/ui/lexical';
 import { seoTab } from '@codeware/app-cms/ui/tabs';
 import { verifyApiKeyAccess } from '@codeware/app-cms/util/access';
@@ -24,12 +24,15 @@ const blocks: Record<BlockSlug, boolean> = {
   card: true,
   media: true,
   code: true,
+  image: true,
   'social-media': true,
   spacing: true,
   // Unsupported blocks
+  'file-area': false,
   form: false,
   content: false,
-  'reusable-content': false
+  'reusable-content': false,
+  video: false
 };
 
 /**
@@ -39,7 +42,7 @@ const posts: CollectionConfig<'posts'> = {
   slug: 'posts',
   admin: {
     group: adminGroups.content,
-    defaultColumns: ['title', 'tenant', 'updatedAt'],
+    defaultColumns: ['title', 'updatedAt'],
     useAsTitle: 'title',
     description: {
       en: 'Posts are standalone pages such as articles or blog posts and can be categorized.',
@@ -73,11 +76,10 @@ const posts: CollectionConfig<'posts'> = {
         {
           label: { en: 'Content', sv: 'Innehåll' },
           fields: [
-            {
+            mediaUploadField({
               name: 'heroImage',
-              type: 'upload',
-              relationTo: 'media'
-            },
+              mimeTypeSlugs: ['image']
+            }),
             {
               name: 'content',
               type: 'richText',

apps/cms/src/collections/reusable-content/reusable-content.collection.ts

@@ -16,11 +16,14 @@ const blocks: Record<BlockSlug, boolean> = {
   card: true,
   code: true,
   content: true,
+  'file-area': true,
   form: true,
+  image: true,
   media: true,
   'social-media': true,
   spacing: true,
-  'reusable-content': false
+  'reusable-content': false,
+  video: false
 };
 
 /**