---
# System prepended metadata

title: Repasse integração Active directory

---

# Repasse integração Active directory

Esta é uma Doc feita por **Anderson da Silva Santos**, membro responsável pelas tarefas de frontend do time de **Plataforma**, e um dos membros do **Frontend chapter**. 
Para que eu possa sair de férias sem deixar nenhuma tarefa pendente decidi fazer essa doc, com o intúito de eliminar o máximo de dúvidas sobre a integração do active directory no sienge-web. 

Nessa doc você poderá visualizar o que foi feito até então, e o que ainda precisa ser feito nesta tarefa.

## MessageBoxes
O objetivo desse desenvolvimento é a integração do active directory no sienge-web, inicialmente precisamos desenvolver esse design: [FIGMA](https://www.figma.com/file/ZfWPeLlHxE9m995KhZZGRU/%5BPLT%5D-SSO-%C3%89pico?node-id=1508%3A15346).

Merge Request da tarefa: https://git-unic.softplan.com.br/unic/sienge-web/-/merge_requests/558
branch: `feat/platform-active-directory-integration`

A tela a ser alterada será a **/home** do sienge-web, na qual agora possúi uma nova requisição que traz algumas informações para que possamos mostrar (ou não) um [MessageBox](https://unic-cl-prod00-rocket-grua.sienge.com.br/?path=/story/components-messagebox--default) adequado para a situação.

![](https://i.imgur.com/UCk2R7V.png)

Será necessário configurar 3 possíveis cenários com 3 diferentes MessageBoxes. Cenários esses que serão listados abaixo

### Iniciar configuração

O Componente desta MessageBox está localizada em `src/modules/common/Home/StartIntegrationConfigMessageBox/StartIntegrationConfigMessageBox.js`

Essa MessageBox possúi duas ações:

1. Botão "Iniciar configuração"
2. Link "Saiba Mais"

Ao clicar em "Iniciar configuração" o usuário deverá ser redirecionado para uma url, na qual irá passar por alguns processos. Após finalizar esses processos o usuário será redirecionado novamente para a pagina **/home** do sienge, além disso trará consigo alguns parametros que deverão ser resgatados da url, esses parametros são:

- message
- messageType

o parametro `message` contém a mensagem que será usado para disparar uma [Snackbar](https://unic-cl-prod00-rocket-grua.sienge.com.br/?path=/story/components-snackbar--default). E o parametro `messageType` contém os valores `ERROR` ou `SUCCESS`, que serão utilizados para determinar a variante da modal.
essa snackbar precisa ser disparada no exato momento em que o usuário chega na rota **/home**, após passar pelo processo de redirecionamento iniciado pelo botão "Iniciar configuração".

Ao clicar no Link "Saiba mais", o usuário deverá ser redirecionado uma uma documentação mais explicativa, sobre o processo de iniciar configuração da integração do active directory, essa rota de redirecionamento será disponibilizada pelo PM do plataforma **Misal Soares**

### Cadastro

O Componente desta MessageBox está localizada em `src/modules/common/Home/RegisterIntegrationMessageBox/RegisterIntegrationMessageBox.js`

Essa MessageBox possúi duas ações:

1. Botão "Cadastrar"
2. Link "Saiba Mais"

Ao clicar em "Cadastrar" o processo será parecido com o da MessageBox de Iniciar Configuração, portanto a tratativa será feita de forma igual à mesma:

Ao clicar no Link "Saiba mais", o processo também será parecido com o da MessageBox de Iniciar Configuração.

### Ativar

O Componente desta MessageBox está localizada em `src/modules/common/Home/ActiveIntegrationMessageBox/ActiveIntegrationMessageBox.js`

Essa MessageBox possúi apenas uma Ação:

- Botão "Ativar"

Ao clicar em "Cadastrar" o processo será parecido com as duas situações anteriors, portanto a tratativa será feita de forma igual novamente.

---

Todas as messageBoxes possúem um `handler` em seu container, que é aonde deve ser colocada a ação de redirecionar dos botões das modais

- `handleActive`
- `handleRegister`
- `handleStartConfig`

## Endpoint de status

para finalizar, uma pequena explicação do endpoint de status.
O endpoint de status é chamado no momento em que o usuário acessa a rota **/home**, e possúi como retorno o status **200** e o body:

`
{
	configurationStep: "INIT_CONFIG" | "ENABLE_SSO" | "USER_REGISTRATION" | "NONE",
  organizationDomain: string | undefined
}
`

a informação contida em `configurationStep` é utilizada para renderizar (ou não: *"NONE"*) a MessageBox correta:

- `INIT_CONFIG` ira renderizar a MessageBox de Iniciar a configuração
- `ENABLE_SSO` ira renderizar a MessageBox de Ativar
- `USER_REGISTRATION` ira renderizar a MessageBox de Registrar
- `NONE` não irá renderizar nenhuma delas

a informação contida em `organizationDomain` não aparece em todas as ocasiões e é utilizada para repassar um valor para as MessageBoxes
de Ativar e de Cadastrar, esse valor é utilizado nos caracteres em negrito do [protótipo](https://www.figma.com/file/ZfWPeLlHxE9m995KhZZGRU/%5BPLT%5D-SSO-%C3%89pico?node-id=1508%3A15346)

## Novo Menu de usuário
Como apresentado no protótipo acima, não é apenas a rota **/home** que sofreu algumas mudanças, mas também o Menu de usuário:

![menu-usuario.png](https://i.imgur.com/J6XVgIr.png)


além de ter um novo design (bem mais bonito) também possúi algumas novas features, como uma lista para a troca de usuários, algumas informações extras como cargo,email e uma tag de Administrador (caso seja um).
Apesar de estar no mesmo protótipo o desenvolvimento do menu de usuário não será feito na mesma branch das MessageBox. Atualmente a branch da integração conta apenas com o redesign mesmo (A tag de admin foi um extra):

![menu-usuario-redesign.png](https://i.imgur.com/6Dss0rY.png)


Apesar disso algumas das features ja estão com o front-end parcialmente feitos, mas estão escondidos como pode ver abaixo:

![hidden-code.png](https://i.imgur.com/OGoq1Eu.png)


### Desenvolvimento

como ja foi dito anteriormente o desenvolvimento do menu de usuário em sí não será feito na mesma branch do desenvolvimento das MessageBoxes, por tanto ao inicia-lo, será necessário criar uma nova branch. 

Atualmente não possúi nenhum endpoint feito para utilizar-mos no desenvolvimento do novo menu de usuário portanto não existe ainda uma estrutura de dados ou de request pronta para isso, essas informações devem ser obtidas entrando em contato com o **Misael Soares** e o **Lucas Duarte** quando for a hora. Apesar disso o front-end do mesmo ja está bem encaminhado.

## Conclusão / resalvas

Como podem ver essa é uma daquelas tarefas interessantes e ao mesmo tempo rápidas de serem feitas, além de estarem consideravelmente bem adiantas.

Espero ter ajudado, ou no minimo ter tirado algumas das principais dúvidas com essa doc, caso tenha algo que ainda sim não tenha entendido, ou alguma dúvida que não foi 100% sáciada sugiro entrar em contato com **Misael Soares** para dúvidas sobre regras de negócios ou fluxos, ou com o **Lucas Duarte** para dúvidas sobre endpoints, redirecionamentos ou processos do desenvolvimento. Caso possúa alguma dúvida sobre o desenvolvimento (principalmente na parte de front-end) pode também entrar em contato comigo ***Anderson da Silva Santos*** ou com outra pessoa do **Frontend Chapter**.