Fix for cannot be used as a JSX Component react error

Mocks updated to suddenly changed firebase interface change
Small fixes

Author: absorbb

configurator/frontend/main/package.json

@@ -77,6 +77,8 @@
     "ws": "^8.2.3",
     "tar": "^6.1.11",
     "nth-check": "^2.0.1",
-    "browserslist": "^4.17.3"
+    "browserslist": "^4.17.3",
+    "@types/react": "^17.0.47",
+    "@types/react-dom": "^17.0.17"
   }
 }

configurator/frontend/main/src/__mocks__/firebase/__mockUser.ts

@@ -7,5 +7,5 @@ export type MockFirebaseUser = Pick<User, keyof UserFields | "getIdTokenResult">
 
 export const mockUser: MockFirebaseUser = {
   ...mockUserFields,
-  getIdTokenResult: jest.fn(() => Promise.resolve(mockTokenInfo)),
+  getIdTokenResult: jest.fn((forceRefresh?) => Promise.resolve(mockTokenInfo)),
 }

configurator/frontend/main/src/__mocks__/firebase/_mockTokenInfo.ts

@@ -1,3 +1,5 @@
+import { IdTokenResult } from "firebase/auth"
+
 const now = Date.now()
 const plusHour = now + 3_600_000
 
@@ -29,4 +31,4 @@ export const mockTokenInfo = {
       sign_in_provider: "password",
     },
   },
-}
+} as unknown as IdTokenResult

configurator/frontend/main/src/__mocks__/firebase/app.ts

@@ -1,9 +1,10 @@
 // jest.requireActual('firebase');
+import { MockFirebaseUser, mockUser } from "./__mockUser"
+
 jest.unmock("firebase/auth")
 jest.unmock("firebase/app")
 import { FirebaseApp } from "firebase/app"
 import firebase from "firebase/auth"
-import { mockUser, MockFirebaseUser } from "./__mockUser"
 
 /**
  * need to mock:

configurator/frontend/main/src/lib/components/BilledButton/BilledButton.tsx

@@ -30,7 +30,9 @@ export const BilledButton: React.FC<Props> = ({
   const currentPlan = useServices().currentSubscription.currentPlan
   const isButtonBlocked = useMemo<boolean>(() => {
     if (currentPlan.id === "opensource") return false
-    return isBlocked ?? plansBlacklist?.includes(currentPlan.id) ?? !plansWhitelist?.includes(currentPlan.id) ?? false
+    const blackList = plansBlacklist ?? []
+    const whiteList = plansWhitelist ?? []
+    return isBlocked ?? blackList.includes(currentPlan.id) ?? !whiteList.includes(currentPlan.id) ?? false
   }, [isBlocked, currentPlan])
 
   const Wrapper = isButtonBlocked

configurator/frontend/main/src/lib/components/EntityIcon/EntityIcon.tsx

@@ -22,7 +22,7 @@ type ApiKeyIconProps = {
   entitySubType?: undefined
 }
 
-const EntityIconComponent: React.FC<EntityIconProps> = ({ entityType, entitySubType }) => {
+const EntityIconComponent = ({ entityType, entitySubType = undefined }: EntityIconProps) => {
   switch (entityType) {
     case "source":
       return allSourcesMap[entitySubType]?.pic || null

configurator/frontend/package.json

@@ -9,7 +9,7 @@
     "test": "lerna run test --stream",
     "clean": "rm -rf ./node_modules ./main/node_modules/ ./main/build ./main/dist",
     "reset": "yarn clean && yarn install",
-    "reset:full": "yarn reset && rm -rf yarn.lock ./main/yarn.lock ./catalog/yarn.lock",
+    "reset:full": "yarn clean && rm -rf yarn.lock ./main/yarn.lock ./catalog/yarn.lock",
     "lerna:publish": "lerna publish --canary --no-private --no-verify-access --yes",
     "prettier:check": "prettier --check --config ./.prettierrc.json --ignore-path ./.prettierignore ./ || (echo \"👉 Run yarn prettier:fix!\" && exit 1)",
     "prettier:fix": "prettier --write --config ./.prettierrc.json --ignore-path ./.prettierignore ./",
@@ -45,8 +45,8 @@
     "@types/lodash": "^4.14.168",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^17.0.47",
+    "@types/react-dom": "^17.0.17",
     "@types/react-router-dom": "^5.1.7",
     "autoprefixer": "^9",
     "babel-plugin-lodash": "^3.3.4",
@@ -65,11 +65,13 @@
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "terser-webpack-plugin": "^5.1.1",
     "ts-jest": "^27.0.3",
-    "typescript": "^4.4.3",
+    "typescript": "^4.7.4",
     "web-vitals": "^1.0.1",
     "webpack-bundle-analyzer": "^4.4.0"
   },
   "resolutions": {
-    "react-error-overlay": "6.0.9"
+    "react-error-overlay": "6.0.9",
+    "@types/react": "^17.0.47",
+    "@types/react-dom": "^17.0.17"
   }
 }