Feat: Change server invite to new design

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

@@ -7,7 +7,7 @@
     :disabled-item-tooltip="
       !allowGuest ? 'The Guest role isn\'t enabled on the server' : ''
     "
-    name="serverRoles"
+    :name="name ?? 'serverRoles'"
     label="Role"
     :show-label="showLabel"
     class="min-w-[110px]"
@@ -75,7 +75,8 @@ const props = defineProps({
   allowAdmin: Boolean,
   allowArchived: Boolean,
   fullyControlValue: Boolean,
-  showLabel: Boolean
+  showLabel: Boolean,
+  name: String
 })
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)

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

@@ -124,7 +124,7 @@
         </MenuItems>
       </Transition>
     </Menu>
-    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
+    <InviteDialogServer v-model:open="showInviteDialog" />
     <SettingsDialog
       v-model:open="showSettingsDialog"
       v-model:target-menu-item="settingsDialogTarget"

packages/frontend-2/components/invite/dialog/Server.vue

@@ -0,0 +1,176 @@
+<template>
+  <LayoutDialog v-model:open="isOpen" max-width="md" :buttons="dialogButtons">
+    <template #header>Invite to Speckle</template>
+    <form @submit="onSubmit">
+      <div class="flex flex-col gap-y-5 text-foreground">
+        <div v-for="(item, index) in fields" :key="item.key" class="flex gap-x-3">
+          <div class="flex flex-col gap-y-3 flex-1">
+            <hr v-if="index !== 0" class="border-outline-3" />
+            <div class="flex flex-row gap-x-3 items-center">
+              <div class="flex-1">
+                <FormTextInput
+                  v-model="item.value.email"
+                  :name="`email-${item.key}`"
+                  color="foundation"
+                  placeholder="Email address"
+                  show-clear
+                  full-width
+                  use-label-in-errors
+                  show-label
+                  label="Email"
+                  :rules="[isEmail]"
+                />
+              </div>
+              <FormSelectServerRoles
+                v-if="allowServerRoleSelect"
+                v-model="item.value.serverRole"
+                label="Select role"
+                :name="`role-${item.key}`"
+                class="sm:w-48"
+                show-label
+                :disabled="anyMutationsLoading"
+                :allow-guest="isGuestMode"
+                :allow-admin="isAdmin"
+                mount-menu-on-body
+              />
+            </div>
+            <FormSelectProjects
+              v-model="item.value.project"
+              label="Select project"
+              class="w-full"
+              owned-only
+              show-optional
+              mount-menu-on-body
+              show-label
+              :name="`project-${index}`"
+            />
+          </div>
+          <div class="relative w-4">
+            <CommonTextLink
+              v-if="fields.length > 1"
+              class="top-10 absolute right-0"
+              :class="{ 'top-7': index === 0 }"
+              @click="removeInviteItem(index)"
+            >
+              <TrashIcon class="h-4 w-4 text-foreground-2" />
+            </CommonTextLink>
+          </div>
+        </div>
+        <FormButton
+          color="subtle"
+          :icon-left="PlusIcon"
+          :disabled="anyMutationsLoading"
+          @click="addInviteItem"
+        >
+          Invite another user
+        </FormButton>
+      </div>
+    </form>
+  </LayoutDialog>
+</template>
+<script setup lang="ts">
+import type { LayoutDialogButton } from '@speckle/ui-components'
+import { useMutationLoading } from '@vue/apollo-composable'
+import { useForm, useFieldArray } from 'vee-validate'
+import { useActiveUser } from '~~/lib/auth/composables/activeUser'
+import { useMixpanel } from '~~/lib/core/composables/mp'
+import { useServerInfo } from '~~/lib/core/composables/server'
+import { useInviteUserToProject } from '~~/lib/projects/composables/projectManagement'
+import { useInviteUserToServer } from '~~/lib/server/composables/invites'
+import { PlusIcon, TrashIcon } from '@heroicons/vue/24/outline'
+import type { InviteServerForm, InviteServerItem } from '~~/lib/invites/helpers/types'
+import { emptyInviteServerItem } from '~~/lib/invites/helpers/constants'
+import { isEmail } from '~~/lib/common/helpers/validation'
+
+const isOpen = defineModel<boolean>('open', { required: true })
+
+const { handleSubmit } = useForm<InviteServerForm>({
+  initialValues: {
+    fields: [
+      {
+        ...emptyInviteServerItem
+      }
+    ]
+  }
+})
+const {
+  fields,
+  replace: replaceFields,
+  push: pushInvite,
+  remove: removeInvite
+} = useFieldArray<InviteServerItem>('fields')
+const { mutate: inviteUserToServer } = useInviteUserToServer()
+const inviteUserToProject = useInviteUserToProject()
+const anyMutationsLoading = useMutationLoading()
+const { isAdmin } = useActiveUser()
+const { isGuestMode } = useServerInfo()
+const mixpanel = useMixpanel()
+
+const allowServerRoleSelect = computed(() => isAdmin.value || isGuestMode.value)
+const dialogButtons = computed((): LayoutDialogButton[] => [
+  {
+    text: 'Cancel',
+    props: { color: 'outline' },
+    onClick: () => {
+      isOpen.value = false
+    }
+  },
+  {
+    text: 'Invite',
+    props: {
+      submit: true,
+      disabled: anyMutationsLoading.value
+    },
+    onClick: onSubmit
+  }
+])
+
+const addInviteItem = () => {
+  pushInvite({ ...emptyInviteServerItem })
+}
+
+const removeInviteItem = (index: number) => {
+  removeInvite(index)
+}
+
+const onSubmit = handleSubmit(() => {
+  const invites = fields.value.filter((invite) => invite.value.email)
+
+  invites.forEach(async (invite) => {
+    invite.value.project
+      ? await inviteUserToProject(invite.value.project.id, [
+          {
+            email: invite.value.email,
+            serverRole: invite.value.serverRole
+          }
+        ])
+      : await inviteUserToServer([
+          {
+            email: invite.value.email,
+            serverRole: invite.value.serverRole
+          }
+        ])
+  })
+
+  mixpanel.track('Invite Action', {
+    type: 'server invite',
+    name: 'send',
+    multiple: fields.value.length !== 1,
+    count: fields.value.length,
+    hasProject: !!fields.value.some((invite) => invite.value.project),
+    to: 'email'
+  })
+
+  isOpen.value = false
+})
+
+watch(isOpen, (newVal, oldVal) => {
+  if (newVal && !oldVal) {
+    replaceFields([
+      {
+        ...emptyInviteServerItem
+      }
+    ])
+  }
+})
+</script>

packages/frontend-2/components/onboarding/checklist/v1.vue

@@ -213,7 +213,7 @@
     >
       <template #header>Your first upload</template>
     </OnboardingDialogFirstSend>
-    <SettingsServerUserInviteDialog
+    <InviteDialogServer
       v-model:open="showServerInviteDialog"
       @update:open="(v) => (!v ? markComplete(3) : '')"
     />

packages/frontend-2/components/settings/server/ActiveUsers.vue

@@ -98,7 +98,7 @@
       :user="userToModify"
     />
 
-    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
+    <InviteDialogServer v-model:open="showInviteDialog" />
   </div>
 </template>
 

packages/frontend-2/components/settings/server/PendingInvitations.vue

@@ -70,7 +70,7 @@
       @infinite="onInfiniteLoad"
     />
 
-    <SettingsServerUserInviteDialog v-model:open="showInviteDialog" />
+    <InviteDialogServer v-model:open="showInviteDialog" />
   </div>
 </template>
 

packages/frontend-2/components/singleton/ToastManager.vue

@@ -1,20 +1,20 @@
 <template>
   <Teleport to="#toast-portal">
-    <GlobalToastRenderer v-model:notification="notification" />
+    <GlobalToastRenderer v-model:notifications="notifications" @dismiss="dismiss" />
   </Teleport>
 </template>
 
 <script setup lang="ts">
 import { useGlobalToastManager } from '~~/lib/common/composables/toast'
 import { GlobalToastRenderer } from '@speckle/ui-components'
 
-const { currentNotification, dismiss } = useGlobalToastManager()
+const { currentNotifications, dismissAll, dismiss } = useGlobalToastManager()
 
-const notification = computed({
-  get: () => currentNotification.value,
+const notifications = computed({
+  get: () => currentNotifications.value,
   set: (newVal) => {
     if (!newVal) {
-      dismiss()
+      dismissAll()
     }
   }
 })