Merge branch 'client-setting-feathers5' into dev

packages/client-core/src/admin/components/Setting/Client.tsx

@@ -120,9 +120,9 @@ const Client = () => {
         appTitle: appTitle.value,
         appSubtitle: appSubtitle.value,
         appDescription: appDescription.value,
-        appSocialLinks: JSON.stringify(appSocialLinks.value),
-        themeSettings: JSON.stringify(clientSetting?.themeSettings),
-        themeModes: JSON.stringify(clientSetting?.themeModes),
+        appSocialLinks: appSocialLinks.value,
+        themeSettings: clientSetting?.themeSettings,
+        themeModes: clientSetting?.themeModes,
         key8thWall: key8thWall.value,
         homepageLinkButtonEnabled: homepageLinkButtonEnabled.value,
         homepageLinkButtonRedirect: homepageLinkButtonRedirect.value,

packages/client-core/src/admin/components/Setting/ClientTheme/ColorSelectionArea.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next'
 
 import InputRadio from '@etherealengine/client-core/src/common/components/InputRadio'
 import { InputMenuItem } from '@etherealengine/client-core/src/common/components/InputSelect'
-import { ThemeOptions } from '@etherealengine/common/src/interfaces/ClientSetting'
 import capitalizeFirstLetter from '@etherealengine/common/src/utils/capitalizeFirstLetter'
+import { ClientThemeOptionsType } from '@etherealengine/engine/src/schemas/setting/client-setting.schema'
 import Divider from '@etherealengine/ui/src/primitives/mui/Divider'
 import Grid from '@etherealengine/ui/src/primitives/mui/Grid'
 
@@ -14,7 +14,7 @@ import styles from '../../../styles/settings.module.scss'
 interface ColorSelectionAreaProps {
   mode: string
   colorModes: string[]
-  theme: ThemeOptions
+  theme: ClientThemeOptionsType
   onChangeMode: Function
   onChangeColor: Function
 }

packages/client-core/src/admin/components/Setting/ClientTheme/DemoStyle.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import { ThemeOptions } from '@etherealengine/common/src/interfaces/ClientSetting'
+import { ClientThemeOptionsType } from '@etherealengine/engine/src/schemas/setting/client-setting.schema'
 
 interface DemoStyleProps {
-  theme: ThemeOptions
+  theme: ClientThemeOptionsType
 }
 
 const DemoStyle = ({ theme }: DemoStyleProps) => {

packages/client-core/src/admin/components/Setting/ClientTheme/ThemeSelectionArea.tsx

@@ -2,15 +2,14 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import InputSelect, { InputMenuItem } from '@etherealengine/client-core/src/common/components/InputSelect'
-import { ThemeMode } from '@etherealengine/common/src/interfaces/ClientSetting'
 import capitalizeFirstLetter from '@etherealengine/common/src/utils/capitalizeFirstLetter'
 import Grid from '@etherealengine/ui/src/primitives/mui/Grid'
 import Typography from '@etherealengine/ui/src/primitives/mui/Typography'
 
 import styles from '../../../styles/settings.module.scss'
 
 interface ThemeSelectionAreaProps {
-  themeModes: ThemeMode
+  themeModes: Record<string, string>
   colorModes: string[]
   onChangeThemeMode: Function
 }

packages/client-core/src/admin/components/Setting/ClientTheme/index.tsx

@@ -6,7 +6,7 @@ import {
   defaultThemeSettings,
   getCurrentTheme
 } from '@etherealengine/common/src/constants/DefaultThemeSettings'
-import { ThemeMode, ThemeSetting } from '@etherealengine/common/src/interfaces/ClientSetting'
+import { ClientThemeOptionsType } from '@etherealengine/engine/src/schemas/setting/client-setting.schema'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import Button from '@etherealengine/ui/src/primitives/mui/Button'
 
@@ -26,11 +26,11 @@ const ClientTheme = () => {
   const [clientSetting] = clientSettingState?.client?.get({ noproxy: true }) || []
   const id = clientSetting?.id
 
-  const themeSettings = useHookstate<ThemeSetting>({
+  const themeSettings = useHookstate<Record<string, ClientThemeOptionsType>>({
     ...defaultThemeSettings,
     ...clientSetting.themeSettings
   })
-  const themeModes = useHookstate<ThemeMode>({
+  const themeModes = useHookstate<Record<string, string>>({
     ...defaultThemeModes,
     ...clientSetting.themeModes
   })
@@ -67,7 +67,10 @@ const ClientTheme = () => {
     await updateTheme(themeSettings.value, themeModes.value)
   }
 
-  const updateTheme = async (newThemeSettings: ThemeSetting, newThemeModes: ThemeMode) => {
+  const updateTheme = async (
+    newThemeSettings: Record<string, ClientThemeOptionsType>,
+    newThemeModes: Record<string, string>
+  ) => {
     await ClientSettingService.patchClientSetting(
       {
         logo: clientSetting?.logo,
@@ -85,9 +88,9 @@ const ClientTheme = () => {
         appSubtitle: clientSetting?.appSubtitle,
         appDescription: clientSetting?.appDescription,
         appBackground: clientSetting?.appBackground,
-        appSocialLinks: JSON.stringify(clientSetting?.appSocialLinks),
-        themeSettings: JSON.stringify(newThemeSettings),
-        themeModes: JSON.stringify(newThemeModes),
+        appSocialLinks: clientSetting?.appSocialLinks,
+        themeSettings: newThemeSettings,
+        themeModes: newThemeModes,
         key8thWall: clientSetting?.key8thWall,
         homepageLinkButtonEnabled: clientSetting?.homepageLinkButtonEnabled,
         homepageLinkButtonRedirect: clientSetting?.homepageLinkButtonRedirect,
@@ -99,7 +102,7 @@ const ClientTheme = () => {
     const currentTheme = getCurrentTheme(selfUser?.user_setting?.value?.themeModes)
 
     if (newThemeSettings[currentTheme]) {
-      for (let variable of Object.keys(newThemeSettings[currentTheme])) {
+      for (const variable of Object.keys(newThemeSettings[currentTheme])) {
         ;(document.querySelector(`[data-theme=${currentTheme}]`) as any)?.style.setProperty(
           '--' + variable,
           newThemeSettings[currentTheme][variable]

packages/client-core/src/admin/services/Setting/ClientSettingService.ts

@@ -1,9 +1,13 @@
 import { Paginated } from '@feathersjs/feathers'
 
 import config from '@etherealengine/common/src/config'
-import { ClientSetting, PatchClientSetting } from '@etherealengine/common/src/interfaces/ClientSetting'
 import multiLogger from '@etherealengine/common/src/logger'
 import { matches, Validator } from '@etherealengine/engine/src/common/functions/MatchesUtils'
+import {
+  ClientSettingPatch,
+  clientSettingPath,
+  ClientSettingType
+} from '@etherealengine/engine/src/schemas/setting/client-setting.schema'
 import { defineAction, defineState, dispatchAction, getMutableState } from '@etherealengine/hyperflux'
 
 import { API } from '../../../API'
@@ -15,7 +19,7 @@ const logger = multiLogger.child({ component: 'client-core:ClientSettingService'
 export const AdminClientSettingsState = defineState({
   name: 'AdminClientSettingsState',
   initial: () => ({
-    client: [] as Array<ClientSetting>,
+    client: [] as Array<ClientSettingType>,
     updateNeeded: true
   })
 })
@@ -57,17 +61,19 @@ export const ClientSettingService = {
       logger.info('waitingForClientAuthenticated')
       await waitForClientAuthenticated()
       logger.info('CLIENT AUTHENTICATED!')
-      const clientSettings = (await API.instance.client.service('client-setting').find()) as Paginated<ClientSetting>
+      const clientSettings = (await API.instance.client
+        .service(clientSettingPath)
+        .find()) as Paginated<ClientSettingType>
       logger.info('Dispatching fetchedClient')
       dispatchAction(ClientSettingActions.fetchedClient({ clientSettings }))
     } catch (err) {
       logger.error(err)
       NotificationService.dispatchNotify(err.message, { variant: 'error' })
     }
   },
-  patchClientSetting: async (data: PatchClientSetting, id: string) => {
+  patchClientSetting: async (data: ClientSettingPatch, id: string) => {
     try {
-      await API.instance.client.service('client-setting').patch(id, data)
+      await API.instance.client.service(clientSettingPath).patch(id, data)
       dispatchAction(ClientSettingActions.clientSettingPatched({}))
     } catch (err) {
       logger.error(err)
@@ -79,7 +85,7 @@ export const ClientSettingService = {
 export class ClientSettingActions {
   static fetchedClient = defineAction({
     type: 'ee.client.AdminClientSetting.CLIENT_SETTING_DISPLAY' as const,
-    clientSettings: matches.object as Validator<unknown, Paginated<ClientSetting>>
+    clientSettings: matches.object as Validator<unknown, Paginated<ClientSettingType>>
   })
   static clientSettingPatched = defineAction({
     type: 'ee.client.AdminClientSetting.CLIENT_SETTING_PATCHED' as const

packages/client-core/src/common/services/AppThemeState.ts

@@ -1,6 +1,6 @@
 import { getCurrentTheme } from '@etherealengine/common/src/constants/DefaultThemeSettings'
-import { ThemeOptions } from '@etherealengine/common/src/interfaces/ClientSetting'
 import { matches, Validator } from '@etherealengine/engine/src/common/functions/MatchesUtils'
+import { ClientThemeOptionsType } from '@etherealengine/engine/src/schemas/setting/client-setting.schema'
 import { defineAction, defineState, getMutableState, useHookstate } from '@etherealengine/hyperflux'
 
 import { AdminClientSettingsState } from '../../admin/services/Setting/ClientSettingService'
@@ -10,7 +10,7 @@ export const AppThemeState = defineState({
   name: 'AppThemeState',
   initial: () => ({
     mode: 'auto' as 'auto' | 'profile' | 'custom',
-    customTheme: null as ThemeOptions | null,
+    customTheme: null as ClientThemeOptionsType | null,
     customThemeName: null as string | null
   })
 })
@@ -29,7 +29,7 @@ export const AppThemeServiceReceptor = (action) => {
 export class AppThemeActions {
   static setCustomTheme = defineAction({
     type: 'ee.client.AppTheme.setCustomTheme' as const,
-    theme: matches.object.optional() as Validator<unknown, ThemeOptions>,
+    theme: matches.object.optional() as Validator<unknown, ClientThemeOptionsType>,
     themeName: matches.string.optional()
   })
 }

packages/client/package.json

@@ -56,6 +56,7 @@
     "daisyui": "^2.51.5",
     "i18next": "21.6.16",
     "i18next-browser-languagedetector": "6.1.3",
+    "knex": "2.4.2",
     "koa": "2.14.2",
     "koa-body": "6.0.1",
     "koa-qs": "3.0.0",
@@ -73,7 +74,6 @@
     "react-json-tree": "0.15.2",
     "react-router-dom": "6.9.0",
     "sass": "1.59.3",
-    "sequelize": "6.29.3",
     "tailwindcss": "^3.3.2",
     "ts-node": "10.9.1",
     "vite": "4.2.1",

packages/client/scripts/getClientSettings.ts

@@ -1,79 +1,29 @@
-import { DataTypes, Sequelize } from 'sequelize'
+import knex from 'knex'
 
-export const getClientSetting = async () => {
-  const db = {
-    username: process.env.MYSQL_USER ?? 'server',
-    password: process.env.MYSQL_PASSWORD ?? 'password',
-    database: process.env.MYSQL_DATABASE ?? 'etherealengine',
-    host: process.env.MYSQL_HOST ?? '127.0.0.1',
-    port: process.env.MYSQL_PORT ?? 3306,
-    dialect: 'mysql',
-    url: ''
-  }
+import {
+  ClientSettingDatabaseType,
+  clientSettingPath
+} from '@etherealengine/engine/src/schemas/setting/client-setting.schema'
+import { clientDbToSchema } from '@etherealengine/server-core/src/setting/client-setting/client-setting.resolvers'
 
-  db.url = process.env.MYSQL_URL ?? `mysql://${db.username}:${db.password}@${db.host}:${db.port}/${db.database}`
-  const sequelizeClient = new Sequelize({
-    ...db,
-    define: {
-      freezeTableName: true
-    },
-    logging: false
-  } as any) as any
-  await sequelizeClient.sync()
-  const clientSettingSchema = sequelizeClient.define('clientSetting', {
-    logo: {
-      type: DataTypes.STRING,
-      allowNull: true
-    },
-    title: {
-      type: DataTypes.STRING,
-      allowNull: true
-    },
-    url: {
-      type: DataTypes.STRING,
-      allowNull: true
-    },
-    releaseName: {
-      type: DataTypes.STRING,
-      allowNull: true
-    },
-    siteDescription: {
-      type: DataTypes.STRING,
-      allowNull: true
-    },
-    favicon32px: {
-      type: DataTypes.STRING,
-      allowNull: true
-    },
-    favicon16px: {
-      type: DataTypes.STRING,
-      allowNull: true
-    },
-    icon192px: {
-      type: DataTypes.STRING,
-      allowNull: true
-    },
-    icon512px: {
-      type: DataTypes.STRING,
-      allowNull: true
+export const getClientSetting = async () => {
+  const knexClient = knex({
+    client: 'mysql',
+    connection: {
+      user: process.env.MYSQL_USER ?? 'server',
+      password: process.env.MYSQL_PASSWORD ?? 'password',
+      host: process.env.MYSQL_HOST ?? '127.0.0.1',
+      port: parseInt(process.env.MYSQL_PORT || '3306'),
+      database: process.env.MYSQL_DATABASE ?? 'etherealengine',
+      charset: 'utf8mb4'
     }
   })
 
-  const clientSetting = await clientSettingSchema
-    .findAll()
+  const clientSetting = await knexClient
+    .select()
+    .from<ClientSettingDatabaseType>(clientSettingPath)
     .then(([dbClient]) => {
-      const dbClientConfig = (dbClient && {
-        paymentPointer: process.env.COIL_PAYMENT_POINTER || '',
-        logo: dbClient.logo,
-        title: dbClient.title,
-        url: dbClient.url,
-        releaseName: dbClient.releaseName,
-        siteDescription: dbClient.siteDescription,
-        favicon32px: dbClient.favicon32px,
-        favicon16px: dbClient.favicon16px,
-        icon192px: dbClient.icon192px,
-        icon512px: dbClient.icon512px
-      }) || {
+      const dbClientConfig = clientDbToSchema(dbClient) || {
         logo: './logo.svg',
         title: 'Ethereal Engine',
         url: 'https://local.etherealengine.org',

packages/client/scripts/getCoilSettings.ts

@@ -0,0 +1,32 @@
+import knex from 'knex'
+
+import { coilSettingPath, CoilSettingType } from '@etherealengine/engine/src/schemas/setting/coil-setting.schema'
+
+export const getCoilSetting = async () => {
+  const knexClient = knex({
+    client: 'mysql',
+    connection: {
+      user: process.env.MYSQL_USER ?? 'server',
+      password: process.env.MYSQL_PASSWORD ?? 'password',
+      host: process.env.MYSQL_HOST ?? '127.0.0.1',
+      port: parseInt(process.env.MYSQL_PORT || '3306'),
+      database: process.env.MYSQL_DATABASE ?? 'etherealengine',
+      charset: 'utf8mb4'
+    }
+  })
+
+  const coilSetting = await knexClient
+    .select()
+    .from<CoilSettingType>(coilSettingPath)
+    .then(([dbCoil]) => {
+      if (dbCoil) {
+        return dbCoil
+      }
+    })
+    .catch((e) => {
+      console.warn('[vite.config.js]: Failed to read coilSetting')
+      console.warn(e)
+    })
+
+  return coilSetting!
+}

packages/client/vite.config.ts

@@ -14,6 +14,7 @@ import PkgConfig from 'vite-plugin-package-config'
 import manifest from './manifest.default.json'
 import PWA from './pwa.config'
 import { getClientSetting } from './scripts/getClientSettings'
+import { getCoilSetting } from './scripts/getCoilSettings'
 
 const merge = (src, dest) =>
   mergeWith({}, src, dest, function (a, b) {
@@ -125,6 +126,7 @@ export default defineConfig(async () => {
     path: packageRoot.path + '/.env.local'
   })
   const clientSetting = await getClientSetting()
+  const coilSetting = await getCoilSetting()
 
   writeEmptySWFile()
 
@@ -177,17 +179,17 @@ export default defineConfig(async () => {
         ...manifest,
         title: clientSetting.title || 'Ethereal Engine',
         description: clientSetting?.siteDescription || 'Connected Worlds for Everyone',
-        short_name: clientSetting?.shortName || 'EE',
-        theme_color: clientSetting?.themeColor || '#ffffff',
-        background_color: clientSetting?.backgroundColor || '#000000',
+        // short_name: clientSetting?.shortName || 'EE',
+        // theme_color: clientSetting?.themeColor || '#ffffff',
+        // background_color: clientSetting?.backgroundColor || '#000000',
         appleTouchIcon: clientSetting.appleTouchIcon || '/apple-touch-icon.png',
         favicon32px: clientSetting.favicon32px || '/favicon-32x32.png',
         favicon16px: clientSetting.favicon16px || '/favicon-16x16.png',
         icon192px: clientSetting.icon192px || '/android-chrome-192x192.png',
         icon512px: clientSetting.icon512px || '/android-chrome-512x512.png',
         webmanifestLink: clientSetting.webmanifestLink || '/manifest.webmanifest',
         swScriptLink: clientSetting.swScriptLink || 'service-worker.js',
-        paymentPointer: clientSetting.paymentPointer || ''
+        paymentPointer: coilSetting.paymentPointer || ''
       }),
       viteCompression({
         filter: /\.(js|mjs|json|css)$/i,