impl validation feedback

apps/app/src/components/ItemsTree/ItemsTree.module.scss

@@ -3,7 +3,7 @@
 // fix height
 .items-tree :global {
   li {
-    height: items-tree-variables.$list-item-height;
+    min-height: items-tree-variables.$list-item-height;
   }
 }
 

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -13,7 +13,6 @@ import { useDrag, useDrop } from 'react-dnd';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { toastWarning, toastError } from '~/client/util/toastr';
-import { AlertType } from '~/client/util/use-input-validator';
 import type { IPageForItem } from '~/interfaces/page';
 import { mutatePageTree, useSWRxPageChildren } from '~/stores/page-listing';
 import loggerFactory from '~/utils/logger';
@@ -64,7 +63,7 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
   const { mutate: mutateChildren } = useSWRxPageChildren(isOpen ? page._id : null);
 
   const {
-    showRenameInput, validationResult, Control, RenameInput,
+    showRenameInput, Control, RenameInput,
   } = usePageItemControl();
   const { isProcessingSubmission, Input: NewPageInput, CreateButton: NewPageCreateButton } = useNewPageInput();
 
@@ -183,23 +182,6 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
 
   const mainClassName = `${isOver ? 'grw-pagetree-is-over' : ''} ${shouldHide ? 'd-none' : ''}`;
 
-  const ValidationResult = useCallback(() => {
-    if (validationResult == null) return <></>;
-
-    const {
-      type, typeLabel, message,
-    } = validationResult;
-
-    return (
-      <div
-        className={`mt-1 alert ${type === AlertType.ERROR ? 'text-danger' : 'text-warning'}`}
-        role="alert"
-      >
-        {typeLabel}: {message}
-      </div>
-    );
-  }, [validationResult]);
-
   return (
     <TreeItemLayout
       targetPathOrId={props.targetPathOrId}
@@ -217,7 +199,7 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
       mainClassName={mainClassName}
       customEndComponents={[CountBadgeForPageTreeItem]}
       customHoveredEndComponents={[Control, NewPageCreateButton]}
-      customNextComponents={[ValidationResult, NewPageInput]}
+      customNextComponents={[NewPageInput]}
       customNextToChildrenComponents={[() => <CreatingNewPageSpinner show={isProcessingSubmission} />]}
       showAlternativeContent={showRenameInput}
       customAlternativeComponents={[RenameInput]}

apps/app/src/components/Sidebar/PageTreeItem/use-page-item-control.tsx

@@ -32,14 +32,12 @@ type UsePageItemControl = {
   Control: FC<TreeItemToolProps>,
   RenameInput: FC<TreeItemToolProps>,
   showRenameInput: boolean,
-  validationResult?: InputValidationResult,
 }
 
 export const usePageItemControl = (): UsePageItemControl => {
   const { t } = useTranslation();
 
   const [showRenameInput, setShowRenameInput] = useState(false);
-  const [validationResult, setValidationResult] = useState<InputValidationResult>();
 
 
   const Control: FC<TreeItemToolProps> = (props) => {
@@ -146,6 +144,9 @@ export const usePageItemControl = (): UsePageItemControl => {
     const parentRef = useRef<HTMLDivElement>(null);
     const [parentRect] = useRect(parentRef);
 
+    const [validationResult, setValidationResult] = useState<InputValidationResult>();
+
+
     const inputValidator = useInputValidator(ValidationTarget.PAGE);
 
     const changeHandler = useCallback(async(e: ChangeEvent<HTMLInputElement>) => {
@@ -195,21 +196,36 @@ export const usePageItemControl = (): UsePageItemControl => {
     }, [cancel, onRenamed, page._id, page.path, page.revision]);
 
 
+    if (!showRenameInput) {
+      return <></>;
+    }
+
     const renameInputContainerClass = renameInputStyles['rename-input-container'] ?? '';
-    const maxWidth = (parentRect?.width ?? 0) - 12 * 2; // calculate the max-width minus the padding (12px * 2) because AutosizeInput has "box-sizing: content-box;"
+    const isInvalid = validationResult != null;
+
+    const maxWidth = (parentRect?.width ?? 0)
+      - 12 * 2 // minus the padding (12px * 2) because AutosizeInput has "box-sizing: content-box;"
+      - (isInvalid ? 24 : 0); // minus the width for the exclamation icon
+
 
     return (
       <div ref={parentRef} className={`${renameInputContainerClass}`}>
         <AutosizeSubmittableInput
           value={nodePath.basename(page.path ?? '')}
-          inputClassName="form-control"
+          inputClassName={`form-control ${isInvalid ? 'is-invalid' : ''}`}
           inputStyle={{ maxWidth }}
           placeholder={t('Input page name')}
+          aria-describedby={isInvalid ? 'rename-feedback' : undefined}
           onChange={changeHandlerDebounced}
           onSubmit={rename}
           onCancel={cancel}
           autoFocus
         />
+        { isInvalid && (
+          <div id="rename-feedback" className="invalid-feedback d-block my-1">
+            {validationResult.message}
+          </div>
+        ) }
       </div>
     );
   };
@@ -219,7 +235,6 @@ export const usePageItemControl = (): UsePageItemControl => {
     Control,
     RenameInput,
     showRenameInput,
-    validationResult,
   };
 
 };