[Guided onboarding] Use Kibana features to grant access

examples/guided_onboarding_example/public/components/app.tsx

@@ -11,13 +11,7 @@ import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
 import { Router, Switch } from 'react-router-dom';
 import { Route } from '@kbn/shared-ux-router';
 
-import {
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageHeader,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 
 import { CoreStart, ScopedHistory } from '@kbn/core/public';
 
@@ -39,19 +33,17 @@ export const GuidedOnboardingExampleApp = (props: GuidedOnboardingExampleAppDeps
 
   return (
     <I18nProvider>
-      <EuiPage restrictWidth="1000px">
-        <EuiPageBody>
-          <EuiPageHeader>
-            <EuiTitle size="l">
-              <h1>
-                <FormattedMessage
-                  id="guidedOnboardingExample.title"
-                  defaultMessage="Guided onboarding examples"
-                />
-              </h1>
-            </EuiTitle>
-          </EuiPageHeader>
-          <EuiPageContent>
+      <EuiPageTemplate restrictWidth={true} panelled={true}>
+        <EuiPageTemplate.Header
+          pageTitle={
+            <FormattedMessage
+              id="guidedOnboardingExample.title"
+              defaultMessage="Guided onboarding examples"
+            />
+          }
+        />
+        {guidedOnboarding.guidedOnboardingApi?.isEnabled ? (
+          <EuiPageTemplate.Section>
             <Router history={history}>
               <Switch>
                 <Route exact path="/">
@@ -75,9 +67,31 @@ export const GuidedOnboardingExampleApp = (props: GuidedOnboardingExampleAppDeps
                 />
               </Switch>
             </Router>
-          </EuiPageContent>
-        </EuiPageBody>
-      </EuiPage>
+          </EuiPageTemplate.Section>
+        ) : (
+          <EuiPageTemplate.EmptyPrompt
+            iconType="error"
+            color="danger"
+            title={
+              <h2>
+                <FormattedMessage
+                  id="guidedOnboardingExample.errorTitle"
+                  defaultMessage="Guided onboarding is disabled"
+                />
+              </h2>
+            }
+            body={
+              <p>
+                <FormattedMessage
+                  id="guidedOnboardingExample.errorDescription"
+                  defaultMessage="Make sure your Kibana instance runs on Cloud and/or
+                  your user has access to Setup guides feature."
+                />
+              </p>
+            }
+          />
+        )}
+      </EuiPageTemplate>
     </I18nProvider>
   );
 };

src/plugins/guided_onboarding/common/constants.ts

@@ -10,3 +10,5 @@ export const PLUGIN_ID = 'guidedOnboarding';
 export const PLUGIN_NAME = 'guidedOnboarding';
 
 export const API_BASE_PATH = '/api/guided_onboarding';
+
+export const PLUGIN_FEATURE = 'guidedOnboardingFeature';

src/plugins/guided_onboarding/kibana.jsonc

@@ -8,7 +8,8 @@
     "server": true,
     "browser": true,
     "optionalPlugins": [
-      "cloud"
+      "cloud",
+      "features"
     ],
     "requiredBundles": [
       "kibanaReact"

src/plugins/guided_onboarding/public/mocks.ts

@@ -28,6 +28,7 @@ const apiServiceMock: jest.Mocked<GuidedOnboardingPluginStart> = {
     isGuidePanelOpen$: new BehaviorSubject(false),
     isLoading$: new BehaviorSubject(false),
     getGuideConfig: jest.fn(),
+    isEnabled: true,
   },
 };
 

src/plugins/guided_onboarding/public/plugin.tsx

@@ -21,6 +21,8 @@ import {
 } from '@kbn/core/public';
 
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+
+import { PLUGIN_FEATURE } from '../common/constants';
 import type {
   AppPluginStartDependencies,
   GuidedOnboardingPluginSetup,
@@ -43,11 +45,12 @@ export class GuidedOnboardingPlugin
   ): GuidedOnboardingPluginStart {
     const { chrome, http, theme, application, notifications, uiSettings } = core;
 
+    // Guided onboarding UI is only available on cloud and if the access to the Kibana feature is granted
+    const isEnabled = !!(cloud?.isCloudEnabled && application.capabilities[PLUGIN_FEATURE].enabled);
     // Initialize services
-    apiService.setup(http, !!cloud?.isCloudEnabled);
+    apiService.setup(http, isEnabled);
 
-    // Guided onboarding UI is only available on cloud
-    if (cloud?.isCloudEnabled) {
+    if (isEnabled) {
       chrome.navControls.registerExtension({
         order: 1000,
         mount: (target) =>

src/plugins/guided_onboarding/public/services/api.service.ts

@@ -41,15 +41,15 @@ import {
 import { ConfigService } from './config.service';
 
 export class ApiService implements GuidedOnboardingApi {
-  private isCloudEnabled: boolean | undefined;
+  private _isEnabled: boolean = false;
   private client: HttpSetup | undefined;
   private pluginState$!: BehaviorSubject<PluginState | undefined>;
   public isLoading$ = new BehaviorSubject<boolean>(false);
   public isGuidePanelOpen$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   private configService = new ConfigService();
 
-  public setup(httpClient: HttpSetup, isCloudEnabled: boolean) {
-    this.isCloudEnabled = isCloudEnabled;
+  public setup(httpClient: HttpSetup, isEnabled: boolean) {
+    this._isEnabled = isEnabled;
     this.client = httpClient;
     this.pluginState$ = new BehaviorSubject<PluginState | undefined>(undefined);
     this.isGuidePanelOpen$ = new BehaviorSubject<boolean>(false);
@@ -94,7 +94,7 @@ export class ApiService implements GuidedOnboardingApi {
    * Subsequently, the observable is updated automatically, when the state changes.
    */
   public fetchPluginState$(): Observable<PluginState | undefined> {
-    if (!this.isCloudEnabled) {
+    if (!this._isEnabled) {
       return of(undefined);
     }
     if (!this.client) {
@@ -118,7 +118,7 @@ export class ApiService implements GuidedOnboardingApi {
    * where all guides are displayed with their corresponding status.
    */
   public async fetchAllGuidesState(): Promise<{ state: GuideState[] } | undefined> {
-    if (!this.isCloudEnabled) {
+    if (!this._isEnabled) {
       return undefined;
     }
     if (!this.client) {
@@ -143,7 +143,7 @@ export class ApiService implements GuidedOnboardingApi {
     state: { status?: PluginStatus; guide?: GuideState },
     panelState: boolean
   ): Promise<{ pluginState: PluginState } | undefined> {
-    if (!this.isCloudEnabled) {
+    if (!this._isEnabled) {
       return undefined;
     }
     if (!this.client) {
@@ -467,7 +467,7 @@ export class ApiService implements GuidedOnboardingApi {
    * @return {Promise} a promise with the guide config or undefined if the config is not found
    */
   public async getGuideConfig(guideId: GuideId): Promise<GuideConfig | undefined> {
-    if (!this.isCloudEnabled) {
+    if (!this._isEnabled) {
       return undefined;
     }
     if (!this.client) {
@@ -478,6 +478,10 @@ export class ApiService implements GuidedOnboardingApi {
     this.isLoading$.next(false);
     return config;
   }
+
+  public get isEnabled() {
+    return this._isEnabled;
+  }
 }
 
 export const apiService = new ApiService();

src/plugins/guided_onboarding/public/types.ts

@@ -62,4 +62,5 @@ export interface GuidedOnboardingApi {
   isGuidePanelOpen$: Observable<boolean>;
   isLoading$: Observable<boolean>;
   getGuideConfig: (guideId: GuideId) => Promise<GuideConfig | undefined>;
+  readonly isEnabled: boolean;
 }

src/plugins/guided_onboarding/server/feature.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { KibanaFeatureConfig } from '@kbn/features-plugin/common';
+import { i18n } from '@kbn/i18n';
+import { DEFAULT_APP_CATEGORIES } from '@kbn/core/server';
+import { PLUGIN_FEATURE, PLUGIN_ID } from '../common/constants';
+import { guideStateSavedObjectsType, pluginStateSavedObjectsType } from './saved_objects';
+
+export const GUIDED_ONBOARDING_FEATURE: KibanaFeatureConfig = {
+  id: PLUGIN_FEATURE,
+  name: i18n.translate('guidedOnboarding.featureRegistry.featureName', {
+    defaultMessage: 'Setup guides',
+  }),
+  category: DEFAULT_APP_CATEGORIES.management,
+  app: [PLUGIN_ID],
+  privileges: {
+    all: {
+      app: [PLUGIN_ID],
+      savedObject: {
+        all: [guideStateSavedObjectsType, pluginStateSavedObjectsType],
+        read: [],
+      },
+      ui: ['enabled'],
+    },
+    read: {
+      // we haven't implemented "read-only" access yet, so this feature can only be granted
+      // as "all" or "none"
+      disabled: true,
+      savedObject: {
+        all: [],
+        read: [],
+      },
+      ui: [],
+    },
+  },
+};

src/plugins/guided_onboarding/server/plugin.ts

@@ -9,6 +9,8 @@
 import { PluginInitializerContext, CoreSetup, Plugin, Logger } from '@kbn/core/server';
 
 import type { GuideId, GuideConfig } from '@kbn/guided-onboarding';
+import { PluginSetupContract as FeaturesPluginSetup } from '@kbn/features-plugin/server';
+import { GUIDED_ONBOARDING_FEATURE } from './feature';
 import { GuidedOnboardingPluginSetup, GuidedOnboardingPluginStart } from './types';
 import { defineRoutes } from './routes';
 import { guideStateSavedObjects, pluginStateSavedObjects } from './saved_objects';
@@ -25,7 +27,7 @@ export class GuidedOnboardingPlugin
     this.guidesConfig = {} as GuidesConfig;
   }
 
-  public setup(core: CoreSetup) {
+  public setup(core: CoreSetup, plugins: { features?: FeaturesPluginSetup }) {
     this.logger.debug('guidedOnboarding: Setup');
     const router = core.http.createRouter();
 
@@ -36,6 +38,8 @@ export class GuidedOnboardingPlugin
     core.savedObjects.registerType(guideStateSavedObjects);
     core.savedObjects.registerType(pluginStateSavedObjects);
 
+    plugins.features?.registerKibanaFeature(GUIDED_ONBOARDING_FEATURE);
+
     return {
       registerGuideConfig: (guideId: GuideId, guideConfig: GuideConfig) => {
         if (this.guidesConfig[guideId]) {

src/plugins/guided_onboarding/tsconfig.json

@@ -18,6 +18,7 @@
     "@kbn/core-http-browser",
     "@kbn/core-http-browser-mocks",
     "@kbn/config-schema",
+    "@kbn/features-plugin",
   ],
   "exclude": [
     "target/**/*",