Add lint rule to check for raw fetch calls.

Author: warwickschroeder

src/Frontend/eslint-rules/no-raw-fetch.js

@@ -0,0 +1,46 @@
+/**
+ * @fileoverview ESLint rule to disallow raw fetch() calls.
+ * Use authFetch from useAuthenticatedFetch.ts instead.
+ */
+
+/** @type {import('eslint').Rule.RuleModule} */
+export default {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow raw fetch() calls. Use authFetch from useAuthenticatedFetch.ts instead.",
+    },
+    messages: {
+      noRawFetch: "Do not use raw fetch(). Use authFetch from '@/composables/useAuthenticatedFetch' instead.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const sourceCode = context.sourceCode || context.getSourceCode();
+
+    return {
+      CallExpression(node) {
+        // Check if it's a call to `fetch`
+        if (node.callee.type === "Identifier" && node.callee.name === "fetch") {
+          // Check if this file is the useAuthenticatedFetch composable itself
+          const filename = context.filename || context.getFilename();
+          if (filename.includes("useAuthenticatedFetch")) {
+            return; // Allow fetch in the wrapper file itself
+          }
+
+          // Check if `fetch` is a local variable/parameter (not the global)
+          const scope = sourceCode.getScope(node);
+          const variable = scope.references.find((ref) => ref.identifier === node.callee);
+          if (variable && variable.resolved && variable.resolved.defs.length > 0) {
+            return; // It's a local variable, not the global fetch
+          }
+
+          context.report({
+            node,
+            messageId: "noRawFetch",
+          });
+        }
+      },
+    };
+  },
+};

src/Frontend/eslint.config.mjs

@@ -4,6 +4,13 @@ import tseslint from "typescript-eslint";
 import pluginVue from "eslint-plugin-vue";
 import pluginPromise from "eslint-plugin-promise";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import noRawFetch from "./eslint-rules/no-raw-fetch.js";
+
+const localPlugin = {
+  rules: {
+    "no-raw-fetch": noRawFetch,
+  },
+};
 
 export default tseslint.config(
   {
@@ -12,6 +19,9 @@ export default tseslint.config(
   {
     files: ["**/*.{js,mjs,ts,vue}"],
     languageOptions: { globals: globals.browser, ecmaVersion: "latest", parserOptions: { parser: tseslint.parser } },
+    plugins: {
+      local: localPlugin,
+    },
     extends: [pluginJs.configs.recommended, ...tseslint.configs.recommended, ...pluginVue.configs["flat/essential"], pluginPromise.configs["flat/recommended"], eslintPluginPrettierRecommended],
     rules: {
       "no-duplicate-imports": "error",
@@ -24,6 +34,7 @@ export default tseslint.config(
       "prefer-const": "error",
       eqeqeq: ["error", "smart"],
       "no-throw-literal": "warn",
+      "local/no-raw-fetch": "error",
     },
   }
 );

src/Frontend/src/composables/autoRefresh.ts

@@ -1,7 +1,7 @@
 import { watch, ref, shallowReadonly, type WatchStopHandle } from "vue";
 import { useCounter, useDocumentVisibility, useTimeoutPoll } from "@vueuse/core";
 
-export default function useFetchWithAutoRefresh(name: string, fetch: () => Promise<void>, intervalMs: number) {
+export default function useFetchWithAutoRefresh(name: string, fetchFn: () => Promise<void>, intervalMs: number) {
   let watchStop: WatchStopHandle | null = null;
   const { count, inc, dec, reset } = useCounter(0);
   const interval = ref(intervalMs);
@@ -11,7 +11,7 @@ export default function useFetchWithAutoRefresh(name: string, fetch: () => Promi
       return;
     }
     isRefreshing.value = true;
-    await fetch();
+    await fetchFn();
     isRefreshing.value = false;
   };
   const { pause, resume } = useTimeoutPoll(

src/Frontend/src/stores/EnvironmentAndVersionsStore.ts

@@ -115,7 +115,8 @@ export const useEnvironmentAndVersionsStore = defineStore("EnvironmentAndVersion
 
 async function getData(url: string, authenticated = false) {
   try {
-    const response = await (authenticated ? authFetch(url) : fetch(url));
+    // eslint-disable-next-line local/no-raw-fetch
+    const response = await (authenticated ? authFetch(url) : fetch(url)); // this needs to be an unauthenticated call
     return (await response.json()) as unknown as Release[];
   } catch (e) {
     console.log(e);