Merge branch 'next' into admin-gen-configurable_fix-optional-numberfield

.changeset/calm-plums-taste.md

@@ -0,0 +1,6 @@
+---
+"@comet/cms-admin": major
+"@comet/cms-api": major
+---
+
+Change language field in User and CurrentUser to locale

.changeset/giant-apples-cheer.md

@@ -0,0 +1,8 @@
+---
+"@comet/cms-api": major
+---
+
+API Generator: Generate better API for Many-to-one-relations with `orphanRemoval` activated where the reverse side has its own API generated
+
+- Add `id` as argument to create mutation
+- Add `id` as argument to list query

.changeset/shy-scissors-joke.md

@@ -0,0 +1,9 @@
+---
+"@comet/cms-api": major
+---
+
+API Generator: Remove support for `visible` boolean, use `status` enum instead.
+
+Recommended enum values: Published/Unpublished or Visible/Invisible or Active/Deleted or Active/Archived
+
+Remove support for update visibility mutation, use existing generic update instead

.github/workflows/main-into-next-pr.yml

@@ -9,7 +9,7 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - name: Checkout code
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
               with:
                   fetch-depth: 0 # Needed to also fetch next branch
 
@@ -36,7 +36,7 @@ jobs:
                   echo 'PR_BODY=This is an automated pull request to merge changes from `main` into `next`. It has merge conflicts. To resolve conflicts, check out the branch `merge-main-into-next` locally, make any necessary changes to conflicting files, and commit and publish your changes.' >> $GITHUB_ENV
 
             - name: Create pull request
-              uses: peter-evans/create-pull-request@v5
+              uses: peter-evans/create-pull-request@v6
               with:
                   token: ${{ secrets.GITHUB_TOKEN }}
                   title: ${{ env.PR_TITLE }}

demo/admin/src/news/generated/NewsForm.gql.ts

@@ -7,8 +7,10 @@ export const newsFormFragment = gql`
     fragment NewsForm on News {
         slug
         title
+        status
         date
         category
+        visible
         image
         content
     }

demo/admin/src/news/generated/NewsForm.tsx

@@ -5,6 +5,7 @@ import { useApolloClient, useQuery } from "@apollo/client";
 import {
     Field,
     FinalForm,
+    FinalFormCheckbox,
     FinalFormInput,
     FinalFormSaveSplitButton,
     FinalFormSelect,
@@ -24,7 +25,7 @@ import { FinalFormDatePicker } from "@comet/admin-date-time";
 import { ArrowLeft } from "@comet/admin-icons";
 import { BlockState, createFinalFormBlock } from "@comet/blocks-admin";
 import { DamImageBlock, EditPageLayout, queryUpdatedAt, resolveHasSaveConflict, useFormSaveConflict } from "@comet/cms-admin";
-import { IconButton, MenuItem } from "@mui/material";
+import { FormControlLabel, IconButton, MenuItem } from "@mui/material";
 import { useContentScope } from "@src/common/ContentScopeProvider";
 import { FormApi } from "final-form";
 import { filter } from "graphql-anywhere";
@@ -81,6 +82,7 @@ export function NewsForm({ id }: FormProps): React.ReactElement {
                       content: rootBlocks.content.input2State(data.news.content),
                   }
                 : {
+                      visible: false,
                       image: rootBlocks.image.defaultValues(),
                       content: rootBlocks.content.defaultValues(),
                   },
@@ -119,12 +121,12 @@ export function NewsForm({ id }: FormProps): React.ReactElement {
                 variables: { id, input: output, lastUpdatedAt: data?.news?.updatedAt },
             });
         } else {
-            const { data: mutationReponse } = await client.mutate<GQLCreateNewsMutation, GQLCreateNewsMutationVariables>({
+            const { data: mutationResponse } = await client.mutate<GQLCreateNewsMutation, GQLCreateNewsMutationVariables>({
                 mutation: createNewsMutation,
                 variables: { scope, input: output },
             });
             if (!event.navigatingBack) {
-                const id = mutationReponse?.createNews.id;
+                const id = mutationResponse?.createNews.id;
                 if (id) {
                     setTimeout(() => {
                         stackSwitchApi.activatePage("edit", id);
@@ -174,6 +176,18 @@ export function NewsForm({ id }: FormProps): React.ReactElement {
                             component={FinalFormInput}
                             label={<FormattedMessage id="news.title" defaultMessage="Title" />}
                         />
+                        <Field fullWidth name="status" label={<FormattedMessage id="news.status" defaultMessage="Status" />}>
+                            {(props) => (
+                                <FinalFormSelect {...props}>
+                                    <MenuItem value="Active">
+                                        <FormattedMessage id="news.status.active" defaultMessage="Active" />
+                                    </MenuItem>
+                                    <MenuItem value="Deleted">
+                                        <FormattedMessage id="news.status.deleted" defaultMessage="Deleted" />
+                                    </MenuItem>
+                                </FinalFormSelect>
+                            )}
+                        </Field>
                         <Field
                             required
                             fullWidth
@@ -196,6 +210,14 @@ export function NewsForm({ id }: FormProps): React.ReactElement {
                                 </FinalFormSelect>
                             )}
                         </Field>
+                        <Field name="visible" label="" type="checkbox" fullWidth>
+                            {(props) => (
+                                <FormControlLabel
+                                    label={<FormattedMessage id="news.visible" defaultMessage="Visible" />}
+                                    control={<FinalFormCheckbox {...props} />}
+                                />
+                            )}
+                        </Field>
                         <Field name="image" isEqual={isEqual}>
                             {createFinalFormBlock(rootBlocks.image)}
                         </Field>

demo/admin/src/news/generated/NewsGrid.tsx

@@ -43,6 +43,7 @@ const newsFragment = gql`
         updatedAt
         slug
         title
+        status
         date
         category
         visible
@@ -114,6 +115,16 @@ export function NewsGrid(): React.ReactElement {
         },
         { field: "slug", headerName: intl.formatMessage({ id: "news.slug", defaultMessage: "Slug" }), width: 150 },
         { field: "title", headerName: intl.formatMessage({ id: "news.title", defaultMessage: "Title" }), width: 150 },
+        {
+            field: "status",
+            headerName: intl.formatMessage({ id: "news.status", defaultMessage: "Status" }),
+            type: "singleSelect",
+            valueOptions: [
+                { value: "Active", label: intl.formatMessage({ id: "news.status.active", defaultMessage: "Active" }) },
+                { value: "Deleted", label: intl.formatMessage({ id: "news.status.deleted", defaultMessage: "Deleted" }) },
+            ],
+            width: 150,
+        },
         {
             field: "date",
             headerName: intl.formatMessage({ id: "news.date", defaultMessage: "Date" }),
@@ -178,8 +189,10 @@ export function NewsGrid(): React.ReactElement {
                                 return {
                                     slug: row.slug,
                                     title: row.title,
+                                    status: row.status,
                                     date: row.date,
                                     category: row.category,
+                                    visible: row.visible,
                                     image: DamImageBlock.state2Output(DamImageBlock.input2State(row.image)),
                                     content: NewsContentBlock.state2Output(NewsContentBlock.input2State(row.content)),
                                 };

demo/admin/src/products/ProductForm.tsx

@@ -104,7 +104,6 @@ function ProductForm({ id }: FormProps): React.ReactElement {
             type: formValues.type as GQLProductType,
             category: formValues.category?.id,
             tags: formValues.tags.map((i) => i.id),
-            variants: [],
             articleNumbers: [],
             discounts: [],
             statistics: { views: 0 },
@@ -117,12 +116,12 @@ function ProductForm({ id }: FormProps): React.ReactElement {
                 variables: { id, input: output, lastUpdatedAt: data?.product.updatedAt },
             });
         } else {
-            const { data: mutationReponse } = await client.mutate<GQLCreateProductMutation, GQLCreateProductMutationVariables>({
+            const { data: mutationResponse } = await client.mutate<GQLCreateProductMutation, GQLCreateProductMutationVariables>({
                 mutation: createProductMutation,
                 variables: { input: output },
             });
             if (!event.navigatingBack) {
-                const id = mutationReponse?.createProduct.id;
+                const id = mutationResponse?.createProduct.id;
                 if (id) {
                     setTimeout(() => {
                         stackSwitchApi.activatePage(`edit`, id);

demo/admin/src/products/ProductsGrid.tsx

@@ -35,8 +35,8 @@ import {
     GQLProductsListManualFragment,
     GQLProductsListQuery,
     GQLProductsListQueryVariables,
-    GQLUpdateProductVisibilityMutation,
-    GQLUpdateProductVisibilityMutationVariables,
+    GQLUpdateProductStatusMutation,
+    GQLUpdateProductStatusMutationVariables,
 } from "./ProductsGrid.generated";
 
 function ProductsGridToolbar() {
@@ -111,21 +111,22 @@ function ProductsGrid() {
         },
         { field: "inStock", headerName: "In Stock", width: 50, type: "boolean" },
         {
-            field: "visible",
-            headerName: "Visible",
+            field: "status",
+            headerName: "Status",
             width: 100,
             type: "boolean",
+            valueGetter: (params) => params.row.status == "Published",
             renderCell: (params) => {
                 return (
                     <CrudVisibility
-                        visibility={params.row.visible}
-                        onUpdateVisibility={async (visible) => {
-                            await client.mutate<GQLUpdateProductVisibilityMutation, GQLUpdateProductVisibilityMutationVariables>({
-                                mutation: updateProductVisibilityMutation,
-                                variables: { id: params.row.id, visible },
+                        visibility={params.row.status == "Published"}
+                        onUpdateVisibility={async (status) => {
+                            await client.mutate<GQLUpdateProductStatusMutation, GQLUpdateProductStatusMutationVariables>({
+                                mutation: updateProductStatusMutation,
+                                variables: { id: params.row.id, status: status ? "Published" : "Unpublished" },
                                 optimisticResponse: {
                                     __typename: "Mutation",
-                                    updateProductVisibility: { __typename: "Product", id: params.row.id, visible },
+                                    updateProduct: { __typename: "Product", id: params.row.id, status: status ? "Published" : "Unpublished" },
                                 },
                             });
                         }}
@@ -159,10 +160,7 @@ function ProductsGrid() {
                                             type: input.type,
                                             category: input.category?.id,
                                             tags: input.tags.map((tag) => tag.id),
-                                            variants: input.variants.map((variant) => ({
-                                                name: variant.name,
-                                                image: DamImageBlock.state2Output(DamImageBlock.input2State(variant.image)),
-                                            })),
+                                            colors: input.colors,
                                             articleNumbers: input.articleNumbers,
                                             discounts: input.discounts,
                                             statistics: { views: 0 },
@@ -226,7 +224,7 @@ const productsFragment = gql`
         type
         inStock
         image
-        visible
+        status
         category {
             id
             title
@@ -235,9 +233,12 @@ const productsFragment = gql`
             id
             title
         }
-        variants {
-            image
+        colors {
             name
+            hexCode
+        }
+        variants {
+            id
         }
         articleNumbers
         discounts {
@@ -285,11 +286,11 @@ const createProductMutation = gql`
     }
 `;
 
-const updateProductVisibilityMutation = gql`
-    mutation UpdateProductVisibility($id: ID!, $visible: Boolean!) {
-        updateProductVisibility(id: $id, visible: $visible) {
+const updateProductStatusMutation = gql`
+    mutation UpdateProductStatus($id: ID!, $status: ProductStatus!) {
+        updateProduct(id: $id, input: { status: $status }) {
             id
-            visible
+            status
         }
     }
 `;

demo/admin/src/products/categories/ProductCategoriesTable.tsx

@@ -74,7 +74,12 @@ const columns: GridColDef<GQLProductsCategoriesListFragment>[] = [
                         onPaste={async ({ input, client }) => {
                             await client.mutate<GQLCreateProductCategoryMutation, GQLCreateProductCategoryMutationVariables>({
                                 mutation: createProductMutation,
-                                variables: { input: { ...input, products: [] } },
+                                variables: {
+                                    input: {
+                                        title: input.title,
+                                        slug: input.slug,
+                                    },
+                                },
                             });
                         }}
                         onDelete={async ({ client }) => {

demo/admin/src/products/categories/ProductCategoryForm.tsx

@@ -98,15 +98,15 @@ function ProductCategoryForm({ id }: FormProps): React.ReactElement {
                 variables: { id, input: output, lastUpdatedAt: data?.productCategory.updatedAt },
             });
         } else {
-            const { data: mutationReponse } = await client.mutate<
+            const { data: mutationResponse } = await client.mutate<
                 GQLProductCategoryFormCreateProductCategoryMutation,
                 GQLProductCategoryFormCreateProductCategoryMutationVariables
             >({
                 mutation: createProductCategoryMutation,
                 variables: { input: output },
             });
             if (!event.navigatingBack) {
-                const id = mutationReponse?.createProductCategory.id;
+                const id = mutationResponse?.createProductCategory.id;
                 if (id) {
                     setTimeout(() => {
                         stackSwitchApi.activatePage(`edit`, id);

demo/admin/src/products/future/ProductForm.cometGen.ts

@@ -16,7 +16,7 @@ export const ProductForm: FormConfig<GQLProduct> = {
         { type: "text", name: "slug" },
         { type: "text", name: "description", label: "Description", multiline: true },
         { type: "staticSelect", name: "type", label: "Type" /*, values: from gql schema (TODO overridable)*/ },
-        //TODO { type: "asyncSelect", name: "category", label: "Category" /*, endpoint: from gql schema (overridable)*/ },
+        { type: "asyncSelect", name: "category", rootQuery: "productCategories" },
         { type: "number", name: "price", helperText: "Enter price in this format: 123,45" },
         { type: "boolean", name: "inStock" },
         { type: "date", name: "availableSince" },

demo/admin/src/products/future/ProductsGrid.cometGen.ts

@@ -6,11 +6,11 @@ export const ProductsGrid: GridConfig<GQLProduct> = {
     gqlType: "Product",
     fragmentName: "ProductsGridFuture", // configurable as it must be unique across project
     columns: [
-        { type: "text", name: "title", headerName: "Titel", width: 150 },
-        { type: "text", name: "description", headerName: "Description", width: 150 },
-        { type: "number", name: "price", headerName: "Price", width: 150 },
-        { type: "staticSelect", name: "type" /*, values: from gql schema (TODO overridable)*/ },
-        { type: "date", name: "availableSince" },
-        { type: "dateTime", name: "createdAt" },
+        { type: "text", name: "title", headerName: "Titel", minWidth: 200, maxWidth: 250 },
+        { type: "text", name: "description", headerName: "Description" },
+        { type: "number", name: "price", headerName: "Price", maxWidth: 150 },
+        { type: "staticSelect", name: "type", maxWidth: 150 /*, values: from gql schema (TODO overridable)*/ },
+        { type: "date", name: "availableSince", width: 140 },
+        { type: "dateTime", name: "createdAt", width: 170 },
     ],
 };