Merge pull request #4873 from weseek/feat/82892-fix-warnings-in-search-page

Feat/82892 fix warnings in search page

packages/app/src/client/app.jsx

@@ -96,10 +96,6 @@ Object.assign(componentMappings, {
   'trash-page-list': <TrashPageList />,
 
   'not-found-page': <NotFoundPage />,
-  'not-found-alert': <NotFoundAlert
-    isGuestUserMode={appContainer.isGuestUser}
-    isHidden={pageContainer.state.isNotCreatable || pageContainer.state.isTrashPage}
-  />,
 
   'forbidden-page': <ForbiddenPage />,
 
@@ -128,6 +124,10 @@ if (pageContainer.state.pageId != null) {
 
     'recent-created-icon': <RecentlyCreatedIcon />,
     'user-bookmark-icon': <BookmarkIcon />,
+    'not-found-alert': <NotFoundAlert
+      isGuestUserMode={appContainer.isGuestUser}
+      isHidden={pageContainer.state.isNotCreatable || pageContainer.state.isTrashPage}
+    />,
   });
 
   // show the Page accessory modal when query of "compare" is requested

packages/app/src/components/PageDeleteModal.tsx

@@ -154,7 +154,7 @@ const PageDeleteModal: FC<Props> = (props: Props) => {
           {/* Todo: change the way to show path on modal when too many pages are selected */}
           {/* https://redmine.weseek.co.jp/issues/82787 */}
           {pages.map((page) => {
-            return <div><code>{ page.path }</code></div>;
+            return <div key={page.pageId}><code>{ page.path }</code></div>;
           })}
         </div>
         {renderDeleteRecursivelyForm()}

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -49,9 +49,14 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
                 <div className="input-group-prepend">
                   <label className="input-group-text text-secondary" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
                 </div>
-                <select className="custom-select" id="inputGroupSelect01" onChange={(e) => { props.onPagingLimitChanged(Number(e.target.value)) }}>
+                <select
+                  defaultValue={props.pagingLimit}
+                  className="custom-select"
+                  id="inputGroupSelect01"
+                  onChange={(e) => { props.onPagingLimitChanged(Number(e.target.value)) }}
+                >
                   {[20, 50, 100, 200].map((limit) => {
-                    return <option selected={limit === props.pagingLimit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
+                    return <option key={limit} value={limit}>{limit}{t('search_result.page_number_unit')}</option>;
                   })}
                 </select>
               </div>

packages/app/src/components/SearchPage/SortControl.tsx

@@ -50,6 +50,7 @@ const SortControl: FC <Props> = (props: Props) => {
               const nextOrder = (props.sort !== sortAxis || props.order === ASC) ? DESC : ASC;
               return (
                 <button
+                  key={sortAxis}
                   className="dropdown-item d-flex justify-content-between"
                   type="button"
                   onClick={() => { onClickChangeSort(sortAxis, nextOrder) }}

packages/ui/src/components/User/UserPicture.jsx

@@ -38,8 +38,10 @@ export class UserPicture extends React.Component {
   RootElmWithLink = (props) => {
     const { user } = this.props;
     const href = userPageRoot(user);
-
-    return <a href={href} {...props}>{props.children}</a>;
+    // Using <span> tag here instead of <a> tag because UserPicture is used in SearchResultList which is essentially a anchor tag.
+    // Nested anchor tags causes a warning.
+    // https://stackoverflow.com/questions/13052598/creating-anchor-tag-inside-anchor-taga
+    return <span onClick={() => { window.location.href = href }} {...props}>{props.children}</span>;
   }
 
   withTooltip = (RootElm) => {