Merge pull request #8211 from overleaf/ii-settings-ts-storybook-fixes

[web] Fix TS issues in stories

GitOrigin-RevId: 093102351c2ca3d4bf05e6de2ce0dda55d421df1

services/web/frontend/stories/decorators/scope.tsx

@@ -10,7 +10,7 @@ import {
 } from '../fixtures/compile'
 import useFetchMock from '../hooks/use-fetch-mock'
 
-const scopeWatchers = []
+const scopeWatchers: [string, (value: any) => void][] = []
 
 const initialize = () => {
   const user: User = {
@@ -46,10 +46,10 @@ const initialize = () => {
   const scope = {
     user,
     project,
-    $watch: (key, callback) => {
+    $watch: (key: string, callback: () => void) => {
       scopeWatchers.push([key, callback])
     },
-    $applyAsync: callback => {
+    $applyAsync: (callback: () => void) => {
       window.setTimeout(() => {
         callback()
         for (const [key, watcher] of scopeWatchers) {
@@ -57,7 +57,7 @@ const initialize = () => {
         }
       }, 0)
     },
-    $on: (eventName, callback) => {
+    $on: (eventName: string, callback: () => void) => {
       //
     },
     $broadcast: () => {},
@@ -101,7 +101,7 @@ const initialize = () => {
     },
     editorManager: {
       getCurrentDocId: () => 'foo',
-      openDoc: (id, options) => {
+      openDoc: (id: string, options: unknown) => {
         console.log('open doc', id, options)
       },
     },
@@ -166,7 +166,7 @@ const initialize = () => {
   return ide
 }
 
-export const ScopeDecorator = Story => {
+export const ScopeDecorator = (Story: any) => {
   // mock compile on load
   useFetchMock(fetchMock => {
     mockCompile(fetchMock)

services/web/frontend/stories/hooks/use-scope.tsx

@@ -5,7 +5,7 @@ import { useLayoutEffect, useRef } from 'react'
  * Merge properties with the scope object, for use in Storybook stories
  */
 export const useScope = (scope: Record<string, unknown>) => {
-  const scopeRef = useRef<Record<string, unknown> | null>(null)
+  const scopeRef = useRef<typeof scope | null>(null)
   if (scopeRef.current === null) {
     scopeRef.current = scope
   }

services/web/frontend/stories/settings/add-email-input.stories.tsx

@@ -1,7 +1,7 @@
 import useFetchMock from './../hooks/use-fetch-mock'
 import Input from '../../js/features/settings/components/emails/add-email/input'
 
-export const EmailInput = args => {
+export const EmailInput = (args: any) => {
   useFetchMock(fetchMock =>
     fetchMock.get(/\/institutions\/domains/, [
       {

services/web/frontend/stories/settings/sso-alert.stories.tsx

@@ -1,7 +1,7 @@
 import EmailsSection from '../../js/features/settings/components/emails-section'
 import { SSOAlert } from '../../js/features/settings/components/emails/sso-alert'
 
-export const Info = args => {
+export const Info = (args: any) => {
   window.metaAttributesCache = new Map()
   window.metaAttributesCache.set('ol-institutionLinked', {
     universityName: 'Overleaf University',
@@ -9,7 +9,7 @@ export const Info = args => {
   return <SSOAlert />
 }
 
-export const InfoWithEntitlement = args => {
+export const InfoWithEntitlement = (args: any) => {
   window.metaAttributesCache = new Map()
   window.metaAttributesCache.set('ol-institutionLinked', {
     universityName: 'Overleaf University',
@@ -18,7 +18,7 @@ export const InfoWithEntitlement = args => {
   return <SSOAlert />
 }
 
-export const NonCanonicalEmail = args => {
+export const NonCanonicalEmail = (args: any) => {
   window.metaAttributesCache = new Map()
   window.metaAttributesCache.set('ol-institutionLinked', {
     universityName: 'Overleaf University',
@@ -30,7 +30,7 @@ export const NonCanonicalEmail = args => {
   return <SSOAlert />
 }
 
-export const Error = args => {
+export const Error = (args: any) => {
   window.metaAttributesCache = new Map()
   window.metaAttributesCache.set('ol-samlError', {
     translatedMessage: 'There was an Error',
@@ -38,7 +38,7 @@ export const Error = args => {
   return <SSOAlert />
 }
 
-export const ErrorTranslated = args => {
+export const ErrorTranslated = (args: any) => {
   window.metaAttributesCache = new Map()
   window.metaAttributesCache.set('ol-samlError', {
     translatedMessage: 'Translated Error Message',
@@ -47,7 +47,7 @@ export const ErrorTranslated = args => {
   return <SSOAlert />
 }
 
-export const ErrorWithTryAgain = args => {
+export const ErrorWithTryAgain = (args: any) => {
   window.metaAttributesCache = new Map()
   window.metaAttributesCache.set('ol-samlError', {
     message: 'There was an Error',