From 5c30c8d4678e7424c163157235a9d8f5498f23ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Tue, 12 Mar 2024 14:56:13 +0100
Subject: [PATCH] Change "Go to Saleor Cloud" copy and icon (#4721)

* Change back icon to cloud and update copy

* Add changeset

* Optimize icon

* Update tests
---
 .changeset/cool-lizards-compete.md            |  5 ++++
 locale/defaultMessages.json                   |  6 ++---
 src/components/Sidebar/Sidebar.test.tsx       |  8 +++---
 .../Sidebar/menu/EnvironmentLink.tsx          | 11 +++++---
 src/icons/Cloud.tsx                           | 25 +++++++++++++++++++
 5 files changed, 44 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/cool-lizards-compete.md
 create mode 100644 src/icons/Cloud.tsx

diff --git a/.changeset/cool-lizards-compete.md b/.changeset/cool-lizards-compete.md
new file mode 100644
index 00000000000..f5a15f09d72
--- /dev/null
+++ b/.changeset/cool-lizards-compete.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Replace back icon with cloud one in sidebar return to cloud link, update copy to just Saleor Cloud
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 63a6fa7a4f6..11a3556a0de 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -2380,9 +2380,6 @@
     "context": "delete app",
     "string": "Deleting {name}, you will remove installation of the app. If you are paying for app subscription, remember to unsubscribe from the app in Saleor Marketplace. Are you sure you want to delete the app?"
   },
-  "EXqb2l": {
-    "string": "Go to Saleor Cloud"
-  },
   "EY/jqC": {
     "string": "Last delivery attempt:"
   },
@@ -2989,6 +2986,9 @@
     "context": "description",
     "string": "Use Saleor Cloud to access Saleor Apps"
   },
+  "IF2KbT": {
+    "string": "Saleor Cloud"
+  },
   "IFWHn0": {
     "context": "error message",
     "string": "Billing address is not set"
diff --git a/src/components/Sidebar/Sidebar.test.tsx b/src/components/Sidebar/Sidebar.test.tsx
index 15764c3612b..5d579d61066 100644
--- a/src/components/Sidebar/Sidebar.test.tsx
+++ b/src/components/Sidebar/Sidebar.test.tsx
@@ -63,7 +63,7 @@ const Wrapper = ({ children }: { children: ReactNode }) => {
 };
 
 describe("Sidebar", () => {
-  it('shouldd render "Go to Saleor Cloud" link when is cloud instance', () => {
+  it('shouldd render "Saleor Cloud" link when is cloud instance', () => {
     // Arrange
     (useCloud as jest.Mock).mockImplementation(() => ({
       isAuthenticatedViaCloud: true,
@@ -73,10 +73,10 @@ describe("Sidebar", () => {
     render(<Sidebar />, { wrapper: Wrapper });
 
     // Assert
-    expect(screen.getByText("Go to Saleor Cloud")).toBeInTheDocument();
+    expect(screen.getByText("Saleor Cloud")).toBeInTheDocument();
   });
 
-  it('shouldd not render "Go to Saleor Cloud" link when is not cloud instance', () => {
+  it('shouldd not render "Saleor Cloud" link when is not cloud instance', () => {
     // Arrange
     (useCloud as jest.Mock).mockImplementation(() => ({
       isAuthenticatedViaCloud: false,
@@ -86,7 +86,7 @@ describe("Sidebar", () => {
     render(<Sidebar />, { wrapper: Wrapper });
 
     // Assert
-    expect(screen.queryByText("Go to Saleor Cloud")).not.toBeInTheDocument();
+    expect(screen.queryByText("Saleor Cloud")).not.toBeInTheDocument();
   });
 
   it("should render keyboard shortcuts", () => {
diff --git a/src/components/Sidebar/menu/EnvironmentLink.tsx b/src/components/Sidebar/menu/EnvironmentLink.tsx
index ae403fbd052..3604f99e669 100644
--- a/src/components/Sidebar/menu/EnvironmentLink.tsx
+++ b/src/components/Sidebar/menu/EnvironmentLink.tsx
@@ -1,4 +1,5 @@
-import { ArrowLeftIcon, Box, Text } from "@saleor/macaw-ui-next";
+import { Cloud } from "@dashboard/icons/Cloud";
+import { Box, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -12,20 +13,22 @@ export const EnvironmentLink = () => {
       as="a"
       href={envLink}
       target="__blank"
+      color="default2"
       gap={3}
       display="flex"
       data-test-id="menu-item-label-env"
       alignItems="center"
     >
-      <ArrowLeftIcon color="default2" size="medium" />
+      <Box __width={20} __height={20}>
+        <Cloud />
+      </Box>
       <Text
         size="small"
         variant="bodyEmp"
         fontStyle="italic"
-        color="default2"
         fontSize="captionSmall"
       >
-        <FormattedMessage defaultMessage="Go to Saleor Cloud" id="EXqb2l" />
+        <FormattedMessage defaultMessage="Saleor Cloud" id="IF2KbT" />
       </Text>
     </Box>
   );
diff --git a/src/icons/Cloud.tsx b/src/icons/Cloud.tsx
new file mode 100644
index 00000000000..c6fc6bcd072
--- /dev/null
+++ b/src/icons/Cloud.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+export const Cloud = () => (
+  <svg
+    fill="none"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    data-macaw-ui-candidate
+  >
+    <g clipPath="url(#a)">
+      <path
+        d="M15 8.333h-1.05a6.667 6.667 0 1 0-6.45 8.334H15a4.167 4.167 0 1 0 0-8.334Z"
+        stroke="currentColor"
+        strokeWidth="1.667"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h20v20H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);