feat: style tweaks to upload attachments popover

packages/server/src/services/Attachments/AttachmentTransformer.ts

@@ -6,7 +6,7 @@ export class AttachmentTransformer extends Transformer {
    * @returns {string[]}
    */
   public excludeAttributes = (): string[] => {
-    return ['*'];
+    return ['id', 'createdAt'];
   };
 
   /**
@@ -14,6 +14,6 @@ export class AttachmentTransformer extends Transformer {
    * @returns {string[]}
    */
   public includeAttributes = (): string[] => {
-    return ['extension', 'key'];
+    return [];
   };
 }

packages/webapp/src/containers/Attachments/UploadAttachmentButton.module.scss

@@ -1,9 +1,8 @@
 
 .popover :global .bp4-popover-content{
-  min-width: 450px;
+  min-width: 600px;
 }
 
-
 .attachmentButton:not([class*=bp4-intent-]) {
   &,
   &:hover{

packages/webapp/src/containers/Attachments/UploadAttachmentPopoverContent.module.scss

@@ -4,9 +4,9 @@
 
 .hintText{
   display: flex;
-  font-size: 12px;
+  font-size: 11px;
   margin-top: 6px;
-  color: #8F99A8;
+  color: #738091;
   justify-content: space-between;
 }
 
@@ -15,27 +15,36 @@
 }
 
 .attachmentItem{
-  border: 1px solid #D3D8DE;
+  border-top: 1px solid #D3D8DE;
-  border-radius: 3px;
+  border-left: 1px solid #D3D8DE;
-  padding: 6px 10px;
+  border-right: 1px solid #D3D8DE;
+  padding: 10px 14px;
   justify-content: space-between;
+
+  &:first-child {
+    border-radius: 3px 3px 0 0;
+  }
+  &:last-child{
+    border-radius: 0 0 3px 3px;
+    border-bottom: 1px solid #D3D8DE;
+  }
 }
 
 .attachmentFilenameText{
-  color: #404854;
+  
 }
 
-.attachmentSizeText{
+.attachmentSizeText,
-  font-size: 12px;
+.attachmentLoadingText{
+  font-size: 13px;
   color: #738091;
 }
 
 .attachmentContent{
-  padding-left: 8px;
 }
 
 .attachmentIcon{
-  color: #8F99A8;
+  color: #626b7c;
 }
 
 .label{
@@ -47,3 +56,8 @@
   min-height: 140px;
   padding: 10px;
 }
+
+.attachmentIconWrap{
+  width: 20PX;
+  text-align: right;
+}

packages/webapp/src/containers/Attachments/UploadAttachmentsPopoverContent.tsx

@@ -1,4 +1,5 @@
 // @ts-nocheck
+import { useState } from 'react';
 import { isEmpty } from 'lodash';
 import { Button, Intent, Text, Spinner } from '@blueprintjs/core';
 import { Box, Group, Icon, Stack } from '@/components';
@@ -7,7 +8,10 @@ import {
   ImportDropzoneFieldProps,
 } from '@/containers/Import/ImportDropzoneFile';
 import { useUncontrolled } from '@/hooks/useUncontrolled';
-import { useUploadAttachments } from '@/hooks/query/attachments';
+import {
+  useGetPresignedUrlAttachment,
+  useUploadAttachments,
+} from '@/hooks/query/attachments';
 import { formatBytes } from '../Sales/Invoices/InvoiceForm/utils';
 import styles from './UploadAttachmentPopoverContent.module.scss';
 import { MIME_TYPES } from '@/components/Dropzone/mine-types';
@@ -20,7 +24,7 @@ interface AttachmentFileCommon {
 }
 interface AttachmentFileLoaded extends AttachmentFileCommon {}
 interface AttachmentFileLoading extends AttachmentFileCommon {
-  _loading: boolean;
+  loading: boolean;
 }
 type AttachmentFile = AttachmentFileLoaded | AttachmentFileLoading;
 
@@ -62,7 +66,7 @@ export function UploadAttachmentsPopoverContent({
         return {
           ...localFile,
           key: newKey,
-          _loading: false,
+          loading: false,
         };
       }
       return localFile;
@@ -100,7 +104,7 @@ export function UploadAttachmentsPopoverContent({
         originName: file.name,
         size: file.size,
         key,
-        _loading: true,
+        loading: true,
       },
       ...localFiles,
     ]);
@@ -130,35 +134,38 @@ export function UploadAttachmentsPopoverContent({
             {...dropzoneFieldProps}
           />
           <Group className={styles.hintText}>
-            <Box>Formats: CSV, XLSX</Box>
             <Box>Maximum: 25MB</Box>
           </Group>
         </Stack>
 
         {!isEmpty(localFiles) && (
-          <Stack spacing={8} className={styles.attachments}>
+          <Stack spacing={0} className={styles.attachments}>
             {localFiles.map((localFile: AttachmentFile, index: number) => (
               <Group
                 position={'space-between'}
                 className={styles.attachmentItem}
                 key={index}
               >
-                <Group spacing={16} className={styles.attachmentContent}>
+                <Group spacing={14} className={styles.attachmentContent}>
-                  {localFile._loading ? (
+                  <div className={styles.attachmentIconWrap}>
-                    <Spinner size={20} />
+                    {localFile.loading ? (
-                  ) : (
+                      <Spinner size={20} />
-                    <Icon
+                    ) : (
-                      icon={'media'}
+                      <Icon
-                      iconSize={16}
+                        icon={'media'}
-                      className={styles.attachmentIcon}
+                        iconSize={16}
-                    />
+                        className={styles.attachmentIcon}
-                  )}
+                      />
+                    )}
+                  </div>
                   <Stack spacing={2}>
                     <Text className={styles.attachmentFilenameText}>
                       {localFile.originName}
                     </Text>
-                    {localFile._loading ? (
+                    {localFile.loading ? (
-                      <Text>Loading...</Text>
+                      <Text className={styles.attachmentLoadingText}>
+                        Loading...
+                      </Text>
                     ) : (
                       <Text className={styles.attachmentSizeText}>
                         {formatBytes(localFile.size)}
@@ -167,11 +174,9 @@ export function UploadAttachmentsPopoverContent({
                   </Stack>
                 </Group>
 
-                {!localFile._loading && (
+                {!localFile.loading && (
-                  <Group spacing={0}>
+                  <Group spacing={2}>
-                    <Button small minimal>
+                    <ViewButton fileKey={localFile.key} />
-                      View
-                    </Button>
                     <Button
                       small
                       minimal
@@ -190,3 +195,30 @@ export function UploadAttachmentsPopoverContent({
     </div>
   );
 }
+
+const ViewButton = ({ fileKey }: { fileKey: string }) => {
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const { mutateAsync: getAttachmentPresignedUrl } =
+    useGetPresignedUrlAttachment();
+
+  const handleViewBtnClick = (key: string) => () => {
+    setLoading(true);
+
+    getAttachmentPresignedUrl(key).then((data) => {
+      window.open(data.presigned_url);
+      setLoading(false);
+    });
+  };
+
+  return (
+    <Button
+      small
+      minimal
+      onClick={handleViewBtnClick(fileKey)}
+      disabled={isLoading}
+      intent={Intent.PRIMARY}
+    >
+      View
+    </Button>
+  );
+};

packages/webapp/src/hooks/query/attachments.ts

@@ -2,10 +2,6 @@
 import { useMutation } from 'react-query';
 import useApiRequest from '../useRequest';
 
-const commonInvalidateQueries = (query) => {
-  // Invalidate accounts.
-};
-
 /**
  * Uploads the given attachments.
  */
@@ -29,3 +25,18 @@ export function useDeleteAttachment(props) {
     props,
   );
 }
+
+/**
+ * Uploads the given attachments.
+ */
+export function useGetPresignedUrlAttachment(props) {
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (key: string) =>
+      apiRequest
+        .get(`/attachments/${key}/presigned-url`)
+        .then((res) => res.data),
+    props,
+  );
+}