[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/**/*",