chore(workspaces): create button and test (#3586)

* chore(workspaces): create button and test

* chore(spaces): remove superfluous container

* chore(workspaces): shorten import

* chore(spaces): use design token

* chore(workspaces): sane test, correct filename typo

* chore(spaces): toggle flag

* chore(workspaces): add changeset

* chore(spaces): feature name is constant

* chore(spaces): export feature name

* chore(spaces): move nav button outside of container

* chore(spaces): simplify approach

* fix: imports

---------

Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>

.changeset/lucky-hornets-smash.md

@@ -0,0 +1,6 @@
+---
+'@commercetools-frontend/application-shell': minor
+'@commercetools-frontend/constants': minor
+---
+
+Adds functionality to the AppBar component for an ongoing feature effort

packages/application-shell/package.json

@@ -60,6 +60,7 @@
     "@commercetools-uikit/select-input": "^19.9.0",
     "@commercetools-uikit/spacings": "^19.9.0",
     "@commercetools-uikit/text": "^19.9.0",
+    "@commercetools-uikit/tooltip": "^19.9.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@flopflip/combine-adapters": "14.0.2",

packages/application-shell/src/components/app-bar/app-bar.tsx

@@ -10,6 +10,7 @@ import LoadingPlaceholder from '../loading-placeholder';
 import ProjectSwitcher from '../project-switcher';
 import { REQUESTS_IN_FLIGHT_LOADER_DOM_ID } from '../requests-in-flight-loader/constants';
 import UserSettingsMenu from '../user-settings-menu';
+import WorkspacesNavigationButton from '../workspaces-navigation-button';
 
 type Props = {
   user: TFetchLoggedInUserQuery['user'];
@@ -116,6 +117,7 @@ const AppBar = (props: Props) => {
         `}
       >
         <div id={CONTAINERS.LEFT_OF_PROFILE}></div>
+        <WorkspacesNavigationButton />
         {props.user ? (
           <UserSettingsMenu
             language={props.user.language}

packages/application-shell/src/components/workspaces-navigation-button/index.ts

@@ -0,0 +1 @@
+export { default } from './workspaces-navigation-button';

packages/application-shell/src/components/workspaces-navigation-button/messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  tooltip: {
+    id: 'WorkspacesNavigationButton.tooltip',
+    description: 'The tooltip for the Workspaces navigation button',
+    defaultMessage: 'Switch between commercetools products',
+  },
+});

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

@@ -0,0 +1,31 @@
+import { featureFlags } from '@commercetools-frontend/constants';
+import { screen, renderApp } from '../../test-utils';
+import WorkspacesNavigationButton, {
+  FEATURE_NAME,
+} from './workspaces-navigation-button';
+
+describe('rendering', () => {
+  it('should render the button when the feature flag is enabled and projectKey is provided', async () => {
+    renderApp(<WorkspacesNavigationButton />, {
+      flags: {
+        [featureFlags.ENABLE_WORKSPACES_UI]: { value: true },
+      },
+    });
+
+    const button = await screen.findByRole('button', {
+      name: FEATURE_NAME,
+    });
+
+    expect(button).toHaveAttribute('href', `/workspaces`);
+  });
+
+  it('should not render the button when the feature flag is disabled', () => {
+    renderApp(<WorkspacesNavigationButton />, {
+      flags: {
+        [featureFlags.ENABLE_WORKSPACES_UI]: { value: false },
+      },
+    });
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,65 @@
+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 { 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 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 WorkspacesNavigationButton = () => {
+  const { formatMessage } = useIntl();
+  const workspacesAppBarButtonEnabled = useFlagVariation(
+    featureFlags.ENABLE_WORKSPACES_UI
+  );
+
+  // @ts-ignore It's coming from the MC API, it's an object { value: boolean }.
+  const isWorkspacesButtonEnabled = workspacesAppBarButtonEnabled?.value;
+
+  if (!isWorkspacesButtonEnabled) return null;
+
+  return (
+    <div
+      css={css`
+        margin-right: ${designTokens.spacing60};
+      `}
+    >
+      <div
+        css={css`
+          a {
+            border-radius: ${designTokens.borderRadius20};
+          }
+        `}
+      >
+        <Tooltip placement="bottom" title={formatMessage(messages.tooltip)}>
+          <SecondaryButton
+            iconLeft={(<WorkspacesLogo />) as ReactElement}
+            as={Link}
+            label={FEATURE_NAME}
+            to={'/workspaces'}
+          />
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default WorkspacesNavigationButton;

packages/constants/src/feature-toggles.ts

@@ -18,10 +18,12 @@
  */
 
 export const CUSTOM_VIEWS = 'enableCustomViews';
+export const ENABLE_WORKSPACES_UI = 'enableWorkspacesUi';
 
 export const FLAGS = {};
 
 // Long-lived feature flags, defined in the MC API.
 export const DEFAULT_FLAGS = {
   [CUSTOM_VIEWS]: { value: true },
+  [ENABLE_WORKSPACES_UI]: { value: false },
 };