fix(app): disallow non .py or .json protocol upload

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

@@ -25,6 +25,7 @@
   "import_a_file": "Import a protocol to get started",
   "import_new_protocol": "Import a Protocol",
   "import": "Import",
+  "incompatible_file_type": "Incompatible file type",
   "instrument_cal_data_title": "Calibration data",
   "instrument_not_attached": "Not attached",
   "instruments_title": "Required Pipettes",

app/src/organisms/ProtocolsLanding/ProtocolUploadInput.tsx

@@ -10,38 +10,51 @@ import {
   SPACING,
   LegacyStyledText,
 } from '@opentrons/components'
+import { ERROR_TOAST } from '../../atoms/Toast'
 import { UploadInput } from '../../molecules/UploadInput'
 import { addProtocol } from '../../redux/protocol-storage'
 import {
   useTrackEvent,
   ANALYTICS_IMPORT_PROTOCOL_TO_APP,
 } from '../../redux/analytics'
 import { useLogger } from '../../logger'
+import { useToaster } from '../ToasterOven'
 
 import type { Dispatch } from '../../redux/types'
 
 export interface UploadInputProps {
   onUpload?: () => void
 }
 
+const isValidProtocolFileName = (protocolFileName: string): boolean => {
+  return protocolFileName.endsWith('.py') || protocolFileName.endsWith('.json')
+}
+
 export function ProtocolUploadInput(
   props: UploadInputProps
 ): JSX.Element | null {
   const { t } = useTranslation(['protocol_info', 'shared'])
   const dispatch = useDispatch<Dispatch>()
   const logger = useLogger(new URL('', import.meta.url).pathname)
   const trackEvent = useTrackEvent()
+  const { makeToast } = useToaster()
 
   const handleUpload = (file: File): void => {
     if (file.path === null) {
       logger.warn('Failed to upload file, path not found')
     }
-    dispatch(addProtocol(file.path))
+    if (isValidProtocolFileName(file.name)) {
+      dispatch(addProtocol(file.path))
+    } else {
+      makeToast(t('incompatible_file_type') as string, ERROR_TOAST, {
+        closeButton: true,
+      })
+    }
+    props.onUpload?.()
     trackEvent({
       name: ANALYTICS_IMPORT_PROTOCOL_TO_APP,
       properties: { protocolFileName: file.name },
     })
-    props.onUpload?.()
   }
 
   return (