Added SuperSelect and Grabbed URL of SavedObject with Type 'Dashboard'

src/core/public/saved_objects/saved_objects_client.ts

@@ -491,7 +491,7 @@ export class SavedObjectsClient {
     return new SimpleSavedObject(this, options);
   }
 
-  private getPath(path: Array<string | undefined>): string {
+  public getPath(path: Array<string | undefined>): string {
     return resolveUrl(API_BASE_URL, join(...path));
   }
 

src/core/public/saved_objects/simple_saved_object.ts

@@ -31,7 +31,7 @@
 import { set } from '@elastic/safer-lodash-set';
 import { get, has } from 'lodash';
 import { SavedObject as SavedObjectType } from '../../server';
-import { SavedObjectsClientContract } from './saved_objects_client';
+import { SavedObjectsClient } from './saved_objects_client';
 
 /**
  * This class is a very simple wrapper for SavedObjects loaded from the server
@@ -51,10 +51,10 @@ export class SimpleSavedObject<T = unknown> {
   public migrationVersion: SavedObjectType<T>['migrationVersion'];
   public error: SavedObjectType<T>['error'];
   public references: SavedObjectType<T>['references'];
-  public updated_at: SavedObjectType<T>['updated_at'];
+  public updated_at: SavedObjectType<T>['updated_at']
 
   constructor(
-    private client: SavedObjectsClientContract,
+    private client: SavedObjectsClient,
     {
       id,
       type,

src/plugins/vis_type_drilldown/public/drilldown_options.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, Fragment, useState, useEffect, useRef } from 'react';
 import {
   EuiPanel,
   EuiTitle,
@@ -12,23 +12,91 @@ import {
   EuiFlexItem,
   EuiFieldText,
   EuiAccordion,
+  EuiSuperSelect,
+  EuiText,
 } from '@elastic/eui';
-import { FormattedMessage } from '@osd/i18n/react';
 
 import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
-import { DrilldownVisParams } from './types';
+import { useOpenSearchDashboards } from '../../opensearch_dashboards_react/public';
+import { DrilldownServices, DrilldownVisParams } from './types';
 
 function DrilldownOptions({ stateParams, setValue }: VisOptionsProps<DrilldownVisParams>) {
   const onMarkdownUpdate = useCallback(
     (value: DrilldownVisParams['cardName']) => setValue('cardName', value),
     [setValue]
   );
 
+  const {
+    services: { http, savedObjects },
+  } = useOpenSearchDashboards<DrilldownServices>();
+
+  interface List {
+    value: string;
+    inputDisplay: string;
+    dropdownDisplay: JSX.Element; // Adjust the type based on the actual type of dropdownDisplay
+  }
+
+  const options = useRef<List[]>([
+    {
+      value: '1',
+      inputDisplay: 'Option 1',
+      dropdownDisplay: (
+        <Fragment>
+          <strong>Name</strong>
+          <EuiText size="s" color="subdued">
+            <p className="euiTextColor--subdued">
+              id
+              <br />
+              text
+            </p>
+          </EuiText>
+        </Fragment>
+      ),
+    },
+  ]);
+
+  const saved = 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']
+        .getPath(['dashboard', (await saved.current).savedObjects[0].id])
+        .substring(28);
+      const savedObjectURL = http.basePath.prepend('/app/dashboards#/view/' + path);
+      options.current = [
+        {
+          value: savedObjectURL,
+          inputDisplay: 'yes',
+          dropdownDisplay: (
+            <Fragment>
+              <strong>Name</strong>
+              <EuiText size="s" color="subdued">
+                <p className="euiTextColor--subdued">
+                  id
+                  <br />
+                  text
+                </p>
+              </EuiText>
+            </Fragment>
+          ),
+        },
+      ];
+    };
+    fetchData();
+  }, []);
+
   const onDescriptionUpdate = useCallback(
     (value: DrilldownVisParams['cardDescription']) => setValue('cardDescription', value),
     [setValue]
   );
 
+  const activeVisName = '';
+  const handleVisTypeChange = () => {};
+
   return (
     <EuiAccordion buttonContent="Drilldown 1">
       <EuiPanel paddingSize="s">
@@ -70,6 +138,22 @@ function DrilldownOptions({ stateParams, setValue }: VisOptionsProps<DrilldownVi
               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>

src/plugins/vis_type_drilldown/public/types.ts

@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { SavedObjectsClientContract } from 'src/core/public/saved_objects/saved_objects_client';
+import { CoreStart } from 'src/core/server';
 import { NavigationPublicPluginStart } from '../../navigation/public';
 import { VisualizationsSetup } from '../../visualizations/public';
-import { Arguments } from '../../vis_type_markdown/public/types';
 
 export interface VisDrilldownPluginSetup {
   getGreeting: () => string;
@@ -39,3 +40,7 @@ export interface DrilldownVisParams {
   cardName: DrilldownArguments['cardName'];
   cardDescription: DrilldownArguments['cardDescription'];
 }
+
+export interface DrilldownServices extends CoreStart {
+  savedObjectsClient: SavedObjectsClientContract;
+}