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

Merge main into next
vivid-planet · Jan 20, 2025 · f1b1677 · f1b1677
2 parents 15f3eb9 + 4acd218
commit f1b1677
Show file tree

Hide file tree

Showing 114 changed files with 913 additions and 549 deletions.
diff --git a/.changeset/blue-flies-compete.md b/.changeset/blue-flies-compete.md
@@ -0,0 +1,6 @@
+---
+"@comet/cms-admin": patch
+"@comet/cms-api": patch
+---
+
+Fix page tree node slug validation to prevent URL encoded characters
diff --git a/.changeset/cyan-shoes-beg.md b/.changeset/cyan-shoes-beg.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": minor
+---
+
+Hide group title in `CrudMoreActionsMenu` when only one group is present
diff --git a/.changeset/eighty-cheetahs-burn.md b/.changeset/eighty-cheetahs-burn.md
@@ -0,0 +1,5 @@
+---
+"@comet/cms-admin": patch
+---
+
+Hide the "Dependents" tab in the DAM for users without the permission `dependencies`
diff --git a/.changeset/eighty-zebras-rescue.md b/.changeset/eighty-zebras-rescue.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin-theme": patch
+---
+
+Adapt styling of `DialogActions`, `DialogContent`, and `DialogTitle` to match the Comet DXP design
diff --git a/.changeset/five-wolves-kneel.md b/.changeset/five-wolves-kneel.md
@@ -0,0 +1,16 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Simplify setting field props when using `createCompositeBlockTextField` or `createCompositeBlockSelectField`
+
+The props can now be set directly without nesting them inside the `fieldProps` object.
+
+```diff
+ block: createCompositeBlockTextField({
+-    fieldProps: {
+         label: "Title",
+         fullWidth: true,
+-    },
+ }),
+```
diff --git a/.changeset/four-weeks-tan.md b/.changeset/four-weeks-tan.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": patch
+---
+
+Fix mobile styling of `AppHeaderMenuButton`
diff --git a/.changeset/happy-onions-rest.md b/.changeset/happy-onions-rest.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": minor
+---
+
+Deprecate `FinalFormRadio` and `FinalFormCheckbox`
diff --git a/.changeset/heavy-drinks-leave.md b/.changeset/heavy-drinks-leave.md
@@ -0,0 +1,5 @@
+---
+"@comet/cms-api": patch
+---
+
+Pass `x-preview-dam-urls` and `x-relative-dam-urls` headers to `url` field resolver in `FileImagesResolver`
diff --git a/.changeset/mean-pears-tie.md b/.changeset/mean-pears-tie.md
@@ -0,0 +1,7 @@
+---
+"@comet/cms-admin": patch
+---
+
+Export `useDamScope` hook
+
+This allows accessing the DAM scope in the application. This might be necessary when developing integrations with a third-party DAM.
diff --git a/.changeset/rude-moons-help.md b/.changeset/rude-moons-help.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": patch
+---
+
+Adjust the spacings inside `Toolbar` and `DataGridToolbar` to match the Comet design
diff --git a/.changeset/short-singers-trade.md b/.changeset/short-singers-trade.md
@@ -0,0 +1,7 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Add `createCompositeBlockSwitchField` helper function
+
+To simplify the creation of a switch field block by hiding the verbose definition of `Form`, `Field` and items.
diff --git a/.changeset/smooth-shrimps-exist.md b/.changeset/smooth-shrimps-exist.md
@@ -0,0 +1,5 @@
+---
+"@comet/cli": minor
+---
+
+Add option for base64 encoding in `inject-site-configs` command
diff --git a/.changeset/spotty-stingrays-camp.md b/.changeset/spotty-stingrays-camp.md
@@ -0,0 +1,8 @@
+---
+"@comet/cms-admin": patch
+---
+
+Update default icon of `ContentScopeSelect` and fix mobile styling for `AppHeader` components
+
+-   Update the default icon in `ContentScopeSelect` from `<Domain />` to `<Language />`
+-   Fix mobile styling of `BuildEntry` and `ContentScopeSelect` and `UserHeaderItem`
diff --git a/.changeset/tender-socks-trade.md b/.changeset/tender-socks-trade.md
@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": minor
+---
+
+Support `disabled` in select options when using `createCompositeBlockSelectField`
diff --git a/.changeset/violet-goats-study.md b/.changeset/violet-goats-study.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin": patch
+---
+
+`usePersistentColumnState`: Prevent Data Grids with the same name to overwrite each others pinned and column-visibility states
diff --git a/demo/admin/package.json b/demo/admin/package.json
@@ -19,6 +19,7 @@
         "lint:prettier": "npx prettier --check './**/*.{js,json,md,yml,yaml}'",
         "lint:tsc": "tsc --project .",
         "lint:generated-files-not-modified": "$npm_execpath admin-generator && git diff --exit-code HEAD -- src/**/generated",
+        "serve": "node server",
         "start": "run-s intl:compile && run-p gql:types generate-block-types && dotenv -e .env.secrets -e .env.local -e .env -e .env.site-configs  -- chokidar --initial -s \"../../packages/admin/*/src/**\" -c \"kill-port $ADMIN_PORT && vite --force\""
     },
     "dependencies": {

diff --git a/demo/admin/server/server.js → demo/admin/server/index.js b/demo/admin/server/server.js → demo/admin/server/index.js
@@ -7,8 +7,7 @@ const fs = require("fs");
 const app = express();
 const port = process.env.APP_PORT ?? 3000;
 
-// Read index.html file
-let indexFile = fs.readFileSync("build/index.html", "utf8");
+let indexFile = fs.readFileSync("./build/index.html", "utf8");
 
 // Replace environment variables
 indexFile = indexFile.replace(/\$([A-Z_]+)/g, (match, p1) => {
@@ -43,6 +42,7 @@ app.get("/status/health", (req, res) => {
 
 app.use(
     express.static("./build", {
+        index: false, // Don't send index.html for requests to "/" as it will be handled by the fallback route (with replaced environment variables)
         setHeaders: (res, path, stat) => {
             if (path.endsWith(".js")) {
                 // The js file is static and the index.html uses a parameter as cache buster
@@ -60,7 +60,8 @@ app.use(
 app.get("*", (req, res) => {
     // Don't cache the index.html at all to make sure applications updates are applied
     // implemented as suggested by https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#preventing_storing
-    res.send(indexFile, { headers: { "cache-control": "no-store" } });
+    res.setHeader("cache-control", "no-store");
+    res.send(indexFile);
 });
 
 app.listen(port, () => {

diff --git a/demo/admin/server/package.json b/demo/admin/server/package.json
@@ -1,13 +1,12 @@
 {
     "name": "comet-demo-admin-server",
-    "version": "1.0.0",
     "private": true,
     "dependencies": {
         "compression": "^1.7.5",
         "express": "^4.21.2",
         "helmet": "^7.2.0"
     },
-    "scripts": {
-        "serve": "node server.js"
+    "engines": {
+        "node": "22"
     }
 }
diff --git a/demo/admin/src/App.tsx b/demo/admin/src/App.tsx
@@ -70,7 +70,7 @@ export function App() {
                                         siteConfig.scope.domain === "secondary"
                                             ? `${siteConfig.url}/block-preview`
                                             : `${siteConfig.url}/block-preview/${scope.domain}/${scope.language}`,
-                                    sitePreviewApiUrl: `${siteConfig.url}/api/site-preview`,
+                                    sitePreviewApiUrl: `${siteConfig.url}/site-preview`,
                                 };
                             },
                         }}

diff --git a/demo/admin/src/common/ComponentDemo.tsx b/demo/admin/src/common/ComponentDemo.tsx
@@ -1,10 +1,9 @@
 import {
-    CheckboxField,
+    CheckboxListField,
     Field,
-    FieldContainer,
     FinalForm,
-    FinalFormRadio,
     MainContent,
+    RadioGroupField,
     SelectField,
     Stack,
     SwitchField,
@@ -42,7 +41,7 @@ import {
     resolveNewState,
 } from "@comet/blocks-admin";
 import { DamImageBlock, FinalFormToggleButtonGroup, PixelImageBlock } from "@comet/cms-admin";
-import { Box, FormControlLabel, Grid, MenuItem, Typography } from "@mui/material";
+import { Box, Grid, MenuItem, Typography } from "@mui/material";
 import { ReactNode, useState } from "react";
 
 import { RichTextBlock } from "./blocks/RichTextBlock";
@@ -208,26 +207,58 @@ export function ComponentDemo() {
 
                             <Field name="richText" label="Rich Text" component={FinalFormRichTextBlock} fullWidth />
 
-                            <FieldContainer label="Single choice">
-                                <Field name="single-choice" type="radio" value="Option 1" fullWidth>
-                                    {(props) => <FormControlLabel label="Option 1" control={<FinalFormRadio {...props} />} />}
-                                </Field>
-                                <Field name="single-choice" type="radio" value="Option 2" fullWidth>
-                                    {(props) => <FormControlLabel label="Option 2" control={<FinalFormRadio {...props} />} />}
-                                </Field>
-                                <Field name="single-choice" type="radio" value="Option 3" fullWidth>
-                                    {(props) => <FormControlLabel label="Option 3" control={<FinalFormRadio {...props} />} />}
-                                </Field>
-                                <Field name="single-choice" type="radio" value="Option 4 disabled" fullWidth disabled>
-                                    {(props) => <FormControlLabel label="Option 4 disabled" control={<FinalFormRadio {...props} />} />}
-                                </Field>
-                            </FieldContainer>
-                            <FieldContainer label="Multiple choice">
-                                <CheckboxField name="multiple-choice-1" label="Option 1" fullWidth />
-                                <CheckboxField name="multiple-choice-2" label="Option 2" fullWidth />
-                                <CheckboxField name="multiple-choice-3" label="Option 3" fullWidth />
-                                <CheckboxField name="multiple-choice-4-disabled" label="Option 4 disabled" fullWidth disabled />
-                            </FieldContainer>
+                            <RadioGroupField
+                                label="Single choice"
+                                layout="column"
+                                name="single-choice"
+                                fullWidth
+                                options={[
+                                    {
+                                        label: "Option 1",
+                                        value: "Option 1",
+                                    },
+                                    {
+                                        label: "Option 2",
+                                        value: "Option 2",
+                                    },
+                                    {
+                                        label: "Option 3",
+                                        value: "Option 3",
+                                    },
+                                    {
+                                        label: "Option 4 disabled",
+                                        value: "Option 4",
+                                        disabled: true,
+                                    },
+                                ]}
+                            />
+
+                            <CheckboxListField
+                                layout="column"
+                                label="Multiple choice"
+                                variant="horizontal"
+                                name="multiple-choice"
+                                fullWidth
+                                options={[
+                                    {
+                                        label: "Option 1",
+                                        value: "Option 1",
+                                    },
+                                    {
+                                        label: "Option 2",
+                                        value: "Option 2",
+                                    },
+                                    {
+                                        label: "Option 3",
+                                        value: "Option 3",
+                                    },
+                                    {
+                                        label: "Option 4 disabled",
+                                        value: "Option 4",
+                                        disabled: true,
+                                    },
+                                ]}
+                            />
 
                             <SwitchField name="switch" fieldLabel="Switch with label" />
 

diff --git a/demo/admin/src/common/blocks/AccordionItemBlock.tsx b/demo/admin/src/common/blocks/AccordionItemBlock.tsx
@@ -31,7 +31,8 @@ export const AccordionItemBlock = createCompositeBlock(
         blocks: {
             title: {
                 block: createCompositeBlockTextField({
-                    fieldProps: { fullWidth: true, label: <FormattedMessage id="accordionBlock.accordionItem.title" defaultMessage="Title" /> },
+                    fullWidth: true,
+                    label: <FormattedMessage id="accordionBlock.accordionItem.title" defaultMessage="Title" />,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/CallToActionBlock.tsx b/demo/admin/src/common/blocks/CallToActionBlock.tsx
@@ -21,7 +21,8 @@ export const CallToActionBlock = createCompositeBlock(
                         { value: "Outlined", label: <FormattedMessage id="callToActionBlock.variant.outlined" defaultMessage="Outlined" /> },
                         { value: "Text", label: <FormattedMessage id="callToActionBlock.variant.text" defaultMessage="Text" /> },
                     ],
-                    fieldProps: { label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />, fullWidth: true },
+                    label: <FormattedMessage id="callToActionBlock.variant" defaultMessage="Variant" />,
+                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/common/blocks/HeadingBlock.tsx b/demo/admin/src/common/blocks/HeadingBlock.tsx
@@ -81,7 +81,8 @@ export const HeadingBlock = createCompositeBlock(
                         { value: "H5", label: <FormattedMessage id="headingBlock.headline5" defaultMessage="Headline 5" /> },
                         { value: "H6", label: <FormattedMessage id="headingBlock.headline6" defaultMessage="Headline 6" /> },
                     ],
-                    fieldProps: { label: <FormattedMessage id="headingBlock.htmlTag" defaultMessage="HTML tag" />, fullWidth: true },
+                    label: <FormattedMessage id="headingBlock.htmlTag" defaultMessage="HTML tag" />,
+                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/common/blocks/MediaGalleryBlock.tsx b/demo/admin/src/common/blocks/MediaGalleryBlock.tsx
@@ -24,10 +24,8 @@ export const MediaGalleryBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<MediaGalleryBlockData["aspectRatio"]>({
                     defaultValue: "16x9",
                     options: mediaAspectRatioOptions,
-                    fieldProps: {
-                        label: <FormattedMessage id="mediaGalleryBlock.mediaGallery.aspectRatio" defaultMessage="Aspect Ratio" />,
-                        fullWidth: true,
-                    },
+                    label: <FormattedMessage id="mediaGalleryBlock.mediaGallery.aspectRatio" defaultMessage="Aspect Ratio" />,
+                    fullWidth: true,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx b/demo/admin/src/common/blocks/MediaGalleryItemBlock.tsx
@@ -13,10 +13,8 @@ export const MediaGalleryItemBlock = createCompositeBlock(
             },
             caption: {
                 block: createCompositeBlockTextField({
-                    fieldProps: {
-                        fullWidth: true,
-                        label: <FormattedMessage id="mediaGalleryBlock.mediaGalleryItem.caption" defaultMessage="Caption" />,
-                    },
+                    fullWidth: true,
+                    label: <FormattedMessage id="mediaGalleryBlock.mediaGalleryItem.caption" defaultMessage="Caption" />,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx b/demo/admin/src/common/blocks/StandaloneCallToActionListBlock.tsx
@@ -19,10 +19,8 @@ export const StandaloneCallToActionListBlock = createCompositeBlock(
                         { value: "center", label: <FormattedMessage id="standaloneCallToActionList.alignment.center" defaultMessage="center" /> },
                         { value: "right", label: <FormattedMessage id="standaloneCallToActionList.alignment.right" defaultMessage="right" /> },
                     ],
-                    fieldProps: {
-                        label: <FormattedMessage id="standaloneCallToActionList.alignment" defaultMessage="Alignment" />,
-                        fullWidth: true,
-                    },
+                    label: <FormattedMessage id="standaloneCallToActionList.alignment" defaultMessage="Alignment" />,
+                    fullWidth: true,
                 }),
                 hiddenInSubroute: true,
             },

diff --git a/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx b/demo/admin/src/common/blocks/StandaloneHeadingBlock.tsx
@@ -18,7 +18,8 @@ export const StandaloneHeadingBlock = createCompositeBlock(
                         { value: "left", label: <FormattedMessage id="standaloneHeading.textAlignment.left" defaultMessage="left" /> },
                         { value: "center", label: <FormattedMessage id="standaloneHeading.textAlignment.center" defaultMessage="center" /> },
                     ],
-                    fieldProps: { label: <FormattedMessage id="standaloneHeading.textAlignment" defaultMessage="Text alignment" />, fullWidth: true },
+                    label: <FormattedMessage id="standaloneHeading.textAlignment" defaultMessage="Text alignment" />,
+                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx b/demo/admin/src/common/blocks/StandaloneMediaBlock.tsx
@@ -16,7 +16,8 @@ export const StandaloneMediaBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<StandaloneMediaBlockData["aspectRatio"]>({
                     defaultValue: "16x9",
                     options: mediaAspectRatioOptions,
-                    fieldProps: { label: <FormattedMessage id="standaloneMedia.aspectRatio" defaultMessage="Aspect Ratio" />, fullWidth: true },
+                    label: <FormattedMessage id="standaloneMedia.aspectRatio" defaultMessage="Aspect Ratio" />,
+                    fullWidth: true,
                 }),
             },
         },

diff --git a/demo/admin/src/config.tsx b/demo/admin/src/config.tsx
@@ -21,7 +21,7 @@ export function createConfig() {
         ...cometConfig,
         apiUrl: environmentVariables.API_URL,
         adminUrl: environmentVariables.ADMIN_URL,
-        sitesConfig: JSON.parse(environmentVariables.PUBLIC_SITE_CONFIGS) as PublicSiteConfig[],
+        sitesConfig: JSON.parse(atob(environmentVariables.PUBLIC_SITE_CONFIGS)) as PublicSiteConfig[],
         buildDate: environmentVariables.BUILD_DATE,
         buildNumber: environmentVariables.BUILD_NUMBER,
         commitSha: environmentVariables.COMMIT_SHA,

diff --git a/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx b/demo/admin/src/documents/pages/blocks/BasicStageBlock.tsx
@@ -40,7 +40,7 @@ export const BasicStageBlock = createCompositeBlock({
             block: createCompositeBlockSelectField<BasicStageBlockData["overlay"]>({
                 defaultValue: 50,
                 options: overlayOptions,
-                fieldProps: { fullWidth: true },
+                fullWidth: true,
             }),
             title: <FormattedMessage id="basicStageBlock.overlay" defaultMessage="Overlay" />,
             hiddenInSubroute: true,
@@ -52,7 +52,7 @@ export const BasicStageBlock = createCompositeBlock({
                     { value: "left", label: <FormattedMessage id="basicStageBlock.alignment.left" defaultMessage="left" /> },
                     { value: "center", label: <FormattedMessage id="basicStageBlock.alignment.center" defaultMessage="center" /> },
                 ],
-                fieldProps: { fullWidth: true },
+                fullWidth: true,
             }),
             title: <FormattedMessage id="basicStageBlock.alignment" defaultMessage="Alignment" />,
             hiddenInSubroute: true,

diff --git a/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx b/demo/admin/src/documents/pages/blocks/BillboardTeaserBlock.tsx
@@ -41,7 +41,7 @@ export const BillboardTeaserBlock = createCompositeBlock(
                 block: createCompositeBlockSelectField<BillboardTeaserBlockData["overlay"]>({
                     defaultValue: 50,
                     options: overlayOptions,
-                    fieldProps: { fullWidth: true },
+                    fullWidth: true,
                 }),
                 title: <FormattedMessage id="billboardTeaserBlock.overlay" defaultMessage="Overlay" />,
                 hiddenInSubroute: true,