[Feature] Implement multiple drilldownform

src/plugins/vis_type_drilldown/README.md

@@ -1,11 +1,6 @@
 # vis_type_drilldown
 
-A OpenSearch Dashboards plugin
+This drilldown plugin allows users to design their own navigation controls, customized to fit their specific preferences and workflow requirements.
+Please refer to [Drilldown functionality for dashboards](https://github.com/opensearch-project/OpenSearch-Dashboards/issues/1308)
 
 ---
-
-## Development
-
-See the [OpenSearch Dashboards contributing
-guide](https://github.com/opensearch-project/OpenSearch-Dashboards/blob/main/CONTRIBUTING.md) for instructions
-setting up your development environment.

src/plugins/vis_type_drilldown/opensearch_dashboards.json

@@ -4,14 +4,6 @@
   "opensearchDashboardsVersion": "opensearchDashboards",
   "server": true,
   "ui": true,
-  "requiredPlugins": [
-    "opensearchDashboardsReact",
-    "charts",
-    "expressions",
-    "visualizations",
-    "navigation",
-    "data",
-    "visDefaultEditor"
-  ],
+  "requiredPlugins": ["charts", "expressions", "visualizations", "visDefaultEditor"],
   "optionalPlugins": []
 }

src/plugins/vis_type_drilldown/public/card_form.tsx

@@ -0,0 +1,101 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } 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_fn.ts

@@ -5,8 +5,7 @@
 
 import { i18n } from '@osd/i18n';
 import { ExpressionFunctionDefinition, Render } from '../../expressions/public';
-import { DrilldownVisParams } from './types';
-import { DrilldownArguments } from './types';
+import { DrilldownArguments, DrilldownVisParams } from './types';
 
 export interface DrilldownVisRenderValue {
   visType: 'drilldown';
@@ -24,38 +23,14 @@ export const createDrilldownVisFn = (): DrilldownVisExpressionFunctionDefinition
   name: 'drilldownVis',
   type: 'render',
   inputTypes: [],
-  help: i18n.translate('visDrilldown.function.help', {
+  help: i18n.translate('visTypeDrilldown.function.help', {
     defaultMessage: 'Drilldown visualization',
   }),
   args: {
-    // font: {
-    //   types: ['style'],
-    //   help: i18n.translate('visTypeMarkdown.function.font.help', {
-    //     defaultMessage: 'Font settings.',
-    //   }),
-    //   default: `{font size=12}`,
-    // },
-    // openLinksInNewTab: {
-    //   types: ['boolean'],
-    //   default: false,
-    //   help: i18n.translate('visTypeMarkdown.function.openLinksInNewTab.help', {
-    //     defaultMessage: 'Opens links in new tab',
-    //   }),
-    // },
-    cardName: {
-      types: ['string'],
-      aliases: ['_'],
-      required: true,
-      help: i18n.translate('visTypeDrilldown.function.cardName.help', {
-        defaultMessage: 'Card name',
-      }),
-    },
-    cardDescription: {
-      types: ['string'],
-      aliases: ['_'],
-      required: true,
-      help: i18n.translate('visTypeDrilldown.function.cardDescription.help', {
-        defaultMessage: 'Card description',
+    cards: {
+      types: [],
+      help: i18n.translate('visTypeDrilldown.function.cards.help', {
+        defaultMessage: 'Cards',
       }),
     },
   },
@@ -66,10 +41,7 @@ export const createDrilldownVisFn = (): DrilldownVisExpressionFunctionDefinition
       value: {
         visType: 'drilldown',
         visParams: {
-          cardName: args.cardName,
-          cardDescription: args.cardDescription,
-          // openLinksInNewTab: args.openLinksInNewTab,
-          // fontSize: parseInt(args.font.spec.fontSize || '12', 10),
+          cards: args.cards,
         },
       },
     };