[ML] Initialize saved objects on trained model page load (elastic#201426

)

Fixes elastic#201410

On page load, we now call the saved object initialization api which
creates any missing saved objects.

x-pack/plugins/ml/public/application/routing/routes/trained_models/models_list.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { FC } from 'react';
+import { type FC, useCallback } from 'react';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -19,6 +19,7 @@ import { useRouteResolver } from '../../use_resolver';
 import { basicResolvers } from '../../resolvers';
 import { getBreadcrumbWithUrlForApp } from '../../breadcrumbs';
 import { MlPageHeader } from '../../../components/page_header';
+import { useSavedObjectsApiService } from '../../../services/ml_api_service/saved_objects';
 
 const ModelsList = dynamic(async () => ({
   default: (await import('../../../model_management/models_list')).ModelsList,
@@ -48,7 +49,20 @@ export const modelsListRouteFactory = (
 });
 
 const PageWrapper: FC = () => {
-  const { context } = useRouteResolver('full', ['canGetTrainedModels'], basicResolvers());
+  const { initSavedObjects } = useSavedObjectsApiService();
+
+  const initSavedObjectsWrapper = useCallback(async () => {
+    try {
+      await initSavedObjects();
+    } catch (error) {
+      // ignore error as user may not have permission to sync
+    }
+  }, [initSavedObjects]);
+
+  const { context } = useRouteResolver('full', ['canGetTrainedModels'], {
+    ...basicResolvers(),
+    initSavedObjectsWrapper,
+  });
 
   return (
     <PageLoader context={context}>