Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image Field: "Select Existing File" functionality #30060

Closed
Tracked by #29692
nicobytes opened this issue Sep 18, 2024 · 7 comments · Fixed by #30712 or #30779
Closed
Tracked by #29692

Image Field: "Select Existing File" functionality #30060

nicobytes opened this issue Sep 18, 2024 · 7 comments · Fixed by #30712 or #30779
Assignees
@hmoreras
Labels
dotCMS : Content Management OKR : Core Features Owned by Will QA : Approved QA : Passed Internal Release : 24.11.29 Team : Falcon Type : New Functionality

Comments

@nicobytes
Copy link
Contributor

nicobytes commented Sep 18, 2024 •
edited
Loading

Parent Issue

#29692

User Story

As a content editor, I want to select an existing file and have the system display only image files, so that I can quickly find and choose the appropriate image for my content.

Acceptance Criteria

  1. In the File field, there is a "Select Existing File" option.
  2. Clicking on this option opens a popup
  3. Hosts/Folders should appear on the left side.
  4. Navigate through the levels
  5. Select a folder/host
  6. Only Image Files should be loaded
@nicobytes nicobytes mentioned this issue Sep 18, 2024
Closed
@nicobytes nicobytes moved this from New to Next 1-3 Sprints in dotCMS - Product Planning Sep 18, 2024
@nicobytes nicobytes moved this from Next 1-3 Sprints to Current Sprint Backlog in dotCMS - Product Planning Nov 19, 2024
@nicobytes nicobytes self-assigned this Nov 19, 2024
@nicobytes nicobytes moved this from Current Sprint Backlog to In Progress in dotCMS - Product Planning Nov 19, 2024
nicobytes added a commit that referenced this issue Nov 19, 2024
@nicobytes
chore(edit-content): Filter images #30060
07c4b5a
@nicobytes nicobytes linked a pull request Nov 19, 2024 that will close this issue
chore(edit-content): For Image Field only image files should be displayed. #30712
Merged
3 tasks
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 19, 2024 •
edited
Loading

PRs:

nicobytes added a commit that referenced this issue Nov 20, 2024
@nicobytes
chore(edit-content): Fix error with selecting files #30060
338fa2b
nicobytes added a commit that referenced this issue Nov 20, 2024
@nicobytes
chore(edit-content): Fix error with selecting files #30060
82c15d7
@nicobytes nicobytes mentioned this issue Nov 20, 2024
Merged
3 tasks
@nicobytes
Copy link
Contributor Author

QA Notes:

  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

nicobytes added a commit that referenced this issue Nov 20, 2024
@nicobytes
chore(edit-content): Use enums and union type #30060
9a8da28
nicobytes added a commit that referenced this issue Nov 22, 2024
@nicobytes
chore(edit-content): Fix format #30060
c600249
github-merge-queue bot pushed a commit that referenced this issue Nov 22, 2024
@nicobytes
chore(edit-content): For Image Field only image files should be displ…
874d5e8 
…ayed. (#30712)

### 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`](diffhunk://#diff-9d3250303440cce67e959a59ed17f44ad49d690c04e36cbf4fadc011f206001eR37-R46):
Introduced `FileInfo` type to consolidate file-related properties and
updated the component to use this new type.
[[1]](diffhunk://#diff-9d3250303440cce67e959a59ed17f44ad49d690c04e36cbf4fadc011f206001eR37-R46)
[[2]](diffhunk://#diff-9d3250303440cce67e959a59ed17f44ad49d690c04e36cbf4fadc011f206001eL73-R114)
*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-form-import-url/dot-form-import-url.component.ts`](diffhunk://#diff-5efc519c0e3b6fc75fe06f8115527c72874b15e764a0c05508e341d0643ca624L15-R24):
Added `DialogData` type for better type safety in dialog configurations.
[[1]](diffhunk://#diff-5efc519c0e3b6fc75fe06f8115527c72874b15e764a0c05508e341d0643ca624L15-R24)
[[2]](diffhunk://#diff-5efc519c0e3b6fc75fe06f8115527c72874b15e764a0c05508e341d0643ca624L39-R44)

### 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`](diffhunk://#diff-64ed272338ca8810a9254c03bad8f295b77e25c76d92cf3db5c76038ed215474L1-R20):
Refactored to use `fileInfo` instead of multiple individual variables
for file properties.
[[1]](diffhunk://#diff-64ed272338ca8810a9254c03bad8f295b77e25c76d92cf3db5c76038ed215474L1-R20)
[[2]](diffhunk://#diff-64ed272338ca8810a9254c03bad8f295b77e25c76d92cf3db5c76038ed215474L59-R63)
[[3]](diffhunk://#diff-64ed272338ca8810a9254c03bad8f295b77e25c76d92cf3db5c76038ed215474L82-R86)
*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts`](diffhunk://#diff-9d3250303440cce67e959a59ed17f44ad49d690c04e36cbf4fadc011f206001eL129-R135):
Updated the component initialization and methods to work with the new
`FileInfo` type.
[[1]](diffhunk://#diff-9d3250303440cce67e959a59ed17f44ad49d690c04e36cbf4fadc011f206001eL129-R135)
[[2]](diffhunk://#diff-9d3250303440cce67e959a59ed17f44ad49d690c04e36cbf4fadc011f206001eL163-R169)

### 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`](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0L2-R9):
Added `mimeTypes` state and related methods to handle file type
filtering.
[[1]](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0L2-R9)
[[2]](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0L40-R50)
[[3]](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0L57-R67)
[[4]](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0R80-R84)
*
[`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`](diffhunk://#diff-547a685cc26753b615660d1f7014944ee45e352b8629ba7daa2d10522fa6c77dL16-R32):
Updated tests to use `editContentService` instead of `service` for
better clarity and consistency.
[[1]](diffhunk://#diff-547a685cc26753b615660d1f7014944ee45e352b8629ba7daa2d10522fa6c77dL16-R32)
[[2]](diffhunk://#diff-547a685cc26753b615660d1f7014944ee45e352b8629ba7daa2d10522fa6c77dL33-R41)
[[3]](diffhunk://#diff-547a685cc26753b615660d1f7014944ee45e352b8629ba7daa2d10522fa6c77dL44-R52)
[[4]](diffhunk://#diff-547a685cc26753b615660d1f7014944ee45e352b8629ba7daa2d10522fa6c77dL59-R67)
[[5]](diffhunk://#diff-547a685cc26753b615660d1f7014944ee45e352b8629ba7daa2d10522fa6c77dL79-R87)

### Configuration Changes:

*
[`core-web/libs/edit-content/jest.config.ts`](diffhunk://#diff-a5a47422d33499f0f3d15a48bc9a17e7b3af763708f81899272096fd5457550dL21-R22):
Added `@happy-dom/jest-environment` as the test environment for better
compatibility with DOM-related tests.

### Checklist
- [x] Tests
- [x] Translations
- [x] 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.


https://github.com/user-attachments/assets/83c6ce24-015c-4577-af10-5354eb32a11e
@github-project-automation github-project-automation bot moved this from In Review to Internal QA in dotCMS - Product Planning Nov 22, 2024
@nicobytes nicobytes removed their assignment Nov 25, 2024
@hmoreras hmoreras self-assigned this Nov 25, 2024
nicobytes added a commit that referenced this issue Nov 26, 2024
@nicobytes
chore(edit-content): fix error with load content #30060
4e6d1f2
@nicobytes nicobytes mentioned this issue Nov 26, 2024
Merged
3 tasks
@hmoreras
Copy link
Contributor

Internal QA feedback:
Initial load in image don't filter the files:

Screenshare.-.2024-11-25.4_11_27.PM.mp4

@hmoreras hmoreras moved this from Internal QA to In Progress in dotCMS - Product Planning Nov 26, 2024
@hmoreras hmoreras reopened this Nov 26, 2024
@github-project-automation github-project-automation bot moved this from In Progress to Current Sprint Backlog in dotCMS - Product Planning Nov 26, 2024
@hmoreras hmoreras assigned nicobytes and unassigned hmoreras Nov 26, 2024
github-merge-queue bot pushed a commit that referenced this issue Nov 26, 2024
@nicobytes
chore(edit-content): fix error with load content (#30779)
7dd3778 
### Parent Isssue

#30060

### Proposed Changes

This pull request includes changes to the `dot-select-existing-file`
component and its associated store to improve the initialization
process. The most important changes involve modifying the loading
behavior of content data.

Initialization process improvements:

*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts`](diffhunk://#diff-18bf6e06cc08560259db33d84f324194172c43e47220f07b1de0990cf71077acR79):
Added a call to `this.store.loadContent()` to ensure content is loaded
during the component's initialization.
*
[`core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-select-existing-file/store/select-existing-file.store.ts`](diffhunk://#diff-4e8a1b332dae5fb8ead291b76bf6099437aaf4aa6fd0a759ffe71c3074ffe7f0L210):
Removed the call to `store.loadContent()` from the `onInit` hook to
prevent redundant loading of content.

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)
@nicobytes nicobytes moved this from Current Sprint Backlog to In Progress in dotCMS - Product Planning Nov 27, 2024
@nicobytes nicobytes moved this from In Progress to In Review in dotCMS - Product Planning Nov 27, 2024
@hmoreras hmoreras self-assigned this Nov 27, 2024
@hmoreras hmoreras moved this from In Review to QA - Backlog in dotCMS - Product Planning Nov 27, 2024
@hmoreras
Copy link
Contributor

Pass internal QA: both fields File and Image, show the files filtered by type.

@bryanboza bryanboza moved this from QA - Backlog to QA - In Progress in dotCMS - Product Planning Nov 27, 2024
@bryanboza
Copy link
Member

bryanboza commented Nov 27, 2024 •
edited
Loading

Please add to the card the name of the feature flag (FF) that needs to be enabled to see this field. It’s important to ensure anyone can take the card and test it without needing to reach out to the developer for additional details.

@bryanboza bryanboza moved this from QA - In Progress to QA - Rejected in dotCMS - Product Planning Nov 27, 2024
@hmoreras
Copy link
Contributor

hmoreras commented Nov 28, 2024 •
edited
Loading

Please add to the card the name of the feature flag (FF) that needs to be enabled to see this field. It’s important to ensure anyone can take the card and test it without needing to reach out to the developer for additional details.

  DOT_CONTENT_EDITOR2_ENABLED: true

@hmoreras hmoreras moved this from QA - Rejected to QA - Backlog in dotCMS - Product Planning Nov 28, 2024
@josemejias11 josemejias11 moved this from QA - Backlog to QA - In Progress in dotCMS - Product Planning Nov 28, 2024
@josemejias11
Copy link
Contributor

Approved: Tested on trunk_e15f58e, Docker, macOS 14.5, FF v126.0.1

@josemejias11 josemejias11 moved this from QA - In Progress to Done in dotCMS - Product Planning Nov 28, 2024
@github-project-automation github-project-automation bot moved this from Done to Internal QA in dotCMS - Product Planning Nov 29, 2024
@dsilvam dsilvam moved this from Internal QA to Done in dotCMS - Product Planning Nov 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hmoreras hmoreras

Labels
dotCMS : Content Management OKR : Core Features Owned by Will QA : Approved QA : Passed Internal Release : 24.11.29 Team : Falcon Type : New Functionality
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
4 participants
@bryanboza @nicobytes @hmoreras @josemejias11