feature: [UI kit] support new Inputs ( Issue #1881)

apps/ai-dial-admin/src/components/ActivityAudit/Modals/Confirmation.tsx

@@ -1,5 +1,5 @@
+import { AlertVariant, DialAlert, DialConfirmationPopup, DialInput } from '@epam/ai-dial-ui-kit';
 import { FC, useCallback, useState } from 'react';
-import { AlertVariant, DialAlert, DialConfirmationPopup, DialTextInputField } from '@epam/ai-dial-ui-kit';
 
 import { ButtonsI18nKey, RollbackI18nKey } from '@/src/constants/i18n';
 import { useI18n } from '@/src/locales/client';
@@ -43,9 +43,9 @@ const ConfirmationRollback: FC<Props> = ({ revisionDate, isModalOpen, onClose, o
         <div className="my-4">
           <DialAlert variant={AlertVariant.Error} message={t(RollbackI18nKey.ConfirmSystemRollbackAlert)} />
         </div>
-        <DialTextInputField
-          elementId="confirmationText"
-          fieldTitle={t(RollbackI18nKey.ConfirmSystemRollbackLabel)}
+        <DialInput
+          id="confirmationText"
+          labelProps={{ label: t(RollbackI18nKey.ConfirmSystemRollbackLabel), required: true }}
           placeholder={t(RollbackI18nKey.ConfirmSystemRollbackPlaceholder)}
           value={confirmation}
           onChange={onChangeConfirmation}

apps/ai-dial-admin/src/components/Adapter/Modals/DuplicateAdapter.tsx

@@ -63,13 +63,13 @@ const DuplicateAdapter: FC<Props> = ({ names, onDuplicate, isModalOpen, onClose,
       <div className="flex flex-col gap-y-8 px-6 py-4">
         <IdControl entity={entity} onChangeEntity={setEntity} names={names} />
 
-        <DisplayNameControl displayName={entity.displayName} onChange={onChangeDisplayName} required={true} />
+        <DisplayNameControl displayName={entity.displayName} onChange={onChangeDisplayName} required />
 
         <EndpointControl
           id="baseEndpoint"
-          required={true}
+          required
           placeholder={t(EntityPlaceholdersI18nKey.Endpoint)}
-          fieldTitle={t(EntityFieldsI18nKey.baseEndpoint)}
+          label={t(EntityFieldsI18nKey.baseEndpoint)}
           endpoint={entity.baseEndpoint}
           onChange={onChangeEndpoint}
         />

apps/ai-dial-admin/src/components/Adapter/View/Properties/Properties.tsx

@@ -56,16 +56,16 @@ const AdapterProperties: FC<Props> = ({ entity, names, onChangeAdapter, isModal
 
       <DisplayNameControl
         displayName={entity.displayName}
-        required={true}
+        required
         onChange={onChangeDisplayName}
         isFullWidth={isModal}
       />
 
       <DescriptionControl entity={entity} onChangeEntity={onChangeAdapter} isFullWidth={isModal} />
 
       <SourceField
-        elementId="sourceType"
-        fieldTitle={t(EntitiesI18nKey.SourceType)}
+        id="sourceType"
+        label={t(EntitiesI18nKey.SourceType)}
         view={ApplicationRoute.Adapters}
         entity={entity}
         onChange={onChangeAdapter}

apps/ai-dial-admin/src/components/ApplicationRunners/ConfigurationView/ExtendedProperties.tsx

@@ -1,17 +1,17 @@
 import { FC, useCallback } from 'react';
 
-import { DialSelectField, DialTextInputField, SelectOption } from '@epam/ai-dial-ui-kit';
+import { DialInput, DialSelectField, SelectOption } from '@epam/ai-dial-ui-kit';
 
 import CompletionEndpointControl from '@/src/components/BaseControls/Endpoint/CompletionEndpoint';
 import EditorUrlControl from '@/src/components/BaseControls/Endpoint/EditorUrl';
+import EndpointControl from '@/src/components/BaseControls/Endpoint/Endpoint';
 import ViewerUrlControl from '@/src/components/BaseControls/Endpoint/ViewerUrl';
 import IconControl from '@/src/components/BaseControls/Icon';
 import TopicsControl from '@/src/components/BaseControls/Topics';
 import { BasicI18nKey, EntityFieldsI18nKey, EntityPlaceholdersI18nKey } from '@/src/constants/i18n';
-import { useI18n } from '@/src/locales/client';
 import { STANDARD_CONTROL_WIDTH } from '@/src/constants/main-layout';
+import { useI18n } from '@/src/locales/client';
 import { DialApplicationScheme, TypeBucketCopy } from '@/src/models/dial/application';
-import EndpointControl from '@/src/components/BaseControls/Endpoint/Endpoint';
 
 interface Props {
   runner: DialApplicationScheme;
@@ -70,12 +70,11 @@ const AppRunnerExtendedProperties: FC<Props> = ({ runner, onChangeRunner }) => {
         }}
       />
 
-      <DialTextInputField
-        elementId="title"
-        fieldTitle={t(EntityFieldsI18nKey.title)}
+      <DialInput
+        id="title"
+        labelProps={{ label: t(EntityFieldsI18nKey.title) }}
         placeholder={t(EntityPlaceholdersI18nKey.Title)}
         value={runner.title}
-        optional={true}
         containerClassName={STANDARD_CONTROL_WIDTH}
         onChange={(title?: string) => {
           onChangeRunner({ ...runner, title });
@@ -84,13 +83,13 @@ const AppRunnerExtendedProperties: FC<Props> = ({ runner, onChangeRunner }) => {
 
       <DialSelectField
         value={runner['dial:applicationTypeBucketCopy'] || TypeBucketCopy.DISABLED}
-        elementId="typeCopy"
+        id="typeCopy"
         className="w-[180px]"
         childrenClassName="w-[180px]"
         containerClassName="w-[180px]"
         listClassName="w-[180px]"
         options={typeBucketCopy}
-        fieldTitle={t(EntityFieldsI18nKey['dial:applicationTypeBucketCopy'])}
+        label={t(EntityFieldsI18nKey['dial:applicationTypeBucketCopy'])}
         placeholder={t(EntityPlaceholdersI18nKey.TypeBucketCopy)}
         onChange={(type) => onChangeTypeCopyBucket(type as string)}
       />
@@ -99,14 +98,14 @@ const AppRunnerExtendedProperties: FC<Props> = ({ runner, onChangeRunner }) => {
       <CompletionEndpointControl
         endpoint={runner['dial:applicationTypeCompletionEndpoint']}
         onChange={onChangeCompletionEndPoint}
-        required={true}
+        required
       />
 
       <ViewerUrlControl endpoint={runner['dial:applicationTypeViewerUrl']} onChange={onChangeViewerUrl} />
       <EditorUrlControl endpoint={runner['dial:applicationTypeEditorUrl']} onChange={onChangeEditorUrl} />
       <EndpointControl
         id="applicationTypeSchemaEndpoint"
-        fieldTitle={t(EntityFieldsI18nKey['dial:applicationTypeSchemaEndpoint'])}
+        label={t(EntityFieldsI18nKey['dial:applicationTypeSchemaEndpoint'])}
         placeholder={t(EntityPlaceholdersI18nKey.Endpoint)}
         endpoint={runner['dial:applicationTypeSchemaEndpoint']}
         onChange={(endpoint) => onChange(endpoint, 'dial:applicationTypeSchemaEndpoint')}

apps/ai-dial-admin/src/components/ApplicationRunners/ConfigurationView/Features.tsx

@@ -34,7 +34,7 @@ const AppRunnerFeatures: FC<Props> = ({ runner, onChangeRunner }) => {
 
       <EndpointControl
         id="rateEndpoint"
-        fieldTitle={t(FeaturesI18nKey.rateEndpoint)}
+        label={t(FeaturesI18nKey.rateEndpoint)}
         placeholder={t(EntityPlaceholdersI18nKey.RateEndpoint)}
         endpoint={runner['dial:applicationTypeRateEndpoint']}
         onChange={(value?: string) => {
@@ -44,7 +44,7 @@ const AppRunnerFeatures: FC<Props> = ({ runner, onChangeRunner }) => {
 
       <EndpointControl
         id="tokenizeEndpoint"
-        fieldTitle={t(FeaturesI18nKey.tokenizeEndpoint)}
+        label={t(FeaturesI18nKey.tokenizeEndpoint)}
         placeholder={t(EntityPlaceholdersI18nKey.TokenizeEndpoint)}
         endpoint={runner['dial:applicationTypeTokenizeEndpoint']}
         onChange={(value?: string) => {
@@ -54,7 +54,7 @@ const AppRunnerFeatures: FC<Props> = ({ runner, onChangeRunner }) => {
 
       <EndpointControl
         id="promptEndpoint"
-        fieldTitle={t(FeaturesI18nKey.truncatePromptEndpoint)}
+        label={t(FeaturesI18nKey.truncatePromptEndpoint)}
         placeholder={t(EntityPlaceholdersI18nKey.TruncatePromptEndpoint)}
         endpoint={runner['dial:applicationTypeTruncatePromptEndpoint']}
         onChange={(value?: string) => {

apps/ai-dial-admin/src/components/ApplicationRunners/ConfigurationView/Properties.tsx

@@ -30,15 +30,15 @@ const SchemeProperties: FC<Props> = ({ names, runner, isImmutable, onChangeRunne
       {!isImmutable && (
         <IdControl
           names={names}
-          isUrlId={true}
+          isUrlId
           entity={{ name: runner.$id }}
           onChangeEntity={(entity) => onChangeId(entity.name)}
         />
       )}
 
       <DisplayNameControl
         displayName={runner['dial:applicationTypeDisplayName']}
-        required={true}
+        required
         isFullWidth={!isImmutable}
         onChange={(name?: string) => onChangeRunner({ ...runner, 'dial:applicationTypeDisplayName': name })}
       />
@@ -53,8 +53,8 @@ const SchemeProperties: FC<Props> = ({ names, runner, isImmutable, onChangeRunne
           onChange={(endpoint?: string) =>
             onChangeRunner({ ...runner, 'dial:applicationTypeCompletionEndpoint': endpoint })
           }
-          required={true}
-          isFullWidth={true}
+          required
+          isFullWidth
         />
       )}
     </div>

apps/ai-dial-admin/src/components/ApplicationRunners/ConfigurationView/tests/Properties.spec.tsx

@@ -1,47 +1,133 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, expect, test, vi } from 'vitest';
-import SchemeProperties from '../Properties';
-import { EntityFieldsI18nKey, EntityPlaceholdersI18nKey } from '@/src/constants/i18n';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
-describe('SchemeProperties', () => {
+import Properties from '../Properties';
+
+vi.mock('@/src/components/BaseControls/Id/Id', () => ({
+  default: ({ entity, onChangeEntity }: any) => (
+    <section aria-label="id-control">
+      <div>id:{entity?.name}</div>
+      <button type="button" onClick={() => onChangeEntity({ name: 'runner-updated' })}>
+        Change id
+      </button>
+    </section>
+  ),
+}));
+
+vi.mock('@/src/components/BaseControls/DisplayName', () => ({
+  default: ({ displayName, onChange }: any) => (
+    <section aria-label="display-name-control">
+      <div>display-name:{displayName}</div>
+      <button type="button" onClick={() => onChange('Updated display')}>
+        Change display name
+      </button>
+    </section>
+  ),
+}));
+
+vi.mock('@/src/components/BaseControls/Description', () => ({
+  default: ({ entity, onChangeEntity }: any) => (
+    <section aria-label="description-control">
+      <div>description:{entity?.description}</div>
+      <button type="button" onClick={() => onChangeEntity({ ...entity, description: 'Updated description' })}>
+        Change description
+      </button>
+    </section>
+  ),
+}));
+
+vi.mock('@/src/components/BaseControls/Endpoint/CompletionEndpoint', () => ({
+  default: ({ endpoint, onChange }: any) => (
+    <section aria-label="completion-endpoint-control">
+      <div>endpoint:{endpoint}</div>
+      <button type="button" onClick={() => onChange('https://updated.endpoint')}>
+        Change endpoint
+      </button>
+    </section>
+  ),
+}));
+
+vi.mock('../ExtendedProperties', () => ({
+  default: ({ runner }: any) => <section aria-label="extended-properties">extended:{runner?.$id}</section>,
+}));
+
+describe('ApplicationRunners :: ConfigurationView :: Properties', () => {
   const baseRunner = {
     $id: 'runner-1',
-    'dial:applicationTypeDisplayName': 'Runner Name',
-    description: 'desc',
-  };
-
-  test('renders all fields and handles changes', () => {
-    const onChangeRunner = vi.fn();
-    render(<SchemeProperties runner={baseRunner} onChangeRunner={onChangeRunner} />);
-    // ID field
-    expect(screen.getAllByLabelText(EntityFieldsI18nKey.id)[0]).toBeInTheDocument();
-    fireEvent.change(screen.getByPlaceholderText(EntityPlaceholdersI18nKey.Id), { target: { value: 'new-id' } });
-    expect(onChangeRunner).toHaveBeenCalledWith(expect.objectContaining({ $id: 'new-id' }));
-
-    // Name field
-    fireEvent.change(screen.getByPlaceholderText(EntityPlaceholdersI18nKey.DisplayName), {
-      target: { value: 'new name' },
+    description: 'Initial description',
+    'dial:applicationTypeDisplayName': 'Initial display',
+    'dial:applicationTypeCompletionEndpoint': 'https://initial.endpoint',
+  } as any;
+
+  const names = ['runner-1', 'runner-2'];
+  let onChangeRunner: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    onChangeRunner = vi.fn();
+  });
+
+  test('renders editable controls when runner is mutable', () => {
+    render(<Properties names={names} runner={baseRunner} onChangeRunner={onChangeRunner} />);
+
+    expect(screen.getByRole('region', { name: 'id-control' })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'display-name-control' })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'description-control' })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'completion-endpoint-control' })).toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: 'extended-properties' })).not.toBeInTheDocument();
+  });
+
+  test('renders immutable mode with extended properties only for immutable-specific sections', () => {
+    render(<Properties names={names} runner={baseRunner} isImmutable={true} onChangeRunner={onChangeRunner} />);
+
+    expect(screen.queryByRole('region', { name: 'id-control' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('region', { name: 'completion-endpoint-control' })).not.toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'extended-properties' })).toHaveTextContent('extended:runner-1');
+    expect(screen.getByRole('region', { name: 'display-name-control' })).toBeInTheDocument();
+    expect(screen.getByRole('region', { name: 'description-control' })).toBeInTheDocument();
+  });
+
+  test('updates runner id via IdControl callback', () => {
+    render(<Properties names={names} runner={baseRunner} onChangeRunner={onChangeRunner} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Change id' }));
+
+    expect(onChangeRunner).toHaveBeenCalledWith({
+      ...baseRunner,
+      $id: 'runner-updated',
     });
-    expect(onChangeRunner).toHaveBeenCalledWith(
-      expect.objectContaining({ 'dial:applicationTypeDisplayName': 'new name' }),
-    );
-
-    // Description field
-    expect(screen.getByText(EntityFieldsI18nKey.description)).toBeInTheDocument();
-    fireEvent.change(screen.getByPlaceholderText(EntityPlaceholdersI18nKey.Description), {
-      target: { value: 'new desc' },
+  });
+
+  test('updates display name via DisplayNameControl callback', () => {
+    render(<Properties names={names} runner={baseRunner} onChangeRunner={onChangeRunner} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Change display name' }));
+
+    expect(onChangeRunner).toHaveBeenCalledWith({
+      ...baseRunner,
+      'dial:applicationTypeDisplayName': 'Updated display',
     });
-    expect(onChangeRunner).toHaveBeenCalledWith(expect.objectContaining({ description: 'new desc' }));
   });
 
-  test('does not render id field if isImmutable', () => {
-    render(<SchemeProperties runner={baseRunner} isImmutable onChangeRunner={vi.fn()} />);
-    expect(screen.queryByLabelText(EntityFieldsI18nKey.id)).toBeNull();
+  test('updates description via DescriptionControl callback', () => {
+    render(<Properties names={names} runner={baseRunner} onChangeRunner={onChangeRunner} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Change description' }));
+
+    expect(onChangeRunner).toHaveBeenCalledWith({
+      ...baseRunner,
+      description: 'Updated description',
+    });
   });
 
-  test('renders AppRunnerExtendedProperties if isImmutable', () => {
-    render(<SchemeProperties runner={baseRunner} isImmutable onChangeRunner={vi.fn()} />);
-    // extended field
-    expect(screen.getByText(EntityFieldsI18nKey.topics)).toBeInTheDocument();
+  test('updates completion endpoint via CompletionEndpointControl callback', () => {
+    render(<Properties names={names} runner={baseRunner} onChangeRunner={onChangeRunner} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Change endpoint' }));
+
+    expect(onChangeRunner).toHaveBeenCalledWith({
+      ...baseRunner,
+      'dial:applicationTypeCompletionEndpoint': 'https://updated.endpoint',
+    });
   });
 });

apps/ai-dial-admin/src/components/ApplicationRunners/Modals/DuplicateAppRunner.tsx

@@ -69,7 +69,7 @@ const DuplicateScheme: FC<Props> = ({ names, onDuplicate, isModalOpen, onClose,
         <DisplayNameControl
           displayName={clonedEntity['dial:applicationTypeDisplayName']}
           onChange={onChangeName}
-          required={true}
+          required
         />
       </div>
     </DialFormPopup>

apps/ai-dial-admin/src/components/Assets/Apps/Properties.tsx

@@ -36,13 +36,13 @@ const ApplicationAssetProperties: FC<Props> = ({ asset, runners, onChange, isPub
       )}
       <DisplayNameControl
         displayName={asset.displayName}
-        required={true}
+        required
         isFullWidth={false}
         onChange={(displayName) => onChange({ ...asset, displayName })}
       />
       {isPublication && (
         <VersionControl
-          elementContainerClassName="w-[175px]"
+          className="w-[175px]"
           version={asset.version}
           onChange={(version?: string) =>
             onChange?.({ ...asset, version: version || '', displayVersion: version || '' })

apps/ai-dial-admin/src/components/Assets/Deployments/DuplicateAsset.tsx

@@ -117,7 +117,7 @@ const DuplicateAsset: FC<Props> = ({ view, isModalOpen, entity, versionsMap, con
           disabled={duplicationType === DuplicationTypes.VERSION}
         />
         {isDeploymentAsset(view) && (
-          <DisplayNameControl displayName={clonedAsset.displayName} onChange={onChangeName} required={true} />
+          <DisplayNameControl displayName={clonedAsset.displayName} onChange={onChangeName} required />
         )}
         <VersionControl version={clonedAsset.version} onChange={onChangeVersion} />
 

apps/ai-dial-admin/src/components/Assets/Files/constants.ts

@@ -4,5 +4,5 @@ import { ColDef } from 'ag-grid-community';
 export const FILES_GRID_COLUMNS: ColDef[] = [
   NAME_COLUMN('Display name') as ColDef,
   UPDATED_AT_COLUMN('Updated time') as ColDef,
-  SIZE_COLUMN('Size'),
+  SIZE_COLUMN('Size') as ColDef,
 ];