enso-org · mergify · May 9, 2024 · Feb 16, 2024 · Feb 16, 2024 · Feb 16, 2024
@@ -532,6 +532,12 @@ export function locateUpsertSecretModal(page: test.Page) {
   return page.getByTestId('upsert-secret-modal')
 }
 
+/** Find a "new user group" modal (if any) on the current page. */
+export function locateNewUserGroupModal(page: test.Page) {
+  // This has no identifying features.
+  return page.getByTestId('new-user-group-modal')
+}
+
 /** Find a user menu (if any) on the current page. */
 export function locateUserMenu(page: test.Page) {
   // This has no identifying features.

@@ -55,9 +55,9 @@ export async function mockApi({ page }: MockParams) {
     name: defaultUsername,
     organizationId: defaultOrganizationId,
     userId: defaultUserId,
-    profilePicture: null,
     isEnabled: true,
     rootDirectoryId: defaultDirectoryId,
+    userGroups: null,
   }
   let currentUser: backend.User | null = defaultUser
   let currentOrganization: backend.OrganizationInfo | null = null
@@ -571,9 +571,9 @@ export async function mockApi({ page }: MockParams) {
             name: body.userName,
             organizationId,
             userId: backend.UserId(`user-${uniqueString.uniqueString()}`),
-            profilePicture: null,
             isEnabled: false,
             rootDirectoryId,
+            userGroups: null,
           }
           await route.fulfill({ json: currentUser })
         } else if (request.method() === 'GET') {

@@ -4,21 +4,27 @@ import * as tailwindMerge from 'tailwind-merge'
 import * as aria from '#/components/aria'
 import * as portal from '#/components/Portal'
 
-/** Props for a {@link Tooltip}. */
-export interface TooltipProps
-  extends Omit<Readonly<aria.TooltipProps>, 'offset' | 'UNSTABLE_portalContainer'> {}
-
-const DEFAULT_CLASSES = 'z-1 flex bg-neutral-800 text-white p-2 rounded-md shadow-lg text-xs'
+// =================
+// === Constants ===
+// =================
 
+const DEFAULT_CLASSES =
+  'flex bg-frame backdrop-blur-default text-primary p-2 rounded-default shadow-soft text-xs'
 const DEFAULT_CONTAINER_PADDING = 4
 const DEFAULT_OFFSET = 4
 
+// ===============
+// === Tooltip ===
+// ===============
+
+/** Props for a {@link Tooltip}. */
+export interface TooltipProps
+  extends Omit<Readonly<aria.TooltipProps>, 'offset' | 'UNSTABLE_portalContainer'> {}
+
 /** Displays the description of an element on hover or focus. */
 export function Tooltip(props: TooltipProps) {
   const { className, containerPadding = DEFAULT_CONTAINER_PADDING, ...ariaTooltipProps } = props
-
   const root = portal.useStrictPortalContext()
-
   const classes = tailwindMerge.twJoin(DEFAULT_CLASSES)
 
   return (

@@ -21,10 +21,10 @@ interface InternalBaseAutocompleteProps<T> {
   readonly type?: React.HTMLInputTypeAttribute
   readonly inputRef?: React.MutableRefObject<HTMLInputElement | null>
   readonly placeholder?: string
-  readonly values: T[]
+  readonly values: readonly T[]
   readonly autoFocus?: boolean
   /** This may change as the user types in the input. */
-  readonly items: T[]
+  readonly items: readonly T[]
   readonly itemToKey: (item: T) => string
   readonly itemToString: (item: T) => string
   readonly itemsToString?: (items: T[]) => string
@@ -48,8 +48,8 @@ interface InternalMultipleAutocompleteProps<T> extends InternalBaseAutocompleteP
   /** This is `null` when multiple values are selected, causing the input to switch to a
    * {@link HTMLTextAreaElement}. */
   readonly inputRef?: React.MutableRefObject<HTMLInputElement | null>
-  readonly setValues: (value: T[]) => void
-  readonly itemsToString: (items: T[]) => string
+  readonly setValues: (value: readonly T[]) => void
+  readonly itemsToString: (items: readonly T[]) => string
 }
 
 /** {@link AutocompleteProps} when the text cannot be edited. */

@@ -17,7 +17,7 @@ export interface ContextMenusProps extends Readonly<React.PropsWithChildren> {
 }
 
 /** A context menu that opens at the current mouse position. */
-export default function ContextMenus(props: ContextMenusProps) {
+function ContextMenus(props: ContextMenusProps, ref: React.ForwardedRef<HTMLDivElement>) {
   const { hidden = false, children, event } = props
 
   return hidden ? (
@@ -31,10 +31,8 @@ export default function ContextMenus(props: ContextMenusProps) {
     >
       <div
         data-testid="context-menus"
-        style={{
-          left: event.pageX,
-          top: event.pageY,
-        }}
+        ref={ref}
+        style={{ left: event.pageX, top: event.pageY }}
         className={`pointer-events-none sticky flex w-min items-start gap-context-menus ${
           detect.isOnMacOS()
             ? 'ml-context-menu-macos-half-x -translate-x-context-menu-macos-half-x'
@@ -49,3 +47,5 @@ export default function ContextMenus(props: ContextMenusProps) {
     </Modal>
   )
 }
+
+export default React.forwardRef(ContextMenus)
@@ -0,0 +1,33 @@
+/** @file An {@link aria.Text} that is focusable to allow it to be a {@link aria.TooltipTrigger}
+ * target. */
+import * as React from 'react'
+
+import * as aria from '#/components/aria'
+
+// =====================
+// === FocusableText ===
+// =====================
+
+/** Props for a {@link FocusableText}. */
+export interface FocusableTextProps extends Readonly<aria.TextProps> {}
+
+/** An {@link aria.Text} that is focusable to allow it to be a {@link aria.TooltipTrigger}
+ * target. */
+function FocusableText(props: FocusableTextProps, ref: React.ForwardedRef<HTMLElement>) {
+  // @ts-expect-error This error is caused by `exactOptionalPropertyTypes`.
+  const [props2, ref2] = aria.useContextProps(props, ref, aria.TextContext)
+  // @ts-expect-error This error is caused by `exactOptionalPropertyTypes`.
+  const { focusableProps } = aria.useFocusable(props2, ref2)
+  const { elementType: ElementType = 'span', ...domProps } = props2
+  return (
+    <ElementType
+      className="react-aria-Text"
+      {...aria.mergeProps<FocusableTextProps>()(domProps, focusableProps)}
+      // @ts-expect-error This is required because the dynamic element type is too complex for
+      // TypeScript to typecheck.
+      ref={ref2}
+    />
+  )
+}
+
+export default React.forwardRef(FocusableText)
@@ -722,7 +722,7 @@ export default function AssetRow(props: AssetRowProps) {
                     element.focus()
                   }
                 }}
-                className={`h-row rounded-full transition-all ease-in-out ${visibility} ${isDraggedOver || selected ? 'selected' : ''}`}
+                className={`h-row rounded-full transition-all ease-in-out rounded-rows-child ${visibility} ${isDraggedOver || selected ? 'selected' : ''}`}
                 onClick={event => {
                   unsetModal()
                   onClick(innerProps, event)
@@ -907,7 +907,7 @@ export default function AssetRow(props: AssetRowProps) {
         <tr>
           <td colSpan={columns.length} className="border-r p rounded-rows-skip-level">
             <div
-              className={`flex h-row w-container justify-center rounded-full ${indent.indentClass(
+              className={`flex h-row w-container justify-center rounded-full rounded-rows-child ${indent.indentClass(
                 item.depth
               )}`}
             >
@@ -922,7 +922,7 @@ export default function AssetRow(props: AssetRowProps) {
         <tr>
           <td colSpan={columns.length} className="border-r p rounded-rows-skip-level">
             <div
-              className={`flex h-row items-center rounded-full ${indent.indentClass(item.depth)}`}
+              className={`flex h-row items-center rounded-full rounded-rows-child ${indent.indentClass(item.depth)}`}
             >
               <img src={BlankIcon} />
               <aria.Text className="px-name-column-x placeholder">

@@ -1,4 +1,4 @@
-/** @file A user and their permissions for a specific asset. */
+/** @file Permissions for a specific user or user group on a specific asset. */
 import * as React from 'react'
 
 import type * as text from '#/text'
@@ -30,48 +30,49 @@ const ASSET_TYPE_TO_TEXT_ID: Readonly<Record<backendModule.AssetType, text.TextI
   [backendModule.AssetType.specialLoading]: 'specialLoadingAssetType',
 } satisfies { [Type in backendModule.AssetType]: `${Type}AssetType` }
 
-// ======================
-// === UserPermission ===
-// ======================
+// ==================
+// === Permission ===
+// ==================
 
-/** Props for a {@link UserPermission}. */
-export interface UserPermissionProps {
+/** Props for a {@link Permission}. */
+export interface PermissionProps {
   readonly asset: backendModule.Asset
   readonly self: backendModule.UserPermission
   readonly isOnlyOwner: boolean
-  readonly userPermission: backendModule.UserPermission
-  readonly setUserPermission: (userPermissions: backendModule.UserPermission) => void
-  readonly doDelete: (user: backendModule.UserInfo) => void
+  readonly permission: backendModule.AssetPermission
+  readonly setPermission: (userPermissions: backendModule.AssetPermission) => void
+  readonly doDelete: (user: backendModule.UserPermissionIdentifier) => void
 }
 
-/** A user and their permissions for a specific asset. */
-export default function UserPermission(props: UserPermissionProps) {
+/** A user or group, and their permissions for a specific asset. */
+export default function Permission(props: PermissionProps) {
   const { asset, self, isOnlyOwner, doDelete } = props
-  const { userPermission: initialUserPermission, setUserPermission: outerSetUserPermission } = props
+  const { permission: initialPermission, setPermission: outerSetPermission } = props
   const { backend } = backendProvider.useBackend()
   const { getText } = textProvider.useText()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const [userPermission, setUserPermission] = React.useState(initialUserPermission)
-  const isDisabled = isOnlyOwner && userPermission.user.userId === self.user.userId
+  const [permission, setPermission] = React.useState(initialPermission)
+  const permissionId = backendModule.getAssetPermissionId(permission)
+  const isDisabled = isOnlyOwner && permissionId === self.user.userId
   const assetTypeName = getText(ASSET_TYPE_TO_TEXT_ID[asset.type])
 
   React.useEffect(() => {
-    setUserPermission(initialUserPermission)
-  }, [initialUserPermission])
+    setPermission(initialPermission)
+  }, [initialPermission])
 
-  const doSetUserPermission = async (newUserPermissions: backendModule.UserPermission) => {
+  const doSetPermission = async (newPermission: backendModule.AssetPermission) => {
     try {
-      setUserPermission(newUserPermissions)
-      outerSetUserPermission(newUserPermissions)
+      setPermission(newPermission)
+      outerSetPermission(newPermission)
       await backend.createPermission({
-        actorsIds: [newUserPermissions.user.userId],
+        actorsIds: [backendModule.getAssetPermissionId(newPermission)],
         resourceId: asset.id,
-        action: newUserPermissions.permission,
+        action: newPermission.permission,
       })
     } catch (error) {
-      setUserPermission(userPermission)
-      outerSetUserPermission(userPermission)
-      toastAndLog('setPermissionsError', error, newUserPermissions.user.email)
+      setPermission(permission)
+      outerSetPermission(permission)
+      toastAndLog('setPermissionsError', error)
     }
   }
 
@@ -84,16 +85,16 @@ export default function UserPermission(props: UserPermissionProps) {
             isDisabled={isDisabled}
             error={isOnlyOwner ? getText('needsOwnerError', assetTypeName) : null}
             selfPermission={self.permission}
-            action={userPermission.permission}
+            action={permission.permission}
             assetType={asset.type}
             onChange={async permissions => {
-              await doSetUserPermission(object.merge(userPermission, { permission: permissions }))
+              await doSetPermission(object.merge(permission, { permission: permissions }))
             }}
             doDelete={() => {
-              doDelete(userPermission.user)
+              doDelete(backendModule.getAssetPermissionId(permission))
             }}
           />
-          <aria.Text className="text">{userPermission.user.name}</aria.Text>
+          <aria.Text className="text">{backendModule.getAssetPermissionName(permission)}</aria.Text>
         </div>
       )}
     </FocusArea>

@@ -58,7 +58,9 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
   const asset = item.item
   const setAsset = setAssetHooks.useSetAsset(asset, setItem)
   const ownPermission =
-    asset.permissions?.find(permission => permission.user.userId === user?.userId) ?? null
+    asset.permissions?.find(
+      backendModule.isUserPermissionAnd(permission => permission.user.userId === user?.userId)
+    ) ?? null
   // This is a workaround for a temporary bad state in the backend causing the `projectState` key
   // to be absent.
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

@@ -6,7 +6,7 @@ import type * as assetsTable from '#/layouts/AssetsTable'
 import * as columnUtils from '#/components/dashboard/column/columnUtils'
 import DocsColumn from '#/components/dashboard/column/DocsColumn'
 import LabelsColumn from '#/components/dashboard/column/LabelsColumn'
-import LastModifiedColumn from '#/components/dashboard/column/LastModifiedColumn'
+import ModifiedColumn from '#/components/dashboard/column/ModifiedColumn'
 import NameColumn from '#/components/dashboard/column/NameColumn'
 import PlaceholderColumn from '#/components/dashboard/column/PlaceholderColumn'
 import SharedWithColumn from '#/components/dashboard/column/SharedWithColumn'
@@ -55,7 +55,7 @@ export const COLUMN_RENDERER: Readonly<
   Record<columnUtils.Column, (props: AssetColumnProps) => React.JSX.Element>
 > = {
   [columnUtils.Column.name]: NameColumn,
-  [columnUtils.Column.modified]: LastModifiedColumn,
+  [columnUtils.Column.modified]: ModifiedColumn,
   [columnUtils.Column.sharedWith]: SharedWithColumn,
   [columnUtils.Column.labels]: LabelsColumn,
   [columnUtils.Column.accessedByProjects]: PlaceholderColumn,

@@ -22,7 +22,7 @@ import UnstyledButton from '#/components/UnstyledButton'
 
 import ManageLabelsModal from '#/modals/ManageLabelsModal'
 
-import type * as backendModule from '#/services/Backend'
+import * as backendModule from '#/services/Backend'
 
 import * as object from '#/utilities/object'
 import * as permissions from '#/utilities/permissions'
@@ -38,14 +38,14 @@ export default function LabelsColumn(props: column.AssetColumnProps) {
   const { category, labels, setQuery, deletedLabelNames, doCreateLabel } = state
   const { temporarilyAddedLabels, temporarilyRemovedLabels } = rowState
   const asset = item.item
-  const session = authProvider.useNonPartialUserSession()
+  const { user } = authProvider.useNonPartialUserSession()
   const { setModal, unsetModal } = modalProvider.useSetModal()
   const { backend } = backendProvider.useBackend()
   const { getText } = textProvider.useText()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
   const plusButtonRef = React.useRef<HTMLButtonElement>(null)
   const self = asset.permissions?.find(
-    permission => permission.user.userId === session.user?.userId
+    backendModule.isUserPermissionAnd(permission => permission.user.userId === user?.userId)
   )
   const managesThisAsset =
     category !== Category.trash &&

@@ -5,7 +5,11 @@ import type * as column from '#/components/dashboard/column'
 
 import * as dateTime from '#/utilities/dateTime'
 
+// ======================
+// === ModifiedColumn ===
+// ======================
+
 /** A column displaying the time at which the asset was last modified. */
-export default function LastModifiedColumn(props: column.AssetColumnProps) {
+export default function ModifiedColumn(props: column.AssetColumnProps) {
   return <>{dateTime.formatDateTime(new Date(props.item.item.modifiedAt))}</>
 }