Feat: Add coming soon settings pages (#2590)

packages/frontend-2/components/settings/Dialog.vue

@@ -65,6 +65,24 @@
                 }"
                 @click="onWorkspaceMenuItemClick(workspaceItem.id, `${itemKey}`)"
               />
+              <LayoutSidebarMenuGroupItem
+                label="Billing"
+                tag="Coming soon"
+                tooltip-text="Manage billing for your workspace"
+                disabled
+              />
+              <LayoutSidebarMenuGroupItem
+                label="Security"
+                tag="Coming soon"
+                tooltip-text="SSO, manage permissions, restrict domain access"
+                disabled
+              />
+              <LayoutSidebarMenuGroupItem
+                label="Regions"
+                tag="Coming soon"
+                tooltip-text="Set up regions for custom data residency"
+                disabled
+              />
             </LayoutSidebarMenuGroup>
           </LayoutSidebarMenuGroup>
         </LayoutSidebarMenu>

packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts

@@ -37,11 +37,7 @@ export const Dashboard: StoryObj = {
             <template #title-icon>
               <HomeIcon class="h-5 w-5" />
             </template>
-            <LayoutSidebarMenuGroupItem label="Group Item with Icon" to="/" >
-              <template #icon>
-                <HomeIcon class="h-5 w-5" />
-              </template>
-            </LayoutSidebarMenuGroupItem>
+            <LayoutSidebarMenuGroupItem label="Group Item with Icon" tag="Coming soon" disabled />
             <LayoutSidebarMenuGroupItem label="Group Item with Icon" to="/" >
               <template #icon>
                 <HomeIcon class="h-5 w-5" />

packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue

@@ -2,13 +2,15 @@
   <component
     :is="linkComponent"
     v-if="!hasChildren"
+    v-tippy="tooltipText"
     :to="to"
-    class="group flex items-center justify-between space-x-2 shrink-0 text-body-xs select-none rounded-md w-full hover:bg-primary-muted py-1 px-5 cursor-pointer"
+    class="group flex items-center space-x-2 shrink-0 text-body-xs text-foreground select-none rounded-md w-full py-1 px-5"
+    :class="[!disabled && 'cursor-pointer hover:bg-primary-muted']"
     exact-active-class="bg-foundation-focus hover:!bg-foundation-focus"
     :external="external"
     :target="external ? '_blank' : undefined"
   >
-    <div class="flex items-center space-x-2">
+    <div class="flex items-center space-x-2" :class="[disabled && 'opacity-60']">
       <div v-if="$slots.icon" class="h-5 w-5 flex items-center justify-center">
         <slot name="icon" />
       </div>
@@ -18,18 +20,23 @@
     </div>
     <div
       v-if="tag"
-      class="text-xs uppercase bg-primary-muted py-0.5 px-2 rounded-full font-medium text-primary-focus group-hover:bg-white"
+      class="text-body-3xs bg-primary-muted py-0.5 px-2 rounded-full text-foreground-2"
     >
       {{ tag }}
     </div>
   </component>
   <div v-else class="flex flex-col">
     <button
-      class="group flex space-x-1.5 items-center w-full hover:bg-foundation-3 rounded-md p-0.5 cursor-pointer"
-      @click="isOpen = !isOpen"
+      v-tippy="tooltipText"
+      class="group flex space-x-1.5 items-center w-full rounded-md p-0.5"
+      :class="[
+        !disabled && 'cursor-pointer hover:bg-foundation-3',
+        disabled && 'opacity-60'
+      ]"
+      @click="toggleOpen"
     >
-      <ChevronDownIcon :class="isOpen ? '' : 'rotate-180'" class="h-2.5 w-2.5" />
-      <h6 class="text-heading-sm text-foreground-2 flex items-center space-x-1.5">
+      <ChevronDownIcon :class="[isOpen && 'rotate-180']" class="h-2.5 w-2.5" />
+      <h6 class="text-heading-sm text-foreground flex items-center space-x-1.5">
         {{ label }}
       </h6>
     </button>
@@ -48,15 +55,27 @@ const props = defineProps<{
   to?: string
   tag?: string
   external?: boolean
+  disabled?: boolean
+  tooltipText?: string
 }>()
 
 const isOpen = ref(true)
 
 const NuxtLink = resolveDynamicComponent('NuxtLink')
 
-const linkComponent = computed(() => (props.to ? NuxtLink : 'a'))
+const linkComponent = computed(() => {
+  if (props.disabled) return 'div'
+  if (props.to) return NuxtLink
+  return 'a'
+})
 
 const slots = useSlots()
 
 const hasChildren = !!slots.default
+
+const toggleOpen = () => {
+  if (!props.disabled) {
+    isOpen.value = !isOpen.value
+  }
+}
 </script>