UI experience control by ui settings

Signed-off-by: Fen Qin <[email protected]>

Author: fen-qin

common/index.ts

@@ -7,6 +7,9 @@ export const PLUGIN_ID = 'searchRelevance';
 export const PLUGIN_NAME = 'Search Relevance';
 export const COMPARE_SEARCH_RESULTS_TITLE = 'Compare Search Results';
 
+export const SEARCH_RELEVANCE_WORKBENCH_UI_EXPERIENCE_ENABLED =
+  'search-relevance:workbench_ui_enabled';
+
 const SEARCH_RELEVANCE_WORKBENCH_BASE_PATH = '/api/relevancy';
 export const ServiceEndpoints = Object.freeze({
   // OpenSearch node APIs

public/application.tsx

@@ -29,6 +29,7 @@ export const renderApp = (
     dataSourceManagement,
     setActionMenu: setHeaderActionMenu,
     application,
+    uiSettings,
   };
 
   ReactDOM.render(

public/components/app.tsx

@@ -19,7 +19,12 @@ import {
 import { CoreStart, MountPoint, Toast, ReactChild } from '../../../../src/core/public';
 import { DataSourceManagementPluginSetup } from '../../../../src/plugins/data_source_management/public';
 import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public';
-import { PLUGIN_NAME, COMPARE_SEARCH_RESULTS_TITLE, ServiceEndpoints } from '../../common';
+import {
+  PLUGIN_NAME,
+  COMPARE_SEARCH_RESULTS_TITLE,
+  ServiceEndpoints,
+  SEARCH_RELEVANCE_WORKBENCH_UI_EXPERIENCE_ENABLED,
+} from '../../common';
 import { SearchRelevanceContextProvider } from '../contexts';
 import { Home as QueryCompareHome } from './query_compare/home';
 import { useOpenSearchDashboards } from '../../../../src/plugins/opensearch_dashboards_react/public';
@@ -61,7 +66,7 @@ interface SearchRelevanceAppDeps {
   dataSourceManagement: DataSourceManagementPluginSetup;
   setActionMenu: (menuMount: MountPoint | undefined) => void;
   application: CoreStart['application'];
-  isNewExperienceEnabled?: boolean;
+  uiSettings: CoreStart['uiSettings'];
 }
 
 const SearchRelevancePage = ({ history }) => {
@@ -355,46 +360,12 @@ export const SearchRelevanceApp = ({
   setActionMenu,
   dataSourceManagement,
   application,
+  uiSettings,
 }: SearchRelevanceAppDeps) => {
   // Move all useState declarations to the top
-  const [isNewExperienceEnabled, setIsNewExperienceEnabled] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [toasts, setToasts] = useState<Toast[]>([]);
   const [toastRightSide, setToastRightSide] = useState<boolean>(true);
 
-  useEffect(() => {
-    const fetchClusterSettings = async () => {
-      try {
-        const response = await http.get(ServiceEndpoints.GetClusterSettings);
-
-        // Check both persistent and defaults settings
-        const persistentEnabled =
-          response?.persistent?.plugins?.search_relevance?.workbench_enabled === 'true';
-        const defaultsEnabled =
-          response?.defaults?.plugins?.search_relevance?.workbench_enabled === 'true';
-
-        // Use persistent setting if available, otherwise use defaults
-        const enabled = persistentEnabled || defaultsEnabled;
-        setIsNewExperienceEnabled(enabled);
-      } catch (error) {
-        console.error('Error fetching cluster settings:', error);
-        notifications.toasts.addError(error as Error, {
-          title: 'Error fetching cluster settings',
-          toastLifeTimeMs: 5000,
-        });
-        setIsNewExperienceEnabled(false);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchClusterSettings();
-  }, [http, notifications]);
-
-  if (isLoading) {
-    return <EuiLoadingSpinner size="xl" />;
-  }
-
   const getNavGroupEnabled = chrome.navGroup.getNavGroupEnabled();
 
   const parentBreadCrumbs = getNavGroupEnabled
@@ -407,9 +378,10 @@ export const SearchRelevanceApp = ({
     setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
   };
 
-  if (isLoading) {
-    return <EuiLoadingSpinner size="xl" />;
-  }
+  // UI Experience are controlled by ui settings
+  const isNewExperienceEnabled = Boolean(
+    uiSettings?.get(SEARCH_RELEVANCE_WORKBENCH_UI_EXPERIENCE_ENABLED)
+  );
 
   const renderNewExperience = () => (
     <HashRouter>

server/plugin.ts

@@ -14,16 +14,15 @@ import {
   Plugin,
   PluginInitializerContext,
 } from '../../../src/core/server';
-import {
-  defineRoutes,
-  registerSearchRelevanceRoutes,
-} from './routes';
+import { defineRoutes, registerSearchRelevanceRoutes } from './routes';
 
 import { DataSourcePluginSetup } from '../../../src/plugins/data_source/server/types';
 import { DataSourceManagementPlugin } from '../../../src/plugins/data_source_management/public/plugin';
 import { SearchRelevancePluginConfigType } from '../config';
 import { MetricsService, MetricsServiceSetup } from './metrics/metrics_service';
 import { SearchRelevancePluginSetup, SearchRelevancePluginStart } from './types';
+import { schema } from '@osd/config-schema';
+import { SEARCH_RELEVANCE_WORKBENCH_UI_EXPERIENCE_ENABLED } from '../common';
 
 export interface SearchRelevancePluginSetupDependencies {
   dataSourceManagement: ReturnType<DataSourceManagementPlugin['setup']>;
@@ -46,6 +45,16 @@ export class SearchRelevancePlugin
     const dataSourceEnabled = !!dataSource;
     this.logger.debug('SearchRelevance: Setup');
 
+    core.uiSettings.register({
+      [SEARCH_RELEVANCE_WORKBENCH_UI_EXPERIENCE_ENABLED]: {
+        name: 'Search Relevance Workbench UI Experience',
+        value: false,
+        description: 'Whether to opt-in search relevance workbench',
+        schema: schema.boolean(),
+        category: ['search relevance'],
+      },
+    });
+
     const config: SearchRelevancePluginConfigType = await this.config$.pipe(first()).toPromise();
 
     const metricsService: MetricsServiceSetup = this.metricsService.setup(
@@ -57,8 +66,8 @@ export class SearchRelevancePlugin
 
     let opensearchSearchRelevanceClient: ILegacyClusterClient | undefined = undefined;
     opensearchSearchRelevanceClient = core.opensearch.legacy.createClient(
-      'opensearch_search_relevance',
-    )
+      'opensearch_search_relevance'
+    );
 
     // @ts-ignore
     core.http.registerRouteHandlerContext('searchRelevance', (context, request) => {