From 944ddf6b8684d8c1509d93f01ea82dad14742078 Mon Sep 17 00:00:00 2001
From: Mantra <mantrakusumgar@outlook.com>
Date: Wed, 13 Nov 2024 22:21:18 +0000
Subject: [PATCH] add basic eslint rules back in and make types better

---
 app/static/eslint.config.js                   |  9 ++++--
 app/static/src/apiService.ts                  | 19 +++++++-----
 .../src/components/VerticalCollapse.vue       |  1 +
 app/static/src/components/WodinPlot.vue       |  9 +++---
 app/static/src/components/WodinSession.vue    |  1 +
 app/static/src/components/WodinTabs.vue       |  1 +
 .../components/graphConfig/GraphConfig.vue    |  1 +
 .../components/options/ParameterSetView.vue   |  7 +++--
 .../components/options/SensitivityOptions.vue |  1 +
 .../SensitivitySummaryDownload.vue            |  1 +
 app/static/src/directives/tooltip.ts          | 10 +++----
 app/static/src/excel/wodinExcelDownload.ts    |  1 +
 app/static/src/store/basic/basic.ts           |  4 +--
 app/static/src/store/fit/fit.ts               |  4 +--
 app/static/src/store/stochastic/stochastic.ts |  4 +--
 app/static/src/types/utilTypes.ts             |  3 +-
 app/static/src/utils.ts                       |  6 ++--
 .../translationPackage/directive/translate.ts | 30 +++++++++----------
 .../translationPackage/store/actions.ts       |  2 +-
 19 files changed, 66 insertions(+), 48 deletions(-)

diff --git a/app/static/eslint.config.js b/app/static/eslint.config.js
index 82b0022a..cf333985 100644
--- a/app/static/eslint.config.js
+++ b/app/static/eslint.config.js
@@ -23,16 +23,19 @@ export default [
   },
 
   {
-    files: ["**/*.ts", "**/*.vue"],
+    files: ["src/**/*.ts", "src/**/*.vue"],
     rules: {
-      "@typescript-eslint/no-explicit-any": "off"
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-unused-vars": "error",
+      "vue/no-setup-props-destructure": "error",
     }
   },
 
   {
     files: ["**/tests/**/*.ts"],
     rules: {
-      "vitest/expect-expect": "off"
+      "vitest/expect-expect": "off",
+      "@typescript-eslint/no-explicit-any": "off",
     }
   },
 
diff --git a/app/static/src/apiService.ts b/app/static/src/apiService.ts
index e84f679b..8ce8d394 100644
--- a/app/static/src/apiService.ts
+++ b/app/static/src/apiService.ts
@@ -10,16 +10,21 @@ export interface ResponseWithType<T> extends ResponseSuccess {
     data: T;
 }
 
-export function isAPIError(object: any): object is WodinError {
-    return typeof object.error === "string" && (object.details === undefined || typeof object.details === "string");
+function isObject<K extends string>(object: unknown): object is Record<K, unknown> {
+    return typeof object === "object" && !Array.isArray(object) && object !== null;
 }
 
-export function isAPIResponseFailure(object: any): object is ResponseFailure {
-    return (
+export function isAPIError(object: unknown): object is WodinError {
+    return isObject<keyof WodinError>(object) && typeof object.error === "string" && (object.detail === undefined || typeof object.detail === "string");
+}
+
+export function isAPIResponseFailure(object: unknown): object is ResponseFailure {
+    return !!(
         object &&
+        isObject<keyof ResponseFailure>(object) &&
         object.status === "failure" &&
         Array.isArray(object.errors) &&
-        object.errors.every((e: any) => isAPIError(e))
+        object.errors.every(e => isAPIError(e))
     );
 }
 
@@ -101,7 +106,7 @@ export class APIService<S extends string, E extends string> implements API<S, E>
     };
 
     withSuccess = (type: S, root = false) => {
-        this._onSuccess = (data: any) => {
+        this._onSuccess = (data: unknown) => {
             const finalData = this._freezeResponse ? freezer.deepFreeze(data) : data;
             try {
                 this._commit(type, finalData, { root });
@@ -175,7 +180,7 @@ export class APIService<S extends string, E extends string> implements API<S, E>
         return this._handleAxiosResponse(axios.get(fullUrl));
     }
 
-    async post<T>(url: string, body: any, contentType = "application/json"): Promise<void | ResponseWithType<T>> {
+    async post<T>(url: string, body: unknown, contentType = "application/json"): Promise<void | ResponseWithType<T>> {
         this._verifyHandlers(url);
         const headers = { "Content-Type": contentType };
         const fullUrl = this._fullUrl(url);
diff --git a/app/static/src/components/VerticalCollapse.vue b/app/static/src/components/VerticalCollapse.vue
index c67223f3..c4a2ca10 100644
--- a/app/static/src/components/VerticalCollapse.vue
+++ b/app/static/src/components/VerticalCollapse.vue
@@ -37,6 +37,7 @@ export default defineComponent({
         VueFeather
     },
     setup(props) {
+        // eslint-disable-next-line vue/no-setup-props-destructure
         const collapsed = ref(props.collapsedDefault);
 
         const toggleCollapse = () => {
diff --git a/app/static/src/components/WodinPlot.vue b/app/static/src/components/WodinPlot.vue
index 698681a9..7dcca4cc 100644
--- a/app/static/src/components/WodinPlot.vue
+++ b/app/static/src/components/WodinPlot.vue
@@ -21,7 +21,8 @@ import {
     AxisType,
     Layout,
     Config,
-    LayoutAxis
+    LayoutAxis,
+    PlotlyHTMLElement
 } from "plotly.js-basic-dist-min";
 import { WodinPlotData, fadePlotStyle, margin, config } from "../plot";
 import WodinPlotDataSummary from "./WodinPlotDataSummary.vue";
@@ -46,7 +47,7 @@ export default defineComponent({
         // Only used as an indicator that redraw is required when this changes - the data to display is calculated by
         // plotData function using these solutions
         redrawWatches: {
-            type: Array as PropType<any[]>,
+            type: Array as PropType<unknown[]>,
             required: true
         },
         recalculateOnRelayout: {
@@ -83,7 +84,7 @@ export default defineComponent({
 
         const startTime = 0;
 
-        const plot = ref<null | HTMLElement>(null); // Picks up the element with 'plot' ref in the template
+        const plot = ref<null | PlotlyHTMLElement>(null); // Picks up the element with 'plot' ref in the template
         const baseData = ref<WodinPlotData>([]);
         const nPoints = 1000; // TODO: appropriate value could be derived from width of element
 
@@ -101,7 +102,7 @@ export default defineComponent({
         const lastYAxisFromZoom: Ref<Partial<LayoutAxis> | null> = ref(null);
 
         const commitYAxisRange = () => {
-            const plotLayout = (plot.value as any).layout;
+            const plotLayout = plot.value!.layout;
             const yRange = plotLayout.yaxis?.range;
             if (plotLayout) {
                 if (props.fitPlot) {
diff --git a/app/static/src/components/WodinSession.vue b/app/static/src/components/WodinSession.vue
index 8b2a821b..6b71484a 100644
--- a/app/static/src/components/WodinSession.vue
+++ b/app/static/src/components/WodinSession.vue
@@ -34,6 +34,7 @@ export default defineComponent({
         const appInitialised = computed(() => !!store.state.config && !!store.state.sessions.sessionsMetadata);
 
         // These props won't change as provided by server
+        // eslint-disable-next-line vue/no-setup-props-destructure
         const { appName, baseUrl, loadSessionId, appsPath, enableI18n, defaultLanguage } = props;
 
         store.dispatch(AppStateAction.InitialiseApp, {
diff --git a/app/static/src/components/WodinTabs.vue b/app/static/src/components/WodinTabs.vue
index 4d981091..b555cf4f 100644
--- a/app/static/src/components/WodinTabs.vue
+++ b/app/static/src/components/WodinTabs.vue
@@ -33,6 +33,7 @@ export default defineComponent({
     },
     emits: ["tabSelected"],
     setup(props: Props, { emit }) {
+        // eslint-disable-next-line vue/no-setup-props-destructure
         const selectedTabName = ref(props.tabNames[0]);
 
         const tabSelected = (tabName: string) => {
diff --git a/app/static/src/components/graphConfig/GraphConfig.vue b/app/static/src/components/graphConfig/GraphConfig.vue
index f519e8f2..24d3b3d2 100644
--- a/app/static/src/components/graphConfig/GraphConfig.vue
+++ b/app/static/src/components/graphConfig/GraphConfig.vue
@@ -59,6 +59,7 @@ export default defineComponent({
     },
     setup(props, { emit }) {
         const store = useStore();
+        // eslint-disable-next-line vue/no-setup-props-destructure
         const { startDrag, endDrag, onDrop, removeVariable } = SelectVariables(store, emit, false, props.graphIndex);
         const selectedVariables = computed<string[]>(
             () => store.state.graphs.config[props.graphIndex].selectedVariables
diff --git a/app/static/src/components/options/ParameterSetView.vue b/app/static/src/components/options/ParameterSetView.vue
index 49d91ccd..96b18d9e 100644
--- a/app/static/src/components/options/ParameterSetView.vue
+++ b/app/static/src/components/options/ParameterSetView.vue
@@ -97,7 +97,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from "vue";
+import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, Ref, ref, watch } from "vue";
 import { useStore } from "vuex";
 import VueFeather from "vue-feather";
 import { ParameterSet } from "../../store/run/state";
@@ -172,6 +172,7 @@ export default defineComponent({
 
         const paramNameInput = ref(null);
         const editDisplayName = ref(false);
+        // eslint-disable-next-line vue/no-setup-props-destructure
         const newDisplayName = ref(props.parameterSet.displayName);
         const editDisplayNameOn = () => {
             editDisplayName.value = true;
@@ -189,9 +190,9 @@ export default defineComponent({
                 editDisplayName.value = false;
             }
         };
-        const saveButton = ref<HTMLButtonElement | null>(null);
+        const saveButton = ref<Ref<InstanceType<typeof VueFeather>> | null>(null);
         const cancelEditDisplayName = (event: FocusEvent) => {
-            if (event.relatedTarget && event.relatedTarget === (saveButton.value as any).$el) return;
+            if (event.relatedTarget && event.relatedTarget === saveButton.value!.$el) return;
             store.commit(`run/${RunMutation.TurnOffDisplayNameError}`, props.parameterSet.name);
             newDisplayName.value = props.parameterSet.displayName;
             editDisplayName.value = false;
diff --git a/app/static/src/components/options/SensitivityOptions.vue b/app/static/src/components/options/SensitivityOptions.vue
index 56e6c20d..961f2861 100644
--- a/app/static/src/components/options/SensitivityOptions.vue
+++ b/app/static/src/components/options/SensitivityOptions.vue
@@ -117,6 +117,7 @@ export default defineComponent({
         );
 
         const showOptions = computed(() => allSettings.value.length && !!allSettings.value[0].parameterToVary);
+        // eslint-disable-next-line vue/no-setup-props-destructure
         const compileModelMessage = userMessages.sensitivity.compileRequiredForOptions(props.multiSensitivity);
         const editOpen = ref(false);
         const editSettingsIdx = ref<number | null>(0);
diff --git a/app/static/src/components/sensitivity/SensitivitySummaryDownload.vue b/app/static/src/components/sensitivity/SensitivitySummaryDownload.vue
index 6ba93356..e7da3a18 100644
--- a/app/static/src/components/sensitivity/SensitivitySummaryDownload.vue
+++ b/app/static/src/components/sensitivity/SensitivitySummaryDownload.vue
@@ -46,6 +46,7 @@ export default defineComponent({
     },
     setup(props) {
         const store = useStore();
+        // eslint-disable-next-line vue/no-setup-props-destructure
         const { canDownloadSummary, downloading, downloadSummaryUserFileName, downloadSummary } = baseSensitivity(
             store,
             props.multiSensitivity
diff --git a/app/static/src/directives/tooltip.ts b/app/static/src/directives/tooltip.ts
index 1693920f..8bf60ab5 100644
--- a/app/static/src/directives/tooltip.ts
+++ b/app/static/src/directives/tooltip.ts
@@ -39,13 +39,14 @@ export default {
     beforeUpdate(el: HTMLElement, binding: DirectiveBinding<string | ToolTipSettings>): void {
         const { value } = binding;
 
-        let tooltip = Tooltip.getInstance(el);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let tooltip = Tooltip.getInstance(el) as any;
 
         if (typeof value !== "string" && tooltip) {
             const variant = value?.variant || "text";
             const oldCustomClass = variant === "text" ? "" : `tooltip-${variant}`;
 
-            const isVariantSame = (tooltip as any)._config.customClass === oldCustomClass;
+            const isVariantSame = tooltip._config.customClass === oldCustomClass;
             if (!isVariantSame) {
                 tooltip.dispose();
 
@@ -63,9 +64,8 @@ export default {
         const content = typeof value === "string" ? value : value?.content || "";
 
         if (tooltip) {
-            const configuredTooltip = tooltip as any;
-            configuredTooltip._config.title = content;
-            const { trigger } = configuredTooltip._config;
+            tooltip._config.title = content;
+            const { trigger } = tooltip._config;
             if (trigger === "manual") {
                 if (!content) {
                     tooltip.hide();
diff --git a/app/static/src/excel/wodinExcelDownload.ts b/app/static/src/excel/wodinExcelDownload.ts
index 9d861455..bbe2f554 100644
--- a/app/static/src/excel/wodinExcelDownload.ts
+++ b/app/static/src/excel/wodinExcelDownload.ts
@@ -9,6 +9,7 @@ export abstract class WodinExcelDownload {
 
     protected readonly _state: AppState;
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     protected readonly _rootGetters: any;
 
     protected readonly _commit: Commit;
diff --git a/app/static/src/store/basic/basic.ts b/app/static/src/store/basic/basic.ts
index e3f7bbcb..4d350da3 100644
--- a/app/static/src/store/basic/basic.ts
+++ b/app/static/src/store/basic/basic.ts
@@ -19,7 +19,7 @@ import { multiSensitivity } from "../multiSensitivity/multiSensitivity";
 
 const language = getStoreModule();
 
-const defaultState: () => any = () => {
+const defaultState = () => {
     return {
         sessionId: newUid(),
         sessionLabel: null,
@@ -38,7 +38,7 @@ const defaultState: () => any = () => {
 };
 
 export const storeOptions: StoreOptions<BasicState> = {
-    state: defaultState(),
+    state: defaultState() as BasicState,
     actions,
     mutations,
     getters,
diff --git a/app/static/src/store/fit/fit.ts b/app/static/src/store/fit/fit.ts
index e102babd..c4659e6a 100644
--- a/app/static/src/store/fit/fit.ts
+++ b/app/static/src/store/fit/fit.ts
@@ -21,7 +21,7 @@ import { multiSensitivity } from "../multiSensitivity/multiSensitivity";
 
 const language = getStoreModule();
 
-const defaultState: () => any = () => {
+const defaultState = () => {
     return {
         sessionId: newUid(),
         sessionLabel: null,
@@ -40,7 +40,7 @@ const defaultState: () => any = () => {
 };
 
 export const storeOptions: StoreOptions<FitState> = {
-    state: defaultState(),
+    state: defaultState() as FitState,
     actions,
     mutations,
     getters,
diff --git a/app/static/src/store/stochastic/stochastic.ts b/app/static/src/store/stochastic/stochastic.ts
index 12e0008f..07d76e12 100644
--- a/app/static/src/store/stochastic/stochastic.ts
+++ b/app/static/src/store/stochastic/stochastic.ts
@@ -19,7 +19,7 @@ import { multiSensitivity } from "../multiSensitivity/multiSensitivity";
 
 const language = getStoreModule();
 
-const defaultState: () => any = () => {
+const defaultState = () => {
     return {
         sessionId: newUid(),
         sessionLabel: null,
@@ -38,7 +38,7 @@ const defaultState: () => any = () => {
 };
 
 export const storeOptions: StoreOptions<StochasticState> = {
-    state: defaultState(),
+    state: defaultState() as StochasticState,
     actions,
     mutations,
     getters,
diff --git a/app/static/src/types/utilTypes.ts b/app/static/src/types/utilTypes.ts
index 3af72192..12fbc4cd 100644
--- a/app/static/src/types/utilTypes.ts
+++ b/app/static/src/types/utilTypes.ts
@@ -1,5 +1,6 @@
+import { AppState } from "@/store/appState/state";
 import { ActionContext } from "vuex";
 
 export type Dict<V> = { [k: string]: V };
 
-export type AppCtx = ActionContext<any, any>;
+export type AppCtx = ActionContext<AppState, AppState>;
diff --git a/app/static/src/utils.ts b/app/static/src/utils.ts
index 0aed8d7b..0302f3e5 100644
--- a/app/static/src/utils.ts
+++ b/app/static/src/utils.ts
@@ -25,9 +25,9 @@ export const freezer = {
             return Object.freeze(data.map((d) => freezer.deepFreeze(d)));
         }
         if (data != null && typeof data === "object") {
-            const anyData = data as any;
-            Object.keys(data).forEach((prop) => {
-                anyData[prop] = freezer.deepFreeze(anyData[prop]);
+            const typedData = data as Record<string, unknown>;
+            Object.keys(typedData).forEach((prop) => {
+                typedData[prop] = freezer.deepFreeze(typedData[prop]);
             });
             return Object.freeze(data);
         }
diff --git a/app/static/translationPackage/directive/translate.ts b/app/static/translationPackage/directive/translate.ts
index 81cfad47..e798db59 100644
--- a/app/static/translationPackage/directive/translate.ts
+++ b/app/static/translationPackage/directive/translate.ts
@@ -7,8 +7,10 @@ interface LanguageStore {
     language: LanguageState;
 }
 
+type LangWatchElement = HTMLElement & { __lang_unwatch__: Record<string, () => void> }
+
 const translate = <S extends LanguageStore>(store: Store<S>) => {
-    function _translateText(lng: string, el: HTMLElement, binding: DirectiveBinding) {
+    function _translateText(lng: string, el: LangWatchElement, binding: DirectiveBinding) {
         const attribute = binding.arg;
         let translatedText = i18next.t(binding.value, { lng });
         if (binding.modifiers.lowercase) {
@@ -21,12 +23,11 @@ const translate = <S extends LanguageStore>(store: Store<S>) => {
         }
     }
 
-    function _addWatcher(el: HTMLElement, binding: DirectiveBinding) {
-        const ele = el as any;
-        ele.__lang_unwatch__ = ele.__lang_unwatch__ || {};
+    function _addWatcher(el: LangWatchElement, binding: DirectiveBinding) {
+        el.__lang_unwatch__ = el.__lang_unwatch__ || {};
         if (binding.arg) {
             // this is an attribute binding
-            ele.__lang_unwatch__[binding.arg] = store.watch(
+            el.__lang_unwatch__[binding.arg] = store.watch(
                 (state) => state.language.currentLanguage,
                 (lng) => {
                     _translateText(lng, el, binding);
@@ -34,7 +35,7 @@ const translate = <S extends LanguageStore>(store: Store<S>) => {
             );
         } else {
             // this is a default, i.e. innerHTML, binding
-            ele.__lang_unwatch__["innerHTML"] = store.watch(
+            el.__lang_unwatch__["innerHTML"] = store.watch(
                 (state) => state.language.currentLanguage,
                 (lng) => {
                     _translateText(lng, el, binding);
@@ -43,19 +44,18 @@ const translate = <S extends LanguageStore>(store: Store<S>) => {
         }
     }
 
-    function _removeWatcher(el: HTMLElement, binding: DirectiveBinding) {
-        const ele = el as any;
+    function _removeWatcher(el: LangWatchElement, binding: DirectiveBinding) {
         if (binding.arg) {
             // this is an attribute binding
-            delete ele.__lang_unwatch__[binding.arg];
-            // ele.__lang_unwatch__[binding.arg]()
+            delete el.__lang_unwatch__[binding.arg];
+            // el.__lang_unwatch__[binding.arg]()
         } else {
             // this is a default, i.e. innerHTML, binding
-            delete ele.__lang_unwatch__["innerHTML"];
+            delete el.__lang_unwatch__["innerHTML"];
         }
     }
 
-    function _validateBinding(el: HTMLElement, binding: DirectiveBinding): boolean {
+    function _validateBinding(el: LangWatchElement, binding: DirectiveBinding): boolean {
         if (!binding.value) {
             console.warn("v-translate directive declared without a value", el);
             return false;
@@ -64,12 +64,12 @@ const translate = <S extends LanguageStore>(store: Store<S>) => {
     }
 
     return {
-        beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+        beforeMount(el: LangWatchElement, binding: DirectiveBinding) {
             if (!_validateBinding(el, binding)) return;
             _translateText(store.state.language.currentLanguage, el, binding);
             _addWatcher(el, binding);
         },
-        beforeUpdate(el: HTMLElement, binding: DirectiveBinding) {
+        beforeUpdate(el: LangWatchElement, binding: DirectiveBinding) {
             if (!_validateBinding(el, binding)) return;
 
             // first remove the existing watcher for this directive instance
@@ -80,7 +80,7 @@ const translate = <S extends LanguageStore>(store: Store<S>) => {
             _translateText(store.state.language.currentLanguage, el, binding);
             _addWatcher(el, binding);
         },
-        beforeUnmount(el: HTMLElement, binding: DirectiveBinding) {
+        beforeUnmount(el: LangWatchElement, binding: DirectiveBinding) {
             if (!_validateBinding(el, binding)) return;
             _removeWatcher(el, binding);
         }
diff --git a/app/static/translationPackage/store/actions.ts b/app/static/translationPackage/store/actions.ts
index 1853583e..4641b268 100644
--- a/app/static/translationPackage/store/actions.ts
+++ b/app/static/translationPackage/store/actions.ts
@@ -7,7 +7,7 @@ export enum LanguageAction {
     UpdateLanguage = "UpdateLanguage"
 }
 
-export const actions: ActionTree<LanguageState, any> = {
+export const actions: ActionTree<LanguageState, unknown> = {
     async [LanguageAction.UpdateLanguage](context, language) {
         const { commit } = context;
         await i18next.changeLanguage(language);