fix(workspaces-button): add final icon to workspaces redirect button (#…

…3603)

* fix(workspaces-button): add final icon to workspaces redirect button

* fix(workspaces-button): add changeset

* fix(workspaces-button): pass svg as img src

* fix(workspaces-button): use location in order to refresh page

* fix(workspaces-button): replace prop to preserve styling

* fix(workspaces-button): update test

.changeset/proud-worms-smell.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-shell': patch
+'@commercetools-frontend/assets': patch
+---
+
+Adds the workspaces icon to the app-bar workspaces redirect button.

packages/application-shell/src/components/workspaces-navigation-button/workspaces-navigation-button.spec.tsx

@@ -15,8 +15,7 @@ describe('rendering', () => {
     const button = await screen.findByRole('button', {
       name: FEATURE_NAME,
     });
-
-    expect(button).toHaveAttribute('href', `/workspaces`);
+    expect(button).toBeInTheDocument();
   });
 
   it('should not render the button when the feature flag is disabled', () => {

packages/application-shell/src/components/workspaces-navigation-button/workspaces-navigation-button.tsx

@@ -1,28 +1,18 @@
-import { ReactElement } from 'react';
 import { css } from '@emotion/react';
 import { useFlagVariation } from '@flopflip/react-broadcast';
 import { useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
+import WorkspacesIcon from '@commercetools-frontend/assets/images/workspaces-icon.svg';
 import { featureFlags } from '@commercetools-frontend/constants';
 import { designTokens } from '@commercetools-uikit/design-system';
 import SecondaryButton from '@commercetools-uikit/secondary-button';
 import Tooltip from '@commercetools-uikit/tooltip';
+import location from '../../utils/location/location';
 import messages from './messages';
 
 export const FEATURE_NAME = 'Workspaces';
 
-// TODO: This logo still TBD, placeholder for now
-const WorkspacesLogo = () => {
-  return (
-    <div
-      css={css`
-        height: 22px;
-        width: 22px;
-        background-color: lightgray;
-        border-radius: 4px;
-      `}
-    />
-  );
+const WorkspacesIconComponent = () => {
+  return <img alt="workspaces icon" src={WorkspacesIcon} />;
 };
 
 const WorkspacesNavigationButton = () => {
@@ -51,10 +41,12 @@ const WorkspacesNavigationButton = () => {
       >
         <Tooltip placement="bottom" title={formatMessage(messages.tooltip)}>
           <SecondaryButton
-            iconLeft={(<WorkspacesLogo />) as ReactElement}
-            as={Link}
+            iconLeft={<WorkspacesIconComponent />}
             label={FEATURE_NAME}
-            to={'/workspaces'}
+            as="a"
+            onClick={() => {
+              location.replace('/workspaces');
+            }}
           />
         </Tooltip>
       </div>