Sketch collections #1164

andrewn · 2019-09-20T12:31:52Z

Implementing features in #1115.

Editor API for Collections

Route	Purpose	Restrictions
`GET /collections`	Fetch current user's collections	Logged in user
`GET /:username/collections`	Fetch a specific user's collections
`POST /collections`	Create a new collection	Logged in user
`PATCH /collections/:id`	Update collection metadata	Logged in user must own collection
`DELETE /collections/:id`	Delete collection	Logged in user must own collection
`POST /collections/:id/:projectId`	Add a project to a collection	Logged in user must own collection
`DELETE /collections/:id/:projectId`	Remove a project from a collection	Logged in user must own collection

Features

Checks

I have verified that this pull request:

has no linting errors (npm run lint)
is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
is descriptively named and links to an issue number, i.e. Fixes #123

* Converts import script to use public API endpoints The endpoints don't exist yet, but this is a good way to see how the implementation of the data structures differ. * Exposes public API endpoint to fetch user's sketches * Implements public API delete endpoint * Adds helper to create custom ApplicationError classes * Adds create project endpoint that understand API's data structure This transforms the nested tree of file data into a mongoose Project model * Returns '201 Created' to match API spec * Removes 'CustomError' variable assignment as it shows up in test output * transformFiles will return file validation errors * Tests API project controller * Tests toModel() * Creates default files if no root-level .html file is provided * Do not auto-generate a slug if it is provided Fixes a bug where the slug was auto-generated using the sketch name, even if a slug property had been provided. * Validates uniqueness of slugs for projects created by the public API * Adds tests for slug uniqueness * Configures node's Promise implementation for mongoose (fixes warnings) * Moves createProject tests to match controller location * Adds support for code to ApplicationErrors * deleteProject controller tests * getProjectsForUser controller tests - implements tests - update apiKey tests to use new User mocks * Ensure error objects have consistent property names `message` is used as a high-level description of the errors `detail` is optional and has an plain language explanation of the individual errors `errors` is an array of each individual problem from `detail` in a machine-readable format * Assert environment variables are provided at script start * Version public API * Expect "files" property to always be provided * Fixes linting error * Converts import script to use public API endpoints The endpoints don't exist yet, but this is a good way to see how the implementation of the data structures differ. * Exposes public API endpoint to fetch user's sketches * Implements public API delete endpoint * Adds helper to create custom ApplicationError classes * Adds create project endpoint that understand API's data structure This transforms the nested tree of file data into a mongoose Project model * Returns '201 Created' to match API spec * Removes 'CustomError' variable assignment as it shows up in test output * transformFiles will return file validation errors * Tests API project controller * Tests toModel() * Creates default files if no root-level .html file is provided * Do not auto-generate a slug if it is provided Fixes a bug where the slug was auto-generated using the sketch name, even if a slug property had been provided. * Validates uniqueness of slugs for projects created by the public API * Adds tests for slug uniqueness * Configures node's Promise implementation for mongoose (fixes warnings) * Moves createProject tests to match controller location * deleteProject controller tests * Adds support for code to ApplicationErrors * getProjectsForUser controller tests - implements tests - update apiKey tests to use new User mocks * Ensure error objects have consistent property names `message` is used as a high-level description of the errors `detail` is optional and has an plain language explanation of the individual errors `errors` is an array of each individual problem from `detail` in a machine-readable format * Assert environment variables are provided at script start * Version public API * Expect "files" property to always be provided * Fixes linting error * Checks that authenticated user has permission to create under this namespace Previously, the project was always created under the authenticated user's namespace, but this not obvious behaviour.

* Converts import script to use public API endpoints The endpoints don't exist yet, but this is a good way to see how the implementation of the data structures differ. * Exposes public API endpoint to fetch user's sketches * Implements public API delete endpoint * Adds helper to create custom ApplicationError classes * Adds create project endpoint that understand API's data structure This transforms the nested tree of file data into a mongoose Project model * Returns '201 Created' to match API spec * Removes 'CustomError' variable assignment as it shows up in test output * transformFiles will return file validation errors * Tests API project controller * Tests toModel() * Creates default files if no root-level .html file is provided * Do not auto-generate a slug if it is provided Fixes a bug where the slug was auto-generated using the sketch name, even if a slug property had been provided. * Validates uniqueness of slugs for projects created by the public API * Adds tests for slug uniqueness * Configures node's Promise implementation for mongoose (fixes warnings) * Moves createProject tests to match controller location * Adds support for code to ApplicationErrors * deleteProject controller tests * getProjectsForUser controller tests - implements tests - update apiKey tests to use new User mocks * Ensure error objects have consistent property names `message` is used as a high-level description of the errors `detail` is optional and has an plain language explanation of the individual errors `errors` is an array of each individual problem from `detail` in a machine-readable format * Assert environment variables are provided at script start * Version public API * Expect "files" property to always be provided * Fixes linting error * Converts import script to use public API endpoints The endpoints don't exist yet, but this is a good way to see how the implementation of the data structures differ. * Exposes public API endpoint to fetch user's sketches * Implements public API delete endpoint * Adds helper to create custom ApplicationError classes * Adds create project endpoint that understand API's data structure This transforms the nested tree of file data into a mongoose Project model * Returns '201 Created' to match API spec * Removes 'CustomError' variable assignment as it shows up in test output * transformFiles will return file validation errors * Tests API project controller * Tests toModel() * Creates default files if no root-level .html file is provided * Do not auto-generate a slug if it is provided Fixes a bug where the slug was auto-generated using the sketch name, even if a slug property had been provided. * Validates uniqueness of slugs for projects created by the public API * Adds tests for slug uniqueness * Configures node's Promise implementation for mongoose (fixes warnings) * Moves createProject tests to match controller location * deleteProject controller tests * Adds support for code to ApplicationErrors * getProjectsForUser controller tests - implements tests - update apiKey tests to use new User mocks * Ensure error objects have consistent property names `message` is used as a high-level description of the errors `detail` is optional and has an plain language explanation of the individual errors `errors` is an array of each individual problem from `detail` in a machine-readable format * Assert environment variables are provided at script start * Version public API * Expect "files" property to always be provided * Fixes linting error * Checks that authenticated user has permission to create under this namespace Previously, the project was always created under the authenticated user's namespace, but this not obvious behaviour. * Splits private and public APIs The private API is under /editor and the public API under /api

… flag (processing#1149)

- List any user's collections - Create new collection - Modify collection metadata - Delete collection - Add/remove any project to/from a collection

- List all collections for a given user - View an individual collection - Link to a sketch from a collection

…ion URL will work

andrewn · 2019-09-20T12:33:55Z

@catarak As discussed, this branch is "feature-complete" so I'd really love your feedback on the UI flow. Does it makes sense? Are any flows missing.

I'm going to work on tidying up the code as there are prop-types to be added and some components to refactor.

I'll also work on finessing the UI details once you're happy with the overall shape of the UI.

- List any user's collections - Create new collection - Modify collection metadata - Delete collection - Add/remove any project to/from a collection

…wn/p5.js-web-editor into feature/sketch-collections

catarak · 2019-12-10T23:35:49Z

just pushed a potential option for the collection sharing, see 001a30f

…wn/p5.js-web-editor into feature/sketch-collections

andrewn · 2019-12-11T13:53:45Z

I've been working on some nav-bar ideas so that it's easier to get back to the Collection List from an individual Collection page.

A. Always show Sketches and Collections links on Dashboard and Collection page?

Option 1: Show the owner of the collection's username is in the link text as you're on their dashboard page...

Option 2. No owner in the link name, but in both instances you get these awkward situations where the links appear twice...

B. Show "< Collections" as a link on the individual collection?

On the dashboard, the p5 logo takes you to the editor:

On the collection page, you see a back to collections link:

andrewn · 2019-12-11T14:13:14Z

On the add sketch/add collection overlay, should this overlay have a fixed height?

Done

andrewn · 2019-12-11T14:51:14Z

On collection list page, maybe the item dropdown should include "add sketch"?

Done

andrewn · 2019-12-11T14:58:01Z

@catarak I think I've addressed all the changes, apart from the Nav/Getting back to collections issue... see comment above.

catarak · 2020-01-13T20:28:30Z

Only small stuff left:

Description should be inactive color if a collection doesn't have one
Description pencil is misaligned
username should link to that user's sketches (maybe?)

i think the contrast between the inactive check and active check is pretty subtle—there's not really another color in the theme and maybe one should be added, i'm thinking the blue that's in the code syntax or a green

On the collection list view, the dropdown says "add sketches". On the single collection view, there's a button that says "add sketch". The overlay that appears says "add sketches." The copy should all match, probably, right?
Navigating from single collection back to tabbed dashboard view - I think having "Back to Editor" is more important than "Back to Collections", esp since people are going to be used to navigating from the Editor view.

Buttons and menu items should say "Add sketch" (singular) and titles should say "Add to collection" as it's implied by context that it's a sketch.

…d list

andrewn · 2020-01-15T11:25:54Z

@catarak I've made all the changes in the list, apart from the nav bar which we can chat about later.

Here are the new icon contrasts:

This reverts commit 740401d.

andrewn · 2020-01-15T17:19:05Z

Reverted the top-level nav to "Back to Editor"

@catarak All done!

catarak · 2020-01-28T21:56:38Z

🎉 🎉 🎉 i'm going to doing a bunch of testing on staging!!

andrewn added 25 commits September 8, 2019 16:45

Display Access Token tab depending on UI_ACCESS_TOKEN_ENABLED feature…

0ae7a9e

… flag (processing#1149)

Adds Collections model and Editor API to manage collections

83978ac

- List any user's collections - Create new collection - Modify collection metadata - Delete collection - Add/remove any project to/from a collection

Adds collections Nav item behind a feature flag

9c36f2b

Displays existing collection

d02a413

- List all collections for a given user - View an individual collection - Link to a sketch from a collection

Create Collection

dcf65c6

EditableInput component

1c97152

WIP Display collection

2df3670

Fix routing bug displaying Sketch list tab

b258d7c

Splits CollectionList into smaller files

3dbaa90

Logged in user can use "Add to collection" menu item

55e6b31

Show toast message when creating collection or adding/removing sketches

c575559

Assets routes should be parsed after server routes so /add-to-collect…

ee896b0

…ion URL will work

Shorten date displayed in Collection List items for better layout

fef4bd8

Padding for table cells to align with header

cf3c132

Do not empty table when fetching new data

a0384f1

Sets Collection List modal in addMode to fixed width

5575c63

Display icon-based add/remove button in Collection List

5011c1f

Remove logging

d2ec686

Edit sketch name/description

8b058d8

Fix sketch list padding in collection view

709aa8e

Add sketch to collection from collection view

b980ec7

Enable collection and sketch to be created from dashboard page

a93ac48

Collection metadata area layout improvements

52e9872

andrewn requested a review from catarak September 20, 2019 12:32

andrewn mentioned this pull request Sep 20, 2019

[WIP] Adding sketches to collections #1116

Closed

10 tasks

andrewn added 2 commits September 25, 2019 12:01

Adds Collections model and Editor API to manage collections

c9551a3

- List any user's collections - Create new collection - Modify collection metadata - Delete collection - Add/remove any project to/from a collection

Adds collections Nav item behind a feature flag

af955b1

catarak and others added 5 commits November 25, 2019 10:46

merge master into sketch collections, to include updating theming

5319bbb

Use same remove icon as in QuickAdd panel

ce1c389

Rename import to match file name

4f7c9f2

Merge branch 'feature/sketch-collections' of https://github.com/andre…

387cec1

…wn/p5.js-web-editor into feature/sketch-collections

potentional option for collection sharing

001a30f

Merge branch 'feature/sketch-collections' of https://github.com/andre…

20c2c6c

…wn/p5.js-web-editor into feature/sketch-collections

andrewn added 3 commits December 11, 2019 14:57

Make navigation back to Collection List more obvious

740401d

Fixed-height Overlay for QuickAdd views

0c68327

Better min-width for QuickAdd views

a2da26d

Display Add Sketches Overlay from Collection List

4d0aa23

Fix linter warnings

a5b6256

catarak mentioned this pull request Jan 13, 2020

PropType Validation Fails On Local Development Mode #1236

Closed

andrewn added 6 commits January 15, 2020 10:45

Collection owner's username links to their sketches page

903550b

Make "Add sketch" copy consistent

0660031

Buttons and menu items should say "Add sketch" (singular) and titles should say "Add to collection" as it's implied by context that it's a sketch.

Description should be inactive color if a collection doesn't have one

811c88f

Don't allow Collection name to be empty

ed481b9

Align pencil icon with label

58b800d

Increase contrast between in/out of collection icon state in quick ad…

442360c

…d list

Revert "Make navigation back to Collection List more obvious"

8087a3f

This reverts commit 740401d.

catarak merged commit 1a3a1aa into processing:feature/public-api Jan 28, 2020

lindapaiste mentioned this pull request Jun 10, 2023

Use EditableInput component in Toolbar #2238

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Sketch collections #1164

Sketch collections #1164

Uh oh!

andrewn commented Sep 20, 2019 •

edited

Loading

Uh oh!

andrewn commented Sep 20, 2019

Uh oh!

catarak commented Dec 10, 2019

Uh oh!

andrewn commented Dec 11, 2019

Uh oh!

andrewn commented Dec 11, 2019

Uh oh!

andrewn commented Dec 11, 2019

Uh oh!

andrewn commented Dec 11, 2019

Uh oh!

catarak commented Jan 13, 2020 •

edited by andrewn

Loading

Uh oh!

andrewn commented Jan 15, 2020

Uh oh!

andrewn commented Jan 15, 2020

Uh oh!

catarak commented Jan 28, 2020

Uh oh!

Uh oh!

Uh oh!

Sketch collections #1164

Sketch collections #1164

Uh oh!

Conversation

andrewn commented Sep 20, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Editor API for Collections

Features

Checks

Uh oh!

andrewn commented Sep 20, 2019

Uh oh!

catarak commented Dec 10, 2019

Uh oh!

andrewn commented Dec 11, 2019

A. Always show Sketches and Collections links on Dashboard and Collection page?

B. Show "< Collections" as a link on the individual collection?

Uh oh!

andrewn commented Dec 11, 2019

Uh oh!

andrewn commented Dec 11, 2019

Uh oh!

andrewn commented Dec 11, 2019

Uh oh!

catarak commented Jan 13, 2020 • edited by andrewn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andrewn commented Jan 15, 2020

Uh oh!

andrewn commented Jan 15, 2020

Uh oh!

catarak commented Jan 28, 2020

Uh oh!

Uh oh!

andrewn commented Sep 20, 2019 •

edited

Loading

catarak commented Jan 13, 2020 •

edited by andrewn

Loading