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

Select Existing File: Show files according to Host/Folder #30216

Closed
Tracked by #29873
nicobytes opened this issue Oct 2, 2024 · 7 comments · Fixed by #30612 or #30696
Closed
Tracked by #29873

Select Existing File: Show files according to Host/Folder #30216

nicobytes opened this issue Oct 2, 2024 · 7 comments · Fixed by #30612 or #30696
Assignees
@dsilvam
Labels
dotCMS : Content Management OKR : Technical User Experience Owned by Freddy QA : Passed Internal Release : 24.11.25 Bug Fixing Team : Falcon

Comments

@nicobytes
Copy link
Contributor

nicobytes commented Oct 2, 2024 •
edited
Loading

Parent Issue

#29873

Task

Show files according to Host/Folder selected.

Proposed Objective

User Experience

Proposed Priority

Same as Parent Issue

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. Files should be loaded

Screenshot

The UI should be similar to the Dojo dialog.

List mode

Screenshot 2024-10-16 at 12 56 16 PM

Grid mode

Screenshot 2024-10-16 at 12 56 09 PM
@nicobytes nicobytes mentioned this issue Oct 2, 2024
Closed
@nicobytes nicobytes self-assigned this Oct 16, 2024
@nicobytes nicobytes moved this from New to Next 1-3 Sprints in dotCMS - Product Planning Oct 16, 2024
@nicobytes nicobytes changed the title Select Existing File: Show files according to Host/Folder Select Existing File: Show files according to Host/Folder with e2e Oct 30, 2024
@nicobytes nicobytes changed the title Select Existing File: Show files according to Host/Folder with e2e Select Existing File: Show files according to Host/Folder Nov 8, 2024
nicobytes added a commit that referenced this issue Nov 8, 2024
@nicobytes
chore(edit-content): create logic to services #30216
f87007a
@nicobytes nicobytes linked a pull request Nov 8, 2024 that will close this issue
feat(edit-content) show files according to host/folder #30612
Merged
3 tasks
nicobytes added a commit that referenced this issue Nov 8, 2024
@nicobytes
chore(edit-content): sync with master #30216
8d4f59b
nicobytes added a commit that referenced this issue Nov 8, 2024
@nicobytes
chore(edit-content): enable search #30216
efa2947
nicobytes added a commit that referenced this issue Nov 8, 2024
@nicobytes
chore(edit-content): truncate side panel #30216
b850bff
@nicobytes nicobytes mentioned this issue Nov 8, 2024
Merged
3 tasks
nicobytes added a commit that referenced this issue Nov 8, 2024
@nicobytes
chore(edit-content): add docs #30216
6a85a90
nicobytes added a commit that referenced this issue Nov 8, 2024
@nicobytes
chore(edit-content): fix problem with linter #30216
b74acca
nicobytes added a commit that referenced this issue Nov 8, 2024
@nicobytes
chore(edit-content): fix unit tests #30216
24f7789
nicobytes added a commit that referenced this issue Nov 9, 2024
@nicobytes
chore(edit-content): fix unit tests #30216
6ddf93e
github-merge-queue bot pushed a commit that referenced this issue Nov 9, 2024
@nicobytes
feat(edit-content) show files according to host/folder (#30612)
20899cc 
### Parent Issue

#30216 

### Proposed Changes

This pull request includes several changes across multiple files to
enhance the functionality and organization of the `dot-site` and
`dot-edit-content-file-field` components. The key changes involve adding
a new method to fetch content by folder, refactoring imports for better
modularity, and updating UI components for improved user interaction.

### Enhancements to `dot-site.service.ts`:

* Added a new interface `ContentByFolderParams` to define parameters for
fetching content by folder.
* Introduced a new method `getContentByFolder` in `DotSiteService` to
fetch content based on the provided parameters.

### Refactoring imports in `dot-edit-content-file-field` components:

* Updated import paths to use more specific model files for better
modularity in various components, including
`dot-file-field-preview.component.ts`,
`dot-file-field-ui-message.component.ts`,
`dot-form-file-editor.component.ts`, `form-file-editor.store.ts`,
`dot-form-import-url.component.spec.ts`, and `form-import-url.store.ts`.
[[1]](diffhunk://#diff-9d3250303440cce67e959a59ed17f44ad49d690c04e36cbf4fadc011f206001eL29-R32)
[[2]](diffhunk://#diff-fbc6f3568490a6db73eb7a1d91fb7d56c6195f18637a179b3e2e0a9a8971e65bL6-R6)
[[3]](diffhunk://#diff-4e07289537a18f138b8657c2505e3416523ee356c698aeb38f3d519a2257dadaL24-R24)
[[4]](diffhunk://#diff-5184979843abf3baa538afc8613a1fa040a7907c9614bfb64ddc472c31b4cfa7L13-R13)
[[5]](diffhunk://#diff-0d18173fe874af517af41ad1e4422ff7681ba1c2ad4daf75c9806a07fa37e7b2L17-R17)
[[6]](diffhunk://#diff-2e100516ca0ff5570c84b4cf072dd03ae77565e92c8c5de65d77505745955651L12-R12)

### UI Improvements in `dot-select-existing-file` components:

* Enhanced `dot-dataview.component.html` to include better data binding
and UI elements such as loading indicators, search functionality, and
improved table structure.
[[1]](diffhunk://#diff-f3ba4db0d4c81db7982bda57d151d7f05bbb2151eb78f5ce460ccd71184b4c7dR1-R41)
[[2]](diffhunk://#diff-f3ba4db0d4c81db7982bda57d151d7f05bbb2151eb78f5ce460ccd71184b4c7dL27-R66)
* Updated `dot-dataview.component.scss` to include styles for new UI
elements like truncation and thumbnail display.
* Refactored `dot-dataview.component.ts` to use new Angular features
like signals and models for state management.
* Improved `dot-sidebar.component.html` and `dot-sidebar.component.ts`
to handle node selection and state management more effectively.
[[1]](diffhunk://#diff-c3ff3590364bc12ded7173d7374838dfab13f67598f80daa198dfd96c935d459L5-R13)
[[2]](diffhunk://#diff-b6e7f5a1ad7c221178b3ddf3f3dfc06021ba87b4e18ef9d7f6c6c9a6eab016d3R8-R11)
[[3]](diffhunk://#diff-b6e7f5a1ad7c221178b3ddf3f3dfc06021ba87b4e18ef9d7f6c6c9a6eab016d3R22-R23)
[[4]](diffhunk://#diff-b6e7f5a1ad7c221178b3ddf3f3dfc06021ba87b4e18ef9d7f6c6c9a6eab016d3R61-R62)
[[5]](diffhunk://#diff-b6e7f5a1ad7c221178b3ddf3f3dfc06021ba87b4e18ef9d7f6c6c9a6eab016d3R71-R89)
* Updated `dot-select-existing-file.component.html` and
`dot-select-existing-file.component.ts` to handle folder loading and
content selection more efficiently.
[[1]](diffhunk://#diff-485fc35db79ca9cdecc82b1dde0499e2e25f88f07f9ce43a4624fac358ac7848R1-R16)
[[2]](diffhunk://#diff-485fc35db79ca9cdecc82b1dde0499e2e25f88f07f9ce43a4624fac358ac7848L20-R27)
[[3]](diffhunk://#diff-18bf6e06cc08560259db33d84f324194172c43e47220f07b1de0990cf71077acR13)
[[4]](diffhunk://#diff-18bf6e06cc08560259db33d84f324194172c43e47220f07b1de0990cf71077acR41-R42)
[[5]](diffhunk://#diff-18bf6e06cc08560259db33d84f324194172c43e47220f07b1de0990cf71077acL66-R70)

These changes collectively enhance the functionality, modularity, and
user experience of the `dot-site` and `dot-edit-content-file-field`
components.

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)

### Additional Info



https://github.com/user-attachments/assets/5f9ed27e-1b74-41f8-aa37-612d96c043fa
@github-project-automation github-project-automation bot moved this from In Review to Internal QA in dotCMS - Product Planning Nov 9, 2024
@nicobytes
Copy link
Contributor Author

QA Notes:

2024-11-08.16-57-00.mp4

@jcastro-dotcms
Copy link
Contributor

INTERNAL QA: FAILED ❌

  • Docker Image: trunk_65c8ebb

There are a few things that seem to be failing with the dialog:

  1. If you expand several folders in the tree, you cannot scroll neither up nor down.
  2. If you select a folder that has no files, there are still files displayed in the file list.
  3. If you click a folder that has, for instance, just one VTL file, you still get a list of several files that don't match the selected folder.

@github-project-automation github-project-automation bot moved this from Internal QA to Current Sprint Backlog in dotCMS - Product Planning Nov 11, 2024
@jcastro-dotcms jcastro-dotcms self-assigned this Nov 19, 2024
@jcastro-dotcms
Copy link
Contributor

INTERNAL QA: PASSED ✅

  • Docker Image: trunk_66d49c2

The new File Selector is working as expected. The scroll is working correctly, and the modal is showing the files under the selected folder, which is correct.

@github-project-automation github-project-automation bot moved this from Internal QA to Current Sprint Backlog in dotCMS - Product Planning Nov 19, 2024
@jcastro-dotcms jcastro-dotcms moved this from Current Sprint Backlog to QA - Backlog in dotCMS - Product Planning Nov 19, 2024
@jcastro-dotcms jcastro-dotcms removed their assignment Nov 19, 2024
@josemejias11
Copy link
Contributor

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

@josemejias11 josemejias11 moved this from QA - In Progress to Done in dotCMS - Product Planning Nov 21, 2024
@dsilvam
Copy link
Contributor

dsilvam commented Nov 27, 2024

Failed IQA: Not filtering files per folder. Showing "No identifiers found"

Also, when a selected folder has no files change the message to: "No files found"

@dsilvam dsilvam moved this from Done to In Progress in dotCMS - Product Planning Nov 27, 2024
@nicobytes nicobytes moved this from In Progress to Internal QA in dotCMS - Product Planning Nov 27, 2024
@nicobytes nicobytes moved this from Internal QA to In Review in dotCMS - Product Planning Nov 27, 2024
@dsilvam dsilvam self-assigned this Nov 29, 2024
@dsilvam dsilvam moved this from In Review to Internal QA in dotCMS - Product Planning Nov 29, 2024
@dsilvam
Copy link
Contributor

dsilvam commented Nov 29, 2024

Passed IQA:

  • Show files when they live at folders level and able to select them properly.
    Image

  • Display the proper information for the file
    Image

  • Showing proper message when no files are present
    Image

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

@dsilvam dsilvam

Labels
dotCMS : Content Management OKR : Technical User Experience Owned by Freddy QA : Passed Internal Release : 24.11.25 Bug Fixing Team : Falcon
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
4 participants
@dsilvam @nicobytes @jcastro-dotcms @josemejias11