Device Detail Exclusao

Device Detail — exclusão de device (Manager)

Documentação técnica do fluxo de apagar device a partir da tela device-detail (DeviceDetailPage / DeviceDetailScreen), usado pela visão MANAGER.

Issue de origem: ControleOnline/app-community#383

Contexto e visão (APP_TYPE)

Visão	Papel neste fluxo
MANAGER	Tela canônica: detalhe do device com botão de lixeira no header, confirmação e exclusão.
ADMIN	Pode reutilizar a mesma página/rota de devices; o fluxo de exclusão é o mesmo componente compartilhado em ui-common.
POS / PPC / SHOP / CRM / etc.	Não expõem este botão de exclusão no mesmo contexto; configuração de device para operação continua via DeviceConfig / helpers de smoke, não via hard-delete do registro.

ui-common é o módulo compartilhado. A rota Manager (DeviceDetail / device-detail em ui-manager) apenas consome a página.

Objetivo de negócio

Permitir que o operador, na tela de detalhe de um device, remova o device (registro de device no contexto atual) com:

1. Confirmação explícita antes de qualquer chamada de exclusão.
2. Feedback de erro sem quebrar a tela.
3. Retorno à listagem após sucesso, com a lista refletindo a ausência do item.

Não cobre exclusão em massa, soft-delete customizado além do que a API já expõe, nem redesign da página.

Localização no código

Peça	Caminho (ui-common)
Shell da página	src/react/pages/DeviceDetailPage.js → reexport de Devices/detail/DeviceDetailScreen.js
Header (edit alias + copy config + trash)	src/react/pages/Devices/detail/DeviceDetailHeader.js
Ação de exclusão + confirmação	src/react/pages/Devices/detail/useDeviceDetailActions.js → confirmRemoveDevice
Helper de confirmação web/nativo	src/react/pages/Devices/detail/deviceDetailHelpers.js → confirm(msg, cb)
Unit	src/tests/react/pages/deviceDetailDelete.test.js

testID do botão: device-detail-delete-btn (útil para smoke browser no Manager).

Fluxo

sequenceDiagram
  participant U as Usuário (Manager)
  participant H as DeviceDetailHeader
  participant A as useDeviceDetailActions
  participant C as confirm()
  participant API as deviceActions.remove
  participant N as Navigation

  U->>H: toca trash-2
  H->>A: onConfirmRemove / confirmRemoveDevice
  A->>C: confirm(mensagem)
  alt Cancelar
    C-->>A: não chama callback
    Note over A,API: nenhum DELETE
  else Confirmar
    C->>A: callback
    A->>API: remove(deviceId)
    alt Sucesso
      API-->>A: ok
      A->>N: goBack() ou navigate(DevicesIndex)
    else Erro
      API-->>A: erro
      A-->>U: showSystemError(...)
    end
  end

Loading

Passos

1. No header, ao lado do botão de editar alias (edit-2) e do de copiar config (copy), aparece o botão de lixeira (trash-2) quando há deviceId e o alias não está em edição.
2. Ao tocar, confirmRemoveDevice monta a mensagem com o label do device (alias || deviceString || deviceId).
3. confirm() (obrigatório):
   • Web (Manager web): window.confirm(msg) — Alert.alert sozinho não exibe diálogo no React Native Web (causa raiz do rework em #383).
   • Nativo: Alert.alert('Confirmação', msg, [Cancelar, Confirmar]).
4. Só após confirmar: deviceActions.remove(deviceId) (DELETE /devices/{id} no modelo atual de store/API).
5. Sucesso: navigation.goBack() se possível; senão navigation.navigate('DevicesIndex').
6. Erro: showSystemError(error, 'Não foi possível excluir o device.'); botões reabilitados (removingDevice volta a false).

Durante a exclusão (removingDevice === true), os botões do header ficam desabilitados e o ícone da lixeira pode mostrar loader.

Regras e contratos

• Confirmação obrigatória: cancelar não chama a API.
• Escopo multi-tenant / company: a tela já opera no company scope existente; a exclusão usa o deviceId do contexto atual — não altera o modelo de tenant.
• Tema: cores de fundo/ícone vêm de themeColors (buttonBackground / buttonIcon); sem hardcode de cor fora do tema (themes.md / tokens do DOMAIN).
• Endpoint: usa o remove já exposto por deviceActions (hard/soft conforme a API de devices). Não há soft-delete paralelo nesta entrega.
• Limite de arquivo: página modularizada (DeviceDetailHeader, useDeviceDetailActions, helpers); arquivos da entrega ≤ 500 linhas.

O que este fluxo não faz

• Não redesenha a DeviceDetailPage.
• Não implementa exclusão em massa.
• Não altera backend além do consumo do endpoint de delete já existente.
• Não é o fluxo de “limpar cache de catálogo” (outro trash-2 na mesma tela, ação distinta).

Relação com outros fluxos de device

• Configuração de DeviceConfig (PDV / DISPLAY / PRINT): ver Smoke-Helpers-Device-Configuracao — setup operacional para smokes, não exclusão do registro.
• Cópia de configuração entre devices: issue relacionada de produto; botão copy no mesmo header (device-detail-copy-config-btn), fluxo separado.

Testes

• Unit: deviceDetailDelete.test.js (confirmação / exclusão quando viável).
• Smoke browser (Manager): exercitar device-detail-delete-btn → cancelar (não apaga) e confirmar (DELETE + volta à lista), preferencialmente com mock em CI para não apagar dados reais.

Links

Destino	URL
Issue	https://github.com/ControleOnline/app-community/issues/383
Repositório	https://github.com/ControleOnline/ui-common
Home deste módulo	Home
App Home	https://github.com/ControleOnline/app-community/wiki
Smoke device config	https://github.com/ControleOnline/app-community/wiki/Smoke-Helpers-Device-Configuracao