chore: fixing eslint duplicate imports

.eslintrc.js

@@ -24,29 +24,35 @@ const validators = specifiedRules
 )
 
 module.exports = {
-  'plugins': [
+  plugins: [
     '@cypress/dev',
     'graphql',
   ],
-  'extends': [
+  extends: [
     'plugin:@cypress/dev/general',
     'plugin:@cypress/dev/tests',
   ],
-  'rules': {
+  parser: '@typescript-eslint/parser',
+  rules: {
+    'no-duplicate-imports': 'off',
+    'import/no-duplicates': 'off',
+    '@typescript-eslint/no-duplicate-imports': [
+      'error',
+    ],
     'prefer-spread': 'off',
     'prefer-rest-params': 'off',
     'no-useless-constructor': 'off',
     'no-restricted-properties': [
       'error',
       {
-        'object': 'process',
-        'property': 'geteuid',
-        'message': 'process.geteuid() will throw on Windows. Do not use it unless you catch any potential errors.',
+        object: 'process',
+        property: 'geteuid',
+        message: 'process.geteuid() will throw on Windows. Do not use it unless you catch any potential errors.',
       },
       {
-        'object': 'os',
-        'property': 'userInfo',
-        'message': 'os.userInfo() will throw when there is not an `/etc/passwd` entry for the current user (like when running with --user 12345 in Docker). Do not use it unless you catch any potential errors.',
+        object: 'os',
+        property: 'userInfo',
+        message: 'os.userInfo() will throw when there is not an `/etc/passwd` entry for the current user (like when running with --user 12345 in Docker). Do not use it unless you catch any potential errors.',
       },
     ],
     'graphql/capitalized-type-name': ['warn', graphqlOpts],
@@ -57,9 +63,9 @@ module.exports = {
       { ...graphqlOpts, requiredFields: ['id'] },
     ],
   },
-  'settings': {
-    'react': {
-      'version': '16.8',
+  settings: {
+    react: {
+      version: '16.8',
     },
   },
 }

npm/design-system/src/components/searchInput/SearchInput.cy.tsx

@@ -2,9 +2,10 @@ import * as React from 'react'
 import { mount } from '@cypress/react'
 
 import { SearchInput } from './SearchInput'
-import { useCallback, useState } from 'react'
 import { mountAndSnapshot } from 'util/testing'
 
+const { useCallback, useState } = React
+
 describe('SearchInput', () => {
   const StatefulWrapper: React.FC<{onInput?: (input: string) => void}> = ({ onInput }) => {
     const [value, setValue] = useState('')

npm/design-system/src/components/searchInput/SearchInput.stories.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { createStory, createStorybookConfig } from 'stories/util'
 
 import { SearchInput as SearchInputComponent } from './SearchInput'
-import { useState } from 'react'
+const { useState } = React
 
 export default createStorybookConfig({
   title: 'Components/SearchInput',

npm/design-system/src/core/button/Button.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useRef, RefObject } from 'react'
+import type { RefObject } from 'react'
 import cs from 'classnames'
 
 import { useButton } from '@react-aria/button'
@@ -11,6 +11,8 @@ import styles from './Button.module.scss'
 import { FocusRing } from '@react-aria/focus'
 import { focusClass } from 'css/derived/util'
 
+const { useRef } = React
+
 interface SharedButtonProps extends TextSizableComponent {
   /**
    * Defaults to 'blue'

npm/design-system/src/core/icon/Icon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { SVGAttributes } from 'react'
+import type { SVGAttributes } from 'react'
 import cs from 'classnames'
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

npm/design-system/src/core/input/IconInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { RefAttributes } from 'react'
+import type { RefAttributes } from 'react'
 import cs from 'classnames'
 import { useFocusRing } from '@react-aria/focus'
 import { PressEvent } from '@react-types/shared'

npm/design-system/src/core/input/InputBase.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CSSProperties, InputHTMLAttributes, MutableRefObject, ReactNode, RefObject, TextareaHTMLAttributes, useMemo, useRef } from 'react'
+import type { CSSProperties, InputHTMLAttributes, MutableRefObject, ReactNode, RefObject, TextareaHTMLAttributes } from 'react'
 import { useTextField } from 'react-aria'
 import cs from 'classnames'
 
@@ -11,6 +11,8 @@ import { SizingProps } from 'core/shared'
 import styles from './InputBase.module.scss'
 import { useCombinedRefs } from 'hooks/useCombinedRefs'
 
+const { useMemo, useRef } = React
+
 export interface SharedInputBaseProps extends SizingProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   inputRef?: MutableRefObject<HTMLTextAreaElement | HTMLInputElement | null> | null
 

npm/design-system/src/core/surface/paddedBox/PaddedBox.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CSSProperties } from 'react'
+import type { CSSProperties } from 'react'
 import cs from 'classnames'
 
 import { Spacing } from 'css'

npm/design-system/src/core/text/styledText/StyledText.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CSSProperties } from 'react'
+import type { CSSProperties } from 'react'
 import cs from 'classnames'
 
 import { LineHeight, TextSize } from 'css'

npm/design-system/src/hooks/useCombinedRefs.ts

@@ -1,4 +1,5 @@
-import { MutableRefObject, RefCallback, useEffect } from 'react'
+import type { MutableRefObject, RefCallback } from 'react'
+import { useEffect } from 'react'
 
 /**
  * Joins the `externalRef` to receive the same boxed value as `localRef`

npm/eslint-plugin-dev/lib/index.js

@@ -261,6 +261,7 @@ module.exports = {
           files: [
             '*.ts',
             '*.tsx',
+            '*.vue',
           ],
           parser: '@typescript-eslint/parser',
           plugins: [
@@ -271,6 +272,11 @@ module.exports = {
             'no-unused-vars': 'off',
             'indent': 'off',
             'no-useless-constructor': 'off',
+            'no-duplicate-imports': 'off',
+            'import/no-duplicates': 'off',
+            '@typescript-eslint/no-duplicate-imports': [
+              'error',
+            ],
             '@typescript-eslint/no-unused-vars': [
               'error',
               {

npm/vue/cypress/component/setup/HelloWorld.vue

@@ -7,7 +7,7 @@
 import { defineProps, ref } from 'vue'
 
 defineProps<{
-	msg: String,
+  msg: String
 }>()
 
 const count = ref(0)

packages/app/src/components/FileMatch.vue

@@ -96,7 +96,7 @@ type Matches = {
 }
 
 const props = defineProps<{
-  extensionPattern: string,
+  extensionPattern: string
   pattern: string
   matches: Matches
 }>()

packages/app/src/navigation/SidebarNavigationRow.vue

@@ -41,12 +41,12 @@ import type { FunctionalComponent, SVGAttributes } from 'vue'
 import SidebarTooltip from './SidebarTooltip.vue'
 
 withDefaults(defineProps <{
-  icon: FunctionalComponent<SVGAttributes, {}>,
-  name: string,
+  icon: FunctionalComponent<SVGAttributes, {}>
+  name: string
   // Currently active row (generally the current route)
   active?: boolean
   isNavBarExpanded: boolean
-  }>(), {
+}>(), {
   active: false,
 })
 

packages/app/src/navigation/SidebarTooltip.vue

@@ -42,9 +42,9 @@
 import { ref, nextTick } from 'vue'
 
 const props = withDefaults(defineProps<{
-  disabled?:boolean,
-  popperTopOffset?:number,
-  popperClass?:string,
+  disabled?: boolean
+  popperTopOffset?: number
+  popperClass?: string
 }>(), {
   disabled: false,
   popperTopOffset: 0,

packages/app/src/pages/Settings.vue

@@ -6,26 +6,15 @@
 </template>
 
 <script lang="ts" setup>
-import { gql, useQuery, useMutation } from '@urql/vue'
+import { gql, useQuery } from '@urql/vue'
 import SettingsContainer from '../settings/SettingsContainer.vue'
-import { Settings_ReconfigureProjectDocument, SettingsDocument } from '../generated/graphql'
+import { SettingsDocument } from '../generated/graphql'
 
 gql`
 query Settings {
   ...SettingsContainer
 }`
 
-gql`
-mutation Settings_ReconfigureProject {
-  reconfigureProject
-}
-`
-
 const query = useQuery({ query: SettingsDocument })
 
-const openElectron = useMutation(Settings_ReconfigureProjectDocument)
-
-function reconfigure () {
-  openElectron.executeMutation({})
-}
 </script>

packages/app/src/runner/ResizablePanels.vue

@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<{
   minPanel2Width?: number
   minPanel3Width?: number
   maxTotalWidth?: number // windowWidth in runner
-  offsetLeft?: number,
+  offsetLeft?: number
 }>(), {
   showPanel1: true,
   showPanel2: true,
@@ -88,8 +88,8 @@ const props = withDefaults(defineProps<{
 })
 
 const emit = defineEmits<{
-  (e: 'resizeEnd', value: DraggablePanel): void,
-  (e: 'panelWidthUpdated', value: {panel: DraggablePanel, width: number}): void,
+  (e: 'resizeEnd', value: DraggablePanel): void
+  (e: 'panelWidthUpdated', value: {panel: DraggablePanel, width: number}): void
 }>()
 
 const panel1HandleX = ref(props.initialPanel1Width)
@@ -158,7 +158,7 @@ function handleResizeEnd (panel: DraggablePanel) {
   emit('resizeEnd', panel)
 }
 
-function isNewWidthAllowed (mouseClientX:number, panel: DraggablePanel) {
+function isNewWidthAllowed (mouseClientX: number, panel: DraggablePanel) {
   if (panel === 'panel1') {
     const newWidth = mouseClientX - props.offsetLeft
     const result = panel1IsDragging.value && newWidth >= props.minPanel1Width && newWidth <= maxPanel1Width.value

packages/app/src/runner/SnapshotToggle.vue

@@ -27,7 +27,7 @@ interface ToggleMessage {
   id: string
 }
 
-const props = defineProps<{
+defineProps<{
   messages: ToggleMessage[]
 }>()
 

packages/app/src/runner/SpecRunnerHeaderRunMode.vue

@@ -56,7 +56,6 @@
 import { computed } from 'vue'
 import { useAutStore } from '../store'
 import type { EventManager } from './event-manager'
-import { togglePlayground as _togglePlayground } from './utils'
 import SpecRunnerDropdown from './SpecRunnerDropdown.vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 

packages/app/src/runner/SpecRunnerRunMode.vue

@@ -85,13 +85,15 @@ import { useScreenshotStore } from '../store/screenshot-store'
 import ScriptError from './ScriptError.vue'
 import ResizablePanels from './ResizablePanels.vue'
 import HideDuringScreenshotOrRunMode from './screenshot/HideDuringScreenshotOrRunMode.vue'
-import AutomationDisconnected from './automation/AutomationDisconnected.vue'
-import AutomationMissing from './automation/AutomationMissing.vue'
 import AutomationElement from './automation/AutomationElement.vue'
 import { useResizablePanels, useRunnerStyle } from './useRunnerStyle'
 import { useEventManager } from './useEventManager'
 import SpecRunnerHeaderRunMode from './SpecRunnerHeaderRunMode.vue'
 
+// See TODO comments within the template block of this file.
+// import AutomationDisconnected from './automation/AutomationDisconnected.vue'
+// import AutomationMissing from './automation/AutomationMissing.vue'
+
 const eventManager = getEventManager()
 
 const autStore = useAutStore()

packages/app/src/runner/screenshot/ScreenshotHelperPixels.vue

@@ -10,13 +10,12 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from 'vue'
 import { getEventManager } from '..'
 import { useScreenshotStore } from '../../store/screenshot-store'
 
 const screenshotStore = useScreenshotStore()
 
-const eventManager = getEventManager()
+getEventManager()
 </script>
 
 <style scoped lang="scss">

packages/app/src/runs/RunCard.vue

@@ -87,7 +87,7 @@ fragment RunCard on CloudRun {
 `
 
 const props = defineProps<{
-	gql: RunCardFragment
+  gql: RunCardFragment
 }>()
 
 const ICON_MAP = {

packages/app/src/runs/RunResults.vue

@@ -38,7 +38,7 @@ fragment RunResults on CloudRun {
 `
 
 const props = defineProps<{
-	gql: RunResultsFragment
+  gql: RunResultsFragment
 }>()
 
 const results = [

packages/app/src/runs/RunsConnect.vue

@@ -67,7 +67,7 @@ const emit = defineEmits<{
 }>()
 
 const props = defineProps<{
-  gql: RunsConnectFragment,
+  gql: RunsConnectFragment
 }>()
 
 const isLoginOpen = ref(false)

packages/app/src/runs/RunsEmpty.vue

@@ -48,7 +48,7 @@ fragment RunsEmpty on CurrentProject {
 `
 
 const props = defineProps<{
-  gql: RunsEmptyFragment,
+  gql: RunsEmptyFragment
 }>()
 
 const projectName = computed(() => props.gql.title)

packages/app/src/runs/RunsError.vue

@@ -30,14 +30,14 @@ import type { FunctionalComponent, SVGAttributes } from 'vue'
 import Button from '@cy/components/Button.vue'
 
 defineProps<{
-  icon: 'access' | 'error',
-  message: string,
-  buttonText: string,
-  buttonIcon: FunctionalComponent<SVGAttributes, {}>,
-  buttonDisabled?: boolean,
+  icon: 'access' | 'error'
+  message: string
+  buttonText: string
+  buttonIcon: FunctionalComponent<SVGAttributes, {}>
+  buttonDisabled?: boolean
 }>()
 
 const emit = defineEmits<{
-  (event: 'button-click'): void,
+  (event: 'button-click'): void
 }>()
 </script>

packages/app/src/runs/modals/CreateCloudOrgModal.vue

@@ -97,7 +97,7 @@ query CheckCloudOrganizations {
 `
 
 const props = defineProps<{
-  gql: CreateCloudOrgModalFragment,
+  gql: CreateCloudOrgModalFragment
 }>()
 
 const query = useQuery({

packages/app/src/runs/modals/NeedManualUpdateModal.vue

@@ -69,7 +69,7 @@ import type { NeedManualUpdateModalFragment } from '../../generated/graphql'
 const { t } = useI18n()
 
 const emit = defineEmits<{
-  (event:'cancel'): void
+  (event: 'cancel'): void
 }>()
 
 gql`