Fix missing metaspace notification badges

Author: t3chguy

src/components/views/spaces/SpaceTreeLevel.tsx

@@ -47,6 +47,7 @@ import SpaceContextMenu from "../context_menus/SpaceContextMenu";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
+import { XOR } from "../../../@types/common";
 
 interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButton>, "title" | "onClick"> {
     space?: Room;
@@ -55,15 +56,23 @@ interface IButtonProps extends Omit<ComponentProps<typeof AccessibleTooltipButto
     selected?: boolean;
     label: string;
     contextMenuTooltip?: string;
-    notificationState?: NotificationState;
     isNarrow?: boolean;
     avatarSize?: number;
     innerRef?: RefObject<HTMLElement>;
     ContextMenuComponent?: ComponentType<ComponentProps<typeof SpaceContextMenu>>;
     onClick?(ev?: ButtonEvent): void;
 }
 
-export const SpaceButton: React.FC<IButtonProps> = ({
+type ButtonPropsWithNotification = IButtonProps & { notificationState: NotificationState } & XOR<
+        {
+            space: Room;
+        },
+        {
+            spaceKey: SpaceKey;
+        }
+    >;
+
+export const SpaceButton: React.FC<XOR<ButtonPropsWithNotification, IButtonProps>> = ({
     space,
     spaceKey,
     className,
@@ -92,9 +101,9 @@ export const SpaceButton: React.FC<IButtonProps> = ({
     }
 
     let notifBadge;
-    if (space && notificationState) {
+    if (notificationState) {
         let ariaLabel = _t("Jump to first unread room.");
-        if (space.getMyMembership() === "invite") {
+        if (space?.getMyMembership() === "invite") {
             ariaLabel = _t("Jump to first invite.");
         }
 

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>
+`;