Added static resources section in admin panel

packages/client-core/i18n/en/admin.json

@@ -60,6 +60,7 @@
       "update": "Update",
       "enter": "Enter",
       "remove": "Remove",
+      "reset": "Reset",
       "delete": "Delete",
       "view": "View",
       "yes": "Yes",
@@ -163,6 +164,26 @@
     "instance": {
       "confirmInstanceDelete": "Do you want to delete instance"
     },
+    "resources": {
+      "resources": "resources",
+      "id": "Id",
+      "key": "Key",
+      "name": "Name",
+      "mimeType": "Mime Type",
+      "resourceType": "Resource Type",
+      "preview": "Preview",
+      "confirmResourceDelete": "Do you want to delete resource",
+      "nameCantEmpty": "Name can't be empty",
+      "resourceTypeCantEmpty": "Resource type can't be empty",
+      "resourceUrlCantEmpty": "Resource url can't be empty",
+      "resourceFileCantEmpty": "Resource file can't be empty",
+      "nameRequired": "Name is required",
+      "resourceTypeRequired": "Resource type is required",
+      "resourceUrlInvalid": "Resource url is not valid",
+      "resourceFileOversized": "Resource file size must be between {{minSize}} MB and {{maxSize}} MB",
+      "selectFile": "Select File",
+      "resourceUrl": "Resource Url"
+    },
     "setting": {
       "authentication": "Authentication",
       "service": "Service",

packages/client-core/i18n/en/user.json

@@ -323,10 +323,14 @@
     "content": "Content Packs",
     "scenes": "Scenes",
     "avatars": "Avatars",
+    "resources": "Resources",
     "benchmarking": "Benchmarking",
     "bots": "Bots",
     "setting": "Settings"
   },
+  "resource": {
+    "createResource": "Create Resource"
+  },
   "avatar": {
     "title": "Upload Avatar",
     "titleSelectAvatar": "Select Avatar",

packages/client-core/src/admin/adminRoutes.tsx

@@ -24,6 +24,7 @@ const party = React.lazy(() => import('./components/Party'))
 const botSetting = React.lazy(() => import('./components/Bots'))
 const projects = React.lazy(() => import('./components/Project'))
 const setting = React.lazy(() => import('./components/Setting'))
+const resources = React.lazy(() => import('./components/Resources'))
 
 const AdminSystemInjection = {
   uuid: 'core.admin.AdminSystem',
@@ -45,6 +46,7 @@ const ProtectedRoutes = () => {
     instance: false,
     invite: false,
     globalAvatars: false,
+    static_resource: false,
     benchmarking: false,
     routes: false,
     projects: false,
@@ -105,6 +107,7 @@ const ProtectedRoutes = () => {
             {allowedRoutes.bot && <PrivateRoute exact path="/admin/bots" component={botSetting} />}
             {allowedRoutes.projects && <PrivateRoute exact path="/admin/projects" component={projects} />}
             {allowedRoutes.settings && <PrivateRoute exact path="/admin/settings" component={setting} />}
+            {allowedRoutes.static_resource && <PrivateRoute exact path="/admin/resources" component={resources} />}
             {allowedRoutes.user && <PrivateRoute exact Path="/admin/users" component={users} />}
           </Switch>
         )}

packages/client-core/src/admin/common/Search.tsx

@@ -4,17 +4,19 @@ import SearchIcon from '@mui/icons-material/Search'
 import IconButton from '@mui/material/IconButton'
 import InputBase from '@mui/material/InputBase'
 import Paper from '@mui/material/Paper'
+import { SxProps, Theme } from '@mui/material/styles'
 
 import styles from '../styles/search.module.scss'
 
 interface Props {
   text: string
+  sx?: SxProps<Theme>
   handleChange: (e) => void
 }
 
-const Search = ({ text, handleChange }: Props) => {
+const Search = ({ text, sx, handleChange }: Props) => {
   return (
-    <Paper component="div" className={styles.searchRoot}>
+    <Paper component="div" className={styles.searchRoot} sx={sx}>
       <InputBase
         className={styles.input}
         placeholder={`Search for ${text}`}

packages/client-core/src/admin/common/variables/resource.ts

@@ -0,0 +1,32 @@
+import i18n from 'i18next'
+
+import { StaticResourceInterface } from '@xrengine/common/src/interfaces/StaticResourceInterface'
+
+export interface ResourceColumn {
+  id: 'id' | 'key' | 'mimeType' | 'staticResourceType' | 'thumbnail' | 'action'
+  label: string
+  minWidth?: number
+  align?: 'right'
+}
+
+export const resourceColumns: ResourceColumn[] = [
+  { id: 'id', label: i18n.t('admin:components.resources.id'), minWidth: 65 },
+  { id: 'key', label: i18n.t('admin:components.resources.key'), minWidth: 65 },
+  { id: 'mimeType', label: i18n.t('admin:components.resources.mimeType'), minWidth: 65 },
+  { id: 'staticResourceType', label: i18n.t('admin:components.resources.resourceType'), minWidth: 65 },
+  {
+    id: 'action',
+    label: 'Action',
+    minWidth: 65,
+    align: 'right'
+  }
+]
+
+export interface ResourceData {
+  el: StaticResourceInterface
+  id: string
+  key: string
+  mimeType: string
+  staticResourceType: string
+  action: JSX.Element
+}

packages/client-core/src/admin/components/Avatars/AvatarDrawer.tsx

@@ -300,6 +300,10 @@ const AvatarDrawerContent = ({ open, mode, selectedAvatar, onClose }: Props) =>
       (state.source === 'url' && (tempErrors.avatarUrl || tempErrors.thumbnailUrl))
     ) {
       NotificationService.dispatchNotify(t('admin:components.common.fixErrorFields'), { variant: 'error' })
+      return
+    } else if (tempErrors.name) {
+      NotificationService.dispatchNotify(t('admin:components.common.fillRequiredFields'), { variant: 'error' })
+      return
     } else if (state.source === 'file' && state.avatarFile && state.thumbnailFile) {
       avatarBlob = state.avatarFile
       thumbnailBlob = state.thumbnailFile
@@ -309,8 +313,6 @@ const AvatarDrawerContent = ({ open, mode, selectedAvatar, onClose }: Props) =>
 
       const thumbnailData = await fetch(state.thumbnailUrl)
       thumbnailBlob = await thumbnailData.blob()
-    } else {
-      NotificationService.dispatchNotify(t('admin:components.common.fillRequiredFields'), { variant: 'error' })
     }
 
     if (avatarBlob && thumbnailBlob) {