Merge pull request #2269 from vivid-planet/merge-main-into-next

Merge main into next

.changeset/chilled-walls-shop.md

@@ -8,14 +8,14 @@ Add the rule `@typescript-eslint/prefer-enum-initializers` to require enum initi
 // ✅
 enum ExampleEnum {
     One = "One",
-    Two = "Two"
+    Two = "Two",
 }
 ```
 
 ```ts
 // ❌
 enum ExampleEnum {
     One,
-    Two
+    Two,
 }
-```
+```

.changeset/curly-pillows-decide.md

@@ -13,11 +13,7 @@ You can use it like this:
 <DataGrid
     // ...
     components={{
-        Toolbar: () => (
-            <DataGridToolbar>
-                {/* ... */}
-            </DataGridToolbar>
-        ),
+        Toolbar: () => <DataGridToolbar>{/* ... */}</DataGridToolbar>,
     }}
 />
-```
+```

.changeset/curvy-moles-punch.md

@@ -4,10 +4,10 @@
 
 Rework `typographyOptions`
 
-- Replace `typographyOptions` with `createTypographyOptions()` to enable using the theme's breakpoints for media queries
-- Add new default styles for variants `subtitle1`, `subtitle2`, `caption` and `overline`
-- Remove custom `fontWeights`
-- Switch the font from `Roboto` to `Roboto Flex`
+-   Replace `typographyOptions` with `createTypographyOptions()` to enable using the theme's breakpoints for media queries
+-   Add new default styles for variants `subtitle1`, `subtitle2`, `caption` and `overline`
+-   Remove custom `fontWeights`
+-   Switch the font from `Roboto` to `Roboto Flex`
 
 The font switch requires you to make the following two changes in your admin application:
 
@@ -19,11 +19,11 @@ The font switch requires you to make the following two changes in your admin app
 + "@fontsource-variable/roboto-flex": "^5.0.0",
 ```
 
-```diff 
+```diff
 // App.tsx
 - import "@fontsource/roboto/100.css";
 - import "@fontsource/roboto/300.css";
 - import "@fontsource/roboto/400.css";
 - import "@fontsource/roboto/500.css";
 + import "@fontsource-variable/roboto-flex/full.css";
-```
+```

.changeset/eighty-owls-cheat.md

@@ -4,12 +4,12 @@
 
 Rework colors
 
-- Rename `bluePalette` to `primaryPalette`
-- Rename `neutrals` to `greyPalette`
-- Remove `greenPalette`
-- Change colors in all palettes
-- Change `text` colors 
-- Add `highlight` colors `purple`, `green`, `orange`, `yellow` and `red` to palette
+-   Rename `bluePalette` to `primaryPalette`
+-   Rename `neutrals` to `greyPalette`
+-   Remove `greenPalette`
+-   Change colors in all palettes
+-   Change `text` colors
+-   Add `highlight` colors `purple`, `green`, `orange`, `yellow` and `red` to palette
 
 Hint: To use the `highlight` colors without getting a type error, you must adjust the `vendors.d.ts` in your project:
 

.changeset/fast-dodos-compete.md

@@ -4,4 +4,4 @@
 
 Add `ForcePromptRoute`, a `Route` that triggers a prompt even if it is a subroute
 
-Used in `StackSwitch` so that navigating to a nested stack subpage will show a prompt (if dirty)
+Used in `StackSwitch` so that navigating to a nested stack subpage will show a prompt (if dirty)

.changeset/fifty-keys-sit.md

@@ -10,7 +10,7 @@ The new `ContentScopeIndicator` has the logic for displaying the current scope b
 
 Usage:
 
-- Per default, the `ContentScopeIndicator` displays the current `ContentScope`
-- Pass a scope object via the `scope` prop if your page has a custom scope
-- Pass the `global` prop if your page has no scope
-- Pass `children` if you want to render completely custom content
+-   Per default, the `ContentScopeIndicator` displays the current `ContentScope`
+-   Pass a scope object via the `scope` prop if your page has a custom scope
+-   Pass the `global` prop if your page has no scope
+-   Pass `children` if you want to render completely custom content

.changeset/fifty-toes-wink.md

@@ -0,0 +1,7 @@
+---
+"@comet/admin": patch
+---
+
+Fix error dialog to show GraphQL errors again
+
+Previously, GraphQL errors without an http status code didn't trigger an error dialog anymore.

.changeset/friendly-mayflies-play.md

@@ -10,31 +10,31 @@ See the [docs](https://nextjs.org/docs/pages/api-reference/components/image-lega
 
 Remove the `layout` prop from the block as it can lead to errors with the default implementation (`layout="responsive"` is not compatible with the new `fill` prop).
 
-- `layout={"responsive" | "inherit"}` can safely be removed
+-   `layout={"responsive" | "inherit"}` can safely be removed
 
     ```diff
-    <PixelImageBlock 
+    <PixelImageBlock
         data={block.props}
         aspectRatio={aspectRatio}
-    -   layout={"responsive"}   // line is marked as deprecated, but "responsive" must be removed 
-        {...imageProps} 
+    -   layout={"responsive"}   // line is marked as deprecated, but "responsive" must be removed
+        {...imageProps}
     />
     ```
 
-- `layout={"fill"}` can be replaced with `fill={true}`
+-   `layout={"fill"}` can be replaced with `fill={true}`
 
     ```diff
-    <PixelImageBlock 
+    <PixelImageBlock
         data={block.props}
         aspectRatio={aspectRatio}
     -   layout={"fill"}
     +   fill
-        {...imageProps} 
+        {...imageProps}
     />
     ```
 
-Notes: 
+Notes:
 
 The `PixelImageBlock` is usually wrapped in a `DamImageBlock` in the application. The `layout` prop should be removed from it as well.
 
-You can use the newly added `fill` prop of the `next/image` component by embedding the `PixelImageBlock` in a parent element that assigns the `position` style. See the [docs](https://nextjs.org/docs/pages/api-reference/components/image#fill) for more information. 
+You can use the newly added `fill` prop of the `next/image` component by embedding the `PixelImageBlock` in a parent element that assigns the `position` style. See the [docs](https://nextjs.org/docs/pages/api-reference/components/image#fill) for more information.

.changeset/fuzzy-foxes-laugh.md

@@ -4,5 +4,5 @@
 
 Make icon required for top level menu and group items
 
-This fixes the problem, that there was no icon or text to display in the collapsed state of the menu if no icon was passed. 
-Icons are required for all top level menu items and the items of groups. Groups themselves do not require an icon.
+This fixes the problem, that there was no icon or text to display in the collapsed state of the menu if no icon was passed.
+Icons are required for all top level menu items and the items of groups. Groups themselves do not require an icon.

.changeset/gentle-chefs-sell.md

@@ -4,4 +4,4 @@
 
 Remove the `requiredSymbol` prop from `FieldContainer` and use MUIs native implementation
 
-This prop was used to display a custom required symbol next to the label of the field. We now use the native implementation of the required attribute of MUI to ensure better accessibility and compatibility with screen readers. 
+This prop was used to display a custom required symbol next to the label of the field. We now use the native implementation of the required attribute of MUI to ensure better accessibility and compatibility with screen readers.

.changeset/giant-apples-cheer.md

@@ -4,5 +4,5 @@
 
 API Generator: Add new `dedicatedResolverArg` option to `@CrudField` to generate better API for Many-to-one-relations
 
-- Add foreign id as argument to create mutation
-- Add foreign id as argument to list query
+-   Add foreign id as argument to create mutation
+-   Add foreign id as argument to list query

.changeset/giant-ladybugs-greet.md

@@ -15,4 +15,3 @@ Rework `Toolbar`
     It automatically switches from a normal `Button` to an `IconButton` for smaller screen sizes.
 
 -   To show a scope indicator, you must pass a `<ContentScopeIndicator />` to the `Toolbar` via the `scopeIndicator` prop
-

.changeset/khaki-planets-matter.md

@@ -0,0 +1,20 @@
+---
+"@comet/cms-admin": minor
+"@comet/cms-api": minor
+---
+
+Require a file extension when changing the filename in the DAM
+
+Previously, files in the DAM could be renamed without restrictions.
+Files could have invalid extensions (for their mimetype) or no extension at all.
+This theoretically made the following attack possible:
+
+1. Creating a dangerous .exe file locally
+2. Renaming it to .jpg locally
+3. Uploading the file as a .jpg
+4. Renaming it to .exe in the DAM
+5. The file is now downloaded as .exe
+
+Now, filenames must always have an extension that matches their mimetype.
+This is enforced in the admin and API.
+Existing files without an extension are automatically assigned an extension via a DB migration.

.changeset/long-crabs-bake.md

@@ -4,5 +4,5 @@
 
 Remove the `components` and `componentProps` props from `CopyToClipboardButton`
 
-Instead, for the icons, use the `copyIcon` and `successIcon` props to pass a `ReactNode` instead of separately passing in values to the `components` and `componentProps` objects. 
-Use `slotPops` to pass props to the remaining elements.
+Instead, for the icons, use the `copyIcon` and `successIcon` props to pass a `ReactNode` instead of separately passing in values to the `components` and `componentProps` objects.
+Use `slotPops` to pass props to the remaining elements.

.changeset/nice-emus-confess.md

@@ -0,0 +1,11 @@
+---
+"@comet/cms-api": minor
+---
+
+Loosen the filename slugification rules
+
+When uploading a file to the DAM, the filename is automatically slugified.
+Previously, the slugification used pretty strict rules without a good reason.
+
+Now, the rules were loosened allowing uppercase characters and most special characters.
+Also, slugify now uses the locale `en` instead of `de` for special character replacements.

.changeset/ninety-countries-chew.md

@@ -2,4 +2,4 @@
 "@comet/cms-site": minor
 ---
 
-Add optional `fill` prop to `YouTubeVideoBlock` and `DamVideoBlock` to support same behavior as in `PixelImageBlock` 
+Add optional `fill` prop to `YouTubeVideoBlock` and `DamVideoBlock` to support same behavior as in `PixelImageBlock`

.changeset/plenty-cougars-warn.md

@@ -4,13 +4,14 @@
 
 Add GraphQL fetch client
 
-- `createGraphQLFetch`: simple graphql client around fetch, usage: createGraphQLFetch(fetch, url)(gql, variables)
-- `type GraphQLFetch = <T, V>(query: string, variables?: V, init?: RequestInit) => Promise<T>`
-- `gql` for tagging queries
-- `createFetchWithDefaults` fetch decorator that adds default values (eg. headers or next.revalidate)
-- `createFetchWithPreviewHeaders` fetch decorator that adds comet preview headers (based on SitePreviewData)
+-   `createGraphQLFetch`: simple graphql client around fetch, usage: createGraphQLFetch(fetch, url)(gql, variables)
+-   `type GraphQLFetch = <T, V>(query: string, variables?: V, init?: RequestInit) => Promise<T>`
+-   `gql` for tagging queries
+-   `createFetchWithDefaults` fetch decorator that adds default values (eg. headers or next.revalidate)
+-   `createFetchWithPreviewHeaders` fetch decorator that adds comet preview headers (based on SitePreviewData)
 
 Example helper in application:
+
 ```
 export const graphQLApiUrl = `${typeof window === "undefined" ? process.env.API_URL_INTERNAL : process.env.NEXT_PUBLIC_API_URL}/graphql`;
 export function createGraphQLFetch(previewData?: SitePreviewData) {
@@ -23,6 +24,7 @@ export function createGraphQLFetch(previewData?: SitePreviewData) {
 ```
 
 Usage example:
+
 ```
 const graphqlFetch = createGraphQLFetch(previewData);
 const data = await graphqlFetch<GQLExampleQuery, GQLExampleQueryVariables>(
@@ -31,4 +33,4 @@ const data = await graphqlFetch<GQLExampleQuery, GQLExampleQueryVariables>(
         exampleVariable: "foo"
     }
 );
-```
+```

.changeset/popular-planes-tap.md

@@ -18,4 +18,3 @@ Move `YouTubeVideoBlock` to `@cms` packages
 - import { YouTubeVideoBlock } from "@comet/blocks-api";
 + import { YouTubeVideoBlock } from "@comet/cms-api";
 ```
-