Merge pull request #385 from AppQuality/develop

New version
AppQuality · Jun 10, 2024 · 6a8a974 · 6a8a974
2 parents 9cb33ec + 0e8926a
commit 6a8a974
Show file tree

Hide file tree

Showing 21 changed files with 248 additions and 118 deletions.
diff --git a/src/stories/avatar/InternalAvatar.tsx b/src/stories/avatar/InternalAvatar.tsx
@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import LogoIcon from "../../assets/logo-icon.svg";
+
+const StyledInternalAvatar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const InternalAvatar = () => {
+  return (
+    <StyledInternalAvatar>
+      <img alt="avatar" src={LogoIcon} />
+    </StyledInternalAvatar>
+  );
+};
+
+export default InternalAvatar;
diff --git a/src/stories/avatar/index.tsx b/src/stories/avatar/index.tsx
@@ -2,8 +2,8 @@ import { Avatar as ZendeskAvatar } from "@zendeskgarden/react-avatars";
 import { theme } from "../theme";
 import styled from "styled-components";
 import { AvatarArgs } from "./_types";
-import LogoIcon from "../../assets/logo-icon.svg";
 import { getColor } from "../theme/utils";
+import InternalAvatar from "./InternalAvatar";
 
 const UgAvatar = styled(ZendeskAvatar)<AvatarArgs>`
   text-transform: uppercase;
@@ -35,7 +35,7 @@ const Avatar = ({ isSystem, badge, ...props }: AvatarArgs) => {
     if (type === "image")
       return <img alt="avatar" src={props.children as string} />;
     if (type === "text") return <Avatar.Text>{props.children}</Avatar.Text>;
-    if (type === "system") return <img alt="avatar" src={LogoIcon} />;
+    if (type === "system") return <InternalAvatar />;
   };
 
   return (

diff --git a/src/stories/chat/_types.tsx b/src/stories/chat/_types.tsx
@@ -45,7 +45,7 @@ export interface CommentMedia {
   type: string;
   name?: string;
   isLoadingMedia?: boolean;
-  isError?: boolean;
+  error?: string;
   url?: string;
 }
 

diff --git a/src/stories/chat/context/chatContext.tsx b/src/stories/chat/context/chatContext.tsx
@@ -66,39 +66,22 @@ export const ChatContextProvider = ({
       setEditor,
       thumbnails,
       setThumbnails,
-      afterUploadCallback: (failed: string[]) => {
-        setThumbnails(
-          thumbnails.map((file) => {
-            if (failed.includes(file.id)) {
-              file.isLoadingMedia = false;
-              //file.isError = true;
-            } else {
-              file.isLoadingMedia = false;
-              //file.isError = false
-            }
-            return file;
-          })
-        );
-      },
+      afterUploadCallback: (failed: string[]) => {},
 
-      addThumbnails: ({ files }: { files: (File & CommentMedia)[] }) => {
+      addThumbnails: async ({ files }: { files: (File & CommentMedia)[] }) => {
         setThumbnails((prev) => [...prev, ...files]);
-
-        if (onFileUpload) {
-          onFileUpload(files).then((data: Data) => {
-            const failed = data.failed?.map((f) => f.name);
-            setThumbnails((prev) => {
-              return prev.map((file) => {
-                file.isLoadingMedia = false;
-                if (failed?.length && failed.includes(file.id)) {
-                  file.isError = true;
-                } else {
-                  file.isError = false;
-                }
-                return file;
-              });
-            });
+        if (!onFileUpload) return;
+        try {
+          const data = await onFileUpload(files);
+          setThumbnails((prev) => {
+            return prev.map(file => {
+              file.isLoadingMedia = false;
+              file.error = data.failed?.find(f => f.name === file.name)?.errorCode;
+              return file;
+            })
           });
+        } catch (e) {
+          console.log("Error uploading files", e);
         }
       },
       clearInput: () => {

diff --git a/src/stories/chat/index.stories.tsx b/src/stories/chat/index.stories.tsx
@@ -260,9 +260,13 @@ Menus.args = {
   hasButtonsMenu: true,
   onFileUpload: async (files) => {
     return new Promise((resolve, reject) => {
+      // simulate a 2.5 seconds delay then fail the first file and succeed the others
       setTimeout(() => {
-        resolve({ failed: [], uploaded_ids: [] });
-      }, 3000);
+        resolve({
+          failed: [{errorCode: "GENERIC_ERROR", name: files[0].name}],
+          uploaded_ids: files.slice(1).map(file => ({id: parseInt(file.id)}))
+        });
+      }, 2500);
     });
   },
   i18n: {

diff --git a/src/stories/chat/parts/ThumbnailContainer/DeleteThumbnailX.tsx b/src/stories/chat/parts/ThumbnailContainer/DeleteThumbnailX.tsx
@@ -12,6 +12,7 @@ const StyledDeleteThumbnailX = styled.div`
   opacity: 0;
   transition: opacity 0.2s;
   z-index: 2;
+  color: ${({ theme }) => theme.palette.grey[800]};
 `;
 
 interface Props {

diff --git a/src/stories/chat/parts/ThumbnailContainer/Thumbnail.tsx b/src/stories/chat/parts/ThumbnailContainer/Thumbnail.tsx
@@ -4,36 +4,52 @@ import { Spinner } from "@zendeskgarden/react-loaders";
 import { SpecialCard } from "../../../special-cards";
 import { ReactComponent as VideoPlayIcon } from "../../../../assets/icons/video-play-icon.svg";
 
-const ImageCard = styled(SpecialCard)`
+const ImageCard = styled(SpecialCard)<{error?: string, isLoading?: boolean}>`
   padding: 0;
   position: relative;
   overflow: hidden;
-  min-width: 90px;
+  width: 90px;
 
   &:before {
     content: "";
+    font-size: ${({ theme }) => theme.fontSizes.xs};
     position: absolute;
+    padding: ${({ theme }) => theme.space.xs};
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: ${({ theme }) => theme.palette.grey[800]};
-    opacity: 0;
+    background-color: ${({ theme }) => theme.palette.grey[800]}00; // 0% opacity
     transition: opacity 0.2s;
-    z-index: 1;
   }
 
   &:hover {
     .deleteThumbnail {
       opacity: 1;
     }
     &:before {
-      opacity: 0.3;
+      background-color: ${({ theme }) => theme.palette.grey[800]}4d; // 30% opacity
     }
   }
-
+  ${(p) =>
+    p.error &&
+    `
+    &:before{
+      content: "Error: ${p.error}";
+      color: ${p.theme.palette.white};
+      background-color: ${p.theme.palette.grey[800]}b3; // 0.7 opacity
+    }
+  `}
+  ${(p) =>
+    p.isLoading &&
+    `
+    &:before{
+      background-color: ${p.theme.palette.grey[800]}b3; // 0.7 opacity
+    }
+  `}
   &.video {
     svg {
+      color: ${({ theme }) => theme.palette.grey[800]};
       position: absolute;
       top: 50%;
       left: 50%;
@@ -45,16 +61,15 @@ const ImageCard = styled(SpecialCard)`
   }
 `;
 
-const Preview = styled.div<{
-  url?: string;
-}>`
+const Preview = styled.div<{url?: string;}>`
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100px;
   width: 100%;
-
-  ${(p) =>
+  color: ${({ theme }) => theme.palette.white};
+  
+  ${p =>
     p.url &&
     `
     background-image: url(${p.url});
@@ -77,7 +92,7 @@ interface Props {
   isLoadingMedia?: boolean;
   removeThumbnail?: () => void;
   showX?: boolean;
-  isError?: boolean;
+  error?: string;
 }
 
 const Thumbnail = ({
@@ -86,8 +101,8 @@ const Thumbnail = ({
   removeThumbnail,
   clickThumbnail,
   showX,
-  isLoadingMedia = true,
-  isError = false,
+  isLoadingMedia,
+  error = "",
 }: Props) => {
   const handleCancel = (e: any) => {
     e.stopPropagation();
@@ -98,16 +113,16 @@ const Thumbnail = ({
     <ImageCard
       onClick={clickThumbnail}
       className={type.includes("video") ? "video" : "image"}
+      error={error}
+      isLoading={isLoadingMedia}
     >
-      {isError && (
-        // todo: add error icon
-        <span>error uploading media</span>
-      )}
       {isLoadingMedia ? (
-        <Preview>
+        <Preview url={src}>
           <Spinner
             style={{
               display: "flex",
+              position: "absolute",
+              color: "white",
               alignItems: "center",
               justifyContent: "center",
             }}
@@ -124,7 +139,7 @@ const Thumbnail = ({
               <video src={src}>
                 <track kind="captions" />
               </video>
-              <VideoPlayIcon />
+              <VideoPlayIcon opacity={error ? "0.3" : "1"} />
             </>
           )}
         </Preview>

diff --git a/src/stories/chat/parts/ThumbnailContainer/index.tsx b/src/stories/chat/parts/ThumbnailContainer/index.tsx
@@ -9,15 +9,6 @@ const FlexContainer = styled.div`
   flex-wrap: wrap;
 `;
 
-export interface FileElement {
-  fileName: string;
-  fileType: string;
-  errorCode?: "FILE_TOO_BIG" | "INVALID_FILE_EXTENSION" | "GENERIC_ERROR";
-  previewUrl: string;
-  internal_id: string;
-  isLoadingMedia: boolean;
-}
-
 interface Props {
   openLightbox: (index: number) => void;
 }
@@ -32,6 +23,7 @@ const ThumbnailContainer = ({ openLightbox }: Props) => {
       previewUrl: file.url,
       id: file.id,
       isLoadingMedia: file.isLoadingMedia,
+      error: file.error,
     }));
   }, [thumbnails]);
 
@@ -48,6 +40,7 @@ const ThumbnailContainer = ({ openLightbox }: Props) => {
           showX
           type={file.fileType}
           isLoadingMedia={file.isLoadingMedia}
+          error={file.error}
           removeThumbnail={() => {
             removeThumbnail(index);
             onDeleteThumbnail(file.id);

diff --git a/src/stories/chat/parts/bar.tsx b/src/stories/chat/parts/bar.tsx
@@ -126,6 +126,7 @@ const CommentBar = ({
           </IconButton>
         </Tooltip>
         <Tooltip
+          style={{ textAlign: "center" }}
           content={
             i18n?.menu?.attachment ?? (
               <span>

diff --git a/src/stories/highlight/CreateObservationButton.tsx b/src/stories/highlight/CreateObservationButton.tsx
@@ -0,0 +1,15 @@
+import { styled } from "styled-components";
+import { Button } from "../buttons/button";
+
+const CreateObservationButton = styled(Button) <{
+  position: { x: number; y: number };
+}>`
+  user-select: none;
+  position: absolute;
+  left: ${({ position: { x } }) => x}px;
+  top: ${({ position: { y } }) => y}px;
+  transform: translate(-50%, 0);
+  z-index: ${({ theme }) => theme.levels.front};
+`;
+
+export { CreateObservationButton };
diff --git a/src/stories/highlight/_types.tsx b/src/stories/highlight/_types.tsx
@@ -14,13 +14,14 @@ export interface HighlightArgs {
   isBold?: boolean;
   /** Renders with monospace font */
   isMonospace?: boolean;
-
   /** Adjusts the font size. By default font size is medium */
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
-
   handleSelection?: (part: { from: number; to: number; text: string }) => void;
-
   search?: string;
+  onSelectionButtonClick?: (part: { from: number; to: number; text: string }) => void;
+  i18n?: {
+    selectionButtonLabel: string;
+  };
 }
 
 export interface Observation extends Omit<IBookmark, "onClick"> {