feat(frontend): add Deploy MCP button and update reka-ui to 2.8.0

Author: Lasim

package-lock.json

@@ -26,7 +26,7 @@
     "mitt": "^3.0.1",
     "pinia": "^3.0.4",
     "prismjs": "^1.30.0",
-    "reka-ui": "^2.7.0",
+    "reka-ui": "^2.8.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "vee-validate": "^4.15.1",

services/frontend/package.json

@@ -77,7 +77,8 @@ export default {
     view: 'View Details',
     configure: 'Configure',
     remove: 'Remove Installation',
-    openMenu: 'Open menu'
+    openMenu: 'Open menu',
+    deployMcp: 'Deploy MCP'
   },
 
   buttons: {

services/frontend/src/i18n/locales/en/mcp-installations.ts

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import NavbarLayout from '@/components/NavbarLayout.vue'
 import { Button } from '@/components/ui/button'
+import { ButtonGroup } from '@/components/ui/button-group'
 import { toast } from 'vue-sonner'
 import { useEventBus } from '@/composables/useEventBus'
 import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
@@ -49,6 +50,11 @@ const isConfigModalOpen = ref(false)
 // Computed
 const hasInstallations = computed(() => installations.value.length > 0)
 
+// Show Deploy MCP button only if team allows GitHub MCP
+const showDeployButton = computed(() => {
+  return selectedTeam.value?.allow_github_mcp === true
+})
+
 // Watch for team changes to reconnect stream
 watch(selectedTeam, (newTeam) => {
   if (newTeam) {
@@ -138,6 +144,10 @@ const handleInstallServer = () => {
   router.push('/mcp-server/install')
 }
 
+const handleDeployMcp = () => {
+  router.push('/deploy')
+}
+
 const handleOpenConfigModal = () => {
   // If walkthrough step 2 is active, finish the walkthrough
   if (showWalkthroughStep2.value) {
@@ -365,20 +375,28 @@ onUnmounted(() => {
           <Button
             id="get-configuration-button"
             @click="handleOpenConfigModal"
-            variant="outline"
             :class="[
               'flex items-center justify-center gap-2',
               showStep2ButtonHighZIndex ? 'relative z-[10000]' : ''
             ]"
           >
             {{ t('satelliteConfig.button.getConfiguration') }}
           </Button>
-          <Button
-            @click="handleInstallServer"
-            class="flex items-center justify-center gap-2"
-          >
-            {{ t('mcpInstallations.featuredList.browseCatalog') }}
-          </Button>
+          <ButtonGroup>
+            <Button
+              v-if="showDeployButton"
+              @click="handleDeployMcp"
+              variant="outline"
+            >
+              {{ t('mcpInstallations.actions.deployMcp') }}
+            </Button>
+            <Button
+              @click="handleInstallServer"
+              variant="outline"
+            >
+              {{ t('mcpInstallations.featuredList.browseCatalog') }}
+            </Button>
+          </ButtonGroup>
         </div>
       </div>
 

services/frontend/src/views/dashboard/index.vue

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router'
 import NavbarLayout from '@/components/NavbarLayout.vue'
 import { DsPageHeading } from '@/components/ui/ds-page-heading'
 import { Button } from '@/components/ui/button'
+import { ButtonGroup } from '@/components/ui/button-group'
 import { toast } from 'vue-sonner'
 import { useEventBus } from '@/composables/useEventBus'
 import { useInstallationsStream } from '@/composables/mcp-server'
@@ -33,6 +34,11 @@ const {
 // Computed
 const hasInstallations = computed(() => installations.value.length > 0)
 
+// Show Deploy MCP button only if team allows GitHub MCP
+const showDeployButton = computed(() => {
+  return selectedTeam.value?.allow_github_mcp === true
+})
+
 // Watch for team changes to reconnect stream
 watch(selectedTeam, (newTeam) => {
   if (newTeam) {
@@ -45,6 +51,10 @@ const handleInstallServer = () => {
   router.push('/mcp-server/install')
 }
 
+const handleDeployMcp = () => {
+  router.push('/deploy')
+}
+
 const handleViewInstallation = (serverId: string) => {
   router.push(`/mcp-server/view/${serverId}`)
 }
@@ -187,13 +197,21 @@ onUnmounted(() => {
   <NavbarLayout>
     <DsPageHeading :title="t('mcpInstallations.title')">
       <template #actions>
-        <Button
-          v-if="selectedTeam"
-          @click="handleInstallServer"
-          class="flex items-center gap-2"
-        >
-          {{ t('mcpInstallations.featuredList.browseCatalog') }}
-        </Button>
+        <ButtonGroup v-if="selectedTeam">
+          <Button
+            v-if="showDeployButton"
+            @click="handleDeployMcp"
+            variant="outline"
+          >
+            {{ t('mcpInstallations.actions.deployMcp') }}
+          </Button>
+          <Button
+            @click="handleInstallServer"
+            variant="outline"
+          >
+            {{ t('mcpInstallations.featuredList.browseCatalog') }}
+          </Button>
+        </ButtonGroup>
       </template>
     </DsPageHeading>
 

services/frontend/src/views/mcp-server/index.vue

@@ -7,6 +7,7 @@ import { Button } from '@/components/ui/button'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useBreadcrumbs } from '@/composables/useBreadcrumbs'
+import { useTeamContext } from '@/composables/useTeamContext'
 import NavbarLayout from '@/components/NavbarLayout.vue'
 import McpServerSquareCard from '@/components/mcp-server/McpServerSquareCard.vue'
 import FeaturedMcpServers from '@/components/mcp-server/FeaturedMcpServers.vue'
@@ -19,6 +20,9 @@ const { t } = useI18n()
 const router = useRouter()
 const { setBreadcrumbs } = useBreadcrumbs()
 
+// Team context using composable
+const { selectedTeam } = useTeamContext()
+
 // State
 const isLoading = ref(false)
 const isLoadingCategories = ref(false)
@@ -50,6 +54,11 @@ const shouldShowResults = computed(() => {
   return hasSearched.value && filteredServers.value.length > 0
 })
 
+// Show Deploy MCP button only if team allows GitHub MCP
+const showDeployButton = computed(() => {
+  return selectedTeam.value?.allow_github_mcp === true
+})
+
 // Methods
 const loadCategories = async () => {
   try {
@@ -212,6 +221,15 @@ onMounted(() => {
           >
             {{ t('mcpInstallations.wizard.server.viewAllServers') }}
           </Button>
+          <Button
+            v-if="showDeployButton"
+            variant="outline"
+            size="sm"
+            class="bg-black text-white border-black hover:bg-black/90 hover:border-black hover:text-white"
+            @click="router.push('/deploy')"
+          >
+            {{ t('mcpInstallations.actions.deployMcp') }}
+          </Button>
         </div>
       </div>