mattermost-community/focalboard

Perf: Drag and drop cards in Kanban board view shows intermediate sort state

Open

#2.315 aberto em 11 de fev. de 2022

Ver no GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (2.542 forks)user submission
BugHelp WantedPerformanceSev/3Up for grabs

Métricas do repositório

Stars
 (26.187 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

Description

Steps to reproduce the behavior

  1. Open a board (Kanban) view
  2. Drag a card onto another card in a column with multiple (5+) cards
  3. The card first appears at the beginning or end, then moves to the right position a split second later

Expected behavior

The card should move directly to the dropped position

Screenshots

https://user-images.githubusercontent.com/46905241/153519856-3a0fd910-a008-46d9-bfca-fd1ee70e68d1.mov

Edition and Platform

  • Edition: Mattermost plugin
  • Version: v0.14
  • Browser and OS: Chrome on Mac

Additional context

In the browser network tab, notice that PATCH Block is called twice. This is because on onDropToCard in kanban.tsx, the property change and sort order are two separate API calls. Propose refactoring to call UpdateBlocks in a single call.

Guia do colaborador

Direção de pesquisa
O problema está no componente de visualização Kanban, especificamente na função `onDropToCard` em `webapp/src/components/kanban/kanban.tsx` (linha 172). Atualmente, duas chamadas de API PATCH separadas são feitas para alteração de propriedade e ordem de classificação, causando uma falha visual. A correção é refatorar para chamar `UpdateBlocks` uma vez com ambas as alterações. Investigue a função `UpdateBlocks` e certifique se de que a chamada em lote lida corretamente com ambos os campos. Verifique se há testes existentes para esse comportamento para validar a alteração.
Pilha de tecnologia
typescriptreact
Domain
frontend
Tipo Issue
Performance
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Recente
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactTypeScriptdrag and drop
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
70