Merge remote-tracking branch 'origin/dev' into dev

components/common/Pager.js

@@ -1,7 +1,9 @@
 import styles from './Pager.module.css';
 import { Button, Flexbox, Icon, Icons } from 'react-basics';
+import useMessages from 'hooks/useMessages';
 
-export function Pager({ page, pageSize, count, onPageChange, onPageSizeChange }) {
+export function Pager({ page, pageSize, count, onPageChange }) {
+  const { formatMessage, labels } = useMessages();
   const maxPage = Math.ceil(count / pageSize);
   const lastPage = page === maxPage;
   const firstPage = page === 1;
@@ -24,7 +26,9 @@ export function Pager({ page, pageSize, count, onPageChange, onPageSizeChange })
           <Icons.ChevronDown />
         </Icon>
       </Button>
-      <Flexbox alignItems="center" className={styles.text}>{`Page ${page} of ${maxPage}`}</Flexbox>
+      <Flexbox alignItems="center" className={styles.text}>
+        {formatMessage(labels.pageOf, { x: page, y: maxPage })}
+      </Flexbox>
       <Button onClick={() => handlePageChange(1)} disabled={lastPage}>
         <Icon size="lg" className={styles.icon} rotate={270}>
           <Icons.ChevronDown />

components/common/SettingsTable.js

@@ -41,6 +41,7 @@ export function SettingsTable({
           onChange={handleFilterChange}
           delay={1000}
           value={filter}
+          autoFocus={true}
           placeholder="Search"
           style={{ maxWidth: '300px', marginBottom: '10px' }}
         />