Fix missing metaspace notification badges (#11269)

* Fix missing metaspace notification badges

* Simplify conditional types

(cherry picked from commit cdffd1c)

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -65,7 +65,7 @@ interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButto
 
 export const SpaceButton: React.FC<IButtonProps> = ({
     space,
-    spaceKey,
+    spaceKey: _spaceKey,
     className,
     selected,
     label,
@@ -82,6 +82,8 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     const [onFocus, isActive] = useRovingTabIndex(handle);
     const tabIndex = isActive ? 0 : -1;
 
+    const spaceKey = _spaceKey ?? space?.roomId;
+
     let avatar = (
         <div className="mx_SpaceButton_avatarPlaceholder">
             <div className="mx_SpaceButton_icon" />
@@ -92,16 +94,16 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     }
 
     let notifBadge;
-    if (space && notificationState) {
+    if (spaceKey && notificationState) {
         let ariaLabel = _t("Jump to first unread room.");
-        if (space.getMyMembership() === "invite") {
+        if (space?.getMyMembership() === "invite") {
             ariaLabel = _t("Jump to first invite.");
         }
 
         const jumpToNotification = (ev: MouseEvent): void => {
             ev.stopPropagation();
             ev.preventDefault();
-            SpaceStore.instance.setActiveRoomInSpace(spaceKey ?? space.roomId);
+            SpaceStore.instance.setActiveRoomInSpace(spaceKey);
         };
 
         notifBadge = (
@@ -132,7 +134,9 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     const viewSpaceHome = (): void =>
         // space is set here because of the assignment condition of onClick
         defaultDispatcher.dispatch({ action: Action.ViewRoom, room_id: space!.roomId });
-    const activateSpace = (): void => SpaceStore.instance.setActiveSpace(spaceKey ?? space?.roomId ?? "");
+    const activateSpace = (): void => {
+        if (spaceKey) SpaceStore.instance.setActiveSpace(spaceKey);
+    };
     const onClick = props.onClick ?? (selected && space ? viewSpaceHome : activateSpace);
 
     return (

test/components/views/spaces/SpaceTreeLevel-test.tsx

@@ -17,14 +17,16 @@ limitations under the License.
 import React from "react";
 import { fireEvent, getByTestId, render } from "@testing-library/react";
 
-import { stubClient, mkRoom } from "../../../test-utils";
+import { mkRoom, stubClient } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../src/dispatcher/actions";
 import { SpaceButton } from "../../../../src/components/views/spaces/SpaceTreeLevel";
 import { MetaSpace, SpaceKey } from "../../../../src/stores/spaces";
 import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
+import { StaticNotificationState } from "../../../../src/stores/notifications/StaticNotificationState";
+import { NotificationColor } from "../../../../src/stores/notifications/NotificationColor";
 
 jest.mock("../../../../src/stores/spaces/SpaceStore", () => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -99,5 +101,22 @@ describe("SpaceButton", () => {
             // Re-activating the metaspace is a no-op
             expect(SpaceStore.instance.setActiveSpace).toHaveBeenCalledWith(MetaSpace.People);
         });
+
+        it("should render notificationState if one is provided", () => {
+            const notificationState = new StaticNotificationState(null, 8, NotificationColor.Grey);
+
+            const { container, asFragment } = render(
+                <SpaceButton
+                    spaceKey={MetaSpace.People}
+                    selected={true}
+                    label="People"
+                    data-testid="create-space-button"
+                    notificationState={notificationState}
+                />,
+            );
+
+            expect(container.querySelector(".mx_NotificationBadge_count")).toHaveTextContent("8");
+            expect(asFragment()).toMatchSnapshot();
+        });
     });
 });

test/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SpaceButton metaspace should render notificationState if one is provided 1`] = `
+<DocumentFragment>
+  <div
+    aria-label="People"
+    class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_active"
+    data-testid="create-space-button"
+    role="button"
+    tabindex="-1"
+  >
+    <div
+      class="mx_SpaceButton_selectionWrapper"
+    >
+      <div
+        class="mx_SpaceButton_avatarWrapper"
+      >
+        <div
+          class="mx_SpaceButton_avatarPlaceholder"
+        >
+          <div
+            class="mx_SpaceButton_icon"
+          />
+        </div>
+        <div
+          class="mx_SpacePanel_badgeContainer"
+        >
+          <div
+            class="mx_AccessibleButton mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_2char"
+            role="button"
+            tabindex="-1"
+          >
+            <span
+              class="mx_NotificationBadge_count"
+            >
+              8
+            </span>
+          </div>
+        </div>
+      </div>
+      <span
+        class="mx_SpaceButton_name"
+      >
+        People
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;