Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Inference Connector] Changed UI/UX due to the new RFC for the _inference/_service #203363

Merged
merged 10 commits into from
Dec 13, 2024
Merged

[Inference Connector] Changed UI/UX due to the new RFC for the _inference/_service #203363

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c9bb60b
[Inference Connector] Changed UI/UX due to the new RFC for the _infer…
YulNaumenko Dec 9, 2024
b4e4d67
dropped support the fields according to the RFC
YulNaumenko Dec 9, 2024
a2ce4d0
Hard-coding new response format
ymao1 Dec 10, 2024
5c10b35
Fixing type checks
ymao1 Dec 10, 2024
41e0a86
Fixing type checks
ymao1 Dec 10, 2024
daa7aa2
Merge branch 'main' of github.com:elastic/kibana into inference-conne…
ymao1 Dec 10, 2024
ea0e65b
Fixing unit tests
ymao1 Dec 10, 2024
b21ff85
Removing top level description field
ymao1 Dec 10, 2024
4d29970
Merge branch 'main' into inference-connector-ui-simplification
YulNaumenko Dec 10, 2024
585cf52
Merge branch 'main' into inference-connector-ui-simplification
YulNaumenko Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 1 addition & 15 deletions x-pack/plugins/stack_connectors/common/dynamic_config/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,6 @@
* 2.0.
*/

export enum DisplayType {
TEXTBOX = 'textbox',
TEXTAREA = 'textarea',
NUMERIC = 'numeric',
TOGGLE = 'toggle',
DROPDOWN = 'dropdown',
CHECKABLE = 'checkable',
}

export interface SelectOption {
label: string;
value: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is icon needed? I am importing SelectOption from search-connectors and icon is not defined there.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, icon is needed to display it in the select if it present

Expand Down Expand Up @@ -46,17 +37,12 @@ export interface Validation {
export interface ConfigProperties {
category?: string;
default_value: string | number | boolean | null;
depends_on: Dependency[];
display: DisplayType;
label: string;
options?: SelectOption[];
order?: number | null;
placeholder?: string;
required: boolean;
sensitive: boolean;
tooltip: string | null;
description: string | null;
type: FieldType;
ui_restrictions: string[];
validations: Validation[];
value: string | number | boolean | null;
}
Expand Down
13 changes: 5 additions & 8 deletions x-pack/plugins/stack_connectors/common/inference/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,11 @@ export type StreamingResponse = TypeOf<typeof StreamingResponseSchema>;

export type FieldsConfiguration = Record<string, ConfigProperties>;

export interface InferenceTaskType {
task_type: string;
configuration: FieldsConfiguration;
}

export interface InferenceProvider {
provider: string;
task_types: InferenceTaskType[];
service: string;
description: string;
name: string;
task_types: string[];
logo?: string;
configuration: FieldsConfiguration;
configurations: FieldsConfiguration;
}
56 changes: 6 additions & 50 deletions ...k/plugins/stack_connectors/public/connector_types/inference/additional_options_fields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import React, { useMemo, useCallback } from 'react';
import React, { useMemo } from 'react';
import { css } from '@emotion/react';

import {
Expand All @@ -18,7 +18,6 @@ import {
EuiTextColor,
EuiButtonGroup,
EuiPanel,
EuiHorizontalRule,
EuiButtonEmpty,
EuiCopy,
EuiButton,
Expand Down Expand Up @@ -55,7 +54,6 @@ interface AdditionalOptionsConnectorFieldsProps {
onTaskTypeOptionsSelect: (taskType: string, provider?: string) => void;
selectedTaskType?: string;
taskTypeFormFields: ConfigEntryView[];
taskTypeSchema: ConfigEntryView[];
taskTypeOptions: TaskTypeOption[];
}

Expand All @@ -66,7 +64,6 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
taskTypeOptions,
optionalProviderFormFields,
taskTypeFormFields,
taskTypeSchema,
selectedTaskType,
onSetProviderConfigEntry,
onTaskTypeOptionsSelect,
Expand All @@ -75,26 +72,6 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
const { euiTheme } = useEuiTheme();
const { setFieldValue, validateFields } = useFormContext();

const onSetTaskTypeConfigEntry = useCallback(
async (key: string, value: unknown) => {
if (taskTypeSchema) {
const entry: ConfigEntryView | undefined = taskTypeSchema.find(
(p: ConfigEntryView) => p.key === key
);
if (entry) {
if (!config.taskTypeConfig) {
config.taskTypeConfig = {};
}
const newConfig = { ...config.taskTypeConfig };
newConfig[key] = value;
setFieldValue('config.taskTypeConfig', newConfig);
await validateFields(['config.taskTypeConfig']);
}
}
},
[config, setFieldValue, taskTypeSchema, validateFields]
);

const taskTypeSettings = useMemo(
() =>
selectedTaskType || config.taskType?.length ? (
Expand All @@ -103,7 +80,7 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
<h4>
<FormattedMessage
id="xpack.stackConnectors.components.inference.taskTypeDetailsLabel"
defaultMessage="Task settings"
defaultMessage="Task type"
/>
</h4>
</EuiTitle>
Expand All @@ -116,7 +93,7 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
>
<FormattedMessage
id="xpack.stackConnectors.components.inference.taskTypeHelpLabel"
defaultMessage="Configure the inference task. These settings are specific to the service and model selected."
defaultMessage="Configure the inference task. Task types are specific to the service and model selected."
/>
</div>
<EuiSpacer size="m" />
Expand All @@ -135,18 +112,7 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);

return (
<EuiFormRow
id="taskType"
fullWidth
label={
<FormattedMessage
id="xpack.stackConnectors.components.inference.taskTypeLabel"
defaultMessage="Task type"
/>
}
isInvalid={isInvalid}
error={errorMessage}
>
<EuiFormRow id="taskType" fullWidth isInvalid={isInvalid} error={errorMessage}>
{isEdit || readOnly ? (
<EuiButton
css={{
Expand Down Expand Up @@ -186,23 +152,13 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
);
}}
</UseField>
<EuiSpacer size="s" />
<ConnectorConfigurationFormItems
itemsGrow={false}
isLoading={false}
direction="column"
items={taskTypeFormFields}
setConfigEntry={onSetTaskTypeConfigEntry}
/>
</>
) : null,
[
selectedTaskType,
config?.taskType,
config.taskType,
xsFontSize,
euiTheme.colors,
taskTypeFormFields,
onSetTaskTypeConfigEntry,
isEdit,
readOnly,
taskTypeOptions,
Expand Down Expand Up @@ -276,7 +232,7 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
) : null}

{taskTypeSettings}
<EuiHorizontalRule />
<EuiSpacer size="m" />
<EuiTitle size="xxs" data-test-subj="task-type-details-label">
<h4>
<FormattedMessage
Expand Down
27 changes: 8 additions & 19 deletions x-pack/plugins/stack_connectors/public/connector_types/inference/connector.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { render, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { createStartServicesMock } from '@kbn/triggers-actions-ui-plugin/public/common/lib/kibana/kibana_react.mock';
import { useProviders } from './providers/get_providers';
import { DisplayType, FieldType } from '../../../common/dynamic_config/types';
import { FieldType } from '../../../common/dynamic_config/types';

jest.mock('./providers/get_providers');

Expand Down Expand Up @@ -50,44 +50,37 @@ const providersSchemas = [
task_type: 'completion',
configuration: {
user: {
display: DisplayType.TEXTBOX,
label: 'User',
order: 1,
required: false,
sensitive: false,
tooltip: 'Specifies the user issuing the request.',
description: 'Specifies the user issuing the request.',
type: FieldType.STRING,
validations: [],
value: '',
ui_restrictions: [],
default_value: null,
depends_on: [],
},
},
},
],
configuration: {
api_key: {
display: DisplayType.TEXTBOX,
label: 'API Key',
order: 3,
required: true,
sensitive: true,
tooltip: `The OpenAI API authentication key. For more details about generating OpenAI API keys, refer to the https://platform.openai.com/account/api-keys.`,
description: `The OpenAI API authentication key. For more details about generating OpenAI API keys, refer to the https://platform.openai.com/account/api-keys.`,
type: FieldType.STRING,
validations: [],
value: null,
ui_restrictions: [],
default_value: null,
depends_on: [],
},
model_id: {
display: DisplayType.TEXTBOX,
label: 'Model ID',
order: 2,
required: true,
sensitive: false,
tooltip: 'The name of the model.',
description: 'The name of the model.',
type: FieldType.STRING,
validations: [],
value: null,
Expand All @@ -96,12 +89,11 @@ const providersSchemas = [
depends_on: [],
},
organization_id: {
display: DisplayType.TEXTBOX,
label: 'Organization ID',
order: 4,
required: false,
sensitive: false,
tooltip: '',
description: '',
type: FieldType.STRING,
validations: [],
value: null,
Expand All @@ -110,12 +102,11 @@ const providersSchemas = [
depends_on: [],
},
url: {
display: DisplayType.TEXTBOX,
label: 'URL',
order: 1,
required: true,
sensitive: false,
tooltip: '',
description: '',
type: FieldType.STRING,
validations: [],
value: null,
Expand All @@ -140,12 +131,11 @@ const providersSchemas = [
],
configuration: {
api_key: {
display: DisplayType.TEXTBOX,
label: 'API Key',
order: 1,
required: true,
sensitive: true,
tooltip: `API Key for the provider you're connecting to`,
description: `API Key for the provider you're connecting to`,
type: FieldType.STRING,
validations: [],
value: null,
Expand All @@ -154,12 +144,11 @@ const providersSchemas = [
depends_on: [],
},
model_id: {
display: DisplayType.TEXTBOX,
label: 'Model ID',
order: 2,
required: true,
sensitive: false,
tooltip: `ID of the LLM you're using`,
description: `ID of the LLM you're using`,
type: FieldType.STRING,
validations: [],
value: null,
Expand Down
Loading