Media Items | List Improvements

# Media Items | List Improvements 1. Test Bulk actions button is enabled after selecting one more media item - [x] QA - Button is enabled when the user selects 1 item - [x] PO - We leave this as it is right now. Will be taken care of in the bulk actions initiative in the future. - [x] Fix - WNF 2. Change sorting options to: "Name" and "Created date" - [x] QA - Options are still "Filename" and "Created Date" - [x] Dev - Fixed 3. Remove "Status" column from Media Items listing page and "Origins" column from Title page - [x] QA - Done 4. Remove "Preview Details" option - [x] QA - Done 5. Switch order between "Trash" and "Permanently Delete" - [x] QA - Done 6. Update "View Details" action icon from "eye" icon to "arrow bow" icon - [x] QA - Done 7. CPL Markers removed from Media Items listing page, Media Items Title page, Composition Playlist listing page and Search Listing page when viewing a Composition Playlist that has markers created on it - [x] QA - Done 8. Element - Selector for Dropdown in Tags and Title area (plus the text when a Title/Tag/Entity Type has been selected by the user) have been updated in the Media details area + on the Technical Details tab (e.g. in the tag area), in the Filters area and some other places in Connect in terms of underline, white - instead of grey - text, font size, etc. - [x] QA - Done 9. Workbench actions available for different types of items in Connect, when clicking on the extra options icon to the right of the item name: - Source video (.mov) - Extract Original, Media Warp, Transcode, Crop Settings - Video (.mxf) - Extract Original, Media Warp, Transcode, Crop Settings - Audio(.mxf) - Media Warp, Transcode - Composition Playlist (.xml) - Transcode - For Media warp: * left click → open page in the same tab * middle mouse click/CTRL+click → open page in a new tab - For Extract Original, Transcode and Crop Settings: * left click → open modal - [x] QA - Done 10. Crops settings dialogue was introduced. It replicates the functionality of the Crop Settings feature found on the Workbench Tab that contains 4 Input Fields with numeric values for Width, Height, X offset and Y offset for Crop. - [x] QA - Done 11. Technical Metadata tab - Extra data that will be shown here, the equivalent of the details found on the right side of the Media Item's Technical Details tab - Here the user can also change the following attributes via the dropdown button that opens a modal: Tags selector, Title selector, Entity Type selector - [x] QA - Items do not Show N/A status as it does on the Media Items page - [x] Dev - N/A is now shown for unavailable values on all newly added tabs - [x] Fixed - Done - [x] QA - Text spills outside of the modal (when selecting an item after using the Fix button on a Job page and having the Media Items modal popup) when a large filename is displayed Too long filename (https://i.imgur.com/LevxJJr.png) - [x] Dev - Bad data. That's supposed to be a file extension. Please submit an API bug ticket. - [x] Fixed - Unrelated - [x] QA - If a Title name is too long, an error message will appear: "Cannot read property 'length' of undefined". The user is automatically sent to the first item on the list and has to come back again to the item he had intended to change the title for in order to see the changes. Title name too long: (https://i.imgur.com/VFRfg26.png) - [x] Dev - Seems to be an issue with some Media Items, possibly related to their status. It's deffinitely a BE issue, so unrelated. - [x] Fixed - It can be reproduced on items that appear to be missing, so uningested probably - [x] QA - Changing any value that has a long name, inside a field/element where there is a dropdown modal, the text and buttons will spill outside of the main window/modal screen. The user has to scroll the page to the right to even see them sometimes. **Note - This is visible on both Technical Metadata and Tracks Tab** - Spilling buttons on media items list page (https://i.imgur.com/5NPfwIJ.png) - Spilling buttons in Jobs Fix Modal (https://i.imgur.com/eI3U4ja.png) - [x] Dev - Out of scope / not related. Please submit a bug ticket. - [x] Fixed - Will submit a bug for further reference - [x] QA - Attaching and detaching an item from a Title will deselect that item selection and send the user to the first item on the list - [x] Dev - Old issue - [x] Fixed - Unrelated 12. Tracks Tab - Data available for each type of track is shown here with individual clickable and expandable track areas - The user has the option to edit a Video Track in order to adjust Color Properties, Mastering Options and Active Display Area - The user can set or Reset a Language (for Video, Audio and Timed Text files) via a dropdown button that will open a modal - The user can set the layout (for audio mapping) - The user can check the metafier output for a Metadata track - [x] QA - Changing any value that has a long name, inside a field/element where there is a dropdown modal, the text and buttons will spill outside of the main window/modal screen. The user has to scroll the page to the right to even see them sometimes. **Note - This is visible on both Technical Metadata and Tracks Tab** - Spilling buttons on media items list page (https://i.imgur.com/5NPfwIJ.png) - Spilling buttons in Jobs Fix Modal (https://i.imgur.com/eI3U4ja.png) - [x] Dev - Same as #11 - [x] Fixed 13. Accordion element was created for Tab areas in order to have expandable information zones with Description List items - [x] QA - Done 14. DescriptionList and DescriptionListItem were created to be added for the new track areas providing labels, titles and buttons that support dropdown menus in columns and rows - [x] QA - Done 15. Thumbnail area with hover activation added. - It will replace the thumbnail hover present on the filename area - It will be present on Media Items and Titles page - The thumbnail column should show a larger preview when hovered and will adapt to the space available in the current broswer window. - [x] QA - Done 16. Add Tabs option to disable content padding: - There should be no visible space between the box edge for each individual tab and its content. The edges for tabs should be touching. - [x] QA - Done 17. Page size selector. The user can alternate between having 50 and 100 items per page, in case he is not satisfied with showing only 20 items. As expected, the system has a bit more time response, when you have more than 20 items on your page. Even with 50 or 100 items per page, after a page has been loaded, it will take less to load the next time the user lands on that page. For this feature, FE and BE improvements have been made however, in certain areas and now by default we have 20 items per page wherever there are multiple items to be shown (and pagination, if necessary). With 20 items per page there were no visible extra-delays compared to the previous value of 10 items per page and the system moves without glitches Areas for test: (-) Media Items main page: 20 items per page works flawlessly. For 50, 100 items per page there is only a small extra 1 second delay between pagination changes; (-) Search Results main page: 20 items per page works flawlessly. For 50, 100 items per page there is only a small extra 1 second delay between pagination changes; (-) Dashboards individual page: All 3 page sizes load very fast; (-) Titles main page: It takes 5-6 seconds to load a page with 50-1000 results (either first time reaching it or changing filters). It takes only 1-2 seconds with the default 20 results; (-) Title individual page - Packages Tab: Pages load fast with 20 items per page. Short (<1sec) delay with 50 items per page. Short (1-2sec) delay with 100 items per page. All good (-) Batches main page: It takes only a second to switch between filters and pages. Only 38 max total items could be found on any org, so this was mostly relevant only for 20 and 50 items per page. More checks should be done on Staging; (-) Batches individual page: Pages load well with 20 items per page and only the smallest of extra delay with 50-100 items per page when changing filters or pagination. All good; (-) Jobs main page: Pages load fast with 20 items per page. Short (<1sec) delay with 50 items per page. Short (1-2sec) delay with 100 items per page. All good; (-) Workflows main page: Pages load fast with 20 items per page. Short (<1sec) delay with 50 items per page. Short (1-2sec) delay with 100 items per page. All good; (-) Platforms main page: Page loads fine with 20 and 50 items per page. Only 22 items were found on any Org. More checks should be done on Staging; (-) Tags main page: All 3 page sizes load very fast; (-) Templates main pages: Page loads well with 20 or 50 items per page (Only Package Templates had 50+ items). More checks should be done on Staging; (-) Templates - Metadata individual page: All 3 page sizes load very fast; (-) Profiles - Workbench TT page: Pages load fast with 20 items per page and as well with 50 items. No other problems should be found in any Profiles pages as they do not contain very much information. Should be checked on Staging if a page with 100 items can be found; (-) Metadata Settings: Title Classification page: Pages load fast with 20 items per page and as well with 50 items. Should be checked on Staging if a page with 100 items can be found; * On Media Items or Virtual Assets there were too few items to test on so it should be checked on Staging in case more items can be found per page; - group table? (-) Task Settings: Page loaded ok with a few results. There were too few items to test on so it should be checked on Staging in case more items can be found per page; (-) Organizations: Page loaded ok with a few results. There were too few items to check and I doubt that there will be 50-100 Organizations on any env to check. In any case, there should be no major delays on loading them. (-) System Administratos: Page loaded ok with a few results. Should be checked on Staging if a page with 100 items can be found; (-) Notifications page for non sysadmin user: All 3 page sizes load very fast; (-) Individual Package page (with multiple items e.g. autoqc): Items load fast with 20 items per page. 1-2 seconds load time with 50 items per page. 3-4 seconds load time with 100 items per page; Bugs for Page Size Selector: 1) When the user tries to Order items by Status, on the Workflows page, he gets "Could not fetch the data for this list" error message; [Order by Status](https://i.imgur.com/f1ZctMT.png) - [x] Dev - - [x] QA - Fixed after deploy for other pages except the first. Probably an obsolete or faulty workflow triggering the error so unrelated to this project. 2) When the user accesses the Tasks page, he gets "Could not fetch the data for this list" error message; [Tasks Page](https://i.imgur.com/7RtS4iL.png) - [x] Dev - - [x] QA - Fixed after deploy ***Note*** Final thoughts for this feature: 100 items makes every page and action load 2x harder but it never makes things crash or send any weird errors. The user should be aware that listing 5 times the normal amount of items will load the memory quite seriously but the feature works without any other flaws or major defects. **Descriptive Metadata Tab** Tested areas: - Media Items page - Titles page - Jobs fix page - Search Results page Attributes/Entity types added/modified via: - Page file through Descriptive Metadata Tab to see if the same results appear in the Media Items page through the preview tab - Straight through the Edit Option present on the preview tab for the file in the Media Items page - Via Media Items import to see if the same results appear in the Media Items page through the preview tab 1) Deleting or changing entity types takes somewhere around 4-5 seconds. Is this expected? - [x] QA - This only happened at random times and wasn't consistent in reproducing even with incognito. It might have something to do with the browser more than the feature or anything Connect related. Note - this happened only when using 100 items page size. **Hybrid view mode** Tested areas: - Media Items page - Titles page - Jobs fix page - Search Results page Results: - The user now has an extra view option besides the normal List View, called Hybrid view. He can switch between these two types of views at any given time - Bigger thumbnails for media items and Virtual Folders (only for images for now, the rest have the Connect placeholder still) - Bigger font, easier to read - More information about the file - e.g. codec, fps, language, frame size etc. - Clickable CTA/button with dropdown modal for Title and Tag so the user can add/remove them Issues: 1) When the user creates a new folder / deletes an existing one in the Title Media Tab, the Folder won't be shown in the FE until a refresh is done or switching to a new tab then back on the Media tab (only happens in Hybrid View Mode) - [x] Dev - Fixed - [x] QA - Verified. The user can now create/delete a Virtual Folder and notice it in the FE without a refresh or a tab switch. Issue was checked on the Title Media Tab and in the Jobs Fix modal.