From 2eec2081447c9a1d98cfde8cf4d50989da9d058c Mon Sep 17 00:00:00 2001
From: Wojciech Mista <wojciech.mista@saleor.io>
Date: Thu, 21 Oct 2021 13:25:24 +0200
Subject: [PATCH] Fix channel picker hiding in resend code modal bug (#1479)

* Replace savebar with actionbar

* Bump macaw version to 0.2.5

* Update tests
---
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 src/components/AppLayout/AppLayout.tsx        |   4 +-
 .../__snapshots__/Stories.test.ts.snap        | 210 +++++++++++++++++-
 4 files changed, 209 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e97e32667..86cfd4ff1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5166,9 +5166,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.2.3.tgz",
-      "integrity": "sha512-9vcjY27lbxmySEnesJIefjjZAb/H8Hqm0AtCLUx6gZA2gvUkmJWQuYqcUljTY5VKEIuBpsG9BJtItRTWhQUG9g==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.2.5.tgz",
+      "integrity": "sha512-2/SvxFSV+xrqp2ZZXGRoZuL6dsOv4EeXKuawu2UiBcVhvNX0ikkGDHk1GWJAvjgeVbSsVCobJmlldss93DZSUA==",
       "requires": {
         "clsx": "^1.1.1",
         "lodash": "^4.17.21",
diff --git a/package.json b/package.json
index 174c46514..08602877a 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.11.4",
-    "@saleor/macaw-ui": "^0.2.3",
+    "@saleor/macaw-ui": "^0.2.5",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
     "@uiw/react-color-hue": "0.0.34",
diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
index f27f1c4dd..1a4dc9f72 100644
--- a/src/components/AppLayout/AppLayout.tsx
+++ b/src/components/AppLayout/AppLayout.tsx
@@ -7,8 +7,8 @@ import {
   SaleorTheme,
   Sidebar,
   SidebarDrawer,
+  useActionBar,
   useBacklink,
-  useSavebar,
   useTheme
 } from "@saleor/macaw-ui";
 import { isDarkTheme } from "@saleor/misc";
@@ -122,7 +122,7 @@ interface AppLayoutProps {
 const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const classes = useStyles({});
   const { themeType, setTheme } = useTheme();
-  const { anchor: appActionAnchor, docked } = useSavebar();
+  const { anchor: appActionAnchor, docked } = useActionBar();
   const appHeaderAnchor = useBacklink();
   const { logout, user } = useUser();
   const navigate = useNavigator();
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 5dabde5c4..5c5d58005 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -60303,7 +60303,35 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
         <div
           class="Alert-container-id"
         >
-          <div />
+          <div>
+            <svg
+              fill="none"
+              height="40"
+              viewBox="0 0 40 40"
+              width="40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="20"
+                cy="20"
+                fill="white"
+                r="20"
+              />
+              <circle
+                cx="20"
+                cy="20"
+                r="14"
+                stroke="#FFB84E"
+                stroke-width="4"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
+                fill="#FFB84E"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
           <div
             class="Alert-content-id"
           >
@@ -116496,7 +116524,35 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
         <div
           class="Alert-container-id"
         >
-          <div />
+          <div>
+            <svg
+              fill="none"
+              height="40"
+              viewBox="0 0 40 40"
+              width="40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="20"
+                cy="20"
+                fill="white"
+                r="20"
+              />
+              <circle
+                cx="20"
+                cy="20"
+                r="14"
+                stroke="#FFB84E"
+                stroke-width="4"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
+                fill="#FFB84E"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
           <div
             class="Alert-content-id"
           >
@@ -153535,7 +153591,35 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
         <div
           class="Alert-container-id"
         >
-          <div />
+          <div>
+            <svg
+              fill="none"
+              height="40"
+              viewBox="0 0 40 40"
+              width="40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="20"
+                cy="20"
+                fill="white"
+                r="20"
+              />
+              <circle
+                cx="20"
+                cy="20"
+                r="14"
+                stroke="#FFB84E"
+                stroke-width="4"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
+                fill="#FFB84E"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
           <div
             class="Alert-content-id"
           >
@@ -200625,7 +200709,35 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                 <div
                   class="Alert-container-id"
                 >
-                  <div />
+                  <div>
+                    <svg
+                      fill="none"
+                      height="40"
+                      viewBox="0 0 40 40"
+                      width="40"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        cx="20"
+                        cy="20"
+                        fill="white"
+                        r="20"
+                      />
+                      <circle
+                        cx="20"
+                        cy="20"
+                        r="14"
+                        stroke="#FFB84E"
+                        stroke-width="4"
+                      />
+                      <path
+                        clip-rule="evenodd"
+                        d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
+                        fill="#FFB84E"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
                   <div
                     class="Alert-content-id"
                   >
@@ -220396,7 +220508,35 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
         <div
           class="Alert-container-id"
         >
-          <div />
+          <div>
+            <svg
+              fill="none"
+              height="40"
+              viewBox="0 0 40 40"
+              width="40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="20"
+                cy="20"
+                fill="white"
+                r="20"
+              />
+              <circle
+                cx="20"
+                cy="20"
+                r="14"
+                stroke="#FFB84E"
+                stroke-width="4"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
+                fill="#FFB84E"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
           <div
             class="Alert-content-id"
           >
@@ -253347,7 +253487,35 @@ exports[`Storyshots Views / Staff / Staff members limits reached 1`] = `
         <div
           class="Alert-container-id"
         >
-          <div />
+          <div>
+            <svg
+              fill="none"
+              height="40"
+              viewBox="0 0 40 40"
+              width="40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="20"
+                cy="20"
+                fill="white"
+                r="20"
+              />
+              <circle
+                cx="20"
+                cy="20"
+                r="14"
+                stroke="#FFB84E"
+                stroke-width="4"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
+                fill="#FFB84E"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
           <div
             class="Alert-content-id"
           >
@@ -261369,7 +261537,35 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
         <div
           class="Alert-container-id"
         >
-          <div />
+          <div>
+            <svg
+              fill="none"
+              height="40"
+              viewBox="0 0 40 40"
+              width="40"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="20"
+                cy="20"
+                fill="white"
+                r="20"
+              />
+              <circle
+                cx="20"
+                cy="20"
+                r="14"
+                stroke="#FFB84E"
+                stroke-width="4"
+              />
+              <path
+                clip-rule="evenodd"
+                d="M19.5 11C18.6716 11 18 11.6716 18 12.5V20.5C18 21.3284 18.6716 22 19.5 22H20.5C21.3284 22 22 21.3284 22 20.5V12.5C22 11.6716 21.3284 11 20.5 11H19.5ZM19.5 25C18.6716 25 18 25.6716 18 26.5V27.5C18 28.3284 18.6716 29 19.5 29H20.5C21.3284 29 22 28.3284 22 27.5V26.5C22 25.6716 21.3284 25 20.5 25H19.5Z"
+                fill="#FFB84E"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
           <div
             class="Alert-content-id"
           >