[WIP][management] Integrate a settings view into serverless projects

.github/CODEOWNERS

@@ -481,6 +481,7 @@ packages/kbn-managed-vscode-config @elastic/kibana-operations
 packages/kbn-managed-vscode-config-cli @elastic/kibana-operations
 packages/kbn-management/cards_navigation @elastic/platform-deployment-management
 src/plugins/management @elastic/platform-deployment-management
+packages/kbn-management/settings/application @elastic/platform-deployment-management
 packages/kbn-management/settings/components/field_input @elastic/platform-deployment-management
 packages/kbn-management/settings/components/field_row @elastic/platform-deployment-management
 packages/kbn-management/settings/field_definition @elastic/platform-deployment-management

package.json

@@ -501,6 +501,7 @@
     "@kbn/logstash-plugin": "link:x-pack/plugins/logstash",
     "@kbn/management-cards-navigation": "link:packages/kbn-management/cards_navigation",
     "@kbn/management-plugin": "link:src/plugins/management",
+    "@kbn/management-settings-application": "link:packages/kbn-management/settings/application",
     "@kbn/management-settings-components-field-input": "link:packages/kbn-management/settings/components/field_input",
     "@kbn/management-settings-components-field-row": "link:packages/kbn-management/settings/components/field_row",
     "@kbn/management-settings-field-definition": "link:packages/kbn-management/settings/field_definition",

packages/kbn-management/cards_navigation/src/consts.tsx

@@ -27,6 +27,7 @@ export enum appIds {
   CONNECTORS = 'triggersActionsConnectors',
   RULES = 'triggersActions',
   MAINTENANCE_WINDOWS = 'maintenanceWindows',
+  SERVERLESS_SETTINGS = 'settings',
 }
 
 // Create new type that is a union of all the appId values
@@ -155,6 +156,14 @@ export const appDefinitions: Record<AppId, AppDefinition> = {
     }),
     icon: <EuiIcon size="l" type="lockOpen" />,
   },
+
+  [appIds.SERVERLESS_SETTINGS]: {
+    category: appCategories.OTHER,
+    description: i18n.translate('management.landing.withCardNavigation.settingsDescription', {
+      defaultMessage: 'Witty description.',
+    }),
+    icon: <EuiIcon size="l" type="gear" />,
+  },
 };
 
 // Compose a list of app ids that belong to a given category

packages/kbn-management/settings/application/README.md

@@ -0,0 +1,3 @@
+# @kbn/management-settings-application
+
+Empty package generated by @kbn/generate

packages/kbn-management/settings/application/application.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 React from 'react';
+
+import { SettingsStart } from '@kbn/core-ui-settings-browser';
+import { FieldRow, RowOnChangeFn } from '@kbn/management-settings-components-field-row';
+import { SettingType, UnsavedFieldChange } from '@kbn/management-settings-types';
+
+import { useFields } from './hooks/use_fields';
+
+export interface SettingsApplicationProps {
+  settingsStart: SettingsStart;
+}
+
+export const SettingsApplication = ({ settingsStart }: SettingsApplicationProps) => {
+  const fields = useFields(settingsStart.client);
+
+  const [unsavedChanges, setUnsavedChanges] = React.useState<
+    Record<string, UnsavedFieldChange<SettingType>>
+  >({});
+
+  const onChange: RowOnChangeFn<SettingType> = (id, change) => {
+    if (!change) {
+      const { [id]: unsavedChange, ...rest } = unsavedChanges;
+      setUnsavedChanges(rest);
+      return;
+    }
+
+    setUnsavedChanges((changes) => ({ ...changes, [id]: change }));
+  };
+
+  const isSavingEnabled = true;
+
+  const fieldRows = fields.map((field) => {
+    const { id: key } = field;
+    const unsavedChange = unsavedChanges[key];
+
+    return <FieldRow {...{ key, field, unsavedChange, onChange, isSavingEnabled }} />;
+  });
+
+  return <>{fieldRows}</>;
+};

packages/kbn-management/settings/application/hooks/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export { useFields } from './use_fields';
+export { useSettings } from './use_settings';

packages/kbn-management/settings/application/hooks/use_fields.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
+import { getFieldDefinitions } from '@kbn/management-settings-field-definition';
+import { FieldDefinition, SettingType } from '@kbn/management-settings-types';
+import { useSettings } from './use_settings';
+
+/**
+ * React hook which retrieves settings from a particular {@link IUiSettingsClient},
+ * and returns an observed collection of {@link FieldDefinition} objects derived from
+ * those settings.
+ */
+export const useFields = (client: IUiSettingsClient): Array<FieldDefinition<SettingType>> => {
+  const settings = useSettings(client);
+  return getFieldDefinitions(settings, client);
+};

packages/kbn-management/settings/application/hooks/use_settings.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 { useState } from 'react';
+import useEffectOnce from 'react-use/lib/useEffectOnce';
+
+import { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
+import { normalizeSettings } from '@kbn/management-settings-utilities';
+import { SettingType, UiSettingMetadata } from '@kbn/management-settings-types';
+
+/**
+ * React hook which retrieves settings from a particular {@link IUiSettingsClient},
+ * normalizes them to a predictable format, {@link UiSettingMetadata}, and returns
+ * them as an observed collection.
+ */
+export const useSettings = (client: IUiSettingsClient) => {
+  const [settings, setSettings] = useState<Record<string, UiSettingMetadata<SettingType>>>(
+    normalizeSettings(client.getAll())
+  );
+
+  useEffectOnce(() => {
+    const clientSubscription = client.getUpdate$().subscribe(() => {
+      setSettings(normalizeSettings(client.getAll()));
+    });
+
+    return () => {
+      clientSubscription.unsubscribe();
+    };
+  });
+
+  return settings;
+};

packages/kbn-management/settings/application/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export { SettingsApplication } from './application';
+export { SettingsApplicationKibanaProvider, SettingsApplicationProvider } from './services';

packages/kbn-management/settings/application/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/packages/kbn-management/settings/application'],
+};

packages/kbn-management/settings/application/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/management-settings-application",
+  "owner": "@elastic/platform-deployment-management"
+}

packages/kbn-management/settings/application/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/management-settings-application",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/kbn-management/settings/application/services.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 React, { FC } from 'react';
+
+import {
+  FieldRowProvider,
+  FieldRowKibanaProvider,
+  type FieldRowKibanaDependencies,
+  type FieldRowServices,
+} from '@kbn/management-settings-components-field-row';
+
+export type SettingsApplicationServices = FieldRowServices;
+export type SettingsApplicationKibanaDependencies = FieldRowKibanaDependencies;
+
+/**
+ * A Context Provider that provides services to the component and its dependencies.
+ */
+export const SettingsApplicationProvider: FC<SettingsApplicationServices> = ({
+  children,
+  ...services
+}) => {
+  return <FieldRowProvider {...services}>{children}</FieldRowProvider>;
+};
+
+/**
+ * Kibana-specific Provider that maps dependencies to services.
+ */
+export const SettingsApplicationKibanaProvider: FC<SettingsApplicationKibanaDependencies> = ({
+  children,
+  ...dependencies
+}) => {
+  return <FieldRowKibanaProvider {...dependencies}>{children}</FieldRowKibanaProvider>;
+};

packages/kbn-management/settings/application/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/core-ui-settings-browser",
+    "@kbn/management-settings-components-field-row",
+    "@kbn/management-settings-types",
+    "@kbn/management-settings-field-definition",
+    "@kbn/management-settings-utilities",
+  ]
+}

packages/kbn-optimizer/limits.yml

@@ -123,7 +123,7 @@ pageLoadAssetSize:
   securitySolution: 66738
   securitySolutionEss: 16573
   securitySolutionServerless: 45000
-  serverless: 16573
+  serverless: 41719
   serverlessObservability: 68747
   serverlessSearch: 71995
   sessionView: 77750

src/plugins/management/public/plugin.ts → src/plugins/management/public/plugin.tsx

@@ -6,11 +6,15 @@
  * Side Public License, v 1.
  */
 
-import { i18n } from '@kbn/i18n';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { i18n as kbnI18n } from '@kbn/i18n';
 import { BehaviorSubject } from 'rxjs';
 import type { SharePluginSetup, SharePluginStart } from '@kbn/share-plugin/public';
 import { HomePublicPluginSetup } from '@kbn/home-plugin/public';
 import { ServerlessPluginStart } from '@kbn/serverless/public';
+import { SettingsApplication } from '@kbn/management-settings-application';
+import { SettingsApplicationKibanaProvider } from '@kbn/management-settings-application';
 import {
   CoreSetup,
   CoreStart,
@@ -23,6 +27,7 @@ import {
   AppNavLinkStatus,
   AppDeepLink,
 } from '@kbn/core/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { ConfigSchema, ManagementSetup, ManagementStart, NavigationCardsSubject } from './types';
 
 import { MANAGEMENT_APP_ID } from '../common/contants';
@@ -99,10 +104,10 @@ export class ManagementPlugin
     if (home) {
       home.featureCatalogue.register({
         id: 'stack-management',
-        title: i18n.translate('management.stackManagement.managementLabel', {
+        title: kbnI18n.translate('management.stackManagement.managementLabel', {
           defaultMessage: 'Stack Management',
         }),
-        description: i18n.translate('management.stackManagement.managementDescription', {
+        description: kbnI18n.translate('management.stackManagement.managementDescription', {
           defaultMessage: 'Your center console for managing the Elastic Stack.',
         }),
         icon: 'managementApp',
@@ -115,7 +120,7 @@ export class ManagementPlugin
 
     core.application.register({
       id: MANAGEMENT_APP_ID,
-      title: i18n.translate('management.stackManagement.title', {
+      title: kbnI18n.translate('management.stackManagement.title', {
         defaultMessage: 'Stack Management',
       }),
       order: 9040,
@@ -167,6 +172,39 @@ export class ManagementPlugin
       });
     }
 
+    // I'm sure this isn't right.
+    if (this.managementSections.definedSections.kibana.registerApp) {
+      const title = kbnI18n.translate('management.settings.settingsLabel', {
+        defaultMessage: 'Settings',
+      });
+
+      this.managementSections.definedSections.kibana.registerApp({
+        id: 'settings',
+        title,
+        order: 3,
+        async mount({ element }) {
+          const {
+            i18n,
+            docLinks,
+            notifications: { toasts },
+            settings: settingsClient,
+          } = core;
+
+          ReactDOM.render(
+            <KibanaRenderContextProvider {...core}>
+              <SettingsApplicationKibanaProvider {...{ i18n, toasts, docLinks }}>
+                <SettingsApplication settingsStart={settingsClient} />
+              </SettingsApplicationKibanaProvider>
+            </KibanaRenderContextProvider>,
+            element
+          );
+          return () => {
+            ReactDOM.unmountComponentAtNode(element);
+          };
+        },
+      });
+    }
+
     return {
       setIsSidebarEnabled: (isSidebarEnabled: boolean) =>
         this.isSidebarEnabled$.next(isSidebarEnabled),

src/plugins/management/tsconfig.json

@@ -26,7 +26,9 @@
     "@kbn/config-schema",
     "@kbn/core-application-browser",
     "@kbn/core-http-browser",
-    "@kbn/serverless"
+    "@kbn/serverless",
+    "@kbn/management-settings-application",
+    "@kbn/react-kibana-context-render"
   ],
   "exclude": [
     "target/**/*"

tsconfig.base.json

@@ -956,6 +956,8 @@
       "@kbn/management-cards-navigation/*": ["packages/kbn-management/cards_navigation/*"],
       "@kbn/management-plugin": ["src/plugins/management"],
       "@kbn/management-plugin/*": ["src/plugins/management/*"],
+      "@kbn/management-settings-application": ["packages/kbn-management/settings/application"],
+      "@kbn/management-settings-application/*": ["packages/kbn-management/settings/application/*"],
       "@kbn/management-settings-components-field-input": ["packages/kbn-management/settings/components/field_input"],
       "@kbn/management-settings-components-field-input/*": ["packages/kbn-management/settings/components/field_input/*"],
       "@kbn/management-settings-components-field-row": ["packages/kbn-management/settings/components/field_row"],

x-pack/plugins/serverless/kibana.jsonc

@@ -19,4 +19,4 @@
     "optionalPlugins": [],
     "requiredBundles": []
   }
-}
+}