Merge branch 'main' of github.com:specklesystems/speckle-server

packages/frontend-2/components/common/model/Select.vue

@@ -8,6 +8,8 @@
     :multiple="multiple"
     :disabled="!items.length"
     :allow-unset="allowUnset"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #nothing-selected>
@@ -113,6 +115,8 @@ const { result, onResult, fetchMore } = useQuery(
   })
 )
 
+const buttonId = useId()
+const labelId = useId()
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
 

packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue

@@ -31,6 +31,8 @@
           :rules="[isItemSelected]"
           show-label
           :items="applicationScopes"
+          :label-id="badgesLabelId"
+          :button-id="badgesButtonId"
           by="id"
         />
         <FormTextInput
@@ -95,6 +97,8 @@ const { mutate: editApplication } = useMutation(editApplicationMutation)
 const { triggerNotification } = useGlobalToast()
 const { handleSubmit, resetForm } = useForm<ApplicationFormValues>()
 
+const badgesLabelId = useId()
+const badgesButtonId = useId()
 const name = ref('')
 const scopes = ref<typeof applicationScopes.value>([])
 const redirectUrl = ref('')

packages/frontend-2/components/developer-settings/CreateTokenDialog.vue

@@ -30,6 +30,8 @@
           show-label
           :items="apiTokenScopes"
           mount-menu-on-body
+          :label-id="badgesLabelId"
+          :button-id="badgesButtonId"
           by="id"
         />
       </div>
@@ -62,6 +64,8 @@ const { handleSubmit } = useForm<TokenFormValues>()
 
 const isOpen = defineModel<boolean>('open', { required: true })
 
+const badgesLabelId = useId()
+const badgesButtonId = useId()
 const name = ref('')
 const scopes = ref<typeof apiTokenScopes.value>([])
 

packages/frontend-2/components/form/select/ProjectRoles.vue

@@ -7,6 +7,8 @@
     name="projectRoles"
     label="Project roles"
     class="min-w-[150px]"
+    :label-id="labelId"
+    :button-id="buttonId"
   >
     <template #nothing-selected>
       {{ multiple ? 'Select roles' : 'Select role' }}
@@ -59,6 +61,8 @@ const props = defineProps<{
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
+const labelId = useId()
+const buttonId = useId()
 
 const { selectedValue, isArrayValue, isMultiItemArrayValue, hiddenSelectedItemCount } =
   useFormSelectChildInternals<StreamRoles>({

packages/frontend-2/components/form/select/Projects.vue

@@ -8,6 +8,8 @@
     :label="label"
     :show-label="showLabel"
     :name="name || 'projects'"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #nothing-selected>
@@ -128,6 +130,8 @@ const props = defineProps({
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
+const labelId = useId()
+const buttonId = useId()
 
 const { selectedValue, hiddenSelectedItemCount, isArrayValue, isMultiItemArrayValue } =
   useFormSelectChildInternals<FormSelectProjects_ProjectFragment>({

packages/frontend-2/components/form/select/ServerRoles.vue

@@ -8,6 +8,8 @@
     label="Server roles"
     class="min-w-[110px]"
     :fully-control-value="fullyControlValue"
+    :label-id="labelId"
+    :button-id="buttonId"
   >
     <template #nothing-selected>
       {{ multiple ? 'Select roles' : 'Select role' }}
@@ -67,6 +69,8 @@ const props = defineProps({
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
+const labelId = useId()
+const buttonId = useId()
 
 const { selectedValue, isMultiItemArrayValue, hiddenSelectedItemCount, firstItem } =
   useFormSelectChildInternals<ServerRoles>({

packages/frontend-2/components/form/select/Users.vue

@@ -9,6 +9,8 @@
     :label="label"
     :show-label="showLabel"
     :name="name || 'users'"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #nothing-selected>
@@ -138,6 +140,8 @@ const props = defineProps({
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
+const labelId = useId()
+const buttonId = useId()
 
 const { selectedValue, hiddenSelectedItemCount, isArrayValue, isMultiItemArrayValue } =
   useFormSelectChildInternals<FormUsersSelectItemFragment>({

packages/frontend-2/components/header/NavNotifications.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="hasNotifications">
     <Menu as="div" class="flex items-center">
-      <MenuButton v-slot="{ open: menuOpen }" as="div">
+      <MenuButton :id="menuButtonId" v-slot="{ open: menuOpen }" as="div">
         <div class="cursor-pointer">
           <span class="sr-only">Open notifications menu</span>
           <div class="relative">
@@ -50,6 +50,7 @@ import { XMarkIcon, BellIcon } from '@heroicons/vue/24/outline'
 import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 
 const { activeUser } = useActiveUser()
+const menuButtonId = useId()
 
 const hasNotifications = computed(() => {
   if (!activeUser.value) return false

packages/frontend-2/components/header/NavShare.vue

@@ -3,7 +3,7 @@
     as="div"
     class="flex items-center relative sm:border-r border-outline-1 sm:pr-4"
   >
-    <MenuButton as="div">
+    <MenuButton :id="menuButtonId" as="div">
       <FormButton
         class="hidden sm:flex"
         size="sm"
@@ -101,6 +101,7 @@ const props = defineProps<{
 
 const { copy } = useClipboard()
 const copyModelLink = useCopyModelLink()
+const menuButtonId = useId()
 
 const embedDialogOpen = ref(false)
 

packages/frontend-2/components/header/NavUserMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Menu as="div" class="flex items-center">
-      <MenuButton v-slot="{ open: userOpen }">
+      <MenuButton :id="menuButtonId" v-slot="{ open: userOpen }">
         <span class="sr-only">Open user menu</span>
         <UserAvatar v-if="!userOpen" size="lg" :user="activeUser" hover-effect />
         <UserAvatar v-else size="lg" hover-effect>
@@ -163,6 +163,7 @@ const route = useRoute()
 
 const showInviteDialog = ref(false)
 const showProfileEditDialog = ref(false)
+const menuButtonId = useId()
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 const version = computed(() => serverInfo.value?.version)

packages/frontend-2/components/project/CommentPermissionsSelect.vue

@@ -7,6 +7,8 @@
     :name="name || 'commentPermissions'"
     :allow-unset="false"
     :disabled="disabled"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #something-selected="{ value }">
@@ -41,6 +43,8 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
+const labelId = useId()
+const buttonId = useId()
 const items = ref(commentPermissionsSelectItems)
 
 const selectedValue = computed({

packages/frontend-2/components/project/VisibilitySelect.vue

@@ -7,6 +7,8 @@
     :name="name || 'visibility'"
     :allow-unset="false"
     :disabled="disabled"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #something-selected="{ value }">
@@ -44,6 +46,8 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
+const labelId = useId()
+const buttonId = useId()
 const items = ref<
   Record<
     ProjectVisibility,

packages/frontend-2/components/project/page/discussions/Header.vue

@@ -4,6 +4,7 @@
       <h1 class="block h4 font-bold">Discussions</h1>
       <div class="space-x-2 flex items-center">
         <FormCheckbox
+          :id="checkboxId"
           v-model="finalIncludeArchived"
           name="includeArchived"
           :value="true"
@@ -47,4 +48,6 @@ const finalIncludeArchived = computed({
   get: () => props.includeArchived,
   set: (newVal) => emit('update:include-archived', newVal)
 })
+
+const checkboxId = useId()
 </script>

packages/frontend-2/components/project/page/discussions/Tab.vue

@@ -17,16 +17,9 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable'
 import type { Optional } from '~~/../shared/dist-esm'
-import {
-  useGeneralProjectPageUpdateTracking,
-  useProjectPageItemViewType
-} from '~~/lib/projects/composables/projectPages'
+import { useProjectPageItemViewType } from '~~/lib/projects/composables/projectPages'
 import { projectDiscussionsPageQuery } from '~~/lib/projects/graphql/queries'
 
-definePageMeta({
-  middleware: ['require-valid-project']
-})
-
 const gridOrList = useProjectPageItemViewType('Discussions')
 const includeArchived = ref(undefined as Optional<true>)
 
@@ -35,7 +28,6 @@ const projectId = computed(() => route.params.id as string)
 const { result } = useQuery(projectDiscussionsPageQuery, () => ({
   projectId: projectId.value
 }))
-useGeneralProjectPageUpdateTracking({ projectId })
 
 const project = computed(() => result.value?.project)
 </script>

packages/frontend-2/components/project/page/models/Actions.vue

@@ -3,6 +3,7 @@
   <div>
     <LayoutMenu
       v-model:open="showActionsMenu"
+      :menu-id="menuId"
       :items="actionsItems"
       @click.stop.prevent
       @chosen="onActionChosen"
@@ -89,6 +90,7 @@ const props = defineProps<{
 
 const copyModelLink = useCopyModelLink()
 const { copy } = useClipboard()
+const menuId = useId()
 
 const showActionsMenu = ref(false)
 const openDialog = ref(null as Nullable<ActionTypes>)

packages/frontend-2/components/project/page/models/Header.vue

@@ -62,6 +62,8 @@
               class="grow shrink sm:w-[120px] md:w-44"
               clearable
               fixed-height
+              :label-id="sourceAppsLabelId"
+              :button-id="sourceAppsBtnId"
             />
             <LayoutGridListToggle v-model="finalGridOrList" class="shrink-0" />
           </div>
@@ -135,6 +137,8 @@ const props = defineProps<{
 }>()
 
 const localSearch = ref('')
+const sourceAppsLabelId = useId()
+const sourceAppsBtnId = useId()
 
 const mp = useMixpanel()
 const trackFederateAll = () =>

packages/frontend-2/components/project/page/models/Tab.vue

@@ -28,14 +28,7 @@ import { useQuery } from '@vue/apollo-composable'
 import type { SourceAppDefinition } from '@speckle/shared'
 import type { FormUsersSelectItemFragment } from '~~/lib/common/generated/gql/graphql'
 import { projectModelsPageQuery } from '~~/lib/projects/graphql/queries'
-import {
-  useGeneralProjectPageUpdateTracking,
-  useProjectPageItemViewType
-} from '~~/lib/projects/composables/projectPages'
-
-definePageMeta({
-  middleware: ['require-valid-project']
-})
+import { useProjectPageItemViewType } from '~~/lib/projects/composables/projectPages'
 
 const route = useRoute()
 const projectId = computed(() => route.params.id as string)
@@ -51,7 +44,6 @@ const { result } = useQuery(projectModelsPageQuery, () => ({
 }))
 
 const project = computed(() => result.value?.project)
-useGeneralProjectPageUpdateTracking({ projectId })
 
 const clearSearch = () => {
   search.value = ''

packages/frontend-2/components/project/page/team/PermissionSelect.vue

@@ -8,6 +8,8 @@
     :name="name || 'role'"
     :allow-unset="false"
     :disabled="disabled"
+    :label-id="labelId"
+    :button-id="buttonId"
     hide-checkmarks
     by="id"
     class="min-w-[85px]"
@@ -54,6 +56,8 @@ const props = defineProps<{
   hideOwner?: boolean
 }>()
 
+const labelId = useId()
+const buttonId = useId()
 const items = ref(
   reduce(
     roleSelectItems,

packages/frontend-2/components/project/webhooks-page/CreateOrEditDialog.vue

@@ -49,6 +49,8 @@
           :rules="[isItemSelected]"
           show-label
           :items="webhookTriggerItems"
+          :label-id="badgesLabelId"
+          :button-id="badgesButtonId"
           by="id"
         />
       </div>
@@ -100,6 +102,8 @@ const triggers = ref<typeof webhookTriggerItems.value>([])
 const url = ref('')
 const description = ref('')
 const secret = ref('')
+const badgesLabelId = useId()
+const badgesButtonId = useId()
 
 const webhookTriggerItems = computed(() => {
   return Object.values(WebhookTriggers).map((value) => ({