From 0c95091f452685a44ac5eb7877d1e1cae3f7362a Mon Sep 17 00:00:00 2001 From: Nicolas Molina Monroy Date: Wed, 27 Nov 2024 15:25:41 -0400 Subject: [PATCH] chore(edit-content): fix error with folder id (#30792) ### Proposed Changes This pull request includes several changes to improve the handling of file selection dialogs and update identifiers in various files. The most important changes focus on updating the dialog mask style, refactoring the way mime types are handled, and replacing identifier references with id references. ### Dialog mask style updates: * Updated the dialog mask style class to use `p-dialog-mask-dynamic` instead of `p-dialog-mask-transparent-ai` in multiple instances within the `dot-edit-content-file-field.component.ts` file. [[1]](diffhunk://#diff-3687f1cb71260d13db6856f91651dec140a064f3921bf30f342a96ee95cfda3bL326-R329) [[2]](diffhunk://#diff-3687f1cb71260d13db6856f91651dec140a064f3921bf30f342a96ee95cfda3bL370-R373) [[3]](diffhunk://#diff-3687f1cb71260d13db6856f91651dec140a064f3921bf30f342a96ee95cfda3bL402-R426) ### Mime type handling updates: * Refactored the `DotSelectExistingFileComponent` to use `mimeTypes` instead of `inputType` for better flexibility and clarity. [[1]](diffhunk://#diff-18bf6e06cc08560259db33d84f324194172c43e47220f07b1de0990cf71077acL14-R21) [[2]](diffhunk://#diff-18bf6e06cc08560259db33d84f324194172c43e47220f07b1de0990cf71077acL77-R77) [[3]](diffhunk://#diff-3687f1cb71260d13db6856f91651dec140a064f3921bf30f342a96ee95cfda3bL402-R426) ### Identifier to id updates: * Replaced `identifier` with `id` in various files to standardize the usage of identifiers across the codebase. This change affects the `dot-edit-content-host-folder-field.interface.ts` and `dot-edit-content.service.ts` files. [[1]](diffhunk://#diff-042eb49d046776a8aac7105e9931c066ef6eae70ff5c50b4a7f4217371c1fc3dL7-R7) [[2]](diffhunk://#diff-042eb49d046776a8aac7105e9931c066ef6eae70ff5c50b4a7f4217371c1fc3dL30-R30) [[3]](diffhunk://#diff-ee2c6ce1c6a997f7b2b87106dbc020dba9d7f42fcdc29caebe547f6963e7caabL91-R91) [[4]](diffhunk://#diff-ee2c6ce1c6a997f7b2b87106dbc020dba9d7f42fcdc29caebe547f6963e7caabL136-R136) [[5]](diffhunk://#diff-ee2c6ce1c6a997f7b2b87106dbc020dba9d7f42fcdc29caebe547f6963e7caabL207-R207) ### Miscellaneous updates: * Updated the `Language.properties` file to include a new message key for selecting existing images. * Removed the `INPUT_TYPE` and `INPUT_TYPES` imports from the `dot-select-existing-file.component.ts` file. ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) --- .../dotcms-theme/components/_dialog.scss | 5 +--- .../dot-select-existing-file.component.ts | 7 +++-- .../store/select-existing-file.store.ts | 2 +- .../dot-edit-content-file-field.component.ts | 27 ++++++++++++------- ...dit-content-host-folder-field.interface.ts | 4 +-- .../lib/services/dot-edit-content.service.ts | 6 ++--- .../libs/edit-content/src/lib/utils/mocks.ts | 16 +++++------ .../WEB-INF/messages/Language.properties | 1 + 8 files changed, 36 insertions(+), 32 deletions(-) diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss index f75b040ddf30..7f1a8956d9fb 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_dialog.scss @@ -113,10 +113,7 @@ align-items: center; } -.p-dialog-mask.p-dialog-mask-transparent-ai.p-component-overlay { - background-color: transparent; - -webkit-backdrop-filter: blur($blur-md); - backdrop-filter: blur($blur-md); +.p-dialog-mask.p-dialog-mask-dynamic.p-component-overlay { padding: 0; align-items: center; } diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts index 445f2eb301c4..e6d3f1999960 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts @@ -11,7 +11,6 @@ import { ButtonModule } from 'primeng/button'; import { DynamicDialogRef, DynamicDialogConfig } from 'primeng/dynamicdialog'; import { DotFileFieldUploadService } from '@dotcms/edit-content/fields/dot-edit-content-file-field/services/upload-file/upload-file.service'; -import { INPUT_TYPE, INPUT_TYPES } from '@dotcms/edit-content/models/dot-edit-content-file.model'; import { DotMessagePipe } from '@dotcms/ui'; import { DotDataViewComponent } from './components/dot-dataview/dot-dataview.component'; @@ -19,7 +18,7 @@ import { DotSideBarComponent } from './components/dot-sidebar/dot-sidebar.compon import { SelectExisingFileStore } from './store/select-existing-file.store'; type DialogData = { - inputType: INPUT_TYPE; + mimeTypes: string[]; }; @Component({ @@ -74,8 +73,8 @@ export class DotSelectExistingFileComponent implements OnInit { ngOnInit() { const data = this.#dialogConfig?.data as DialogData; - const inputType = data?.inputType === INPUT_TYPES.Image ? ['image'] : []; - this.store.setMimeTypes(inputType); + const mimeTypes = data?.mimeTypes ?? []; + this.store.setMimeTypes(mimeTypes); this.store.loadContent(); } diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts index 7d200a0deb48..3d0dffe7b0ba 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts @@ -94,7 +94,7 @@ export const SelectExisingFileStore = signalStore( content: { ...store.content(), status: ComponentStatus.LOADING } }) ), - map((event) => (event ? event?.node?.data?.identifier : SYSTEM_HOST_ID)), + map((event) => (event ? event?.node?.data?.id : SYSTEM_HOST_ID)), filter((identifier) => { const hasIdentifier = !!identifier; diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts index 0f7116f7814e..7f6f52685852 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts +++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts @@ -21,7 +21,11 @@ import { filter, map } from 'rxjs/operators'; import { DotAiService, DotMessageService } from '@dotcms/data-access'; import { DotCMSContentTypeField, DotGeneratedAIImage } from '@dotcms/dotcms-models'; -import { INPUT_TYPE, UploadedFile } from '@dotcms/edit-content/models/dot-edit-content-file.model'; +import { + INPUT_TYPE, + INPUT_TYPES, + UploadedFile +} from '@dotcms/edit-content/models/dot-edit-content-file.model'; import { DotDropZoneComponent, DotMessagePipe, @@ -282,7 +286,6 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O closeOnEscape: false, draggable: false, keepInViewport: false, - maskStyleClass: 'p-dialog-mask-transparent', modal: true, resizable: false, position: 'center', @@ -323,7 +326,7 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O closeOnEscape: false, draggable: false, keepInViewport: false, - maskStyleClass: 'p-dialog-mask-transparent-ai', + maskStyleClass: 'p-dialog-mask-dynamic', resizable: false, modal: true, width: '90%', @@ -367,7 +370,7 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O closeOnEscape: false, draggable: false, keepInViewport: false, - maskStyleClass: 'p-dialog-mask-transparent-ai', + maskStyleClass: 'p-dialog-mask-dynamic', resizable: false, modal: true, width: '90%', @@ -399,9 +402,14 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O * @memberof DotEditContentFileFieldComponent */ showSelectExistingFileDialog() { - const header = this.#dotMessageService.get( - 'dot.file.field.dialog.select.existing.file.header' - ); + const fieldType = this.$field().fieldType; + const title = + fieldType === INPUT_TYPES.Image + ? 'dot.file.field.dialog.select.existing.image.header' + : 'dot.file.field.dialog.select.existing.file.header'; + const mimeTypes = fieldType === INPUT_TYPES.Image ? ['image'] : []; + + const header = this.#dotMessageService.get(title); this.#dialogRef = this.#dialogService.open(DotSelectExistingFileComponent, { header, @@ -409,14 +417,13 @@ export class DotEditContentFileFieldComponent implements ControlValueAccessor, O closeOnEscape: false, draggable: false, keepInViewport: false, - maskStyleClass: 'p-dialog-mask-transparent-ai', + maskStyleClass: 'p-dialog-mask-dynamic', resizable: false, modal: true, width: '90%', style: { 'max-width': '1040px' }, data: { - inputType: this.$field().fieldType, - acceptedFiles: this.store.acceptedFiles() + mimeTypes } }); diff --git a/core-web/libs/edit-content/src/lib/models/dot-edit-content-host-folder-field.interface.ts b/core-web/libs/edit-content/src/lib/models/dot-edit-content-host-folder-field.interface.ts index 58369e26e8b9..66a86b242942 100644 --- a/core-web/libs/edit-content/src/lib/models/dot-edit-content-host-folder-field.interface.ts +++ b/core-web/libs/edit-content/src/lib/models/dot-edit-content-host-folder-field.interface.ts @@ -4,7 +4,7 @@ export type TreeNodeData = { type: 'site' | 'folder'; path: string; hostname: string; - identifier: string; + id: string; }; export type TreeNodeItem = TreeNode; @@ -27,7 +27,7 @@ export interface TreeNodeSelectEvent { } export interface DotFolder { - identifier: string; + id: string; hostName: string; path: string; addChildrenAllowed: boolean; diff --git a/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts b/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts index b9fa630188b4..72a3d665b09c 100644 --- a/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts +++ b/core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts @@ -88,7 +88,7 @@ export class DotEditContentService { key: site.hostname, label: `//${site.hostname}`, data: { - identifier: site.identifier, + id: site.identifier, hostname: `//${site.hostname}`, path: '', type: 'site' @@ -133,7 +133,7 @@ export class DotEditContentService { key: `${folder.hostName}${folder.path}`.replace(/[/]/g, ''), label: `//${folder.hostName}${folder.path}`, data: { - identifier: folder.identifier, + id: folder.id, hostname: `//${folder.hostName}`, path: folder.path, type: 'folder' @@ -204,7 +204,7 @@ export class DotEditContentService { key: site.hostname, label: `//${site.hostname}`, data: { - identifier: site.identifier, + id: site.identifier, hostname: `//${site.hostname}`, path: '', type: 'site' diff --git a/core-web/libs/edit-content/src/lib/utils/mocks.ts b/core-web/libs/edit-content/src/lib/utils/mocks.ts index 103368b5e3a8..036abef0a68c 100644 --- a/core-web/libs/edit-content/src/lib/utils/mocks.ts +++ b/core-web/libs/edit-content/src/lib/utils/mocks.ts @@ -1303,7 +1303,7 @@ export const TREE_SELECT_SITES_MOCK: TreeNodeItem[] = [ key: 'demo.dotcms.com', label: 'demo.dotcms.com', data: { - identifier: 'demo.dotcms.com', + id: 'demo.dotcms.com', hostname: 'demo.dotcms.com', path: '', type: 'site' @@ -1315,7 +1315,7 @@ export const TREE_SELECT_SITES_MOCK: TreeNodeItem[] = [ key: 'nico.dotcms.com', label: 'nico.dotcms.com', data: { - identifier: 'nico.dotcms.com', + id: 'nico.dotcms.com', hostname: 'nico.dotcms.com', path: '', type: 'site' @@ -1327,7 +1327,7 @@ export const TREE_SELECT_SITES_MOCK: TreeNodeItem[] = [ key: 'System Host', label: 'System Host', data: { - identifier: 'System Host', + id: 'System Host', hostname: 'System Host', path: '', type: 'site' @@ -1342,7 +1342,7 @@ export const TREE_SELECT_MOCK: TreeNodeItem[] = [ key: 'demo.dotcms.com', label: 'demo.dotcms.com', data: { - identifier: 'demo.dotcms.com', + id: 'demo.dotcms.com', hostname: 'demo.dotcms.com', path: '', type: 'site' @@ -1354,7 +1354,7 @@ export const TREE_SELECT_MOCK: TreeNodeItem[] = [ key: 'demo.dotcms.comlevel1', label: 'demo.dotcms.com/level1/', data: { - identifier: 'demo.dotcms.comlevel1', + id: 'demo.dotcms.comlevel1', hostname: 'demo.dotcms.com', path: '/level1/', type: 'folder' @@ -1366,7 +1366,7 @@ export const TREE_SELECT_MOCK: TreeNodeItem[] = [ key: 'demo.dotcms.comlevel1child1', label: 'demo.dotcms.com/level1/child1/', data: { - identifier: 'demo.dotcms.comlevel1child1', + id: 'demo.dotcms.comlevel1child1', hostname: 'demo.dotcms.com', path: '/level1/child1/', type: 'folder' @@ -1380,7 +1380,7 @@ export const TREE_SELECT_MOCK: TreeNodeItem[] = [ key: 'demo.dotcms.comlevel2', label: 'demo.dotcms.com/level2/', data: { - identifier: 'demo.dotcms.comlevel2', + id: 'demo.dotcms.comlevel2', hostname: 'demo.dotcms.com', path: '/level2/', type: 'folder' @@ -1394,7 +1394,7 @@ export const TREE_SELECT_MOCK: TreeNodeItem[] = [ key: 'nico.dotcms.com', label: 'nico.dotcms.com', data: { - identifier: 'nico.dotcms.com', + id: 'nico.dotcms.com', hostname: 'nico.dotcms.com', path: '', type: 'site' diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties index cfadf06265f1..b9bb8ab55baf 100644 --- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties +++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties @@ -1191,6 +1191,7 @@ dot.file.field.action.import.from.url=Import from URL dot.file.field.action.import.from.url.error.message=The URL you requested is not valid. Please try again. dot.file.field.action.remove=Remove dot.file.field.dialog.select.existing.file.header=Select Existing File +dot.file.field.dialog.select.existing.image.header=Select Existing Image dot.file.field.dialog.select.existing.file.table.emptymessage=No content found dot.file.field.dialog.select.existing.file.table.thumbnail=Thumbnail dot.file.field.dialog.select.existing.file.table.search=Search content