Merge branch 'master' into minor

.github/workflows/publish_and_install.yml

@@ -33,32 +33,38 @@ jobs:
         npm install -g verdaccio
         npm install -g wait-on
         tmp_registry_log=`mktemp`
-        nohup verdaccio &>$tmp_registry_log &
+        mkdir -p $HOME/.config/verdaccio
+        cp -v ./.github/workflows/verdaccio/config.yaml $HOME/.config/verdaccio/config.yaml
+        nohup verdaccio --config $HOME/.config/verdaccio/config.yaml &
         wait-on http://localhost:4873
         TOKEN_RES=$(curl -XPUT \
           -H "Content-type: application/json" \
           -d '{ "name": "test", "password": "test" }' \
           'http://localhost:4873/-/user/org.couchdb.user:test')
         TOKEN=$(echo "$TOKEN_RES" | jq -r '.token')
-        npm set registry "http://0.0.0.0:4873"
-        npm set //0.0.0.0:4873/:_authToken $TOKEN
+        npm set //localhost:4873/:_authToken $TOKEN
     - name: Windows dependencies
       if: matrix.os == 'windows-latest'
       run: npm install -g @angular/cli
     - name: Yarn install
       run: |
+        npm i -g yarn
         yarn config set unsafe-perm true
         yarn install --network-timeout 1000000 --prefer-offline
       env:
         CI: true
     - name: Publish to Verdaccio
       run: |
+        nohup verdaccio --config $HOME/.config/verdaccio/config.yaml &
+        wait-on http://localhost:4873
         yarn lerna publish prepatch --preid ci --no-push --no-git-tag-version --no-commit-hooks --force-publish "*" --yes --dist-tag ci --registry http://localhost:4873
     - name: Install via @vendure/create
       run: |
         mkdir -p $HOME/install
         cd $HOME/install
-        npm set registry=http://0.0.0.0:4873
+        nohup verdaccio --config $HOME/.config/verdaccio/config.yaml &
+        wait-on http://localhost:4873
+        npm set registry=http://localhost:4873
         npm dist-tag ls @vendure/create
         npx @vendure/create@ci test-app --ci --use-npm --log-level info
     - name: Server smoke tests

.github/workflows/verdaccio/config.yaml

@@ -10,7 +10,7 @@ plugins: ./plugins
 max_body_size: 1000mb
 web:
   # WebUI is enabled as default, if you want disable it, just uncomment this line
-  enable: false
+  enable: true
   title: Verdaccio
 
 auth:

CHANGELOG.md

@@ -1,3 +1,22 @@
+## <small>2.1.4 (2023-11-24)</small>
+
+
+#### Fixes
+
+* **admin-ui** Fix admin ui code templates (#2545) ([a9e67fe](https://github.com/vendure-ecommerce/vendure/commit/a9e67fe)), closes [#2545](https://github.com/vendure-ecommerce/vendure/issues/2545)
+* **admin-ui** Fix card component colors in dark theme ([c077e15](https://github.com/vendure-ecommerce/vendure/commit/c077e15))
+* **admin-ui** Fix code editor border color for dark mode ([9eb9d9d](https://github.com/vendure-ecommerce/vendure/commit/9eb9d9d))
+* **admin-ui** Fix encoding of configurable arg values ([84764b1](https://github.com/vendure-ecommerce/vendure/commit/84764b1)), closes [#2539](https://github.com/vendure-ecommerce/vendure/issues/2539)
+* **admin-ui** Fix localized custom fields in Promotion & PaymentMethod ([d665ec6](https://github.com/vendure-ecommerce/vendure/commit/d665ec6))
+* **admin-ui** Fix responsive layout of modal dialog for assets ([5176017](https://github.com/vendure-ecommerce/vendure/commit/5176017)), closes [#2537](https://github.com/vendure-ecommerce/vendure/issues/2537)
+* **admin-ui** Fix stack overflow when datetime picker inside a list ([f7b4f46](https://github.com/vendure-ecommerce/vendure/commit/f7b4f46))
+* **core** Fix custom MoneyStrategy handling from plugins ([a09c2b2](https://github.com/vendure-ecommerce/vendure/commit/a09c2b2)), closes [#2527](https://github.com/vendure-ecommerce/vendure/issues/2527)
+* **core** Fix DefaultSearchPlugin for non-default languages (#2515) ([fb0ea13](https://github.com/vendure-ecommerce/vendure/commit/fb0ea13)), closes [#2515](https://github.com/vendure-ecommerce/vendure/issues/2515) [#2197](https://github.com/vendure-ecommerce/vendure/issues/2197)
+* **core** Fix entity hydration postgres edge-case ([9546d1b](https://github.com/vendure-ecommerce/vendure/commit/9546d1b)), closes [#2546](https://github.com/vendure-ecommerce/vendure/issues/2546)
+* **core** Fix i18n custom fields in Promotion & PaymentMethod ([3d6edb5](https://github.com/vendure-ecommerce/vendure/commit/3d6edb5))
+* **core** Log error on misconfigured localized custom fields ([5775447](https://github.com/vendure-ecommerce/vendure/commit/5775447))
+* **core** Relax validation of custom process states ([cf301eb](https://github.com/vendure-ecommerce/vendure/commit/cf301eb))
+
 ## <small>2.1.3 (2023-11-17)</small>
 
 #### Security

docs/docs/guides/developer-guide/custom-permissions/index.md

@@ -81,7 +81,7 @@ For example, let's imagine we are creating a plugin which adds a new entity call
 ```ts title="src/plugins/product-review/constants.ts"
 import { CrudPermissionDefinition } from '@vendure/core';
 
-export const productReview = new CrudPermissionDefinition(ProductReview);
+export const productReview = new CrudPermissionDefinition('ProductReview');
 ```
 
 These permissions can then be used in our resolver:

docs/docs/guides/developer-guide/importing-data/index.md

@@ -182,9 +182,10 @@ The `@vendure/core` package exposes a [`populate()` function](/reference/typescr
 ```ts title="src/my-populate-script.ts"
 import { bootstrap, DefaultJobQueuePlugin } from '@vendure/core';
 import { populate } from '@vendure/core/cli';
+import path from "path";
 
-import { config } from './vendure-config.ts';
-import { initialData } from './my-initial-data.ts';
+import { config } from './vendure-config';
+import { initialData } from './my-initial-data';
 
 const productsCsvFile = path.join(__dirname, 'path/to/products.csv')
 
@@ -198,7 +199,7 @@ const populateConfig = {
 }
 
 populate(
-    () => bootstrap(config),
+    () => bootstrap(populateConfig),
     initialData,
     productsCsvFile,
     'my-channel-token' // optional - used to assign imported 

docs/docs/guides/extending-the-admin-ui/creating-detail-views/index.md

@@ -117,7 +117,7 @@ export class ReviewDetailComponent extends TypedBaseDetailComponent<typeof getRe
     update() {
         const { title, rating, authorName } = this.detailForm.value;
         this.dataService
-            .mutate(updateOrganizationDocument, {
+            .mutate(updateReviewDocument, {
                 input: { id: this.id, title, rating, authorName },
             })
             .subscribe(() => {

docs/docs/guides/extending-the-admin-ui/custom-detail-components/index.md

@@ -23,7 +23,7 @@ Let's imagine that your project has an external content management system (CMS)
 
 ```ts title="src/plugins/cms/ui/components/product-info/product-info.component.ts"
 import { Component, OnInit } from '@angular/core';
-import { switchMap } from 'rxjs';
+import { Observable, switchMap } from 'rxjs';
 import { FormGroup } from '@angular/forms';
 import { DataService, CustomDetailComponent, SharedModule } from '@vendure/admin-ui/core';
 import { CmsDataService } from '../../providers/cms-data.service';

docs/docs/guides/extending-the-admin-ui/custom-form-inputs/index.md

@@ -201,7 +201,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { RelationCustomFieldConfig } from '@vendure/common/lib/generated-types';
-import { CustomFieldControl, DataService, SharedModule } from '@vendure/admin-ui/core';
+import { FormInputComponent, DataService, SharedModule } from '@vendure/admin-ui/core';
 import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 

docs/docs/guides/extending-the-admin-ui/ui-library/index.md

@@ -223,6 +223,19 @@ export function DemoComponent() {
 </TabItem>
 </Tabs>
 
+The `form-grid` class is used to lay out the form fields into a 2-column grid on larger screens, and a single column on smaller screens.
+If you want to force a particular field to always take up the full width (i.e. to span 2 columns at all screen sizes), you can add the
+`form-grid-span` class to that form field.
+
+```html
+<div class="form-grid">
+    // highlight-next-line
+    <vdr-form-field label="Page title" class="form-grid-span">
+        <input type="text" />
+    </vdr-form-field>
+</div>
+```
+
 ## Cards
 
 Cards are used as a general-purpose container for page content, as a way to visually group related sets of components.

e2e-common/vitest.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
     test: {
-        include: '**/*.e2e-spec.ts',
+        include: ['**/*.e2e-spec.ts'],
         /**
          * For local debugging of the e2e tests, we set a very long timeout value otherwise tests will
          * automatically fail for going over the 5 second default timeout.

lerna.json

@@ -1,6 +1,6 @@
 {
     "packages": ["packages/*"],
-    "version": "2.1.3",
+    "version": "2.1.4",
     "npmClient": "yarn",
     "command": {
         "version": {

packages/admin-ui-plugin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vendure/admin-ui-plugin",
-    "version": "2.1.3",
+    "version": "2.1.4",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
     "files": [
@@ -21,8 +21,8 @@
     "devDependencies": {
         "@types/express": "^4.17.8",
         "@types/fs-extra": "^9.0.1",
-        "@vendure/common": "^2.1.3",
-        "@vendure/core": "^2.1.3",
+        "@vendure/common": "^2.1.4",
+        "@vendure/core": "^2.1.4",
         "express": "^4.17.1",
         "rimraf": "^3.0.2",
         "typescript": "4.9.5"

packages/admin-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vendure/admin-ui",
-    "version": "2.1.3",
+    "version": "2.1.4",
     "license": "MIT",
     "scripts": {
         "ng": "ng",
@@ -49,7 +49,7 @@
         "@ng-select/ng-select": "^11.1.1",
         "@ngx-translate/core": "^15.0.0",
         "@ngx-translate/http-loader": "^8.0.0",
-        "@vendure/common": "^2.1.3",
+        "@vendure/common": "^2.1.4",
         "@webcomponents/custom-elements": "^1.6.0",
         "apollo-angular": "^5.0.0",
         "apollo-upload-client": "^17.0.0",

packages/admin-ui/src/lib/core/src/common/utilities/configurable-operation-utils.ts

@@ -1,4 +1,4 @@
-import { ConfigArgType, CustomFieldType } from '@vendure/common/lib/shared-types';
+import { ConfigArgType } from '@vendure/common/lib/shared-types';
 import { assertNever } from '@vendure/common/lib/shared-utils';
 
 import {
@@ -15,7 +15,14 @@ import {
  */
 export function getConfigArgValue(value: any) {
     try {
-        return value != null ? JSON.parse(value) : undefined;
+        const result = value != null ? JSON.parse(value) : undefined;
+        if (result && typeof result === 'object' && !Array.isArray(result)) {
+            // There is an edge-case where the value is a valid JSON-encoded string and
+            // will get parsed as an object, but we actually want it to be a string.
+            return JSON.stringify(result);
+        } else {
+            return result;
+        }
     } catch (e: any) {
         return value;
     }
@@ -34,9 +41,9 @@ export function configurableDefinitionToInstance(
     return {
         ...def,
         args: def.args.map(arg => ({
-                ...arg,
-                value: getDefaultConfigArgValue(arg),
-            })),
+            ...arg,
+            value: getDefaultConfigArgValue(arg),
+        })),
     } as ConfigurableOperation;
 }
 

packages/admin-ui/src/lib/core/src/common/version.ts

@@ -1,2 +1,2 @@
 // Auto-generated by the set-version.js script.
-export const ADMIN_UI_VERSION = '2.1.3';
+export const ADMIN_UI_VERSION = '2.1.4';

packages/admin-ui/src/lib/core/src/providers/nav-builder/nav-builder-types.ts

@@ -62,7 +62,18 @@ export interface NavMenuSection {
     displayMode?: 'regular' | 'settings';
     /**
      * @description
-     * Control the display of this item based on the user permissions.
+     * Control the display of this item based on the user permissions. Note: if you attempt to pass a
+     * {@link PermissionDefinition} object, you will get a compilation error. Instead, pass the plain
+     * string version. For example, if the permission is defined as:
+     * ```ts
+     * export const MyPermission = new PermissionDefinition('ProductReview');
+     * ```
+     * then the generated permission strings will be:
+     *
+     * - `CreateProductReview`
+     * - `ReadProductReview`
+     * - `UpdateProductReview`
+     * - `DeleteProductReview`
      */
     requiresPermission?: string | ((userPermissions: string[]) => boolean);
     collapsible?: boolean;
@@ -116,6 +127,21 @@ export interface ActionBarItem {
     buttonColor?: 'primary' | 'success' | 'warning';
     buttonStyle?: 'solid' | 'outline' | 'link';
     icon?: string;
+    /**
+     * @description
+     * Control the display of this item based on the user permissions. Note: if you attempt to pass a
+     * {@link PermissionDefinition} object, you will get a compilation error. Instead, pass the plain
+     * string version. For example, if the permission is defined as:
+     * ```ts
+     * export const MyPermission = new PermissionDefinition('ProductReview');
+     * ```
+     * then the generated permission strings will be:
+     *
+     * - `CreateProductReview`
+     * - `ReadProductReview`
+     * - `UpdateProductReview`
+     * - `DeleteProductReview`
+     */
     requiresPermission?: string | string[];
 }
 

packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.scss

@@ -2,7 +2,7 @@
 :host {
     display: flex;
     flex-direction: column;
-    height: 70vh;
+    //height: 70vh;
     overflow-y: auto;
 }
 

packages/admin-ui/src/lib/core/src/shared/components/configurable-input/configurable-input.component.ts

@@ -21,11 +21,7 @@ import {
     Validator,
     Validators,
 } from '@angular/forms';
-import { ConfigArgType } from '@vendure/common/lib/shared-types';
-import { assertNever } from '@vendure/common/lib/shared-utils';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
-
-import { InputComponentConfig } from '../../../common/component-registry-types';
 import {
     ConfigArg,
     ConfigArgDefinition,

packages/admin-ui/src/lib/core/src/shared/components/datetime-picker/datetime-picker.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import dayjs from 'dayjs';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { distinctUntilChanged, map } from 'rxjs/operators';
 
 import { dayOfWeekIndex } from './constants';
 import { CalendarView, DayCell, DayOfWeek } from './types';
@@ -19,7 +19,10 @@ export class DatetimePickerService {
     private jumping = false;
 
     constructor() {
-        this.selected$ = this.selectedDatetime$.pipe(map(value => value && value.toDate()));
+        this.selected$ = this.selectedDatetime$.pipe(
+            map(value => value && value.toDate()),
+            distinctUntilChanged((a, b) => a?.getTime() === b?.getTime()),
+        );
         this.viewing$ = this.viewingDatetime$.pipe(map(value => value.toDate()));
         this.weekStartDayIndex = dayOfWeekIndex['mon'];
         this.calendarView$ = combineLatest(this.viewingDatetime$, this.selectedDatetime$).pipe(

packages/admin-ui/src/lib/core/src/shared/components/modal-dialog/modal-dialog.component.scss

@@ -5,6 +5,29 @@
     &.modal-valign-bottom .modal {
         justify-content: flex-end;
     }
+    .modal-dialog {
+        display: flex;
+    }
+    .modal-content-wrapper {
+        flex: 1;
+        display: flex;
+    }
+    .modal-dialog .modal-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+    @media screen and (max-height: 700px) {
+        .modal-dialog .modal-content {
+            padding: 0.8rem;
+        }
+        .modal-header, .modal-header--accessible {
+            padding-bottom: 0.8rem;
+        }
+        .modal-footer {
+            padding-top: 0.8rem;
+        }
+    }
 }
 
 .modal-body {