feat: enhance CommandBar with CommandGroup integration and type definitions

Author: AbhishekA1509

src/Pages/Shared/CommandBar/CommandBar.component.tsx

@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react'
 
 import { Backdrop, KeyboardShortcut, SearchBar, useRegisterShortcut } from '@devtron-labs/devtron-fe-common-lib'
 
-import { SHORT_CUTS } from './constants'
+import CommandGroup from './CommandGroup'
+import { NAVIGATION_GROUPS, SHORT_CUTS } from './constants'
 
 import './CommandBar.scss'
 
@@ -39,15 +40,26 @@ const CommandBar = () => {
         <Backdrop onEscape={handleClose}>
             <div className="dc__mxw-800 mxh-450 flexbox-col dc__overflow-auto dc__content-space br-12 bg__modal--primary command-bar__container w-100 h-100">
                 <div className="flexbox-col dc__overflow-auto">
-                    <SearchBar
-                        inputProps={{
-                            autoFocus: true,
-                            placeholder: 'Search or jump to…',
-                        }}
-                        noBackgroundAndBorder
-                    />
-
-                    <div className="flexbox-col dc__overflow-auto border__primary--top pt-8" />
+                    <div className="px-16">
+                        <SearchBar
+                            inputProps={{
+                                autoFocus: true,
+                                placeholder: 'Search or jump to…',
+                            }}
+                            noBackgroundAndBorder
+                        />
+                    </div>
+
+                    <div
+                        className="flexbox-col dc__overflow-auto border__primary--top pt-8"
+                        role="listbox"
+                        aria-label="Command Menu"
+                        // TODO: aria-activedescendant for the currently focused item
+                    >
+                        {NAVIGATION_GROUPS.map((group) => (
+                            <CommandGroup key={group.id} groupDetails={group} />
+                        ))}
+                    </div>
                 </div>
 
                 <div className="flexbox dc__content-space dc__align-items-center px-20 py-12 border__primary--top bg__secondary">

src/Pages/Shared/CommandBar/CommandBar.scss

@@ -1,5 +1,15 @@
 .command-bar {
     &__container {
         box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04), 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 3px 17px 0 rgba(0, 0, 0, 0.04), 0 4px 30px 0 rgba(0, 0, 0, 0.13), 0 8px 48px 0 rgba(0, 0, 0, 0.15);
+
+        .search-bar {
+            &:focus-within {
+                border: none !important;
+            }
+
+            &:hover {
+                background: transparent !important;
+            }
+        }
     }
 }

src/Pages/Shared/CommandBar/CommandGroup.tsx

@@ -1,3 +1,32 @@
-const CommandGroup = () => <div />
+import { Icon } from '@devtron-labs/devtron-fe-common-lib'
+
+import { CommandGroupProps } from './types'
+
+const CommandGroup = ({ groupDetails }: CommandGroupProps) => (
+    <div className="flexbox-col p-8">
+        <div className="flexbox px-16 py-6 dc__gap-4">
+            <h2 className="m-0 cn-7 fs-13 fw-6 lh-20 dc__uppercase font-ibm-plex-mono" id={groupDetails.id}>
+                {groupDetails.title}
+            </h2>
+        </div>
+
+        {/* TODO: Empty/Loading/Error state */}
+        <div className="flexbox-col" key={groupDetails.id} role="group" aria-labelledby={groupDetails.id}>
+            {groupDetails.items.map((item) => (
+                <div
+                    className="flexbox px-16 py-12 dc__align-items-center dc__gap-8"
+                    role="option"
+                    // TODO: Fix later
+                    aria-selected="false"
+                >
+                    <div className="flexbox dc__align-items-center dc__gap-12">
+                        <Icon name={item.icon} size={24} color="N700" />
+                        <h3 className="m-0 cn-9 fs-14 fw-4 lh-20 dc__truncate">{item.title}</h3>
+                    </div>
+                </div>
+            ))}
+        </div>
+    </div>
+)
 
 export default CommandGroup

src/Pages/Shared/CommandBar/types.ts

@@ -126,3 +126,7 @@ export interface CommandBarGroupType {
     title: string
     items: CommandBarItemType[]
 }
+
+export interface CommandGroupProps {
+    groupDetails: CommandBarGroupType
+}