nymag / clay-space-edit Goto Github PK

un-break spaces

Updates for:

• Change to SELECT mutation payload
• Changes to DOM for panels in Kiln UI

We need unit tests and to install test coverage. This has already been started but it stalled, I will update this issue soon.

It's inefficient to require Spaces and their Logic children to carry their own icon with them to make the readouts pretty. Let's add some default icons and an API around how to associate the icons with a logic to make life better for developers.

Current Icons To Be Added

• Tag Icon
• Clock Icon

Other recommendations?

Lots of TODO comments are floating around. Make sure they're all resolved.

Acceptance Criteria

• Cannot find TODO: string in all of project unless exceptions arise.
• Exceptions are documented

Duplicating a component into a new logic component with no logic around it. This would be an option passed into the filterableList along with a callback function to execute as provided by Kiln.

The edit component needs to check for any component that begins with clay-space and not limit itself to just clay-space. This needs to occur both when making the component lists as well as when creating a component list.

Issue #15 will track the interaction of choosing between which space to use

We have icons for "Tags", "Time" and "Person", but we don't have a default icon that just means "some sort of logic". This means a user has to pick between one of the three we include to have the logic displayed in the pane. Can we find a good default icon that any type of logic can use? The developer must choose the best icon to represent their chosen logic, but a fallback is necessary.

To clean up the repo, files should be moved to a src directory and compile to a dist directory. Component specific files (i.e. template.nunjucks, bootstrap.yml, etc) can stay in root.

• Update directory structure
• Update webpack build

Need to account for future Amphora change which prefixes routes

/components/ --> /_components/

When the page loads, components on the page who have a Space in their component lists should get a "Create Space" button in the selector.

Requirements For Spaces UI Pane

• Pane opens from the middle
• Logic & Component can be removed
• Logic & Component can be re-ordered
• Logic targeting can be edited
• New component can be added (component availability determined by the component list)

Logic in the browse pane does not wrap to the next line and forces the icons out of the pane. An example screenshot is provided below:

The proper designs for the UI need to be implemented

As it works now, the icons for property readouts is hard coded in clay-space-edit. The API for this should be more general because we don't want to edit the clay-space-edit every time there's a new kind of logic property.

How it should work:

• there's a property in the logic Clay component that let's the user choose a icon that represents the field (i.e. clock for time, label for tag)
• the user can only use Material Design Icons
• clay-space-edit looks at this property and renders it in the readouts

An option to change between multiple types of Space if there are multiple available within a component list. Dependent on #13

Undecided on whether or not this should be part of v1

The components that are active should be indicated in the UI and those that are not active should be hidden.

Acceptance Criteria

• Assume only one is active at a time (for now)
• Indicate active item in the pane when looking at all Logics
• Clicking a component in the list makes it active

If multiple Space components are in a componentList then a user needs to be prompted with a pane to choose which type of Space they are trying to update.

Current Implementation: Let's say we have a Space with top stories components. One for articles tagged with "kitchen tools", another for those tagged with "shoes". If an article has the tag "kitchen tools", the Logic for the "kitchen tools" will have the active class and be visible in Edit mode. If the article doesn't have any of those tags, the "kitchen tools" top stories component will be active anyway. If there is no active logic for the page, clay-space-edit will designate the first logic in the Space to be active, which happens to be the "kitchen tools" Logic.

This is confusing for the user. There is no language in the UI that describes this behavior (and I don't think there should be, it would clutter the UI). I think this is why a rogue user has been deleting Space Logics from articles, leaving Spaces empty, and triggering errors.

Maybe we should have some placeholder text in lieu of any visible Logic, that says "This Space has no Active Logics". Users will still be able to edit Logic via the "Edit Space" button.

How do Spaces work when used in an invisible componentList?

• How does a user create a Space?
• How does a user browse a Space?
• How does a user remove from a Space?
• How does a user edit the Logic components in a Space?

Once the UX solved for the implementation will be tracked in a separate issue.

When the component is first added to a page it does not run because it cannot tap into kiln's plugin event system from when a Space's wrapper is added.

Two possible solutions:

• Refresh the page automatically when added
• Prompt a user and tell them they need to load the page to have it work properly.

The targeting logic should be displayed in the UI, but the API needs to be decided upon.

Discussion

• We want a "data only" implementation, these should not be derived from the DOM
• Should the properties in the schema be prefixed with target- or logic- to so we know which properties should be displayed?
• Could pull in something from the schema _description?
• Could add a new property to the schema called _targeting or something which is an array whose values are the properties that are used for targeting

Tests needed for:

• services (shooting for 80%)
• Vue components (will have to look at how to do this)

There will probably be some UX updates for Spaces, but what we should do is leverage the schema of a Space somehow to give a user direction for how to work with the Space. The schemas are already pre-loaded onto the page, so let's use them!

• Pull Space instructions from the schema description
• Investigate adding properties to the schema that can be pulled (i.e. title)

https://github.com/nymag/clay-space-edit/blob/vue/src/services/remove-service.js#L17

removeComponent

After everything else is done let's make sure the progress bar is tracking updates to Spaces/Logics

Codebase should be converted to ES6 using Babel.

Currently, only one Logic component is displayed at a time because the general use case is that only one component "wins" in a Space. This assumption does not work when a user creates a Space which renders all Logics that pass a test. The edit experience should be flexible enough to handle this sort of Space.

Questions:

• In the situation in which multiple Logic components are allowed to exist in a Space, does each component have the browse button?
• What happens to the normal 'Add To Component List' button?
• Does the 'Go To Parent' Button still go to the Space's parent or do they now reference the Space?

@designer

Any component that is wrapped in a Space should have a button to launch the UI pane to interact with targeting. This is the button which launches the UI described in #56.

• Appears in selector for the component displayed
• Appears in any subsequently selected component (via the Spaces UI pane)
• Displays the number of components occupying the Space

Use the filterable list.

For example, updating the package-nav with a new tag on http://qa.www.vulture.com/pages/new.html?edit=true# does not refresh the package-nav with new DOM after save, even though the correct rendered component is returned from the PUT request.

Likely something around https://github.com/nymag/clay-space-edit/blob/master/src/controllers/space-controller.js#L29 according to @jonwinton

In Edit Mode
Currently, a Space's contents appear on a page even if its Logic's checks do not decide something should be displayed. This is because the Space just defaults to the last Logic in its content. If the components in a Logic are invalid then they will be caught on publish. This is bad for people whose pages would never display the content of a Space, so how to we make sure editing a Space is consistent?

Future
When Permissions can be implemented then only certain users should be able to edit certain components/page areas. Therefore we can hide a space entirely if no Logics would be displayed on a page and the permissions model would prevent a users who aren't concerned with Spaces from being affected.

The question is: should a Space not display itself on a page if nothing matches?

Blocked by #27. Once a UX solution has been decided upon this issue will track the implementation.

do it like this:

https://github.com/nymag/clay-kiln/wiki/Kiln-APIs#buttons

instead of like this:

https://github.com/nymag/clay-space-edit/pull/66/files#diff-12be41b1bed41c27abfc6055eb578e5f

Convert the build to use Webpack 2 so we get all this stuff

These need to work as well.

Remove buttons in the component selectors should do the following:

• Removing a component removes its parent Logic wrapper
• Removing the last component in a Space removes the Space as well

Current Implementation: If a user deletes Logics from a Space, the Space is suppose to delete itself. This logic isn't triggering and caused a bug (alluded to in #100). However, I think we should leave empty Spaces, with some kind of placeholder, to let users add Logic to the Space.

The title for the pane when a user clicks the browse button needs to be configurable.

Change occurs here: https://github.com/nymag/clay-space-edit/blob/master/src/controllers/space-settings-controller.js#L58

To re-create:

• Create a brand new Space component
• The parent value passed from Kiln is an empty object
• parent is used to construct the possible components that can be added to a space

Problems

• There is no reference to the layout component in the HTML which we can use to grab the layout's component list
• We never know for sure which property of the layout is the desired component list

Possible Solution
This may require amending the Kiln logic which grabs the parent's information.

... so we can debug things.

Events that should be tracked:

• when a Logic is edited
• when a Logic is added/removed

A CI service needs to be setup. Either CircleCI or TravisCI.

A Logic needs to be converted to the model.js format for proper testing

Update this section to pull from whichever Space's componentList. This is dependent on #13

Get the build working with anything Vue related. Details to be described once they've been discovered.

Right now everything is dependent on the clay-space and space-logic class. Explore how to expand this/abstract it to be more reusable.

Documentation needs to be provided for the following:

• How to create a Space (componentList + filter)
• How to create a Logic (embedding a component and display property)
• Class API for editing
• Data attribute API for editing
• Updated README

Ideally, this documentation would live inside the Wiki and the README can reference that.

This line will break everything: https://github.com/nymag/clay-space-edit/blob/vue/src/ui/create-space-button.vue#L22

Assumes components is named layout. Need to fix.