PluginOutlet em falta para o componente second-factor.gjs e para second-factor-add-totp.gjs

Olá
Comecei a trabalhar com o Discourse recentemente e, com minha experiência de 1 semana, posso dizer definitivamente que o nível de entrada é bastante alto para um desenvolvedor que realmente precisa modificar coisas do Core, isso se deve à falta de documentação/informação real, especialmente se estivermos falando sobre as opções mais recentes e novas, pois só consigo encontrar algo que não funciona mais para a versão 3.6.0 em vez da nova abordagem e, mesmo que eu encontre algo, o nível de detalhes é baixo, sem exemplos da vida real ou explicações mais detalhadas de como usar as coisas.
No entanto, preciso modificar o componente second-factor-add-totp.gjs e simplesmente não consegui, pois não há informações sobre como isso pode ser feito corretamente em meu tema personalizado.
Descobri que existe algo chamado PluginOutlet que foi projetado para funcionar como um hook que você pode usar para injetar seu código personalizado ou até mesmo modificar a saída se o elemento estiver envolvido em PluginOutlet (não tenho certeza, existe algo como api.renderInOutlet, mas não encontrei nenhuma informação normal sobre como usá-lo). Olhando para esses componentes Ember, não vejo PluginOutlet que possivelmente poderia ajudar a fazer pelo menos algumas manipulações com a estrutura usando pelo menos JS puro.

Você pode esclarecer se é algo que pode ser adicionado lá e se posso usá-lo para modificar a estrutura da janela modal ou pelo menos usar JS puro para mover alguns elementos para o lugar?
Além disso, talvez eu não tenha encontrado, mas existe documentação com exemplos para novas abordagens?

1 curtida

Você pode compartilhar mais detalhes sobre qual é o seu objetivo final para que possamos fornecer melhores conselhos?

1 curtida

Claro.
Então, de acordo com a versão “modificada” que tenho, preciso atualizar um pouco o design para o Modal MFA (quando o usuário deve configurar um aplicativo autenticador para MFA).
Por atualização, quero dizer, por exemplo, mover o QR Code na estrutura HTML, para ser mais específico, o texto do site “js.user.second_factor.enable_description“, o QR Code deve ficar em algum lugar entre o novo texto fornecido (marcação HTML).
Outro exemplo é garantir que “Inserir manualmente“ mostre o código real que pode ser copiado ao clicar nele (manualmente através do gatilho JS para que ele apareça e apenas movê-lo).

Tudo isso pode ser alcançado usando manipulações regulares de JS, sem uma reconstrução real da estrutura do componente original, mas o principal desafio para mim é descobrir um local onde esse JS possa ser colocado para que seja acionado enquanto o modal estiver aberto, o que ainda não consegui descobrir.
Esclarecimento adicional: estou usando um tema personalizado que é armazenado usando a opção GIT.

Me avise se algo não estiver claro.

Oi @Falco , você tem alguma sugestão?

Olá @Yan_Rudenko, a melhor documentação para começar é provavelmente este tutorial:

Como você mencionou, os Plugin Outlets são a melhor maneira de personalizar a interface do usuário. Mas eles não estão disponíveis em todos os lugares. Apenas certas partes da interface do usuário foram projetadas para serem personalizadas.

Manipular o DOM usando JS regular causará erros, pois nosso framework de renderização perderá o controle dos elementos que renderizou na tela. É melhor aderir aos plugin outlets suportados e outras APIs JS do Discourse (também abordadas no tutorial).

3 curtidas

Olá @david, obrigado pelo link do tutorial, mas eu já verifiquei isso e não encontrei nenhuma resposta que eu estava procurando. Os exemplos em si são básicos e não cobrem, por exemplo, como obter uma categoria específica (em vez de fazer uma chamada ajax) ou como usar a API do Discourse no código (mencionado https://docs.discourse.org/), que está presente, pelo que sei e vejo. É por isso que escrevi aqui para obter mais detalhes das pessoas que trabalham com o Discourse diariamente e sabem muitas coisas que não estão presentes na documentação.

Entendo perfeitamente que usar JS puro pode causar problemas, mas é a única coisa que me ocorreu por enquanto. Talvez no futuro eu consiga modificar algo de uma maneira mais apropriada, se houver.

Então, se eu entendi corretamente, na versão atual do Discourse que estou usando, que é 3.6.0.beta2-latest, as alterações que mencionei não poderão ser feitas com as ferramentas integradas do Discourse? Devido à falta de PluginOutlets nesses componentes?

A equipe de desenvolvimento considera adicionar isso aos componentes mencionados em futuras versões, pois presumo que não haja problemas técnicos com isso, mas sim uma questão de decisão de algumas pessoas que trabalham nisso?

Obrigado.

Sim! Você pode criar um PR para o core do Discourse que introduza novos outlets.

Não posso prometer que será aceito imediatamente. Mas, uma vez que tenhamos um ponto de partida, será mais fácil continuar a discussão.

2 curtidas

@david, obrigado pela proposta, vou considerá-la quando tiver tempo real para isso, mas você precisa entender que para uma pessoa que acabou de entrar no Discourse, isso pode levar algum tempo, pois preciso resolver como preparar um com as alterações corretas + como você mencionou o estágio de aprovação + tempo antes que ele entre na próxima versão.
Eu esperava que a equipe de desenvolvimento, que é muito mais qualificada, pudesse preparar em 1 hora se fosse apenas adicionar o wrapper PluginOutlet e alguns dentro dos componentes em lugares diferentes (posso estar errado), o que reduziria o tempo necessário para entregar isso na nova versão.

No entanto, como mencionei acima, considerarei sua proposta.

Ainda assim, não recebi uma resposta sobre minha pergunta, se é possível fazer as coisas que mencionei na versão atual do Discourse ou se as alterações que mencionei precisam ser adicionadas/contribuídas primeiro (adicionando o PluginOutlet nesses componentes)?

O motivo pelo qual estou perguntando isso é porque tenho um escopo de trabalho que precisa ser feito, mas não posso fazê-lo e preciso fornecer uma explicação para a equipe do porquê não posso fazê-lo, então o escopo de trabalho será alterado para fazer coisas que podemos ou terei que contribuir com isso na esperança de que seja adicionado ao core e lançado na próxima versão. Portanto, preciso de uma confirmação da equipe de desenvolvimento do Discourse se isso é possível ou não.

Também olhando para o repositório principal GitHub - discourse/discourse: A platform for community discussion. Free, open, simple., não vejo a seção de issues ao lado dos Pull Requests, onde as pessoas geralmente criam issues descrevendo se algo está quebrado ou faltando.

Coisas quebradas vão para Bug, recursos ausentes para Feature (ou no caso de, por exemplo, plugin outlets Dev)

Você usa o branch estável? Então há um bom tempo até a próxima release estável, mas caso contrário, você não precisa esperar que os commits sejam adicionados ao branch mais recente após o PR ser mesclado.

1 curtida

Olá @Moin, obrigado por esta informação!

Eu uso a configuração do Docker para o Discourse e você levantou uma boa sugestão sobre o branch, sim, eu posso ser capaz de alterá-lo enquanto o PR é mesclado e não esperar até o lançamento real.

Olhando para o app.yml, vejo que ele usa a versão (branch) tests-passed, que, olhando para o GIT, presumo que não seja a melhor para usar em termos de estabilidade. Qual é o preferido a ser usado, main ou mudar para a última tag? É possível mudar para a tag em tudo para a configuração do docker?

1 curtida

tests-passed é o mais recente: "tests-passed" is now "latest"

Main não é recomendado para uso em produção.

1 curtida

@david , @Falco Criei um PR, por favor, revise-o e me diga se algo está faltando. Preciso que isso seja progredido o mais rápido possível, então se você puder priorizá-lo de alguma forma, ficarei muito grato.

3 curtidas

@david, só queria agradecer pela revisão e pelo merge tão rápidos do PR.

2 curtidas