gentics · deckdom · Jan 8, 2025 · Dec 16, 2024
diff --git a/cms-ui/apps/editor-ui-e2e/src/e2e/media-management.cy.ts b/cms-ui/apps/editor-ui-e2e/src/e2e/media-management.cy.ts
@@ -6,7 +6,7 @@ import {
     TestSize,
     minimalNode,
 } from '@gentics/e2e-utils';
-import { AUTH_ADMIN, FIXTURE_TEST_FILE_TXT_1, FIXTURE_TEST_IMAGE_JPG_1 } from '../support/common';
+import { AUTH_ADMIN, FIXTURE_TEST_FILE_TXT_1, FIXTURE_TEST_IMAGE_JPG_1, FIXTURE_TEST_IMAGE_JPG_2 } from '../support/common';
 
 describe('Media Management', () => {
 
@@ -115,4 +115,51 @@ describe('Media Management', () => {
             });
         });
     });
+
+    it('should display the updated value even after switching object-properties', () => {
+        cy.uploadFiles(ITEM_TYPE_IMAGE, [FIXTURE_TEST_IMAGE_JPG_2]).then(allFiles => {
+            const IMAGE = allFiles[FIXTURE_TEST_IMAGE_JPG_2];
+            const OBJECT_PROPERTY_EDITING = 'test_color';
+            const OBJECT_PROPERTY_OTHER = 'copyright';
+
+            const COLOR_ID = 2;
+
+            /* Open the Folder Properties and select a Object-Property to edit
+             * ---------------------------- */
+            cy.findList(ITEM_TYPE_IMAGE)
+                .findItem(IMAGE.id)
+                .itemAction('properties');
+
+            cy.openObjectPropertyEditor(OBJECT_PROPERTY_EDITING)
+                .findTagEditorElement(TagPropertyType.SELECT)
+                .select(COLOR_ID);
+
+            /* Save the Object-Property changes
+             * ---------------------------- */
+            cy.intercept({
+                method: 'POST',
+                pathname: '/rest/image/save/**',
+            }, req => {
+                req.alias = ALIAS_UPDATE_REQUEST;
+            });
+
+            cy.editorAction('save');
+            // Wait for update to be finished
+            cy.wait(ALIAS_UPDATE_REQUEST);
+            // Wait 2sec for the state updates to propagate
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(2_000);
+
+            // Switch to another object-property
+            cy.openObjectPropertyEditor(OBJECT_PROPERTY_OTHER);
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(1_000);
+
+            // Switch back to the original one
+            cy.openObjectPropertyEditor(OBJECT_PROPERTY_EDITING)
+                .findTagEditorElement(TagPropertyType.SELECT)
+                .find('.view-value')
+                .should('have.attr', 'data-value', COLOR_ID);
+        });
+    });
 });
diff --git a/cms-ui/apps/editor-ui-e2e/src/support/commands.ts b/cms-ui/apps/editor-ui-e2e/src/support/commands.ts
@@ -153,38 +153,35 @@ Cypress.Commands.add('uploadFiles', { prevSubject: false }, (type, fixtureNames,
         req.alias = `_upload_req_${fileName}`;
     });
 
-    // Wait till elements have been reloaded
-    cy.intercept({
-        method: 'GET',
-        pathname: '/rest/folder/getPages/*',
-    }).as('folderLoad');
-
     return cy.loadBinaries(fixtureNames, { applyAlias: true }).then(binaries => {
         const output: Record<string, any> = {};
         let main: Cypress.Chainable<any>;
 
+        if (options?.log !== false) {
+            Cypress.log({
+                type: 'parent',
+                name: 'upload files',
+                message: options?.dragAndDrop ? 'via drag and drop' : 'via regular upload',
+                consoleProps: () => ({
+                    files: fixtureNames,
+                }),
+            });
+        }
+
         if (options?.dragAndDrop) {
             const transfer = new DataTransfer();
             // Put the binaries/Files into the transfer
             Object.values(binaries).forEach(file => {
                 transfer.items.add(file);
             });
 
-            if (options?.log !== false) {
-                Cypress.log({
-                    name: 'upload',
-                    type: 'parent',
-                    message: `via drag'n'drop: ${Object.values(binaries).map(bin => bin.name).join(', ')}`,
-                });
-            }
-
             main = cy.get('folder-contents > [data-action="file-drop"]', { log: false }).trigger('drop', {
                 dataTransfer: transfer,
                 force: true,
                 log: false,
             });
         } else {
-            main = cy.findList(type)
+            main = cy.findList(type, { log: false })
                 .find('.list-header .header-controls [data-action="upload-item"] input[type="file"]', { log: false })
                 .selectFile(fixtureNames.map(entry => '@' + (typeof entry === 'string' ? entry : entry.fixturePath)), { force: true });
         }
@@ -193,15 +190,22 @@ Cypress.Commands.add('uploadFiles', { prevSubject: false }, (type, fixtureNames,
             for (const entry of fixtureNames) {
                 const data = normalizeToImportBinary(entry);
 
-                cy.wait(`@_upload_req_${data.name}`).then(intercept => {
+                cy.wait(`@_upload_req_${data.name}`, { log: false }).then(intercept => {
                     const res = intercept.response?.body;
-                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                    expect(res.success).to.be.true;
+                    expect(res.success).to.equal(true);
                     output[data.fixturePath] = res.file;
+
+                    if (options?.log !== false) {
+                        Cypress.log({
+                            type: 'child',
+                            name: 'file uploaded',
+                            message: data.name,
+                        });
+                    }
                 });
             }
 
-            return cy.wait('@folderLoad').then(() => cy.wrap(output, { log: false }));
+            return cy.wrap(output, { log: false });
         })
     });
 });

diff --git a/cms-ui/apps/editor-ui/src/app/state/providers/folder-actions/folder-actions.service.ts b/cms-ui/apps/editor-ui/src/app/state/providers/folder-actions/folder-actions.service.ts
@@ -32,7 +32,7 @@ import {
     ElasticSearchQuery,
     ElasticSearchQueryResponse,
     ElasticSearchTypeSearchOptions,
-    File,
+    File as CMSFile,
     FileCopyRequest,
     FileCreateRequest,
     FileListResponse,
@@ -766,7 +766,7 @@ export class FolderActionsService {
     /**
      * Get an individual file.
      */
-    getFile(fileId: number): Promise<File<Raw>> {
+    getFile(fileId: number): Promise<CMSFile<Raw>> {
         return this.getItem(fileId, 'file');
     }
 
@@ -1169,7 +1169,7 @@ export class FolderActionsService {
     getItem(itemId: number, type: 'folder', options?: FolderRequestOptions, throwError?: boolean): Promise<Folder<Raw>>;
     getItem(itemId: number, type: 'page', options?: PageRequestOptions, throwError?: boolean): Promise<Page<Raw>>;
     getItem(itemId: number, type: 'image', options?: ImageRequestOptions, throwError?: boolean): Promise<Image<Raw>>;
-    getItem(itemId: number, type: 'file', options?: FolderRequestOptions, throwError?: boolean): Promise<File<Raw>>;
+    getItem(itemId: number, type: 'file', options?: FolderRequestOptions, throwError?: boolean): Promise<CMSFile<Raw>>;
     getItem(itemId: number, type: 'form', options?: FormRequestOptions, throwError?: boolean): Promise<Form<Raw>>;
     getItem(itemId: number | string, type: 'template', options?: TemplateRequestOptions, throwError?: boolean): Promise<Template<Raw>>;
     getItem(itemId: number | string, type: FolderItemOrTemplateType, options?: any, throwError?: boolean): Promise<InheritableItem<Raw> | Template<Raw>>;
@@ -1751,7 +1751,7 @@ export class FolderActionsService {
     /**
      * Update the editable properties of a file.
      */
-    updateFileProperties(fileId: number, properties: EditableFileProps, postUpdateBehavior?: PostUpdateBehavior): Promise<File<Raw> | void> {
+    updateFileProperties(fileId: number, properties: EditableFileProps, postUpdateBehavior?: PostUpdateBehavior): Promise<CMSFile<Raw> | void> {
         return this.updateItem('file', fileId, properties, {}, postUpdateBehavior);
     }
 
@@ -2045,7 +2045,7 @@ export class FolderActionsService {
         }
     }
 
-    localizeFile(fileId: number, channelId: number): Promise<File<Raw>> {
+    localizeFile(fileId: number, channelId: number): Promise<CMSFile<Raw>> {
         return this.localizeItem('file', fileId, channelId);
     }
 
@@ -2059,7 +2059,7 @@ export class FolderActionsService {
      */
     localizeItem(type: 'folder', itemId: number, channelId: number): Promise<Folder<Raw>>;
     localizeItem(type: 'page', itemId: number, channelId: number): Promise<Page<Raw>>;
-    localizeItem(type: 'file', itemId: number, channelId: number): Promise<File<Raw>>;
+    localizeItem(type: 'file', itemId: number, channelId: number): Promise<CMSFile<Raw>>;
     localizeItem(type: 'image', itemId: number, channelId: number): Promise<Image<Raw>>;
     localizeItem(type: FolderItemType, itemId: number, channelId: number): Promise<InheritableItem<Raw>>;
     async localizeItem(type: FolderItemType, itemId: number, channelId: number): Promise<InheritableItem<Raw> | void> {
@@ -2491,7 +2491,7 @@ export class FolderActionsService {
      * Copy a file or image to the target folder. Internally this creates a copy in the source folder and then
      * moves the new object to the target folder.
      */
-    copyFilesToFolder(sourceFiles: File<Raw>[], sourceNodeId: number, targetFolderId: number, targetNodeId: number): Promise<boolean> {
+    copyFilesToFolder(sourceFiles: CMSFile<Raw>[], sourceNodeId: number, targetFolderId: number, targetNodeId: number): Promise<boolean> {
         if (!sourceFiles.length) {
             return Promise.resolve(false);
         }
@@ -2545,7 +2545,7 @@ export class FolderActionsService {
             });
     }
 
-    private moveFileToFolder(file: File, targetFolderId: number, targetNodeId: number): Promise<void> {
+    private moveFileToFolder(file: CMSFile, targetFolderId: number, targetNodeId: number): Promise<void> {
         const type = file.type;
         this.appState.dispatch(new StartListSavingAction(type));
 
@@ -2651,7 +2651,7 @@ export class FolderActionsService {
      * Uploads a file to the backend. If uploads are already in progress,
      * the new files are added to the current upload state.
      */
-    uploadFiles(type: 'file' | 'image', files: any[], folderId: number): Observable<UploadResponse[]> {
+    uploadFiles(type: 'file' | 'image', files: File[], folderId: number): Observable<UploadResponse[]> {
         if (type !== 'image' && type !== 'file') {
             // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
             console.error(`Can not upload ${type}.`);
@@ -2685,6 +2685,7 @@ export class FolderActionsService {
                 if (failed.length > 0) {
                     // If the server provides an error message, show it to the user.
                     const fileErrors = failed.map(res => {
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
                         const fileError = (res.error.data?.messages?.[0]?.message || res.error.message || '')
                             .replace(/\.$/, '');
                         return [
@@ -2712,7 +2713,7 @@ export class FolderActionsService {
                 if (completed.length > 0) {
                     // Because the dimensions of an Image can only be accessed async, we need to use promises for
                     // all entities. If the dimensions are assumed to be available, a race condition can result.
-                    const entitiesLoader: Promise<File<Raw> | Image<Raw>>[] = completed.map(res => {
+                    const entitiesLoader: Promise<CMSFile<Raw> | Image<Raw>>[] = completed.map(res => {
                         if (type !== 'image') {
                             return Promise.resolve(res.item);
                         }
@@ -2739,7 +2740,7 @@ export class FolderActionsService {
     /**
      * Uploads a file to replace an existing file.
      */
-    replaceFile(type: 'image' | 'file', fileId: number, file: any, fileName?: string, options?: FileReplaceOptions): Observable<UploadResponse> {
+    replaceFile(type: 'image' | 'file', fileId: number, file: File, fileName?: string, options?: FileReplaceOptions): Observable<UploadResponse> {
         if (type !== 'image' && type !== 'file') {
             // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
             console.error(`Can not upload ${type}.`);
@@ -2886,7 +2887,7 @@ export class FolderActionsService {
 
         return this.client.file.create(payload).pipe(
             switchMap(uploadResponse => {
-                let loader: Observable<File | Image>;
+                let loader: Observable<CMSFile | Image>;
 
                 // Refetch uploaded to since response from `POST file/create` differs from default entity data.
                 if (type === 'file') {

diff --git a/cms-ui/libs/cms-models/src/lib/models/file.ts b/cms-ui/libs/cms-models/src/lib/models/file.ts
@@ -7,7 +7,7 @@ import { DefaultModelType, ModelType, Normalizable, Raw } from './type-util';
  * These are the user-editable properties of a File object.
  */
 export type EditableFileProps = Partial<Pick<FileOrImage, 'name' | 'description' | 'forceOnline'
-| 'niceUrl' | 'alternateUrls' | 'customCdate' | 'customEdate'>>;
+| 'niceUrl' | 'alternateUrls' | 'customCdate' | 'customEdate' | 'tags'>>;
 
 /**
  * Superinterface for CMS files and images.

diff --git a/cms-ui/libs/e2e-utils/src/lib/cypress-commands.ts b/cms-ui/libs/e2e-utils/src/lib/cypress-commands.ts
@@ -423,20 +423,20 @@ export function registerCommonCommands(): void {
     });
 
     Cypress.Commands.add('findTableRowContainingText', {prevSubject: 'element'}, (subject, text) => {
-        return cy.wrap(subject)
+        return cy.wrap(subject, { log: false })
             .find('.grid-row')
             .contains(text)
             .parents('.grid-row');
     });
 
     Cypress.Commands.add('selectTableRow', {prevSubject: 'element'}, (subject) => {
-        return cy.wrap(subject)
+        return cy.wrap(subject, { log: false })
             .find('gtx-checkbox.selection-checkbox')
             .click();
     });
 
     Cypress.Commands.add('expandTrableRow', {prevSubject: 'element'}, (subject) => {
-        return cy.wrap(subject)
+        return cy.wrap(subject, { log: false })
             .find('.row-expansion-wrapper')
             .click();
     });

diff --git a/cms-ui/libs/ui-core/src/lib/components/select/select.component.html b/cms-ui/libs/ui-core/src/lib/components/select/select.component.html
@@ -17,6 +17,7 @@
             class="view-value select-input"
             [attr.tabindex]="disabled ? null : 0"
             [attr.disabled]="disabled ? true : null"
+            [attr.data-value]="valueArray"
             [class.has-disabled-unknowns]="disableUnknownValues && unknownValues.length > 0"
             data-context-trigger
             (blur)="inputBlur($event)"

diff --git a/cms-ui/libs/ui-core/src/lib/components/select/select.component.ts b/cms-ui/libs/ui-core/src/lib/components/select/select.component.ts
@@ -136,7 +136,7 @@ export class SelectComponent
     @ContentChildren(SelectOptionGroupDirective, { descendants: false })
     private selectOptionGroups: QueryList<SelectOptionGroupDirective>;
 
-    private valueArray: (number | string)[] = [];
+    public valueArray: (number | string)[] = [];
 
     // An array of abstracted containers for options, which allows us to treat options and groups in a
     // consistent way.
@@ -173,7 +173,6 @@ export class SelectComponent
         }
     }
 
-
     ngAfterViewInit(): void {
         // Update the value if there are any changes to the options
         this.subscriptions.push(this.selectOptions.changes.subscribe(() => {