fix: lint errors removed by using `satisfies` or `as` for type (#3934)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>
Co-authored-by: amk-dev <akash.k.mohan98@gmail.com>

packages/hoppscotch-common/.eslintrc.js

@@ -10,6 +10,9 @@ module.exports = {
   parserOptions: {
     sourceType: "module",
     requireConfigFile: false,
+    ecmaFeatures: {
+      jsx: false,
+    },
   },
   extends: [
     "@vue/typescript/recommended",

packages/hoppscotch-common/package.json

@@ -127,8 +127,8 @@
     "@types/splitpanes": "2.2.6",
     "@types/uuid": "9.0.7",
     "@types/yargs-parser": "21.0.3",
-    "@typescript-eslint/eslint-plugin": "6.13.2",
-    "@typescript-eslint/parser": "6.13.2",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "@vitejs/plugin-vue": "4.5.1",
     "@vue/compiler-sfc": "3.3.10",
     "@vue/eslint-config-typescript": "12.0.0",
@@ -136,9 +136,9 @@
     "autoprefixer": "10.4.16",
     "cross-env": "7.0.3",
     "dotenv": "16.3.1",
-    "eslint": "8.55.0",
-    "eslint-plugin-prettier": "5.0.1",
-    "eslint-plugin-vue": "9.19.2",
+    "eslint": "8.57.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-vue": "9.24.0",
     "glob": "10.3.10",
     "npm-run-all": "4.1.5",
     "openapi-types": "12.1.3",
@@ -164,4 +164,4 @@
     "vitest": "0.34.6",
     "vue-tsc": "1.8.24"
   }
-}
+}

packages/hoppscotch-common/src/components/collections/Properties.vue

@@ -65,14 +65,20 @@
 
 <script setup lang="ts">
 import { useI18n } from "@composables/i18n"
-import { HoppCollection, HoppRESTAuth, HoppRESTHeaders } from "@hoppscotch/data"
-import { clone } from "lodash-es"
-import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
-import { PersistenceService } from "~/services/persistence"
+import {
+  GQLHeader,
+  HoppCollection,
+  HoppGQLAuth,
+  HoppRESTAuth,
+  HoppRESTHeaders,
+} from "@hoppscotch/data"
+import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
+import { clone } from "lodash-es"
 import { ref, watch } from "vue"
 
-import { useVModel } from "@vueuse/core"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { PersistenceService } from "~/services/persistence"
 
 const persistenceService = useService(PersistenceService)
 const t = useI18n()
@@ -84,6 +90,9 @@ export type EditingProperties = {
   inheritedProperties?: HoppInheritedProperty
 }
 
+type HoppCollectionAuth = HoppRESTAuth | HoppGQLAuth
+type HoppCollectionHeaders = HoppRESTHeaders | GQLHeader[]
+
 const props = withDefaults(
   defineProps<{
     show: boolean
@@ -109,8 +118,8 @@ const emit = defineEmits<{
 }>()
 
 const editableCollection = ref<{
-  headers: HoppRESTHeaders
-  auth: HoppRESTAuth
+  headers: HoppCollectionHeaders
+  auth: HoppCollectionAuth
 }>({
   headers: [],
   auth: {
@@ -122,15 +131,16 @@ const editableCollection = ref<{
 watch(
   editableCollection,
   (updatedEditableCollection) => {
-    if (props.show) {
+    if (props.show && props.editingProperties) {
+      const unsavedCollectionProperties: EditingProperties = {
+        collection: updatedEditableCollection,
+        isRootCollection: props.editingProperties?.isRootCollection ?? false,
+        path: props.editingProperties?.path,
+        inheritedProperties: props.editingProperties?.inheritedProperties,
+      }
       persistenceService.setLocalConfig(
         "unsaved_collection_properties",
-        JSON.stringify(<EditingProperties>{
-          collection: updatedEditableCollection,
-          isRootCollection: props.editingProperties?.isRootCollection,
-          path: props.editingProperties?.path,
-          inheritedProperties: props.editingProperties?.inheritedProperties,
-        })
+        JSON.stringify(unsavedCollectionProperties)
       )
     }
   },
@@ -146,10 +156,10 @@ watch(
   (show) => {
     if (show && props.editingProperties?.collection) {
       editableCollection.value.auth = clone(
-        props.editingProperties.collection.auth as HoppRESTAuth
+        props.editingProperties.collection.auth as HoppCollectionAuth
       )
       editableCollection.value.headers = clone(
-        props.editingProperties.collection.headers as HoppRESTHeaders
+        props.editingProperties.collection.headers as HoppCollectionHeaders
       )
     } else {
       editableCollection.value = {

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -180,7 +180,6 @@ import { GQLTabService } from "~/services/tab/graphql"
 import { computed } from "vue"
 import {
   HoppCollection,
-  HoppGQLAuth,
   HoppGQLRequest,
   makeGQLRequest,
 } from "@hoppscotch/data"
@@ -226,7 +225,7 @@ const editingRequest = ref<HoppGQLRequest | null>(null)
 const editingRequestIndex = ref<number | null>(null)
 
 const editingProperties = ref<{
-  collection: HoppCollection | null
+  collection: Partial<HoppCollection> | null
   isRootCollection: boolean
   path: string
   inheritedProperties?: HoppInheritedProperty
@@ -265,8 +264,9 @@ onMounted(() => {
     )
 
     if (unsavedCollectionPropertiesString) {
-      const unsavedCollectionProperties: EditingProperties<"GraphQL"> =
-        JSON.parse(unsavedCollectionPropertiesString)
+      const unsavedCollectionProperties: EditingProperties = JSON.parse(
+        unsavedCollectionPropertiesString
+      )
 
       const auth = unsavedCollectionProperties.collection?.auth
 
@@ -610,7 +610,7 @@ const editProperties = ({
   if (collectionIndex === null || collection === null) return
 
   const parentIndex = collectionIndex.split("/").slice(0, -1).join("/") // remove last folder to get parent folder
-  let inheritedProperties = {}
+  let inheritedProperties = undefined
 
   if (parentIndex) {
     const { auth, headers } = cascadeParentCollectionForHeaderAuth(
@@ -621,7 +621,7 @@ const editProperties = ({
     inheritedProperties = {
       auth,
       headers,
-    } as HoppInheritedProperty
+    }
   }
 
   editingProperties.value = {
@@ -635,11 +635,15 @@ const editProperties = ({
 }
 
 const setCollectionProperties = (newCollection: {
-  collection: HoppCollection
+  collection: Partial<HoppCollection> | null
   path: string
   isRootCollection: boolean
 }) => {
   const { collection, path, isRootCollection } = newCollection
+  if (!collection) {
+    return
+  }
+
   if (isRootCollection) {
     editGraphqlCollection(parseInt(path), collection)
   } else {

packages/hoppscotch-common/src/components/collections/index.vue

@@ -381,7 +381,7 @@ watch(
       const selectedTeamID = collectionsType.value.selectedTeam?.id
 
       selectedTeamID &&
-        debouncedSearch(newFilterText, selectedTeamID)?.catch((_) => {})
+        debouncedSearch(newFilterText, selectedTeamID)?.catch(() => {})
     }
   },
   {
@@ -414,14 +414,11 @@ onMounted(() => {
     )
 
     if (unsavedCollectionPropertiesString) {
-      const unsavedCollectionProperties: EditingProperties<"REST"> = JSON.parse(
+      const unsavedCollectionProperties: EditingProperties = JSON.parse(
         unsavedCollectionPropertiesString
       )
 
-      // casting because the type `EditingProperties["collection"]["auth"] and the usage in Properties.vue is different. there it's casted as an any.
-      // FUTURE-TODO: look into this
-      // @ts-expect-error because of the above reason
-      const auth = unsavedCollectionProperties.collection?.auth as HoppRESTAuth
+      const auth = unsavedCollectionProperties.collection?.auth
 
       if (auth?.authType === "oauth-2") {
         const grantTypeInfo = auth.grantTypeInfo

packages/hoppscotch-common/src/components/graphql/Authorization.vue

@@ -299,7 +299,7 @@ const selectOAuth2AuthType = () => {
     ? existingGrantTypeInfo
     : defaultGrantTypeInfo
 
-  auth.value = <HoppGQLAuth>{
+  auth.value = {
     ...auth.value,
     authType: "oauth-2",
     addTo: "HEADERS",

packages/hoppscotch-common/src/components/http/Authorization.vue

@@ -307,7 +307,7 @@ const selectOAuth2AuthType = () => {
     ? existingGrantTypeInfo
     : defaultGrantTypeInfo
 
-  auth.value = <HoppRESTAuth>{
+  auth.value = {
     ...auth.value,
     authType: "oauth-2",
     addTo: "HEADERS",

packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue

@@ -913,14 +913,16 @@ const generateOAuthToken = async () => {
   if (
     grantTypesInvolvingRedirect.includes(auth.value.grantTypeInfo.grantType)
   ) {
+    const authConfig: PersistedOAuthConfig = {
+      source: props.source,
+      context: props.isCollectionProperty
+        ? { type: "collection-properties", metadata: {} }
+        : { type: "request-tab", metadata: {} },
+      grant_type: auth.value.grantTypeInfo.grantType,
+    }
     persistenceService.setLocalConfig(
       "oauth_temp_config",
-      JSON.stringify(<PersistedOAuthConfig>{
-        source: props.source,
-        context: props.isCollectionProperty
-          ? { type: "collection-properties", metadata: {} }
-          : { type: "request-tab" },
-      })
+      JSON.stringify(authConfig)
     )
   }
 

packages/hoppscotch-common/src/pages/oauth.vue

@@ -93,12 +93,13 @@ onMounted(async () => {
   // Indicates the access token generation flow originated from the modal for setting authorization/headers at the collection level
   if (context?.type === "collection-properties") {
     // Set the access token in `localStorage` to retrieve from the modal while redirecting back
+    const authConfig: PersistedOAuthConfig = {
+      ...persistedOAuthConfig,
+      token: tokenInfo.right.access_token,
+    }
     persistenceService.setLocalConfig(
       "oauth_temp_config",
-      JSON.stringify(<PersistedOAuthConfig>{
-        ...persistedOAuthConfig,
-        token: tokenInfo.right.access_token,
-      })
+      JSON.stringify(authConfig)
     )
 
     toast.success(t("authorization.oauth.token_fetched_successfully"))

packages/hoppscotch-selfhost-web/.eslintrc.cjs

@@ -11,6 +11,9 @@ module.exports = {
   parserOptions: {
     sourceType: "module",
     requireConfigFile: false,
+    ecmaFeatures: {
+      jsx: false,
+    },
   },
   extends: [
     "@vue/typescript/recommended",