+
+ {formats.length > 0 ? formats.join(", ") : t("any_format")}
+
+
+ {t("max_size", { size: formatBytes(maxBytes) })}
+
+
+
+
+ {
+ pick(event.target.files?.[0]);
+ // Cleared so choosing the same file twice still fires `change`.
+ event.target.value = "";
+ }}
+ ref={inputRef}
+ tabIndex={-1}
+ type="file"
+ />
+
+ {file && !upload.isPending ? (
+
+
+ {isImage(file) ? (
+ // Decorative: the file name is right beside it as real text.
+ 
+ ) : (
+
+
+ {file.name}
+
+ {formatBytes(file.size)}
+
+
+
+
+
+
+
+
+
+ ) : (
+
+ {
+ event.preventDefault();
+ setIsDragging(false);
+ }}
+ onDragOver={event => {
+ event.preventDefault();
+ setIsDragging(true);
+ }}
+ onDrop={event => {
+ event.preventDefault();
+ setIsDragging(false);
+ pick(event.dataTransfer.files[0]);
+ }}
+ >
+ {upload.isPending ? (
+ <>
+
+ )}
+
+ {errorMessage !== null && (
+
+
-
+
-
{field.label}
@@ -73,51 +82,99 @@ const RemoteChanges = ({
};
/**
- * The lost-update banner.
+ * The lost-update dialog.
*
- * Three rules, and the reason this is a banner rather than a toast:
+ * A **modal** rather than a banner above the form, and that is the point: a save
+ * that did not happen is not something to notice later. A notice inline with the
+ * fields competes with the fields, and on a page-mode form long enough to scroll
+ * it can be off screen entirely - so the one outcome the editor must not get is
+ * exactly the one they got: pressing Save, seeing nothing change, and pressing it
+ * again.
*
- * 1. **Nothing the editor typed is discarded.** The form stays mounted; only
- * this notice appears above it.
+ * Three rules survive the change, and they are why this is a dialog rather than a
+ * toast:
+ *
+ * 1. **Nothing the editor typed is discarded.** The form stays mounted behind
+ * the overlay; this is a portal, and closing it returns them to every value
+ * they had.
* 2. **Nothing is overwritten automatically.** Reloading shows what changed and
- * arms the submit button with the *new* version - saving again is then a
+ * arms the next save with the *new* version - saving again is then a
* deliberate second click, not a silent clobber.
* 3. **No field merging.** Deciding which side of a conflicting paragraph wins
* is the editor's call, and guessing it is worse than asking.
*/
export const ConflictNotice = ({
conflict,
+ name,
+ onDismiss,
onReload,
opened,
spec,
}: {
conflict: ContentConflictState;
+ /**
+ * The content type's singular label - "Article", not "record".
+ *
+ * Required rather than optional, and that is deliberate: `desc` is an ICU
+ * message with a `{name}` placeholder, and a missing argument is not a blank in
+ * next-intl - it is a formatting error, and the reader gets the literal string
+ * `core.content.conflict.desc` where the sentence should be.
+ */
+ name: string;
+ /**
+ * Clears the conflict, so the next one can raise the dialog again.
+ *
+ * Closing is not "resolved": the editor still holds unsaved values, and
+ * whether to overwrite is a decision they make with the Save button.
+ */
+ onDismiss: () => void;
onReload: () => Promise
; opened: Record - + )} +- {t("title")} -- {conflict.latest ? ( - <> - -{t("reloaded", { version: conflict.currentVersion })}
-{ + if (!open) onDismiss(); + }} + open + > + + + {/* Amber rather than destructive: nothing was lost, and nothing is + about to be - the save simply did not happen. The same palette the + `warning` alert variant uses, since there is no token for it. */} + + + {conflict.latest ? ( ++ +- - ) : ( - <> - {t("desc", { version: conflict.currentVersion })}
+{t("title")} ++ {reloaded + ? t("reloaded", { version: conflict.currentVersion }) + : t("desc", { name, version: conflict.currentVersion })} + ++ ) : null} + + + {/* + Not an `AlertDialogAction`: that one closes the dialog, and this + button's whole job is to replace the dialog's contents with what + changed. Only the acknowledgement below closes. + */} + {!reloaded && ( - - )} - + {tGlobal("close")} + + + + ); }; diff --git a/packages/vitnode/src/views/admin/views/content/actions/content-form.tsx b/packages/vitnode/src/views/admin/views/content/actions/content-form.tsx index e5711dfa4..3799c145c 100644 --- a/packages/vitnode/src/views/admin/views/content/actions/content-form.tsx +++ b/packages/vitnode/src/views/admin/views/content/actions/content-form.tsx @@ -8,6 +8,7 @@ import { toast } from "sonner"; import type { ItemAutoFormComponentProps } from "@/components/form/auto-form"; import type { ContentFormSpec } from "@/content/admin/spec"; +import type { ContentFileDescriptor } from "@/content/files"; import type { ContentFormLayout } from "@/lib/plugin"; import { AutoForm, type AutoFormOnSubmit } from "@/components/form/auto-form"; @@ -22,6 +23,7 @@ import { contentTitleFromValues, isReferenceKind, } from "@/content/admin/spec"; +import { uploadContentFile } from "@/content/admin/upload"; import { usePathname, useRouter } from "@/lib/navigation"; import type { ContentConflictState } from "./conflict-notice"; @@ -231,18 +233,59 @@ const ContentFormFields = ({ null, ); + /** + * The record's already-stored file descriptors, keyed by field name. + * + * Carried beside the row by the generated detail and list responses rather + * than folded into the column, so the form's *value* stays the identifier it + * will submit while the uploader still has a name, a size and a URL to + * preview. Empty while creating. + */ + const files = data?.files as + Recordawait loadContentOptionsAction( spec.contentTypeId, @@ -501,6 +551,14 @@ const ContentFormFields = ({ ) } spec={fieldSpec} + // A plain client-side `fetch` of `multipart/form-data`, driven by + // TanStack Query inside `AutoFormFile`. Deliberately **not** a Server + // Action: a Server Action body is a serialised RSC payload, so an + // image would cross as a string, buffered whole, under a platform + // body limit that is not the field's `maxBytes`. + uploadFile={async ({ field, file }) => + await uploadContentFile({ field, file, spec }) + } {...props} /> ); @@ -528,6 +586,8 @@ const ContentFormFields = ({ {conflict && data ? ( setConflict(null)} onReload={onReload} opened={data} spec={spec} diff --git a/packages/vitnode/src/views/admin/views/content/actions/mutation-api.server.ts b/packages/vitnode/src/views/admin/views/content/actions/mutation-api.server.ts index 433c0aab9..cc029274e 100644 --- a/packages/vitnode/src/views/admin/views/content/actions/mutation-api.server.ts +++ b/packages/vitnode/src/views/admin/views/content/actions/mutation-api.server.ts @@ -107,8 +107,29 @@ interface MutationResult { unchanged?: boolean; /** `CONTENT_REVISION_NOT_RESTORABLE`, naming the fields that no longer fit. */ unprocessable?: ContentUnprocessable; + /** + * The version the record holds **after** this write. + * + * Read back so a form that stays open - page mode - can guard its next save on + * the version it just created rather than on the one it opened with. Without + * it, the second save of a session sends a version the record left behind and + * gets a conflict banner naming an editor who does not exist. + * + * The translation half of the same problem was already handled by + * `translations`; this is the base row's. + */ + version?: number; } +/** + * The version off a mutation response, when the row carries one. + * + * `undefined` for a content type with no `editorial`, which has no version to + * send and no conflict to have. + */ +const versionOf = (row?: Record => { +): Promise => { const { definition, pluginId } = resolve(contentTypeId); // Same as an edit: the old slug has to be known before the write, or a @@ -655,9 +679,7 @@ export const restoreContentRevisionAction = async ( before: localesBefore, }); - const version = result.data?.row.version; - - return { version: typeof version === "number" ? version : undefined }; + return { version: versionOf(result.data?.row) }; }; export interface ContentPreviewLink { diff --git a/packages/vitnode/src/views/admin/views/content/actions/mutation-api.test.ts b/packages/vitnode/src/views/admin/views/content/actions/mutation-api.test.ts index 44da8218a..4d2f900d9 100644 --- a/packages/vitnode/src/views/admin/views/content/actions/mutation-api.test.ts +++ b/packages/vitnode/src/views/admin/views/content/actions/mutation-api.test.ts @@ -589,6 +589,45 @@ describe("editorial", () => { }); }); + /** + * The precondition a page-mode form's *next* save has to guard on. + * + * A page-mode form stays mounted across its own saves, so if the write does not + * report the version it produced, the second save sends the version the record + * has already left behind - and the editor gets "someone else saved this first" + * about their own previous click. Nobody else is involved. + */ + it("reports the version the record holds after the write", async () => { + responses = [ + { data: editorialRow, status: 200 }, + { data: { ...editorialRow, version: 5 }, status: 200 }, + ]; + + const result = await editContentAction( + "test.editorial", + 7, + { title: "Changed" }, + 4, + ); + + expect(result.version).toBe(5); + expect(result.error).toBeUndefined(); + }); + + it("reports no version for a content type that has none", async () => { + definition = testPostContentType; + responses = [ + { data: { id: 7, slug: "hello", status: "draft" }, status: 200 }, + { data: { id: 7, slug: "hello", status: "draft" }, status: 200 }, + ]; + + const result = await editContentAction("test.post", 7, { + title: "Changed", + }); + + expect(result.version).toBeUndefined(); + }); + it("sends a bare body for a content type without the workflow", async () => { definition = testPostContentType; responses = [ diff --git a/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx b/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx index a2f2e51be..e4d9ad20f 100644 --- a/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx +++ b/packages/vitnode/src/views/admin/views/content/lib/field-component.tsx @@ -2,9 +2,11 @@ import { useTranslations } from "next-intl"; import type { ItemAutoFormComponentProps } from "@/components/form/auto-form"; import type { ContentFormFieldSpec } from "@/content/admin/spec"; +import type { ContentFileDescriptor } from "@/content/files"; import { AutoFormCombobox } from "@/components/form/fields/combobox"; import { AutoFormDateTime } from "@/components/form/fields/date-time"; +import { AutoFormFile } from "@/components/form/fields/file"; import { AutoFormInput } from "@/components/form/fields/input"; import { AutoFormNullableNumber } from "@/components/form/fields/nullable-number"; import { AutoFormRadioGroup } from "@/components/form/fields/radio-group"; @@ -52,13 +54,34 @@ export type ContentOptionsLoader = (args: { }) => Promise ; } export const ContentField = ({ + files, loadOptions, spec, + uploadFile, ...rest }: ContentFieldProps) => { const t = useTranslations("core.content.form"); @@ -95,6 +118,26 @@ export const ContentField = ({ ); } + // The uploader. `maxBytes` is not optional on a `file` descriptor, so the + // fallback is unreachable - it exists because the *spec* type is shared by + // every kind and cannot say that. + case "file": + return ( + + uploadFile + ? await uploadFile({ field: spec.name, file }) + : Promise.reject(new Error(t("file.unavailable"))) + } + {...props} + /> + ); + // The three Stage 6 editors. Each one controls the nested value the API // takes, so nothing is flattened on submit and nothing re-nested on load. case "group": diff --git a/packages/vitnode/src/views/admin/views/content/table/cells.tsx b/packages/vitnode/src/views/admin/views/content/table/cells.tsx index ee69f5a5f..46d4cc2ba 100644 --- a/packages/vitnode/src/views/admin/views/content/table/cells.tsx +++ b/packages/vitnode/src/views/admin/views/content/table/cells.tsx @@ -2,16 +2,26 @@ import { CheckIcon, CircleCheckIcon, FileClockIcon, + FileIcon, MinusIcon, } from "lucide-react"; import type { ContentColumnSpec } from "@/content/admin/spec"; +import type { ContentFileDescriptor } from "@/content/files"; import type { ContentLabels } from "@/content/server/service"; import { DateFormat } from "@/components/date-format"; import { Badge } from "@/components/ui/badge"; export interface ContentRowData extends Record ; + + const image = (file.mimeType ?? "").startsWith("image/"); + + return ( + + + {image ? ( + // Decorative: the file name is right beside it as real text, so an + // alt would repeat it to a screen reader for no gain. + + )} + + {file.name} + + ); + } + if (spec.kind === "relation" || spec.kind === "user") { const label = row.labels[spec.name]; diff --git a/plugins/blog/src/content/content-types.test.ts b/plugins/blog/src/content/content-types.test.ts index 511da2efd..55aae236d 100644 --- a/plugins/blog/src/content/content-types.test.ts +++ b/plugins/blog/src/content/content-types.test.ts @@ -161,9 +161,88 @@ describe("blog content types", () => { "title", "friendlyUrl", "content", + "coverImage", + "coverImageAlt", ]); }); + /** + * The cover image, as a pair: one **shared** file and one **localized** + * description of it. That split is the whole point - the image is the same + * image in every language, and the alt text is not. + */ + describe("the cover image", () => { + const cover = blogPostContentType.fields.coverImage; + + it("is one shared file, never per language", () => { + expect(cover.kind).toBe("file"); + expect(cover.localized).toBeFalsy(); + }); + + it("states a ceiling, because every file field has to", () => { + expect(cover).toMatchObject({ maxBytes: 5 * 1024 * 1024 }); + }); + + it("constrains the extension and the media type independently", () => { + // Both, so a `hero.png` declared `image/gif` is refused - which an + // extension-only check would store. + expect(cover).toMatchObject({ + allowedExtensions: [".jpg", ".jpeg", ".png", ".webp", ".avif"], + allowedMimeTypes: [ + "image/jpeg", + "image/png", + "image/webp", + "image/avif", + ], + }); + }); + + it("allows the format the image pipeline converts to", () => { + // With `storage.image` on, an upload is stored as WebP whatever was + // chosen - so a field that left `.webp` out would accept the upload and + // then refuse the save. + expect(cover).toMatchObject({ + allowedExtensions: expect.arrayContaining([".webp"]), + allowedMimeTypes: expect.arrayContaining(["image/webp"]), + }); + }); + + it("is optional, so an article can exist before its image does", () => { + expect(cover.nullable).toBe(true); + expect(cover.required).toBe(false); + }); + + it("describes itself per language", () => { + const alt = blogPostContentType.fields.coverImageAlt; + + expect(alt.kind).toBe("text"); + expect(alt.localized).toBe(true); + expect(alt.nullable).toBe(true); + }); + + it("is publicly readable, alt text included", () => { + expect(blogPostContentType.publicApi.fields).toContain("coverImage"); + expect(blogPostContentType.publicApi.fields).toContain("coverImageAlt"); + }); + + it("is neither sortable nor filterable", () => { + expect(blogPostContentType.admin.list.orderableFields).not.toContain( + "coverImage", + ); + expect(blogPostContentType.publicApi.filterableFields).not.toContain( + "coverImage", + ); + expect(blogPostContentType.publicApi.orderableFields).not.toContain( + "coverImage", + ); + }); + + it("shows in the list beside the title, not instead of it", () => { + expect(blogPostContentType.admin.list.columns).toContain("coverImage"); + expect(blogPostContentType.admin.list.columns[0]).toBe("title"); + }); + }); + it("keeps the storage model: a base row plus a translation table", () => { // The field-level language switchers change how localization is *edited*. // Where it lives has not moved. diff --git a/plugins/blog/src/content/post.ts b/plugins/blog/src/content/post.ts index 9b4ef1403..d4a5b0a61 100644 --- a/plugins/blog/src/content/post.ts +++ b/plugins/blog/src/content/post.ts @@ -118,6 +118,47 @@ export const blogPostContentType = defineContentType({ source: "title", }), content: field.textarea({ localized: true, required: true }), + + /** + * The article's cover image - **shared**, and one file. + * + * The column is a `core_files.id` with `ON DELETE RESTRICT`, so Postgres + * itself refuses to delete an image an article is still using, and nothing + * about the file is copied onto the row: no URL, no storage key, no size. One + * fact in one place, which is what makes replacing the image a single write. + * + * `maxBytes` is mandatory on every file field and this one says five + * megabytes. Both allowlists are stated, and they have to *both* match: a + * `hero.png` declared `image/gif` is refused, which an extension-only check + * would wave through. + * + * `.webp` is in the extension list for a reason worth knowing: with + * `storage.image` configured, VitNode re-encodes uploaded images to WebP, so + * the stored file is `hero.webp` whatever was chosen. A field that allowed + * only `.png` would accept the upload and then refuse the save. + * + * Not localized, and it cannot be: a cover image is one image whatever + * language somebody reads the article in. The *alt text* is the part that + * differs, and that is the field below. + */ + coverImage: field.file({ + maxBytes: 5 * 1024 * 1024, + allowedExtensions: [".jpg", ".jpeg", ".png", ".webp", ".avif"], + allowedMimeTypes: ["image/jpeg", "image/png", "image/webp", "image/avif"], + }), + /** + * What a screen reader says instead of the cover image - **per language**. + * + * The pairing is the point: one shared file, one localized description of it. + * `nullable: true` because an article with no cover has nothing to describe, + * and because alt text is written after the image is chosen rather than at + * the same moment. + */ + coverImageAlt: field.text({ + localized: true, + nullable: true, + maxLength: 255, + }), }, /** @@ -143,6 +184,13 @@ export const blogPostContentType = defineContentType({ "friendlyUrl", "content", "categoryId", + // A file crosses the public boundary as the normalised descriptor - `{ id, + // name, url, mimeType, size, width, height }` - and never as the + // `core_files.id` the column holds: a reader has no route to resolve an + // identifier through, and the storage key, the uploader and the metadata + // bag are not part of the shape. + "coverImage", + "coverImageAlt", "publishedAt", ], searchableFields: ["title", "content"], @@ -211,7 +259,11 @@ export const blogPostContentType = defineContentType({ // authors are here: both are sets on generated junction tables, and a // list that loaded them would issue a query per row. The form carries // them, which is where they are edited anyway. - columns: ["title", "status", "publishedAt", "updatedAt"], + // The title still leads - it is what somebody scans a list by. `coverImage` + // sits beside it and renders as a thumbnail plus the stored file name, + // never as the identifier the column holds: a raw `42` is the one thing an + // editor cannot recognise. + columns: ["title", "coverImage", "status", "publishedAt", "updatedAt"], }, }, }); diff --git a/plugins/blog/src/locales/en.json b/plugins/blog/src/locales/en.json index 9cf1e3881..e4a95ecb7 100644 --- a/plugins/blog/src/locales/en.json +++ b/plugins/blog/src/locales/en.json @@ -12,6 +12,8 @@ "content": "Content", "categoryId": "Categories", "authorId": "Authors", + "coverImage": "Cover image", + "coverImageAlt": "Cover image alt text", "status": "Status", "publishedAt": "Published", "updatedAt": "Updated" @@ -35,6 +37,9 @@ }, "form": { "publish": "Publish", + "cover": { + "title": "Cover image" + }, "settings": { "title": "Article settings" } diff --git a/plugins/blog/src/views/admin/article/form-layout.tsx b/plugins/blog/src/views/admin/article/form-layout.tsx index df06b6ef2..2013587f9 100644 --- a/plugins/blog/src/views/admin/article/form-layout.tsx +++ b/plugins/blog/src/views/admin/article/form-layout.tsx @@ -30,6 +30,19 @@ export const BlogArticleFormLayout = () => { + {/* + The cover image and its alt text, together and in that order: the file + is shared and the description of it is per language, and writing the + second before choosing the first is not how anybody works. The + uploader's own constraint line - "JPG, PNG, WEBP, AVIF" and "Maximum + file size: 5 MB" - comes from the field descriptor, so this layout + neither states nor can contradict it. + */} + + ++ + diff --git a/plugins/example/src/const.ts b/plugins/example/src/const.ts index 3c060e719..4708ade42 100644 --- a/plugins/example/src/const.ts +++ b/plugins/example/src/const.ts @@ -52,4 +52,9 @@ export const EXAMPLE_MIGRATIONS = [ // actually produces. `NULL` has to mean "indexable" identically in the metadata // and in the sitemap predicate, and only a nullable column can prove it. "add_example_article_no_index_flag", + // File fields: `example_articles.animation`, an integer foreign key into + // `core_files` with `ON DELETE RESTRICT`. Core arrives with it - + // `core_content_file_refs` is what pins the files a retained revision names - + // so the shared table has to exist before anything can reference it. + "add_content_file_fields", ]; diff --git a/plugins/example/src/content/article.ts b/plugins/example/src/content/article.ts index 1941a3f9b..d0c0fe25b 100644 --- a/plugins/example/src/content/article.ts +++ b/plugins/example/src/content/article.ts @@ -29,6 +29,33 @@ export const articleContentType = defineContentType({ */ noIndex: field.boolean({ nullable: true }), author: field.user(), + /** + * The **extension-only** reference: a GIF, and nothing else. + * + * Both allowlists name exactly one thing, and both have to match, which is + * what makes this the interesting case: + * + * - `banner.gif` declared `image/gif` -> accepted; + * - `banner.png` declared `image/png` -> refused, wrong extension *and* wrong + * type; + * - a PNG **renamed** to `banner.gif` -> refused, because the browser still + * declares `image/png`. An extension-only check would store it; + * - a real GIF over 10 MB -> refused, before a byte reaches the adapter. + * + * A GIF is also the format that proves the storage pipeline is not quietly + * rewriting the rules: `sharp` deliberately does not re-encode GIF, so the + * stored file keeps its extension and its animation. An allowlist of `.png` + * would *not* be safe in the same way - with `storage.image` on, a PNG is + * converted to WebP, and the field would have to allow `.webp` too. + * + * Nullable, which is `field.file`'s default: an article without an animation + * is the ordinary case. + */ + animation: field.file({ + maxBytes: 10 * 1024 * 1024, + allowedExtensions: [".gif"], + allowedMimeTypes: ["image/gif"], + }), category: field.relation({ required: true, onDelete: "restrict", @@ -47,6 +74,10 @@ export const articleContentType = defineContentType({ "excerpt", "featured", "category", + // Publicly exposed as the normalised descriptor - `{ id, name, url, + // mimeType, size, width, height }` - never as the `core_files.id` the + // column holds, and never with the storage key or the uploader. + "animation", // Public because delivery projects it: `robots: { index: false }` is // rendered into the page, so the field behind it has to be one the public // API would already have said out loud. @@ -125,6 +156,9 @@ export const articleContentType = defineContentType({ "code", "category", "author", + // Rendered as a thumbnail and the stored file name, not as the + // identifier the column holds. + "animation", "publishedAt", "updatedAt", ], diff --git a/plugins/example/src/content/file-fields.test.ts b/plugins/example/src/content/file-fields.test.ts new file mode 100644 index 000000000..ca1ce4ffd --- /dev/null +++ b/plugins/example/src/content/file-fields.test.ts @@ -0,0 +1,104 @@ +// @vitest-environment node +import { + contentFileAccept, + contentFileConstraints, + contentFileFormatLabels, + validateContentFile, +} from "@vitnode/core/content"; +import { describe, expect, it } from "vitest"; + +import { articleContentType } from "./article"; + +/** + * The extension-only reference field, exercised as a matrix. + * + * `example.article.animation` states exactly one extension and exactly one media + * type, which makes it the field where "both rules have to match" is visible: a + * PNG renamed to `.gif` passes the filename check and fails the type check, and + * that is the only reason it is refused. + * + * A GIF is also the format that proves the storage pipeline is not quietly + * changing the rules - `sharp` never re-encodes GIF, so the stored file keeps + * its extension. + */ +const animation = articleContentType.fields.animation; +const constraints = contentFileConstraints(animation); + +const check = (name: string, mimeType: null | string, size = 1024) => + validateContentFile(constraints, { mimeType, name, size }); + +describe("example.article.animation - the GIF-only field", () => { + it("is declared with one extension, one media type and a ceiling", () => { + expect(animation).toMatchObject({ + allowedExtensions: [".gif"], + allowedMimeTypes: ["image/gif"], + kind: "file", + maxBytes: 10 * 1024 * 1024, + }); + }); + + it("accepts a GIF", () => { + expect(check("banner.gif", "image/gif")).toBeNull(); + }); + + it("accepts a GIF whatever the case of its name", () => { + expect(check("BANNER.GIF", "image/gif")).toBeNull(); + }); + + it("refuses a PNG", () => { + expect(check("shot.png", "image/png")?.code).toBe( + "CONTENT_FILE_MIME_TYPE_NOT_ALLOWED", + ); + }); + + it("refuses a PNG renamed to .gif, because the media type is wrong", () => { + expect(check("renamed.gif", "image/png")?.code).toBe( + "CONTENT_FILE_MIME_TYPE_NOT_ALLOWED", + ); + }); + + it("refuses a GIF whose name says otherwise", () => { + expect(check("renamed.png", "image/gif")?.code).toBe( + "CONTENT_FILE_EXTENSION_NOT_ALLOWED", + ); + }); + + it("refuses a GIF over 10 MB", () => { + expect(check("huge.gif", "image/gif", 10 * 1024 * 1024 + 1)?.code).toBe( + "CONTENT_FILE_TOO_LARGE", + ); + }); + + it("accepts a GIF of exactly 10 MB", () => { + expect(check("edge.gif", "image/gif", 10 * 1024 * 1024)).toBeNull(); + }); + + it("refuses a file with no declared type at all", () => { + expect(check("banner.gif", null)?.code).toBe( + "CONTENT_FILE_MIME_TYPE_NOT_ALLOWED", + ); + }); + + it("tells the browser to offer both the extension and the type", () => { + expect(contentFileAccept(constraints)).toBe(".gif,image/gif"); + }); + + it("says GIF, not image/gif", () => { + expect(contentFileFormatLabels(constraints)).toEqual(["GIF"]); + }); + + it("is optional, sortable by nothing and filterable by nothing", () => { + expect(animation.nullable).toBe(true); + expect(articleContentType.admin.list.orderableFields).not.toContain( + "animation", + ); + expect(articleContentType.publicApi.filterableFields).not.toContain( + "animation", + ); + }); + + it("is exposed publicly, and shown in the list", () => { + expect(articleContentType.publicApi.fields).toContain("animation"); + expect(articleContentType.admin.list.columns).toContain("animation"); + }); +}); diff --git a/plugins/example/src/database/tables.test.ts b/plugins/example/src/database/tables.test.ts index b4ff9c183..5df34014e 100644 --- a/plugins/example/src/database/tables.test.ts +++ b/plugins/example/src/database/tables.test.ts @@ -171,6 +171,10 @@ describe("example_articles", () => { it("indexes the foreign keys, the timestamps, the declared composite and publication", () => { expect([...indexNames(articles)].sort(byName)).toEqual([ + // `field.file` is a foreign key like the other two, and Postgres does not + // index the child side on its own - `ON DELETE RESTRICT` scans it on every + // attempt to delete a file. + "example_articles_animation_idx", "example_articles_author_idx", "example_articles_category_idx", "example_articles_code_key", diff --git a/plugins/example/src/locales/en.json b/plugins/example/src/locales/en.json index 37a5f9a78..ab55a1bc7 100644 --- a/plugins/example/src/locales/en.json +++ b/plugins/example/src/locales/en.json @@ -12,6 +12,7 @@ "excerpt": "Excerpt", "views": "Views", "featured": "Featured", + "animation": "Animation", "author": "Author", "category": "Category", "updatedAt": "Updated"
-
{changed.map(field => (