Finish tus/project-reset UI changes

frontend/src/lib/components/MoreSettings.svelte

@@ -7,7 +7,7 @@
   <div class="collapse-title text-lg">{$t('more_settings.title')}</div>
   <div class="collapse-content">
     <div class="divider mt-0" />
-    <div class="flex justify-end gap-4">
+    <div class="flex justify-end gap-4 max-sm:flex-col">
       <slot />
     </div>
   </div>

frontend/src/lib/components/TusUpload.svelte

@@ -27,13 +27,13 @@
 
   let status = UploadStatus.NoFile;
   let percent = 0;
-  let error: string | undefined = undefined;
   let fileError: string | undefined = undefined;
+  let uploadError: string | undefined = undefined;
   let upload: Upload | undefined;
   const maxUploadChunkSizeMb = parseInt(env.PUBLIC_TUS_CHUNK_SIZE_MB);
 
   function fileSelected(e: Event): void {
-    error = fileError = upload = undefined;
+    uploadError = fileError = upload = undefined;
     status = UploadStatus.NoFile;
     let inputElement = e.target as HTMLInputElement;
     if (!inputElement.files?.length) return;
@@ -63,10 +63,10 @@
         status = UploadStatus.Error;
         const errorCode = getErrorCode(err);
         if (errorCode !== 'unknown') {
-          error = $t('tus.server_error_codes.' + errorCode);
+          uploadError = $t('tus.server_error_codes.' + errorCode);
           return;
         }
-        error = err.message;
+        uploadError = err.message;
       },
       onShouldRetry: (err) => {
         //probably won't do anything as this is what the library does already, more to make ts happy and to avoid breaking if the library changes it's implementation
@@ -131,14 +131,14 @@
              on:cancel|stopPropagation
              on:change={fileSelected}/>
     </FormField>
-    <FormError {error}/>
+    <FormError error={uploadError}/>
   </form>
 </div>
 
 <div class="mt-6 flex items-center gap-6">
   <Button style="btn-success" disabled={status > UploadStatus.Ready} on:click={startUpload}>{uploadLabel}</Button>
   <div class="flex-1">
-    <p class="label label-text py-0">Upload progress</p>
-    <progress class="progress progress-success" class:progress-error={error} value={percent} max="100"/>
+    <p class="label label-text py-0">{$t('tus.upload_progress')}</p>
+    <progress class="progress progress-success" class:progress-error={uploadError} value={percent} max="100"/>
   </div>
 </div>

frontend/src/lib/i18n/locales/en.json

@@ -166,19 +166,24 @@ the [Linguistics Institute at Payap University](https://li.payap.ac.th/) in Chia
       "i_have_working_backup": "I have a working backup",
       "next": "Next",
       "back": "Back",
+      "download_instruction": "First, download a backup of the project that you can use to restore it in step 3:",
       "download_button": "Download project backup",
       "confirm_downloaded": "I confirm that I have downloaded a backup of the project and verified that it works. I am ready to completely reset/delete the contents of the project repository.",
-      "confirm_downloaded_error": "Please check the box to confirm you have downloaded the backup file",
+      "confirm_downloaded_error": "Please confirm you have downloaded a backup",
       "confirm_project_code": "Enter project code to confirm reset",
       "confirm_project_code_error": "Please type the project code to confirm reset",
       "reset_project_notification": "Successfully reset project {code}",
+      "upload_instruction": "The project repository was successfully reset. Now upload a zip file to restore it:",
       "upload_project": "Upload Project",
       "select_zip": "Project zip file",
       "should_only_contain_hg": "Should only contain the .hg folder at the root",
+      "reset_success": "Project successfully reset.",
       "backup_step": "Backup",
       "reset_step": "Reset",
       "restore_step": "Restore",
       "finished_step": "Finished",
+      "reset_in_progress": "Project Reset in progress",
+      "click_to_continue": "Click to continue",
     },
     "notifications": {
       "role_change": "Project role of {name} set to {role}.",
@@ -345,6 +350,7 @@ the [Linguistics Institute at Payap University](https://li.payap.ac.th/) in Chia
   },
   "tus": {
     "upload": "Upload",
+    "upload_progress": "Upload progress",
     "status": "Status: {status, select, NoFile {No file} Ready {Ready} Error {Error} Uploading {Uploading} Paused {Paused} Complete {Complete} other {Unknown}}",
     "zip_only": "Only .zip files are allowed",
     "no_file_selected": "Please choose a file",

frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte

@@ -251,8 +251,13 @@
             <Badge>{migrationStatusTable[migrationStatus]}</Badge>
           {/if}
           {#if project.resetStatus === ResetStatus.InProgress}
-            <Badge type="badge-warning">Project Reset in progress
-            <span class="i-mdi-warning text-xl mb-[-2px]"/></Badge>
+            <button class:tooltip={isAdmin(user)} data-tip={$t('project_page.reset_project_modal.click_to_continue')}
+              disabled={!isAdmin(user)} on:click={resetProject}>
+              <Badge type="badge-warning">
+                {$t('project_page.reset_project_modal.reset_in_progress')}
+                <span class="i-mdi-warning text-xl mb-[-2px]"/>
+              </Badge>
+            </button>
           {/if}
         </BadgeList>
       </div>
@@ -352,7 +357,7 @@
             {$t('delete_project_modal.submit')}<TrashIcon />
           </button>
           <AdminContent>
-              <button class="btn btn-accent" on:click={() => resetProject()}>
+              <button class="btn btn-accent" on:click={resetProject}>
                 {$t('project_page.reset_project_modal.submit')}<CircleArrowIcon />
               </button>
             <ResetProjectModal bind:this={resetProjectModal} />

frontend/src/routes/(authenticated)/project/[project_code]/+page.ts

@@ -14,6 +14,7 @@ import type {
 import { getClient, graphql } from '$lib/gql';
 
 import type { PageLoadEvent } from './$types';
+import { invalidate } from '$app/navigation';
 
 type Project = NonNullable<ProjectPageQuery['projectByCode']>;
 export type ProjectUser = Project['users'][number];
@@ -32,7 +33,7 @@ export async function load(event: PageLoadEvent) {
 						description
 						type
             migrationStatus
-                        resetStatus
+            resetStatus
 						lastCommit
 						createdDate
 						retentionPolicy
@@ -180,13 +181,21 @@ export async function _deleteProjectUser(projectId: string, userId: string): $Op
   return result;
 }
 
-export async function _refreshProjectStatus(projectCode: string): Promise<void> {
+export async function _refreshProjectMigrationStatusAndRepoInfo(projectCode: string): Promise<void> {
     const result = await getClient().query(graphql(`
         query refreshProjectStatus($projectCode: String!) {
-            projectByCode(code: $projectCode){
+            projectByCode(code: $projectCode) {
                 id
                 resetStatus
                 migrationStatus
+                lastCommit
+                changesets {
+                  node
+                  parents
+                  date
+                  user
+                  desc
+                }
             }
         }
     `), { projectCode }, { requestPolicy: 'network-only' });
@@ -195,4 +204,6 @@ export async function _refreshProjectStatus(projectCode: string): Promise<void>
     // this should be meaningless, but just in case and it makes the linter happy
     throw result.error;
   }
+
+  await invalidate(`project:${projectCode}`);
 }

frontend/src/routes/(authenticated)/project/[project_code]/ResetProjectModal.svelte

@@ -9,7 +9,9 @@
     import Form from '$lib/forms/Form.svelte';
     import TusUpload from '$lib/components/TusUpload.svelte';
     import {ResetStatus} from '$lib/gql/generated/graphql';
-    import {_refreshProjectStatus} from './+page';
+    import {_refreshProjectMigrationStatusAndRepoInfo} from './+page';
+    import { scale } from 'svelte/transition';
+    import { bounceIn } from 'svelte/easing';
 
     enum ResetSteps {
         Download,
@@ -52,14 +54,14 @@
         const resetResponse = await fetch(url, {method: 'post'});
         //we should do the reset via a mutation, but this is easier for now
         //we need to refresh the status so if the admin closes the dialog they can resume back where they left off.
-        await _refreshProjectStatus(code);
+        await _refreshProjectMigrationStatusAndRepoInfo(code);
         if (resetResponse.ok) {
             nextStep();
         }
     });
 
     async function uploadComplete(): Promise<void> {
-        await _refreshProjectStatus(code);
+        await _refreshProjectMigrationStatusAndRepoInfo(code);
         nextStep();
     }
 
@@ -83,7 +85,9 @@
         <div class="divider my-2" />
 
         {#if currentStep === ResetSteps.Download}
-            <p class="mb-2 label">First, download a backup of the project that you can use to restore it in step 3:</p>
+            <p class="mb-2 label">
+              {$t('download_instruction')}
+            </p>
             <a rel="external" href="/api/project/backupProject/{code}"
                 class="btn btn-success" download>
                 {$t('download_button')}
@@ -107,7 +111,7 @@
 
         {:else if currentStep === ResetSteps.Upload}
             <div class="label">
-              The project repository was successfully reset. Now upload a zip file to restore it:
+              {$t('upload_instruction')}
             </div>
             <TusUpload endpoint={'/api/project/upload-zip/' + code}
                        uploadLabel={$t('upload_project')}
@@ -117,7 +121,10 @@
                        on:uploadComplete={uploadComplete}/>
         {:else if currentStep === ResetSteps.Finished}
             <div class="text-center">
-                <span class="i-mdi-check text-6xl"/>
+              <p class="mb-2 label justify-center">
+                {$t('reset_success')}
+              </p>
+              <span class="i-mdi-check-circle-outline text-7xl text-success" transition:scale={{duration: 600, start: 0.7, easing: bounceIn}} />
             </div>
         {:else}
             <span>Unknown step</span>