feat: allow per-file preview_path in file collection (#4413)

packages/netlify-cms-core/src/constants/configSchema.js

@@ -187,6 +187,8 @@ const getConfigSchema = () => ({
                 label_singular: { type: 'string' },
                 description: { type: 'string' },
                 file: { type: 'string' },
+                preview_path: { type: 'string' },
+                preview_path_date_field: { type: 'string' },
                 fields: fieldsConfig(),
               },
               required: ['name', 'label', 'file', 'fields'],

packages/netlify-cms-core/src/lib/__tests__/formatters.spec.js

@@ -1,4 +1,4 @@
-import { Map, fromJS } from 'immutable';
+import { List, Map, fromJS } from 'immutable';
 import {
   commitMessageFormatter,
   prepareSlug,
@@ -369,6 +369,68 @@ describe('formatters', () => {
       ).toBe('https://www.example.com/2020/backendslug/title/entryslug');
     });
 
+    it('should return preview url for files in file collection', () => {
+      const file = Map({ name: 'about-file', preview_path: '{{slug}}/{{fields.slug}}/{{title}}' });
+
+      const { getFileFromSlug } = require('../../reducers/collections');
+      getFileFromSlug.mockReturnValue(file);
+
+      expect(
+        previewUrlFormatter(
+          'https://www.example.com',
+          Map({
+            preview_path: '{{slug}}/{{title}}/{{fields.slug}}',
+            type: 'file_based_collection',
+            files: List([file]),
+          }),
+          'backendSlug',
+          slugConfig,
+          Map({ data: Map({ slug: 'about-the-project', title: 'title' }), slug: 'about-file' }),
+        ),
+      ).toBe('https://www.example.com/backendslug/about-the-project/title');
+    });
+
+    it('should return preview url for files in file collection when defined on file-level only', () => {
+      const file = Map({ name: 'about-file', preview_path: '{{slug}}/{{fields.slug}}/{{title}}' });
+
+      const { getFileFromSlug } = require('../../reducers/collections');
+      getFileFromSlug.mockReturnValue(file);
+
+      expect(
+        previewUrlFormatter(
+          'https://www.example.com',
+          Map({
+            type: 'file_based_collection',
+            files: List([file]),
+          }),
+          'backendSlug',
+          slugConfig,
+          Map({ data: Map({ slug: 'about-the-project', title: 'title' }), slug: 'about-file' }),
+        ),
+      ).toBe('https://www.example.com/backendslug/about-the-project/title');
+    });
+
+    it('should fall back to collection preview url for files in file collection', () => {
+      const file = Map({ name: 'about-file' });
+
+      const { getFileFromSlug } = require('../../reducers/collections');
+      getFileFromSlug.mockReturnValue(file);
+
+      expect(
+        previewUrlFormatter(
+          'https://www.example.com',
+          Map({
+            preview_path: '{{slug}}/{{title}}/{{fields.slug}}',
+            type: 'file_based_collection',
+            files: List([file]),
+          }),
+          'backendSlug',
+          slugConfig,
+          Map({ data: Map({ slug: 'about-the-project', title: 'title' }), slug: 'about-file' }),
+        ),
+      ).toBe('https://www.example.com/backendslug/title/about-the-project');
+    });
+
     it('should infer date field when preview_path_date_field is not configured', () => {
       const { selectInferedField } = require('../../reducers/collections');
       selectInferedField.mockReturnValue('date');

packages/netlify-cms-core/src/lib/formatters.ts

@@ -8,9 +8,11 @@ import {
   COMMIT_AUTHOR,
   COMMIT_DATE,
   selectInferedField,
+  getFileFromSlug,
 } from '../reducers/collections';
 import { Collection, SlugConfig, Config, EntryMap } from '../types/redux';
 import { stripIndent } from 'common-tags';
+import { FILES } from '../constants/collectionTypes';
 
 const {
   compileStringTemplate,
@@ -153,24 +155,35 @@ export const previewUrlFormatter = (
     return;
   }
 
+  const basePath = trimEnd(baseUrl, '/');
+
+  const isFileCollection = collection.get('type') === FILES;
+  const file = isFileCollection ? getFileFromSlug(collection, entry.get('slug')) : undefined;
+
+  const getPathTemplate = () => {
+    return file?.get('preview_path') ?? collection.get('preview_path');
+  };
+  const getDateField = () => {
+    return file?.get('preview_path_date_field') ?? collection.get('preview_path_date_field');
+  };
+
   /**
-   * Without a `previewPath` for the collection (via config), the preview URL
+   * If a `previewPath` is provided for the collection/file, use it to construct the
+   * URL path.
+   */
+  const pathTemplate = getPathTemplate();
+
+  /**
+   * Without a `previewPath` for the collection/file (via config), the preview URL
    * will be the URL provided by the backend.
    */
-  if (!collection.get('preview_path')) {
+  if (!pathTemplate) {
     return baseUrl;
   }
 
-  /**
-   * If a `previewPath` is provided for the collection, use it to construct the
-   * URL path.
-   */
-  const basePath = trimEnd(baseUrl, '/');
-  const pathTemplate = collection.get('preview_path') as string;
   let fields = entry.get('data') as Map<string, string>;
   fields = addFileTemplateFields(entry.get('path'), fields, collection.get('folder'));
-  const dateFieldName =
-    collection.get('preview_path_date_field') || selectInferedField(collection, 'date');
+  const dateFieldName = getDateField() || selectInferedField(collection, 'date');
   const date = parseDateFromEntry((entry as unknown) as Map<string, unknown>, dateFieldName);
 
   // Prepare and sanitize slug variables only, leave the rest of the

packages/netlify-cms-core/src/types/redux.ts

@@ -140,6 +140,8 @@ export type CollectionFile = StaticallyTypedRecord<{
   label: string;
   media_folder?: string;
   public_folder?: string;
+  preview_path?: string;
+  preview_path_date_field?: string;
 }>;
 
 export type CollectionFiles = List<CollectionFile>;