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

Analagous to our handling of non-.json custom labware upload, we want to
disallow upload of .py or .json files on Desktop. Expected behavior is
to check the filename extension of the prospective uploaded file (erring
on the side of lenient acceptance), and close the slideout and make
error toast if the extension is not .py or .json.

Closes RQA-2959

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 (