2.2.3 release

karamem0 · Oct 9, 2024 · f752823 · f752823
1 parent 8aa1d79
commit f752823
Show file tree

Hide file tree

Showing 29 changed files with 1,731 additions and 1,297 deletions.
diff --git a/source/client/src/features/team/components/AvatarIcon.presenter.tsx b/source/client/src/features/team/components/AvatarIcon.presenter.tsx
@@ -26,6 +26,7 @@ function AvatarIcon(props: Readonly<AvatarIconProps>) {
 
   return (
     <Avatar
+      color="colorful"
       image={{ src: icon }}
       name={name}
       size={size} />

diff --git a/source/client/src/features/team/components/ChannelMenuItem.presenter.tsx b/source/client/src/features/team/components/ChannelMenuItem.presenter.tsx
@@ -57,7 +57,9 @@ function ChannelMenuItem(props: Readonly<ChannelMenuItemProps>) {
               flex-flow: column;
               grid-gap: 0.5rem;
             `}>
-            <SearchBox onChange={(e, data) => onFilterChange?.(e, data.value)} />
+            <SearchBox
+              placeholder={intl.formatMessage(messages.SearchChannels)}
+              onChange={(e, data) => onFilterChange?.(e, data.value)} />
             <div
               css={css`
                 display: flex;

diff --git a/source/client/src/features/team/components/MemberMenuItem.presenter.tsx b/source/client/src/features/team/components/MemberMenuItem.presenter.tsx
@@ -57,7 +57,9 @@ function MemberMenuItem(props: Readonly<MemberMenuItemProps>) {
               flex-flow: column;
               grid-gap: 0.5rem;
             `}>
-            <SearchBox onChange={(e, data) => onFilterChange?.(e, data.value)} />
+            <SearchBox
+              placeholder={intl.formatMessage(messages.SearchMembers)}
+              onChange={(e, data) => onFilterChange?.(e, data.value)} />
             <div
               css={css`
                 display: flex;

diff --git a/source/client/src/features/team/components/MembershipIcon.presenter.tsx b/source/client/src/features/team/components/MembershipIcon.presenter.tsx
@@ -14,6 +14,7 @@ import { MembershipType } from '../../../types/Entity';
 import { css } from '@emotion/react';
 import messages from '../messages';
 import { useIntl } from 'react-intl';
+import { useTheme } from '../../../providers/ThemeProvider';
 
 export interface MembershipIconProps {
   value?: MembershipType
@@ -24,6 +25,7 @@ function MembershipIcon(props: Readonly<MembershipIconProps>) {
   const { value } = props;
 
   const intl = useIntl();
+  const { theme } = useTheme();
 
   switch (value) {
     case 'standard':
@@ -33,11 +35,17 @@ function MembershipIcon(props: Readonly<MembershipIconProps>) {
         <Tooltip
           content={intl.formatMessage(messages.Private)}
           relationship="label">
-          <Text>
+          <Text
+            css={css`
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: ${theme.colorNeutralForeground4};
+            `}>
             <LockIcon
               css={css`
-                width: 0.75rem;
-                height: 0.75rem;
+                width: 1rem;
+                height: 1rem;
               `} />
           </Text>
         </Tooltip>

diff --git a/source/client/src/features/team/components/MembershipIcon.test.tsx b/source/client/src/features/team/components/MembershipIcon.test.tsx
@@ -11,6 +11,7 @@ import React from 'react';
 import IntlProvider from '../../../providers/IntlProvider';
 import MembershipIcon from './MembershipIcon.presenter';
 import { MembershipType } from '../../../types/Entity';
+import ThemeProvider from '../../../providers/ThemeProvider';
 import { render } from '@testing-library/react';
 
 it('should create shapshot of when MembershipType is standard', async () => {
@@ -19,7 +20,9 @@ it('should create shapshot of when MembershipType is standard', async () => {
   };
   const { asFragment } = render(
     <IntlProvider>
-      <MembershipIcon {...params} />
+      <ThemeProvider>
+        <MembershipIcon {...params} />
+      </ThemeProvider>
     </IntlProvider>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -31,7 +34,9 @@ it('should create shapshot of when MembershipType is private', async () => {
   };
   const { asFragment } = render(
     <IntlProvider>
-      <MembershipIcon {...params} />
+      <ThemeProvider>
+        <MembershipIcon {...params} />
+      </ThemeProvider>
     </IntlProvider>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -43,7 +48,9 @@ it('should create shapshot of when MembershipType is undefined', async () => {
   };
   const { asFragment } = render(
     <IntlProvider>
-      <MembershipIcon {...params} />
+      <ThemeProvider>
+        <MembershipIcon {...params} />
+      </ThemeProvider>
     </IntlProvider>
   );
   expect(asFragment()).toMatchSnapshot();

diff --git a/source/client/src/features/team/components/TeamAccordionItem.presenter.tsx b/source/client/src/features/team/components/TeamAccordionItem.presenter.tsx
@@ -41,7 +41,7 @@ function TeamAccordionItem(props: Readonly<TeamAccordionItemProps>) {
       </AccordionHeader>
       <AccordionPanel
         css={css`
-          margin: 0.25rem;
+          padding: 0.25rem;
         `}>
         {
           cards?.length ? (

diff --git a/source/client/src/features/team/components/TeamGrid.presenter.tsx b/source/client/src/features/team/components/TeamGrid.presenter.tsx
@@ -9,7 +9,6 @@
 import React from 'react';
 
 import { Accordion } from '@fluentui/react-components';
-import { AccordionType } from '../../../types/Entity';
 import { FormattedMessage } from 'react-intl';
 import TeamAccordionItem from './TeamAccordionItem';
 import { TeamCard } from '../../../types/Store';
@@ -30,7 +29,7 @@ function TeamGrid(props: Readonly<TeamGridProps>) {
       multiple>
       <TeamAccordionItem
         key="pinned"
-        cards={cards?.filter((card) => card.pinned)}
+        cards={cards?.filter((card) => card.visible && card.pinned)}
         value="pinned"
         header={(
           <FormattedMessage {...messages.PinnedTeams} />

diff --git a/source/client/src/features/team/components/TeamPanel.presenter.tsx b/source/client/src/features/team/components/TeamPanel.presenter.tsx
@@ -19,13 +19,13 @@ import {
   MenuTrigger,
   SearchBox
 } from '@fluentui/react-components';
+import { FormattedMessage, useIntl } from 'react-intl';
 import {
   GitHubLogoIcon,
   MoreVerticalIcon,
   RefreshIcon
 } from '@fluentui/react-icons-mdl2';
 import { EventHandler } from '../../../types/Event';
-import { FormattedMessage } from 'react-intl';
 import TeamGrid from './TeamGrid';
 import { css } from '@emotion/react';
 import messages from '../messages';
@@ -48,6 +48,8 @@ function TeamPanel(props: Readonly<TeamPanelProps>) {
     onRefreshClick
   } = props;
 
+  const intl = useIntl();
+
   return (
     <div
       css={css`
@@ -63,6 +65,7 @@ function TeamPanel(props: Readonly<TeamPanelProps>) {
           grid-gap: 0.25rem;
         `}>
         <SearchBox
+          placeholder={intl.formatMessage(messages.SearchTeams)}
           css={css`
             min-height: 2.25rem;
             @media (width >= 600px) {

diff --git a/source/client/src/features/team/components/TeamPanel.test.tsx b/source/client/src/features/team/components/TeamPanel.test.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 
+import IntlProvider from '../../../providers/IntlProvider';
 import TeamPanel from './TeamPanel.presenter';
 import { render } from '@testing-library/react';
 
@@ -22,6 +23,10 @@ jest.mock('./TeamGrid', () =>
 
 it('should create shapshot', async () => {
   const params = {};
-  const { asFragment } = render(<TeamPanel {...params} />);
+  const { asFragment } = render(
+    <IntlProvider>
+      <TeamPanel {...params} />
+    </IntlProvider>
+  );
   expect(asFragment()).toMatchSnapshot();
 });
diff --git a/source/client/src/features/team/components/__snapshots__/AvatarIcon.test.tsx.snap b/source/client/src/features/team/components/__snapshots__/AvatarIcon.test.tsx.snap
@@ -9,15 +9,15 @@ exports[`should create shapshot of when url is not undefined 1`] = `
     role="img"
   >
     <span
-      class="fui-Avatar__initials rip04v ___1d63l1f_wwkuc90 f11d4kpn f18f03hv"
+      class="fui-Avatar__initials rip04v ___1ijdyrp_1g9zh4u f1up9qbj f42feg1"
       id="avatar-r1__initials"
     >
       HT
     </span>
     <img
       alt=""
       aria-hidden="true"
-      class="fui-Avatar__image r136dc0n ___1d63l1f_wwkuc90 f11d4kpn f18f03hv"
+      class="fui-Avatar__image r136dc0n ___1ijdyrp_1g9zh4u f1up9qbj f42feg1"
       role="presentation"
       src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAMSURBVBhXY/j//z8ABf4C/qc1gYQAAAAASUVORK5CYII="
     />
@@ -34,7 +34,7 @@ exports[`should create shapshot of when url is undefined 1`] = `
     role="img"
   >
     <span
-      class="fui-Avatar__initials rip04v ___1d63l1f_wwkuc90 f11d4kpn f18f03hv"
+      class="fui-Avatar__initials rip04v ___1ijdyrp_1g9zh4u f1up9qbj f42feg1"
       id="avatar-r0__initials"
     >
       HT

diff --git a/source/client/src/features/team/components/__snapshots__/MembershipIcon.test.tsx.snap b/source/client/src/features/team/components/__snapshots__/MembershipIcon.test.tsx.snap
@@ -3,33 +3,98 @@
 exports[`should create shapshot of when MembershipType is private 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  width: 0.75rem;
-  height: 0.75rem;
+  min-height: 100vh;
+  line-height: 1.25em;
+  background-color: #f5f5f5;
 }
 
-<span
-    aria-label="Private"
-    class="fui-Text ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
+.emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  color: #707070;
+}
+
+.emotion-2 {
+  width: 1rem;
+  height: 1rem;
+}
+
+<div
+    class="fui-FluentProvider fui-FluentProviderr1 ___jdtuxv0_17k0bs4 f19n0e5 fxugw4r f1o700av fk6fouc fkhj508 figsok6 f1i3iumi"
+    dir="ltr"
   >
-    <span
-      aria-hidden="true"
-      class="root_dd790ee3 emotion-0"
+    <div
+      class="emotion-0"
     >
-      <svg
-        class="svg_dd790ee3"
-        focusable="false"
-        viewBox="0 0 2048 2048"
-        xmlns="http://www.w3.org/2000/svg"
+      <span
+        aria-label="Private"
+        class="fui-Text emotion-1 ___c56hd20_1xy0w11 fk6fouc fkhj508 f1i3iumi figsok6 fpgzoln f1w7gpdv f6juhto f1gl81tg f2jf649"
       >
-        <path
-          d="M1792 896v1152H256V896h256V522q0-108 39-203t108-166T821 41t203-41q109 0 202 41t163 112 108 166 39 203v374h256zm-1152 0h768V522q0-81-29-152t-80-126-122-85-153-31q-82 0-152 31t-122 85-81 125-29 153v374zm1024 128H384v896h1280v-896z"
-        />
-      </svg>
-    </span>
-  </span>
+        <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="M1792 896v1152H256V896h256V522q0-108 39-203t108-166T821 41t203-41q109 0 202 41t163 112 108 166 39 203v374h256zm-1152 0h768V522q0-81-29-152t-80-126-122-85-153-31q-82 0-152 31t-122 85-81 125-29 153v374zm1024 128H384v896h1280v-896z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`should create shapshot of when MembershipType is standard 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  min-height: 100vh;
+  line-height: 1.25em;
+  background-color: #f5f5f5;
+}
+
+<div
+    class="fui-FluentProvider fui-FluentProviderr0 ___jdtuxv0_17k0bs4 f19n0e5 fxugw4r f1o700av fk6fouc fkhj508 figsok6 f1i3iumi"
+    dir="ltr"
+  >
+    <div
+      class="emotion-0"
+    />
+  </div>
 </DocumentFragment>
 `;
 
-exports[`should create shapshot of when MembershipType is standard 1`] = `<DocumentFragment />`;
+exports[`should create shapshot of when MembershipType is undefined 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  min-height: 100vh;
+  line-height: 1.25em;
+  background-color: #f5f5f5;
+}
 
-exports[`should create shapshot of when MembershipType is undefined 1`] = `<DocumentFragment />`;
+<div
+    class="fui-FluentProvider fui-FluentProviderr3 ___jdtuxv0_17k0bs4 f19n0e5 fxugw4r f1o700av fk6fouc fkhj508 figsok6 f1i3iumi"
+    dir="ltr"
+  >
+    <div
+      class="emotion-0"
+    />
+  </div>
+</DocumentFragment>
+`;
diff --git a/source/client/src/features/team/components/__snapshots__/TeamAccordionItem.test.tsx.snap b/source/client/src/features/team/components/__snapshots__/TeamAccordionItem.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`should create shapshot 1`] = `
 <DocumentFragment>
   .emotion-0 {
-  margin: 0.25rem;
+  padding: 0.25rem;
 }
 
 .emotion-1 {

diff --git a/source/client/src/features/team/components/__snapshots__/TeamGrid.test.tsx.snap b/source/client/src/features/team/components/__snapshots__/TeamGrid.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`should create shapshot 1`] = `
 }
 
 .emotion-1 {
-  margin: 0.25rem;
+  padding: 0.25rem;
 }
 
 .emotion-2 {

diff --git a/source/client/src/features/team/components/__snapshots__/TeamPanel.test.tsx.snap b/source/client/src/features/team/components/__snapshots__/TeamPanel.test.tsx.snap
@@ -65,6 +65,7 @@ exports[`should create shapshot 1`] = `
         </span>
         <input
           class="fui-Input__input r12stul0 fui-SearchBox__input ___69a85s0_ca35df0 fk8j09s f1vdfbxk f18izjht fcoa6sg"
+          placeholder="Search teams"
           type="search"
           value=""
         />