import React from 'react' ; import { useValues , useActions } from 'kea' ; import { EuiPortal , EuiFlyout } from '@elastic/eui' ; import { FLYOUT_ARIA_LABEL_ID } from './constants' ; import { ShowCreationModes , ApiCodeExample , PasteJsonText , UploadJsonFile , } from './creation_mode_components' ; import { Summary } from './creation_response_components' ; import { DocumentCreationStep } from './types' ; import { DocumentCreationLogic } from './' ; export const DocumentCreationFlyout = ( ) => { const { closeDocumentCreation } = useActions ( DocumentCreationLogic ) ; const { isDocumentCreationOpen } = useValues ( DocumentCreationLogic ) ; return isDocumentCreationOpen ? ( < EuiPortal > < EuiFlyout ownFocus aria - labelledby = { FLYOUT_ARIA_LABEL_ID } onClose = { closeDocumentCreation } > < FlyoutContent /> < /EuiFlyout> < /EuiPortal>) : null; } ; export const FlyoutContent = ( ) => { const { creationStep , creationMode } = useValues ( DocumentCreationLogic ) ; switch ( creationStep ) { case DocumentCreationStep . ShowCreationModes : return < ShowCreationModes />; case DocumentCreationStep . AddDocuments : switch ( creationMode ) { case 'api' : return < ApiCodeExample />; case 'text' : return < PasteJsonText />; case 'file' : return < UploadJsonFile />; } case DocumentCreationStep . ShowSummary : return < Summary />; } } ;