TSJR-314 - minor skills admin fixes

Author: vas3a

src/apps/admin/src/skills-manager/components/accordion/accordion-item/AccordionItem.module.scss

@@ -17,6 +17,10 @@
     margin-right: $sp-2;
 }
 
+.menuIcon {
+    color: $turq-120;
+}
+
 .titleBar {
     display: flex;
     align-items: center;

src/apps/admin/src/skills-manager/components/accordion/accordion-item/AccordionItem.tsx

@@ -47,7 +47,7 @@ const AccordionItem: FC<AccordionItemProps> = props => {
                             onAction={props.onMenuAction}
                             className={styles.menu}
                         >
-                            <IconOutline.DotsVerticalIcon className='icon-lg' />
+                            <IconOutline.DotsVerticalIcon className={classNames('icon-lg', styles.menuIcon)} />
                         </ActionsMenu>
                     )}
                 </div>

src/apps/admin/src/skills-manager/components/bulk-editor/archive-skills-modal/ArchiveSkillsModal.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 
 import { BaseModal, Button, LoadingSpinner } from '~/libs/ui'
 
@@ -29,6 +29,12 @@ const ArchiveSkillsModal: FC<ArchiveSkillsModalProps> = props => {
         props.onClose()
     }
 
+    useEffect(() => {
+        if (!props.skills.length) {
+            props.onClose.call(undefined)
+        }
+    }, [props.onClose, props.skills])
+
     return (
         <BaseModal
             onClose={props.onClose}

src/apps/admin/src/skills-manager/components/bulk-editor/move-skills-modal/MoveSkillsModal.tsx

@@ -1,10 +1,16 @@
-import { ChangeEvent, FC, useMemo, useState } from 'react'
+import { ChangeEvent, FC, useEffect, useMemo, useState } from 'react'
 import { noop } from 'lodash'
+import { toast } from 'react-toastify'
 
 import { BaseModal, Button, InputSelectReact, LoadingSpinner } from '~/libs/ui'
 
 import { SkillsManagerContextValue, useSkillsManagerContext } from '../../../context'
-import { bulkUpdateStandardizedSkills, StandardizedSkill } from '../../../services'
+import {
+    bulkUpdateStandardizedSkills,
+    saveStandardizedSkillCategory,
+    StandardizedSkill,
+    StandardizedSkillCategory,
+} from '../../../services'
 import { mapCategoryToSelectOption } from '../../../lib'
 import { SkillsList } from '../../skills-list'
 
@@ -21,6 +27,7 @@ const MoveSkillsModal: FC<MoveSkillsModalProps> = props => {
 
     const {
         bulkEditorCtx: context,
+        refetchCategories,
         categories,
     }: SkillsManagerContextValue = useSkillsManagerContext()
 
@@ -45,6 +52,26 @@ const MoveSkillsModal: FC<MoveSkillsModalProps> = props => {
         props.onClose()
     }
 
+    async function handleNewCategory(categoryName: string): Promise<void> {
+        setIsLoading(true)
+
+        const newCategory = await saveStandardizedSkillCategory(
+            { description: ' ', name: categoryName } as StandardizedSkillCategory,
+        )
+
+        refetchCategories()
+
+        setCategoryId(newCategory.id)
+        toast.success(`Category with name '${categoryName}' created!`)
+        setIsLoading(false)
+    }
+
+    useEffect(() => {
+        if (!props.skills.length) {
+            props.onClose.call(undefined)
+        }
+    }, [props.onClose, props.skills])
+
     return (
         <BaseModal
             onClose={props.onClose}
@@ -91,12 +118,16 @@ const MoveSkillsModal: FC<MoveSkillsModalProps> = props => {
                     <h2>To:</h2>
                 </div>
                 <InputSelectReact
+                    creatable
                     label='Skill Category'
                     placeholder='Select category'
                     options={categoryOptions}
-                    value={categoryId}
-                    name='to'
+                    name='categoryTo'
                     onChange={handleCategoryChange}
+                    createLabel={function label(v: string) { return `Create new category "${v}"` }}
+                    onCreateOption={handleNewCategory}
+                    value={categoryId}
+                    tabIndex={0}
                 />
             </div>
 

src/apps/admin/src/skills-manager/components/bulk-editor/replace-skills-modal/ReplaceSkillsModal.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, useState } from 'react'
+import { ChangeEvent, FC, useEffect, useState } from 'react'
 import { find } from 'lodash'
 
 import { BaseModal, Button, InputRadio, LoadingSpinner } from '~/libs/ui'
@@ -50,6 +50,12 @@ const ReplaceSkillsModal: FC<ReplaceSkillsModalProps> = props => {
         setType(t)
     }
 
+    useEffect(() => {
+        if (!props.skills.length) {
+            props.onClose.call(undefined)
+        }
+    }, [props.onClose, props.skills])
+
     return (
         <BaseModal
             onClose={props.onClose}

src/apps/admin/src/skills-manager/components/category-modal/CategoryModal.tsx

@@ -57,7 +57,7 @@ const CategoryModal: FC<CategoryModalProps> = props => {
                 toast.success(`Category ${props.category.name} archived successfully!`)
             })
             .catch((e: any) => {
-                setError(e.message)
+                setError((e.message ?? '').replace(/with id [a-z0-9-]+/i, ''))
                 setLoading(false)
                 return Promise.reject(e)
             })

src/apps/admin/src/skills-manager/components/category-modal/category-form.config.ts

@@ -1,4 +1,4 @@
-import { find } from 'lodash'
+import { escapeRegExp } from 'lodash'
 
 import { customValidatorRequired, FormDefinition, InputValue } from '~/libs/ui'
 
@@ -16,7 +16,8 @@ export const validateUniqueCategoryName = (
     category: StandardizedSkillCategory,
 ) => (
     (value: InputValue): string | undefined => {
-        const match = find(categories, { name: value }) as StandardizedSkillCategory | undefined
+        const filterRegex = new RegExp(`^${escapeRegExp((value as string || '').trim())}$`, 'i')
+        const match = categories.find(cat => filterRegex.test(cat.name))
         return match && match.id !== category.id
             ? 'A category with the same name already exists!' : undefined
     }

src/apps/admin/src/skills-manager/components/skill-modals/SkillModal.tsx

@@ -61,7 +61,7 @@ const SkillModal: FC<SkillModalProps> = props => {
     }, [props.skill.id, refetchSkills, setEditSkill, action])
 
     const addAnother = useCallback(async (): Promise<void> => {
-        setTimeout(setEditSkill, 100, {} as StandardizedSkill)
+        setTimeout(setEditSkill, 750, {} as StandardizedSkill)
     }, [setEditSkill])
 
     const archiveSkill = useCallback(async (): Promise<void> => {
@@ -95,7 +95,7 @@ const SkillModal: FC<SkillModalProps> = props => {
             .then(() => {
                 refetchSkills()
                 setEditSkill()
-                toast.success(`Skill ${props.skill.name} archived successfully!`)
+                toast.success(`Skill ${props.skill.name} restored successfully!`)
             })
             .catch((e: any) => {
                 setIsLoading(false)

src/apps/admin/src/skills-manager/components/skill-modals/skill-form/SkillForm.tsx

@@ -1,5 +1,5 @@
 import { ChangeEvent, FC, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
-import { find, pick } from 'lodash'
+import { escapeRegExp, pick } from 'lodash'
 import { toast } from 'react-toastify'
 
 import { Button, FormInputAutocompleteOption, InputSelectReact, InputText, InputTextarea } from '~/libs/ui'
@@ -67,8 +67,10 @@ const SkillForm: FC<SkillFormProps> = props => {
     function validateName(): void {
         const name = formValue.name?.trim() ?? ''
         const isValid = name.length > 0
-        const similarSkill = find(skillsList, { name })
-        const isDuplicate = similarSkill && similarSkill.id !== props.skill?.id
+        const filterRegex = new RegExp(`^${escapeRegExp(name)}$`, 'i')
+        const similarSkill = skillsList.find(skill => filterRegex.test(skill.name))
+        const isDuplicate = !!similarSkill && similarSkill.id !== props.skill?.id
+
         const error = !isValid ? 'Skill name is required!' : (
             isDuplicate ? 'A skill with the same name already exists!' : undefined
         )

src/libs/ui/lib/components/form/form-groups/form-input/input-textarea/InputTextarea.tsx

@@ -35,7 +35,7 @@ const InputTextarea: FC<InputTextareaProps> = (props: InputTextareaProps) => (
         <textarea
             autoComplete={props.autocomplete}
             className={styles['form-input-textarea']}
-            defaultValue={props.value}
+            value={props.value ?? ''}
             disabled={!!props.disabled}
             name={props.name}
             onBlur={props.onBlur}