refactor

apps/app/src/components/PrivateLegacyPages.tsx

@@ -348,14 +348,14 @@ const PrivateLegacyPages = (): JSX.Element => {
     );
   }, [t, openConvertModalHandler]);
 
-  const searchControlAllAction = useMemo(() => {
+  const extraControls = useMemo(() => {
     const isCheckboxDisabled = hitsCount === 0;
 
     return (
-      <div className="search-control d-flex align-items-center">
-        <div className="d-flex ps-md-2">
+      <div className="d-flex align-items-center">
+        <div className="d-flex">
           <OperateAllControl
-            inputClassName="ms-2"
+            inputClassName="me-2"
             ref={selectAllControlRef}
             isCheckboxDisabled={isCheckboxDisabled}
             onCheckboxChanged={selectAllCheckboxChangedHandler}
@@ -392,10 +392,10 @@ const PrivateLegacyPages = (): JSX.Element => {
         isEnableFilter={false}
         initialSearchConditions={{ keyword: initQ, limit: INITIAL_PAGING_SIZE }}
         onSearchInvoked={searchInvokedHandler}
-        allControl={searchControlAllAction}
+        extraControls={extraControls}
       />
     );
-  }, [searchInvokedHandler, searchControlAllAction]);
+  }, [searchInvokedHandler, extraControls]);
 
   const searchResultListHead = useMemo(() => {
     if (data == null) {

apps/app/src/components/SearchPage.tsx

@@ -175,13 +175,13 @@ export const SearchPage = (): JSX.Element => {
 
   const hitsCount = data?.meta.hitsCount;
 
-  const toggleControl = useMemo(() => {
+  const extraControls = useMemo(() => {
     return (
       <NotAvailableForGuest>
         <NotAvailableForReadOnlyUser>
           <button
             type="button"
-            className={`${isCollapsed ? 'active' : ''} btn btn-muted-danger d-flex align-items-center`}
+            className={`${isCollapsed ? 'active' : ''} btn btn-muted-danger d-flex align-items-center ms-2`}
             aria-expanded="false"
             onClick={() => { setIsCollapsed(!isCollapsed) }}
           >
@@ -237,12 +237,12 @@ export const SearchPage = (): JSX.Element => {
         isEnableFilter
         initialSearchConditions={initialSearchConditions}
         onSearchInvoked={searchInvokedHandler}
-        toggleControl={toggleControl}
+        extraControls={extraControls}
         collapseContents={collapseContents}
         isCollapsed={isCollapsed}
       />
     );
-  }, [toggleControl, collapseContents, initialSearchConditions, isCollapsed, searchInvokedHandler]);
+  }, [extraControls, collapseContents, initialSearchConditions, isCollapsed, searchInvokedHandler]);
 
   const searchResultListHead = useMemo(() => {
     if (data == null) {

apps/app/src/components/SearchPage/SearchControl.tsx

@@ -21,7 +21,7 @@ type Props = {
 
   onSearchInvoked?: (keyword: string, configurations: Partial<ISearchConfigurations>) => void,
 
-  toggleControl: React.ReactNode,
+  extraControls: React.ReactNode,
 
   collapseContents?: React.ReactNode,
   isCollapsed?: boolean,
@@ -34,7 +34,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
     isEnableFilter,
     initialSearchConditions,
     onSearchInvoked,
-    toggleControl,
+    extraControls,
     collapseContents,
     isCollapsed,
   } = props;
@@ -153,11 +153,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
           </>
         )}
 
-        <div className="d-flex">
-          <div className="btn-group">
-            {toggleControl}
-          </div>
-        </div>
+        {extraControls}
       </div>
 
       { collapseContents != null && (