New fixed board and grid

[martinbedouret]

Design of this feature is in progress.

We want to implement a new board attribute called grid.
This attribute comes from the open board standard and can be found here:

https://docs.google.com/document/d/1Bnl5neOf9-y53yOAGjd8BzQ7jvAdLhcB6y9Zw7ITYbA/edit#heading=h.aqlnoqq65dmy

As described in the document, this will allow Cboard to implement a fixed grid-based layout to define the order of the tiles as a list of ids. Each id should match the unique id provided for the corresponding tile. This will also allow empty tiles (no image, no label), that should have a null placeholder in the grid’s order attribute, which is an array of arrays.

This feature will require to implement some new UI capabilities in order to allow the user to create and edit the grid when adding or editing a board. Below some ideas:

Goals

• When deleting a tile when locked, it deletes the tile and other tiles do not move position.
• Remaining tiles do not change position after deletion of one tile.
• Ability to choose a position on the board to add a new tile. It is possible to choose a position on the board to add a new tile

Examples

No nulls
"grid": { "rows": 3, "columns": 3, "order": [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ] },

Empty column
"grid": { "rows": 3, "columns": 4, "order": [ [ 1, 2, 3, null ], [ 4, 5, 6, null ], [ 7, 8, 9, null ] ] },

[shayc]

I have some work done regarding exactly these requirements on a different repo. I'll write more soon, just saying this so people wont have to reimplement existing code I have.

[sylvansson]

I'll start working on specs for the backend part.

[sylvansson]

I think we can break this down into smaller blocks that can be released independently.

As a preliminary phase, we could update the frontend and the backend to support the grid property while preserving the current grid behaviour—6 columns and no empty tiles, except at the end of the grid.

Backend

• Update the Board Mongo schema and the Board Swagger definition to have a grid property. The property is optional for now so that the backend can be updated and deployed independently of the frontend.

Frontend

• Set a grid property when we create or import a board. The grid always has 6 columns and no gaps between tiles for now to be consistent with the current behaviour.
• If an existing board doesn't have a grid property, we generate one. The property will be persisted by the frontend the next time the user edits tiles. This allows us to migrate boards lazily.
• Use the grid property when rendering a board.
• Update export helpers to use the grid property instead of computing it from tiles.

Thoughts? I'm not entirely familiar with the codebase so I might have missed something.

/cc @martinbedouret @shayc

[martinbedouret]

@sylvansson I do agree with the split you propose,. makes totally sense.
Regarding the current behavior of the grid, it is not really fixed to 6 columns, it actually will depend on the current screen size See the breakpoints definitions in default props of Grid. container. js:

  static defaultProps = {
    cols: { lg: 6, md: 6, sm: 5, xs: 4, xxs: 3 },
    rows: { lg: 3, md: 3, sm: 3, xs: 3, xxs: 3 },
    breakpoints: GRID_BREAKPOINTS,
    gap: 10,
    edit: false
  };

So number of the columns will depend on this.
I still have to take a look to the Shay's repository to understand how to use it.. I will let you know once I get some more information.