[8.x] [Feature Flags Service] Hello world 👋 (#188562) (#193519)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Feature Flags Service] Hello world 👋
(#188562)](#188562)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alejandro Fernández
Haro","email":"alejandro.haro@elastic.co"},"sourceCommit":{"committedDate":"2024-09-18T16:02:55Z","message":"[Feature
Flags Service] Hello world 👋 (#188562)\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Jean-Louis Leysens
<jloleysens@gmail.com>","sha":"02ce1b91014eb59f019854b01325bbdf983d2218","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Core","Team:Operations","Team:Security","release_note:skip","Team:Observability","Team:Fleet","v9.0.0","Team:
SecuritySolution","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-logs"],"number":188562,"url":"https://github.com/elastic/kibana/pull/188562","mergeCommit":{"message":"[Feature
Flags Service] Hello world 👋 (#188562)\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Jean-Louis Leysens
<jloleysens@gmail.com>","sha":"02ce1b91014eb59f019854b01325bbdf983d2218"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/188562","number":188562,"mergeCommit":{"message":"[Feature
Flags Service] Hello world 👋 (#188562)\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Jean-Louis Leysens
<jloleysens@gmail.com>","sha":"02ce1b91014eb59f019854b01325bbdf983d2218"}}]}]
BACKPORT-->

dev_docs/nav-kibana-dev.docnav.json

@@ -136,10 +136,6 @@
         },
         {
           "id": "kibDevDocsEmbeddables"
-        },
-        {
-          "id": "kibCloudExperimentsPlugin",
-          "label": "A/B testing on Elastic Cloud"
         }
       ]
     },
@@ -205,6 +201,10 @@
         },
         {
           "id": "kibDevTutorialCcsSetup"
+        },
+        {
+          "id": "kibFeatureFlagsService",
+          "label": "Feature Flags"
         }
       ]
     },
@@ -646,4 +646,4 @@
       ]
     }
   ]
-}
+}

docs/developer/plugin-list.asciidoc

@@ -499,8 +499,8 @@ The plugin exposes the static DefaultEditorController class to consume.
 
 
 |{kib-repo}blob/{branch}/x-pack/plugins/cloud_integrations/cloud_experiments/README.mdx[cloudExperiments]
-|[!WARNING]
-These APIs are deprecated and should not be used as we're working on a replacement Core Feature Flags Service that will arrive soon.
+|[!NOTE]
+This plugin no-longer exposes any evaluation APIs. Refer to <DocLink id="kibFeatureFlagsService" /> for more information about how to interact with feature flags.
 
 
 |{kib-repo}blob/{branch}/x-pack/plugins/cloud_integrations/cloud_full_story/README.md[cloudFullStory]

examples/feature_flags_example/README.md

@@ -0,0 +1,5 @@
+# featureFlagsExample
+
+This plugin's goal is to demonstrate how to use the core feature flags service.
+
+Refer to [the docs](../../packages/core/feature-flags/README.mdx) to know more.

examples/feature_flags_example/common/feature_flags.ts

@@ -0,0 +1,12 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export const FeatureFlagExampleBoolean = 'example-boolean';
+export const FeatureFlagExampleString = 'example-string';
+export const FeatureFlagExampleNumber = 'example-number';

examples/feature_flags_example/common/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export const PLUGIN_ID = 'featureFlagsExample';
+export const PLUGIN_NAME = 'Feature Flags Example';

examples/feature_flags_example/kibana.jsonc

@@ -0,0 +1,13 @@
+{
+  "type": "plugin",
+  "id": "@kbn/feature-flags-example-plugin",
+  "owner": "@elastic/kibana-core",
+  "description": "Plugin that shows how to make use of the feature flags core service.",
+  "plugin": {
+    "id": "featureFlagsExample",
+    "server": true,
+    "browser": true,
+    "requiredPlugins": ["developerExamples"],
+    "optionalPlugins": []
+  }
+}

examples/feature_flags_example/public/application.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppMountParameters, CoreStart } from '@kbn/core/public';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+import { KibanaRootContextProvider } from '@kbn/react-kibana-context-root';
+import { FeatureFlagsExampleApp } from './components/app';
+
+export const renderApp = (coreStart: CoreStart, { element }: AppMountParameters) => {
+  const { notifications, http, featureFlags } = coreStart;
+  ReactDOM.render(
+    <KibanaRootContextProvider {...coreStart}>
+      <KibanaPageTemplate>
+        <FeatureFlagsExampleApp
+          featureFlags={featureFlags}
+          notifications={notifications}
+          http={http}
+        />
+      </KibanaPageTemplate>
+    </KibanaRootContextProvider>,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

examples/feature_flags_example/public/components/app.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import {
+  EuiHorizontalRule,
+  EuiPageTemplate,
+  EuiTitle,
+  EuiText,
+  EuiLink,
+  EuiListGroup,
+  EuiListGroupItem,
+} from '@elastic/eui';
+import type { CoreStart, FeatureFlagsStart } from '@kbn/core/public';
+
+import useObservable from 'react-use/lib/useObservable';
+import {
+  FeatureFlagExampleBoolean,
+  FeatureFlagExampleNumber,
+  FeatureFlagExampleString,
+} from '../../common/feature_flags';
+import { PLUGIN_NAME } from '../../common';
+
+interface FeatureFlagsExampleAppDeps {
+  featureFlags: FeatureFlagsStart;
+  notifications: CoreStart['notifications'];
+  http: CoreStart['http'];
+}
+
+export const FeatureFlagsExampleApp = ({ featureFlags }: FeatureFlagsExampleAppDeps) => {
+  // Fetching the feature flags synchronously
+  const bool = featureFlags.getBooleanValue(FeatureFlagExampleBoolean, false);
+  const str = featureFlags.getStringValue(FeatureFlagExampleString, 'red');
+  const num = featureFlags.getNumberValue(FeatureFlagExampleNumber, 1);
+
+  // Use React Hooks to observe feature flags changes
+  const bool$ = useObservable(featureFlags.getBooleanValue$(FeatureFlagExampleBoolean, false));
+  const str$ = useObservable(featureFlags.getStringValue$(FeatureFlagExampleString, 'red'));
+  const num$ = useObservable(featureFlags.getNumberValue$(FeatureFlagExampleNumber, 1));
+
+  return (
+    <>
+      <EuiPageTemplate>
+        <EuiPageTemplate.Header>
+          <EuiTitle size="l">
+            <h1>{PLUGIN_NAME}</h1>
+          </EuiTitle>
+        </EuiPageTemplate.Header>
+        <EuiPageTemplate.Section>
+          <EuiTitle>
+            <h2>Demo of the feature flags service</h2>
+          </EuiTitle>
+          <EuiText>
+            <p>
+              To learn more, refer to{' '}
+              <EuiLink
+                href={'https://docs.elastic.dev/kibana-dev-docs/tutorials/feature-flags-service'}
+              >
+                the docs
+              </EuiLink>
+              .
+            </p>
+            <EuiHorizontalRule />
+            <EuiListGroup>
+              <p>
+                The feature flags are:
+                <EuiListGroupItem label={`${FeatureFlagExampleBoolean}: ${bool}`} />
+                <EuiListGroupItem label={`${FeatureFlagExampleString}: ${str}`} />
+                <EuiListGroupItem label={`${FeatureFlagExampleNumber}: ${num}`} />
+              </p>
+            </EuiListGroup>
+            <EuiListGroup>
+              <p>
+                The <strong>observed</strong> feature flags are:
+                <EuiListGroupItem label={`${FeatureFlagExampleBoolean}: ${bool$}`} />
+                <EuiListGroupItem label={`${FeatureFlagExampleString}: ${str$}`} />
+                <EuiListGroupItem label={`${FeatureFlagExampleNumber}: ${num$}`} />
+              </p>
+            </EuiListGroup>
+          </EuiText>
+        </EuiPageTemplate.Section>
+      </EuiPageTemplate>
+    </>
+  );
+};

examples/feature_flags_example/public/index.ts

@@ -0,0 +1,14 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { FeatureFlagsExamplePlugin } from './plugin';
+
+export function plugin() {
+  return new FeatureFlagsExamplePlugin();
+}

examples/feature_flags_example/public/plugin.ts

@@ -0,0 +1,40 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
+import { AppPluginSetupDependencies } from './types';
+import { PLUGIN_NAME } from '../common';
+
+export class FeatureFlagsExamplePlugin implements Plugin {
+  public setup(core: CoreSetup, deps: AppPluginSetupDependencies) {
+    // Register an application into the side navigation menu
+    core.application.register({
+      id: 'featureFlagsExample',
+      title: PLUGIN_NAME,
+      async mount(params: AppMountParameters) {
+        // Load application bundle
+        const { renderApp } = await import('./application');
+        // Get start services as specified in kibana.json
+        const [coreStart] = await core.getStartServices();
+        // Render the application
+        return renderApp(coreStart, params);
+      },
+    });
+
+    deps.developerExamples.register({
+      appId: 'featureFlagsExample',
+      title: PLUGIN_NAME,
+      description: 'Plugin that shows how to make use of the feature flags core service.',
+    });
+  }
+
+  public start(core: CoreStart) {}
+
+  public stop() {}
+}

examples/feature_flags_example/public/types.ts

@@ -0,0 +1,14 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';
+
+export interface AppPluginSetupDependencies {
+  developerExamples: DeveloperExamplesSetup;
+}

examples/feature_flags_example/server/index.ts

@@ -0,0 +1,77 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { FeatureFlagDefinitions } from '@kbn/core-feature-flags-server';
+import type { PluginInitializerContext } from '@kbn/core-plugins-server';
+import {
+  FeatureFlagExampleBoolean,
+  FeatureFlagExampleNumber,
+  FeatureFlagExampleString,
+} from '../common/feature_flags';
+
+export const featureFlags: FeatureFlagDefinitions = [
+  {
+    key: FeatureFlagExampleBoolean,
+    name: 'Example boolean',
+    description: 'This is a demo of a boolean flag',
+    tags: ['example', 'my-plugin'],
+    variationType: 'boolean',
+    variations: [
+      {
+        name: 'On',
+        description: 'Auto-hides the bar',
+        value: true,
+      },
+      {
+        name: 'Off',
+        description: 'Static always-on',
+        value: false,
+      },
+    ],
+  },
+  {
+    key: FeatureFlagExampleString,
+    name: 'Example string',
+    description: 'This is a demo of a string flag',
+    tags: ['example', 'my-plugin'],
+    variationType: 'string',
+    variations: [
+      {
+        name: 'Pink',
+        value: '#D75489',
+      },
+      {
+        name: 'Turquoise',
+        value: '#65BAAF',
+      },
+    ],
+  },
+  {
+    key: FeatureFlagExampleNumber,
+    name: 'Example Number',
+    description: 'This is a demo of a number flag',
+    tags: ['example', 'my-plugin'],
+    variationType: 'number',
+    variations: [
+      {
+        name: 'Five',
+        value: 5,
+      },
+      {
+        name: 'Ten',
+        value: 10,
+      },
+    ],
+  },
+];
+
+export async function plugin(initializerContext: PluginInitializerContext) {
+  const { FeatureFlagsExamplePlugin } = await import('./plugin');
+  return new FeatureFlagsExamplePlugin(initializerContext);
+}