[serverless] Advanced Settings - Field Row components

.github/CODEOWNERS

@@ -480,8 +480,13 @@ 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/components/field_input @elastic/platform-deployment-management @elastic/appex-sharedux
+packages/kbn-management/settings/components/field_row @elastic/platform-deployment-management @elastic/appex-sharedux
+packages/kbn-management/settings/field_definition @elastic/platform-deployment-management @elastic/appex-sharedux
 packages/kbn-management/settings/setting_ids @elastic/appex-sharedux @elastic/platform-deployment-management
 packages/kbn-management/settings/section_registry @elastic/appex-sharedux @elastic/platform-deployment-management
+packages/kbn-management/settings/types @elastic/platform-deployment-management @elastic/appex-sharedux
+packages/kbn-management/settings/utilities @elastic/platform-deployment-management @elastic/appex-sharedux
 packages/kbn-management/storybook/config @elastic/platform-deployment-management
 test/plugin_functional/plugins/management_test_plugin @elastic/kibana-app-services
 packages/kbn-mapbox-gl @elastic/kibana-gis

package.json

@@ -500,8 +500,13 @@
     "@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-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",
     "@kbn/management-settings-ids": "link:packages/kbn-management/settings/setting_ids",
     "@kbn/management-settings-section-registry": "link:packages/kbn-management/settings/section_registry",
+    "@kbn/management-settings-types": "link:packages/kbn-management/settings/types",
+    "@kbn/management-settings-utilities": "link:packages/kbn-management/settings/utilities",
     "@kbn/management-test-plugin": "link:test/plugin_functional/plugins/management_test_plugin",
     "@kbn/mapbox-gl": "link:packages/kbn-mapbox-gl",
     "@kbn/maps-custom-raster-source-plugin": "link:x-pack/examples/third_party_maps_source_example",

packages/kbn-management/settings/components/field_input/README.mdx

@@ -0,0 +1,12 @@
+---
+id: management/settings/components/fieldInput
+slug: /management/settings/components/field-input
+title: Management Settings Field Input Component
+description: A package containing a component for rendering and manipulating the raw value of a UiSetting in Field Row.
+tags: ['management', 'settings']
+date: 2023-08-31
+---
+
+## Description
+
+This package contains a component for rendering and manipulating the raw value of a UiSetting.  It's used primarily by the `FieldRow` component to drive unsaved or reset changes.

packages/kbn-management/settings/components/field_input/__stories__/array_input.stories.tsx

@@ -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 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 { getInputStory, getStory } from './common';
+
+export default getStory('Array Input', 'An input with an array value.');
+export const ArrayInput = getInputStory('array' as const);

packages/kbn-management/settings/components/field_input/__stories__/boolean_input.stories.tsx

@@ -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 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 { getInputStory, getStory } from './common';
+
+export default getStory('Boolean Input', 'An input with a boolean value.');
+export const BooleanInput = getInputStory('boolean' as const);

packages/kbn-management/settings/components/field_input/__stories__/color_input.stories.tsx

@@ -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 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 { getInputStory, getStory } from './common';
+
+export default getStory('Color Input', 'An input with a color value.');
+export const ColorInput = getInputStory('color' as const);

packages/kbn-management/settings/components/field_input/__stories__/common.tsx

@@ -0,0 +1,120 @@
+/*
+ * 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 type { ComponentMeta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { EuiPanel } from '@elastic/eui';
+import { UiSettingsType } from '@kbn/core-ui-settings-common';
+import { SettingType, UiSettingMetadata } from '@kbn/management-settings-types';
+import {
+  useFieldDefinition,
+  getDefaultValue,
+} from '@kbn/management-settings-field-definition/storybook';
+
+import { FieldInputProvider } from '../services';
+import { FieldInput as Component, FieldInput } from '../field_input';
+import { InputProps, OnChangeFn } from '../types';
+
+/**
+ * Props for a {@link FieldInput} Storybook story.
+ */
+export type StoryProps<T extends SettingType> = Pick<InputProps<T>, 'value' | 'isDisabled'>;
+
+/**
+ * Interface defining available {@link https://storybook.js.org/docs/react/writing-stories/parameters parameters}
+ * for a {@link FieldInput} Storybook story.
+ */
+interface Params {
+  argTypes?: Record<string, unknown>;
+  settingFields?: Partial<UiSettingMetadata<UiSettingsType>>;
+}
+
+/**
+ * Interface defining types for available {@link https://storybook.js.org/docs/react/writing-stories/args arguments}
+ * for a {@link FieldInput} Storybook story.
+ */
+export interface Args {
+  /** True if the field is disabled, false otherwise. */
+  isDisabled: boolean;
+}
+
+/**
+ * Default argument values for a {@link FieldInput} Storybook story.
+ */
+export const storyArgs = {
+  /** True if the field is disabled, false otherwise. */
+  isDisabled: false,
+};
+
+/**
+ * Utility function for returning a {@link FieldInput} Storybook story
+ * definition.
+ * @param title The title displayed in the Storybook UI.
+ * @param description The description of the story.
+ * @returns A Storybook Story.
+ */
+export const getStory = (title: string, description: string) =>
+  ({
+    title: `Settings/Field Input/${title}`,
+    description,
+    argTypes: {
+      isDisabled: {
+        name: 'Is field disabled?',
+      },
+      value: {
+        name: 'Current saved value',
+      },
+    },
+    decorators: [
+      (Story) => (
+        <FieldInputProvider showDanger={action('showDanger')}>
+          <EuiPanel style={{ width: 500 }}>
+            <Story />
+          </EuiPanel>
+        </FieldInputProvider>
+      ),
+    ],
+  } as ComponentMeta<typeof Component>);
+
+/**
+ * Utility function for returning a {@link FieldInput} Storybook story.
+ * @param type The type of the UiSetting for this {@link FieldRow}.
+ * @param params Additional, optional {@link https://storybook.js.org/docs/react/writing-stories/parameters parameters}.
+ * @returns A Storybook Story.
+ */
+export const getInputStory = (type: SettingType, params: Params = {}) => {
+  const Story = ({ value, isDisabled = false }: StoryProps<typeof type>) => {
+    const setting: UiSettingMetadata<typeof type> = {
+      type,
+      value,
+      userValue: value,
+      ...params.settingFields,
+    };
+
+    const [field, unsavedChange, onChangeFn] = useFieldDefinition(setting);
+
+    const onChange: OnChangeFn<typeof type> = (newChange) => {
+      onChangeFn(newChange);
+    };
+    return (
+      <FieldInput
+        {...{ field, isInvalid: unsavedChange.isInvalid, unsavedChange, onChange, isDisabled }}
+      />
+    );
+  };
+
+  Story.args = {
+    value: getDefaultValue(type),
+    ...params.argTypes,
+    ...storyArgs,
+  };
+
+  return Story;
+};

packages/kbn-management/settings/components/field_input/__stories__/image_input.stories.tsx

@@ -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 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 { getInputStory, getStory } from './common';
+
+export default getStory('Image Input', 'An input with an image value.');
+export const ImageInput = getInputStory('image' as const);

packages/kbn-management/settings/components/field_input/__stories__/json_input.stories.tsx

@@ -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 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 { getInputStory, getStory } from './common';
+
+export default getStory('JSON Input', 'An input with a JSON value.');
+export const JSONInput = getInputStory('json' as const);

packages/kbn-management/settings/components/field_input/__stories__/markdown_input.stories.tsx

@@ -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 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 { getInputStory, getStory } from './common';
+
+export default getStory('Markdown Input', 'An input with a markdown value.');
+export const MarkdownInput = getInputStory('markdown' as const);

packages/kbn-management/settings/components/field_input/__stories__/number_input.stories.tsx

@@ -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 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 { getInputStory, getStory } from './common';
+
+export default getStory('Number Input', 'An input with a number value.');
+export const NumberInput = getInputStory('number' as const);

packages/kbn-management/settings/components/field_input/__stories__/select_input.stories.tsx

@@ -0,0 +1,27 @@
+/*
+ * 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 { getInputStory, getStory } from './common';
+
+const argTypes = {
+  value: {
+    name: 'Current saved value',
+    control: {
+      type: 'select',
+      options: ['option1', 'option2', 'option3'],
+    },
+  },
+};
+
+const settingFields = {
+  optionLabels: { option1: 'Option 1', option2: 'Option 2', option3: 'Option 3' },
+  options: ['option1', 'option2', 'option3'],
+};
+
+export default getStory('Select Input', 'An input with multiple values.');
+export const SelectInput = getInputStory('select' as const, { argTypes, settingFields });

packages/kbn-management/settings/components/field_input/__stories__/text_input.stories.tsx

@@ -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 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 { getInputStory, getStory } from './common';
+
+export default getStory('String Input', 'An input with a string value.');
+export const StringInput = getInputStory('string' as const);