style(js): convert property access from bracket to dot where able (#8267

)

.eslintrc.js

@@ -24,7 +24,6 @@ module.exports = {
 
     // TODO(mc, 2021-01-29): fix these and remove warning overrides
     '@typescript-eslint/default-param-last': 'warn',
-    'dot-notation': 'warn',
     'lines-between-class-members': 'warn',
     'array-callback-return': 'warn',
     'no-prototype-builtins': 'warn',
@@ -52,13 +51,11 @@ module.exports = {
     {
       files: ['**/*.js'],
       parser: '@babel/eslint-parser',
-      extends: ['prettier'],
     },
     {
       // TODO(mc, 2021-03-18): remove to default these rules back to errors
       files: ['**/*.@(ts|tsx)'],
       rules: {
-        '@typescript-eslint/dot-notation': 'warn',
         '@typescript-eslint/strict-boolean-expressions': 'warn',
         '@typescript-eslint/prefer-nullish-coalescing': 'warn',
         '@typescript-eslint/prefer-optional-chain': 'warn',

Makefile

@@ -28,10 +28,11 @@ ROBOT_SERVER_DIR := robot-server
 # documentation
 BUILD_NUMBER ?=
 
-# watch, coverage, and update snapshot variables for tests
+# watch, coverage, update snapshot, and warning suppresion variables for tests and linting
 watch ?= false
 cover ?= true
 updateSnapshot ?= false
+quiet ?= false
 
 FORMAT_FILE_GLOB = ".*.@(js|ts|tsx|yml)" "**/*.@(ts|tsx|js|json|md|yml)"
 
@@ -189,7 +190,7 @@ lint-py:
 
 .PHONY: lint-js
 lint-js:
-	eslint ".*.@(js|ts|tsx)" "**/*.@(js|ts|tsx)"
+	eslint --quiet=$(quiet) ".*.@(js|ts|tsx)" "**/*.@(js|ts|tsx)"
 	prettier --ignore-path .eslintignore --check $(FORMAT_FILE_GLOB)
 
 .PHONY: lint-json

app/src/molecules/DeckMap/index.tsx

@@ -54,7 +54,7 @@ const deckSetupLayerBlocklist = [
 ]
 
 function DeckMapComponent(props: Props): JSX.Element {
-  const deckDef = React.useMemo(() => getDeckDefinitions()['ot2_standard'], [])
+  const deckDef = React.useMemo(() => getDeckDefinitions().ot2_standard, [])
   const {
     modulesBySlot,
     labwareBySlot,

app/src/organisms/CalibrationPanels/DeckSetup.tsx

@@ -97,7 +97,7 @@ function HealthCheckText({
 }
 
 export function DeckSetup(props: CalibrationPanelProps): JSX.Element {
-  const deckDef = React.useMemo(() => getDeckDefinitions()['ot2_standard'], [])
+  const deckDef = React.useMemo(() => getDeckDefinitions().ot2_standard, [])
 
   const {
     tipRack,

app/src/organisms/CalibrationPanels/Introduction.tsx

@@ -590,7 +590,7 @@ function RequiredLabwareCard(props: RequiredLabwareCardProps): JSX.Element {
   const imageSrc =
     loadName in labwareImages
       ? labwareImages[loadName as keyof typeof labwareImages]
-      : labwareImages['generic_custom_tiprack']
+      : labwareImages.generic_custom_tiprack
 
   return (
     <Flex

app/src/pages/Calibrate/CalibratePanel/PipetteList.tsx

@@ -75,8 +75,7 @@ export function PipetteListComponent(
           hash: string | null
         ): string => {
           const url =
-            urlsByMount[mount][hash ?? 'default'] ??
-            urlsByMount[mount]['default']
+            urlsByMount[mount][hash ?? 'default'] ?? urlsByMount[mount].default
           return url.path
         }
         return (

components/src/deck/Module.stories.tsx

@@ -30,7 +30,7 @@ export default {
 
 const Template: Story<React.ComponentProps<typeof ModuleComponent>> = args => {
   return (
-    <RobotWorkSpace deckDef={getDeckDefinitions()['ot2_standard']}>
+    <RobotWorkSpace deckDef={getDeckDefinitions().ot2_standard}>
       {({ deckSlotsById }: RobotWorkSpaceRenderProps) => {
         const slot = deckSlotsById['7']
         return (

components/src/deck/RobotWorkSpace.stories.tsx

@@ -18,7 +18,7 @@ export default {
       defaultValue: 'ot2_standard',
     },
     deckLayerBlocklist: {
-      options: Object.keys(allDeckDefs['ot2_standard'].layers),
+      options: Object.keys(allDeckDefs.ot2_standard.layers),
       control: {
         type: 'check',
       },

labware-library/src/analytics/initializeFullstory.ts

@@ -6,10 +6,10 @@ const FULLSTORY_ORG = process.env.OT_LL_FULLSTORY_ORG
 export const initializeFullstory = (): void => {
   console.debug('initializing Fullstory')
   // NOTE: this code snippet is distributed by Fullstory, last updated 2019-10-04
-  global['_fs_debug'] = false
-  global['_fs_host'] = 'fullstory.com'
-  global['_fs_org'] = FULLSTORY_ORG
-  global['_fs_namespace'] = FULLSTORY_NAMESPACE
+  global._fs_debug = false
+  global._fs_host = 'fullstory.com'
+  global._fs_org = FULLSTORY_ORG
+  global._fs_namespace = FULLSTORY_NAMESPACE
   ;(function (m, n, e, t, l, o, g, y) {
     if (e in m) {
       if (m.console && m.console.log) {
@@ -58,7 +58,7 @@ export const initializeFullstory = (): void => {
       g(o, v)
     }
     g.clearUserCookie = function () {}
-  })(global, global.document, global['_fs_namespace'], 'script', 'user')
+  })(global, global.document, global._fs_namespace, 'script', 'user')
 
   _setAnalyticsTags()
 }

labware-library/src/components/measurement-guide/index.ts

@@ -144,7 +144,7 @@ export function getFootprintDiagram(props: DiagramProps): string[] {
   if (category === 'aluminumBlock') {
     return insertCategory ? ALUM_BLOCK_FOOTPRINTS[insertCategory] : []
   } else if (category === 'tubeRack' && irregular) {
-    return FOOTPRINT_DIAGRAMS['irregular']
+    return FOOTPRINT_DIAGRAMS.irregular
   }
   return category ? FOOTPRINT_DIAGRAMS[category] : []
 }
@@ -153,8 +153,8 @@ export function getSpacingDiagram(props: DiagramProps): string[] {
   const { category, isMultiRow, shape } = props
   if (category === 'reservoir') {
     return isMultiRow
-      ? RESERVOIR_SPACING_DIAGRAMS['multiRow']
-      : RESERVOIR_SPACING_DIAGRAMS['singleRow']
+      ? RESERVOIR_SPACING_DIAGRAMS.multiRow
+      : RESERVOIR_SPACING_DIAGRAMS.singleRow
   }
 
   return shape ? SPACING_DIAGRAMS[shape] : []

protocol-designer/src/analytics/fullstory.ts

@@ -2,11 +2,11 @@
 import cookie from 'cookie'
 
 export const shutdownFullstory = (): void => {
-  if (window[window['_fs_namespace']]) {
-    window[window['_fs_namespace']].shutdown()
+  if (window[window._fs_namespace]) {
+    window[window._fs_namespace].shutdown()
   }
   // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-  delete window[window['_fs_namespace']]
+  delete window[window._fs_namespace]
 }
 
 const _setAnalyticsTags = (): void => {
@@ -19,8 +19,8 @@ const _setAnalyticsTags = (): void => {
   // NOTE: fullstory expects the keys 'displayName' and 'email' verbatim
   // though all other key names must be fit the schema described here
   // https://help.fullstory.com/develop-js/137380
-  if (window[window['_fs_namespace']]) {
-    window[window['_fs_namespace']].setUserVars({
+  if (window[window._fs_namespace]) {
+    window[window._fs_namespace].setUserVars({
       displayName,
       email,
       commit_str,
@@ -32,10 +32,10 @@ const _setAnalyticsTags = (): void => {
 }
 
 // NOTE: this code snippet is distributed by Fullstory and formatting has been maintained
-window['_fs_debug'] = false
-window['_fs_host'] = 'fullstory.com'
-window['_fs_org'] = process.env.OT_PD_FULLSTORY_ORG
-window['_fs_namespace'] = 'FS'
+window._fs_debug = false
+window._fs_host = 'fullstory.com'
+window._fs_org = process.env.OT_PD_FULLSTORY_ORG
+window._fs_namespace = 'FS'
 
 export const initializeFullstory = (): void => {
   ;(function (m, n, e, t, l, o, g: any, y: any) {
@@ -86,6 +86,6 @@ export const initializeFullstory = (): void => {
       g(o, v)
     }
     g.clearUserCookie = function () {}
-  })(global, global.document, global['_fs_namespace'], 'script', 'user')
+  })(global, global.document, global._fs_namespace, 'script', 'user')
   _setAnalyticsTags()
 }

protocol-designer/src/components/BatchEditForm/BatchEditMix.tsx

@@ -80,12 +80,12 @@ export const BatchEditMix = (props: BatchEditMixProps): JSX.Element => {
           >
             <Box className={styles.form_row}>
               <FlowRateField
-                {...propsForFields['aspirate_flowRate']}
+                {...propsForFields.aspirate_flowRate}
                 pipetteId={getPipetteIdForForm()}
                 flowRateType="aspirate"
               />
               <TipPositionField
-                {...propsForFields['mix_mmFromBottom']}
+                {...propsForFields.mix_mmFromBottom}
                 labwareId={getLabwareIdForPositioningField('mix_mmFromBottom')}
               />
               <WellOrderField
@@ -96,10 +96,10 @@ export const BatchEditMix = (props: BatchEditMixProps): JSX.Element => {
                 firstName="mix_wellOrder_first"
                 secondName="mix_wellOrder_second"
                 updateFirstWellOrder={
-                  propsForFields['mix_wellOrder_first'].updateValue
+                  propsForFields.mix_wellOrder_first.updateValue
                 }
                 updateSecondWellOrder={
-                  propsForFields['mix_wellOrder_second'].updateValue
+                  propsForFields.mix_wellOrder_second.updateValue
                 }
               />
             </Box>
@@ -121,7 +121,7 @@ export const BatchEditMix = (props: BatchEditMixProps): JSX.Element => {
           >
             <Box className={styles.form_row}>
               <FlowRateField
-                {...propsForFields['dispense_flowRate']}
+                {...propsForFields.dispense_flowRate}
                 pipetteId={getPipetteIdForForm()}
                 flowRateType="dispense"
               />
@@ -135,24 +135,24 @@ export const BatchEditMix = (props: BatchEditMixProps): JSX.Element => {
               propsForFields={propsForFields}
             />
             <CheckboxRowField
-              {...propsForFields['mix_touchTip_checkbox']}
+              {...propsForFields.mix_touchTip_checkbox}
               label={i18n.t('form.step_edit_form.field.touchTip.label')}
               className={styles.small_field}
             >
               <TipPositionField
-                {...propsForFields['mix_touchTip_mmFromBottom']}
+                {...propsForFields.mix_touchTip_mmFromBottom}
                 labwareId={getLabwareIdForPositioningField(
                   'mix_touchTip_mmFromBottom'
                 )}
               />
             </CheckboxRowField>
             <CheckboxRowField
-              {...propsForFields['blowout_checkbox']}
+              {...propsForFields.blowout_checkbox}
               label={i18n.t('form.step_edit_form.field.blowout.label')}
               className={styles.small_field}
             >
               <BlowoutLocationField
-                {...propsForFields['blowout_location']}
+                {...propsForFields.blowout_location}
                 className={styles.full_width}
                 options={getBlowoutLocationOptionsForForm({
                   stepType: 'mix',

protocol-designer/src/components/BatchEditForm/BatchEditMoveLiquid.tsx

@@ -97,7 +97,7 @@ const SourceDestBatchEditMoveLiquidFields = (props: {
 
       {prefix === 'aspirate' && (
         <CheckboxRowField
-          {...propsForFields['preWetTip']}
+          {...propsForFields.preWetTip}
           label={i18n.t('form.step_edit_form.field.preWetTip.label')}
           className={styles.small_field}
         />
@@ -132,15 +132,15 @@ const SourceDestBatchEditMoveLiquidFields = (props: {
 
       {prefix === 'dispense' && (
         <CheckboxRowField
-          {...propsForFields['blowout_checkbox']}
+          {...propsForFields.blowout_checkbox}
           label={i18n.t('form.step_edit_form.field.blowout.label')}
           className={styles.small_field}
         >
           <BlowoutLocationField
-            {...propsForFields['blowout_location']}
+            {...propsForFields.blowout_location}
             className={styles.full_width}
             options={getBlowoutLocationOptionsForForm({
-              path: propsForFields['path'].value as any,
+              path: propsForFields.path.value as any,
               stepType: 'moveLiquid',
             })}
           />

protocol-designer/src/components/DeckSetup/DeckSetup.tsx

@@ -368,7 +368,7 @@ export const DeckSetup = (props: DeckSetupProps): JSX.Element => {
   const showGen1MultichannelCollisionWarnings =
     !_disableCollisionWarnings && _hasGen1MultichannelPipette
 
-  const deckDef = React.useMemo(() => getDeckDefinitions()['ot2_standard'], [])
+  const deckDef = React.useMemo(() => getDeckDefinitions().ot2_standard, [])
   const wrapperRef: React.RefObject<HTMLDivElement> = useOnClickOutside({
     onClickOutside: props.handleClickOutside,
   })
@@ -405,7 +405,7 @@ export const DeckSetup = (props: DeckSetupProps): JSX.Element => {
 }
 
 export const NullDeckState = (): JSX.Element => {
-  const deckDef = React.useMemo(() => getDeckDefinitions()['ot2_standard'], [])
+  const deckDef = React.useMemo(() => getDeckDefinitions().ot2_standard, [])
 
   return (
     <div className={styles.deck_row}>

protocol-designer/src/components/DeckSetup/LabwareOverlays/LabwareHighlight.tsx

@@ -29,7 +29,7 @@ export const LabwareHighlight = (
   if (
     formData &&
     formData.stepType === 'thermocycler' &&
-    formData['thermocyclerFormType'] === THERMOCYCLER_PROFILE
+    formData.thermocyclerFormType === THERMOCYCLER_PROFILE
   ) {
     isTcProfile = true
   }

protocol-designer/src/components/FilePage.tsx

@@ -135,7 +135,7 @@ export class FilePage extends React.Component<Props, State> {
                       placeholder="Untitled"
                       name="protocolName"
                       onChange={handleChange}
-                      value={values['protocolName']}
+                      value={values.protocolName}
                     />
                   </FormGroup>
 

protocol-designer/src/components/StepEditForm/fields/DisposalVolumeField.tsx

@@ -65,15 +65,15 @@ const DisposalVolumeFieldComponent = (props: Props): JSX.Element => {
   const volumeField = (
     <div>
       <TextField
-        {...propsForFields['disposalVolume_volume']}
+        {...propsForFields.disposalVolume_volume}
         caption={volumeBoundsCaption}
         className={cx(styles.small_field, styles.orphan_field)}
         units={i18n.t('application.units.microliter')}
       />
     </div>
   )
 
-  const { value, updateValue } = propsForFields['disposalVolume_checkbox']
+  const { value, updateValue } = propsForFields.disposalVolume_checkbox
 
   return (
     <FormGroup label={i18n.t('form.step_edit_form.multiDispenseOptionsLabel')}>
@@ -96,7 +96,7 @@ const DisposalVolumeFieldComponent = (props: Props): JSX.Element => {
           <div className={styles.checkbox_row}>
             <div className={styles.sub_label_no_checkbox}>Blowout</div>
             <DropdownFormField
-              {...propsForFields['blowout_location']}
+              {...propsForFields.blowout_location}
               className={styles.large_field}
               options={props.disposalDestinationOptions}
             />

protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx

@@ -135,7 +135,7 @@ const mapSTP = (state: BaseState, ownProps: OP): SP => {
       .def
 
     // NOTE: only taking depth of first well in labware def, UI not currently equipped for multiple depths
-    const firstWell = labwareDef.wells['A1']
+    const firstWell = labwareDef.wells.A1
     if (firstWell) wellDepthMm = getWellsDepth(labwareDef, ['A1'])
   }
 

protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx

@@ -55,7 +55,7 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
           className={styles.magnet_form_group}
         >
           <RadioGroupField
-            {...propsForFields['magnetAction']}
+            {...propsForFields.magnetAction}
             options={[
               {
                 name: i18n.t(
@@ -66,7 +66,7 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
             ]}
           />
           <RadioGroupField
-            {...propsForFields['magnetAction']}
+            {...propsForFields.magnetAction}
             options={[
               {
                 name: i18n.t(
@@ -83,7 +83,7 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
             className={styles.magnet_form_group}
           >
             <TextField
-              {...propsForFields['engageHeight']}
+              {...propsForFields.engageHeight}
               caption={engageHeightCaption}
               className={styles.small_field}
             />