chore: Upgrade Looker estlint and prettier config (#683)

Knock on effects:
1. eslint needed to be upgraded
2. prettier needed to be upgraded
3. new rules required quite a lot of code changes :(

In addition removed prettier and eslint configs from access-token-server package.json as not needed there.

examples/access-token-server/package.json

@@ -21,79 +21,16 @@
     "google-auth-library": "^6.1.0"
   },
   "devDependencies": {
-    "@looker/eslint-config": "^0.9.14",
-    "@looker/prettier-config": "^0.9.1",
     "@types/crypto-js": "^3.1.47",
     "@types/express": "^4.17.8",
     "@types/jest": "^26.0.14",
     "@types/jsonwebtoken": "^8.5.0",
     "@types/node": "^14.11.2",
-    "eslint": "^7.10.0",
-    "eslint-plugin-header": "^3.1.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-mdx": "^1.8.2",
-    "eslint-plugin-prettier": "^3.1.4",
     "jest": "^26.4.2",
     "node-fetch": "^2.6.1",
     "nodemon": "^2.0.4",
     "test": "^0.6.0",
     "ts-jest": "^26.4.1",
     "ts-node": "^9.0.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "@looker/eslint-config/no-type-checking"
-    ],
-    "plugins": [
-      "header",
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": "error",
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/camelcase": "off",
-      "@typescript-eslint/interface-name-prefix": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "warn",
-        {
-          "args": "all",
-          "argsIgnorePattern": "^_"
-        }
-      ],
-      "sort-keys-fix/sort-keys-fix": "off",
-      "no-useless-constructor": "off",
-      "@typescript-eslint/no-empty-interface": "off",
-      "header/header": [
-        2,
-        "config/license-header.js"
-      ],
-      "import/default": "off",
-      "sort-keys": "off"
-    },
-    "settings": {
-      "import/resolver": {
-        "typescript": {
-          "directory": "./tsconfig.json"
-        }
-      }
-    },
-    "overrides": [
-      {
-        "files": [
-          "*.js"
-        ],
-        "rules": {
-          "@typescript-eslint/no-var-requires": "off"
-        }
-      }
-    ]
-  },
-  "prettier": "@looker/prettier-config",
-  "prettierConfig": {
-    "overrides": {
-      "rules": {
-        "trailingComma": "all"
-      }
-    }
   }
 }

package.json

@@ -72,8 +72,8 @@
     "@babel/preset-typescript": "^7.13.0",
     "@babel/runtime": "^7.14.0",
     "@babel/runtime-corejs3": "^7.14.0",
-    "@looker/eslint-config": "^0.10.4",
-    "@looker/prettier-config": "^0.10.4",
+    "@looker/eslint-config": "^1.1.5",
+    "@looker/prettier-config": "^1.1.5",
     "@testing-library/jest-dom": "^5.11.6",
     "@types/blueimp-md5": "^2.7.0",
     "@types/ini": "^1.3.30",
@@ -91,11 +91,12 @@
     "core-js": "^3.6.5",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^7.19.0",
+    "eslint": "^7.26.0",
     "eslint-import-resolver-typescript": "^2.0.0",
     "eslint-import-resolver-webpack": "^0.12.1",
     "eslint-plugin-header": "^3.0.0",
     "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jest-dom": "^3.9.0",
     "eslint-plugin-mdx": "^1.6.8",
     "eslint-plugin-prettier": "^3.1.3",
     "jest": "^26.6.3",
@@ -112,7 +113,7 @@
     "npm-run-all": "^4.1.5",
     "openapi3-ts": "^1.3.0",
     "pre-commit": "1.2.2",
-    "prettier": "^2.1.1",
+    "prettier": "^2.3.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "styled-components": "^5.2.1",

packages/api-explorer/src/components/DocMethodSummary/utils.tsx

@@ -27,7 +27,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { Icon, Status } from '@looker/components'
 import { Beaker } from '@looker/icons'
-import { VisibilityOff } from '@styled-icons/material'
+import { VisibilityOff } from '@styled-icons/material/VisibilityOff'
 
 /**
  * Return a Status react element based on an endpoint's status

packages/api-explorer/src/components/ExploreType/ExploreProperty.spec.tsx

@@ -27,8 +27,8 @@
 import React from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { IdeFileManifest } from '@looker/icons'
-import { Toc } from '@styled-icons/material'
-import { Tag } from '@styled-icons/material-rounded'
+import { Toc } from '@styled-icons/material/Toc'
+import { Tag } from '@styled-icons/material-rounded/Tag'
 import { api } from '../../test-data'
 import { renderWithSearchAndRouter } from '../../test-utils'
 import { ExploreProperty, ExplorePropertyDetail, typeIcon } from '.'

packages/api-explorer/src/components/ExploreType/ExploreProperty.tsx

@@ -34,7 +34,9 @@ import {
   Tooltip,
   Space,
 } from '@looker/components'
-import { Done, Lock, Remove } from '@styled-icons/material'
+import { Done } from '@styled-icons/material/Done'
+import { Lock } from '@styled-icons/material/Lock'
+import { Remove } from '@styled-icons/material/Remove'
 import { IProperty } from '@looker/sdk-codegen'
 import ReactMarkdown from 'react-markdown'
 import {

packages/api-explorer/src/components/ExploreType/exploreUtils.spec.tsx

@@ -26,8 +26,9 @@
 
 import React from 'react'
 import { FieldString, IdeFileManifest } from '@looker/icons'
-import { CalendarToday, Code } from '@styled-icons/material'
-import { Tag } from '@styled-icons/material-rounded'
+import { CalendarToday } from '@styled-icons/material/CalendarToday'
+import { Code } from '@styled-icons/material/Code'
+import { Tag } from '@styled-icons/material-rounded/Tag'
 import { api40 as api } from '../../test-data'
 import { expandable, pickType, pickTypeProps, typeIcon } from './exploreUtils'
 

packages/api-explorer/src/components/ExploreType/exploreUtils.tsx

@@ -27,14 +27,12 @@
 import React from 'react'
 import { IconType } from '@looker/components'
 import { FieldString, IdeFileManifest, IdeParameter } from '@looker/icons'
-import {
-  CalendarToday,
-  Check,
-  Code,
-  Link,
-  Toc,
-  VpnKey,
-} from '@styled-icons/material'
+import { CalendarToday } from '@styled-icons/material/CalendarToday'
+import { Check } from '@styled-icons/material/Check'
+import { Code } from '@styled-icons/material/Code'
+import { Link } from '@styled-icons/material/Link'
+import { Toc } from '@styled-icons/material/Toc'
+import { VpnKey } from '@styled-icons/material/VpnKey'
 import { Tag } from '@styled-icons/material-rounded'
 import { Email } from '@styled-icons/material-outlined'
 import { IType, TypeOfType, typeOfType } from '@looker/sdk-codegen'

packages/api-explorer/src/components/Header/Header.tsx

@@ -35,7 +35,8 @@ import {
   Header as SemanticHeader,
 } from '@looker/components'
 import { LookerLogo } from '@looker/icons'
-import { ChangeHistory, Menu } from '@styled-icons/material'
+import { ChangeHistory } from '@styled-icons/material/ChangeHistory'
+import { Menu } from '@styled-icons/material/Menu'
 
 import { SpecList } from '@looker/sdk-codegen'
 import { SpecState, SpecAction } from '../../reducers'

packages/api-explorer/src/components/SideNav/SearchCriteriaSelector.tsx

@@ -30,7 +30,7 @@ import {
   PopoverContent,
   FieldCheckbox,
 } from '@looker/components'
-import { FilterList } from '@styled-icons/material'
+import { FilterList } from '@styled-icons/material/FilterList'
 import { SearchCriterion } from '@looker/sdk-codegen'
 import React, { useContext, FC, BaseSyntheticEvent } from 'react'
 

packages/api-explorer/src/components/SideNav/SearchMessage.tsx

@@ -26,7 +26,7 @@
 import React, { FC } from 'react'
 import { ISearchResult } from '@looker/sdk-codegen'
 import { Heading, Icon, Flex } from '@looker/components'
-import { Error } from '@styled-icons/material'
+import { Error } from '@styled-icons/material/Error'
 
 interface SearchMessageProps {
   search?: ISearchResult

packages/api-explorer/src/components/SideNav/SideNav.spec.tsx

@@ -36,10 +36,10 @@ import { SideNav } from './SideNav'
 import { countMethods } from './searchUtils'
 
 describe('SideNav', () => {
-  const testApi = ({
+  const testApi = {
     tags: pick(api.tags, ['Auth', 'ApiAuth']),
     types: pick(api.types, ['WriteDashboard', 'WriteQuery']),
-  } as unknown) as ApiModel
+  } as unknown as ApiModel
   const allTagsPattern = /^(Auth|ApiAuth)$/
   const allTypesPattern = /^(WriteDashboard|WriteQuery)$/
 

packages/api-explorer/src/scenes/DiffScene/DiffScene.tsx

@@ -36,7 +36,7 @@ import {
   Select,
   SelectMulti,
 } from '@looker/components'
-import { SyncAlt } from '@styled-icons/material'
+import { SyncAlt } from '@styled-icons/material/SyncAlt'
 import { getDefaultSpecKey } from '../../reducers/spec/utils'
 import { diffPath } from '../../utils'
 import { ApixSection } from '../../components'

packages/api-explorer/src/scenes/DiffScene/DocDiff/DiffLegend.tsx

@@ -26,7 +26,9 @@
 import React, { FC } from 'react'
 import { DiffCount } from '@looker/sdk-codegen'
 import { Code, Flex, Icon, Space } from '@looker/components'
-import { Add, ChangeHistory, Remove } from '@styled-icons/material'
+import { Add } from '@styled-icons/material/Add'
+import { ChangeHistory } from '@styled-icons/material/ChangeHistory'
+import { Remove } from '@styled-icons/material/Remove'
 
 interface DiffLegendProps {
   count: DiffCount

packages/extension-sdk-react/src/components/ExtensionProvider/ExtensionProvider.tsx

@@ -55,12 +55,10 @@ export const ExtensionProvider: React.FC<ExtensionProviderProps> = ({
     {} as ExtensionContextData
   )
   const connectedCallback = (extensionHost: ExtensionHostApi) => {
-    const core31SDK: Looker31SDK = LookerExtensionSDK.create31Client(
-      extensionHost
-    )
-    const core40SDK: Looker40SDK = LookerExtensionSDK.create40Client(
-      extensionHost
-    )
+    const core31SDK: Looker31SDK =
+      LookerExtensionSDK.create31Client(extensionHost)
+    const core40SDK: Looker40SDK =
+      LookerExtensionSDK.create40Client(extensionHost)
     // Provide global access for use by redux if needed
     registerCore31SDK(core31SDK)
     registerCore40SDK(core40SDK)

packages/extension-sdk-react/src/components/ExtensionProviderBase/ExtensionProviderBase.tsx

@@ -35,9 +35,10 @@ import {
 /**
  * React context provider for extension API and SDK
  */
-export const ExtensionContextBase = React.createContext<BaseExtensionContextData>(
-  undefined as any // no one will ever see this undefined!
-)
+export const ExtensionContextBase =
+  React.createContext<BaseExtensionContextData>(
+    undefined as any // no one will ever see this undefined!
+  )
 
 /**
  * ExtensionProviderBase component. Provides access to the extension API but no SDK is

packages/extension-sdk-react/src/components/utils/setup_close_popovers.ts

@@ -32,9 +32,8 @@ export const setupClosePopoversListener = (extensionSDK?: ExtensionSDK) => {
       extensionSDK.closeHostPopovers()
     }
   }
-  const body: HTMLBodyElement | undefined | null = document.querySelector(
-    'body'
-  )
+  const body: HTMLBodyElement | undefined | null =
+    document.querySelector('body')
   if (body) {
     body.addEventListener('mousedown', onBodyMousedown)
   }

packages/extension-sdk/src/connect/extension_host_api.ts

@@ -54,11 +54,8 @@ export class ExtensionHostApiImpl implements ExtensionHostApi {
 
   constructor(configuration: ExtensionHostApiConfiguration) {
     this._configuration = configuration
-    const {
-      chattyHost,
-      setInitialRoute,
-      hostChangedRoute,
-    } = this._configuration
+    const { chattyHost, setInitialRoute, hostChangedRoute } =
+      this._configuration
     this.chattyHost = chattyHost
     this.setInitialRoute = setInitialRoute
     this.hostChangedRoute = hostChangedRoute

packages/extension-sdk/src/connect/fetch_proxy.spec.ts

@@ -32,11 +32,11 @@ describe('extension_host_api tests', () => {
   let extensionFetchProxySpy: Required<any>
 
   beforeEach(() => {
-    mockExtensionSdk = ({
+    mockExtensionSdk = {
       fetchProxy: () => {
         // noop
       },
-    } as unknown) as ExtensionHostApiImpl
+    } as unknown as ExtensionHostApiImpl
     extensionFetchProxySpy = jest.spyOn(mockExtensionSdk, 'fetchProxy')
   })
 

packages/hackathon/src/components/SideNav/SideNav.tsx

@@ -27,8 +27,11 @@ import React, { FC } from 'react'
 import styled from 'styled-components'
 import { Box, MenuList, MenuItem } from '@looker/components'
 import { Beaker } from '@looker/icons'
-import { Map, Settings } from '@styled-icons/material'
-import { Home, Group, FactCheck } from '@styled-icons/material-outlined'
+import { Map } from '@styled-icons/material/Map'
+import { Settings } from '@styled-icons/material/Settings'
+import { Home } from '@styled-icons/material-outlined/Home'
+import { Group } from '@styled-icons/material-outlined/Group'
+import { FactCheck } from '@styled-icons/material-outlined/FactCheck'
 import { NavLink } from 'react-router-dom'
 import { Routes } from '../../routes/AppRouter'
 

packages/hackathon/src/data/admin/actions.ts

@@ -75,9 +75,10 @@ export type AdminAction =
   | SaveUserAttributesRequestAction
   | SaveUserAttributesResponseAction
 
-export const loadUserAttributesRequest = (): LoadUserAttributesRequestAction => ({
-  type: Actions.LOAD_USER_ATTRIBUTES_REQUEST,
-})
+export const loadUserAttributesRequest =
+  (): LoadUserAttributesRequestAction => ({
+    type: Actions.LOAD_USER_ATTRIBUTES_REQUEST,
+  })
 
 export const loadUserAttributesResponse = (
   adminUserAttributes: AdminUserAttributes

packages/hackathon/src/data/sheets_client.ts

@@ -427,7 +427,9 @@ class SheetsClient {
       return await hackathons.find(hackathonId, '_id')
     } else {
       const data = this.getSheetData()
-      return await (await data).currentHackathon
+      return await (
+        await data
+      ).currentHackathon
     }
   }
 

packages/hackathon/src/models/Hackathons.ts

@@ -91,7 +91,7 @@ export class Hackathons extends WhollySheet<Hackathon, IHackathonProps> {
   }
 
   typeRow<Hackathon>(values?: any) {
-    return (new Hackathon(values) as unknown) as Hackathon
+    return new Hackathon(values) as unknown as Hackathon
   }
 
   getCurrentHackathon(): Hackathon | undefined {

packages/hackathon/src/models/Judgings.ts

@@ -133,7 +133,7 @@ export class Judging extends SheetRow<IJudging> {
       this.coolness,
       this.impact
     )
-    return (this as unknown) as IJudging
+    return this as unknown as IJudging
   }
 
   toObject(): IJudgingProps {
@@ -153,7 +153,7 @@ export class Judgings extends WhollySheet<Judging, IJudgingProps> {
   typeRow<Judging>(values?: any) {
     const j = new Judging(values)
     j.load(this.data)
-    return (j as unknown) as Judging
+    return j as unknown as Judging
   }
 
   filterBy(hackathon: Hackathon, hacker?: Hacker): Judging[] {

packages/hackathon/src/models/Projects.ts

@@ -284,7 +284,7 @@ export class Projects extends WhollySheet<Project, IProjectProps> {
   typeRow<Project>(values?: any) {
     const project = new Project(values)
     // this.getMembers(project)
-    return (project as unknown) as Project
+    return project as unknown as Project
   }
 
   /**

packages/hackathon/src/models/Registrations.ts

@@ -87,7 +87,7 @@ export class Registrations extends WhollySheet<
   }
 
   typeRow<Registration>(values?: any) {
-    return (new Registration(values) as unknown) as Registration
+    return new Registration(values) as unknown as Registration
   }
 
   hackRegs(hackathon: Hackathon) {