Fix: Update connectors page (#4130)

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

@@ -31,7 +31,7 @@
           v-bind="button.props || {}"
           :disabled="button.props?.disabled || button.disabled"
           :submit="button.props?.submit || button.submit"
-          target="_blank"
+          :target="`${isExternalRoute ? '_blank' : '_self'}`"
           external
           size="sm"
           color="outline"
@@ -47,10 +47,16 @@
 <script lang="ts" setup>
 import type { LayoutDialogButton } from '@speckle/ui-components'
 
-defineProps<{
-  title?: string
-  description?: string
-  buttons?: LayoutDialogButton[]
-  badge?: string
-}>()
+withDefaults(
+  defineProps<{
+    title?: string
+    isExternalRoute?: boolean
+    description?: string
+    buttons?: LayoutDialogButton[]
+    badge?: string
+  }>(),
+  {
+    isExternalRoute: false
+  }
+)
 </script>

packages/frontend-2/components/connectors/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <NuxtLink :to="connector.url" target="_blank" class="flex" @click="handleClick">
+  <div>
     <CommonCard
       class="flex flex-1 flex-col gap-1 !p-4 !pt-2 !pb-3 hover:border-outline-2"
     >
@@ -10,19 +10,59 @@
           :alt="`${connector.title} logo`"
           class="w-[48px] -ml-1"
         />
-        <h2 class="text-body-xs text-foreground font-medium">
-          {{ connector.title }}
-        </h2>
+        <div class="flex flex-col gap-y-1.5">
+          <p
+            v-if="connector.isComingSoon"
+            class="text-body-3xs text-foreground-2 leading-none"
+          >
+            Coming soon
+          </p>
+          <h2 class="text-body-xs text-foreground font-medium leading-none">
+            {{ connector.title }}
+          </h2>
+        </div>
       </div>
-      <p class="text-body-2xs text-foreground-2 line-clamp-5 leading-5">
+      <p class="text-body-2xs text-foreground-2 line-clamp-2 leading-5">
         {{ connector.description }}
       </p>
+      <div class="space-x-2 mt-2">
+        <FormButton
+          color="outline"
+          size="sm"
+          :disabled="isLoadingVersions"
+          external
+          :to="latestAvailableVersion?.Url"
+          @click="
+            mixpanel.track('Connector Card Install Clicked', {
+              connector: props.connector.slug
+            })
+          "
+        >
+          {{ connector.isComingSoon ? 'Coming soon' : 'Install' }}
+        </FormButton>
+        <FormButton
+          v-if="connector.url"
+          color="outline"
+          size="sm"
+          text
+          target="_blank"
+          external
+          :to="connector.url"
+          @click="
+            mixpanel.track('Connector Card Documentation Clicked', {
+              connector: props.connector.slug
+            })
+          "
+        >
+          Documentation
+        </FormButton>
+      </div>
     </CommonCard>
-  </NuxtLink>
+  </div>
 </template>
 
 <script setup lang="ts">
-import type { ConnectorItem } from '~~/lib/dashboard/helpers/types'
+import type { ConnectorItem, Version, Versions } from '~~/lib/dashboard/helpers/types'
 import { useMixpanel } from '~/lib/core/composables/mp'
 
 const props = defineProps<{
@@ -31,10 +71,31 @@ const props = defineProps<{
 
 const mixpanel = useMixpanel()
 
-const handleClick = () => {
-  mixpanel.track('Connector Card Clicked', {
-    connector: props.connector.title,
-    url: props.connector.url
+const versions = ref<Version[]>([])
+const latestAvailableVersion = ref<Version | null>(null)
+const isLoadingVersions = ref(true)
+
+const getVersions = async () => {
+  const response = await fetch(
+    `https://releases.speckle.dev/manager2/feeds/${props.connector.slug}-v3.json`,
+    {
+      method: 'GET'
+    }
+  )
+
+  if (!response.ok) {
+    throw new Error('Failed to fetch versions')
+  }
+
+  const data = (await response.json()) as unknown as Versions
+  const sortedVersions = data.Versions.sort(function (a: Version, b: Version) {
+    return new Date(b.Date).getTime() - new Date(a.Date).getTime()
   })
+  versions.value = sortedVersions
+  latestAvailableVersion.value = sortedVersions[0]
+
+  isLoadingVersions.value = false
 }
+
+void getVersions()
 </script>

packages/frontend-2/components/connectors/Page.vue

@@ -10,6 +10,15 @@
           <p class="text-body-sm text-foreground-2">
             Extract and exchange data between the most popular AEC applications using
             our tailored connectors.
+            <span class="italic">
+              Looking for V2 connectors? Get them
+              <NuxtLink
+                class="text-foreground hover:text-primary"
+                to="https://releases.speckle.systems"
+              >
+                here.
+              </NuxtLink>
+            </span>
           </p>
         </div>
       </section>
@@ -48,7 +57,7 @@
             </template>
           </FormSelectBase>
         </div>
-        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
           <ConnectorsCard
             v-for="connector in filteredConnectors"
             :key="connector.title"

packages/frontend-2/components/dashboard/Page.vue

@@ -15,16 +15,21 @@
       <div class="flex flex-col-reverse lg:flex-col gap-y-12">
         <section>
           <h2 class="text-heading-sm text-foreground-2">Quickstart</h2>
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 pt-5">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-3 pt-5">
             <CommonCard
               v-for="quickStartItem in quickStartItems"
               :key="quickStartItem.title"
               :title="quickStartItem.title"
               :description="quickStartItem.description"
               :buttons="quickStartItem.buttons"
+              :is-external-route="quickStartItem.isExternalRoute"
             />
           </div>
         </section>
+        <!-- <section>
+          <h2 class="text-heading-sm text-foreground-2">Connectors</h2>
+
+        </section> -->
         <section>
           <div class="flex items-center justify-between">
             <h2 class="text-heading-sm text-foreground-2">Recently updated projects</h2>
@@ -81,23 +86,24 @@ import {
 } from '~~/lib/dashboard/graphql/queries'
 import type { QuickStartItem } from '~~/lib/dashboard/helpers/types'
 import { useQuery } from '@vue/apollo-composable'
-import { useMixpanel } from '~~/lib/core/composables/mp'
+// import { useMixpanel } from '~~/lib/core/composables/mp'
 import {
   docsPageUrl,
   forumPageUrl,
   homeRoute,
+  connectorsRoute,
   projectsRoute,
   tutorialsRoute
 } from '~~/lib/common/helpers/route'
-import type { ManagerExtension } from '~~/lib/common/utils/downloadManager'
-import { downloadManager } from '~~/lib/common/utils/downloadManager'
-import { ToastNotificationType, useGlobalToast } from '~~/lib/common/composables/toast'
+// import type { ManagerExtension } from '~~/lib/common/utils/downloadManager'
+// import { downloadManager } from '~~/lib/common/utils/downloadManager'
+// import { ToastNotificationType, useGlobalToast } from '~~/lib/common/composables/toast'
 import type { LayoutDialogButton } from '@speckle/ui-components'
 import type { PromoBanner } from '~/lib/promo-banners/types'
 import { tutorialItems } from '~/lib/dashboard/helpers/tutorials'
 import { useUserProjectsUpdatedTracking } from '~~/lib/user/composables/projectUpdates'
 
-const mixpanel = useMixpanel()
+// const mixpanel = useMixpanel()
 const isWorkspacesEnabled = useIsWorkspacesEnabled()
 const { result: projectsResult } = useQuery(dashboardProjectsPageQuery)
 const { result: workspacesResult } = useQuery(
@@ -107,7 +113,7 @@ const { result: workspacesResult } = useQuery(
     enabled: isWorkspacesEnabled.value
   })
 )
-const { triggerNotification } = useGlobalToast()
+// const { triggerNotification } = useGlobalToast()
 const { isGuest } = useActiveUser()
 const router = useRouter()
 useUserProjectsUpdatedTracking()
@@ -116,18 +122,16 @@ const promoBanners = ref<PromoBanner[]>()
 const openNewProject = ref(false)
 const quickStartItems = shallowRef<QuickStartItem[]>([
   {
-    title: 'Install Speckle manager',
-    description: 'Use our Manager to install and manage Connectors with ease.',
+    title: 'Install Connectors',
+    description:
+      'Extract and exchange data in real time between the most popular AEC applications using our tailored connectors.',
     buttons: [
       {
-        text: 'Download for Windows',
-        onClick: () => onDownloadManager('exe')
-      },
-      {
-        text: 'Download for Mac',
-        onClick: () => onDownloadManager('dmg')
+        text: 'Install connectors',
+        props: { to: connectorsRoute }
       }
-    ]
+    ],
+    isExternalRoute: false
   },
   {
     title: "Don't know where to start?",
@@ -161,19 +165,4 @@ const createProjectButton = shallowRef<LayoutDialogButton[]>([
 
 const projects = computed(() => projectsResult.value?.activeUser?.projects.items)
 const hasProjects = computed(() => (projects.value ? projects.value.length > 0 : false))
-
-const onDownloadManager = (extension: ManagerExtension) => {
-  try {
-    downloadManager(extension)
-
-    mixpanel.track('Manager Download', {
-      os: extension === 'exe' ? 'win' : 'mac'
-    })
-  } catch {
-    triggerNotification({
-      type: ToastNotificationType.Danger,
-      title: 'Download failed'
-    })
-  }
-}
 </script>

packages/frontend-2/lib/dashboard/helpers/connectors.ts

@@ -12,9 +12,11 @@ export const connectorCategories = Object.freeze(<const>{
   [ConnectorCategory.BIM]: 'BIM'
 })
 
+// `NEW CONNECTOR CHECK` (note this is a comment oguzhan will use to find the hardcoded slugs again)
 export const connectorItems: ConnectorItem[] = [
   {
     title: 'Revit',
+    slug: 'revit',
     description:
       'Extract BIM data for further processing and visualisation, or dynamically create models from other CAD applications using Speckle for Revit! Supports Revit 2020 to 2025.',
     url: 'https://www.speckle.systems/connectors/revit',
@@ -23,30 +25,16 @@ export const connectorItems: ConnectorItem[] = [
   },
   {
     title: 'Rhino',
+    slug: 'rhino',
     description:
       'From sending and receiving geometry to scaffolding BIM models from simple geometry: Speckle for Rhino is here to help. Supports versions 6, 7 and 8 on Windows and version 7 on Mac.',
     url: 'https://www.speckle.systems/connectors/rhino',
     image: '/images/connectors/rhino.png',
     categories: [ConnectorCategory.NextGen, ConnectorCategory.CADAndModeling]
   },
-  {
-    title: 'Blender',
-    description:
-      'Blender is a powerful 3D modeling software and much more than that. Supports Blender 3.X & 4.X versions on Windows and Mac!',
-    url: 'https://www.speckle.systems/connectors/blender',
-    image: '/images/connectors/blender.png',
-    categories: [ConnectorCategory.Visualisation, ConnectorCategory.CADAndModeling]
-  },
-  {
-    title: 'Grasshopper',
-    description:
-      'Create anything from simple to advanced custom workflows using Speckle for Grasshopper, the original Speckle Connector!',
-    url: 'https://www.speckle.systems/connectors/grasshopper',
-    image: '/images/connectors/grasshopper.png',
-    categories: [ConnectorCategory.VisualProgramming]
-  },
   {
     title: 'Power BI',
+    slug: 'powerbi',
     description:
       "Speckle's Power BI Connector allows you to integrate data from various AEC apps (like Revit, Archicad, IFC and more)! You can create detailed analysis and interactive 3D visualisations.",
     url: 'https://www.speckle.systems/connectors/power-bi',
@@ -55,6 +43,7 @@ export const connectorItems: ConnectorItem[] = [
   },
   {
     title: 'SketchUp',
+    slug: 'sketchup',
     description:
       'Be an early adopter and try the Speckle Connector for SketchUp (Beta). Send your SketchUp models out and receive models from other CAD/BIM apps. Supports versions 2021, 2022, 2023 and 2024.',
     url: 'https://www.speckle.systems/connectors/sketchup-beta',
@@ -63,22 +52,16 @@ export const connectorItems: ConnectorItem[] = [
   },
   {
     title: 'QGIS',
+    slug: 'qgis',
     description:
       'The Speckle Connector for QGIS, compatible with QGIS 3.20 onwards. You can install it from Speckle Manager or directly from the QGIS Plugins menu.',
     url: 'https://www.speckle.systems/connectors/qgis',
     image: '/images/connectors/qgis.png',
     categories: [ConnectorCategory.GIS]
   },
-  {
-    title: 'Excel',
-    description:
-      "Create geometry, schedules and analyse your geometry's metadata. Available on the Microsoft Office Store.",
-    url: 'https://www.speckle.systems/connectors/excel',
-    image: '/images/connectors/excel.png',
-    categories: [ConnectorCategory.BusinessIntelligence]
-  },
   {
     title: 'AutoCAD',
+    slug: 'autocad',
     description:
       'Exchange and extract geometry using the Speckle AutoCAD Connector. Supports versions 2021, 2022, 2023, 2024 and 2025',
     url: 'https://www.speckle.systems/connectors/autocad',
@@ -87,6 +70,7 @@ export const connectorItems: ConnectorItem[] = [
   },
   {
     title: 'Civil3D',
+    slug: 'civil3d',
     description:
       'Exchange and extract data from Civil3D using Speckle - alignments and more! Supports versions 2021, 2022, 2023, 2024 and 2025.',
     url: 'https://www.speckle.systems/connectors/civil3d',
@@ -99,6 +83,7 @@ export const connectorItems: ConnectorItem[] = [
   },
   {
     title: 'ETABS',
+    slug: 'etabs',
     description:
       'Connect to Speckle with our (alpha) Connector for ETABS 18, 19, 20 and 21. Send and receive structural model data in customisable ways to enhance your workflows!',
     url: 'https://www.speckle.systems/connectors/etabs',
@@ -107,50 +92,58 @@ export const connectorItems: ConnectorItem[] = [
   },
   {
     title: 'Navisworks',
+    slug: 'navisworks',
     description:
       "Share aggregated models from Navisworks (2020-2025) to Speckle: publish geometry and properties from specific search sets, selections, views, or clash results! Speckle's Navisworks Connector allows targeted exports so that you can focus on the most relevant aspects of your model data for enhanced usability in collaborative workflows.",
     url: 'https://www.speckle.systems/connectors/navisworks',
     image: '/images/connectors/navisworks.png',
     categories: [ConnectorCategory.NextGen, ConnectorCategory.BIM]
   },
-  {
-    title: 'Dynamo',
-    description:
-      'Customise and control basic geometry and transform it into BIM elements using Speckle for Dynamo. Supports Dynamo Revit 2020 to 2023.',
-    url: 'https://www.speckle.systems/connectors/dynamo',
-    image: '/images/connectors/dynamo.png',
-    categories: [ConnectorCategory.VisualProgramming]
-  },
   {
     title: 'Archicad',
+    slug: 'archicad',
     description:
       'Extract BIM data for further processing and visualisation, or dynamically create models from other CAD applications using Speckle for Archicad! Supports Archicad 25 to 27.',
     url: 'https://www.speckle.systems/connectors/archicad',
     image: '/images/connectors/archicad.png',
     categories: [ConnectorCategory.NextGen, ConnectorCategory.BIM]
   },
-  {
-    title: 'Unity',
-    description:
-      'Visualise your BIM data in one of the world’s most popular game engines using the Speckle for Unity Connector! Early release for developers.',
-    url: 'https://www.speckle.systems/connectors/unity',
-    image: '/images/connectors/unity.png',
-    categories: [ConnectorCategory.Visualisation]
-  },
-  {
-    title: 'Unreal',
-    description:
-      "Coordinate and curate with Speckle for Unreal: visualise your BIM data in Unreal and build VR/XR applications using Epic's fantastic game engine! Early release for developers.",
-    url: 'https://www.speckle.systems/connectors/unreal',
-    image: '/images/connectors/unreal.png',
-    categories: [ConnectorCategory.Visualisation]
-  },
   {
     title: 'TeklaStructures',
+    slug: 'teklastructures',
     description:
       'Connect to Speckle with our Connector for Tekla Structures. Send and receive BIM data in customisable ways to enhance your workflows.',
     url: 'https://www.speckle.systems/connectors/teklastructures-alpha',
     image: '/images/connectors/teklastructures.png',
     categories: [ConnectorCategory.NextGen, ConnectorCategory.Structural]
+  },
+
+  // Non-available connectors
+  {
+    title: 'Excel',
+    slug: 'excel',
+    description:
+      "Create geometry, schedules and analyse your geometry's metadata. Available on the Microsoft Office Store.",
+    image: '/images/connectors/excel.png',
+    categories: [ConnectorCategory.BusinessIntelligence],
+    isComingSoon: true
+  },
+  {
+    title: 'Blender',
+    slug: 'blender',
+    description:
+      'Blender is a powerful 3D modeling software and much more than that. Supports Blender 3.X & 4.X versions on Windows and Mac!',
+    image: '/images/connectors/blender.png',
+    categories: [ConnectorCategory.Visualisation, ConnectorCategory.CADAndModeling],
+    isComingSoon: true
+  },
+  {
+    title: 'Grasshopper',
+    slug: 'grasshopper',
+    description:
+      'Create anything from simple to advanced custom workflows using Speckle for Grasshopper, the original Speckle Connector!',
+    image: '/images/connectors/grasshopper.png',
+    categories: [ConnectorCategory.VisualProgramming],
+    isComingSoon: true
   }
 ]

packages/frontend-2/lib/dashboard/helpers/types.ts

@@ -9,6 +9,7 @@ export type TutorialItem = {
 export type QuickStartItem = {
   title: string
   description: string
+  isExternalRoute?: boolean
   buttons: LayoutDialogButton[]
 }
 
@@ -26,8 +27,24 @@ export const enum ConnectorCategory {
 
 export type ConnectorItem = {
   title: string
+  slug: string
   image: string
-  url: string
+  url?: string
   description: string
   categories?: ConnectorCategory[]
+  isComingSoon?: boolean
+}
+
+export type Version = {
+  Number: string
+  Url: string
+  Os: number
+  Architecture: number
+  Date: string
+  Prerelease: boolean
+}
+
+// yolo
+export type Versions = {
+  Versions: Version[]
 }