diff --git a/src/plugins/vis_type_drilldown/public/components/card_form.tsx b/src/plugins/vis_type_drilldown/public/components/card_form.tsx new file mode 100644 index 000000000000..90ce371d196d --- /dev/null +++ b/src/plugins/vis_type_drilldown/public/components/card_form.tsx @@ -0,0 +1,101 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { + EuiPanel, + EuiTitle, + EuiTextArea, + EuiFlexItem, + EuiFieldText, + EuiAccordion, + EuiFlexGroup, +} from '@elastic/eui'; +import { Card } from '../types'; + +interface CardFormProps { + index: number; + card: Card; + updateCard: (index: number, card: Card) => void; +} + +const CardForm = ({ index, card, updateCard }: CardFormProps) => { + return ( + + + + + +

+ +

+
+
+ + + { + updateCard(index, { ...card, cardName: value }); + }} + fullWidth={true} + /> + + + + +

+ +

+
+
+ + + { + updateCard(index, { ...card, cardDescription: value }); + }} + fullWidth={true} + data-test-subj="markdownTextarea" + /> + + + + +

+ +

+
+
+ + + { + updateCard(index, { ...card, cardUrl: value }); + }} + fullWidth={true} + /> + +
+
+
+ ); +}; + +export { CardForm }; diff --git a/src/plugins/vis_type_drilldown/public/drilldown_options.tsx b/src/plugins/vis_type_drilldown/public/drilldown_options.tsx index 18121470d496..dc6e4ebd4c02 100644 --- a/src/plugins/vis_type_drilldown/public/drilldown_options.tsx +++ b/src/plugins/vis_type_drilldown/public/drilldown_options.tsx @@ -3,29 +3,32 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { useCallback, useState } from 'react'; -import { EuiFlexGroup, EuiButtonEmpty, EuiFieldText } from '@elastic/eui'; +import React, { useCallback } from 'react'; +import { EuiFlexGroup, EuiButtonEmpty } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { VisOptionsProps } from 'src/plugins/vis_default_editor/public'; import { Card, DrilldownVisParams } from './types'; -import { CardForm } from './card_form'; +import { CardForm } from './components/card_form'; function DrilldownOptions({ stateParams, setValue }: VisOptionsProps) { - const addCardForm = () => { + const updateCard = useCallback( + (index: number, card: Card) => { + const updatedCards = [...stateParams.cards]; + updatedCards[index] = card; + setValue('cards', updatedCards); + }, + [stateParams.cards, setValue] + ); + + const addCardForm = useCallback(() => { const newCard: Card = { cardName: 'newDrilldownCard', cardDescription: 'newDrilldownCard', cardUrl: 'newDrilldownCard', }; setValue('cards', [...stateParams.cards, newCard]); - }; - - const updateCard = (index: number, card: Card) => { - const updatedCards = [...stateParams.cards]; - updatedCards[index] = card; - setValue('cards', updatedCards); - }; + }, [stateParams.cards, setValue]); return ( <> diff --git a/src/plugins/vis_type_drilldown/public/drilldown_vis.ts b/src/plugins/vis_type_drilldown/public/drilldown_vis.ts index df685e296173..0c4489de1203 100644 --- a/src/plugins/vis_type_drilldown/public/drilldown_vis.ts +++ b/src/plugins/vis_type_drilldown/public/drilldown_vis.ts @@ -14,7 +14,7 @@ export const drillDownVisDefinition = { title: 'Drilldown', isAccessible: true, icon: 'logstashFilter', - description: i18n.translate('visTypeMarkdown.markdownDescription', { + description: i18n.translate('visTypeDrilldown.drilldownDescription', { defaultMessage: 'I LOVE drilldown!', }), toExpressionAst, @@ -33,14 +33,14 @@ export const drillDownVisDefinition = { optionTabs: [ { name: 'advanced', - title: i18n.translate('visTypeMarkdown.tabs.dataText', { + title: i18n.translate('visTypeDrilldown.tabs.dataText', { defaultMessage: 'Data', }), editor: DrilldownOptions, }, { name: 'options', - title: i18n.translate('visTypeMarkdown.tabs.optionsText', { + title: i18n.translate('visTypeDrilldown.tabs.optionsText', { defaultMessage: 'Options', }), editor: SettingsOptions, diff --git a/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx b/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx index 9067ce077818..17fbd61616eb 100644 --- a/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx +++ b/src/plugins/vis_type_drilldown/public/drilldown_vis_controller.tsx @@ -5,9 +5,10 @@ import React, { useEffect } from 'react'; import { EuiCard, EuiFlexItem, EuiIcon } from '@elastic/eui'; -import { DrilldownVisParams } from './types'; +import { DrilldownVisParams, Card } from './types'; interface DrilldownVisComponentProps extends DrilldownVisParams { + cards: Card[]; renderComplete: () => void; }