[Advanced Settings] Integrate new Settings application into stateful Kibana

config/serverless.yml

@@ -58,7 +58,7 @@ guided_onboarding.enabled: false
 # Other disabled plugins
 xpack.canvas.enabled: false
 data.search.sessions.enabled: false
-advanced_settings.enabled: false
+advanced_settings.globalSettingsEnabled: false
 
 # Disable the browser-side functionality that depends on SecurityCheckupGetStateRoutes
 xpack.security.showInsecureClusterWarning: false

docs/developer/plugin-list.asciidoc

@@ -23,7 +23,7 @@ NOTE:
 
 
 |{kib-repo}blob/{branch}/src/plugins/advanced_settings/README.md[advancedSettings]
-|This plugin contains the advanced settings management section
+|This plugin registers the management settings application
 allowing users to configure their advanced settings, also known
 as uiSettings within the code.
 

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

@@ -16,6 +16,7 @@ import {
   getSettingsMock,
 } from '@kbn/management-settings-utilities/mocks/settings.mock';
 import { UiSettingsScope } from '@kbn/core-ui-settings-common';
+import { getSettingsCapabilitiesMock } from '@kbn/management-settings-utilities/mocks/capabilities.mock';
 import { SettingsApplication as Component } from '../application';
 import { SettingsApplicationProvider } from '../services';
 
@@ -43,6 +44,11 @@ const getSettingsApplicationStory = ({ hasGlobalSettings }: StoryProps) => (
     getAllowlistedSettings={(scope: UiSettingsScope) =>
       scope === 'namespace' ? getSettingsMock() : hasGlobalSettings ? getGlobalSettingsMock() : {}
     }
+    getSections={() => []}
+    // @ts-ignore
+    getToastsService={() => null}
+    getCapabilities={getSettingsCapabilitiesMock}
+    setBadge={() => {}}
     isCustomSetting={() => false}
     isOverriddenSetting={() => false}
     saveChanges={action('saveChanges')}

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

@@ -22,6 +22,7 @@ import { SettingsTabs } from '@kbn/management-settings-types/tab';
 import { EmptyState } from './empty_state';
 import { i18nTexts } from './i18n_texts';
 import { Tab } from './tab';
+import { readOnlyBadge } from './read_only_badge';
 import { useScopeFields } from './hooks/use_scope_fields';
 import { QueryInput, QueryInputProps } from './query_input';
 import { useServices } from './services';
@@ -53,7 +54,8 @@ function getQueryParam(url: string) {
  * Component for displaying the {@link SettingsApplication} component.
  */
 export const SettingsApplication = () => {
-  const { addUrlToHistory } = useServices();
+  const { addUrlToHistory, getSections, getToastsService, getCapabilities, setBadge } =
+    useServices();
 
   const queryParam = getQueryParam(window.location.href);
   const [query, setQuery] = useState<Query>(Query.parse(queryParam));
@@ -68,7 +70,17 @@ export const SettingsApplication = () => {
   const [spaceAllFields, globalAllFields] = useScopeFields();
   const [spaceFilteredFields, globalFilteredFields] = useScopeFields(query);
 
-  const globalSettingsEnabled = globalAllFields.length > 0;
+  const {
+    spaceSettings: { save: canSaveSpaceSettings },
+    globalSettings: { save: canSaveGlobalSettings, show: canShowGlobalSettings },
+  } = getCapabilities();
+  if (!canSaveSpaceSettings || (!canSaveGlobalSettings && canShowGlobalSettings)) {
+    setBadge(readOnlyBadge);
+  }
+
+  // Only enabled the Global settings tab if there are any global settings
+  // and if global settings can be shown
+  const globalTabEnabled = globalAllFields.length > 0 && canShowGlobalSettings;
 
   const tabs: SettingsTabs = {
     [SPACE_SETTINGS_TAB_ID]: {
@@ -77,16 +89,19 @@ export const SettingsApplication = () => {
       categoryCounts: getCategoryCounts(spaceAllFields),
       callOutTitle: i18nTexts.spaceCalloutTitle,
       callOutText: i18nTexts.spaceCalloutText,
+      sections: getSections('namespace'),
+      isSavingEnabled: canSaveSpaceSettings,
     },
   };
-  // Only add a Global settings tab if there are any global settings
-  if (globalSettingsEnabled) {
+  if (globalTabEnabled) {
     tabs[GLOBAL_SETTINGS_TAB_ID] = {
       name: i18nTexts.globalTabTitle,
       fields: globalFilteredFields,
       categoryCounts: getCategoryCounts(globalAllFields),
       callOutTitle: i18nTexts.globalCalloutTitle,
       callOutText: i18nTexts.globalCalloutText,
+      sections: getSections('global'),
+      isSavingEnabled: canSaveGlobalSettings,
     };
   }
 
@@ -110,7 +125,7 @@ export const SettingsApplication = () => {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
-      {globalSettingsEnabled && (
+      {globalTabEnabled && (
         <>
           <EuiTabs>
             {Object.keys(tabs).map((id) => (
@@ -130,13 +145,31 @@ export const SettingsApplication = () => {
       )}
       <EuiSpacer size="xl" />
       {selectedTab.fields.length ? (
-        <Form
-          fields={selectedTab.fields}
-          categoryCounts={selectedTab.categoryCounts}
-          isSavingEnabled={true}
-          onClearQuery={() => onQueryChange()}
-          scope={selectedTabId === SPACE_SETTINGS_TAB_ID ? 'namespace' : 'global'}
-        />
+        <>
+          <Form
+            fields={selectedTab.fields}
+            categoryCounts={selectedTab.categoryCounts}
+            isSavingEnabled={selectedTab.isSavingEnabled}
+            onClearQuery={() => onQueryChange()}
+            scope={selectedTabId === SPACE_SETTINGS_TAB_ID ? 'namespace' : 'global'}
+          />
+          <EuiSpacer size="l" />
+          {selectedTab.sections.length > 0 &&
+            selectedTab.sections.map(({ Component, queryMatch }, index) => {
+              if (queryMatch(query.text)) {
+                return (
+                  <Component
+                    key={`component-${index}`}
+                    toasts={getToastsService()}
+                    enableSaving={{
+                      global: canSaveGlobalSettings,
+                      namespace: canSaveSpaceSettings,
+                    }}
+                  />
+                );
+              }
+            })}
+        </>
       ) : (
         <EmptyState {...{ queryText: query?.text, onClearQuery: () => onQueryChange() }} />
       )}

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

@@ -28,9 +28,22 @@ export const KibanaSettingsApplication = ({
   settings,
   theme,
   history,
+  sectionRegistry,
+  application,
+  chrome,
 }: SettingsApplicationKibanaDependencies) => (
   <SettingsApplicationKibanaProvider
-    {...{ settings, theme, i18n, notifications, docLinks, history }}
+    {...{
+      settings,
+      theme,
+      i18n,
+      notifications,
+      docLinks,
+      history,
+      sectionRegistry,
+      application,
+      chrome,
+    }}
   >
     <SettingsApplication />
   </SettingsApplicationKibanaProvider>

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

@@ -21,6 +21,7 @@ import {
   getSettingsMock,
 } from '@kbn/management-settings-utilities/mocks/settings.mock';
 import { UiSettingsScope } from '@kbn/core-ui-settings-common';
+import { getSettingsCapabilitiesMock } from '@kbn/management-settings-utilities/mocks/capabilities.mock';
 import { SettingsApplicationProvider, SettingsApplicationServices } from '../services';
 
 const createRootMock = () => {
@@ -42,10 +43,14 @@ export const createSettingsApplicationServicesMock = (
   ...createFormServicesMock(),
   getAllowlistedSettings: (scope: UiSettingsScope) =>
     scope === 'namespace' ? getSettingsMock() : hasGlobalSettings ? getGlobalSettingsMock() : {},
+  getSections: () => [],
+  getCapabilities: getSettingsCapabilitiesMock,
+  setBadge: jest.fn(),
   isCustomSetting: () => false,
   isOverriddenSetting: () => false,
   subscribeToUpdates: () => new Subscription(),
   addUrlToHistory: jest.fn(),
+  getToastsService: jest.fn(),
 });
 
 export const TestWrapper = ({

src/plugins/advanced_settings/public/management_app/components/call_outs/call_outs.test.tsx → packages/kbn-management/settings/application/read_only_badge.ts

@@ -6,15 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { shallow } from 'enzyme';
+import { i18n } from '@kbn/i18n';
 
-import { CallOuts } from './call_outs';
-
-describe('CallOuts', () => {
-  it('should render normally', async () => {
-    const component = shallow(<CallOuts />);
-
-    expect(component).toMatchSnapshot();
-  });
-});
+export const readOnlyBadge = {
+  text: i18n.translate('management.settings.badge.readOnly.text', {
+    defaultMessage: 'Read only',
+  }),
+  tooltip: i18n.translate('management.settings.badge.readOnly.tooltip', {
+    defaultMessage: 'Unable to save advanced settings',
+  }),
+  iconType: 'glasses',
+};

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

@@ -14,15 +14,22 @@ import {
   type FormKibanaDependencies,
   type FormServices,
 } from '@kbn/management-settings-components-form';
-import { UiSettingMetadata } from '@kbn/management-settings-types';
+import { SettingsCapabilities, UiSettingMetadata } from '@kbn/management-settings-types';
 import { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
 import { normalizeSettings } from '@kbn/management-settings-utilities';
 import { Subscription } from 'rxjs';
-import { ScopedHistory } from '@kbn/core-application-browser';
+import { ApplicationStart, ScopedHistory } from '@kbn/core-application-browser';
 import { UiSettingsScope } from '@kbn/core-ui-settings-common';
+import { RegistryEntry, SectionRegistryStart } from '@kbn/management-settings-section-registry';
+import { ToastsStart } from '@kbn/core-notifications-browser';
+import { ChromeBadge, ChromeStart } from '@kbn/core-chrome-browser';
 
 export interface Services {
   getAllowlistedSettings: (scope: UiSettingsScope) => Record<string, UiSettingMetadata>;
+  getSections: (scope: UiSettingsScope) => RegistryEntry[];
+  getToastsService: () => ToastsStart;
+  getCapabilities: () => SettingsCapabilities;
+  setBadge: (badge: ChromeBadge) => void;
   subscribeToUpdates: (fn: () => void, scope: UiSettingsScope) => Subscription;
   isCustomSetting: (key: string, scope: UiSettingsScope) => boolean;
   isOverriddenSetting: (key: string, scope: UiSettingsScope) => boolean;
@@ -43,6 +50,12 @@ export interface KibanaDependencies {
     >;
   };
   history: ScopedHistory;
+  sectionRegistry: SectionRegistryStart;
+  notifications: {
+    toasts: ToastsStart;
+  };
+  application: Pick<ApplicationStart, 'capabilities'>;
+  chrome: Pick<ChromeStart, 'setBadge'>;
 }
 
 export type SettingsApplicationKibanaDependencies = KibanaDependencies & FormKibanaDependencies;
@@ -65,6 +78,10 @@ export const SettingsApplicationProvider: FC<SettingsApplicationServices> = ({
     links,
     showDanger,
     getAllowlistedSettings,
+    getSections,
+    getCapabilities,
+    setBadge,
+    getToastsService,
     subscribeToUpdates,
     isCustomSetting,
     isOverriddenSetting,
@@ -75,6 +92,10 @@ export const SettingsApplicationProvider: FC<SettingsApplicationServices> = ({
     <SettingsApplicationContext.Provider
       value={{
         getAllowlistedSettings,
+        getSections,
+        getToastsService,
+        getCapabilities,
+        setBadge,
         subscribeToUpdates,
         isCustomSetting,
         isOverriddenSetting,
@@ -97,7 +118,17 @@ export const SettingsApplicationKibanaProvider: FC<SettingsApplicationKibanaDepe
   children,
   ...dependencies
 }) => {
-  const { docLinks, notifications, theme, i18n, settings, history } = dependencies;
+  const {
+    docLinks,
+    notifications,
+    theme,
+    i18n,
+    settings,
+    history,
+    sectionRegistry,
+    application,
+    chrome,
+  } = dependencies;
   const { client, globalClient } = settings;
 
   const getScopeClient = (scope: UiSettingsScope) => {
@@ -114,6 +145,26 @@ export const SettingsApplicationKibanaProvider: FC<SettingsApplicationKibanaDepe
     return normalizeSettings(rawSettings);
   };
 
+  const getSections = (scope: UiSettingsScope) => {
+    return scope === 'namespace'
+      ? sectionRegistry.getSpacesSections()
+      : sectionRegistry.getGlobalSections();
+  };
+
+  const getCapabilities = () => {
+    const { advancedSettings, globalSettings } = application.capabilities;
+    return {
+      spaceSettings: {
+        show: advancedSettings.show as boolean,
+        save: advancedSettings.save as boolean,
+      },
+      globalSettings: {
+        show: globalSettings.show as boolean,
+        save: globalSettings.save as boolean,
+      },
+    };
+  };
+
   const isCustomSetting = (key: string, scope: UiSettingsScope) => {
     const scopeClient = getScopeClient(scope);
     return scopeClient.isCustom(key);
@@ -131,6 +182,10 @@ export const SettingsApplicationKibanaProvider: FC<SettingsApplicationKibanaDepe
 
   const services: Services = {
     getAllowlistedSettings,
+    getSections,
+    getToastsService: () => notifications.toasts,
+    getCapabilities,
+    setBadge: (badge: ChromeBadge) => chrome.setBadge(badge),
     isCustomSetting,
     isOverriddenSetting,
     subscribeToUpdates,

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

@@ -32,5 +32,8 @@
     "@kbn/core-i18n-browser",
     "@kbn/core-analytics-browser-mocks",
     "@kbn/core-ui-settings-common",
+    "@kbn/management-settings-section-registry",
+    "@kbn/core-notifications-browser",
+    "@kbn/core-chrome-browser",
   ]
 }

src/plugins/advanced_settings/public/management_app/components/field/index.ts → packages/kbn-management/settings/types/capabilities.ts

@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-export { Field, getEditableValue } from './field';
+export interface SettingsCapabilities {
+  spaceSettings: SettingCapability;
+  globalSettings: SettingCapability;
+}
 
-// eslint-disable-next-line import/no-default-export
-export { Field as default } from './field';
+interface SettingCapability {
+  show: boolean;
+  save: boolean;
+}

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

@@ -66,6 +66,8 @@ export type {
 } from './setting_type';
 
 export type { CategorizedFields, CategoryCounts } from './category';
+export type { SettingsTabs } from './tab';
+export type { SettingsCapabilities } from './capabilities';
 
 /**
  * A React `ref` that indicates an input can be reset using an

packages/kbn-management/settings/types/tab.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { RegistryEntry } from '@kbn/management-settings-section-registry';
 import { CategoryCounts } from './category';
 import { FieldDefinition } from '.';
 
@@ -16,5 +17,7 @@ export interface SettingsTabs {
     categoryCounts: CategoryCounts;
     callOutTitle: string;
     callOutText: string;
+    sections: RegistryEntry[];
+    isSavingEnabled: boolean;
   };
 }

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

@@ -14,5 +14,6 @@
     "@kbn/analytics",
     "@kbn/core",
     "@kbn/core-ui-settings-common",
+    "@kbn/management-settings-section-registry",
   ]
 }