Merge pull request #4922 from weseek/imprv/83432-ClosableTextInput-alert

Imprv/83432 closable text input alert

packages/app/src/components/Common/ClosableTextInput.tsx

@@ -74,13 +74,25 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
   });
 
 
-  // TODO: improve style
+  const AlertInfo = () => {
+    if (currentAlertInfo == null) {
+      return <></>;
+    }
+
+    const alertType = currentAlertInfo.type != null ? currentAlertInfo.type : AlertType.ERROR;
+    const alertMessage = currentAlertInfo.message != null ? currentAlertInfo.message : 'Invalid value';
+    return (
+      <p className="text-danger text-center mt-1">{alertType}: {alertMessage}</p>
+    );
+  };
+
+
   return (
     <div className={props.isShown ? 'd-block' : 'd-none'}>
       <input
         ref={inputRef}
         type="text"
-        className="form-control"
+        className="form-control mt-1"
         placeholder={props.placeholder}
         name="input"
         onChange={onChangeHandler}
@@ -88,14 +100,7 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
         onBlur={onBlurHandler}
         autoFocus={false}
       />
-      <div>
-        {currentAlertInfo != null && (
-          <p>
-            {/* eslint-disable-next-line max-len */}
-            {currentAlertInfo.type != null ? currentAlertInfo.type : AlertType.ERROR}: {currentAlertInfo.message != null ? currentAlertInfo.message : 'Invalid value' }
-          </p>
-        )}
-      </div>
+      <AlertInfo />
     </div>
   );
 });

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -4,6 +4,7 @@ import React, {
 import nodePath from 'path';
 import { useTranslation } from 'react-i18next';
 import { pagePathUtils } from '@growi/core';
+import { toastWarning } from '~/client/util/apiNotification';
 
 import { ItemNode } from './ItemNode';
 import { IPageHasId } from '~/interfaces/page';
@@ -148,7 +149,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   // TODO: go to create page page
   const onPressEnterHandler = () => {
-    console.log('Enter key was pressed!');
+    toastWarning(t('search_result.currently_not_implemented'));
   };
 
   // didMount