Merge branch 'Development' into 619/refactor-image-upload-button

codeforpdx · Dec 5, 2024 · 8544c97 · 8544c97
2 parents 1472b48 + 9e11756
commit 8544c97
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "pass",
   "homepage": ".",
-  "version": "1.1.0-alpha",
+  "version": "1.1.1-alpha",
   "description": "",
   "scripts": {
     "start": "concurrently --kill-others \"npm run podserver\" \"npm run dev\"",

diff --git a/src/components/Contacts/ContactListTableDesktop.jsx b/src/components/Contacts/ContactListTableDesktop.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import EditOutlined from '@mui/icons-material/EditOutlined';
 import SendIcon from '@mui/icons-material/Send';
+import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
 import {
   DataGrid,
@@ -12,6 +13,10 @@ import {
   GridToolbarFilterButton,
   GridToolbarDensitySelector
 } from '@mui/x-data-grid';
+// Custom Hooks Imports
+import useNotification from '@hooks/useNotification';
+// Util Imports
+import { saveToClipboard } from '@utils';
 // Component Imports
 import ContactProfileIcon from './ContactProfileIcon';
 
@@ -49,6 +54,7 @@ const ContactListTableDesktop = ({
   handleSendMessage,
   'data-testid': dataTestId
 }) => {
+  const { addNotification } = useNotification();
   const theme = useTheme();
 
   const columnTitlesArray = [
@@ -68,6 +74,15 @@ const ContactListTableDesktop = ({
     },
     {
       field: 'webId',
+      renderCell: (contact) => (
+        <Typography
+          noWrap
+          sx={{ cursor: 'pointer', fontSize: '0.875rem' }}
+          onClick={() => saveToClipboard(contact.id, 'webId copied to clipboard', addNotification)}
+        >
+          {contact.id}
+        </Typography>
+      ),
       headerName: 'Web ID',
       minWidth: 150,
       flex: 1,
@@ -101,7 +116,7 @@ const ContactListTableDesktop = ({
       field: 'Edit',
       renderCell: (contact) => (
         <EditOutlined
-          sx={{ color: 'gray', cursor: 'pointer' }}
+          sx={{ color: '#808080', cursor: 'pointer' }}
           onClick={() => editContact(contact.row.Profile)}
         />
       ),

diff --git a/src/components/Contacts/ContactListTableMobile.jsx b/src/components/Contacts/ContactListTableMobile.jsx
@@ -185,6 +185,18 @@ const ContactListTableMobile = ({
                   'aria-labelledby': 'actions-icon-button'
                 }}
               >
+                <MenuItem
+                  component={Button}
+                  onClick={handleMenuItemClick(
+                    () =>
+                      saveToClipboard(contact.webId, 'webId copied to clipboard', addNotification),
+                    contact
+                  )}
+                  startIcon={<ContentCopyIcon sx={iconSize} />}
+                  sx={iconStyling}
+                >
+                  Copy WebId
+                </MenuItem>
                 <MenuItem
                   component={Button}
                   onClick={handleMenuItemClick(handleProfileClick, contact)}
@@ -209,21 +221,6 @@ const ContactListTableMobile = ({
                 >
                   Message
                 </MenuItem>
-                {/* TODO: Keep copy function? */}
-                {/* If so, also add to Desktop table? */}
-                {/* Maybe without any icon. Simply click on the web ID and it will copy? */}
-                <MenuItem
-                  component={Button}
-                  onClick={handleMenuItemClick(
-                    () =>
-                      saveToClipboard(contact.webId, 'webId copied to clipboard', addNotification),
-                    contact
-                  )}
-                  startIcon={<ContentCopyIcon sx={iconSize} />}
-                  sx={iconStyling}
-                >
-                  Copy WebId
-                </MenuItem>
                 <MenuItem
                   component={Button}
                   onClick={handleMenuItemClick(editContact, contact)}

diff --git a/src/components/Documents/DocumentTable.jsx b/src/components/Documents/DocumentTable.jsx
@@ -9,7 +9,7 @@ import Box from '@mui/material/Box';
 import { useMediaQuery } from '@mui/material';
 // Context Imports
 import { DocumentListContext } from '@contexts';
-import { useSession } from '@hooks';
+import { useNotification, useSession } from '@hooks';
 // Utility Imports
 import { getBlobFromSolid } from '@utils';
 // Theme Imports
@@ -35,6 +35,7 @@ import DocumentsDesktop from './DocumentsDesktop';
 const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) => {
   const { session } = useSession();
   const { documentListObject, loadingDocuments } = useContext(DocumentListContext);
+  const { addNotification } = useNotification();
 
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const isSmallScreenHeight = useMediaQuery('(max-height: 600px)');
@@ -59,10 +60,21 @@ const DocumentTable = ({ handleAclPermissionsModal, handleSelectDeleteDoc }) =>
      * @returns {Promise<Blob>} A promise that resolves with the Blob of the document.
      * @throws {Error} Throws an error if there is an issue fetching the document blob.
      */
-    const urlFileBlob = await getBlobFromSolid(session, urlToOpen);
+    try {
+      const urlFileBlob = await getBlobFromSolid(session, urlToOpen);
 
-    // Open a new window to display the document using the blob URL
-    window.open(urlFileBlob);
+      // Open a new window to display the document using the blob URL
+      window.open(urlFileBlob);
+    } catch (e) {
+      if (e?.statusCode === 403) {
+        addNotification('error', 'You do not have permission to view this document');
+      } else {
+        addNotification(
+          'error',
+          `Document preview failed. Reason: ${e?.message || 'Unknown error'}`
+        );
+      }
+    }
   };
 
   // Maps raw document types to user-friendly display names using `DOC_TYPES`

diff --git a/src/components/Documents/DocumentsDesktop.jsx b/src/components/Documents/DocumentsDesktop.jsx
@@ -14,8 +14,6 @@ import {
 } from '@mui/x-data-grid';
 // Util Imports
 import { getTypeText } from '@utils';
-// Hooks Imports
-import { useSession } from '@hooks';
 // Theme Imports
 import theme from '../../theme';
 
@@ -68,16 +66,14 @@ const CustomToolbar = () => (
  * @returns {React.JSX.Element} The DocumentsDesktop component
  */
 const DocumentsDesktop = ({ documents, handlers }) => {
-  const { session } = useSession();
   const location = useLocation();
-  const profileWebId = decodeURIComponent(location.pathname.split('/')[2]);
 
   const columnTitlesArray = [
-    { field: 'Name', minWidth: 120, flex: 1, headerAlign: 'center', align: 'center' },
-    { field: 'Type', minWidth: 120, flex: 1, headerAlign: 'center', align: 'center' },
-    { field: 'Description', minWidth: 120, flex: 1, headerAlign: 'center', align: 'center' },
-    { field: 'Upload Date', minWidth: 120, flex: 1, headerAlign: 'center', align: 'center' },
-    { field: 'Expiration Date', minWidth: 120, flex: 1, headerAlign: 'center', align: 'center' },
+    { field: 'Name', minWidth: 120, flex: 3, headerAlign: 'center', align: 'center' },
+    { field: 'Type', minWidth: 120, flex: 2, headerAlign: 'center', align: 'center' },
+    { field: 'Description', minWidth: 120, flex: 3, headerAlign: 'center', align: 'center' },
+    { field: 'Upload Date', minWidth: 120, flex: 2, headerAlign: 'center', align: 'center' },
+    { field: 'Expiration Date', minWidth: 120, flex: 2, headerAlign: 'center', align: 'center' },
     {
       field: 'Preview',
       minWidth: 100,
@@ -116,7 +112,7 @@ const DocumentsDesktop = ({ documents, handlers }) => {
             onClick={() => handlers.onShare('document', name, type)}
             label="Share"
             data-testid={`share-button-${id}`}
-            disabled={session.info.webId !== profileWebId}
+            disabled={location.pathname !== '/documents'}
           />
         );
       }
@@ -138,7 +134,7 @@ const DocumentsDesktop = ({ documents, handlers }) => {
             onClick={() => handlers.onDelete(document)}
             label="Delete"
             data-testid={`delete-button-${document.id}`}
-            disabled={session.info.webId !== profileWebId}
+            disabled={location.pathname !== '/documents'}
           />
         );
       }

diff --git a/src/components/Messages/MessagePreview.jsx b/src/components/Messages/MessagePreview.jsx
@@ -74,10 +74,12 @@ const MessagePreview = ({ message, folderType }) => {
     return 2;
   };
 
+  const isInbox = folderType === 'Inbox';
+
   const messageInfo = [
     {
-      title: 'Sender: ',
-      text: message?.sender,
+      title: isInbox ? 'Sender: ' : 'Recipient: ',
+      text: isInbox ? message?.sender : message?.recipient,
       xs_value: isSmallScreen ? 12 : renderMediumGridLeft()
     },
     {

diff --git a/src/pages/Contacts.jsx b/src/pages/Contacts.jsx
@@ -158,7 +158,6 @@ const Contacts = () => {
                 }}
                 IconComponent={KeyboardArrowDownIcon}
               >
-                {' '}
                 <MenuItem value="Sort by:" disabled>
                   Sort by:
                 </MenuItem>

diff --git a/test/components/Messages/MessagePreview.test.jsx b/test/components/Messages/MessagePreview.test.jsx
@@ -7,10 +7,15 @@ import createMatchMedia from '../../helpers/createMatchMedia';
 
 const queryClient = new QueryClient();
 
-const mockMessageInfo = { sender: 'test', title: 'test title', uploadDate: new Date('1-1-2000') };
-const MockMessagePreview = () => (
+const mockMessageInfo = {
+  sender: 'test',
+  recipient: 'testrecipient',
+  title: 'test title',
+  uploadDate: new Date('1-1-2000')
+};
+const MockMessagePreview = ({ folderType = 'Inbox' }) => (
   <QueryClientProvider client={queryClient}>
-    <MessagePreview message={mockMessageInfo} />
+    <MessagePreview message={mockMessageInfo} folderType={folderType} />
   </QueryClientProvider>
 );
 
@@ -54,3 +59,16 @@ describe('Grid sizes', () => {
     expect(dateCell.classList.contains('MuiGrid-grid-xs-12')).toBe(true);
   });
 });
+
+describe('Outbox shows Recipient instead of Sender', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders Recipient text', () => {
+    const { getByText } = render(<MockMessagePreview folderType="Outbox" />);
+    const recipientCell = getByText('Recipient:').parentElement;
+
+    expect(recipientCell.classList.contains('MuiGrid-grid-xs-5')).toBe(true);
+  });
+});