revert more PD frontend UI files

protocol-designer/src/components/lists/TitledStepList.tsx

@@ -65,23 +65,28 @@ export function TitledStepList(props: Props): JSX.Element {
       onCollapseToggle(e)
     }
   }
+
   const hasValidChildren = React.Children.toArray(props.children).some(
     child => child
   )
+
   const className = cx(styles.pd_titled_list, props.className, {
     [styles.titled_list_selected]: props.selected,
     [styles.hover_border]: props.hovered,
   })
+
   // @ts-expect-error(sa, 2021-6-21): cast props.onClick to a boolean
   const titleBarClass = cx(styles.step_title_bar, {
     [styles.clickable]: props.onClick,
     [styles.multiselect_title_bar]: props.isMultiSelectMode,
   })
+
   const iconClass = cx(
     styles.title_bar_icon,
     styles.icon_left_of_title,
     iconProps && iconProps.className
   )
+
   const multiSelectIconName = props.selected
     ? 'ot-checkbox'
     : 'checkbox-blank-outline'

protocol-designer/src/components/steplist/DraggableStepItems.tsx

@@ -20,12 +20,15 @@ interface DragDropStepItemProps extends ConnectedStepItemProps {
   findStepIndex: (stepId: StepIdType) => number
   orderedStepIds: string[]
 }
+
 interface DropType {
   stepId: StepIdType
 }
+
 const DragDropStepItem = (props: DragDropStepItemProps): JSX.Element => {
   const { stepId, moveStep, findStepIndex, orderedStepIds } = props
   const ref = React.useRef<HTMLDivElement>(null)
+
   const [{ isDragging }, drag] = useDrag(
     () => ({
       type: DND_TYPES.STEP_ITEM,
@@ -36,6 +39,7 @@ const DragDropStepItem = (props: DragDropStepItemProps): JSX.Element => {
     }),
     [orderedStepIds]
   )
+
   const [{ handlerId }, drop] = useDrop(
     () => ({
       accept: DND_TYPES.STEP_ITEM,
@@ -55,6 +59,7 @@ const DragDropStepItem = (props: DragDropStepItemProps): JSX.Element => {
     }),
     [orderedStepIds]
   )
+
   drag(drop(ref))
   return (
     <div
@@ -66,6 +71,7 @@ const DragDropStepItem = (props: DragDropStepItemProps): JSX.Element => {
     </div>
   )
 }
+
 interface StepItemsProps {
   orderedStepIds: StepIdType[]
   reorderSteps: (steps: StepIdType[]) => void
@@ -78,8 +84,10 @@ export const DraggableStepItems = (
 
   const findStepIndex = (stepId: StepIdType): number =>
     orderedStepIds.findIndex(id => stepId === id)
+
   const moveStep = (stepId: StepIdType, targetIndex: number): void => {
     const currentIndex = findStepIndex(stepId)
+
     const currentRemoved = [
       ...orderedStepIds.slice(0, currentIndex),
       ...orderedStepIds.slice(currentIndex + 1, orderedStepIds.length),
@@ -116,7 +124,9 @@ export const DraggableStepItems = (
     </>
   )
 }
+
 const NAV_OFFSET = 64
+
 const StepDragPreview = (): JSX.Element | null => {
   const [{ isDragging, itemType, item, currentOffset }] = useDrag(() => ({
     type: DND_TYPES.STEP_ITEM,
@@ -127,9 +137,11 @@ const StepDragPreview = (): JSX.Element | null => {
       item: monitor.getItem() as { stepId: StepIdType },
     }),
   }))
+
   const savedStepForms = useSelector(stepFormSelectors.getSavedStepForms)
   const savedForm = item && savedStepForms[item.stepId]
   const { stepType, stepName } = savedForm || {}
+
   if (
     itemType !== DND_TYPES.STEP_ITEM ||
     !isDragging ||

protocol-designer/src/components/steplist/StepItem.tsx

@@ -71,14 +71,15 @@ export const StepItem = (props: StepItemProps): JSX.Element => {
   const {
     stepType,
     stepNumber,
+
     collapsed,
     error,
     warning,
     selected,
     isLastSelected,
     hovered,
-    unhighlightStep,
 
+    unhighlightStep,
     handleClick,
     onStepContextMenu,
     toggleStepCollapsed,

protocol-designer/src/components/steplist/StepList.tsx

@@ -15,8 +15,10 @@ import { MultiSelectToolbar } from './MultiSelectToolbar'
 import { PresavedStepItem } from './PresavedStepItem'
 import { StartingDeckStateTerminalItem } from './StartingDeckStateTerminalItem'
 import { TerminalItem } from './TerminalItem'
+
 import type { StepIdType } from '../../form-types'
 import type { ThunkDispatch } from '../../types'
+
 export interface StepListProps {
   isMultiSelectMode?: boolean | null
   orderedStepIds: StepIdType[]
@@ -32,6 +34,7 @@ export const StepList = (): JSX.Element => {
   const handleKeyDown: (e: KeyboardEvent) => void = e => {
     const key = e.key
     const altIsPressed = e.altKey
+
     if (altIsPressed) {
       let delta = 0
       if (key === 'ArrowUp') {
@@ -43,11 +46,14 @@ export const StepList = (): JSX.Element => {
       dispatch(stepsActions.reorderSelectedStep(delta))
     }
   }
+
   React.useEffect(() => {
     const onKeyDown = (e: KeyboardEvent): void => {
       handleKeyDown(e)
     }
+
     global.addEventListener('keydown', onKeyDown, false)
+
     return () => {
       global.removeEventListener('keydown', onKeyDown, false)
     }

protocol-designer/src/containers/ConnectedStepItem.tsx

@@ -31,6 +31,7 @@ import {
   getAdditionalEquipmentEntities,
   getInitialDeckSetup,
 } from '../step-forms/selectors'
+
 import type { ThunkDispatch } from 'redux-thunk'
 import type {
   HoverOnStepAction,
@@ -46,14 +47,18 @@ import type { DeleteModalType } from '../components/modals/ConfirmDeleteModal'
 import type { SubstepIdentifier } from '../steplist/types'
 import type { StepIdType } from '../form-types'
 import type { BaseState, ThunkAction } from '../types'
+
 export interface ConnectedStepItemProps {
   stepId: StepIdType
   stepNumber: number
   onStepContextMenu?: () => void
 }
+
 const nonePressed = (keysPressed: boolean[]): boolean =>
   keysPressed.every(keyPress => keyPress === false)
+
 const getUserOS = (): string | undefined => new UAParser().getOS().name
+
 const getMouseClickKeyInfo = (
   event: React.MouseEvent
 ): { isShiftKeyPressed: boolean; isMetaKeyPressed: boolean } => {
@@ -63,6 +68,7 @@ const getMouseClickKeyInfo = (
     (isMac && event.metaKey) || (!isMac && event.ctrlKey)
   return { isShiftKeyPressed, isMetaKeyPressed }
 }
+
 export const ConnectedStepItem = (
   props: ConnectedStepItemProps
 ): JSX.Element => {
@@ -80,6 +86,7 @@ export const ConnectedStepItem = (
   const hasFormLevelWarningsPerStep = useSelector(
     dismissSelectors.getHasFormLevelWarningsPerStep
   )
+
   const hasWarnings =
     hasTimelineWarningsPerStep[stepId] || hasFormLevelWarningsPerStep[stepId]
   const initialDeckSetup = useSelector(getInitialDeckSetup)
@@ -94,7 +101,9 @@ export const ConnectedStepItem = (
   const selected: boolean = multiSelectItemIds?.length
     ? multiSelectItemIds.includes(stepId)
     : selectedStepId === stepId
+
   const substeps = useSelector(fileDataSelectors.getSubsteps)[stepId]
+
   const ingredNames = useSelector(labwareIngredSelectors.getLiquidNamesById)
   const labwareNicknamesById = useSelector(
     uiLabwareSelectors.getLabwareNicknamesById
@@ -111,8 +120,10 @@ export const ConnectedStepItem = (
   const batchEditFormHasUnsavedChanges = useSelector(
     stepFormSelectors.getBatchEditFormHasUnsavedChanges
   )
+
   // Actions
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
+
   const highlightSubstep = (payload: SubstepIdentifier): HoverOnSubstepAction =>
     dispatch(stepsActions.hoverOnSubstep(payload))
   const selectStep = (): ThunkAction<any> =>
@@ -128,13 +139,16 @@ export const ConnectedStepItem = (
     dispatch(stepsActions.hoverOnStep(stepId))
   const unhighlightStep = (): HoverOnStepAction =>
     dispatch(stepsActions.hoverOnStep(null))
+
   const handleStepItemSelection = (event: React.MouseEvent): void => {
     const { isShiftKeyPressed, isMetaKeyPressed } = getMouseClickKeyInfo(event)
     let stepsToSelect: StepIdType[] = []
+
     // if user clicked on the last multi-selected step, shift/meta keys don't matter
     const toggledLastSelected = stepId === lastMultiSelectedStepId
     const noModifierKeys =
       nonePressed([isShiftKeyPressed, isMetaKeyPressed]) || toggledLastSelected
+
     if (noModifierKeys) {
       if (multiSelectItemIds) {
         const alreadySelected = multiSelectItemIds.includes(stepId)
@@ -173,6 +187,7 @@ export const ConnectedStepItem = (
       selectMultipleSteps(stepsToSelect, stepId)
     }
   }
+
   // step selection is gated when showConfirmation is true
   const { confirm, showConfirmation, cancel } = useConditionalConfirm(
     handleStepItemSelection,
@@ -187,6 +202,7 @@ export const ConnectedStepItem = (
     stepNumber,
     stepType: step.stepType,
     title: step.stepName,
+
     collapsed,
     error: hasError,
     warning: hasWarnings,
@@ -195,12 +211,14 @@ export const ConnectedStepItem = (
     // no double-highlighting: whole step is only "hovered" when
     // user is not hovering on substep.
     hovered: hoveredStep === stepId && !hoveredSubstep,
+
     highlightStep,
     handleClick: confirm,
     toggleStepCollapsed,
     unhighlightStep,
     isMultiSelectMode,
   }
+
   const stepItemContentsProps: StepItemContentsProps = {
     modules: initialDeckSetup.modules,
     rawForm: step,
@@ -212,6 +230,7 @@ export const ConnectedStepItem = (
     highlightSubstep,
     hoveredSubstep,
   }
+
   const getModalType = (): DeleteModalType => {
     if (isMultiSelectMode) {
       return CLOSE_BATCH_EDIT_FORM
@@ -259,6 +278,7 @@ export function getMetaSelectedSteps(
   }
   return stepsToSelect
 }
+
 function getShiftSelectedSteps(
   selectedStepId: StepIdType | null,
   orderedStepIds: StepIdType[],
@@ -279,9 +299,11 @@ function getShiftSelectedSteps(
       stepId,
       orderedStepIds
     )
+
     const allSelected: boolean = potentialStepsToSelect
       .slice(1)
       .every(stepId => multiSelectItemIds.includes(stepId))
+
     if (allSelected) {
       // if they're all selected, deselect them all
       if (multiSelectItemIds.length - potentialStepsToSelect.length > 0) {
@@ -300,13 +322,15 @@ function getShiftSelectedSteps(
   }
   return stepsToSelect
 }
+
 function getOrderedStepsInRange(
   lastSelectedStepId: StepIdType,
   stepId: StepIdType,
   orderedStepIds: StepIdType[]
 ): StepIdType[] {
   const prevIndex: number = orderedStepIds.indexOf(lastSelectedStepId)
   const currentIndex: number = orderedStepIds.indexOf(stepId)
+
   const [startIndex, endIndex] = [prevIndex, currentIndex].sort((a, b) => a - b)
   const orderedSteps = orderedStepIds.slice(startIndex, endIndex + 1)
   return orderedSteps