chore: stop polyfilling node modules (#19909)

apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx

@@ -1,7 +1,7 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import generator from 'generate-password'
+import generator from 'generate-password-browser'
 import { debounce } from 'lodash'
 import { useEffect, useRef, useState } from 'react'
 import { Button, Input, Modal } from 'ui'

apps/studio/components/layouts/ReportsLayout/ReportsLayout.tsx

@@ -20,7 +20,7 @@ const ReportsLayout = ({ title, children }: PropsWithChildren<ReportsLayoutProps
 
   const menuItems = [
     {
-      title: '',
+      key: 'reports',
       items: [
         {
           name: 'Custom reports',
@@ -31,6 +31,7 @@ const ReportsLayout = ({ title, children }: PropsWithChildren<ReportsLayoutProps
       ],
     },
     {
+      key: 'builtin-reports',
       items: [
         {
           name: 'API',
@@ -38,14 +39,17 @@ const ReportsLayout = ({ title, children }: PropsWithChildren<ReportsLayoutProps
           url: `/project/${ref}/reports/api-overview`,
           items: [],
         },
-
-        {
-          name: 'Storage',
-          key: 'storage',
-          url: `/project/${ref}/reports/storage`,
-          items: [],
-          label: 'NEW',
-        },
+        ...(storageEnabled
+          ? [
+              {
+                name: 'Storage',
+                key: 'storage',
+                url: `/project/${ref}/reports/storage`,
+                items: [],
+                label: 'NEW',
+              },
+            ]
+          : []),
 
         {
           name: 'Database',

apps/studio/components/ui/ProductMenu/ProductMenu.tsx

@@ -13,7 +13,7 @@ const ProductMenu = ({ page, menu }: ProductMenuProps) => {
     <div className="flex flex-col space-y-8 overflow-y-auto">
       <Menu type="pills">
         {menu.map((group, idx) => (
-          <div key={group.title}>
+          <div key={group.title || group.key}>
             <div className="my-6 space-y-8">
               <div className="mx-3">
                 <Menu.Group

apps/studio/components/ui/ProductMenu/ProductMenu.types.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react'
 
 export interface ProductMenuGroup {
   title?: string
+  key?: string
   isPreview?: boolean
   items: ProductMenuGroupItem[]
 }

apps/studio/data/sql/execute-sql-query.ts

@@ -5,7 +5,6 @@ import {
   useQueryClient,
   UseQueryOptions,
 } from '@tanstack/react-query'
-import md5 from 'blueimp-md5'
 import { useCallback } from 'react'
 
 import { post } from 'data/fetchers'
@@ -122,7 +121,7 @@ export const useExecuteSqlQuery = <TData = ExecuteSqlData>(
   { enabled = true, ...options }: UseQueryOptions<ExecuteSqlData, ExecuteSqlError, TData> = {}
 ) =>
   useQuery<ExecuteSqlData, ExecuteSqlError, TData>(
-    sqlKeys.query(projectRef, queryKey ?? [md5(sql)]),
+    sqlKeys.query(projectRef, queryKey ?? [btoa(sql)]),
     ({ signal }) =>
       executeSql(
         { projectRef, connectionString, sql, queryKey, handleError, isRoleImpersonationEnabled },
@@ -135,7 +134,7 @@ export const prefetchExecuteSql = (
   client: QueryClient,
   { projectRef, connectionString, sql, queryKey, handleError }: ExecuteSqlVariables
 ) => {
-  return client.prefetchQuery(sqlKeys.query(projectRef, queryKey ?? [md5(sql)]), ({ signal }) =>
+  return client.prefetchQuery(sqlKeys.query(projectRef, queryKey ?? [btoa(sql)]), ({ signal }) =>
     executeSql({ projectRef, connectionString, sql, queryKey, handleError }, signal)
   )
 }

apps/studio/next.config.js

@@ -27,6 +27,11 @@ const csp = [
 const nextConfig = {
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   output: 'standalone',
+  experimental: {
+    // [Kevin] Next polyfills Node modules like Crypto by default, blowing up the bundle size. We use generate-password-browser (safe to use in browser) and the polyfills are not needed for us
+    // Revisit on Next 14 upgrade (PR #19909)
+    fallbackNodePolyfills: false,
+  },
   async redirects() {
     return [
       ...(process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'

apps/studio/package.json

@@ -42,7 +42,6 @@
     "ai-commands": "*",
     "ajv": "^8.6.3",
     "awesome-debounce-promise": "^2.1.0",
-    "blueimp-md5": "^2.19.0",
     "clsx": "^1.2.1",
     "common": "*",
     "common-tags": "^1.8.2",
@@ -51,7 +50,7 @@
     "dayjs": "^1.11.10",
     "file-saver": "^2.0.5",
     "framer-motion": "^6.5.1",
-    "generate-password": "^1.7.0",
+    "generate-password-browser": "^1.1.0",
     "html-to-image": "^1.10.8",
     "immutability-helper": "^3.1.1",
     "ip-address": "^8.1.0",
@@ -116,7 +115,6 @@
     "@testing-library/dom": "^9.3.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/blueimp-md5": "^2.18.0",
     "@types/common-tags": "^1.8.1",
     "@types/file-saver": "^2.0.2",
     "@types/json-logic-js": "^1.2.1",

apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx

@@ -1,4 +1,4 @@
-import generator from 'generate-password'
+import generator from 'generate-password-browser'
 import { debounce } from 'lodash'
 import { useRouter } from 'next/router'
 import { ChangeEvent, useRef, useState } from 'react'

apps/studio/pages/new/[slug].tsx

@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import generator from 'generate-password'
+import generator from 'generate-password-browser'
 import { debounce } from 'lodash'
 import Link from 'next/link'
 import { useRouter } from 'next/router'

apps/studio/pages/vercel/setupProject.tsx

@@ -1,4 +1,4 @@
-import generator from 'generate-password'
+import generator from 'generate-password-browser'
 import { debounce } from 'lodash'
 import { makeAutoObservable } from 'mobx'
 import { observer, useLocalObservable } from 'mobx-react-lite'

package-lock.json

@@ -730,7 +730,6 @@
         "ai-commands": "*",
         "ajv": "^8.6.3",
         "awesome-debounce-promise": "^2.1.0",
-        "blueimp-md5": "^2.19.0",
         "clsx": "^1.2.1",
         "common": "*",
         "common-tags": "^1.8.2",
@@ -739,7 +738,7 @@
         "dayjs": "^1.11.10",
         "file-saver": "^2.0.5",
         "framer-motion": "^6.5.1",
-        "generate-password": "^1.7.0",
+        "generate-password-browser": "^1.1.0",
         "html-to-image": "^1.10.8",
         "immutability-helper": "^3.1.1",
         "ip-address": "^8.1.0",
@@ -804,7 +803,6 @@
         "@testing-library/dom": "^9.3.3",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^13.5.0",
-        "@types/blueimp-md5": "^2.18.0",
         "@types/common-tags": "^1.8.1",
         "@types/file-saver": "^2.0.2",
         "@types/json-logic-js": "^1.2.1",
@@ -11264,11 +11262,6 @@
         "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@types/blueimp-md5": {
-      "version": "2.18.0",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/body-parser": {
       "version": "1.19.3",
       "dev": true,
@@ -14026,10 +14019,6 @@
         "safe-buffer": "~5.2.0"
       }
     },
-    "node_modules/blueimp-md5": {
-      "version": "2.19.0",
-      "license": "MIT"
-    },
     "node_modules/body-parser": {
       "version": "1.20.1",
       "dev": true,
@@ -18966,9 +18955,37 @@
         "node": ">=8"
       }
     },
-    "node_modules/generate-password": {
-      "version": "1.7.0",
-      "license": "MIT"
+    "node_modules/generate-password-browser": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/generate-password-browser/-/generate-password-browser-1.1.0.tgz",
+      "integrity": "sha512-qsQve0rVbCqGqAfKgZwjxKUfI1d1nyd22dz+kE8gn1iw1LxGkR+Slsl79XXfm2wxuK27IkopTs5KXcOEQnhg0w==",
+      "dependencies": {
+        "buffer": "^6.0.3",
+        "randombytes": "^2.0.5"
+      }
+    },
+    "node_modules/generate-password-browser/node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",