Merge pull request #1068 from tblivet/fix/storybook

[NEW UI] fix storybook pages and components errors
PrestaShop · Dec 16, 2024 · 923919e · 923919e
2 parents f835da4 + 18b0335
commit 923919e
Show file tree

Hide file tree

Showing 33 changed files with 139 additions and 103 deletions.
diff --git a/classes/Traits/DisplayErrorReportDialogTrait.php b/classes/Traits/DisplayErrorReportDialogTrait.php
@@ -41,8 +41,6 @@ public function submitErrorReport(): JsonResponse
             $this->getTwig()->render(
                 '@ModuleAutoUpgrade/dialogs/dialog-error-report.html.twig',
                 [
-                    'dialogSize' => 'sm',
-                    'title' => $this->upgradeContainer->getTranslator()->trans('Send error report?'),
                     'data_transparency_link' => DocumentationLinks::PRESTASHOP_PROJECT_DATA_TRANSPARENCY_URL,
                 ]
             ),

diff --git a/storybook/stories/components/Alert.stories.js b/storybook/stories/components/Alert.stories.js
@@ -35,14 +35,35 @@ export default {
       options: ["info", "success", "warning", "danger"],
     },
   },
-  includeStories: ["Default"],
 };
 
 export const Default = {
   args: {
     title: "Backup completed",
     message: "It’s available at admin/autoupgrade/backup. You're ready to start the update now.",
     alertStatus: "success",
+  },
+};
+
+export const AlertWithForm = {
+  args: {
+    title: "Update failed",
+    message: "Your store may not work properly anymore. Select the backup you want to use and restore it to avoid any data loss.",
+    alertStatus: "warning",
+    // Required for form
+    buttonLabel: "Restore",
+    formRoute: "/",
+    formName: "alert-form",
+  },
+};
+
+export const AlertWithLink = {
+  args: {
+    title: "Backup completed",
+    message: "It’s available at /your-admin-directory/autoupgrade/backup. You're ready to start the update now.",
+    alertStatus: "success",
+    buttonDownload: "backup.log",
+    // Required for link
     buttonLabel: "Download backup logs",
     buttonUrl: "#",
   },
@@ -53,8 +74,6 @@ export const NoLocalArchive = {
     title: "",
     message: "It’s available at admin/autoupgrade/backup. You're ready to start the update now.",
     alertStatus: "success",
-    buttonLabel: "",
-    buttonUrl: "",
   },
 };
 
diff --git a/storybook/stories/components/Dialog.stories.js b/storybook/stories/components/Dialog.stories.js
@@ -29,31 +29,10 @@ export default {
   title: "Components/Dialog",
   component: Dialog,
   excludeStories: ["Default"],
-  argTypes: {
-    dialogSize: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-    },
-  },
 };
 
 export const Default = {
   args: {
-    dialogId: "dialog_id",
-    title: "Title goes here",
-    message: "Message goes here, lorem ipsum dolor site amet",
-    dialogSize: "lg",
-    psBaseUri: "/",
-    dialogDanger: false,
-
     assets_base_path: "",
   },
 };
-
-document.addEventListener("DOMContentLoaded", () => {
-  const dialogs = document.querySelectorAll(".dialog");
-  dialogs.forEach((dialog) => {
-    dialog.style.display = "block";
-    dialog.classList.add("in");
-  });
-});
diff --git a/storybook/stories/components/DialogBackup.stories.js b/storybook/stories/components/DialogBackup.stories.js
@@ -24,16 +24,15 @@
  */
 
 import DialogBackup from "../../../views/templates/dialogs/dialog-backup.html.twig";
-import { Default as Dialog } from "./Dialog.stories";
 
 export default {
   title: "Components/Dialog",
   component: DialogBackup,
 };
 
 export const Backup = {
-  args: {
-    ...Dialog.args,
-    dialogSize: "md",
+  play: async () => {
+    const dialog = document.querySelector('.dialog');
+    dialog.showModal();
   },
 };
diff --git a/storybook/stories/components/DialogBackupAll.stories.js b/storybook/stories/components/DialogBackupAll.stories.js
@@ -24,16 +24,15 @@
  */
 
 import DialogBackup from "../../../views/templates/dialogs/dialog-backup-all.html.twig";
-import { Default as Dialog } from "./Dialog.stories";
 
 export default {
   title: "Components/Dialog",
   component: DialogBackup,
 };
 
 export const BackupWithImg = {
-  args: {
-    ...Dialog.args,
-    dialogSize: "md",
+  play: async () => {
+    const dialog = document.querySelector('.dialog');
+    dialog.showModal();
   },
 };
diff --git a/storybook/stories/components/DialogBackupDelete.stories.js b/storybook/stories/components/DialogBackupDelete.stories.js
@@ -24,7 +24,6 @@
  */
 
 import DialogBackupDelete from "../../../views/templates/dialogs/dialog-backup-delete.html.twig";
-import { Default as Dialog } from "./Dialog.stories";
 
 export default {
   title: "Components/Dialog",
@@ -33,10 +32,12 @@ export default {
 
 export const BackupDelete = {
   args: {
-    ...Dialog.args,
-    title: "Delete backup",
-    message: "You are about to delete the <b>autoupgrade_save_8.1.6</b> backup made on <b>15/07/2024 8:00</b>. As it's your only backup, you will be redirected to the module's home page.",
-    dialogSize: "lg",
-    dialogDanger: true,
+    backup_name: "autoupgrade_save_8.1.6",
+    backup_date: "15/07/2024 8:00",
+    is_only_backup: true,
+  },
+  play: async () => {
+    const dialog = document.querySelector('.dialog');
+    dialog.showModal();
   },
 };
diff --git a/storybook/stories/components/DialogErrorReport.stories.js b/storybook/stories/components/DialogErrorReport.stories.js
@@ -24,7 +24,6 @@
  */
 
 import DialogErrorReport from "../../../views/templates/dialogs/dialog-error-report.html.twig";
-import { Default as Dialog } from "./Dialog.stories";
 
 export default {
   title: "Components/Dialog",
@@ -33,11 +32,10 @@ export default {
 
 export const ErrorReport = {
   args: {
-    ...Dialog.args,
-    dialogId: "errorDialog",
-    title: "Send error report?",
-    message: "",
-    dialogSize: "md",
-    dataPrivacyLink: "#"
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
+  },
+  play: async () => {
+    const dialog = document.querySelector('.dialog');
+    dialog.showModal();
   },
 };
diff --git a/storybook/stories/components/DialogUpdate.stories.js b/storybook/stories/components/DialogUpdate.stories.js
@@ -34,7 +34,11 @@ export default {
 export const Update = {
   args: {
     ...Dialog.args,
-    dialogSize: "lg",
     noBackUp: false,
+    form_route_to_confirm: "/",
+  },
+  play: async () => {
+    const dialog = document.querySelector('.dialog');
+    dialog.showModal();
   },
 };
diff --git a/storybook/stories/components/LogsProgress.stories.js b/storybook/stories/components/LogsProgress.stories.js
@@ -28,6 +28,12 @@ import LogsProgress from "../../../views/templates/components/logs-summary.html.
 export default {
   component: LogsProgress,
   title: "Components/Logs progress",
+  play: async ({ args }) => {
+    const textSlots = document.querySelectorAll("[data-slot-component='text']");
+    textSlots.forEach((slot) => {
+      slot.textContent = args.progressStatus;
+    });
+  }
 };
 
 export const Default = {

diff --git a/storybook/stories/components/LogsViewer.stories.js b/storybook/stories/components/LogsViewer.stories.js
@@ -176,6 +176,8 @@ export const Default = {
     ],
     downloadLogsButtonUrl: "#",
     downloadLogsButtonLabel: "Download update logs",
+    downloadLogsRoute: "/",
+    download_logs_parent_id: "download_logs"
   },
 };
 
@@ -325,5 +327,7 @@ export const RestoreLogsViewer = {
     ],
     downloadLogsButtonUrl: "#",
     downloadLogsButtonLabel: "Download restore logs",
+    downloadLogsRoute: "/",
+    download_logs_parent_id: "download_logs"
   },
 };
diff --git a/storybook/stories/components/Privacy.stories.js b/storybook/stories/components/Privacy.stories.js
@@ -28,6 +28,9 @@ import Privacy from "../../../views/templates/components/privacy.html.twig";
 export default {
   component: Privacy,
   title: "Components/Privacy",
+  args: {
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
+  },
 };
 
 export const Default = {};
diff --git a/storybook/stories/layouts/Page.stories.js b/storybook/stories/layouts/Page.stories.js
@@ -36,5 +36,6 @@ export const Default = {
   args: {
     ...Stepper.args,
     step_parent_id: "ua_container",
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
   },
 };
diff --git a/storybook/stories/pages/Backup.stories.js b/storybook/stories/pages/Backup.stories.js
@@ -39,18 +39,20 @@ export const Backup = {
       code: "backup",
       title: "Backup",
     },
-
     form_fields: {
       include_images: {
           field: 'PS_AUTOUP_KEEP_IMAGES',
           value: true,
       },
     },
-
-    form_route_to_save: "update-step-update-options-save-option",
-    form_route_to_submit: "update-step-update-options-submit-form",
-
+    form_route_to_save: "update-step-backup-save-option",
+    form_route_to_submit: "update-step-backup-submit-backup",
+    form_route_to_confirm_update: "update-step-backup-confirm-update",
+    form_route_to_confirm_backup: "update-step-backup-confirm-backup",
+    form_route_to_submit_update: "update-step-backup-submit-update",
+    form_route_to_submit_backup: "update-step-update-options-submit-form",
     step_parent_id: "ua_container",
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
     // Stepper
     ...Stepper.args,
   },

diff --git a/storybook/stories/pages/BackupSelection.stories.js b/storybook/stories/pages/BackupSelection.stories.js
@@ -41,6 +41,7 @@ export const BackupSelection = {
       title: "Backup selection",
     },
     step_parent_id: "ua_container",
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
     // Backup
     ...BackupSelectionComponent.args,
     // Stepper

diff --git a/storybook/stories/pages/Home.stories.js b/storybook/stories/pages/Home.stories.js
@@ -44,6 +44,7 @@ export const Welcome = {
     form_route: "form_route",
     form_route_to_save: "update-step-version-choice-save-form",
     form_route_to_submit: "update-step-version-choice-submit-form",
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
     // Radio card
     ...RadioCard.args,
     form_fields: {

diff --git a/storybook/stories/pages/PostRestore.stories.js b/storybook/stories/pages/PostRestore.stories.js
@@ -46,6 +46,7 @@ export const PostRestore = {
     currentPhpVersion: "8.1",
     backlog_link: "https://myshop.com/my-backlog.txt",
     step_parent_id: "ua_container",
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
     // Stepper
     ...Stepper.args,
   },

diff --git a/storybook/stories/pages/PostUpdate.stories.js b/storybook/stories/pages/PostUpdate.stories.js
@@ -46,6 +46,7 @@ export const PostUpdate = {
     currentPhpVersion: "8.1",
     backlog_link: "https://myshop.com/my-backlog.txt",
     step_parent_id: "ua_container",
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
     // Stepper
     ...Stepper.args
   },

diff --git a/storybook/stories/pages/Restore.stories.js b/storybook/stories/pages/Restore.stories.js
@@ -42,6 +42,7 @@ export const Restore = {
       title: "Restore",
     },
     step_parent_id: "ua_container",
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
     // Logs
     ...LogsProgress.args,
     ...LogsViewer.args,

diff --git a/storybook/stories/pages/Update.stories.js b/storybook/stories/pages/Update.stories.js
@@ -47,6 +47,12 @@ export const Update = {
     downloadLogsButtonLabel: "",
     step_parent_id: "ua_container",
     stepper_parent_id: "stepper_content",
+    backup_available: true,
+    restore_route: "restore-page-backup-selection",
+    success_route: "update-step-post-update",
+    download_logs_route: "update-step-update-download-logs",
+    submit_error_report_route: "update-step-update-submit-error-report",
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
     // Logs
     ...LogsProgress.args,
     ...LogsViewer.args,

diff --git a/storybook/stories/pages/UpdateOptions.stories.js b/storybook/stories/pages/UpdateOptions.stories.js
@@ -55,14 +55,12 @@ export const UpdateOptions = {
     },
     step_parent_id: "ua_container",
     stepper_parent_id: "stepper_content",
-
     form_route_to_save: "update-step-update-options-save-option",
     form_route_to_submit: "update-step-update-options-submit-form",
-
     error: {
       'PS_AUTOUP_REGEN_EMAIL': 'Example of an error that occured when switching the value!',
     },
-
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
     // Stepper
     ...Stepper.args,
   },

diff --git a/storybook/stories/pages/VersionChoice.stories.js b/storybook/stories/pages/VersionChoice.stories.js
@@ -53,6 +53,7 @@ export const VersionChoice = {
     radio_card_archive_parent_id: "radio_card_archive",
     form_route_to_save: "update-step-version-choice-save-form",
     form_route_to_submit: "update-step-version-choice-submit-form",
+    data_transparency_link: "https://www.prestashop-project.org/data-transparency",
     // Radio cards
     ...Online.args,
     ...Local.args,

diff --git a/views/templates/components/alert-action-form.html.twig b/views/templates/components/alert-action-form.html.twig
@@ -0,0 +1,13 @@
+<form
+  class="alert__action"
+  data-route-to-submit="{{ formRoute }}"
+  id="{{ formName }}"
+  name="{{ formName }}"
+>
+  <button
+    class="alert__link btn btn-{% if alertStatus is defined and alertStatus is not empty %}{{ alertStatus }}{% else %}info{% endif %}"
+    type="submit"
+  >
+    {{ buttonLabel }}
+  </button>
+</form>
diff --git a/views/templates/components/alert-action-link.html.twig b/views/templates/components/alert-action-link.html.twig
@@ -0,0 +1,9 @@
+<div class="alert__action">
+  <a
+    class="alert__link btn btn-{% if alertStatus is defined and alertStatus is not empty %}{{ alertStatus }}{% else %}info{% endif %}"
+    href="{{ buttonUrl }}"
+    {% if buttonDownload is defined and buttonDownload is not empty %}download="{{ buttonDownload }}"{% endif %}
+  >
+    {{ buttonLabel }}
+  </a>
+</div>