[Inference Connector] Changed UI/UX due to the new RFC for the _infer…

…ence/_service (elastic#203363) Related RFC https://docs.google.com/document/d/1DbWpqEKM-MJR2cSJNKLC7RcCNXXQ-_iUShsXKRFKXfk/edit?tab=t.0 ## Summary - removed Task Settings from the UI and schema definition, due to the discussion on Inference sync Dec 5th. - renamed provider to service - added name and description, use name for the service selector user friendly way - dropped options and display type dropdown select, use freeform text input instead - dropped `display` field type, renamed `tooltip` to the `description`. Properly updated `ConnectorConfigurationFormItems` in `x-pack/plugins/stack_connectors/public/connector_types/lib/dynamic_config/connector_configuration_form_items.tsx` UI with the updates: <img width="1281" alt="Screenshot 2024-12-08 at 10 09 52 PM" src="https://github.com/user-attachments/assets/fdb17dd4-c8e4-496b-85e7-03c363546b8e"> --------- Co-authored-by: Ying <[email protected]>
shahzad31 · Dec 13, 2024 · 5b10845 · 5b10845
1 parent 6c61ded
commit 5b10845
Show file tree

Hide file tree

Showing 15 changed files with 1,915 additions and 548 deletions.
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -45152,7 +45152,6 @@
     "xpack.stackConnectors.components.inference.taskTypeDetailsLabel": "Paramètres des tâches",
     "xpack.stackConnectors.components.inference.taskTypeFieldLabel": "Type de tâche",
     "xpack.stackConnectors.components.inference.taskTypeHelpLabel": "Configurer la tâche d'inférence. Ces paramètres sont spécifiques au service et au modèle sélectionnés.",
-    "xpack.stackConnectors.components.inference.taskTypeLabel": "Type de tâche",
     "xpack.stackConnectors.components.inference.unableToFindProvidersQueryMessage": "Impossible de trouver des fournisseurs",
     "xpack.stackConnectors.components.jira.apiTokenTextFieldLabel": "Token d'API",
     "xpack.stackConnectors.components.jira.apiUrlTextFieldLabel": "URL",

diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -45002,7 +45002,6 @@
     "xpack.stackConnectors.components.inference.taskTypeDetailsLabel": "タスク設定",
     "xpack.stackConnectors.components.inference.taskTypeFieldLabel": "タスクタイプ",
     "xpack.stackConnectors.components.inference.taskTypeHelpLabel": "推論タスクを構成します。これらの設定は、選択したサービスおよびモデルに固有です。",
-    "xpack.stackConnectors.components.inference.taskTypeLabel": "タスクタイプ",
     "xpack.stackConnectors.components.inference.unableToFindProvidersQueryMessage": "プロバイダーが見つかりません",
     "xpack.stackConnectors.components.jira.apiTokenTextFieldLabel": "APIトークン",
     "xpack.stackConnectors.components.jira.apiUrlTextFieldLabel": "URL",

diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -44333,7 +44333,6 @@
     "xpack.stackConnectors.components.inference.taskTypeDetailsLabel": "任务设置",
     "xpack.stackConnectors.components.inference.taskTypeFieldLabel": "任务类型",
     "xpack.stackConnectors.components.inference.taskTypeHelpLabel": "配置推理任务。这些设置特定于选定服务和模型。",
-    "xpack.stackConnectors.components.inference.taskTypeLabel": "任务类型",
     "xpack.stackConnectors.components.inference.unableToFindProvidersQueryMessage": "找不到提供商",
     "xpack.stackConnectors.components.jira.apiTokenTextFieldLabel": "API 令牌",
     "xpack.stackConnectors.components.jira.apiUrlTextFieldLabel": "URL",

diff --git a/x-pack/plugins/stack_connectors/common/dynamic_config/types.ts b/x-pack/plugins/stack_connectors/common/dynamic_config/types.ts
@@ -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;
@@ -28,7 +19,6 @@ export interface Dependency {
 export enum FieldType {
   STRING = 'str',
   INTEGER = 'int',
-  LIST = 'list',
   BOOLEAN = 'bool',
 }
 
@@ -44,21 +34,13 @@ export interface Validation {
 }
 
 export interface ConfigProperties {
-  category?: string;
   default_value: string | number | boolean | null;
-  depends_on: Dependency[];
-  display: DisplayType;
+  description: string | null;
   label: string;
-  options?: SelectOption[];
-  order?: number | null;
-  placeholder?: string;
   required: boolean;
   sensitive: boolean;
-  tooltip: string | null;
+  updatable: boolean;
   type: FieldType;
-  ui_restrictions: string[];
-  validations: Validation[];
-  value: string | number | boolean | null;
 }
 
 interface ConfigEntry extends ConfigProperties {
@@ -68,4 +50,5 @@ interface ConfigEntry extends ConfigProperties {
 export interface ConfigEntryView extends ConfigEntry {
   isValid: boolean;
   validationErrors: string[];
+  value: string | number | boolean | null;
 }
diff --git a/x-pack/plugins/stack_connectors/common/inference/types.ts b/x-pack/plugins/stack_connectors/common/inference/types.ts
@@ -40,14 +40,10 @@ 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;
+  name: string;
+  task_types: string[];
   logo?: string;
-  configuration: FieldsConfiguration;
+  configurations: FieldsConfiguration;
 }
diff --git a/...k/plugins/stack_connectors/public/connector_types/inference/additional_options_fields.tsx b/...k/plugins/stack_connectors/public/connector_types/inference/additional_options_fields.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { css } from '@emotion/react';
 
 import {
@@ -18,7 +18,6 @@ import {
   EuiTextColor,
   EuiButtonGroup,
   EuiPanel,
-  EuiHorizontalRule,
   EuiButtonEmpty,
   EuiCopy,
   EuiButton,
@@ -55,7 +54,6 @@ interface AdditionalOptionsConnectorFieldsProps {
   onTaskTypeOptionsSelect: (taskType: string, provider?: string) => void;
   selectedTaskType?: string;
   taskTypeFormFields: ConfigEntryView[];
-  taskTypeSchema: ConfigEntryView[];
   taskTypeOptions: TaskTypeOption[];
 }
 
@@ -65,35 +63,13 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
   isEdit,
   taskTypeOptions,
   optionalProviderFormFields,
-  taskTypeFormFields,
-  taskTypeSchema,
   selectedTaskType,
   onSetProviderConfigEntry,
   onTaskTypeOptionsSelect,
 }) => {
   const xsFontSize = useEuiFontSize('xs').fontSize;
   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 { setFieldValue } = useFormContext();
 
   const taskTypeSettings = useMemo(
     () =>
@@ -103,7 +79,7 @@ export const AdditionalOptionsConnectorFields: React.FC<AdditionalOptionsConnect
             <h4>
               <FormattedMessage
                 id="xpack.stackConnectors.components.inference.taskTypeDetailsLabel"
-                defaultMessage="Task settings"
+                defaultMessage="Task type"
               />
             </h4>
           </EuiTitle>
@@ -116,7 +92,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" />
@@ -135,18 +111,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={{
@@ -186,23 +151,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,
@@ -276,7 +231,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