From 4c9005c5dc7c38f3dab21128ff90deccb2039634 Mon Sep 17 00:00:00 2001
From: Willie Hung <willie880201044@gmail.com>
Date: Wed, 29 Nov 2023 19:11:31 -0600
Subject: [PATCH] Resolve conflicts & remove unused imports

Signed-off-by: Willie Hung <willie880201044@gmail.com>
---
 .../opensearch_dashboards.json                |   8 +-
 .../public/drilldown_options.tsx              | 121 +++++++-----------
 2 files changed, 55 insertions(+), 74 deletions(-)

diff --git a/src/plugins/vis_type_drilldown/opensearch_dashboards.json b/src/plugins/vis_type_drilldown/opensearch_dashboards.json
index 250d7660d44..0c07d5b60c1 100644
--- a/src/plugins/vis_type_drilldown/opensearch_dashboards.json
+++ b/src/plugins/vis_type_drilldown/opensearch_dashboards.json
@@ -4,6 +4,12 @@
   "opensearchDashboardsVersion": "opensearchDashboards",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["charts", "expressions", "visualizations", "visDefaultEditor"],
+  "requiredPlugins": [
+    "charts",
+    "expressions",
+    "visualizations",
+    "visDefaultEditor",
+    "opensearchDashboardsReact"
+  ],
   "optionalPlugins": []
 }
diff --git a/src/plugins/vis_type_drilldown/public/drilldown_options.tsx b/src/plugins/vis_type_drilldown/public/drilldown_options.tsx
index 31dd89c4248..0205ea8c9e4 100644
--- a/src/plugins/vis_type_drilldown/public/drilldown_options.tsx
+++ b/src/plugins/vis_type_drilldown/public/drilldown_options.tsx
@@ -3,22 +3,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
-import React, { useCallback, Fragment, useState, useEffect, useRef } from 'react';
+import React, { useCallback, Fragment, useEffect, useRef } from 'react';
 import {
-  EuiPanel,
   EuiTitle,
-  EuiTextArea,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFieldText,
-  EuiAccordion,
   EuiSuperSelect,
   EuiText,
+  EuiButtonEmpty,
 } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
 import { useOpenSearchDashboards } from '../../opensearch_dashboards_react/public';
-import { DrilldownServices, DrilldownVisParams } from './types';
+import { Card, DrilldownServices, DrilldownVisParams } from './types';
+import { CardForm } from './components/card_form';
 
 function DrilldownOptions({ stateParams, setValue }: VisOptionsProps<DrilldownVisParams>) {
   const updateCard = useCallback(
@@ -30,6 +28,15 @@ function DrilldownOptions({ stateParams, setValue }: VisOptionsProps<DrilldownVi
     [stateParams.cards, setValue]
   );
 
+  const addCardForm = useCallback(() => {
+    const newCard: Card = {
+      cardName: 'newDrilldownCard',
+      cardDescription: 'newDrilldownCard',
+      cardUrl: 'newDrilldownCard',
+    };
+    setValue('cards', [...stateParams.cards, newCard]);
+  }, [stateParams.cards, setValue]);
+
   const {
     services: { http, savedObjects },
   } = useOpenSearchDashboards<DrilldownServices>();
@@ -60,14 +67,14 @@ function DrilldownOptions({ stateParams, setValue }: VisOptionsProps<DrilldownVi
   ]);
 
   const saved = useRef<any>();
-  const index = useRef<any>();
+  // const index = useRef<any>();
 
   useEffect(() => {
     const fetchData = async () => {
       saved.current = savedObjects?.client.find({
         type: 'dashboard',
       });
-      const path = (await saved.current).savedObjects[0]['client']
+      const path = (await saved.current).savedObjects[0].client
         .getPath(['dashboard', (await saved.current).savedObjects[0].id])
         .substring(28);
       const savedObjectURL = http.basePath.prepend('/app/dashboards#/view/' + path);
@@ -91,76 +98,44 @@ function DrilldownOptions({ stateParams, setValue }: VisOptionsProps<DrilldownVi
       ];
     };
     fetchData();
-  }, []);
-
-  const onDescriptionUpdate = useCallback(
-    (value: DrilldownVisParams['cardDescription']) => setValue('cardDescription', value),
-    [setValue]
-  );
+  });
 
   const activeVisName = '';
   const handleVisTypeChange = () => {};
 
   return (
-    <EuiAccordion buttonContent="Drilldown 1">
-      <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"
-              placeholder="Placeholder text"
-              className="eui-fullHeight"
-              value={stateParams.cardName}
-              onChange={({ target: { value } }) => onMarkdownUpdate(value)}
-              fullWidth={true}
+    <EuiFlexGroup
+      className="visEditorSidebar"
+      justifyContent="spaceBetween"
+      gutterSize="none"
+      responsive={false}
+      direction="column"
+    >
+      {stateParams.cards &&
+        stateParams.cards.map((card, index) => (
+          <>
+            <CardForm index={index} card={card} updateCard={updateCard} />
+            <EuiFlexItem>
+              <EuiTitle size="xs">
+                <h2>
+                  <label htmlFor="drilldownVisInput">Select a Destination</label>
+                </h2>
+              </EuiTitle>
+            </EuiFlexItem>
+
+            <EuiSuperSelect
+              options={options.current}
+              valueOfSelected={activeVisName}
+              onChange={handleVisTypeChange}
+              fullWidth
+              data-test-subj="chartPicker"
             />
-          </EuiFlexItem>
-
-          <EuiFlexItem>
-            <EuiTitle size="xs">
-              <h2>
-                <label htmlFor="drilldownVisInput">Description</label>
-              </h2>
-            </EuiTitle>
-          </EuiFlexItem>
-
-          <EuiFlexItem>
-            <EuiTextArea
-              id="markdownVisInput"
-              className="eui-fullHeight"
-              value={stateParams.cardDescription}
-              onChange={({ target: { value } }) => onDescriptionUpdate(value)}
-              fullWidth={true}
-              data-test-subj="markdownTextarea"
-            />
-          </EuiFlexItem>
-
-          <EuiFlexItem>
-            <EuiTitle size="xs">
-              <h2>
-                <label htmlFor="drilldownVisInput">Select a Destination</label>
-              </h2>
-            </EuiTitle>
-          </EuiFlexItem>
-
-          <EuiSuperSelect
-            options={options.current}
-            valueOfSelected={activeVisName}
-            onChange={handleVisTypeChange}
-            fullWidth
-            data-test-subj="chartPicker"
-          />
-        </EuiFlexGroup>
-      </EuiPanel>
-    </EuiAccordion>
+          </>
+        ))}
+      <EuiButtonEmpty size="xs" iconType="plusInCircleFilled" onClick={addCardForm}>
+        <FormattedMessage id="visDefaultEditor.aggAdd.addButtonLabel" defaultMessage="Add" />
+      </EuiButtonEmpty>
+    </EuiFlexGroup>
   );
 }