feat(app): create DeleteRecordsModal

app/src/assets/localization/en/device_details.json

@@ -57,7 +57,17 @@
   "deck_fixture_setup_modal_top_description": "First, unscrew and remove the deck slot where you'll install a fixture. Then put the fixture in place and attach it as needed.",
   "deck_hardware": "deck hardware",
   "deck_slot": "deck slot {{slot}}",
+  "delete_all_logs": "Delete all logs?",
+  "delete_all_logs_description": "Deleting all logs will permanently remove them from the robot. This action cannot be undone.",
+  "delete_all_logs_recommendation": "We recommend downloading all log files before proceeding.",
+  "delete_all_run_records": "Delete all protocol run records?",
+  "delete_all_run_records_description": "Deleting all protocol run records will permanently remove them from the robot, along with all associated files. This action cannot be undone.",
+  "delete_all_run_records_recommendation": "We recommend downloading all protocol files before proceeding.",
   "delete_run": "Delete protocol run record",
+  "delete_selected": "Delete selected",
+  "delete_selected_run_records": "Delete selected protocol run records?",
+  "delete_selected_run_records_description": "Deleting the selected protocol run records will permanently remove them from the robot, along with all associated files. This action cannot be undone.",
+  "delete_selected_run_records_recommendation": "We recommend downloading all protocol files before proceeding.",
   "detach_gripper": "Detach gripper",
   "detach_pipette": "Detach pipette",
   "disable_camera": "Disable camera",

app/src/organisms/Desktop/Devices/DeleteRecordsModal/__tests__/DeleteRecordsModal.test.tsx

@@ -0,0 +1,50 @@
+import { screen } from '@testing-library/react'
+import { describe, it, vi } from 'vitest'
+
+import { renderWithProviders } from '/app/__testing-utils__'
+import { i18n } from '/app/i18n'
+
+import { DeleteRecordsModal } from '..'
+
+const render = (
+  type: React.ComponentProps<typeof DeleteRecordsModal>['type']
+) =>
+  renderWithProviders(
+    <DeleteRecordsModal type={type} onClose={vi.fn()} onConfirm={vi.fn()} />,
+    { i18nInstance: i18n }
+  )
+
+describe('DeleteRecordsModal', () => {
+  it('renders allRuns copy', () => {
+    render('allRuns')
+    screen.getByText('Delete all protocol run records?')
+    screen.getByText(
+      'Deleting all protocol run records will permanently remove them from the robot, along with all associated files. This action cannot be undone.'
+    )
+    screen.getByText(
+      'We recommend downloading all protocol files before proceeding.'
+    )
+  })
+
+  it('renders selectedRuns copy', () => {
+    render('selectedRuns')
+    screen.getByText('Delete selected protocol run records?')
+    screen.getByText(
+      'Deleting the selected protocol run records will permanently remove them from the robot, along with all associated files. This action cannot be undone.'
+    )
+    screen.getByText(
+      'We recommend downloading all protocol files before proceeding.'
+    )
+  })
+
+  it('renders allLogs copy', () => {
+    render('allLogs')
+    screen.getByText('Delete all logs?')
+    screen.getByText(
+      'Deleting all logs will permanently remove them from the robot. This action cannot be undone.'
+    )
+    screen.getByText(
+      'We recommend downloading all log files before proceeding.'
+    )
+  })
+})

app/src/organisms/Desktop/Devices/DeleteRecordsModal/deleterecordsmodal.module.css

@@ -0,0 +1,19 @@
+.button_row {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+}
+
+.description {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.modal_content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-24);
+}

app/src/organisms/Desktop/Devices/DeleteRecordsModal/hooks/useDeleteRecordsText.ts

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+
+import type { DeleteRecordsType } from '../types'
+
+export function useDeleteRecordsText(type: DeleteRecordsType): {
+  title: string
+  description: string
+  recommendation: string
+} {
+  const { t } = useTranslation('device_details')
+  switch (type) {
+    case 'allRuns':
+      return {
+        title: t('delete_all_run_records'),
+        description: t('delete_all_run_records_description'),
+        recommendation: t('delete_all_run_records_recommendation'),
+      }
+    case 'selectedRuns':
+      return {
+        title: t('delete_selected_run_records'),
+        description: t('delete_selected_run_records_description'),
+        recommendation: t('delete_selected_run_records_recommendation'),
+      }
+    case 'allLogs':
+      return {
+        title: t('delete_all_logs'),
+        description: t('delete_all_logs_description'),
+        recommendation: t('delete_all_logs_recommendation'),
+      }
+  }
+}

app/src/organisms/Desktop/Devices/DeleteRecordsModal/index.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next'
+
+import {
+  AlertPrimaryButton,
+  Modal,
+  SecondaryButton,
+  StyledText,
+} from '@opentrons/components'
+
+import styles from './deleterecordsmodal.module.css'
+import { useDeleteRecordsText } from './hooks/useDeleteRecordsText'
+
+import type { DeleteRecordsType } from './types'
+
+interface DeleteRecordsModalProps {
+  onClose: () => void
+  onConfirm: () => void
+  type: DeleteRecordsType
+}
+
+export function DeleteRecordsModal(
+  props: DeleteRecordsModalProps
+): JSX.Element {
+  const { onClose, onConfirm, type } = props
+  const { t } = useTranslation(['device_details', 'shared'])
+  const { title, description, recommendation } = useDeleteRecordsText(type)
+
+  return (
+    <Modal type="warning" title={title} onClose={onClose}>
+      <div className={styles.modal_content}>
+        <div className={styles.description}>
+          <StyledText desktopStyle="bodyDefaultRegular">
+            {description}
+          </StyledText>
+          <StyledText desktopStyle="bodyDefaultRegular">
+            {recommendation}
+          </StyledText>
+        </div>
+        <div className={styles.button_row}>
+          <SecondaryButton onClick={onClose}>
+            {t('shared:cancel')}
+          </SecondaryButton>
+          <AlertPrimaryButton onClick={onConfirm}>
+            {t('delete_all')}
+          </AlertPrimaryButton>
+        </div>
+      </div>
+    </Modal>
+  )
+}

app/src/organisms/Desktop/Devices/DeleteRecordsModal/types.ts

@@ -0,0 +1 @@
+export type DeleteRecordsType = 'allRuns' | 'selectedRuns' | 'allLogs'

app/src/organisms/Desktop/Devices/HistoricalProtocolRun.tsx → app/src/organisms/Desktop/Devices/RecentProtocolRuns/HistoricalProtocolRun.tsx

@@ -15,12 +15,14 @@ import { EMPTY_TIMESTAMP } from '/app/resources/runs'
 import { formatInterval } from '/app/transformations/commands'
 import { formatTimestamp } from '/app/transformations/runs'
 
-import { RECENT_PROTOCOL_RUNS_HEADER } from './constants'
-import styles from './HistoricalProtocolRun.module.css'
 import { HistoricalProtocolRunOverflowMenu as OverflowMenu } from './HistoricalProtocolRunOverflowMenu'
+import styles from './recentprotocolruns.module.css'
 
 import type { RunData } from '@opentrons/api-client'
 
+// inclusive of overflow menu button
+const RECENT_PROTOCOL_RUNS_COLUMNS = '30% 25% 16% 5% 14% 10%'
+
 interface HistoricalProtocolRunProps {
   run: RunData
   protocolName: string
@@ -72,7 +74,7 @@ export function HistoricalProtocolRun(
         <Flex
           width="88%"
           display="grid"
-          gridTemplateColumns={RECENT_PROTOCOL_RUNS_HEADER}
+          gridTemplateColumns={RECENT_PROTOCOL_RUNS_COLUMNS}
           gap={SPACING.spacing20}
           alignItems={ALIGN_CENTER}
         >