feat: Create file storage file view

Author: apburnes

api/serializers/site.js

@@ -11,6 +11,7 @@ const allowedAttributes = [
   'defaultBranch',
   'domain',
   'engine',
+  'liveDomain',
   'owner',
   'publishedAt',
   'repository',
@@ -58,6 +59,29 @@ const viewLinks = {
   viewLink: 'site',
 };
 
+function getLiveDomain(branchConfigs, domains) {
+  if (!branchConfigs || !domains) {
+    return '';
+  }
+
+  const config = branchConfigs.find((c) => c.context === 'site');
+
+  if (!config) {
+    return '';
+  }
+
+  const provisioned = domains.filter((d) => d.state === 'provisioned');
+  const domain = provisioned.find((d) => d.siteBranchConfigId === config.id);
+
+  if (!domain || !domain?.names) {
+    return '';
+  }
+
+  const domainName = domain.names.split(',')[0];
+
+  return `https://${domainName}`;
+}
+
 // Eventually replace `serialize`
 function serializeNew(site, isSystemAdmin = false) {
   const object = site.get({
@@ -96,6 +120,9 @@ function serializeNew(site, isSystemAdmin = false) {
 const serializeObject = (site, isSystemAdmin) => {
   const json = serializeNew(site, isSystemAdmin);
 
+  const liveDomain = getLiveDomain(json.SiteBranchConfigs, json.Domains);
+  json.liveDomain = liveDomain;
+
   if (json.Domains) {
     json.domains = site.Domains.map((d) =>
       pick(

frontend/hooks/useFileStorageFile.js

@@ -0,0 +1,35 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import federalist from '@util/federalistApi';
+
+export default function useFileStorageFile(fileStorageServiceId, fileStorageFileId) {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const { data, isLoading, isFetching, isPending, isPlaceholderData, isError, error } =
+    useQuery({
+      queryKey: ['fileStorageFile', fileStorageServiceId, fileStorageFileId],
+      queryFn: () => federalist.fetchPublicFile(fileStorageServiceId, fileStorageFileId),
+    });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (redirectTo) => {
+      await federalist.deletePublicItem(fileStorageServiceId, fileStorageFileId);
+      return navigate(redirectTo);
+    },
+  });
+
+  return {
+    data,
+    error,
+    deleteError: deleteMutation.error,
+    deleteIsPending: deleteMutation.isPending,
+    isError,
+    isFetching,
+    isLoading,
+    isPending,
+    isPlaceholderData,
+    queryClient,
+    deleteItem: (redirectTo) => deleteMutation.mutateAsync(redirectTo),
+  };
+}

frontend/hooks/useFileStorageFile.test.js

@@ -0,0 +1,87 @@
+import { waitFor, renderHook } from '@testing-library/react';
+import * as router from 'react-router-dom';
+import nock from 'nock';
+
+import { createTestQueryClient } from '@support/queryClient';
+import { getFileStorageFile, deletePublicItem } from '@support/nocks/fileStorage';
+import useFileStorageFile from './useFileStorageFile';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: jest.fn(),
+}));
+
+const createWrapper = createTestQueryClient();
+
+const props = {
+  fileStorageServiceId: 123,
+  fileId: 123,
+};
+
+describe('useFileStorage', () => {
+  beforeEach(() => {
+    nock.cleanAll();
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+    nock.restore();
+  });
+
+  it('should fetch public file successfully', async () => {
+    const data = {
+      id: props.fileId,
+      fileStorageServiceId: props.fileStorageServiceId,
+      name: 'test',
+    };
+    await getFileStorageFile({ ...props }, data);
+    jest.spyOn(router, 'useNavigate').mockReturnValue(jest.fn());
+
+    const { result } = renderHook(() => useFileStorageFile(...Object.values(props)), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(!result.current.isPending).toBe(true));
+
+    expect(result.current.data).toEqual(data);
+  });
+
+  it('should handle public file fetch error', async () => {
+    const error = {
+      message: 'An error occurred',
+    };
+    await getFileStorageFile({ ...props, statusCode: 401 }, error);
+    jest.spyOn(router, 'useNavigate').mockReturnValue(jest.fn());
+
+    const { result } = renderHook(() => useFileStorageFile(...Object.values(props)), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(!result.current.isPending).toBe(true));
+
+    expect(result.current.error.message).toEqual(error.message);
+  });
+
+  it('should delete a public file successfully', async () => {
+    const redirectTo = '/foo/bar/baz';
+    const data = {
+      id: props.fileId,
+      fileStorageServiceId: props.fileStorageServiceId,
+      name: 'test',
+    };
+    await getFileStorageFile({ ...props }, data);
+    await deletePublicItem(props.fileStorageServiceId, props.fileId);
+
+    const mockedNavigate = jest.fn();
+    jest.spyOn(router, 'useNavigate').mockReturnValue(mockedNavigate);
+
+    const { result } = renderHook(() => useFileStorageFile(...Object.values(props)), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(!result.current.isPending).toBe(true));
+    await waitFor(() => result.current.deleteItem(redirectTo));
+
+    expect(mockedNavigate).toHaveBeenCalledWith(redirectTo);
+  });
+});

frontend/pages/sites/$siteId/storage/FileList.jsx

@@ -13,13 +13,13 @@ const SORT_KEY_NAME = 'name';
 const SORT_KEY_LAST_MODIFIED = 'updatedAt';
 
 const FileListRow = ({
+  siteId,
   item,
   baseUrl,
   path,
   currentSortKey,
   onNavigate,
   onDelete,
-  onViewDetails,
   highlight = false,
 }) => {
   const copyUrl = `${baseUrl}/${item.key}`;
@@ -65,15 +65,10 @@ const FileListRow = ({
               {item.name}
             </a>
           ) : (
-            // eslint-disable-next-line jsx-a11y/anchor-is-valid
             <a
-              href="#"
+              href={`/sites/${siteId}/storage/files/${item.id}`}
               title="View file details"
               className="usa-link file-name"
-              onClick={(e) => {
-                e.preventDefault();
-                onViewDetails(item.name);
-              }}
             >
               {item.name}
             </a>
@@ -126,6 +121,7 @@ const FileList = ({
   currentSortOrder,
   highlightItem,
   children,
+  siteId,
 }) => {
   const TABLE_CAPTION = `
     Listing all contents for the current folder, sorted by ${currentSortKey} in
@@ -209,6 +205,7 @@ const FileList = ({
             onDelete={onDelete}
             onViewDetails={onViewDetails}
             highlight={highlightItem === item.name}
+            siteId={siteId}
           />
         ))}
       </tbody>
@@ -242,6 +239,7 @@ const SortIcon = ({ sort = '' }) => (
 );
 
 FileList.propTypes = {
+  siteId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   path: PropTypes.string.isRequired,
   baseUrl: PropTypes.string.isRequired,
   data: PropTypes.arrayOf(
@@ -262,9 +260,11 @@ FileList.propTypes = {
 };
 
 FileListRow.propTypes = {
+  siteId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   path: PropTypes.string.isRequired,
   baseUrl: PropTypes.string.isRequired,
   item: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     name: PropTypes.string.isRequired,
     key: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,

frontend/pages/sites/$siteId/storage/FileList.test.jsx

@@ -5,14 +5,14 @@ import FileList from './FileList.jsx';
 
 const mockFiles = [
   {
-    id: 20,
+    id: '20',
     name: 'Documents',
     key: '~assets/Documents',
     type: 'directory',
     updatedAt: '2024-02-10T12:30:00Z',
   },
   {
-    id: 21,
+    id: '21',
     name: 'report.pdf',
     key: '~assets/report.pdf',
     type: 'application/pdf',
@@ -21,7 +21,7 @@ const mockFiles = [
     size: 23456,
   },
   {
-    id: 22,
+    id: '22',
     name: 'presentation.ppt',
     key: '~assets/presentation.ppt',
     type: 'application/vnd.ms-powerpoint',
@@ -32,6 +32,7 @@ const mockFiles = [
 ];
 
 const mockProps = {
+  siteId: '1',
   path: '/',
   baseUrl: 'https://custom.domain.gov',
   data: mockFiles,
@@ -74,9 +75,14 @@ describe('FileList', () => {
   });
 
   it('calls onViewDetails when a file name is clicked', () => {
+    const { id, name } = mockFiles[1];
+    const href = `/sites/${mockProps.siteId}/storage/files/${id}`;
+
     render(<FileList {...mockProps} />);
-    fireEvent.click(screen.getByRole('link', { name: 'report.pdf' }));
-    expect(mockProps.onViewDetails).toHaveBeenCalledWith('report.pdf');
+
+    const link = screen.getByRole('link', { name });
+
+    expect(link).toHaveAttribute('href', href);
   });
 
   it('calls onSort and reverses sort when a sortable header is clicked', () => {

frontend/pages/sites/$siteId/storage/FileDetails.jsx renamed to frontend/pages/sites/$siteId/storage/files/$fileId/FileDetails.jsx

@@ -6,34 +6,18 @@ import prettyBytes from 'pretty-bytes';
 
 const FileDetails = ({
   name,
-  id,
   fullPath,
-  updatedBy,
-  updatedAt,
+  lastModifiedBy,
+  lastModifiedAt,
   size,
   mimeType,
   onDelete,
-  onClose,
 }) => {
-  const thisItem = {
-    id: id,
-    type: 'file',
-  };
-  if (id < 1) return null;
   return (
     <div className="file-details">
       <div className="file-details__header bg-base-lightest">
         <IconAttachment className="usa-icon margin-right-1" />
         <h3>File details</h3>
-        <button
-          title="close file details"
-          className="usa-button usa-button--unstyled file-details__close"
-          onClick={onClose}
-        >
-          <svg className="usa-icon" aria-hidden="true" role="img">
-            <use href="/img/sprite.svg#close"></use>
-          </svg>
-        </button>
       </div>
       <table className="usa-table usa-table--borderless file-details__table">
         <thead className="usa-sr-only">
@@ -61,12 +45,12 @@ const FileDetails = ({
             </td>
           </tr>
           <tr>
-            <th scope="row">Uploaded by</th>
-            <td className="text-bold">{updatedBy}</td>
+            <th scope="row">Last modified by</th>
+            <td className="text-bold">{lastModifiedBy}</td>
           </tr>
           <tr>
-            <th scope="row">Uploaded at</th>
-            <td>{updatedAt && dateAndTimeSimple(updatedAt)}</td>
+            <th scope="row">Last modified at</th>
+            <td>{dateAndTimeSimple(lastModifiedAt)}</td>
           </tr>
           <tr>
             <th scope="row">File size</th>
@@ -86,10 +70,7 @@ const FileDetails = ({
                 type="button"
                 title="Remove from public storage"
                 className="usa-button usa-button--outline delete-button"
-                onClick={() => {
-                  onDelete(thisItem);
-                  onClose();
-                }}
+                onClick={() => onDelete()}
               >
                 Delete
               </button>
@@ -105,12 +86,11 @@ FileDetails.propTypes = {
   name: PropTypes.string.isRequired,
   id: PropTypes.number.isRequired,
   fullPath: PropTypes.string.isRequired,
-  updatedBy: PropTypes.string.isRequired,
-  updatedAt: PropTypes.string.isRequired,
+  lastModifiedBy: PropTypes.string.isRequired,
+  lastModifiedAt: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
   mimeType: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
 };
 
 export default FileDetails;