feat: post update checklist

tblivet · Aug 26, 2024 · 4f3b723 · 4f3b723
1 parent 5264bcb
commit 4f3b723
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 14 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/scss/components/_content.scss b/scss/components/_content.scss
@@ -0,0 +1,26 @@
+@use "../variables" as *;
+
+$e: ".content";
+
+#{$ua-id} {
+  #{$e} {
+    &__container {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    &__section {
+      font-size: 1rem;
+
+      .h3 {
+        /* stylelint-disable */
+        margin: 0 !important;
+        margin-block-end: 1rem !important;
+        border: none !important;
+        background-color: transparent !important;
+        /* stylelint-enable */
+      }
+    }
+  }
+}
diff --git a/scss/components/_index.scss b/scss/components/_index.scss
@@ -5,6 +5,7 @@
 @use "alert";
 @use "button";
 @use "check-requirements";
+@use "content";
 @use "form";
 @use "local-archive";
 @use "logs";

diff --git a/scss/components/_typography.scss b/scss/components/_typography.scss
@@ -17,7 +17,8 @@
   .h4,
   .h5,
   .h6 {
-    margin-block: 0;
+    margin: 0;
+    background-color: transparent;
     font-weight: 600;
     text-wrap: pretty;
   }
@@ -63,4 +64,15 @@
       vertical-align: middle;
     }
   }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-inline-start: 2rem;
+
+    li {
+      line-height: 1.4;
+    }
+  }
 }
diff --git a/storybook/stories/layouts/PostUpdateChecklist.stories.js b/storybook/stories/layouts/PostUpdateChecklist.stories.js
@@ -0,0 +1,65 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to [email protected] so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <[email protected]>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+import PostUpdateChecklistLayout from "../../../views/templates/layouts/post-update-checklist.html.twig";
+import Stepper from "../components/Stepper.stories";
+
+export default {
+  title: "Layouts/Pages/Post update checklist", // Title for the Storybook category
+  component: PostUpdateChecklistLayout, // Default component
+  args: {
+    psBaseUri: "/",
+    upToDate: true,
+    noLocalArchive: true,
+    currentPrestashopVersion: "8.1.6",
+    currentPhpVersion: "8.1",
+    ...Stepper.args,
+    steps: [
+      {
+        state: "done",
+        title: "Version choice",
+      },
+      {
+        state: "done",
+        title: "Update options",
+      },
+      {
+        state: "done",
+        title: "Backup",
+      },
+      {
+        state: "done",
+        title: "Update",
+      },
+      {
+        state: "current",
+        title: "Post-update",
+      },
+    ],
+  },
+};
+
+// Default story for PageLayout
+export const Default = {};
diff --git a/views/templates/layouts/page.html.twig b/views/templates/layouts/page.html.twig
@@ -18,6 +18,17 @@
           <div class="page__content">
             {% block content %}
               {# Default content or leave empty for child templates to provide #}
+              {#
+              <div class="content__container">
+                <div class="content__section">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie efficitur tortor at feugiat. Donec pretium libero non tortor lobortis, eu cursus ligula tincidunt.
+                </div>
+
+                <div class="content__section">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc molestie efficitur tortor at feugiat. Donec pretium libero non tortor lobortis, eu cursus ligula tincidunt.
+                </div>
+              </div>
+              #}
             {% endblock %}
           </div>
 

diff --git a/views/templates/layouts/post-update-checklist.html.twig b/views/templates/layouts/post-update-checklist.html.twig
@@ -0,0 +1,62 @@
+{% extends '@ModuleAutoUpgrade/layouts/page.html.twig' %}
+
+{% block page_class %}post-update-checklist-page{% endblock %}
+
+{% block title %}
+  <h1>{{ 'Post-update checklist'|trans({}) }}</h1>
+{% endblock %}
+
+{% block content %}
+  <div class="content__container">
+    {% include '@ModuleAutoUpgrade/components/alert.html.twig' with {
+      title: "Your store is up to date",
+      message: "Before continuing with your tasks, please review the following checklist to ensure smooth operation after recent updates.",
+      alertStatus: "success",
+      buttonLabel: "",
+      buttonUrl: "",
+    } %}
+
+    <div class="content__section">
+      <h3 class="h3">{{ 'Next steps'|trans({}) }}</h3>
+
+      <ul>
+        <li>{{ '<b>Open the developer documentation</b> to keep this checklist at-hand.'|trans({})|raw }}</li>
+        <li>{{ '<b>Re-enable and check your modules</b> one by one to prevent any compatibility issue.'|trans({})|raw }}</li>
+        <li>{{ '<b>Make sure your store’s front office is working properly:</b> try to create an account, place an order, add a product, etc.'|trans({})|raw }}</li>
+        <li>{{ '<b>Disable the maintenance mode</b> in General settings > Maintenance.'|trans({})|raw }}</li>
+      </ul>
+    </div>
+
+    <div class="content__section">
+      <h3 class="h3">{{ 'Troubleshooting'|trans({}) }}</h3>
+
+      <ul>
+        <li>{{ 'If some images don’t appear in the front office, try regenerating thumbnails in Preferences > Images.'|trans({}) }}</li>
+        <li>{{ 'If something\'s wrong, you can restore a backup with this module. Your backup is available at {admin}/autoupgrade/backup.'|trans({}) }}</li>
+        <li>{{ 'If you can\'t access your back office, try enabling the debug mode manually in config/defines.inc.php by setting _PS_MODE_DEV_ to true.'|trans({}) }}</li>
+      </ul>
+    </div>
+
+    <div class="content__section">
+      <a class="link" href="#">
+        {{ 'Download update logs'|trans({}) }} <i class="material-icons">file_upload</i>
+      </a>
+    </div>
+  </div>
+{% endblock %}
+
+{% block buttons_inner %}
+  <button class="btn btn-lg btn-default" type="button">
+    <i class="material-icons">
+      exit_to_app
+    </i>
+    {{ 'Exit'|trans({}) }}
+  </button>
+
+  <button class="btn btn-lg btn-primary" type="button">
+    <i class="material-icons">
+      launch
+    </i>
+    {{ 'Open developer documentation'|trans({}) }}
+  </button>
+{% endblock %}