Project and locale switcher changes (#3293)

* chore: removing the counters from locale and project switchers * chore: setting up the width of the selectors * chore: remove the unneccessary class * chore: adding changeset * chore: move the logic to the private components * Update the changeset Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com> * chore: code improvements --------- Co-authored-by: Nicola Molinari <nicola.molinari@commercetools.com>
commercetools · Nov 14, 2023 · 828189d · 828189d · github-actions · Nov 14, 2023
1 parent 0b53d50
commit 828189d
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 68 deletions.
diff --git a/.changeset/six-needles-kiss.md b/.changeset/six-needles-kiss.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-shell': patch
+---
+
+Removing the counters from locale and project switcher in the app bar.
diff --git a/packages/application-shell/src/components/locale-switcher/locale-switcher.tsx b/packages/application-shell/src/components/locale-switcher/locale-switcher.tsx
@@ -1,16 +1,18 @@
 import { useCallback } from 'react';
 import { css } from '@emotion/react';
 import { FormattedMessage } from 'react-intl';
-import type { SingleValueProps, ValueContainerProps } from 'react-select';
+import type {
+  SingleValueProps,
+  ValueContainerProps,
+  MenuListProps,
+} from 'react-select';
+import { components } from 'react-select';
 import AccessibleHidden from '@commercetools-uikit/accessible-hidden';
 import { designTokens } from '@commercetools-uikit/design-system';
 import { WorldIcon } from '@commercetools-uikit/icons';
 import SelectInput from '@commercetools-uikit/select-input';
 import messages from './messages';
 
-type CustomSingleValueProps = SingleValueProps & {
-  localeCount: number;
-};
 type Props = {
   projectDataLocale: string;
   setProjectDataLocale: (locale: string) => void;
@@ -19,7 +21,7 @@ type Props = {
 
 const LOCALE_SWITCHER_LABEL_ID = 'locale-switcher-label';
 
-export const SingleValue = (props: CustomSingleValueProps) => {
+export const SingleValue = (props: SingleValueProps) => {
   return (
     <div
       css={css`
@@ -38,21 +40,6 @@ export const SingleValue = (props: CustomSingleValueProps) => {
       >
         {props.children}
       </span>
-      <span
-        css={css`
-          width: 26px;
-          height: 26px;
-          border-radius: 100%;
-          background: ${designTokens.colorNeutral};
-          color: ${designTokens.colorSurface};
-          font-size: ${designTokens.fontSize30};
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        `}
-      >
-        {props.localeCount}
-      </span>
     </div>
   );
 };
@@ -66,6 +53,19 @@ const PatchedValueContainer = (props: ValueContainerProps) => (
 );
 PatchedValueContainer.displayName = 'PatchedValueContainer';
 
+const CustomMenuList = (props: MenuListProps) => {
+  return (
+    <div
+      css={css`
+        width: max-content;
+        max-width: ${designTokens.constraint6};
+      `}
+    >
+      <components.MenuList {...props}>{props.children}</components.MenuList>
+    </div>
+  );
+};
+
 const LocaleSwitcher = (props: Props) => {
   const { setProjectDataLocale } = props;
   const handleSelection = useCallback(
@@ -75,12 +75,7 @@ const LocaleSwitcher = (props: Props) => {
     [setProjectDataLocale]
   );
   return (
-    <div
-      css={css`
-        position: relative;
-        width: ${designTokens.constraint4};
-      `}
-    >
+    <div>
       <AccessibleHidden>
         <span id={LOCALE_SWITCHER_LABEL_ID}>
           <FormattedMessage {...messages.localesLabel} />
@@ -96,17 +91,14 @@ const LocaleSwitcher = (props: Props) => {
           value: locale,
         }))}
         components={{
-          SingleValue: (valueProps: SingleValueProps) => (
-            <SingleValue
-              {...valueProps}
-              localeCount={props.availableLocales.length}
-            />
-          ),
+          SingleValue,
           ValueContainer: PatchedValueContainer,
+          MenuList: CustomMenuList,
         }}
         isClearable={false}
         backspaceRemovesValue={false}
         isSearchable={false}
+        horizontalConstraint={'auto'}
       />
     </div>
   );

diff --git a/packages/application-shell/src/components/project-switcher/project-switcher.tsx b/packages/application-shell/src/components/project-switcher/project-switcher.tsx
@@ -1,7 +1,12 @@
 import { css } from '@emotion/react';
 import memoize from 'memoize-one';
 import { FormattedMessage, useIntl } from 'react-intl';
-import type { OptionProps, ValueContainerProps } from 'react-select';
+import type {
+  OptionProps,
+  ValueContainerProps,
+  MenuListProps,
+} from 'react-select';
+import { components } from 'react-select';
 import {
   useMcQuery,
   oidcStorage,
@@ -30,16 +35,10 @@ type Props = {
 type OptionType = Pick<TProject, 'key' | 'name' | 'suspension' | 'expiry'> & {
   label: string;
 };
-type CustomValueContainerProps = ValueContainerProps & {
-  projectCount: number;
-};
 
 const PROJECT_SWITCHER_LABEL_ID = 'project-switcher-label';
 
-export const ProjectSwitcherValueContainer = ({
-  projectCount,
-  ...restProps
-}: CustomValueContainerProps) => {
+export const ValueContainer = ({ ...restProps }: ValueContainerProps) => {
   return (
     <div
       css={css`
@@ -57,21 +56,6 @@ export const ProjectSwitcherValueContainer = ({
           {restProps.children}
         </SelectInput.ValueContainer>
       </div>
-      <span
-        css={css`
-          width: 26px;
-          height: 26px;
-          border-radius: 100%;
-          background: ${designTokens.colorNeutral};
-          color: ${designTokens.colorSurface};
-          font-size: ${designTokens.fontSize30};
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        `}
-      >
-        {projectCount}
-      </span>
     </div>
   );
 };
@@ -148,6 +132,19 @@ const mapProjectsToOptions = memoize((projects) =>
   }))
 );
 
+const CustomMenuList = (props: MenuListProps) => {
+  return (
+    <div
+      css={css`
+        width: max-content;
+        max-width: ${designTokens.constraint6};
+      `}
+    >
+      <components.MenuList {...props}>{props.children}</components.MenuList>
+    </div>
+  );
+};
+
 const redirectTo = (targetUrl: string) => location.replace(targetUrl);
 
 const ProjectSwitcher = (props: Props) => {
@@ -165,11 +162,7 @@ const ProjectSwitcher = (props: Props) => {
   if (loading) return null;
 
   return (
-    <div
-      css={css`
-        width: ${designTokens.constraint6};
-      `}
-    >
+    <div>
       <AccessibleHidden>
         <span id={PROJECT_SWITCHER_LABEL_ID}>
           <FormattedMessage {...messages.projectsLabel} />
@@ -201,19 +194,14 @@ const ProjectSwitcher = (props: Props) => {
         }}
         components={{
           Option: ProjectSwitcherOption,
-          ValueContainer: (valueContainerProps) => (
-            <ProjectSwitcherValueContainer
-              {...valueContainerProps}
-              projectCount={
-                (data && data.user && data.user.projects.results.length) || 0
-              }
-            />
-          ),
+          ValueContainer,
+          MenuList: CustomMenuList,
         }}
         isClearable={false}
         backspaceRemovesValue={false}
         placeholder={intl.formatMessage(messages.searchPlaceholder)}
         noOptionsMessage={() => intl.formatMessage(messages.noResults)}
+        horizontalConstraint={'auto'}
       />
     </div>
   );