fix(FOROME-1313): validation for creating presets (#799)

* fix(FOROME-1313): validation for creating presets

* fix(FOROME-1313): get rid of useless hook

src/components/solution-control/solution-create-dialog/solution-create-dialog.tsx

@@ -1,9 +1,10 @@
-import { ReactElement, useEffect, useMemo, useState } from 'react'
+import { ReactElement, useEffect, useState } from 'react'
 
 import { t } from '@i18n'
 import { Dialog } from '@ui/dialog'
 import { Input } from '@ui/input'
 import { ISolutionEntryDescription } from '@service-providers/common'
+import { validatePresetName } from '@utils/validation/validatePresetName'
 
 interface ISolutionCreateDialogProps {
   solutions: ISolutionEntryDescription[] | undefined
@@ -21,23 +22,36 @@ export const SolutionCreateDialog = ({
   onCreate,
 }: ISolutionCreateDialogProps): ReactElement => {
   const [solutionName, setSolutionName] = useState('')
+  const [isValidationError, setIsValidationError] = useState(false)
+  const [isSameNameError, setIsSameNameError] = useState(false)
 
-  const error = useMemo(
-    () => solutions?.some(solution => solution.name === solutionName),
-    [solutionName, solutions],
-  )
+  const hasError = isValidationError || isSameNameError
+  const errorText = isValidationError
+    ? t('filter.notValidName')
+    : t('solutionControl.createDialog.solutionNameAlreadyExists', {
+        controlName,
+        solutionName,
+      })
 
   useEffect(() => {
     !isOpen && setSolutionName('')
   }, [isOpen])
 
+  useEffect(() => {
+    const isValid = !solutionName.length || validatePresetName(solutionName)
+    setIsValidationError(!isValid)
+    setIsSameNameError(
+      !!solutions?.some(solution => solution.name === solutionName),
+    )
+  }, [solutionName, solutions])
+
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
       title={t('solutionControl.createDialog.title', { controlName })}
       applyText={t('general.create')}
-      isApplyDisabled={error || !solutionName}
+      isApplyDisabled={hasError || !solutionName}
       onApply={() => onCreate(solutionName)}
     >
       <Input
@@ -48,13 +62,8 @@ export const SolutionCreateDialog = ({
         })}
         onChange={event => setSolutionName(event.target.value)}
       />
-      {error && (
-        <div className="text-red-secondary text-12">
-          {t('solutionControl.createDialog.solutionNameAlreadyExists', {
-            controlName,
-            solutionName,
-          })}
-        </div>
+      {hasError && (
+        <div className="text-red-secondary text-12">{errorText}</div>
       )}
     </Dialog>
   )