Update nx and next versions

apps/api-portal/components/access-token/access-token-create/access-token-create.tsx

@@ -24,15 +24,19 @@ export function AccessTokenCreate(props: AccessTokenCreateProps) {
     await mutate({
       ...token,
     })
-    nameRef.current.focus()
+    if (nameRef.current) {
+      nameRef.current.focus()
+    }
   }, [mutate, token])
 
   const validationMessage = useMemo(
     () => error && Object.values(error).map((e, index) => <p key={`msg-${index}`}>{e}</p>),
     [error]
   )
   useEffect(() => {
-    nameRef.current.focus()
+    if (nameRef.current) {
+      nameRef.current.focus()
+    }
   }, [])
   return (
     <div className={styles.container}>
@@ -50,7 +54,7 @@ export function AccessTokenCreate(props: AccessTokenCreateProps) {
                 value={token?.name}
                 className={styles.input}
                 onChange={(e) => setToken({ ...token, name: e.target.value })}
-                ref={nameRef}
+                ref={nameRef as any}
               />
             </div>
             <div className={cx([styles.field, styles.fieldsColumn])}>
@@ -68,7 +72,7 @@ export function AccessTokenCreate(props: AccessTokenCreateProps) {
                 disabled={!valid}
                 onClick={create}
                 loading={isSaving}
-                tooltip={valid ? 'Create New Token' : validationMessage}
+                tooltip={valid ? 'Create New Token' : (validationMessage as string)}
               >
                 Create New Token
               </Button>

apps/api-portal/components/header/header.tsx

@@ -7,43 +7,47 @@ import styles from './header.module.css'
 
 interface HeaderProps {
   title: string
-  user?: UserData
+  user?: UserData | null
   logout?: () => void
 }
 export function Header({ title = '', user, logout }: HeaderProps) {
   const userInitials = [
     (user?.firstName && user?.firstName?.slice(0, 1)) || '',
     (user?.lastName && user?.lastName?.slice(0, 1)) || '',
   ].join('')
-  const userMenuItem: MenuItem = user && {
-    className: styles.userMenuItem,
-    label: (
-      <Fragment>
-        <IconButton type="solid" className={styles.userInitials}>
-          {userInitials.toLocaleUpperCase()}
-        </IconButton>
-      </Fragment>
-    ),
-    childs: [
-      {
-        label: (
-          <Fragment>
-            <p className={styles.userFullname}>{`${user.firstName} ${user.lastName || ''}`}</p>
-            <p className={styles.secondary}>{user.email}</p>
-          </Fragment>
-        ),
-      },
-      {
-        className: styles.logoutLink,
-        onClick: logout,
-        label: 'Logout',
-      },
-    ],
-  }
+  const userMenuItem =
+    user &&
+    ({
+      className: styles.userMenuItem,
+      label: (
+        <Fragment>
+          <IconButton type="solid" className={styles.userInitials}>
+            {userInitials.toLocaleUpperCase()}
+          </IconButton>
+        </Fragment>
+      ),
+      childs: [
+        {
+          label: (
+            <Fragment>
+              <p className={styles.userFullname}>{`${user.firstName} ${user.lastName || ''}`}</p>
+              <p className={styles.secondary}>{user.email}</p>
+            </Fragment>
+          ),
+        },
+        {
+          className: styles.logoutLink,
+          onClick: logout,
+          label: 'Logout',
+        },
+      ],
+    } as MenuItem)
   return (
     <Fragment>
       <div className={styles.Header}>
-        <UIHeader>{user && <HeaderMenuItem index={100} item={userMenuItem} />}</UIHeader>
+        {userMenuItem && (
+          <UIHeader>{user && <HeaderMenuItem index={100} item={userMenuItem} />}</UIHeader>
+        )}
         <div className={styles.titleCover}>
           <h1 className={styles.title}>{title}</h1>
         </div>

apps/api-portal/components/user-additional-fields/user-additional-fields.tsx

@@ -25,23 +25,24 @@ export function UserAdditionalFields(props: UserAdditionalFieldsProps) {
   const { mutate, isLoading: isUpdating, isSuccess, isError } = useUpdateUserAdditionalInformation()
 
   const defaultUserAdditionalInformation: UserApiAdditionalInformation = {
-    apiTerms: user.apiTerms,
-    intendedUse: user.intendedUse,
-    problemToResolve: user.problemToResolve,
-    pullingDataOtherAPIS: user.pullingDataOtherAPIS,
-    whoEndUsers: user.whoEndUsers,
+    apiTerms: user!?.apiTerms,
+    intendedUse: user!?.intendedUse,
+    problemToResolve: user!?.problemToResolve,
+    pullingDataOtherAPIS: user!?.pullingDataOtherAPIS,
+    whoEndUsers: user!?.whoEndUsers,
   }
 
   const [userAdditionalInformation, setUserAdditionalInformation] =
-    useState<UserApiAdditionalInformation>(defaultUserAdditionalInformation)
+    useState<UserApiAdditionalInformation | null>(defaultUserAdditionalInformation)
 
   const [termsOfUseOpened, setTermsOfUseOpened] = useState(false)
   const onTermsOfUseClick: MouseEventHandler = useCallback((event) => {
     setTermsOfUseOpened(true)
   }, [])
   const error = useMemo(() => {
     const errors: FieldValidationError<UserApiAdditionalInformation> = {}
-    const { apiTerms, intendedUse, problemToResolve, whoEndUsers } = userAdditionalInformation
+    const { apiTerms, intendedUse, problemToResolve, whoEndUsers } =
+      userAdditionalInformation || ({} as UserApiAdditionalInformation)
 
     if (!intendedUse || !USER_APPLICATION_INTENDED_USES.includes(intendedUse as any)) {
       errors.intendedUse = 'Intended Use is required'
@@ -79,8 +80,8 @@ export function UserAdditionalFields(props: UserAdditionalFieldsProps) {
   )
 
   const selectedIntendedUse = useMemo(
-    () => INTENDED_USE_OPTIONS.find(({ id }) => userAdditionalInformation.intendedUse === id),
-    [INTENDED_USE_OPTIONS, userAdditionalInformation.intendedUse]
+    () => INTENDED_USE_OPTIONS.find(({ id }) => userAdditionalInformation?.intendedUse === id),
+    [INTENDED_USE_OPTIONS, userAdditionalInformation?.intendedUse]
   )
 
   const onSelectIntendedUse = useCallback(
@@ -91,7 +92,7 @@ export function UserAdditionalFields(props: UserAdditionalFieldsProps) {
   )
   const onRemoveIntendedUse = useCallback(
     (option: SelectOption) => {
-      setUserAdditionalInformation({ ...userAdditionalInformation, intendedUse: null })
+      setUserAdditionalInformation({ ...userAdditionalInformation, intendedUse: undefined })
     },
     [setUserAdditionalInformation, userAdditionalInformation]
   )
@@ -109,7 +110,7 @@ export function UserAdditionalFields(props: UserAdditionalFieldsProps) {
       } else {
         setUserAdditionalInformation({
           ...userAdditionalInformation,
-          apiTerms: termsAccepted ? null : new Date().toISOString(),
+          apiTerms: termsAccepted ? undefined : new Date().toISOString(),
         })
       }
     },
@@ -139,7 +140,7 @@ export function UserAdditionalFields(props: UserAdditionalFieldsProps) {
           label="Who are your end users? (*)"
           type={'text'}
           maxLength={500}
-          value={userAdditionalInformation.whoEndUsers ?? ''}
+          value={userAdditionalInformation?.whoEndUsers ?? ''}
           className={styles.input}
           onChange={(e) =>
             setUserAdditionalInformation({
@@ -155,7 +156,7 @@ export function UserAdditionalFields(props: UserAdditionalFieldsProps) {
           label="What problem are you trying to solve? (*)"
           type={'text'}
           maxLength={500}
-          value={userAdditionalInformation.problemToResolve ?? ''}
+          value={userAdditionalInformation?.problemToResolve ?? ''}
           className={styles.input}
           onChange={(e) =>
             setUserAdditionalInformation({
@@ -171,7 +172,7 @@ export function UserAdditionalFields(props: UserAdditionalFieldsProps) {
           label="Are you pulling data from APIs from other organizations?"
           type={'text'}
           maxLength={500}
-          value={userAdditionalInformation.pullingDataOtherAPIS ?? ''}
+          value={userAdditionalInformation?.pullingDataOtherAPIS ?? ''}
           className={styles.input}
           onChange={(e) =>
             setUserAdditionalInformation({
@@ -205,7 +206,11 @@ export function UserAdditionalFields(props: UserAdditionalFieldsProps) {
       </div>
       <div className={styles.field}>
         <Button
-          onClick={() => mutate(userAdditionalInformation)}
+          onClick={() => {
+            if (userAdditionalInformation) {
+              mutate(userAdditionalInformation)
+            }
+          }}
           loading={isUpdating}
           className={styles.button}
           disabled={!valid}

apps/api-portal/features/user-applications/user-applications.ts

@@ -65,7 +65,7 @@ export const useCreateUserApplication = () => {
   const { data: user } = useUser()
   const userId = user?.id ?? null
 
-  const isAllowed = checkUserApplicationPermission('create', user.permissions)
+  const isAllowed = checkUserApplicationPermission('create', user!?.permissions)
 
   const [token, setToken] = useState<UserApplicationCreateArguments>(emptyToken)
 

apps/api-portal/jest.config.ts

@@ -2,8 +2,8 @@
 export default {
   displayName: 'api-portal',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/apps/api-portal',

apps/api-portal/lib/dates.ts

@@ -20,7 +20,7 @@ export const formatI18nDate = (
     typeof date === 'number'
       ? DateTime.fromMillis(date, { zone: 'utc' })
       : DateTime.fromISO(date, { zone: 'utc' })
-  ).setLocale(locale)
+  ).setLocale(locale as any)
   const formattedDate = tokensFormat
     ? dateTimeDate.toFormat(tokensFormat)
     : dateTimeDate.toLocaleString(format)

apps/api-portal/next.config.js

@@ -1,14 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { join } = require('path')
-const withNx = require('@nrwl/next/plugins/with-nx')
+const withNx = require('@nx/next/plugins/with-nx')
 // const CircularDependencyPlugin = require('circular-dependency-plugin')
 
 // const { i18n } = require('./next-i18next.config')
 const basePath =
   process.env.NEXT_PUBLIC_URL || (process.env.NODE_ENV === 'production' ? '/api-portal' : '')
 
 /**
- * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
   async redirects() {
@@ -54,6 +54,7 @@ const nextConfig = {
   output: 'standalone',
   outputFileTracing: true,
   experimental: {
+    appDir: false,
     outputFileTracingRoot: join(__dirname, '../../'),
   },
   cleanDistDir: true,

apps/api-portal/package.json

@@ -27,7 +27,7 @@
     "react-i18next": "11.18.6",
     "react-query": "3.39.3",
     "recoil": "0.7.6",
-    "typescript": "4.9.5"
+    "typescript": "5.0.4"
   },
   "devDependencies": {
     "@types/lodash": "4.14.191",

apps/api-portal/project.json

@@ -19,7 +19,7 @@
       }
     },
     "build": {
-      "executor": "@nrwl/next:build",
+      "executor": "@nx/next:build",
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
@@ -38,7 +38,7 @@
       }
     },
     "serve": {
-      "executor": "@nrwl/next:server",
+      "executor": "@nx/next:server",
       "options": {
         "buildTarget": "api-portal:build",
         "dev": true,
@@ -52,20 +52,20 @@
       }
     },
     "export": {
-      "executor": "@nrwl/next:export",
+      "executor": "@nx/next:export",
       "options": {
         "buildTarget": "api-portal:build:production"
       }
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/api-portal/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/api-portal"],
       "options": {
         "jestConfig": "apps/api-portal/jest.config.ts",

apps/api-portal/tsconfig.json

@@ -35,8 +35,21 @@
       "@globalfishingwatch/ui-components": ["../../libs/ui-components/src/index.ts"],
       "@globalfishingwatch/ui-components/*": ["../../libs/ui-components/src/*"]
     },
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    "next-env.d.ts",
+    "../../dist/apps/api-portal/.next/types/**/*.ts"
+  ],
   "exclude": ["node_modules", "jest.config.ts"]
 }

apps/deck-playground/jest.config.js

@@ -2,11 +2,11 @@ module.exports = {
   displayName: 'deck-playground',
   preset: '../../jest.preset.js',
   transform: {
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
-    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
     '^.+\\.[tj]sx?$': [
-      ['babel-jest', { presets: ['@nrwl/next/babel'] }],
-      { presets: ['@nrwl/next/babel'] },
+      ['babel-jest', { presets: ['@nx/next/babel'] }],
+      { presets: ['@nx/next/babel'] },
     ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],

apps/deck-playground/next.config.js

@@ -1,8 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const withNx = require('@nrwl/next/plugins/with-nx')
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true',
-})
+const withNx = require('@nx/next/plugins/with-nx')
 // const CircularDependencyPlugin = require('circular-dependency-plugin')
 
 const IS_PRODUCTION =
@@ -11,7 +8,7 @@ const IS_PRODUCTION =
 const BASE_PATH = process.env.NEXT_PUBLIC_URL || IS_PRODUCTION ? '' : ''
 
 /**
- * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
+ * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
   // async rewrites() {
@@ -57,10 +54,14 @@ const nextConfig = {
   ...(BASE_PATH && { basePath: BASE_PATH }),
   // productionBrowserSourceMaps: !IS_PRODUCTION,
   experimental: {
-    images: {
-      unoptimized: true,
-    },
+    appDir: false,
   },
 }
 
-module.exports = withBundleAnalyzer(withNx(nextConfig))
+const configWithNx = withNx(nextConfig)
+module.exports = async (...args) => {
+  return {
+    ...(await configWithNx(...args)),
+    //...
+  }
+}