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 · Nov 27, 2024 · 0c95091 · 0c95091
1 parent 2e11692
commit 0c95091
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 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
@@ -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/...tent-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts b/...tent-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts
@@ -11,15 +11,14 @@ 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';
 import { DotSideBarComponent } from './components/dot-sidebar/dot-sidebar.component';
 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/...ontent-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts b/...ontent-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/...ntent/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.component.ts b/...ntent/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,24 +402,28 @@ 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,
             appendTo: 'body',
             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
@@ -4,7 +4,7 @@ export type TreeNodeData = {
     type: 'site' | 'folder';
     path: string;
     hostname: string;
-    identifier: string;
+    id: string;
 };
 
 export type TreeNodeItem = TreeNode<TreeNodeData>;
@@ -27,7 +27,7 @@ export interface TreeNodeSelectEvent<T> {
 }
 
 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
@@ -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
@@ -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
@@ -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