review fix

Author: ncdiehl11

app/src/organisms/Devices/DownloadCsvFileLink.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  ALIGN_CENTER,
+  Flex,
+  Icon,
+  LegacyStyledText,
+  Link,
+  SPACING,
+  TYPOGRAPHY,
+} from '@opentrons/components'
+import { useCsvFileRawQuery } from '@opentrons/react-api-client'
+import { downloadFile } from './utils'
+
+interface DownloadCsvFileLinkProps {
+  fileId: string
+  fileName: string
+}
+export function DownloadCsvFileLink(
+  props: DownloadCsvFileLinkProps
+): JSX.Element {
+  const { fileId, fileName } = props
+  const { t } = useTranslation('run_details')
+  const { data: csvFileRaw } = useCsvFileRawQuery(fileId)
+
+  return (
+    <Link
+      role="button"
+      css={
+        csvFileRaw == null
+          ? TYPOGRAPHY.darkLinkLabelSemiBoldDisabled
+          : TYPOGRAPHY.linkPSemiBold
+      }
+      onClick={() => {
+        if (csvFileRaw != null) {
+          downloadFile(csvFileRaw, fileName)
+        }
+      }}
+    >
+      <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing4}>
+        <LegacyStyledText as="p">{t('download')}</LegacyStyledText>
+        <Icon name="download" size="1rem" />
+      </Flex>
+    </Link>
+  )
+}

app/src/organisms/Devices/HistoricalProtocolRunDrawer.tsx

@@ -11,11 +11,9 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  Icon,
   InfoScreen,
   JUSTIFY_FLEX_START,
   LegacyStyledText,
-  Link,
   LocationIcon,
   OVERFLOW_HIDDEN,
   SPACING,
@@ -27,11 +25,8 @@ import {
   getLoadedLabwareDefinitionsByUri,
   getModuleDisplayName,
 } from '@opentrons/shared-data'
-import {
-  useAllCsvFilesQuery,
-  useCsvFileRawQuery,
-} from '@opentrons/react-api-client'
-import { downloadFile } from './utils'
+import { useAllCsvFilesQuery } from '@opentrons/react-api-client'
+import { DownloadCsvFileLink } from './DownloadCsvFileLink'
 import { useFeatureFlag } from '../../redux/config'
 import { Banner } from '../../atoms/Banner'
 import { useMostRecentCompletedAnalysis } from '../LabwarePositionCheck/useMostRecentCompletedAnalysis'
@@ -101,7 +96,7 @@ export function HistoricalProtocolRunDrawer(
   ) : null
 
   const protocolFilesData =
-    allProtocolDataFiles.length === 0 ? (
+    allProtocolDataFiles.length === 1 ? (
       <InfoScreen contentType="noFiles" t={t} backgroundColor={COLORS.grey35} />
     ) : (
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
@@ -173,7 +168,7 @@ export function HistoricalProtocolRunDrawer(
                   </LegacyStyledText>
                 </Box>
                 <Box width="34%">
-                  <DownloadLink fileId={fileId} fileName={fileName} />
+                  <DownloadCsvFileLink fileId={fileId} fileName={fileName} />
                 </Box>
               </Flex>
             )
@@ -300,34 +295,3 @@ export function HistoricalProtocolRunDrawer(
     </Flex>
   )
 }
-
-interface DownloadLinkProps {
-  fileId: string
-  fileName: string
-}
-function DownloadLink(props: DownloadLinkProps): JSX.Element {
-  const { fileId, fileName } = props
-  const { t } = useTranslation('run_details')
-  const { data: csvFileRaw } = useCsvFileRawQuery(fileId)
-
-  return (
-    <Link
-      role="button"
-      css={
-        csvFileRaw == null
-          ? TYPOGRAPHY.darkLinkLabelSemiBoldDisabled
-          : TYPOGRAPHY.linkPSemiBold
-      }
-      onClick={() => {
-        if (csvFileRaw != null) {
-          downloadFile(csvFileRaw, fileName)
-        }
-      }}
-    >
-      <Flex alignItems={ALIGN_CENTER}>
-        <LegacyStyledText as="p">{t('download')}</LegacyStyledText>
-        <Icon name="download" size="1rem" marginLeft="0.4375rem" />
-      </Flex>
-    </Link>
-  )
-}

react-api-client/src/dataFiles/__tests__/useCsvFileRawQuery.test.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { QueryClient, QueryClientProvider } from 'react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { getCsvFileRaw } from '@opentrons/api-client'
+import { useHost } from '../../api'
+import { useCsvFileRawQuery } from '..'
+
+import type {
+  HostConfig,
+  Response,
+  Protocol,
+  DownloadedCsvFileResponse,
+} from '@opentrons/api-client'
+
+vi.mock('@opentrons/api-client')
+vi.mock('../../api/useHost')
+
+const HOST_CONFIG: HostConfig = { hostname: 'localhost' }
+const FILE_ID = 'file123'
+const FILE_CONTENT_RESPONSE = 'content,of,my,csv\nfile,' as DownloadedCsvFileResponse
+
+describe('useCsvFileRawQuery hook', () => {
+  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+
+  beforeEach(() => {
+    const queryClient = new QueryClient()
+    const clientProvider: React.FunctionComponent<{
+      children: React.ReactNode
+    }> = ({ children }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+
+    wrapper = clientProvider
+  })
+
+  it('should return no data if no host', () => {
+    vi.mocked(useHost).mockReturnValue(null)
+
+    const { result } = renderHook(() => useCsvFileRawQuery(FILE_ID), {
+      wrapper,
+    })
+
+    expect(result.current.data).toBeUndefined()
+  })
+
+  it('should return no data if the get file request fails', () => {
+    vi.mocked(useHost).mockReturnValue(HOST_CONFIG)
+    vi.mocked(getCsvFileRaw).mockRejectedValue('oh no')
+
+    const { result } = renderHook(() => useCsvFileRawQuery(FILE_ID), {
+      wrapper,
+    })
+    expect(result.current.data).toBeUndefined()
+  })
+
+  it('should return file data if successful request', async () => {
+    vi.mocked(useHost).mockReturnValue(HOST_CONFIG)
+    vi.mocked(getCsvFileRaw).mockResolvedValue({
+      data: FILE_CONTENT_RESPONSE,
+    } as Response<DownloadedCsvFileResponse>)
+
+    const { result } = renderHook(() => useCsvFileRawQuery(FILE_ID), {
+      wrapper,
+    })
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(FILE_CONTENT_RESPONSE)
+    })
+  })
+})

react-api-client/src/dataFiles/useCsvFileRawQuery.ts

@@ -21,9 +21,7 @@ export function useCsvFileRawQuery(
   const query = useQuery<DownloadedCsvFileResponse>(
     [host, `/dataFiles/${fileId}/download`],
     () =>
-      getCsvFileRaw(host as HostConfig, fileId as string).then(
-        response => response.data
-      ),
+      getCsvFileRaw(host as HostConfig, fileId).then(response => response.data),
     allOptions
   )
   return query