Merge branch 'develop' into feature/react-admin

resources/scripts/components/dashboard/AccountOverviewContainer.tsx

@@ -27,7 +27,7 @@ const Container = styled.div`
 `;
 
 export default () => {
-    const state = useLocation<{ twoFactorRedirect: boolean }>().state;
+    const { state } = useLocation<undefined | { twoFactorRedirect?: boolean }>();
 
     return (
         <PageContentBlock title={'Account Overview'}>

resources/scripts/components/dashboard/DashboardContainer.tsx

@@ -12,10 +12,14 @@ import tw from 'twin.macro';
 import useSWR from 'swr';
 import { PaginatedResult } from '@/api/http';
 import Pagination from '@/components/elements/Pagination';
+import { useLocation } from 'react-router-dom';
 
 export default () => {
+    const { search } = useLocation();
+    const defaultPage = Number(new URLSearchParams(search).get('page') || '1');
+
+    const [ page, setPage ] = useState((!isNaN(defaultPage) && defaultPage > 0) ? defaultPage : 1);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
-    const [ page, setPage ] = useState(1);
     const uuid = useStoreState(state => state.user.data!.uuid);
     const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
     const [ showOnlyAdmin, setShowOnlyAdmin ] = usePersistedState(`${uuid}:show_all_servers`, false);
@@ -25,6 +29,20 @@ export default () => {
         () => getServers({ page, type: showOnlyAdmin ? 'admin' : undefined }),
     );
 
+    useEffect(() => {
+        if (!servers) return;
+        if (servers.pagination.currentPage > 1 && !servers.items.length) {
+            setPage(1);
+        }
+    }, [ servers?.pagination.currentPage ]);
+
+    useEffect(() => {
+        // Don't use react-router to handle changing this part of the URL, otherwise it
+        // triggers a needless re-render. We just want to track this in the URL incase the
+        // user refreshes the page.
+        window.history.replaceState(null, document.title, `/${page <= 1 ? '' : `?page=${page}`}`);
+    }, [ page ]);
+
     useEffect(() => {
         if (error) clearAndAddHttpError({ key: 'dashboard', error });
         if (!error) clearFlashes('dashboard');

resources/scripts/components/dashboard/ServerRow.tsx

@@ -59,7 +59,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
 
         getStats().then(() => {
             // @ts-ignore
-            interval.current = setInterval(() => getStats(), 20000);
+            interval.current = setInterval(() => getStats(), 30000);
         });
 
         return () => {

resources/scripts/components/dashboard/forms/SetupTwoFactorModal.tsx

@@ -78,7 +78,7 @@ export default ({ onDismissed, ...props }: RequiredModalProps) => {
                             <h2 css={tw`text-2xl mb-4`}>Two-factor authentication enabled</h2>
                             <p css={tw`text-neutral-300`}>
                                 Two-factor authentication has been enabled on your account. Should you loose access to
-                                this device you&apos;ll need to use on of the codes displayed below in order to access your
+                                this device you&apos;ll need to use one of the codes displayed below in order to access your
                                 account.
                             </p>
                             <p css={tw`text-neutral-300 mt-4`}>

resources/scripts/components/server/Console.tsx

@@ -146,10 +146,10 @@ export default () => {
 
             // Add support for capturing keys
             terminal.attachCustomKeyEventHandler((e: KeyboardEvent) => {
-                if (e.metaKey && e.key === 'c') {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
                     document.execCommand('copy');
                     return false;
-                } else if (e.metaKey && e.key === 'f') {
+                } else if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
                     e.preventDefault();
                     searchBar.show();
                     return false;

resources/scripts/components/server/backups/BackupContextMenu.tsx

@@ -25,6 +25,7 @@ export default ({ backup }: Props) => {
     const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
     const [ modal, setModal ] = useState('');
     const [ loading, setLoading ] = useState(false);
+    const [ truncate, setTruncate ] = useState(false);
     const { clearFlashes, clearAndAddHttpError } = useFlash();
     const { mutate } = getServerBackups();
 
@@ -62,7 +63,7 @@ export default ({ backup }: Props) => {
     const doRestorationAction = () => {
         setLoading(true);
         clearFlashes('backups');
-        restoreServerBackup(uuid, backup.uuid)
+        restoreServerBackup(uuid, backup.uuid, truncate)
             .then(() => setServerFromState(s => ({
                 ...s,
                 status: 'restoring_backup',
@@ -108,6 +109,8 @@ export default ({ backup }: Props) => {
                             css={tw`text-red-500! w-5! h-5! mr-2`}
                             id={'restore_truncate'}
                             value={'true'}
+                            checked={truncate}
+                            onChange={() => setTruncate(s => !s)}
                         />
                         Remove all files and folders before restoring this backup.
                     </label>

resources/scripts/components/server/startup/StartupContainer.tsx

@@ -78,7 +78,7 @@ const StartupContainer = () => {
                 />
             :
             <ServerContentBlock title={'Startup Settings'} showFlashKey={'startup:image'}>
-                <div css={tw`flex`}>
+                <div css={tw`md:flex`}>
                     <TitledGreyBox title={'Startup Command'} css={tw`flex-1`}>
                         <div css={tw`px-1 py-2`}>
                             <p css={tw`font-mono bg-neutral-900 rounded py-2 px-4`}>
@@ -86,7 +86,7 @@ const StartupContainer = () => {
                             </p>
                         </div>
                     </TitledGreyBox>
-                    <TitledGreyBox title={'Docker Image'} css={tw`flex-1 lg:flex-none lg:w-1/3 ml-10`}>
+                    <TitledGreyBox title={'Docker Image'} css={tw`flex-1 lg:flex-none lg:w-1/3 mt-8 md:mt-0 md:ml-10`}>
                         {data.dockerImages.length > 1 && !isCustomImage ?
                             <>
                                 <InputSpinner visible={loading}>