Merge branch 'develop' into commandMenu

RocketChat · Mar 17, 2024 · 20f3ee4 · 20f3ee4
2 parents 5816d76 + 7e389e1
commit 20f3ee4
Show file tree

Hide file tree

Showing 19 changed files with 591 additions and 542 deletions.
diff --git a/packages/react/src/components/AllThreads/AllThreads.js b/packages/react/src/components/AllThreads/AllThreads.js
@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 import classes from './AllThreads.module.css';
 import { Icon } from '../Icon';
 import { Box } from '../Box';
-import { ActionButton } from '../ActionButton';
 import {
   useMessageStore,
   useUserStore,
@@ -14,6 +13,7 @@ import { MessageMetrics } from '../Message/MessageMetrics';
 import MessageAvatarContainer from '../Message/MessageAvatarContainer';
 import MessageBodyContainer from '../Message/MessageBodyContainer';
 import MessageHeader from '../Message/MessageHeader';
+import Sidebar from '../Sidebar/Sidebar';
 
 const MessageCss = css`
   display: flex;
@@ -65,115 +65,90 @@ const AllThreads = () => {
   );
 
   return (
-    <Box className={classes.component}>
-      <Box className={classes.wrapContainer}>
-        <Box style={{ padding: '16px' }}>
-          <Box
-            css={css`
-              display: flex;
-            `}
-          >
-            <h3 style={{ display: 'contents' }}>
-              <Icon
-                name="thread"
-                size="1.25rem"
-                style={{ padding: '0px 20px 20px 0px' }}
-              />
-              <Box
-                css={css`
-                  width: 100%;
-                  color: #4a4a4a;
-                `}
-              >
-                Threads
-              </Box>
-              <ActionButton onClick={toggleShowAllThreads} ghost size="small">
-                <Icon name="cross" size="1.25rem" />
-              </ActionButton>
-            </h3>
-          </Box>
+    <Sidebar
+      title="Threads"
+      iconName="thread"
+      setShowWindow={setShowAllThreads}
+    >
+      <Box
+        className={classes.searchContainer}
+        style={{
+          border: '2px solid #ddd',
+          position: 'relative',
+          marginBottom: '1rem',
+        }}
+      >
+        <input
+          placeholder="Search Messages"
+          onChange={handleInputChange}
+          className={classes.textInput}
+        />
 
+        <Icon
+          name="magnifier"
+          size="1.25rem"
+          style={{ padding: '0.125em', cursor: 'pointer' }}
+        />
+      </Box>
+
+      <Box
+        style={{
+          flex: '1',
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: filteredThreads.length === 0 ? 'center' : 'initial',
+          alignItems: filteredThreads.length === 0 ? 'center' : 'initial',
+        }}
+      >
+        {filteredThreads.length === 0 ? (
           <Box
-            className={classes.searchContainer}
-            style={{ border: '2px solid #ddd', position: 'relative' }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              color: '#4a4a4a',
+            }}
           >
-            <input
-              placeholder="Search Messages"
-              onChange={handleInputChange}
-              className={classes.textInput}
-            />
-
-            <Icon
-              name="magnifier"
-              size="1.25rem"
-              style={{ padding: '0.125em', cursor: 'pointer' }}
-            />
+            <Icon name="magnifier" size="3rem" style={{ padding: '0.5rem' }} />
+            <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
+              No threads found
+            </span>
           </Box>
-        </Box>
-
-        <Box
-          style={{
-            flex: '1',
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: filteredThreads.length === 0 ? 'center' : 'initial',
-            alignItems: filteredThreads.length === 0 ? 'center' : 'initial',
-          }}
-        >
-          {filteredThreads.length === 0 ? (
-            <Box
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                color: '#4a4a4a',
-              }}
-            >
-              <Icon
-                name="magnifier"
-                size="3rem"
-                style={{ padding: '0.5rem' }}
-              />
-              <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
-                No threads found
-              </span>
-            </Box>
-          ) : (
-            filteredThreads.map(
-              (message) =>
-                !message.t &&
-                message.tcount && (
-                  <Box
-                    key={message._id}
-                    css={MessageCss}
-                    onClick={handleOpenThread(message)}
-                  >
-                    {showAvatar && (
-                      <MessageAvatarContainer
-                        message={message}
-                        sequential={false}
-                        isStarred={false}
-                      />
-                    )}
-                    <MessageBodyContainer>
-                      <MessageHeader message={message} isTimeStamped={false} />
+        ) : (
+          filteredThreads.map(
+            (message) =>
+              !message.t &&
+              message.tcount && (
+                <Box
+                  key={message._id}
+                  css={MessageCss}
+                  onClick={handleOpenThread(message)}
+                >
+                  {showAvatar && (
+                    <MessageAvatarContainer
+                      message={message}
+                      sequential={false}
+                      isStarred={false}
+                    />
+                  )}
+                  <MessageBodyContainer>
+                    <MessageHeader message={message} isTimeStamped={false} />
 
-                      <MessageBody>
-                        {message.attachments && message.attachments.length > 0
-                          ? message.file.name
-                          : message.msg}
-                      </MessageBody>
+                    <MessageBody>
+                      {message.attachments && message.attachments.length > 0
+                        ? message.file.name
+                        : message.msg}
+                    </MessageBody>
 
-                      <MessageMetrics message={message} isReplyButton={false} />
-                    </MessageBodyContainer>
-                  </Box>
-                )
-            )
-          )}
-        </Box>
+                    <MessageMetrics message={message} isReplyButton={false} />
+                  </MessageBodyContainer>
+                </Box>
+              )
+          )
+        )}
       </Box>
-    </Box>
+    </Sidebar>
   );
 };
 

diff --git a/packages/react/src/components/AllThreads/AllThreads.module.css b/packages/react/src/components/AllThreads/AllThreads.module.css
@@ -1,21 +1,3 @@
-.component {
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 350px;
-  height: 100%;
-  overflow: hidden;
-  background-color: white;
-  box-shadow: -1px 0px 5px rgb(0 0 0 / 25%);
-  z-index: 100;
-}
-
-.wrapContainer {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .searchContainer {
   display: flex;
   align-items: center;

diff --git a/packages/react/src/components/Avatar/Avatar.js b/packages/react/src/components/Avatar/Avatar.js
@@ -1,20 +1,36 @@
 import { css } from '@emotion/react';
-import React from 'react';
+import React, { useState } from 'react';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import { AvatarContainer } from './AvatarContainer';
+import { Icon } from '../Icon';
+import { Box } from '../Box';
 
 export const Avatar = ({
   size = '2.25rem',
   className = '',
   style = {},
   url,
+  fallbackIcon = 'circle-cross',
   ...props
 }) => {
+  const [imgError, setImgError] = useState(false);
   const AvatarCss = css`
     border-radius: 0.25rem;
     height: ${size};
     width: ${size};
   `;
+
+  const FallBackBoxCss = css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #007fff;
+    color: #ffffff;
+    border-radius: 0.25rem;
+    height: ${size};
+    width: ${size};
+  `;
+
   const { classNames, styleOverrides } = useComponentOverrides(
     'Avatar',
     className,
@@ -23,12 +39,19 @@ export const Avatar = ({
 
   return (
     <AvatarContainer size={size} {...props}>
-      <img
-        src={`${url}`}
-        css={AvatarCss}
-        className={classNames}
-        style={styleOverrides}
-      />
+      {!imgError ? (
+        <img
+          src={`${url}`}
+          css={AvatarCss}
+          className={classNames}
+          style={styleOverrides}
+          onError={() => setImgError(true)}
+        />
+      ) : (
+        <Box css={FallBackBoxCss}>
+          <Icon name={fallbackIcon} size="1.25rem" />
+        </Box>
+      )}
     </AvatarContainer>
   );
 };
diff --git a/packages/react/src/components/Files/FilePreviewContainer.js b/packages/react/src/components/Files/FilePreviewContainer.js
@@ -16,7 +16,7 @@ const FilePreviewContainer = ({ file, sequential, isStarred }) => {
   return (
     <Box css={FilePreviewContainerCss}>
       {!sequential ? (
-        <Avatar url={file.url} alt="file" size="2.25em" />
+        <Avatar url={file.url} fallbackIcon="attachment" size="2.25em" />
       ) : isStarred ? (
         <Icon style={{ opacity: 0.5 }} name="star-filled" size="1.2em" />
       ) : null}