IR-48 Created a Tailwind AutoComplete component and updated Radio Component

packages/client-core/src/admin/components/project/ManageUserPermissionModal.tsx

@@ -64,7 +64,7 @@ export default function ManageUserPermissionModal({
       return
     }
     try {
-      await ProjectService.createPermission(userInviteCode.value, project.id)
+      await ProjectService.createPermission(userInviteCode.value, project.id, 'reviewer')
     } catch (err) {
       NotificationService.dispatchNotify(err.message, { variant: 'error' })
     }

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

@@ -45,7 +45,8 @@ import {
   projectPath,
   projectPermissionPath,
   ProjectType,
-  ProjectUpdateParams
+  ProjectUpdateParams,
+  UserID
 } from '@etherealengine/common/src/schema.type.module'
 import { Engine } from '@etherealengine/ecs/src/Engine'
 import { defineState, getMutableState, useHookstate } from '@etherealengine/hyperflux'
@@ -176,11 +177,13 @@ export const ProjectService = {
     }
   },
 
-  createPermission: async (userInviteCode: InviteCode, projectId: string) => {
+  createPermission: async (userInviteCode: InviteCode, projectId: string, type: string) => {
     try {
       return Engine.instance.api.service(projectPermissionPath).create({
         inviteCode: userInviteCode,
-        projectId: projectId
+        userId: '' as UserID,
+        projectId: projectId,
+        type
       })
     } catch (err) {
       logger.error('Error with creating new project-permission', err)

packages/common/src/schemas/projects/project-permission.schema.ts

@@ -47,6 +47,9 @@ export const projectPermissionSchema = Type.Object(
     userId: TypedString<UserID>({
       format: 'uuid'
     }),
+    createdBy: TypedString<UserID>({
+      format: 'uuid'
+    }),
     type: Type.String(),
     user: Type.Ref(userSchema),
     createdAt: Type.String({ format: 'date-time' }),
@@ -59,7 +62,7 @@ export interface ProjectPermissionType extends Static<typeof projectPermissionSc
 export interface ProjectPermissionDatabaseType extends Omit<ProjectPermissionType, 'user'> {}
 
 // Schema for creating new entries
-export const projectPermissionDataProperties = Type.Partial(projectPermissionSchema)
+export const projectPermissionDataProperties = Type.Pick(projectPermissionSchema, ['projectId', 'userId', 'type'])
 
 export const projectPermissionDataSchema = Type.Intersect(
   [
@@ -76,7 +79,7 @@ export const projectPermissionDataSchema = Type.Intersect(
 export interface ProjectPermissionData extends Static<typeof projectPermissionDataSchema> {}
 
 // Schema for updating existing entries
-export const projectPermissionPatchSchema = Type.Partial(projectPermissionSchema, {
+export const projectPermissionPatchSchema = Type.Pick(projectPermissionSchema, ['type'], {
   $id: 'ProjectPermissionPatch'
 })
 export interface ProjectPermissionPatch extends Static<typeof projectPermissionPatchSchema> {}
@@ -86,6 +89,7 @@ export const projectPermissionQueryProperties = Type.Pick(projectPermissionSchem
   'id',
   'projectId',
   'userId',
+  'createdBy',
   'type'
 ])
 export const projectPermissionQuerySchema = Type.Intersect(

packages/editor/src/components/projects/ProjectsPage.tsx

@@ -270,7 +270,7 @@ const ProjectsPage = ({ studioPath }: { studioPath: string }) => {
   }
 
   const onCreatePermission = async (userInviteCode: InviteCode, projectId: string) => {
-    await ProjectService.createPermission(userInviteCode, projectId)
+    await ProjectService.createPermission(userInviteCode, projectId, 'reviewer')
   }
 
   const onPatchPermission = async (id: string, type: string) => {

packages/server-core/src/projects/project-permission/migrations/20240607053537_createdBy-column.ts

@@ -0,0 +1,74 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { projectPermissionPath } from '@etherealengine/common/src/schemas/projects/project-permission.schema'
+import type { Knex } from 'knex'
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+export async function up(knex: Knex): Promise<void> {
+  await knex.raw('SET FOREIGN_KEY_CHECKS=0')
+
+  await addCreatedByColumn(knex, projectPermissionPath)
+
+  await knex.raw('SET FOREIGN_KEY_CHECKS=1')
+}
+
+/**
+ * @param { import("knex").Knex } knex
+ * @returns { Promise<void> }
+ */
+export async function down(knex: Knex): Promise<void> {
+  await knex.raw('SET FOREIGN_KEY_CHECKS=0')
+
+  await dropCreatedByColumn(knex, projectPermissionPath)
+
+  await knex.raw('SET FOREIGN_KEY_CHECKS=1')
+}
+
+export async function addCreatedByColumn(knex: Knex, tableName: string) {
+  const createdByColumnExists = await knex.schema.hasColumn(tableName, 'createdBy')
+
+  if (createdByColumnExists === false) {
+    await knex.schema.alterTable(tableName, async (table) => {
+      //@ts-ignore
+      table.uuid('createdBy', 36).collate('utf8mb4_bin').nullable().index()
+      table.foreign('createdBy').references('id').inTable('user').onDelete('CASCADE').onUpdate('CASCADE')
+    })
+  }
+}
+
+export async function dropCreatedByColumn(knex: Knex, tableName: string) {
+  const createdByColumnExists = await knex.schema.hasColumn(tableName, 'createdBy')
+
+  if (createdByColumnExists === true) {
+    await knex.schema.alterTable(tableName, async (table) => {
+      table.dropForeign('createdBy')
+      table.dropColumn('createdBy')
+    })
+  }
+}

packages/server-core/src/projects/project-permission/project-permission.hooks.ts

@@ -23,11 +23,6 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { BadRequest, Forbidden } from '@feathersjs/errors'
-import { Paginated } from '@feathersjs/feathers'
-import { hooks as schemaHooks } from '@feathersjs/schema'
-import { disallow, discardQuery, iff, iffElse, isProvider } from 'feathers-hooks-common'
-
 import { INVITE_CODE_REGEX, USER_ID_REGEX } from '@etherealengine/common/src/constants/IdConstants'
 import {
   ProjectPermissionData,
@@ -40,7 +35,12 @@ import {
 } from '@etherealengine/common/src/schemas/projects/project-permission.schema'
 import { projectPath } from '@etherealengine/common/src/schemas/projects/project.schema'
 import { InviteCode, UserID, UserType, userPath } from '@etherealengine/common/src/schemas/user/user.schema'
+import setLoggedInUserData from '@etherealengine/server-core/src/hooks/set-loggedin-user-in-body'
 import { checkScope } from '@etherealengine/spatial/src/common/functions/checkScope'
+import { BadRequest, Forbidden } from '@feathersjs/errors'
+import { Paginated } from '@feathersjs/feathers'
+import { hooks as schemaHooks } from '@feathersjs/schema'
+import { disallow, discardQuery, iff, iffElse, isProvider } from 'feathers-hooks-common'
 
 import { HookContext } from '../../../declarations'
 import logger from '../../ServerLogger'
@@ -75,7 +75,7 @@ const ensureInviteCode = async (context: HookContext<ProjectPermissionService>)
   }
   if (data[0].userId && INVITE_CODE_REGEX.test(data[0].userId)) {
     data[0].inviteCode = data[0].userId as string as InviteCode
-    delete data[0].userId
+    delete (data[0] as any).userId
   }
   context.data = data[0]
 }
@@ -131,7 +131,7 @@ const checkExistingPermissions = async (context: HookContext<ProjectPermissionSe
         existingPermissionsCount.length === 0 ||
         ((await checkScope(selfUser, 'projects', 'write')) && selfUser.id === users.data[0].id)
           ? 'owner'
-          : 'editor'
+          : data[0].type
     }
   } catch (err) {
     logger.error(err)
@@ -187,7 +187,7 @@ const ensureTypeInPatch = async (context: HookContext<ProjectPermissionService>)
   }
 
   const data: ProjectPermissionPatch = context.data as ProjectPermissionPatch
-  context.data = { type: data.type === 'owner' ? 'owner' : 'editor' }
+  context.data = { type: data.type === 'owner' ? 'owner' : data.type } as ProjectPermissionData
 }
 
 /**
@@ -224,6 +224,7 @@ export default {
       iff(isProvider('external'), verifyProjectOwner()),
       () => schemaHooks.validateData(projectPermissionDataValidator),
       schemaHooks.resolveData(projectPermissionDataResolver),
+      setLoggedInUserData('createdBy'),
       ensureInviteCode,
       checkExistingPermissions
     ],

packages/server-core/src/projects/project-permission/project-permission.test.ts

@@ -196,7 +196,8 @@ describe('project-permission.test', () => {
         project1Permission2 = await app.service(projectPermissionPath).create(
           {
             projectId: project1.id,
-            userId: user2.id
+            userId: user2.id,
+            type: 'editor'
           },
           params
         )
@@ -216,7 +217,8 @@ describe('project-permission.test', () => {
         const duplicate = await app.service(projectPermissionPath).create(
           {
             projectId: project1.id,
-            userId: user2.id
+            userId: user2.id,
+            type: 'editor'
           },
           params
         )
@@ -237,7 +239,8 @@ describe('project-permission.test', () => {
             await app.service(projectPermissionPath).create(
               {
                 projectId: 'abcdefg',
-                userId: user2.id
+                userId: user2.id,
+                type: 'editor'
               },
               params
             )
@@ -259,7 +262,8 @@ describe('project-permission.test', () => {
             await app.service(projectPermissionPath).create(
               {
                 projectId: project1.id,
-                userId: 'abcdefg' as UserID
+                userId: 'abcdefg' as UserID,
+                type: 'editor'
               },
               params
             )
@@ -281,7 +285,8 @@ describe('project-permission.test', () => {
             const res = await app.service(projectPermissionPath).create(
               {
                 projectId: project1.id,
-                userId: user3.id
+                userId: user3.id,
+                type: 'editor'
               },
               params
             )
@@ -303,7 +308,8 @@ describe('project-permission.test', () => {
             await app.service(projectPermissionPath).create(
               {
                 projectId: project1.id,
-                userId: user3.id
+                userId: user3.id,
+                type: 'editor'
               },
               params
             )
@@ -353,8 +359,6 @@ describe('project-permission.test', () => {
         const update = (await app.service(projectPermissionPath).patch(
           project1Permission2.id,
           {
-            projectId: project1.id,
-            userId: 'abcdefg' as UserID,
             type: 'owner'
           }
           // params
@@ -374,8 +378,6 @@ describe('project-permission.test', () => {
         const update = (await app.service(projectPermissionPath).patch(
           project1Permission2.id,
           {
-            projectId: project1.id,
-            userId: user2.id,
             type: 'editor'
           },
           params
@@ -397,8 +399,6 @@ describe('project-permission.test', () => {
             await app.service(projectPermissionPath).patch(
               project1Permission2.id,
               {
-                projectId: project1.id,
-                userId: user3.id,
                 type: ''
               },
               params
@@ -427,8 +427,6 @@ describe('project-permission.test', () => {
             await app.service(projectPermissionPath).patch(
               project1Permission2.id,
               {
-                projectId: project1.id,
-                userId: user3.id,
                 type: ''
               },
               params

packages/ui/src/primitives/tailwind/Autocomplete/index.tsx

@@ -0,0 +1,63 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+import Input from '../Input'
+
+export type AutoCompleteOptionsType = { label: string; value: any }
+
+export interface AutoCompleteProps {
+  value: string
+  options: AutoCompleteOptionsType[]
+  className?: string
+  placeholder?: string
+  onSelect: (value: any) => void
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const AutoComplete = ({ options, onSelect, placeholder, className, value, onChange }: AutoCompleteProps) => {
+  return (
+    <div className={`relative ${className}`}>
+      <Input value={value} placeholder={placeholder} className="w-full" onChange={onChange} />
+      {options.length > 0 && (
+        <div className="fixed left-10 right-0 z-[60] mt-2 w-1/2 rounded border border-theme-primary bg-theme-surface-main">
+          <ul className="max-h-40 overflow-auto [&>li]:px-4 [&>li]:py-2">
+            {options.map((option, index) => (
+              <li
+                key={index}
+                className="cursor-pointer px-4 py-2 text-theme-secondary"
+                onClick={() => onSelect(option.value)}
+              >
+                {option.label}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AutoComplete