feat(fe): add legacy project card ctas

feat(fe): add legacy project card ctas

packages/frontend-2/components/projects/Dashboard.vue

@@ -2,7 +2,10 @@
   <div>
     <Portal to="primary-actions"></Portal>
     <div v-if="!showEmptyState" class="flex flex-col gap-4">
-      <ProjectsMoveToWorkspaceAlert v-if="isWorkspacesEnabled" />
+      <ProjectsMoveToWorkspaceAlert
+        v-if="isWorkspacesEnabled"
+        @move-project="(id) => onMoveProject(id)"
+      />
       <div class="flex items-center gap-2 mb-2">
         <Squares2X2Icon class="h-5 w-5" />
         <h1 class="text-heading-lg">Projects</h1>
@@ -61,7 +64,11 @@
       @create-project="openNewProject = true"
     />
     <template v-else-if="projects?.items?.length">
-      <ProjectsDashboardFilled :projects="projects" show-workspace-link />
+      <ProjectsDashboardFilled
+        :projects="projects"
+        show-workspace-link
+        @move-project="(id) => onMoveProject(id)"
+      />
       <InfiniteLoading
         :settings="{ identifier: infiniteLoaderId }"
         @infinite="infiniteLoad"
@@ -69,6 +76,11 @@
     </template>
     <CommonEmptySearchState v-else-if="!showLoadingBar" @clear-search="clearSearch" />
     <ProjectsAddDialog v-model:open="openNewProject" />
+    <WorkspaceMoveProjectManager
+      v-if="showMoveProjectDialog"
+      v-model:open="showMoveProjectDialog"
+      :project-id="emittedProjectId"
+    />
   </div>
 </template>
 
@@ -105,6 +117,8 @@ const selectedRoles = ref(undefined as Optional<StreamRoles[]>)
 const filterProjectsToMove = ref(false)
 const openNewProject = ref(false)
 const showLoadingBar = ref(false)
+const showMoveProjectDialog = ref(false)
+const emittedProjectId = ref('')
 const areQueriesLoading = useQueryLoading()
 const isWorkspacesEnabled = useIsWorkspacesEnabled()
 useUserProjectsUpdatedTracking()
@@ -180,6 +194,11 @@ const infiniteLoad = async (state: InfiniteLoaderState) => {
   }
 }
 
+const onMoveProject = (projectId: string) => {
+  emittedProjectId.value = projectId
+  showMoveProjectDialog.value = true
+}
+
 watch(search, (newVal) => {
   if (newVal) showLoadingBar.value = true
   else showLoadingBar.value = false

packages/frontend-2/components/projects/DashboardFilled.vue

@@ -6,6 +6,7 @@
         :project="project"
         :show-workspace-link="showWorkspaceLink"
         :workspace-page="workspacePage"
+        @move-project="$emit('moveProject', project.id)"
       />
     </div>
   </div>
@@ -19,6 +20,10 @@ import type {
   ProjectsDashboardFilledUserFragment
 } from '~~/lib/common/generated/gql/graphql'
 
+defineEmits<{
+  (e: 'moveProject', projectId: string): void
+}>()
+
 const props = defineProps<{
   projects: ProjectsDashboardFilledProjectFragment | ProjectsDashboardFilledUserFragment
   showWorkspaceLink?: boolean

packages/frontend-2/components/projects/MoveToWorkspaceAlert.vue

@@ -26,7 +26,7 @@
           </div>
 
           <div class="flex gap-2 mt-2 mb-3">
-            <FormButton @click="showMoveProjectDialog = true">
+            <FormButton @click="$emit('moveProject', projectId)">
               {{ projectId ? 'Move project' : 'Show projects to move' }}
             </FormButton>
             <FormButton
@@ -41,11 +41,6 @@
         </div>
       </div>
     </CommonCard>
-    <WorkspaceMoveProjectManager
-      v-if="showMoveProjectDialog"
-      v-model:open="showMoveProjectDialog"
-      :project-id="projectId"
-    />
   </div>
 </template>
 
@@ -53,9 +48,9 @@
 import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
 import { LearnMoreMoveProjectsUrl } from '~/lib/common/helpers/route'
 
+defineEmits(['moveProject'])
+
 defineProps<{
   projectId?: string
 }>()
-
-const showMoveProjectDialog = ref(false)
 </script>

packages/frontend-2/components/projects/ProjectDashboardCard.vue

@@ -4,9 +4,16 @@
       class="relative group flex flex-col items-stretch md:flex-row md:space-x-2 border border-outline-3 rounded-xl p-4 transition bg-foundation"
     >
       <div
-        class="w-full md:w-48 flex flex-col justify-between col-span-3 lg:col-span-1 mb-4 md:mb-0 flex-shrink-0 space-y-1 pl-2 pr-6 py-2"
+        class="w-full md:w-56 flex flex-col justify-between col-span-3 lg:col-span-1 mb-4 md:mb-0 flex-shrink-0 space-y-1 pl-2 pr-6 py-2"
       >
         <div class="flex flex-col">
+          <CommonBadge
+            v-if="!project.workspace?.id && isWorkspacesEnabled"
+            class="mb-2 max-w-max"
+            rounded
+          >
+            Project to move
+          </CommonBadge>
           <NuxtLink
             :to="projectRoute(project.id)"
             class="break-words hover:text-primary text-heading mb-2"
@@ -43,16 +50,28 @@
               {{ project.workspace.name }}
             </p>
           </NuxtLink>
-          <FormButton
-            :to="allProjectModelsRoute(project.id) + '/'"
-            size="sm"
-            color="outline"
-            :icon-right="ChevronRightIcon"
-          >
-            {{
-              `${modelItemTotalCount} ${modelItemTotalCount === 1 ? 'model' : 'models'}`
-            }}
-          </FormButton>
+          <div class="flex gap-2">
+            <FormButton
+              :to="allProjectModelsRoute(project.id) + '/'"
+              size="sm"
+              color="outline"
+              :icon-right="ChevronRightIcon"
+            >
+              {{
+                `${modelItemTotalCount} ${
+                  modelItemTotalCount === 1 ? 'model' : 'models'
+                }`
+              }}
+            </FormButton>
+            <FormButton
+              v-if="!project.workspace?.id && isWorkspacesEnabled"
+              size="sm"
+              color="outline"
+              @click="$emit('moveProject', project.id)"
+            >
+              Move project...
+            </FormButton>
+          </div>
         </div>
       </div>
       <div :class="gridClasses">
@@ -100,6 +119,10 @@ import { ChevronRightIcon } from '@heroicons/vue/20/solid'
 import { workspaceRoute } from '~/lib/common/helpers/route'
 import { RoleInfo, type StreamRoles } from '@speckle/shared'
 
+defineEmits<{
+  moveProject: [projectId: string]
+}>()
+
 const props = defineProps<{
   project: ProjectDashboardItemFragment
   showWorkspaceLink?: boolean

packages/frontend-2/pages/projects/[id]/index.vue

@@ -10,6 +10,7 @@
       <ProjectsMoveToWorkspaceAlert
         v-if="isWorkspacesEnabled && !project.workspace"
         :project-id="project.id"
+        @move-project="onMoveProject"
       />
 
       <div
@@ -62,11 +63,11 @@
       </LayoutTabsHorizontal>
     </div>
 
-    <ProjectsMoveToWorkspaceDialog
+    <WorkspaceMoveProjectManager
       v-if="project"
       v-model:open="showMoveDialog"
-      :project="project"
       event-source="project-page"
+      :project-id="project.id"
     />
   </div>
 </template>
@@ -315,4 +316,8 @@ const onActionChosen = (params: { item: LayoutMenuItem; event: MouseEvent }) =>
       break
   }
 }
+
+const onMoveProject = () => {
+  showMoveDialog.value = true
+}
 </script>