feat(fe2): move settings to tab on projects page

packages/frontend-2/components/common/EditableTitleDescription.vue

@@ -27,7 +27,7 @@
         </div>
       </label>
       <PencilIcon
-        v-if="canEdit"
+        v-if="canEdit && !isDisabled"
         class="shrink-0 ml-2 mt-3 w-4 h-4 opacity-0 group-hover:opacity-100 transition text-foreground-2"
       />
     </div>
@@ -65,7 +65,7 @@
       </label>
       <div class="shrink-0 ml-2 mt-1 text-foreground-2">
         <PencilIcon
-          v-if="canEdit"
+          v-if="canEdit && !isDisabled"
           class="w-4 h-4 opacity-0 group-hover:opacity-100 transition text-foreground-2"
         />
       </div>

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

@@ -10,6 +10,7 @@
     :fully-control-value="fullyControlValue"
     :label-id="labelId"
     :button-id="buttonId"
+    mount-menu-on-body
   >
     <template #nothing-selected>
       {{ multiple ? 'Select roles' : 'Select role' }}

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

@@ -66,7 +66,7 @@ const items = ref<
   },
   [ProjectVisibility.Private]: {
     id: ProjectVisibility.Private,
-    description: 'Only team members will have access',
+    description: 'Only invited collaborators can access',
     title: 'Private'
   }
 })

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

@@ -16,7 +16,7 @@
       :title="titleState"
       :description="descriptionState"
       :can-edit="canEdit"
-      :is-disabled="anyMutationsLoading"
+      :is-disabled="canEdit || anyMutationsLoading"
       @update:title="handleUpdateTitle"
       @update:description="handleUpdateDescription"
     />

packages/frontend-2/components/project/model-page/dialog/MoveTo.vue

@@ -8,32 +8,38 @@
       Move {{ versions.length }} version{{ versions.length > 1 ? 's' : '' }}
     </template>
     <div class="flex flex-col space-y-4">
-      <LayoutTabs v-slot="{ activeItem }" :items="tabItems">
-        <ProjectModelPageDialogMoveToExistingTab
-          v-if="activeItem.id === 'existing-model'"
-          :versions="versions"
-          :project-id="projectId"
-          :disabled="loading"
-          :model-id="modelId"
-          @model-selected="onMove"
-        />
-        <ProjectModelPageDialogMoveToNewTab
-          v-else
-          :project-id="projectId"
-          :versions="versions"
-          :disabled="loading"
-          @model-selected="onMove($event, true)"
-        />
-      </LayoutTabs>
+      <LayoutTabsHoriztonal v-model:active-item="activeTab" :items="tabItems">
+        <template #default="{ activeItem }">
+          <div class="min-h-40">
+            <ProjectModelPageDialogMoveToExistingTab
+              v-if="activeItem.id === 'existing-model'"
+              :versions="versions"
+              :project-id="projectId"
+              :disabled="loading"
+              :model-id="modelId"
+              @model-selected="onMove"
+            />
+            <ProjectModelPageDialogMoveToNewTab
+              v-else-if="activeItem.id === 'new-model'"
+              :project-id="projectId"
+              :versions="versions"
+              :disabled="loading"
+              @model-selected="onMove($event, true)"
+            />
+          </div>
+        </template>
+      </LayoutTabsHoriztonal>
     </div>
   </LayoutDialog>
 </template>
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import { graphql } from '~~/lib/common/generated/gql'
 import type { ProjectModelPageDialogMoveToVersionFragment } from '~~/lib/common/generated/gql/graphql'
 import { useMixpanel } from '~~/lib/core/composables/mp'
-import type { LayoutTabItem } from '~~/lib/layout/helpers/components'
 import { useMoveVersions } from '~~/lib/projects/composables/versionManagement'
+import { LayoutTabsHoriztonal } from '@speckle/ui-components'
+import type { LayoutPageTabItem } from '@speckle/ui-components'
 
 graphql(`
   fragment ProjectModelPageDialogMoveToVersion on Version {
@@ -55,28 +61,35 @@ const props = defineProps<{
 }>()
 
 const moveVersions = useMoveVersions()
-
+const mp = useMixpanel()
 const loading = ref(false)
-const tabItems = ref<LayoutTabItem[]>([
+
+// Define tab items
+const tabItems = ref<LayoutPageTabItem[]>([
   { title: 'Existing model', id: 'existing-model' },
   { title: 'New model', id: 'new-model' }
 ])
 
+// Manage active tab state
+const activeTab = ref(tabItems.value[0])
+
 const isOpen = computed({
   get: () => props.open,
-  set: (newVal) => emit('update:open', newVal)
+  set: (value) => emit('update:open', value)
 })
 
-const mp = useMixpanel()
-
 const onMove = async (targetModelName: string, newModelCreated?: boolean) => {
   loading.value = true
   const success = await moveVersions(
     {
       versionIds: props.versions.map((v) => v.id),
       targetModelName
     },
-    { previousModelId: props.modelId, newModelCreated, projectId: props.projectId }
+    {
+      previousModelId: props.modelId,
+      newModelCreated,
+      projectId: props.projectId
+    }
   )
   loading.value = false
   mp.track('Commit Action', {

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

@@ -11,7 +11,7 @@
       :title="titleState"
       :description="descriptionState"
       :can-edit="canEdit"
-      :is-disabled="anyMutationsLoading"
+      :is-disabled="canEdit || anyMutationsLoading"
       @update:title="handleUpdateTitle"
       @update:description="handleUpdateDescription"
     />

packages/frontend-2/components/project/page/team/dialog/InviteUser.vue → packages/frontend-2/components/project/page/InviteDialog.vue

@@ -1,25 +1,28 @@
 <template>
-  <LayoutDialogSection
-    allow-overflow
-    border-b
-    border-t
-    title="Invite"
-    :always-open="defaultOpen"
-  >
-    <template #icon>
-      <UserPlusIcon class="h-full w-full" />
-    </template>
+  <LayoutDialog v-model:open="isOpen" max-width="md" :buttons="dialogButtons">
+    <template #header>Invite to Project</template>
     <div class="flex flex-col mt-2">
       <FormTextInput
         v-model="search"
         name="search"
         size="lg"
         placeholder="Search"
-        help="Search by username or email"
+        :disabled="disabled"
+        :help="
+          disabled
+            ? 'You must be the project owner to invite users'
+            : 'Search by username or email'
+        "
         input-classes="pr-[85px] text-sm"
+        color="foundation"
+        label="Add people by email or username"
+        show-label
       >
         <template #input-right>
-          <div class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <div
+            class="absolute inset-y-0 right-0 flex items-center pr-2"
+            :class="disabled ? 'pointer-events-none' : ''"
+          >
             <ProjectPageTeamPermissionSelect v-model="role" hide-remove />
           </div>
         </template>
@@ -48,34 +51,43 @@
         />
       </div>
     </div>
-  </LayoutDialogSection>
+  </LayoutDialog>
 </template>
 <script setup lang="ts">
 import { Roles } from '@speckle/shared'
 import type { ServerRoles, StreamRoles } from '@speckle/shared'
-import { LayoutDialogSection } from '@speckle/ui-components'
 import { useUserSearch } from '~~/lib/common/composables/users'
 import type { UserSearchItem } from '~~/lib/common/composables/users'
 import type {
   ProjectInviteCreateInput,
-  ProjectPageTeamDialogFragment
+  ProjectPageInviteDialog_ProjectFragment
 } from '~~/lib/common/generated/gql/graphql'
 import type { SetFullyRequired } from '~~/lib/common/helpers/type'
 import { isEmail } from '~~/lib/common/helpers/validation'
 import { isArray, isString } from 'lodash-es'
 import { useInviteUserToProject } from '~~/lib/projects/composables/projectManagement'
-import { useTeamDialogInternals } from '~~/lib/projects/composables/team'
-import { UserPlusIcon } from '@heroicons/vue/24/outline'
+import { useTeamInternals } from '~~/lib/projects/composables/team'
 import { useMixpanel } from '~~/lib/core/composables/mp'
 import { useServerInfo } from '~~/lib/core/composables/server'
+import { graphql } from '~/lib/common/generated/gql/gql'
+
+graphql(`
+  fragment ProjectPageInviteDialog_Project on Project {
+    id
+    ...ProjectPageTeamInternals_Project
+  }
+`)
 
 type InvitableUser = UserSearchItem | string
 
 const props = defineProps<{
-  project: ProjectPageTeamDialogFragment
-  defaultOpen: boolean
+  projectId: string
+  project?: ProjectPageInviteDialog_ProjectFragment
+  disabled?: boolean
 }>()
 
+const isOpen = defineModel<boolean>('open', { required: true })
+
 const loading = ref(false)
 const search = ref('')
 const role = ref<StreamRoles>(Roles.Stream.Contributor)
@@ -88,9 +100,22 @@ const { userSearch, searchVariables } = useUserSearch({
     limit: 5
   }))
 })
-const { collaboratorListItems } = useTeamDialogInternals({
-  props: toRefs(props)
-})
+
+const projectId = computed(() => props.projectId as string)
+
+const projectData = computed(() => props.project)
+
+const { collaboratorListItems } = useTeamInternals(projectData)
+
+const dialogButtons = computed(() => [
+  {
+    text: 'Cancel',
+    props: { color: 'secondary', fullWidth: true },
+    onClick: () => {
+      isOpen.value = false
+    }
+  }
+])
 
 const selectedEmails = computed(() => {
   const query = searchVariables.value?.query || ''
@@ -150,7 +175,7 @@ const onInviteUser = async (
 
   // Invite email
   loading.value = true
-  await createInvite(props.project.id, inputs)
+  await createInvite(projectId.value, inputs)
 
   mp.track('Invite Action', {
     type: 'project invite',

packages/frontend-2/components/project/page/StatsBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-foundation rounded-lg p-4 sm:px-6">
+  <div class="bg-foundation rounded-lg p-4 border border-outline-3">
     <div class="flex flex-col">
       <div class="text-foreground-2 mb-2">
         <slot name="top" />