chore: add Version control for version field

Author: PolinaGurinovich97

apps/ai-dial-admin/src/components/EntityMainProperties/BaseProperties/Version.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+
+import { EntityFieldsI18nKey, EntityPlaceholdersI18nKey } from '@/src/constants/i18n';
+import { useI18n } from '@/src/locales/client';
+import { TextInputField } from '@/src/components/Common/InputField/InputField';
+
+interface Props {
+  version?: string;
+  readonly?: boolean;
+  disabled?: boolean;
+  onChange?: (version: string) => void;
+}
+
+const VersionControl: FC<Props> = ({ version, ...props }) => {
+  const t = useI18n() as (t: string) => string;
+
+  return (
+    <TextInputField
+      elementId="displayVersion"
+      fieldTitle={t(EntityFieldsI18nKey.displayVersion)}
+      placeholder={t(EntityPlaceholdersI18nKey.Version)}
+      value={version}
+      {...props}
+    />
+  );
+};
+
+export default VersionControl;

apps/ai-dial-admin/src/components/PromptView/Modals/DuplicatePrompt.tsx

@@ -1,27 +1,27 @@
 import { FC, useCallback, useEffect, useState } from 'react';
 
 import Button from '@/src/components/Common/Button/Button';
-import { TextInputField } from '@/src/components/Common/InputField/InputField';
+import FilePath from '@/src/components/Common/FilePath/FilePath';
+import Popup from '@/src/components/Common/Popup/Popup';
+import RadioField from '@/src/components/Common/RadioField/RadioField';
+import DisplayNameControl from '@/src/components/EntityMainProperties/BaseProperties/DisplayName';
+import VersionControl from '@/src/components/EntityMainProperties/BaseProperties/Version';
 import {
   BasicI18nKey,
   ButtonsI18nKey,
   DuplicateI18nKey,
-  EntityFieldsI18nKey,
   EntityPlaceholdersI18nKey,
   FoldersI18nKey,
   PromptsI18nKey,
 } from '@/src/constants/i18n';
+import { usePromptFolder } from '@/src/context/PromptFolderContext';
 import { useI18n } from '@/src/locales/client';
-import { PopUpState } from '@/src/types/pop-up';
 import { DialPrompt } from '@/src/models/dial/prompt';
-import { checkNameVersionCombination, getInitialVersion } from '@/src/utils/prompts/versions';
 import { RadioButtonModel } from '@/src/models/radio-button';
-import { RadioFieldOrientation } from '@/src/types/radio-orientation';
+import { PopUpState } from '@/src/types/pop-up';
 import { DuplicationTypes } from '@/src/types/prompt';
-import Popup from '@/src/components/Common/Popup/Popup';
-import RadioField from '@/src/components/Common/RadioField/RadioField';
-import FilePath from '@/src/components/Common/FilePath/FilePath';
-import { usePromptFolder } from '@/src/context/PromptFolderContext';
+import { RadioFieldOrientation } from '@/src/types/radio-orientation';
+import { checkNameVersionCombination, getInitialVersion } from '@/src/utils/prompts/versions';
 
 interface Props {
   modalState: PopUpState;
@@ -100,21 +100,13 @@ const DuplicatePrompt: FC<Props> = ({ modalState, entity, versionsMap, onDuplica
           orientation={RadioFieldOrientation.Column}
           onChange={onChangeDuplicationType}
         />
-        <TextInputField
-          fieldTitle={t(EntityFieldsI18nKey.displayName)}
-          placeholder={t(EntityPlaceholdersI18nKey.DisplayName)}
-          elementId="name"
-          value={clonedPrompt.name}
+        <DisplayNameControl
+          displayName={clonedPrompt.name}
           onChange={onChangeName}
           disabled={duplicationType === DuplicationTypes.VERSION}
         />
-        <TextInputField
-          fieldTitle={t(EntityFieldsI18nKey.displayVersion)}
-          placeholder={t(EntityPlaceholdersI18nKey.Version)}
-          elementId="version"
-          value={clonedPrompt.version}
-          onChange={onChangeVersion}
-        />
+        <VersionControl version={clonedPrompt.version} onChange={onChangeVersion} />
+
         {duplicationType === DuplicationTypes.PROMPT && (
           <FilePath
             value={clonedPrompt.folderId}

apps/ai-dial-admin/src/components/PromptView/PromptProperties.tsx

@@ -32,6 +32,7 @@ import { ApplicationRoute } from '@/src/types/routes';
 import { formatDateTimeToLocalString } from '@/src/utils/formatting/date';
 import { modifyNameVersionInPrompt } from '@/src/utils/prompts/versions';
 import DescriptionControl from '@/src/components/EntityMainProperties/BaseProperties/Description';
+import VersionControl from '@/src/components/EntityMainProperties/BaseProperties/Version';
 
 interface Props {
   prompt: DialPrompt;
@@ -185,12 +186,7 @@ const PromptProperties: FC<Props> = ({
         <div className="flex flex-col gap-6 pr-6">
           <div className="w-[105px]">
             {isImmutable ? (
-              <TextInputField
-                elementId="version"
-                fieldTitle={t(EntityFieldsI18nKey.displayVersion)}
-                value={prompt.version}
-                disabled={isImmutable}
-              />
+              <VersionControl version={prompt.version} disabled={isImmutable} />
             ) : (
               <DropdownField
                 elementCssClass="lg:w-[35%]"