fix panel visualization preview, new viz workflow (#401) (#404)

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
(cherry picked from commit 78347d9)

Co-authored-by: Shenoy Pratik <sgguruda@amazon.com>

public/components/custom_panels/custom_panel_view_so.tsx

@@ -100,6 +100,8 @@ interface CustomPanelViewProps {
   appId?: string;
   updateAvailabilityVizId?: any;
   onAddClick?: any;
+  pplService: PPLService;
+  dslService: DSLService;
 }
 
 export const CustomPanelViewSO = (props: CustomPanelViewProps) => {

public/components/custom_panels/home.tsx

@@ -237,6 +237,8 @@ export const Home = ({
               <CustomPanelViewSO
                 panelId={props.match.params.id}
                 chrome={chrome}
+                pplService={pplService}
+                dslService={dslService}
                 parentBreadcrumbs={customPanelBreadCrumbs}
                 deleteCustomPanel={deleteCustomPanel}
                 setToast={setToast}

public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx

@@ -37,7 +37,12 @@ import React, { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useDispatch, useSelector } from 'react-redux';
 import { FlyoutContainers } from '../../../common/flyout_containers';
-import { displayVisualization, getQueryResponse, isDateValid } from '../../helpers/utils';
+import {
+  displayVisualization,
+  getQueryResponse,
+  isDateValid,
+  parseSavedVisualizations,
+} from '../../helpers/utils';
 import { convertDateTime } from '../../helpers/utils';
 import PPLService from '../../../../services/requests/ppl';
 import { CoreStart } from '../../../../../../../src/core/public';
@@ -53,6 +58,12 @@ import './visualization_flyout.scss';
 import { uiSettingsService } from '../../../../../common/utils';
 import { ILegacyScopedClusterClient } from '../../../../../../../src/core/server';
 import { replaceVizInPanel, selectPanel } from '../../redux/panel_slice';
+import { SavedObjectsActions } from '../../../../services/saved_objects/saved_object_client/saved_objects_actions';
+import {
+  ObservabilitySavedObject,
+  ObservabilitySavedVisualization,
+} from '../../../../services/saved_objects/saved_object_client/types';
+import { SAVED_VISUALIZATION } from '../../../../../common/constants/explorer';
 
 /*
  * VisaulizationFlyoutSO - This module create a flyout to add visualization for SavedObjects custom Panels
@@ -351,8 +362,14 @@ export const VisaulizationFlyoutSO = ({
 
   // Fetch all saved visualizations
   const fetchSavedVisualizations = async () => {
-    return http
-      .get(`${CUSTOM_PANELS_API_PREFIX}/visualizations`)
+    return SavedObjectsActions.getBulk<ObservabilitySavedVisualization>({
+      objectType: [SAVED_VISUALIZATION],
+      sortOrder: 'desc',
+      fromIndex: 0,
+    })
+      .then((response) => ({
+        visualizations: response.observabilityObjectList.map(parseSavedVisualizations),
+      }))
       .then((res) => {
         if (res.visualizations.length > 0) {
           setSavedVisualizations(res.visualizations);