Implement multiple drilldown forms & remove unused import

Signed-off-by: Willie Hung <[email protected]>

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 (
+    <EuiAccordion
+      id={index}
+      buttonContent={`Drilldown ${index + 1}`}
+      paddingSize="s"
+      initialIsOpen={true}
+    >
+      <EuiPanel paddingSize="s">
+        <EuiFlexGroup direction="column" gutterSize="m" className="eui-fullHeight">
+          <EuiFlexItem>
+            <EuiTitle size="xs">
+              <h2>
+                <label htmlFor="drilldownVisInput">Card Name</label>
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiFieldText
+              id="drilldownVisInput"
+              className="eui-fullHeight"
+              value={card.cardName}
+              onChange={({ target: { value } }) => {
+                updateCard(index, { ...card, cardName: value });
+              }}
+              fullWidth={true}
+            />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiTitle size="xs">
+              <h2>
+                <label htmlFor="drilldownVisInput">Description</label>
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiTextArea
+              id="markdownVisInput"
+              className="eui-fullHeight"
+              value={card.cardDescription}
+              onChange={({ target: { value } }) => {
+                updateCard(index, { ...card, cardDescription: value });
+              }}
+              fullWidth={true}
+              data-test-subj="markdownTextarea"
+            />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiTitle size="xs">
+              <h2>
+                <label htmlFor="drilldownVisInput">Url</label>
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiFieldText
+              id="drilldownVisInput"
+              placeholder=""
+              className="eui-fullHeight"
+              value={card.cardUrl}
+              onChange={({ target: { value } }) => {
+                updateCard(index, { ...card, cardUrl: value });
+              }}
+              fullWidth={true}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};
+
+export { CardForm };

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<DrilldownVisParams>) {
-  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 (
     <>

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,

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;
 }