Fix: Disable add user button if invite count exceeds 10 (#4585)

packages/frontend-2/components/invite/dialog/project/Project.vue

@@ -27,9 +27,22 @@
             @update:model-value="(value: InviteProjectItem) => (item.value = value)"
           />
         </template>
-        <FormButton color="subtle" :icon-left="PlusIcon" @click="addInviteItem">
-          Add another user
-        </FormButton>
+        <div>
+          <div
+            :key="`add-user-${fields.length}`"
+            v-tippy="disableAddUserButton ? 'You can only invite 10 users at once' : ''"
+            class="inline-block"
+          >
+            <FormButton
+              color="subtle"
+              :icon-left="PlusIcon"
+              :disabled="disableAddUserButton"
+              @click="addInviteItem"
+            >
+              Add another user
+            </FormButton>
+          </div>
+        </div>
       </div>
     </form>
     <p v-if="!isAdmin && isInWorkspace" class="text-foreground-2 text-body-2xs py-3">
@@ -103,6 +116,7 @@ const {
 
 const isInWorkspace = computed(() => !!props.project.workspaceId)
 const isAdmin = computed(() => props.project.workspace?.role === Roles.Workspace.Admin)
+const disableAddUserButton = computed(() => fields.value.length >= 10)
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',

packages/frontend-2/components/invite/dialog/project/Row.vue

@@ -98,14 +98,10 @@
           />
         </div>
       </div>
-      <CommonTextLink :class="showLabel && 'mt-7'">
-        <TrashIcon
-          v-if="showDelete"
-          class="size-4 text-foreground-2"
-          @click="$emit('remove')"
-        />
-        <div v-else class="size-4" />
+      <CommonTextLink v-if="showDelete" :class="showLabel && 'mt-7'">
+        <TrashIcon class="size-4 text-foreground-2" @click="$emit('remove')" />
       </CommonTextLink>
+      <div v-else class="size-4" />
     </div>
   </div>
 </template>

packages/frontend-2/components/invite/dialog/shared/SelectUsers.vue

@@ -54,9 +54,22 @@
           </CommonTextLink>
         </div>
       </div>
-      <FormButton color="subtle" :icon-left="PlusIcon" @click="addInviteItem">
-        Add another user
-      </FormButton>
+      <div>
+        <div
+          :key="`add-user-${fields.length}`"
+          v-tippy="disableAddUserButton ? 'You can only invite 10 users at once' : ''"
+          class="inline-block"
+        >
+          <FormButton
+            color="subtle"
+            :icon-left="PlusIcon"
+            :disabled="disableAddUserButton"
+            @click="addInviteItem"
+          >
+            Add another user
+          </FormButton>
+        </div>
+      </div>
     </div>
     <slot />
   </form>
@@ -91,6 +104,8 @@ const {
   remove: removeInvite
 } = useFieldArray<InviteWorkspaceItem>('fields')
 
+const disableAddUserButton = computed(() => fields.value.length >= 10)
+
 const addInviteItem = () => {
   pushInvite({
     ...emptyInviteWorkspaceItem,