Issue occurs in the edit panel on small screen sizes.
The div with class .cms-content-view needs to be aware of the editor panel being open (when the gallery has overflowing content) so that the scrollbar can be hidden. It might be possible to restructure the CSS so this doesn't occur but I would think it would be a fair bit of work.

The class name "dropzone-component" should be updated to just "dropzone" but for me this breaks its functionality, possibly because the class name .dropzone is already in use? so we might need to be more specific with the component name (eg. AssetsDropzone). This change is so the component conforms to BEM conventions.

Once I've uploaded a file and then click on it to View it, I change the Title and hit save.

I get 3 little dots for a second and then they go away. There is no status or notification otherwise, I can see in the network tab I get a status OK response.

It might be nice to go back to the gallery list automatically, since clicking Cancel feels weird.

AC

I would like to see a confirmation when I've edited the details of a file.

Task

• Save button (and cloud icon) shows a green "Saved" (with tick icon) once a file is saved (as per design below)

Design

Probably best to make both have a total height of 32px.

Can’t get to drag and drop page by clicking “Upload” button, it just pops up system folder to choose files to upload

https://silverstripe.atlassian.net/browse/OSS-1438

Related

• Move files via drag/drop
• Move files via folder location

User story: As an author, I want to know and control whether files are on draft or published, so that I can control the publication of new content.

Acceptance criteria

• The workflow actions that exist on pages also exist on files: Save, Publish, Add to campaign, Revert etc.
• The 2 common actions are shown by default, and a pop-up menu exists for less common actions

It says "no items found" until they're loaded, which is misleading.

The "sort by..." item on the top right of admin/assets can't receive a keyboard focus. It's using Chosen.js which should already be keyboard friendly.

Tasks

• Auto-focus happens for the Editor when it is opened (either by Editing a file/folder, or creating a folder)
• Gallery is hidden (display none) when on small screen, not just covered by the Editor.
• Gallery and Editor is both shown (and can both be tabbed through) in that order when the screen is large enough.

Pull requests:

• silverstripe/silverstripe-framework#6919
• #473
• silverstripe/silverstripe-admin#68

If uploading too large or incorrect file types the upload reads "Failed to upload" but doesn't include the actual error.

If a file is invalid type, it should error without trying to upload at all.

Jira: https://silverstripe.atlassian.net/browse/OSS-1720

Acceptance criteria

• A folder containing 10,000 1000 files can be opened in the asset admin

Note:
This should avoid out-of-memory errors on large folders. Our NFR for stable is 100,000 files with 10,000 files in a single folder but for Alpha4 we have reduced the NFR to 1000 files.

Secondary actions need to be moved up slightly and also the icon should align with the text (move icon up slightly). Refer to the actions toolbar used in the campaigns area to see if it can be used to give the actions the right space

.

Bottom right of https://projects.invisionapp.com/boards/9GX68PTXUQFH/#/1547737/71606997

Could be a collaboration between multiple people, splitting up CSS, React and Jest unit testing tasks.

Create a React component for this purpose. Use bootstrap for the base elements (http://v4-alpha.getbootstrap.com/components/forms/)

Make sure the component can work standalone (e.g. doesn't rely

React component philosophy is explained here: https://github.com/Automattic/wp-calypso/blob/master/docs/coding-guidelines/css.md
https://github.com/Automattic/wp-calypso/blob/master/docs/components.md

Regression from #154, but can be fixed in alpha2.

If you rename a file the preview link stays the same. Refreshing the page displays the correct url.

Should be bob__resampled.png

Acceptance criteria

• The insert media dialog matches the look and feel of the new asset-admin section
• I can upload one or more files prior to inserting it
• The last of mulitple uploaded files is auto-selected and shows in the sidebar ready to insert
• The multi-select abilities are removed
• We have at least 1 behat test

Exclusion

• No multi-file insert feature. It never made any sense
• Insert from URL (separate story)
• Filter files by images (#121)

Insert media link triggers the files area to appear in a pop up modal. Refer to https://projects.invisionapp.com/boards/6GX68P9YKERH/

Ideally, this would be part of the asset-admin module, which would add the relevant toolbar item to the CMS. Otherwise, we introduce a dependency form HTMLEditorField to asset-admin.

Tasks

• Refactor <AssetAdmin>, <Gallery> and <Editor> to work standalone (or load entire admin/assets into an iframe)
• Get AssetAdmin to appear on the pages section using entwine
• Create "Insert" form (using a different React component based on <Editor>, but with HtmlEditorField form field schema)
• Edit details on Insert form (to be confirmed)
• Determine Generate shortcode logic (not required for this story, as tinymce plugin handles shortcode)
• Insert images
• Checkboxes are not available for modal
• Uploading files, the latest file is selected/opened in Editor. (NOTE: this only opens the last file that finished uploading, so it can be a little unpredictable...)
• Docblocks
• Unit tests
• Behat tests

Excludes

• Recently edited files

Blockers

• Behat async behaviours
• Components using FormBuilderLoader cannot have unit tests due to jest mocking errors

Currently, these components have both state and render views, which is an antipattern - see https://medium.com/@learnreact/container-components-c0e67432e005#.jv7qgdyhi and https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.b5tp6c91z.

This is setting a bad precedent on our own conventions (we have separate containers and components folders, but they're all over the show)

Note that kickassets does this pretty well, check containers vs. views folders: https://github.com/unclecheese/silverstripe-kickassets/tree/master/javascript/src/

Editor.js currently instanciates <TextFieldComponent> directly (through props.editorFields), which is a relic of an earlier implementation when we didn't have the FormBuilder component.

• Create a form in the AssetAdmin PHP class, with "Name" and "Title" fields
• Reference the form schema location in AssetAdmin->getClientConfig(), allow passing through to the <Editor> component
• Use FormBuilder in <Editor> component to create form
• Save file through standard PHP form API (so we can trigger validation errors, tracked separately). Form submission could be hidden in current AssetGalleryField->update() API endpoint

As with #156, I’ve updated framework, cms et al and can’t find this functionality

Tested in IE10 on Win7, the sort by title for files are not working, while it works in Chrome.

Acceptance criteria

• It's clear whether a files is draft, published, modified
• The domain model matches that of pages
• Insert media selects from draft items

Excluded

• delete-from-draft support: we'll clarify this as part of "campaign feature complete"

Tasks

• Add marker for Gallery items that are draft or modified
• Clarify Protected status and determine whether that needs visual representation
• Add marker for Files in Editor

Notes

• This might cause #160 ?
• Design UX patterns for deleting files and folders

When you edit / delete items there is no securityID or CSRF protection. Since it appears files just take in the ID to delete, you can craft up an attack and mass delete files from an unaware admin.

Files (old) contains the securityID.

SS 4.0 alpha 1

Go to admin/pages/edit/show/1 directly (not via PJAX from admin/pages), then use the CMS menu to navigate to admin/assets. It'll keep the right hand preview panel around, load the previously shown page preview in the iframe, then redirect you to admin/pages/edit/show/1.

Hey,

I'm a little confused by the folder structure. src is a folder typically distinct from tests. tests is inside src.

The SilverStripe module standard suggests code and tests as top-level folders for PHP. So I guess we should put the front-end code in a separate folder, but I mixing tests through the code makes it quite confusing, and it doesn't make a lot of sense to have src as a subfolder, given src in this context in most other projects means "not the tests".

What do you think about this structure?

• code
• tests
• client
  • dist
    • en.js
    • bundle.js
    • ...
  • lang
    • en.js
    • ...
  • src
    • components
    • state
    • ...
  • tests

The changes are:

• Rename "javascript" to "client". ("frontend" would also work")
• Move tests out of source to their own 2nd-level folder
• Get rid of the src subfolder in lang, and instead compile into dist

Moved from silverstripe/silverstripe-framework#5513

High level stuff

• Writing directly to stores is an anti-pattern. I might consider something like galleryActions.initialise() in the gallery constructor.
• Consider a view/container design pattern to decouple the application logic (actions, state from stores) from the UI. The container has no props, but has store state that it applies to the single "view" component it is responsible for rendering. It listens to events from the view component and calls actions. This would liberate you to take something like the item component and move it to a completely different area of the CMS, used in a different context.
• Probably should start thinking about some shouldComponentUpdate hooks. Although React diffs the VirtualDOM and makes minimal DOM mutations, it still takes a lot a work to calc that diff, and shouldComponentUpdate can bypass that all together, if, for instance, newProps === prevProps && newState === prevState.
• One way that check can be easily defeated is through function binding in the render() method, e.g. <button onClick={this.handleClick.bind(this)}>. Every time you bind, you create a new reference to that function and therefore prevProps.onClick !== newProps.onClick every single time, defeating your shouldComponentUpdate.
• Consider moving XHRs to the action layer. Things tend to scale better that way, as it becomes increasingly more likely that multiple stores will want the result of a server call.
• Consider creating an API wrapper class singleton to tidy up all the jQuery.ajax.
• Consider creating two action types: server and view, to manage optimistic updates and fetched data:

createFolder: (data) {
    galleryDispatcher.dispatch({
        action: CONSTANTS.ITEM_STORE.CREATE,
        type: CONSTANTS.VIEW_ACTION,
        data: { title: 'New folder' },
        silent: silent
    });
    API.post('/folder/', data)
       .then(response => {
            galleryDispatcher.dispatch({
                action: CONSTANTS.ITEM_STORE.CREATE,
                type: CONSTANTS.SERVER_ACTION,
                data: response.body,
                silent: silent
            });
        });        
}

This definitely starts to get verbose, and I would recommend creating some factories to generate these actions.

Minor bits

• Consider removing var keywords in favour of const or let to provide some control over mutations
• Consider using Babel stage 0 to allow class properties. This provides two very nice bits of syntactical sugar:

static propTypes = { 

}

over MyClass.PropTypes = {}

and

myEventHandler = (e) => {

}

over this.myEventHandler = this.myEventHandler.bind(this);

Behat currently has some "wait for ajax" logic which introspects jQuery to figure out if its running any ajax requests at the moment: https://github.com/silverstripe-labs/silverstripe-behat-extension/blob/805a0e69ed859f85daf325a687dd7a2532dcab5b/src/SilverStripe/BehatExtension/Context/BasicContext.php#L136

This will need to be adapted to work with the new fetch() implementation (not using jQuery.ajax). We could just set a window.ss._ajaxLoading=true in lib/Backend.js for this.

I’ve pulled down the latest versions of cms, framework and asset-admin and I can’t seem to find this functionality anywhere

https://projects.invisionapp.com/boards/9GX68PTXUQFH#/1547737/71606997

TODO: Split out card to check if files are associated with published objects (e.g. pages), with a smarter warning message. Same behaviour needs to be applied to existing multi-select of files.

Tasks

• Paul to spell out use cases (navigating up/down, opening/closing sidebar through different triggers)
• "Edit" trigger in breadcrumbs
• Save renames the folder and updates the gallery/breadcrumb view (with new name returned from server)
• Retrieve folder form fields through FormBuilder
• Readonly view of folder location

Ensure title is a required field (via HTML5) is covered by Framework #5523

Acceptance Criteria

• To trigger the panel to open the edit icon is clicked (which is to the right side of the folder name in the north toolbar) See https://projects.invisionapp.com/boards/WEX68PM3XJ2N/
• To close the panel you can select the X within the folder edit panel
• The panel should contain:
  • Folder name at the top
  • Close icon top right corner
  • Thumbnail of folder (nice to have for alpha 2)
  • Folder name field
  • Readonly field for folder location
  • Save button
• On save the panel remains open, but if the folder name has changed:
  • the folder name in the north toolbar should update
  • the name at the top of the edit panel should update
• If files are selected when "edit folder" is chosen, all files are deselected
  • A folder can be deleted through a button on the form (with a generic confirmation), regardless of files being published with pages (same behaviour as SS3)

After adding images or folders to the assetAdmin items disappear completely.

Related

• Implement cachable asset store
• Large folder breaks GraphQL fetch
• Optimise Gallery Transfer

Acceptance criteria:

• You can search for files by a keyword
• You can search by file type
• You can search by last updated date, as a date range (datepicker control needed)
• You can search in either the current folder and its subfolders, or just current folder (depending on pattern created and tested is most intuitive) and across the whole asset library

UX CSS:
Search wireframes: https://projects.invisionapp.com/boards/FAX68PE52Y8W/

• Mock templates (using HTML from form templates)
  • Expanding search field
  • Search field and button
  • Expanding filter panel
  • File type dropdown
  • Limit to current folder checkbox
  • Date range, fields (not datepicker)
  • Search button / cancel button
  • BEM styles
  • Design pattern for clearing results and know you are viewing filtered results
• Browser testing

DEV:

• Replace temp markup with form schema
  • Filter by type (image, audio, video (includes flash), archive, document, folder [nice to have])
  • Date fields
  • Limit to current folder checkbox
• On search load, search field (not filter panel) must remain open and both search field and filters remain populated
• When selecting search the search input is in focus
• Search results with message to clear
• Breadcrumbs represent search
• Ensure hitting "enter" on any field in the form triggers a search.
• Ensure all aria-expanded="true" are set to false when closed and vice versa
• Remove temporary JS
• Clear form when clearing results

Pull requests

• silverstripe/silverstripe-framework#6389
• #330

There is a random space at the top, a double border for the header (remove bg image), and secondary actions are too low (they should be in a positioned below the header toolbar eg like https://projects.invisionapp.com/boards/WEX68PM3XJ2N/)

If there are no folder present there is an extra gap above files which should be removed.

It seems the chosen class names have changed but they haven't been updated in AssetAdmin.

In AssetAdmin styles its chzn-single vs chosen-single in the template so it doesn't render properly.
@chillu do you have any info on what its supposed to be?

The two text fields at the bottom when viewing each file can't be edited or saved

Currently AssetAdmin.php relies on 3.x style PJAX loading of the main <form>. AssetGalleryField.php is implemented as a form field with a <div> placeholder which is "configured" via HTML5 data attributes. These get picked up by Entwine via $('.asset-gallery-component-wrapper') in client/src/boot/index.js, and passed on to a React component.

Since we now have a form field schema, this approach is outdated. It should be replaced with the main form loaded via form field schema (rather than PJAX HTML), and the react component initialised the same way as GridField in CampaignAdmin.

This will also require loading the asset-admin related JS bundle via LeftAndMain::init(), since we shouldn't rely on that JS being lazy loaded via jQuery.ajax() monkey patches of jQuery.ondemand.

Remove search from Alpha 1

The concept is implemented (see Breadcrumb React component), but has broken somewhere along the implementation

Jira: https://silverstripe.atlassian.net/browse/OSS-1796

Some fields are missing for file info: title at the top, Used on, Owner, Folder.

Jira: https://silverstripe.atlassian.net/browse/OSS-1719

TODO

• Create list of links where File is used on (excludes Campaign)
• Added and edited dates

As a user I would like the CMS to automatically load items as I scroll down

Consider the gradual loading of items (eg. fade in)
Include a loading indicator
Can we include a exact/approximate number of items in each folder?

Tested in SS4 demo site, the asset folder name drops down from its icon in IE10.

Also the link is not found

This module currently has a variables.scss file (https://github.com/silverstripe/silverstripe-asset-admin/blob/master/javascript/src/styles/variables.scss) with a large overlap to the framework file based off bootstrap: https://github.com/silverstripe/silverstripe-framework/blob/master/admin/scss/bootstrap/_variables.scss. Only module specific styles should be retained in this modules own variables.scss, and build tooling adjusted to pull in the framework file

/cc @clarkepaul

As a user I would like to see and edit the details of a file in a sidebar.

Acceptance Criteria

• File details shown in a side-bar, rather than a separate view.

Tasks

• Adapt sidebar styling from existing pull request (#107)
• Sidebar layout and responsive view
• Use Bootstrap styled text fields (incl. compressed label style)
• Convert classes from pull request to BEM, add into existing component structure
• Style close icon
• Restyle "properties" section (moved to hidden tab)
• Batch actions functional on smaller screens
• Dropzone component class naming (convert to BEM)
• Browser testing

Excludes

• Magnification
• Sticky footer
• Additional actions (dot-dot-dot)
• "Usage" tab

Resources

• Designs

Related

• Edit/rename folders

The labels “Title” and “Filename” existed on last hackday.
In addition, the texts are in wrong fonts comparing to the texts on last hackday.

Excludes

• CSS or styling work (see #167)
• No title update in gallery tile on edit (needs save)

Tasks

• Show both sidebar and current folder view when deep linked (admin/assets/show/0/edit/3).
• Persist current "view" (edit or view) in component props, use redux action to trigger view variation (similar to CampaignAdmin)
• Allow "close" on sidebar, updating the component prop "view"
• Keep "selected files" (one or more) separate from "currently viewed file" (only one) in Redux state
• Back navigation should close and open sidebar as required
• Fix unit tests
• Fix regression where files stay selected on folder navigation
• Fix IE regression where URL doesn't change (moved to #188)

Acceptance criteria

• Action toolbar and options available on the file details match closely to the page button (see Paul's designs for more details)

Tasks

• Implement unpublish action on "File" section (no indication in UI at the moment)
• Remove unpublish action when file is already unpublished
• Merge #280

Related

• silverstripe/silverstripe-framework#5529 (comment)
• silverstripe/silverstripe-framework#5611
• Design UX Patterns

The delete button for Files simply doesn't work :)

After recent a change to make checkboxes more accessible they are no longer visible in IE10 as ::before is not supported for inputs. I suggest adding a label to the input and style that like the checkbox.

This issue was caused by #100

Followup from #115. Run npm run lint to check. Some of these might be fixed by #114 (using variables.scss from framework)

client/src/components/BulkActions/BulkActions.scss
  11:26  error  Color functions such as 'rgba' should only be used in variable declarations                       no-color-literals
  38:4   error  Selector '.gallery__bulk-actions__counter' should have 1 or fewer BEM elements, but 2 were found  bem-depth
  44:12  error  Color literals such as 'ffffff' should only be used in variable declarations                      no-color-literals
  73:29  error  Color functions such as 'rgba' should only be used in variable declarations                       no-color-literals
  90:25  error  Color functions such as 'rgba' should only be used in variable declarations                       no-color-literals

client/src/components/Dropzone/Dropzone.scss
  15:17  error  Color functions such as 'rgba' should only be used in variable declarations  no-color-literals

client/src/components/File/File.scss
    8:17  error  Color functions such as 'rgba' should only be used in variable declarations                      no-color-literals
   17:12  error  Color literals such as 'ffffff' should only be used in variable declarations                     no-color-literals
   34:23  error  Color literals such as 'fff' should only be used in variable declarations                        no-color-literals
   43:29  error  Color literals such as 'dddddd' should only be used in variable declarations                     no-color-literals
   88:8   error  Selector '.item__actions__action' should have 1 or fewer BEM elements, but 2 were found          bem-depth
   96:21  error  Color literals such as 'fff' should only be used in variable declarations                        no-color-literals
   96:51  error  Quotes around URLs are required                                                                  url-quotes
  102:21  error  Color literals such as 'fff' should only be used in variable declarations                        no-color-literals
  102:53  error  Quotes around URLs are required                                                                  url-quotes
  108:21  error  Color literals such as 'fff' should only be used in variable declarations                        no-color-literals
  108:53  error  Quotes around URLs are required                                                                  url-quotes
  114:21  error  Color literals such as 'fff' should only be used in variable declarations                        no-color-literals
  114:51  error  Quotes around URLs are required                                                                  url-quotes
  120:21  error  Color literals such as 'fff' should only be used in variable declarations                        no-color-literals
  120:52  error  Quotes around URLs are required                                                                  url-quotes
  127:8   error  Selector '.item__actions__action--select' should have 1 or fewer BEM elements, but 2 were found  bem-depth
  129:16  error  Color literals such as 'fff' should only be used in variable declarations                        no-color-literals
  157:4   error  Selector '.item__actions__action' should have 1 or fewer BEM elements, but 2 were found          bem-depth
  170:25  error  Color literals such as 'fff' should only be used in variable declarations                        no-color-literals
  175:6   error  Selector '.item__actions__action--select' should have 1 or fewer BEM elements, but 2 were found  bem-depth
  185:27  error  Color literals such as 'ddd' should only be used in variable declarations                        no-color-literals
  190:6   error  Selector '.item__actions__action--cancel' should have 1 or fewer BEM elements, but 2 were found  bem-depth
  211:17  error  Color literals such as 'ddd' should only be used in variable declarations                        no-color-literals
  215:6   error  Selector '.item__upload-progress__bar' should have 1 or fewer BEM elements, but 2 were found     bem-depth
  218:7   error  Duplicate properties are not allowed within a block                                              no-duplicate-properties
  218:19  error  Color literals such as '29abe2' should only be used in variable declarations                     no-color-literals
  241:12  error  Color literals such as 'fff' should only be used in variable declarations                        no-color-literals

client/src/containers/Gallery/Gallery.scss
  28:31  error  Color functions such as 'rgba' should only be used in variable declarations            no-color-literals
  36:20  error  Trailing semicolons required                                                           trailing-semicolon
  43:27  error  Color functions such as 'rgba' should only be used in variable declarations            no-color-literals
  69:4   error  Selector '.gallery__load__more' should have 1 or fewer BEM elements, but 2 were found  bem-depth
  71:12  error  Color literals such as 'fffff' should only be used in variable declarations            no-color-literals
  78:23  error  Color literals such as '338dc1' should only be used in variable declarations           no-color-literals

client/src/styles/AssetAdmin.scss
  40:9   error  Nesting depth 3 greater than max of 2                                         nesting-depth
  51:21  error  Color literals such as 'c0c0c2' should only be used in variable declarations  no-color-literals
  56:16  error  Color literals such as '393939' should only be used in variable declarations  no-color-literals
  57:22  error  Color literals such as 'fff' should only be used in variable declarations     no-color-literals