From 8f1a291c650eff7757d1ab7a5d443f45405a72c5 Mon Sep 17 00:00:00 2001
From: Lukasz Ostrowski <lukasz.ostrowski@saleor.io>
Date: Mon, 24 Oct 2022 15:56:03 +0200
Subject: [PATCH] Change order of apps list and apps installations (#2452)

---
 .../components/AppsListPage/AppsListPage.tsx  |  21 +-
 .../__snapshots__/Stories.test.ts.snap        | 366 +++++++++---------
 2 files changed, 193 insertions(+), 194 deletions(-)

diff --git a/src/apps/components/AppsListPage/AppsListPage.tsx b/src/apps/components/AppsListPage/AppsListPage.tsx
index 662843df7..8344b6abb 100644
--- a/src/apps/components/AppsListPage/AppsListPage.tsx
+++ b/src/apps/components/AppsListPage/AppsListPage.tsx
@@ -103,6 +103,16 @@ const AppsListPage: React.FC<AppsListPageProps> = ({
                 id="MYA6EV"
               />
             </p>
+            {!!appsInProgress?.length && (
+              <>
+                <AppsInProgress
+                  appsList={appsInProgress}
+                  onAppInstallRetry={onAppInstallRetry}
+                  onRemove={onAppInProgressRemove}
+                />
+                <CardSpacer />
+              </>
+            )}
             <InstalledApps
               title={intl.formatMessage({
                 id: "BvmnJq",
@@ -116,17 +126,6 @@ const AppsListPage: React.FC<AppsListPageProps> = ({
             />
 
             <CardSpacer />
-
-            {!!appsInProgress?.length && (
-              <>
-                <CardSpacer />
-                <AppsInProgress
-                  appsList={appsInProgress}
-                  onAppInstallRetry={onAppInstallRetry}
-                  onRemove={onAppInProgressRemove}
-                />
-              </>
-            )}
           </>
         );
       }
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 74d797b1e..8d8b2c473 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -25053,6 +25053,189 @@ exports[`Storyshots Views / Apps / Apps list default 1`] = `
     <p>
       Third party apps are installed with App Manifests. They contain UI accessible from dashboard and can extend it.
     </p>
+    <div
+      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
+    >
+      <div
+        class="MuiCardHeader-root-id"
+      >
+        <div
+          class="MuiCardHeader-content-id"
+        >
+          <span
+            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
+          >
+            Ongoing Installations
+          </span>
+        </div>
+      </div>
+      <div
+        class="ResponsiveTable-root-id"
+      >
+        <table
+          class="MuiTable-root-id"
+        >
+          <tbody
+            class="MuiTableBody-root-id"
+          >
+            <tr
+              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
+              >
+                <span
+                  data-tc="name"
+                >
+                  app
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id AppList-colInstallAction-id"
+              >
+                <div
+                  class="MuiTypography-root-id AppList-error-id MuiTypography-body2-id"
+                >
+                  Problem occured during installation
+                  <button
+                    class="TooltipMountWrapper-wrapper-id"
+                  >
+                    <span
+                      class="Indicator-wrapper-id Indicator-wrapper-id"
+                    >
+                      <svg
+                        class="Indicator-absolute-id"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <circle
+                          class="Indicator-circlePath-id Indicator-circlePath-id"
+                          cx="12"
+                          cy="12"
+                          r="12"
+                        />
+                      </svg>
+                      <svg
+                        class="Indicator-absolute-id"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="m8 8 8 8m0-8-8 8"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="1.5"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+                <button
+                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
+                  tabindex="0"
+                  type="button"
+                >
+                  <span
+                    class="MuiButton-label-id"
+                  >
+                    Retry
+                  </span>
+                </button>
+                <button
+                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
+                  color="primary"
+                  tabindex="0"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id MacawIcon-root-id"
+                    fill="none"
+                    focusable="false"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="1.5"
+                    />
+                  </svg>
+                </button>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
+              >
+                <span
+                  data-tc="name"
+                >
+                  app pending
+                </span>
+              </td>
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id AppList-colInstallAction-id"
+              >
+                <div
+                  class="MuiTypography-root-id AppList-text-id MuiTypography-body2-id"
+                >
+                  Installing app...
+                </div>
+                <div
+                  class="AppList-colSpinner-id"
+                >
+                  <div
+                    class="MuiCircularProgress-root-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
+                    role="progressbar"
+                    style="width:20px;height:20px"
+                  >
+                    <svg
+                      class="MuiCircularProgress-svg-id"
+                      viewBox="22 22 44 44"
+                    >
+                      <circle
+                        class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
+                        cx="44"
+                        cy="44"
+                        fill="none"
+                        r="20.2"
+                        stroke-width="3.6"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
+            >
+              <td
+                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
+              >
+                <span
+                  data-tc="name"
+                >
+                  app success
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <div
+      class="CardSpacer-spacer-id"
+    />
     <div
       class="MuiPaper-root-id MuiCard-root-id AppList-apps-id MuiPaper-elevation0-id MuiPaper-rounded-id"
     >
@@ -25302,189 +25485,6 @@ exports[`Storyshots Views / Apps / Apps list default 1`] = `
     <div
       class="CardSpacer-spacer-id"
     />
-    <div
-      class="CardSpacer-spacer-id"
-    />
-    <div
-      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    >
-      <div
-        class="MuiCardHeader-root-id"
-      >
-        <div
-          class="MuiCardHeader-content-id"
-        >
-          <span
-            class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id"
-          >
-            Ongoing Installations
-          </span>
-        </div>
-      </div>
-      <div
-        class="ResponsiveTable-root-id"
-      >
-        <table
-          class="MuiTable-root-id"
-        >
-          <tbody
-            class="MuiTableBody-root-id"
-          >
-            <tr
-              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
-              >
-                <span
-                  data-tc="name"
-                >
-                  app
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id AppList-colInstallAction-id"
-              >
-                <div
-                  class="MuiTypography-root-id AppList-error-id MuiTypography-body2-id"
-                >
-                  Problem occured during installation
-                  <button
-                    class="TooltipMountWrapper-wrapper-id"
-                  >
-                    <span
-                      class="Indicator-wrapper-id Indicator-wrapper-id"
-                    >
-                      <svg
-                        class="Indicator-absolute-id"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <circle
-                          class="Indicator-circlePath-id Indicator-circlePath-id"
-                          cx="12"
-                          cy="12"
-                          r="12"
-                        />
-                      </svg>
-                      <svg
-                        class="Indicator-absolute-id"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="m8 8 8 8m0-8-8 8"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="1.5"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </div>
-                <button
-                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  tabindex="0"
-                  type="button"
-                >
-                  <span
-                    class="MuiButton-label-id"
-                  >
-                    Retry
-                  </span>
-                </button>
-                <button
-                  class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  color="primary"
-                  tabindex="0"
-                  type="button"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root-id MacawIcon-root-id"
-                    fill="none"
-                    focusable="false"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M9 10v8m3-8v8m3-8v8M5 4.5V21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4.5m-14 0H4m1 0h4m10 0h1m-1 0h-4m-6 0V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1.5m-6 0h6"
-                      stroke="currentColor"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="1.5"
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
-              >
-                <span
-                  data-tc="name"
-                >
-                  app pending
-                </span>
-              </td>
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id AppList-colInstallAction-id"
-              >
-                <div
-                  class="MuiTypography-root-id AppList-text-id MuiTypography-body2-id"
-                >
-                  Installing app...
-                </div>
-                <div
-                  class="AppList-colSpinner-id"
-                >
-                  <div
-                    class="MuiCircularProgress-root-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
-                    role="progressbar"
-                    style="width:20px;height:20px"
-                  >
-                    <svg
-                      class="MuiCircularProgress-svg-id"
-                      viewBox="22 22 44 44"
-                    >
-                      <circle
-                        class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
-                        cx="44"
-                        cy="44"
-                        fill="none"
-                        r="20.2"
-                        stroke-width="3.6"
-                      />
-                    </svg>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr
-              class="MuiTableRow-root-id AppList-tableRow-id MuiTableRow-hover-id"
-            >
-              <td
-                class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
-              >
-                <span
-                  data-tc="name"
-                >
-                  app success
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
   </div>
 </div>
 `;