chore(edit-content): For Image Field only image files should be displayed.

[nicobytes]

Parent Isssue

#30060

Proposed Changes

This pull request includes several updates to the core-web/libs/edit-content library, focusing on refactoring and improving the file field preview and selection components. The most important changes include the introduction of a new FileInfo type, updates to the DotFileFieldPreviewComponent, and modifications to the DotSelectExistingFileComponent and its store.

Refactoring and Type Definitions:

• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts: Introduced FileInfo type to consolidate file-related properties and updated the component to use this new type. [1] [2]
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts: Added DialogData type for better type safety in dialog configurations. [1] [2]

Component Updates:

• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html: Refactored to use fileInfo instead of multiple individual variables for file properties. [1] [2] [3]
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts: Updated the component initialization and methods to work with the new FileInfo type. [1] [2]

Store and Service Updates:

• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts: Added mimeTypes state and related methods to handle file type filtering. [1] [2] [3] [4]
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.test.ts: Updated tests to use editContentService instead of service for better clarity and consistency. [1] [2] [3] [4] [5]

Configuration Changes:

• core-web/libs/edit-content/jest.config.ts: Added @happy-dom/jest-environment as the test environment for better compatibility with DOM-related tests.

Checklist

• Tests
• Translations
• Security Implications Contemplated (add notes if applicable)

Result

1. Image Field: When the user clicks on the “Select Existing File” option, only image files should be displayed.
2. File Field: When the user clicks on the “Select Existing File” option, all types of content should be displayed.

2024-11-20.11-11-38.mp4

This PR fixes: #30060

Copilot reviewed 5 out of 9 changed files in this pull request and generated no suggestions.

Files not reviewed (4)

• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html: Language not supported
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/dot-edit-content-file-field.const.ts: Evaluated as low risk

Copilot reviewed 5 out of 12 changed files in this pull request and generated no suggestions.

Files not reviewed (7)

• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html: Language not supported
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/index.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts: Evaluated as low risk
• core-web/libs/edit-content/src/test-setup.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.test.ts: Evaluated as low risk

Comments skipped due to low confidence (2)

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts:77

• [nitpick] The 'inputType' comparison should use a constant or enum value instead of a hardcoded string 'Image' for better maintainability.

const inputType = data?.inputType === 'Image' ? ['image'] : [];

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts:22

• [nitpick] The 'DialogData' type should include 'acceptedFiles' to match the usage in other parts of the code.

inputType: INPUT_TYPES;

Copilot reviewed 6 out of 15 changed files in this pull request and generated no suggestions.

Files not reviewed (9)

• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html: Language not supported
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.html: Language not supported
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-ui-message/dot-file-field-ui-message.component.spec.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/services/dot-edit-content.service.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/utils/index.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.test.ts: Evaluated as low risk
• core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/store/file-field.store.ts: Evaluated as low risk

[dotcms-sonarqube]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube