feat: New navigation system

.github/workflows/publish.yml

@@ -274,7 +274,7 @@ jobs:
                 "targets": "[\"wire-webapp-master-al2\"]"
               },
               "new-navigation": {
-                "targets": "[\"wire-webapp-edge-al2\"]"
+                "targets": "[\"wire-webapp-edge\"]"
               },
               "production": {
                 "targets": "[\"wire-webapp-prod-al2\"]"

charts/webapp/values.yaml

@@ -2,11 +2,11 @@
 replicaCount: 1
 resources:
   requests:
-    memory: "128Mi"
-    cpu: "100m"
+    memory: '128Mi'
+    cpu: '100m'
   limits:
-    memory: "512Mi"
-    cpu: "1"
+    memory: '512Mi'
+    cpu: '1'
 image:
   repository: quay.io/wire/webapp
   # tag: override version defined in Chart.appVersion

server/config/client.config.ts

@@ -67,7 +67,7 @@
       SHOW_LOADING_INFORMATION: env.FEATURE_SHOW_LOADING_INFORMATION == 'true',
       USE_CORE_CRYPTO: env.FEATURE_USE_CORE_CRYPTO == 'true',
       MAX_USERS_TO_PING_WITHOUT_ALERT:
         (env.FEATURE_MAX_USERS_TO_PING_WITHOUT_ALERT && Number(env.FEATURE_MAX_USERS_TO_PING_WITHOUT_ALERT)) || 4,
     },
     MAX_GROUP_PARTICIPANTS: (env.MAX_GROUP_PARTICIPANTS && Number(env.MAX_GROUP_PARTICIPANTS)) || 500,
     MAX_VIDEO_PARTICIPANTS: (env.MAX_VIDEO_PARTICIPANTS && Number(env.MAX_VIDEO_PARTICIPANTS)) || 4,
@@ -96,6 +96,7 @@
         FEDERATION_STOP: env.URL_SUPPORT_FEDERATION_STOP,
         HISTORY: env.URL_SUPPORT_HISTORY,
         INDEX: env.URL_SUPPORT_INDEX,
+        FOLDERS: env.URL_SUPPORT_FOLDERS,
         LEARN_MORE_ABOUT_GUEST_LINKS: env.URL_LEARN_MORE_ABOUT_GUEST_LINKS,
         LEGAL_HOLD_BLOCK: env.URL_SUPPORT_LEGAL_HOLD_BLOCK,
         MICROPHONE_ACCESS_DENIED: env.URL_SUPPORT_MICROPHONE_ACCESS_DENIED,
@@ -108,6 +109,8 @@
         PRIVACY_WHY: env.URL_SUPPORT_PRIVACY_WHY,
         SCREEN_ACCESS_DENIED: env.URL_SUPPORT_SCREEN_ACCESS_DENIED,
         SYSTEM_KEYCHAIN_ACCESS: env.URL_SUPPORT_SYSTEM_KEYCHAIN_ACCESS,
+        URL_SUPPORT_FAVORITES: env.URL_SUPPORT_FAVORITES,
+        URL_SUPPORT_FOLDERS: env.URL_SUPPORT_FOLDERS,
       },
       TEAMS_BASE: env.URL_TEAMS_BASE,
       TEAMS_CREATE: env.URL_TEAMS_CREATE,

server/config/env.ts

@@ -227,6 +227,8 @@ export type Env = {
   /** Sets Support URLs to specific pages */
   URL_SUPPORT_INDEX: string;
 
+  URL_SUPPORT_FOLDERS: string;
+
   URL_SUPPORT_BUG_REPORT: string;
 
   URL_SUPPORT_CALLING: string;
@@ -255,6 +257,8 @@ export type Env = {
 
   URL_SUPPORT_SYSTEM_KEYCHAIN_ACCESS: string;
 
+  URL_SUPPORT_FAVORITES: string;
+
   URL_LEARN_MORE_ABOUT_GUEST_LINKS: string;
 
   URL_SUPPORT_NON_FEDERATING_INFO: string;

src/i18n/en-US.json

@@ -1405,7 +1405,6 @@
   "searchServiceConfirmButton": "Open Conversation",
   "searchServicePlaceholder": "Search by name",
   "searchServices": "Services",
-  "searchTeamGroups": "Team conversations",
   "searchTeamMembers": "Team members",
   "searchTopPeople": "Top people",
   "searchTrySearch": "Find people by\nname or username",

src/script/components/AvailabilityIcon/Availability.styles.tsx

@@ -0,0 +1,60 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {CSSObject} from '@emotion/react';
+
+import {Availability as AvailabilityProp} from '@wireapp/protocol-messaging';
+
+import {AVATAR_SIZE} from 'Components/Avatar';
+import {CSS_SQUARE} from 'Util/CSSMixin';
+
+const availabilityStateColors: Partial<Record<AvailabilityProp.Type, string>> = {
+  [AvailabilityProp.Type.AVAILABLE]: 'var(--green-500)',
+  [AvailabilityProp.Type.AWAY]: 'var(--red-500)',
+  [AvailabilityProp.Type.BUSY]: 'var(--amber-500)',
+};
+
+const getSquareIconSize = (): Partial<Record<AVATAR_SIZE, number>> => ({
+  [AVATAR_SIZE.X_SMALL]: 6,
+  [AVATAR_SIZE.SMALL]: 7,
+  [AVATAR_SIZE.MEDIUM]: 10,
+  [AVATAR_SIZE.LARGE]: 12,
+});
+
+export const iconStyles = (availabilityState: AvailabilityProp.Type, avatarSize: AVATAR_SIZE): CSSObject => {
+  const squareIconSize = getSquareIconSize();
+
+  return {
+    ...CSS_SQUARE(squareIconSize?.[avatarSize] || 8),
+    fill: availabilityStateColors[availabilityState],
+    stroke: availabilityStateColors[availabilityState],
+    borderRadius: '50%',
+  };
+};
+
+export const AvailabilityIcon: CSSObject = {
+  background: 'var(--app-bg)',
+  border: '2px solid var(--app-bg)',
+  borderRadius: '50%',
+  display: 'grid',
+  placeContent: 'center',
+  position: 'absolute',
+  bottom: '-2px',
+  right: '-2px',
+};

src/script/components/AvailabilityIcon/Availability.tsx

@@ -0,0 +1,67 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {ReactNode} from 'react';
+
+import {Availability as AvailabilityProp} from '@wireapp/protocol-messaging';
+
+import {AVATAR_SIZE} from 'Components/Avatar';
+import {Icon} from 'Components/Icon';
+
+import * as styles from './Availability.styles';
+
+const availabilityIconBaseProps = {
+  'data-uie-name': 'status-availability-icon',
+};
+
+const availabilityIconRenderer: Record<AvailabilityProp.Type, (avatarSize: AVATAR_SIZE) => ReactNode> = {
+  [AvailabilityProp.Type.AVAILABLE]: avatarSize => (
+    <Icon.AvailabilityAvailable
+      {...availabilityIconBaseProps}
+      css={styles.iconStyles(AvailabilityProp.Type.AVAILABLE, avatarSize)}
+      data-uie-value="available"
+    />
+  ),
+  [AvailabilityProp.Type.AWAY]: avatarSize => (
+    <Icon.AvailabilityAway
+      {...availabilityIconBaseProps}
+      css={styles.iconStyles(AvailabilityProp.Type.AWAY, avatarSize)}
+      data-uie-value="away"
+    />
+  ),
+  [AvailabilityProp.Type.BUSY]: avatarSize => (
+    <Icon.AvailabilityBusy
+      {...availabilityIconBaseProps}
+      css={styles.iconStyles(AvailabilityProp.Type.BUSY, avatarSize)}
+      data-uie-value="busy"
+    />
+  ),
+  [AvailabilityProp.Type.NONE]: () => null,
+};
+
+interface AvailabilityIconProps {
+  availability: AvailabilityProp.Type;
+  avatarSize: AVATAR_SIZE;
+}
+
+export const AvailabilityIcon = ({availability, avatarSize}: AvailabilityIconProps) => (
+  <div css={styles.AvailabilityIcon} data-uie-name="status-availability" data-uie-value={availability}>
+    {availabilityIconRenderer[availability](avatarSize)}
+  </div>
+);

src/style/components/availability-state.less → src/script/components/AvailabilityIcon/index.ts

@@ -1,6 +1,6 @@
 /*
  * Wire
- * Copyright (C) 2018 Wire Swiss GmbH
+ * Copyright (C) 2024 Wire Swiss GmbH
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -17,11 +17,4 @@
  *
  */
 
-.availability-state {
-  display: flex;
-  align-items: center;
-
-  .conversation-badges {
-    margin-left: 4px;
-  }
-}
+export * from './Availability';

src/script/components/Avatar/Avatar.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {FC, HTMLProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyBoardEvent} from 'react';
+import {HTMLProps, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyBoardEvent} from 'react';
 
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {handleKeyDown, isKeyboardEvent} from 'Util/KeyboardUtil';
@@ -79,17 +79,18 @@ export interface AvatarProps extends HTMLProps<HTMLDivElement> {
   noFilter?: boolean;
   isResponsive?: boolean;
   onAvatarClick?: (participant: User | ServiceEntity) => void;
+  hideAvailabilityStatus?: boolean;
 }
 
-const Avatar: FC<AvatarProps> = ({
+const Avatar = ({
   avatarSize = AVATAR_SIZE.LARGE,
   noBadge = false,
   noFilter = false,
   onAvatarClick,
   participant,
   isResponsive = false,
   ...props
-}) => {
+}: AvatarProps) => {
   const handleAvatarInteraction = (
     event: ReactMouseEvent<HTMLDivElement, MouseEvent> | ReactKeyBoardEvent<HTMLDivElement>,
   ) => {

src/script/components/Avatar/AvatarWrapper.tsx

@@ -42,7 +42,6 @@ const AvatarWrapper: React.FunctionComponent<AvatarWrapperProps> = ({
         ...CSS_SQUARE(avatarDiameter),
         color,
         display: 'inline-block',
-        overflow: 'hidden',
         position: 'relative',
         transform: 'translateZ(0)',
         userSelect: 'none',

src/script/components/Avatar/UserAvatar.test.tsx → src/script/components/Avatar/UserAvatar/UserAvatar.test.tsx

@@ -19,12 +19,14 @@
 
 import {render} from '@testing-library/react';
 
-import {UserAvatar} from './UserAvatar';
+import {Availability} from '@wireapp/protocol-messaging';
+
+import {TeamState} from 'src/script/team/TeamState';
 
-import {User} from '../../entity/User';
+import {UserAvatar} from './UserAvatar';
 
-import {AVATAR_SIZE, STATE} from '.';
-jest.mock('../../auth/util/SVGProvider');
+import {User} from '../../../entity/User';
+import {AVATAR_SIZE, STATE} from '../Avatar';
 
 describe('UserAvatar', () => {
   it('shows participant initials if no avatar is defined', async () => {
@@ -102,4 +104,73 @@ describe('UserAvatar', () => {
 
     expect(badgeIcon.getAttribute('data-uie-value')).toEqual(STATE.PENDING);
   });
+  it('renders available icon', async () => {
+    const participant = new User('id');
+
+    const props = {
+      avatarSize: AVATAR_SIZE.LARGE,
+      participant: participant,
+      state: STATE.NONE,
+      teamState: {isInTeam: () => true} as unknown as TeamState,
+    };
+
+    participant.availability(Availability.Type.AVAILABLE);
+    const {getByTestId} = render(<UserAvatar {...props} />);
+
+    const statusAvailabilityIcon = getByTestId('status-availability-icon');
+    expect(statusAvailabilityIcon.getAttribute('data-uie-value')).toEqual('available');
+  });
+
+  it('renders away icon', async () => {
+    const participant = new User('id');
+
+    const props = {
+      avatarSize: AVATAR_SIZE.LARGE,
+      participant: participant,
+      state: STATE.NONE,
+      teamState: {isInTeam: () => true} as unknown as TeamState,
+    };
+
+    participant.availability(Availability.Type.AWAY);
+
+    const {getByTestId} = render(<UserAvatar {...props} />);
+
+    const statusAvailabilityIcon = getByTestId('status-availability-icon');
+    expect(statusAvailabilityIcon.getAttribute('data-uie-value')).toEqual('away');
+  });
+
+  it('renders busy icon', async () => {
+    const participant = new User('id');
+
+    const props = {
+      avatarSize: AVATAR_SIZE.LARGE,
+      participant: participant,
+      state: STATE.NONE,
+      teamState: {isInTeam: () => true} as unknown as TeamState,
+    };
+
+    participant.availability(Availability.Type.BUSY);
+
+    const {getByTestId} = render(<UserAvatar {...props} />);
+
+    const statusAvailabilityIcon = getByTestId('status-availability-icon');
+    expect(statusAvailabilityIcon.getAttribute('data-uie-value')).toEqual('busy');
+  });
+
+  it('does not show availability icon if param is false', async () => {
+    const participant = new User('id');
+
+    const props = {
+      avatarSize: AVATAR_SIZE.LARGE,
+      participant: participant,
+      state: STATE.NONE,
+      teamState: {isInTeam: () => true} as unknown as TeamState,
+    };
+
+    participant.availability(Availability.Type.AVAILABLE);
+    const {queryByTestId} = render(<UserAvatar {...props} hideAvailabilityStatus={true} />);
+
+    const statusAvailabilityIcon = queryByTestId('status-availability-icon');
+    expect(statusAvailabilityIcon).toBeNull();
+  });
 });