chore: enable noImplicitAny TypeScript rule (#94)

codegen.yml

@@ -68,7 +68,9 @@ generates:
 
   # App
   ./packages/web/app/src/graphql/index.ts:
-    documents: ./packages/web/app/src/graphql/*.graphql
+    documents:
+      - ./packages/web/app/src/graphql/*.graphql
+      - './packages/web/app/src/(components|lib)/**/*.ts(x)?'
     config:
       dedupeFragments: true
       scalars:

package.json

@@ -39,12 +39,12 @@
     "@graphql-codegen/add": "3.1.1",
     "@graphql-codegen/cli": "2.6.2",
     "@graphql-codegen/gql-tag-operations-preset": "1.4.0",
-    "@graphql-codegen/graphql-modules-preset": "2.3.11",
-    "@graphql-codegen/typed-document-node": "2.2.11",
-    "@graphql-codegen/typescript": "2.4.11",
-    "@graphql-codegen/typescript-graphql-request": "4.4.8",
-    "@graphql-codegen/typescript-operations": "2.4.0",
-    "@graphql-codegen/typescript-resolvers": "2.6.4",
+    "@graphql-codegen/graphql-modules-preset": "2.3.13",
+    "@graphql-codegen/typed-document-node": "2.2.13",
+    "@graphql-codegen/typescript": "2.5.1",
+    "@graphql-codegen/typescript-graphql-request": "4.4.10",
+    "@graphql-codegen/typescript-operations": "2.4.2",
+    "@graphql-codegen/typescript-resolvers": "2.6.6",
     "@swc/core": "1.2.185",
     "@theguild/prettier-config": "0.0.1",
     "@types/jest": "27.5.1",

packages/web/app/modules.d.ts

@@ -1 +1,10 @@
+/* eslint-disable import/no-unused-modules */
 declare module 'node-crisp-api';
+declare module 'tailwindcss/colors';
+
+declare module '@n1ru4l/react-time-ago' {
+  export function TimeAgo(props: {
+    date: Date;
+    children: (args: { value: string }) => React.ReactElement;
+  }): React.ReactElement;
+}

packages/web/app/pages/[orgId]/[projectId]/[targetId]/history.tsx

@@ -39,6 +39,11 @@ const titleMap: Record<CriticalityLevel, string> = {
   Dangerous: 'Dangerous Changes',
 };
 
+const criticalityLevelMapping = {
+  [CriticalityLevel.Safe]: 'text-emerald-400',
+  [CriticalityLevel.Dangerous]: 'text-yellow-400',
+} as Record<CriticalityLevel, string | undefined>;
+
 const ChangesBlock = ({
   changes,
   criticality,
@@ -57,15 +62,7 @@ const ChangesBlock = ({
       <h2 className="mb-2 text-lg font-medium text-gray-900 dark:text-white">{titleMap[criticality]}</h2>
       <ul className="list-inside list-disc pl-3 text-base leading-relaxed">
         {filteredChanges.map((change, key) => (
-          <li
-            key={key}
-            className={clsx(
-              {
-                [CriticalityLevel.Safe]: 'text-emerald-400',
-                [CriticalityLevel.Dangerous]: 'text-yellow-400',
-              }[criticality] || 'text-red-400'
-            )}
-          >
+          <li key={key} className={clsx(criticalityLevelMapping[criticality] ?? 'text-red-400')}>
             <span className="text-gray-600 dark:text-white">{labelize(change.message)}</span>
           </li>
         ))}

packages/web/app/pages/[orgId]/[projectId]/[targetId]/index.tsx

@@ -92,7 +92,7 @@ const SchemaServiceName = ({
         },
       });
     },
-    [mutate]
+    [mutate, organization.cleanId, project.cleanId, schema.service, target.cleanId, version]
   );
 
   if ((project.type !== ProjectType.Federation && project.type !== ProjectType.Stitching) || !hasAccess) {
@@ -199,7 +199,7 @@ const SyncSchemaButton = ({
         setStatus('idle');
       }, 5000);
     });
-  }, [mutate, setStatus]);
+  }, [mutate, organization.cleanId, project.cleanId, target.cleanId]);
 
   if (!target.hasSchema) {
     return null;
@@ -210,16 +210,18 @@ const SyncSchemaButton = ({
       <Button variant="primary" size="large" onClick={sync} disabled={status !== 'idle' || mutation.fetching}>
         {mutation.fetching
           ? 'Syncing…'
-          : {
-              idle: 'Update CDN',
-              error: 'Failed to synchronize',
-            }[status] || 'CDN is up to date'}
+          : FetchingMessages[status as keyof typeof FetchingMessages] ?? 'CDN is up to date'}
         <RefreshIcon className="ml-8 h-4 w-4" />
       </Button>
     </Tooltip>
   );
 };
 
+const FetchingMessages = {
+  idle: 'Update CDN',
+  error: 'Failed to synchronize',
+} as const;
+
 function SchemaView({
   organization,
   project,

packages/web/app/pages/[orgId]/members.tsx

@@ -1,4 +1,5 @@
 import { ReactElement, useCallback, useEffect, useState } from 'react';
+import { IconProps } from '@chakra-ui/react';
 import { useMutation, useQuery } from 'urql';
 
 import { useUser } from '@/components/auth/AuthProvider';
@@ -18,6 +19,11 @@ import { OrganizationAccessScope, useOrganizationAccess } from '@/lib/access/org
 import { useNotifications } from '@/lib/hooks/use-notifications';
 import { useRouteSelector } from '@/lib/hooks/use-route-selector';
 
+const authProviderIcons = {
+  [AuthProvider.Github]: GitHubIcon,
+  [AuthProvider.Google]: GoogleIcon,
+} as Record<AuthProvider, React.FC<IconProps> | undefined>;
+
 const Page = ({ organization }: { organization: OrganizationFieldsFragment }) => {
   useOrganizationAccess({
     scope: OrganizationAccessScope.Members,
@@ -119,11 +125,7 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
         </Button>
       </div>
       {members.map(node => {
-        const IconToUse =
-          {
-            [AuthProvider.Github]: GitHubIcon,
-            [AuthProvider.Google]: GoogleIcon,
-          }[node.user.provider] || KeyIcon;
+        const IconToUse = authProviderIcons[node.user.provider] ?? KeyIcon;
 
         const isOwner = node.id === org.owner.id;
         const isMe = node.id === me.id;

packages/web/app/pages/_app.tsx

@@ -32,7 +32,7 @@ if (process.env.NODE_ENV === 'development' && 'window' in globalThis) {
 
 function App({ Component, pageProps }: AppProps): ReactElement {
   useEffect(() => {
-    const handleRouteChange = url => {
+    const handleRouteChange = (url: string) => {
       gtag.pageview(url);
 
       const orgId = Router.query.orgId as string;

packages/web/app/pages/_document.tsx

@@ -1,9 +1,9 @@
 import 'regenerator-runtime/runtime';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 import { extractCritical } from '@emotion/server';
 
 export default class MyDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
     const page = await ctx.renderPage();
     const styles = extractCritical(page.html);

packages/web/app/pages/_error.tsx

@@ -3,7 +3,15 @@ import type { NextPageContext } from 'next';
 
 import * as Sentry from '@sentry/nextjs';
 
-const MyError = ({ statusCode, hasGetInitialPropsRun, err }) => {
+const MyError = ({
+  statusCode,
+  hasGetInitialPropsRun,
+  err,
+}: {
+  statusCode: number;
+  hasGetInitialPropsRun: boolean;
+  err: Error;
+}) => {
   if (!hasGetInitialPropsRun && err) {
     // getInitialProps is not called in case of
     // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass

packages/web/app/pages/api/proxy.ts

@@ -111,7 +111,7 @@ async function graphql(req: NextApiRequest, res: NextApiResponse) {
 
     if (isStream) {
       graphqlSpan.setHttpStatus(response.status);
-      const headers = {};
+      const headers: Record<string, string> = {};
 
       response.headers.forEach((value, key) => {
         headers[key] = value;

packages/web/app/pages/manage/index.tsx

@@ -40,7 +40,7 @@ export default function Manage() {
               <CheckboxGroup
                 colorScheme="teal"
                 size="sm"
-                defaultValue={Object.keys(filters).filter(key => !!filters[key])}
+                defaultValue={Object.keys(filters).filter((key: keyof typeof filters) => !!filters[key])}
                 onChange={onFiltersChange}
               >
                 <Checkbox tw="whitespace-nowrap align-middle" value="only-regular">

packages/web/app/src/components/auth/AuthProvider.tsx

@@ -20,7 +20,7 @@ declare global {
 }
 
 function identifyOnCrisp(user: UserProfile): void {
-  const crisp = globalThis.$crisp;
+  const crisp = globalThis.window.$crisp;
   if (crisp) {
     pushIfNotEmpty(crisp, 'user:email', user.email);
     pushIfNotEmpty(crisp, 'user:nickname', user.name || user.nickname);

packages/web/app/src/components/common/Navigation.tsx

@@ -63,7 +63,7 @@ const NavigationContext = React.createContext<{
 
 export const useNavigation = () => React.useContext(NavigationContext);
 
-export const NavigationProvider = ({ children }) => {
+export const NavigationProvider = ({ children }: { children: React.ReactNode }) => {
   const [state, setState] = React.useState<State>({});
   const [visible, setVisible] = React.useState<boolean>(true);
   const show = React.useCallback(() => setVisible(true), [setVisible]);

packages/web/app/src/components/common/Page.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import tw, { styled } from 'twin.macro';
 import Link from 'next/link';
 import { FiTarget } from 'react-icons/fi';
@@ -39,7 +39,7 @@ const MenuLink = styled.a(({ active }: { active?: boolean }) => [
 
 const Menu = {
   Root: tw.ul`flex flex-col px-2 py-4`,
-  Title: ({ children, icon }) => {
+  Title: ({ children, icon }: { children: string; icon: ReactElement }) => {
     return (
       <li tw="px-3 pb-2">
         <div tw="flex flex-row items-center h-8">

packages/web/app/src/components/common/activities/common.tsx

@@ -1,6 +1,23 @@
-import { OrganizationActivitiesQuery, ProjectActivitiesQuery, TargetActivitiesQuery } from '@/graphql';
+import { gql } from 'urql';
 
-export type ActivityNode =
-  | OrganizationActivitiesQuery['organizationActivities']['nodes'][0]
-  | ProjectActivitiesQuery['projectActivities']['nodes'][0]
-  | TargetActivitiesQuery['targetActivities']['nodes'][0];
+export const ActivityNode = gql(/* GraphQL */ `
+  fragment ActivityNode on Activity {
+    id
+    type
+    createdAt
+    ...OrganizationPlanChange
+    ...OrganizationCreated
+    ...OrganizationNameUpdated
+    ...OrganizationIdUpdated
+    ...MemberAdded
+    ...MemberDeleted
+    ...ProjectCreated
+    ...ProjectDeleted
+    ...ProjectNameUpdated
+    ...ProjectIdUpdated
+    ...TargetCreated
+    ...TargetDeleted
+    ...TargetNameUpdated
+    ...TargetIdUpdated
+  }
+`);

packages/web/app/src/components/organization/Switcher.tsx

@@ -42,7 +42,10 @@ export const OrganizationSwitcher: React.FC<{
       };
     }
 
-    const menu = {
+    const menu: {
+      personal: Array<{ key: string; label: string }>;
+      organizations: Array<{ key: string; label: string }>;
+    } = {
       personal: [],
       organizations: [],
     };

packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx

@@ -121,6 +121,11 @@ const Plan = (plan: {
   );
 };
 
+const billingPlanLookUpMap = {
+  [BillingPlanType.Hobby]: 'Free',
+  [BillingPlanType.Enterprise]: 'Contact Us',
+} as Record<BillingPlanType, string | undefined>;
+
 export const BillingPlanPicker = ({
   value,
   activePlan,
@@ -139,12 +144,7 @@ export const BillingPlanPicker = ({
           <Plan
             key={plan.id}
             name={plan.name}
-            price={
-              {
-                [BillingPlanType.Hobby]: 'Free',
-                [BillingPlanType.Enterprise]: 'Contact Us',
-              }[plan.planType] || plan.basePrice
-            }
+            price={billingPlanLookUpMap[plan.planType] ?? plan.basePrice}
             isActive={activePlan === plan.planType}
             features={planCollection[plan.planType].features}
             description={planCollection[plan.planType].description}

packages/web/app/src/components/target/operations/Stats.tsx

@@ -40,7 +40,7 @@ function fullSeries(
     from: string;
     to: string;
   }
-) {
+): Array<[string, number]> {
   if (!data.length) {
     return createEmptySeries({ interval, period });
   }
@@ -72,7 +72,7 @@ function fullSeries(
   }
 
   // Instead of creating a new array, we could move things around but this is easier
-  const newData = [];
+  const newData: Array<[string, number]> = [];
 
   for (let i = 0; i < data.length; i++) {
     const current = data[i];
@@ -100,6 +100,14 @@ function fullSeries(
   return newData;
 }
 
+function times<T>(amount: number, f: (index: number) => T) {
+  const items: Array<T> = [];
+  for (const i = 0; i < amount; amount++) {
+    items[i] = f(i);
+  }
+  return items;
+}
+
 function createEmptySeries({
   interval,
   period,
@@ -114,9 +122,7 @@ function createEmptySeries({
   const endAt = new Date(period.to).getTime();
 
   const steps = Math.floor((endAt - startAt) / interval);
-  return Array(steps)
-    .fill(0)
-    .map((_, i) => [new Date(startAt + i * interval).toISOString(), 0]);
+  return times(steps, i => [new Date(startAt + i * interval).toISOString(), 0]);
 }
 
 function useChartStyles() {