[NEW UI] Restore page

_dev/src/ts/pages/RestorePageRestore.ts

@@ -1,15 +1,55 @@
 import StepPage from './StepPage';
+import ProcessContainer from '../components/ProcessContainer';
+import api from '../api/RequestHandler';
 
 export default class RestorePageRestore extends StepPage {
   protected stepCode = 'restore';
+  #processContainer: ProcessContainer;
+  #tryAgainButtonForm: null | HTMLFormElement = null;
+  #submitErrorReportForm: null | HTMLFormElement = null;
 
   constructor() {
     super();
+
+    const stepContent = document.getElementById('ua_step_content')!;
+    const initialAction = stepContent.dataset.initialProcessAction!;
+
+    this.#processContainer = new ProcessContainer(initialAction, {
+      onError: this.#onError
+    });
   }
 
-  public mount = () => {
+  public mount = (): void => {
     this.initStepper();
+
+    this.#processContainer.mount();
   };
 
-  public beforeDestroy = () => {};
+  public beforeDestroy = () => {
+    this.#processContainer.beforeDestroy();
+
+    this.#tryAgainButtonForm?.removeEventListener('submit', this.#handleSubmit);
+    this.#submitErrorReportForm?.removeEventListener('submit', this.#handleSubmit);
+  };
+
+  #onError = (): void => {
+    this.#tryAgainButtonForm = document.forms.namedItem('try-again-button');
+    this.#tryAgainButtonForm?.addEventListener('submit', this.#handleSubmit);
+
+    this.#submitErrorReportForm = document.forms.namedItem('submit-error-report');
+    this.#submitErrorReportForm?.addEventListener('submit', this.#handleSubmit);
+  };
+
+  #handleSubmit = async (event: SubmitEvent) => {
+    event.preventDefault();
+
+    const form = event.target as HTMLFormElement;
+    const routeToSubmit = form.dataset.routeToSubmit;
+
+    if (!routeToSubmit) {
+      throw new Error('No route to submit form provided. Impossible to submit form.');
+    }
+
+    await api.post(routeToSubmit);
+  };
 }

controllers/admin/self-managed/RestorePageRestoreController.php

@@ -3,7 +3,9 @@
 namespace PrestaShop\Module\AutoUpgrade\Controller;
 
 use PrestaShop\Module\AutoUpgrade\Router\Routes;
+use PrestaShop\Module\AutoUpgrade\Task\TaskName;
 use PrestaShop\Module\AutoUpgrade\Task\TaskType;
+use PrestaShop\Module\AutoUpgrade\Twig\PageSelectors;
 use PrestaShop\Module\AutoUpgrade\Twig\Steps\RestoreSteps;
 use PrestaShop\Module\AutoUpgrade\Twig\Steps\Stepper;
 
@@ -37,7 +39,15 @@ protected function getParams(): array
 
         return array_merge(
             $updateSteps->getStepParams($this::CURRENT_STEP),
-            []
+            [
+                'success_route' => Routes::RESTORE_STEP_POST_RESTORE,
+                'download_logs_route' => Routes::DOWNLOAD_LOGS,
+                'download_logs_type' => TaskType::TASK_TYPE_RESTORE,
+                'try_again_route' => Routes::RESTORE_PAGE_BACKUP_SELECTION,
+                'submit_error_report_route' => Routes::DISPLAY_ERROR_REPORT_MODAL,
+                'initial_process_action' => TaskName::TASK_RESTORE_INITIALIZATION,
+                'download_logs_parent_id' => PageSelectors::DOWNLOAD_LOGS_PARENT_ID,
+            ]
         );
     }
 }

views/templates/steps/restore.html.twig

@@ -7,13 +7,40 @@
 {% endblock %}
 
 {% block content %}
+  {% include "@ModuleAutoUpgrade/components/alert.html.twig" with {
+    id: 'error-alert',
+    hidden: true,
+    alertStatus: 'danger',
+    title: 'Restoration failed'|trans({}),
+    message: 'Please try again. You can also send us an error report to help us improve the Update assistant module.'|trans({})
+  } %}
   {% include "@ModuleAutoUpgrade/components/progress-tracker.html.twig" with {
-    successRoute: 'restore-step-post-restore'
+    successRoute: 'restore-step-post-restore',
+    downloadLogsRoute: download_logs_route,
+    downloadLogsType: download_logs_type,
   } %}
 {% endblock %}
 
-{% block buttons_inner %}
-  <button class="btn btn-lg btn-primary" type="button">
-    {{ 'Restore'|trans({}) }}
-  </button>
+{% block buttons %}
+  <div class="page__buttons hidden" id="error-buttons">
+    <form
+      id="submit-error-report"
+      name="submit-error-report"
+      data-route-to-submit="{{ submit_error_report_route }}"
+    >
+      <button class="btn btn-lg btn-default" type="submit">
+        <i class="material-icons">send</i>
+        {{ 'Send error report'|trans({}) }}
+      </button>
+    </form>
+    <form
+      id="try-again-button"
+      name="try-again-button"
+      data-route-to-submit="{{ try_again_route }}"
+    >
+      <button class="btn btn-lg btn-primary" type="submit">
+        {{ 'Try again'|trans({}) }}
+      </button>
+    </form>
+  </div>
 {% endblock %}