From 68e0c5ddd787987dbb623a6e0f2adb994a1797b8 Mon Sep 17 00:00:00 2001
From: Takashi Shinohara <takashi.shinohara@outlook.com>
Date: Wed, 30 Oct 2024 18:02:07 +0900
Subject: [PATCH] 2.3.1 release

---
 .../common/components/SidePanel.presenter.tsx |   3 +
 .../src/common/components/SidePanel.test.tsx  |  34 +++-
 .../__snapshots__/SidePanel.test.tsx.snap     | 188 +++++++++++++++++-
 .../team/components/ChannelMenuItem.test.tsx  |  14 ++
 .../team/components/MemberMenuItem.test.tsx   |  14 ++
 .../team/components/TagMenuItem.test.tsx      |  52 ++---
 .../ChannelMenuItem.test.tsx.snap             | 173 ++++++++++++++--
 .../MemberMenuItem.test.tsx.snap              | 185 +++++++++++++++--
 .../__snapshots__/TagMenuItem.test.tsx.snap   | 155 ++++++---------
 9 files changed, 639 insertions(+), 179 deletions(-)

diff --git a/source/client/src/common/components/SidePanel.presenter.tsx b/source/client/src/common/components/SidePanel.presenter.tsx
index 86e32de1..cb669113 100644
--- a/source/client/src/common/components/SidePanel.presenter.tsx
+++ b/source/client/src/common/components/SidePanel.presenter.tsx
@@ -23,6 +23,7 @@ import { css } from '@emotion/react';
 interface SidePanelProps {
   content?: React.ReactNode,
   loading?: boolean,
+  mountNode?: HTMLElement,
   open?: boolean,
   title?: React.ReactNode,
   onOpenChange?: EventHandler<boolean>
@@ -34,6 +35,7 @@ function SidePanel(props: Readonly<React.PropsWithChildren<SidePanelProps>>) {
     children,
     content,
     loading,
+    mountNode,
     open,
     title,
     onOpenChange
@@ -44,6 +46,7 @@ function SidePanel(props: Readonly<React.PropsWithChildren<SidePanelProps>>) {
       {children}
       <OverlayDrawer
         as="aside"
+        mountNode={mountNode}
         open={open}
         position="end"
         size="small"
diff --git a/source/client/src/common/components/SidePanel.test.tsx b/source/client/src/common/components/SidePanel.test.tsx
index baf7d1a4..8f77937e 100644
--- a/source/client/src/common/components/SidePanel.test.tsx
+++ b/source/client/src/common/components/SidePanel.test.tsx
@@ -12,12 +12,39 @@ import SidePanel from './SidePanel.presenter';
 import ThemeProvider from '../../providers/ThemeProvider';
 import { render } from '@testing-library/react';
 
-it('should create shapshot', async () => {
+it('should create shapshot of when loading is true', async () => {
+  const container = document.body.appendChild(document.createElement('div'));
   const params = {
+    content: (
+      <div data-testid="Content" />
+    ),
+    mountNode: container,
+    loading: true,
     open: true,
+    title: (
+      <div data-testid="Title" />
+    )
+  };
+  const { asFragment } = render(
+    <ThemeProvider>
+      <SidePanel {...params} />
+    </ThemeProvider>,
+    {
+      container
+    }
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+it('should create shapshot of when loading is false', async () => {
+  const container = document.body.appendChild(document.createElement('div'));
+  const params = {
     content: (
       <div data-testid="Content" />
     ),
+    mountNode: container,
+    loading: false,
+    open: true,
     title: (
       <div data-testid="Title" />
     )
@@ -25,7 +52,10 @@ it('should create shapshot', async () => {
   const { asFragment } = render(
     <ThemeProvider>
       <SidePanel {...params} />
-    </ThemeProvider>
+    </ThemeProvider>,
+    {
+      container
+    }
   );
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/source/client/src/common/components/__snapshots__/SidePanel.test.tsx.snap b/source/client/src/common/components/__snapshots__/SidePanel.test.tsx.snap
index 787192d5..53660159 100644
--- a/source/client/src/common/components/__snapshots__/SidePanel.test.tsx.snap
+++ b/source/client/src/common/components/__snapshots__/SidePanel.test.tsx.snap
@@ -1,7 +1,193 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should create shapshot 1`] = `
+exports[`should create shapshot of when loading is false 1`] = `
 <DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="rmnljus fui-OverlayDrawer__backdrop ___mgf8q40_1ccxybz f1euv43f"
+  />
+  .emotion-0 {
+  font-size: 1rem;
+  line-height: 1rem;
+}
+
+.emotion-1 {
+  margin-bottom: 1rem;
+}
+
+<aside
+    aria-labelledby="dialog-title-r6"
+    aria-modal="true"
+    class="fui-OverlayDrawer r7dfyj8 ___12p5wfa_jv28t00 fsqykmd f1e31b4d frppm18 f1exhnwo f1euv43f"
+    data-tabster="{"restorer":{"type":0},"modalizer":{"id":"modal-r5","isOthersAccessible":false,"isTrapped":true}}"
+    role="dialog"
+    tabindex="-1"
+  >
+    <header
+      class="fui-DrawerHeader r3ovn4i"
+      role="none"
+    >
+      <div
+        class="fui-DrawerHeaderTitle ___1g6dz7n_17w6zju f22iagw f1869bpl f122n59 fsnqrgy"
+      >
+        <h2
+          class="fui-DrawerHeaderTitle__heading fui-DialogTitle rxjm636"
+          id="dialog-title-r6"
+        >
+          <div
+            data-testid="Title"
+          />
+        </h2>
+        <div
+          class="fui-DrawerHeaderTitle__action fui-DialogTitle__action r13kcrze ___zdrx2v0_7c5v900 faqnl2i"
+        >
+          <button
+            aria-label="Close"
+            class="fui-Button r1alrhcs ___w3o4yv0_df8ghi0 fhovq9v f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1t94bn6 f1s2uweq fr80ssc f1ukrpxl fecsdlb fnwyq0v ft1hn21 fuxngvv fy5bs14 fsv2rcd f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1omzyqd f1dfjoow f1j98vj9 fj8yq94 f4xjyn1 f1et0tmh f9ddjv3 f1wi8ngl f18ktai2 fwbmr0d f44c6la"
+            type="button"
+          >
+            <span
+              class="fui-Button__icon rywnvv2"
+            >
+              <span
+                aria-hidden="true"
+                class="root_dd790ee3 emotion-0"
+              >
+                <svg
+                  class="svg_dd790ee3"
+                  focusable="false"
+                  viewBox="0 0 2048 2048"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1115 1024l690 691-90 90-691-690-691 690-90-90 690-691-690-691 90-90 691 690 691-690 90 90-690 691z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </header>
+    <div
+      class="fui-DrawerBody ri6rvx7 emotion-1"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        data-testid="Content"
+      />
+    </div>
+  </aside>
+  .emotion-0 {
+  min-height: 100vh;
+  line-height: 1.25em;
+  background-color: #f5f5f5;
+}
+
+<div
+    class="fui-FluentProvider fui-FluentProviderr4 ___jdtuxv0_17k0bs4 f19n0e5 fxugw4r f1o700av fk6fouc fkhj508 figsok6 f1i3iumi"
+    dir="ltr"
+  >
+    <div
+      class="emotion-0"
+    >
+      <span
+        hidden=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`should create shapshot of when loading is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="rmnljus fui-OverlayDrawer__backdrop ___mgf8q40_1ccxybz f1euv43f"
+  />
+  .emotion-0 {
+  font-size: 1rem;
+  line-height: 1rem;
+}
+
+.emotion-1 {
+  margin-bottom: 1rem;
+}
+
+<aside
+    aria-labelledby="dialog-title-r2"
+    aria-modal="true"
+    class="fui-OverlayDrawer r7dfyj8 ___12p5wfa_jv28t00 fsqykmd f1e31b4d frppm18 f1exhnwo f1euv43f"
+    data-tabster="{"restorer":{"type":0},"modalizer":{"id":"modal-r1","isOthersAccessible":false,"isTrapped":true}}"
+    role="dialog"
+    tabindex="-1"
+  >
+    <header
+      class="fui-DrawerHeader r3ovn4i"
+      role="none"
+    >
+      <div
+        class="fui-DrawerHeaderTitle ___1g6dz7n_17w6zju f22iagw f1869bpl f122n59 fsnqrgy"
+      >
+        <h2
+          class="fui-DrawerHeaderTitle__heading fui-DialogTitle rxjm636"
+          id="dialog-title-r2"
+        >
+          <div
+            data-testid="Title"
+          />
+        </h2>
+        <div
+          class="fui-DrawerHeaderTitle__action fui-DialogTitle__action r13kcrze ___zdrx2v0_7c5v900 faqnl2i"
+        >
+          <button
+            aria-label="Close"
+            class="fui-Button r1alrhcs ___w3o4yv0_df8ghi0 fhovq9v f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb f1t94bn6 f1s2uweq fr80ssc f1ukrpxl fecsdlb fnwyq0v ft1hn21 fuxngvv fy5bs14 fsv2rcd f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1omzyqd f1dfjoow f1j98vj9 fj8yq94 f4xjyn1 f1et0tmh f9ddjv3 f1wi8ngl f18ktai2 fwbmr0d f44c6la"
+            type="button"
+          >
+            <span
+              class="fui-Button__icon rywnvv2"
+            >
+              <span
+                aria-hidden="true"
+                class="root_dd790ee3 emotion-0"
+              >
+                <svg
+                  class="svg_dd790ee3"
+                  focusable="false"
+                  viewBox="0 0 2048 2048"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1115 1024l690 691-90 90-691-690-691 690-90-90 690-691-690-691 90-90 691 690 691-690 90 90-690 691z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </header>
+    <div
+      class="fui-DrawerBody ri6rvx7 emotion-1"
+      role="group"
+      tabindex="0"
+    >
+      <div
+        class="fui-Spinner r82apo5"
+        role="progressbar"
+      >
+        <span
+          class="fui-Spinner__spinner rvgcg50 ___1xxu43e_eahmz60 f1d2rq10 f1szoe96 fb52u90"
+        >
+          <span
+            class="fui-Spinner__spinnerTail rxov3xa"
+          />
+        </span>
+      </div>
+    </div>
+  </aside>
   .emotion-0 {
   min-height: 100vh;
   line-height: 1.25em;
diff --git a/source/client/src/features/team/components/ChannelMenuItem.test.tsx b/source/client/src/features/team/components/ChannelMenuItem.test.tsx
index 2c174323..baea1c4d 100644
--- a/source/client/src/features/team/components/ChannelMenuItem.test.tsx
+++ b/source/client/src/features/team/components/ChannelMenuItem.test.tsx
@@ -14,6 +14,20 @@ import { MembershipType } from '../../../types/Entity';
 import ThemeProvider from '../../../providers/ThemeProvider';
 import { render } from '@testing-library/react';
 
+jest.mock('../../../common/components/SidePanel', () =>
+  function SidePanel({ content, renderer }: { content: React.ReactNode, renderer: (props: unknown) => React.ReactNode }) {
+    return (
+      <div data-testid="SidePanel">
+        <div data-testid="Content">
+          {content}
+        </div>
+        <div data-testid="Renderer">
+          {renderer({})}
+        </div>
+      </div>
+    );
+  });
+
 it('should create shapshot', async () => {
   const params = {
     items: [
diff --git a/source/client/src/features/team/components/MemberMenuItem.test.tsx b/source/client/src/features/team/components/MemberMenuItem.test.tsx
index a5a763a3..943570bb 100644
--- a/source/client/src/features/team/components/MemberMenuItem.test.tsx
+++ b/source/client/src/features/team/components/MemberMenuItem.test.tsx
@@ -13,6 +13,20 @@ import MemberMenuItem from './MemberMenuItem.presenter';
 import ThemeProvider from '../../../providers/ThemeProvider';
 import { render } from '@testing-library/react';
 
+jest.mock('../../../common/components/SidePanel', () =>
+  function SidePanel({ content, renderer }: { content: React.ReactNode, renderer: (props: unknown) => React.ReactNode }) {
+    return (
+      <div data-testid="SidePanel">
+        <div data-testid="Content">
+          {content}
+        </div>
+        <div data-testid="Renderer">
+          {renderer({})}
+        </div>
+      </div>
+    );
+  });
+
 it('should create shapshot', async () => {
   const params = {
     items: [
diff --git a/source/client/src/features/team/components/TagMenuItem.test.tsx b/source/client/src/features/team/components/TagMenuItem.test.tsx
index 2236ab49..0c5decff 100644
--- a/source/client/src/features/team/components/TagMenuItem.test.tsx
+++ b/source/client/src/features/team/components/TagMenuItem.test.tsx
@@ -8,11 +8,10 @@
 
 import React from 'react';
 
-import { render, screen } from '@testing-library/react';
 import IntlProvider from '../../../providers/IntlProvider';
 import TagMenuItem from './TagMenuItem.presenter';
 import ThemeProvider from '../../../providers/ThemeProvider';
-import userEvent from '@testing-library/user-event';
+import { render } from '@testing-library/react';
 
 jest.mock('./TagMemberAccordionItem', () =>
   function TagMemberAccordionItem({ children }: React.PropsWithChildren<unknown>) {
@@ -23,36 +22,21 @@ jest.mock('./TagMemberAccordionItem', () =>
     );
   });
 
-const setup = (jsx: JSX.Element) => ({
-  user: userEvent.setup(),
-  ...render(jsx)
-});
-
-it('should create shapshot of when loading is true', async () => {
-  const params = {
-    id: '2bd9fd6-8f93-4758-87c3-1fb73740a315',
-    items: [
-      {
-        id: 'MjQzMmI1N2ItMGFiZC00M2RiLWFhN2ItMTZlYWRkMTE1ZDM0IyM3ZDg4M2Q4Yi1hMTc5LTRkZDctOTNiMy1hOGQzZGUxYTIxMmUjI3RhY29VSjN2RGk==',
-        displayName: 'Finance',
-        description: 'Finance Team for Mach 8 Project',
-        memberCount: 2
-      }
-    ],
-    loading: false
-  };
-  const { asFragment, user } = setup(
-    <IntlProvider>
-      <ThemeProvider>
-        <TagMenuItem {...params} />
-      </ThemeProvider>
-    </IntlProvider>
-  );
-  await user.click(screen.getByRole('button'));
-  expect(asFragment()).toMatchSnapshot();
-});
+jest.mock('../../../common/components/SidePanel', () =>
+  function SidePanel({ content, renderer }: { content: React.ReactNode, renderer: (props: unknown) => React.ReactNode }) {
+    return (
+      <div data-testid="SidePanel">
+        <div data-testid="Content">
+          {content}
+        </div>
+        <div data-testid="Renderer">
+          {renderer({})}
+        </div>
+      </div>
+    );
+  });
 
-it('should create shapshot of when loading is false', async () => {
+it('should create shapshot', () => {
   const params = {
     id: '2bd9fd6-8f93-4758-87c3-1fb73740a315',
     items: [
@@ -62,16 +46,14 @@ it('should create shapshot of when loading is false', async () => {
         description: 'Finance Team for Mach 8 Project',
         memberCount: 2
       }
-    ],
-    loading: false
+    ]
   };
-  const { asFragment, user } = setup(
+  const { asFragment } = render(
     <IntlProvider>
       <ThemeProvider>
         <TagMenuItem {...params} />
       </ThemeProvider>
     </IntlProvider>
   );
-  await user.click(screen.getByRole('button'));
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/source/client/src/features/team/components/__snapshots__/ChannelMenuItem.test.tsx.snap b/source/client/src/features/team/components/__snapshots__/ChannelMenuItem.test.tsx.snap
index 5c55639b..8e612100 100644
--- a/source/client/src/features/team/components/__snapshots__/ChannelMenuItem.test.tsx.snap
+++ b/source/client/src/features/team/components/__snapshots__/ChannelMenuItem.test.tsx.snap
@@ -9,6 +9,52 @@ exports[`should create shapshot 1`] = `
 }
 
 .emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-flow: column;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  grid-gap: 0.5rem;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-flow: column;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  grid-gap: 0.5rem;
+  height: calc(100vh - 8rem);
+  overflow: auto;
+}
+
+.emotion-3 {
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: auto auto;
+  grid-gap: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: left;
+  -ms-flex-pack: left;
+  -webkit-justify-content: left;
+  justify-content: left;
+  padding: 0.5rem;
+}
+
+.emotion-3:hover {
+  background-color: #f5f5f5;
+}
+
+.emotion-4 {
   display: grid;
   grid-template-rows: auto;
   grid-template-columns: auto auto;
@@ -24,7 +70,7 @@ exports[`should create shapshot 1`] = `
   cursor: pointer;
 }
 
-.emotion-2 {
+.emotion-5 {
   font-size: 1rem;
   line-height: 1rem;
 }
@@ -36,35 +82,118 @@ exports[`should create shapshot 1`] = `
     <div
       class="emotion-0"
     >
-      <span
-        aria-label="View channels"
-        class="fui-Text emotion-1 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+      <div
+        data-testid="SidePanel"
       >
-        <button
-          class="fui-Button r1alrhcs ___cpe5h10_1yhfyj7 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f18ktai2 fwbmr0d f44c6la"
-          type="button"
+        <div
+          data-testid="Content"
         >
-          <span
-            class="fui-Button__icon rywnvv2"
+          <div
+            class="emotion-1"
           >
             <span
-              aria-hidden="true"
-              class="root_dd790ee3 emotion-2"
+              class="fui-Input r1oeeo9n fui-SearchBox ___13yg2oi_15g8mz3 f1f5gg8d fhxju0i fvcxoqz f1ub3y4t f1l4zc64 f1m52nbi f8vnjqi fz1etlk f1klwx88 f1hc16gm fjuset5 f1xzfw5u"
             >
-              <svg
-                class="svg_dd790ee3"
-                focusable="false"
-                viewBox="0 0 2048 2048"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                class="fui-Input__contentBefore r1572tok fui-SearchBox__contentBefore"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 20 20"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <input
+                class="fui-Input__input r12stul0 fui-SearchBox__input ___69a85s0_ca35df0 fk8j09s f1vdfbxk f18izjht fcoa6sg"
+                placeholder="Search channels"
+                type="search"
+                value=""
+              />
+              <span
+                class="fui-Input__contentAfter r1572tok fui-SearchBox__contentAfter ___d39huh0_hhph080 f1cnd47f f1ufnopg fk73vx1 fniina8 f3tsq5r"
               >
-                <path
-                  d="M1792 128v1664H256V128h1536zm-128 128H384v1408h1280V256zm-256 768H640V896h768v128zm0 384H640v-128h768v128zm0-768H640V512h768v128z"
-                />
-              </svg>
+                <span
+                  aria-label="clear"
+                  class="fui-SearchBox__dismiss r1pvzcuu"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 20 20"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
+            <div
+              class="emotion-2"
+            >
+              <span
+                class="fui-Text emotion-3 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+                role="button"
+              >
+                <span
+                  class="fui-Text ___gbswv60_1h9bfvt fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f1cmbuwj"
+                >
+                  General
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          data-testid="Renderer"
+        >
+          <span
+            aria-label="View channels"
+            class="fui-Text emotion-4 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+          >
+            <button
+              class="fui-Button r1alrhcs ___cpe5h10_1yhfyj7 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f18ktai2 fwbmr0d f44c6la"
+              type="button"
+            >
+              <span
+                class="fui-Button__icon rywnvv2"
+              >
+                <span
+                  aria-hidden="true"
+                  class="root_dd790ee3 emotion-5"
+                >
+                  <svg
+                    class="svg_dd790ee3"
+                    focusable="false"
+                    viewBox="0 0 2048 2048"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M1792 128v1664H256V128h1536zm-128 128H384v1408h1280V256zm-256 768H640V896h768v128zm0 384H640v-128h768v128zm0-768H640V512h768v128z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
           </span>
-        </button>
-      </span>
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>
diff --git a/source/client/src/features/team/components/__snapshots__/MemberMenuItem.test.tsx.snap b/source/client/src/features/team/components/__snapshots__/MemberMenuItem.test.tsx.snap
index a192b4c9..25280b70 100644
--- a/source/client/src/features/team/components/__snapshots__/MemberMenuItem.test.tsx.snap
+++ b/source/client/src/features/team/components/__snapshots__/MemberMenuItem.test.tsx.snap
@@ -9,6 +9,51 @@ exports[`should create shapshot 1`] = `
 }
 
 .emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-flow: column;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  grid-gap: 0.5rem;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-flow: column;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  grid-gap: 0.5rem;
+  height: calc(100vh - 8rem);
+  overflow: auto;
+}
+
+.emotion-3 {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-gap: 0.5rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: left;
+  -ms-flex-pack: left;
+  -webkit-justify-content: left;
+  justify-content: left;
+  padding: 0.5rem;
+}
+
+.emotion-3:hover {
+  background-color: #f5f5f5;
+}
+
+.emotion-4 {
   display: grid;
   grid-template-rows: auto;
   grid-template-columns: auto auto;
@@ -24,7 +69,7 @@ exports[`should create shapshot 1`] = `
   cursor: pointer;
 }
 
-.emotion-2 {
+.emotion-5 {
   font-size: 1rem;
   line-height: 1rem;
 }
@@ -36,35 +81,131 @@ exports[`should create shapshot 1`] = `
     <div
       class="emotion-0"
     >
-      <span
-        aria-label="View members"
-        class="fui-Text emotion-1 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+      <div
+        data-testid="SidePanel"
       >
-        <button
-          class="fui-Button r1alrhcs ___cpe5h10_1yhfyj7 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f18ktai2 fwbmr0d f44c6la"
-          type="button"
+        <div
+          data-testid="Content"
         >
-          <span
-            class="fui-Button__icon rywnvv2"
+          <div
+            class="emotion-1"
           >
             <span
-              aria-hidden="true"
-              class="root_dd790ee3 emotion-2"
+              class="fui-Input r1oeeo9n fui-SearchBox ___13yg2oi_15g8mz3 f1f5gg8d fhxju0i fvcxoqz f1ub3y4t f1l4zc64 f1m52nbi f8vnjqi fz1etlk f1klwx88 f1hc16gm fjuset5 f1xzfw5u"
             >
-              <svg
-                class="svg_dd790ee3"
-                focusable="false"
-                viewBox="0 0 2048 2048"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                class="fui-Input__contentBefore r1572tok fui-SearchBox__contentBefore"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 20 20"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+              <input
+                class="fui-Input__input r12stul0 fui-SearchBox__input ___69a85s0_ca35df0 fk8j09s f1vdfbxk f18izjht fcoa6sg"
+                placeholder="Search members"
+                type="search"
+                value=""
+              />
+              <span
+                class="fui-Input__contentAfter r1572tok fui-SearchBox__contentAfter ___d39huh0_hhph080 f1cnd47f f1ufnopg fk73vx1 fniina8 f3tsq5r"
               >
-                <path
-                  d="M1850 688q45 25 82 61t62 80 40 93 14 102h-128q0-52-20-99t-55-81-82-55-99-21q-53 0-99 20t-81 55-55 82-21 99q0 91-41 173t-115 136q65 33 117 81t90 108 57 128 20 142h-128q0-79-30-149t-83-122-122-82-149-31q-79 0-149 30t-122 83-82 122-31 149H512q0-73 20-141t57-128 89-108 118-82q-73-54-114-136t-42-173q0-52-20-99t-55-81-82-55-99-21q-53 0-99 20t-81 55-55 82-21 99H0q0-52 14-101t39-93 63-80 82-62q-33-35-51-81t-19-95q0-52 20-99t55-81 81-55 100-21q52 0 99 20t81 55 55 82 21 99q0 49-18 95t-52 81q82 45 134 124 54-80 138-126t182-46q97 0 181 46t139 126q52-79 134-124-33-35-51-81t-19-95q0-52 20-99t55-81 81-55 100-21q52 0 99 20t81 55 55 82 21 99q0 49-18 95t-52 81zM256 512q0 27 10 50t27 40 41 28 50 10q27 0 50-10t40-27 28-41 10-50q0-27-10-50t-27-40-41-28-50-10q-27 0-50 10t-40 27-28 41-10 50zm768 768q52 0 99-20t81-55 55-81 21-100q0-52-20-99t-55-81-82-55-99-21q-53 0-99 20t-81 55-55 82-21 99q0 53 20 99t55 81 81 55 100 21zm512-768q0 27 10 50t27 40 41 28 50 10q27 0 50-10t40-27 28-41 10-50q0-27-10-50t-27-40-41-28-50-10q-27 0-50 10t-40 27-28 41-10 50z"
-                />
-              </svg>
+                <span
+                  aria-label="clear"
+                  class="fui-SearchBox__dismiss r1pvzcuu"
+                  role="button"
+                  tabindex="-1"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="___12fm75w_v8ls9a0 f1w7gpdv fez10in fg4l7m0"
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 20 20"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </span>
             </span>
+            <div
+              class="emotion-2"
+            >
+              <span
+                class="fui-Text emotion-3 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+                role="button"
+              >
+                <span
+                  aria-label="Adele Vance"
+                  class="fui-Avatar r81b29z ___3oygws0_1lfz49j fq4mcun frvgh55 f13mqy1h"
+                  id="avatar-r1"
+                  role="img"
+                >
+                  <span
+                    class="fui-Avatar__initials rip04v ___105uvta_5ja1qh0 f1f3ti53 fu4yj0j"
+                    id="avatar-r1__initials"
+                  >
+                    AV
+                  </span>
+                </span>
+                <span
+                  class="fui-Text ___gbswv60_1h9bfvt fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f1cmbuwj"
+                >
+                  Adele Vance
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          data-testid="Renderer"
+        >
+          <span
+            aria-label="View members"
+            class="fui-Text emotion-4 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+          >
+            <button
+              class="fui-Button r1alrhcs ___cpe5h10_1yhfyj7 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f18ktai2 fwbmr0d f44c6la"
+              type="button"
+            >
+              <span
+                class="fui-Button__icon rywnvv2"
+              >
+                <span
+                  aria-hidden="true"
+                  class="root_dd790ee3 emotion-5"
+                >
+                  <svg
+                    class="svg_dd790ee3"
+                    focusable="false"
+                    viewBox="0 0 2048 2048"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M1850 688q45 25 82 61t62 80 40 93 14 102h-128q0-52-20-99t-55-81-82-55-99-21q-53 0-99 20t-81 55-55 82-21 99q0 91-41 173t-115 136q65 33 117 81t90 108 57 128 20 142h-128q0-79-30-149t-83-122-122-82-149-31q-79 0-149 30t-122 83-82 122-31 149H512q0-73 20-141t57-128 89-108 118-82q-73-54-114-136t-42-173q0-52-20-99t-55-81-82-55-99-21q-53 0-99 20t-81 55-55 82-21 99H0q0-52 14-101t39-93 63-80 82-62q-33-35-51-81t-19-95q0-52 20-99t55-81 81-55 100-21q52 0 99 20t81 55 55 82 21 99q0 49-18 95t-52 81q82 45 134 124 54-80 138-126t182-46q97 0 181 46t139 126q52-79 134-124-33-35-51-81t-19-95q0-52 20-99t55-81 81-55 100-21q52 0 99 20t81 55 55 82 21 99q0 49-18 95t-52 81zM256 512q0 27 10 50t27 40 41 28 50 10q27 0 50-10t40-27 28-41 10-50q0-27-10-50t-27-40-41-28-50-10q-27 0-50 10t-40 27-28 41-10 50zm768 768q52 0 99-20t81-55 55-81 21-100q0-52-20-99t-55-81-82-55-99-21q-53 0-99 20t-81 55-55 82-21 99q0 53 20 99t55 81 81 55 100 21zm512-768q0 27 10 50t27 40 41 28 50 10q27 0 50-10t40-27 28-41 10-50q0-27-10-50t-27-40-41-28-50-10q-27 0-50 10t-40 27-28 41-10 50z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
           </span>
-        </button>
-      </span>
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>
diff --git a/source/client/src/features/team/components/__snapshots__/TagMenuItem.test.tsx.snap b/source/client/src/features/team/components/__snapshots__/TagMenuItem.test.tsx.snap
index 0f549f16..3df27560 100644
--- a/source/client/src/features/team/components/__snapshots__/TagMenuItem.test.tsx.snap
+++ b/source/client/src/features/team/components/__snapshots__/TagMenuItem.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should create shapshot of when loading is false 1`] = `
+exports[`should create shapshot 1`] = `
 <DocumentFragment>
   .emotion-0 {
   min-height: 100vh;
@@ -9,79 +9,20 @@ exports[`should create shapshot of when loading is false 1`] = `
 }
 
 .emotion-1 {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: auto auto;
-  grid-gap: 0.25rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  -webkit-justify-content: start;
-  justify-content: start;
-  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-flow: column;
+  -webkit-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  grid-gap: 0.5rem;
+  height: calc(100vh - 5.5rem);
+  overflow: auto;
 }
 
 .emotion-2 {
-  font-size: 1rem;
-  line-height: 1rem;
-}
-
-<div
-    class="fui-FluentProvider fui-FluentProviderr4 ___jdtuxv0_17k0bs4 f19n0e5 fxugw4r f1o700av fk6fouc fkhj508 figsok6 f1i3iumi"
-    dir="ltr"
-  >
-    <div
-      class="emotion-0"
-    >
-      <span
-        aria-label="View tags"
-        class="fui-Text emotion-1 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
-      >
-        <button
-          class="fui-Button r1alrhcs ___cpe5h10_1yhfyj7 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f18ktai2 fwbmr0d f44c6la"
-          type="button"
-        >
-          <span
-            class="fui-Button__icon rywnvv2"
-          >
-            <span
-              aria-hidden="true"
-              class="root_dd790ee3 emotion-2"
-            >
-              <svg
-                class="svg_dd790ee3"
-                focusable="false"
-                viewBox="0 0 2048 2048"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M1472 576q-27 0-50-10t-40-27-28-41-10-50q0-27 10-50t27-40 41-28 50-10q27 0 50 10t40 27 28 41 10 50q0 27-10 50t-27 40-41 28-50 10zM1024 0h896v896L896 1920 0 1024 1024 0zm768 843V128h-715l-896 896 715 715 896-896z"
-                />
-              </svg>
-            </span>
-          </span>
-        </button>
-      </span>
-      <span
-        hidden=""
-      />
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`should create shapshot of when loading is true 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  min-height: 100vh;
-  line-height: 1.25em;
-  background-color: #f5f5f5;
-}
-
-.emotion-1 {
   display: grid;
   grid-template-rows: auto;
   grid-template-columns: auto auto;
@@ -97,7 +38,7 @@ exports[`should create shapshot of when loading is true 1`] = `
   cursor: pointer;
 }
 
-.emotion-2 {
+.emotion-3 {
   font-size: 1rem;
   line-height: 1rem;
 }
@@ -109,38 +50,58 @@ exports[`should create shapshot of when loading is true 1`] = `
     <div
       class="emotion-0"
     >
-      <span
-        aria-label="View tags"
-        class="fui-Text emotion-1 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+      <div
+        data-testid="SidePanel"
       >
-        <button
-          class="fui-Button r1alrhcs ___cpe5h10_1yhfyj7 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f18ktai2 fwbmr0d f44c6la"
-          type="button"
+        <div
+          data-testid="Content"
+        >
+          <div
+            class="emotion-1"
+          >
+            <div
+              class="fui-Accordion"
+            >
+              <div
+                data-testid="TagMemberAccordionItem"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          data-testid="Renderer"
         >
           <span
-            class="fui-Button__icon rywnvv2"
+            aria-label="View tags"
+            class="fui-Text emotion-2 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
           >
-            <span
-              aria-hidden="true"
-              class="root_dd790ee3 emotion-2"
+            <button
+              class="fui-Button r1alrhcs ___cpe5h10_1yhfyj7 f1c21dwh f1p3nwhy f11589ue f1q5o8ev f1pdflbu fkfq4zb fjxutwb f1s2uweq fr80ssc f1ukrpxl fecsdlb f139oj5f ft1hn21 fuxngvv fwiml72 f1h0usnq fs4ktlq f16h9ulv fx2bmrt f1fg1p5m f1dfjoow f1j98vj9 f1tme0vf f4xjyn1 f18onu3q f9ddjv3 f18ktai2 fwbmr0d f44c6la"
+              type="button"
             >
-              <svg
-                class="svg_dd790ee3"
-                focusable="false"
-                viewBox="0 0 2048 2048"
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                class="fui-Button__icon rywnvv2"
               >
-                <path
-                  d="M1472 576q-27 0-50-10t-40-27-28-41-10-50q0-27 10-50t27-40 41-28 50-10q27 0 50 10t40 27 28 41 10 50q0 27-10 50t-27 40-41 28-50 10zM1024 0h896v896L896 1920 0 1024 1024 0zm768 843V128h-715l-896 896 715 715 896-896z"
-                />
-              </svg>
-            </span>
+                <span
+                  aria-hidden="true"
+                  class="root_dd790ee3 emotion-3"
+                >
+                  <svg
+                    class="svg_dd790ee3"
+                    focusable="false"
+                    viewBox="0 0 2048 2048"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M1472 576q-27 0-50-10t-40-27-28-41-10-50q0-27 10-50t27-40 41-28 50-10q27 0 50 10t40 27 28 41 10 50q0 27-10 50t-27 40-41 28-50 10zM1024 0h896v896L896 1920 0 1024 1024 0zm768 843V128h-715l-896 896 715 715 896-896z"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
           </span>
-        </button>
-      </span>
-      <span
-        hidden=""
-      />
+        </div>
+      </div>
     </div>
   </div>
 </DocumentFragment>