Merge pull request #876 from devtron-labs/feat/side-navigation

RohitRaj011 · web-flow · commit 9286b5974523 · 2025-09-04T17:44:40.000+05:30
feat: implement SideNavigation component
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.20.0-pre-4",
+    "version": "1.20.0-pre-5",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Assets/IconV2/ic-clock-counterclockwise.svg b/src/Assets/IconV2/ic-clock-counterclockwise.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.444 6.818V12l4.514 2.59M6.344 8.948H2m0 0v-4.32m0 4.319 3.686-3.665a9.574 9.574 0 0 1 4.893-2.6 9.61 9.61 0 0 1 5.522.541 9.545 9.545 0 0 1 4.288 3.5 9.46 9.46 0 0 1 0 10.555 9.545 9.545 0 0 1-4.288 3.499 9.61 9.61 0 0 1-5.522.54 9.575 9.575 0 0 1-4.893-2.6" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-floppy-disk.svg b/src/Assets/IconV2/ic-floppy-disk.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 9H9V3.75m11.25 4.81V19.5a.75.75 0 0 1-.75.75h-15a.75.75 0 0 1-.75-.75v-15a.75.75 0 0 1 .75-.75h10.94a.75.75 0 0 1 .53.22l4.06 4.06a.75.75 0 0 1 .22.53Zm-5.624 6.066a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
@@ -57,6 +57,7 @@ const SOFTWARE_RELEASE_MANAGEMENT_ROOT = '/software-release-management'
 const COST_VISIBILITY_ROOT = '/cost-visibility'
 const SECURITY_CENTER_ROOT = '/security-center'
 const AUTOMATION_AND_ENABLEMENT_ROOT = '/automation-and-enablement'
+const BACKUP_AND_RESTORE_ROOT = '/backup-and-restore'
 const GLOBAL_CONFIG_ROOT = '/global-configuration'
 const AI_RECOMMENDATIONS_ROOT = '/ai-recommendations'
 
@@ -123,6 +124,9 @@ export const URLS = {
     // AUTOMATION AND ENABLEMENT
     AUTOMATION_AND_ENABLEMENT: AUTOMATION_AND_ENABLEMENT_ROOT,
     AUTOMATION_AND_ENABLEMENT_JOB: `${AUTOMATION_AND_ENABLEMENT_ROOT}/job`,
+    // BACKUP AND RESTORE
+    BACKUP_AND_RESTORE: BACKUP_AND_RESTORE_ROOT,
+    BACKUP_AND_RESTORE_OVERVIEW: `${BACKUP_AND_RESTORE_ROOT}/overview`,
     // GLOBAL CONFIGURATION
     GLOBAL_CONFIG: GLOBAL_CONFIG_ROOT,
     GLOBAL_CONFIG_DOCKER: `${GLOBAL_CONFIG_ROOT}/docker`,
diff --git a/src/Shared/Components/Backdrop/Backdrop.tsx b/src/Shared/Components/Backdrop/Backdrop.tsx
@@ -32,6 +32,7 @@ const Backdrop = ({
     onBackdropMount,
     deactivateFocusOnEscape = true,
     initialFocus,
+    returnFocusOnDeactivate,
 }: BackdropProps) => {
     // STATES
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null)
@@ -90,6 +91,7 @@ const Backdrop = ({
             onEscape={onEscape}
             deactivateFocusOnEscape={deactivateFocusOnEscape}
             initialFocus={initialFocus ?? undefined}
+            returnFocusOnDeactivate={returnFocusOnDeactivate}
         >
             <motion.div
                 initial={{ opacity: 0 }}
diff --git a/src/Shared/Components/Backdrop/types.ts b/src/Shared/Components/Backdrop/types.ts
@@ -18,7 +18,8 @@ import { MouseEvent, ReactNode } from 'react'
 
 import { DTFocusTrapType } from '../DTFocusTrap'
 
-export interface BackdropProps extends Pick<DTFocusTrapType, 'deactivateFocusOnEscape' | 'initialFocus' | 'onEscape'> {
+export interface BackdropProps
+    extends Pick<DTFocusTrapType, 'deactivateFocusOnEscape' | 'initialFocus' | 'onEscape' | 'returnFocusOnDeactivate'> {
     /**
      * The content to be rendered within the backdrop component.
      */
diff --git a/src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx b/src/Shared/Components/DTFocusTrap/DTFocusTrap.tsx
@@ -44,6 +44,7 @@ const DTFocusTrap = ({
     deactivateFocusOnEscape = true,
     children,
     initialFocus = undefined,
+    returnFocusOnDeactivate = true,
 }: DTFocusTrapType) => {
     const [isFocusEnabled, setIsFocusEnabled] = useState(true)
 
@@ -91,6 +92,7 @@ const DTFocusTrap = ({
                         }
                         return false
                     },
+                    returnFocusOnDeactivate,
                 }}
             >
                 {children}
diff --git a/src/Shared/Components/DTFocusTrap/types.ts b/src/Shared/Components/DTFocusTrap/types.ts
@@ -15,6 +15,7 @@
  */
 
 import { ReactNode } from 'react'
+import { Props as FocusTrapProps } from 'focus-trap-react'
 
 /* Mimicking types from Focus React Library */
 type FocusTargetValue = HTMLElement | SVGElement | string
@@ -27,7 +28,7 @@ type FocusTargetValueOrFalse = FocusTargetValue | false
  */
 type FocusTargetOrFalse = FocusTargetValueOrFalse | (() => FocusTargetValueOrFalse)
 
-export interface DTFocusTrapType {
+export interface DTFocusTrapType extends Pick<FocusTrapProps['focusTrapOptions'], 'returnFocusOnDeactivate'> {
     /**
      * Callback function that gets triggered when the Escape key is pressed. \
      * Should be wrapped in useCallback to prevent unnecessary re-renders.
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
@@ -47,6 +47,7 @@ import { ReactComponent as ICCircleLoader } from '@IconsV2/ic-circle-loader.svg'
 import { ReactComponent as ICCleanBrush } from '@IconsV2/ic-clean-brush.svg'
 import { ReactComponent as ICClipboard } from '@IconsV2/ic-clipboard.svg'
 import { ReactComponent as ICClock } from '@IconsV2/ic-clock.svg'
+import { ReactComponent as ICClockCounterclockwise } from '@IconsV2/ic-clock-counterclockwise.svg'
 import { ReactComponent as ICCloseLarge } from '@IconsV2/ic-close-large.svg'
 import { ReactComponent as ICCloseSmall } from '@IconsV2/ic-close-small.svg'
 import { ReactComponent as ICCloud } from '@IconsV2/ic-cloud.svg'
@@ -104,6 +105,7 @@ import { ReactComponent as ICFilesChanged } from '@IconsV2/ic-files-changed.svg'
 import { ReactComponent as ICFilter } from '@IconsV2/ic-filter.svg'
 import { ReactComponent as ICFilterApplied } from '@IconsV2/ic-filter-applied.svg'
 import { ReactComponent as ICFlask } from '@IconsV2/ic-flask.svg'
+import { ReactComponent as ICFloppyDisk } from '@IconsV2/ic-floppy-disk.svg'
 import { ReactComponent as ICFluxcdApp } from '@IconsV2/ic-fluxcd-app.svg'
 import { ReactComponent as ICFolder } from '@IconsV2/ic-folder.svg'
 import { ReactComponent as ICFolderColor } from '@IconsV2/ic-folder-color.svg'
@@ -300,6 +302,7 @@ export const iconMap = {
     'ic-circle-loader': ICCircleLoader,
     'ic-clean-brush': ICCleanBrush,
     'ic-clipboard': ICClipboard,
+    'ic-clock-counterclockwise': ICClockCounterclockwise,
     'ic-clock': ICClock,
     'ic-close-large': ICCloseLarge,
     'ic-close-small': ICCloseSmall,
@@ -358,6 +361,7 @@ export const iconMap = {
     'ic-filter-applied': ICFilterApplied,
     'ic-filter': ICFilter,
     'ic-flask': ICFlask,
+    'ic-floppy-disk': ICFloppyDisk,
     'ic-fluxcd-app': ICFluxcdApp,
     'ic-folder-color': ICFolderColor,
     'ic-folder-user': ICFolderUser,
diff --git a/src/Shared/Components/SideNavigation/SideNavigation.tsx b/src/Shared/Components/SideNavigation/SideNavigation.tsx
@@ -0,0 +1,40 @@
+import { Fragment } from 'react'
+import { NavLink } from 'react-router-dom'
+
+import { Tooltip } from '@Common/Tooltip'
+
+import { SideNavigationItemLink, SideNavigationProps } from './types'
+
+const NavItem = ({ dataTestId, href, title, tooltipProps }: SideNavigationItemLink) => (
+    <Tooltip {...tooltipProps}>
+        <NavLink
+            to={href}
+            data-testid={dataTestId}
+            className={(isActive) =>
+                `br-4 py-6 px-8 fs-13 lh-20 ${isActive ? 'fw-6 bcb-1 cb-5' : 'fw-4 cn-9 dc__hover-n50'}`
+            }
+        >
+            {title}
+        </NavLink>
+    </Tooltip>
+)
+
+export const SideNavigation = ({ list }: SideNavigationProps) => (
+    <div className="flexbox-col">
+        {list.map(({ href, items, id, ...item }, index) =>
+            items ? (
+                <Fragment key={id}>
+                    {index > 0 && <div className="divider__secondary--horizontal mt-8 mb-8" />}
+                    <h4 data-testid={item.dataTestId} className="m-0 fs-12 lh-20 fw-6 cn-7 dc__uppercase py-4 px-8">
+                        {item.title}
+                    </h4>
+                    {items.map(({ id: subItemId, ...subItem }) => (
+                        <NavItem key={subItemId} id={subItemId} {...subItem} />
+                    ))}
+                </Fragment>
+            ) : (
+                <NavItem key={id} id={id} href={href} {...item} />
+            ),
+        )}
+    </div>
+)
diff --git a/src/Shared/Components/SideNavigation/index.ts b/src/Shared/Components/SideNavigation/index.ts
@@ -0,0 +1,2 @@
+export * from './SideNavigation'
+export type { SideNavigationProps } from './types'
diff --git a/src/Shared/Components/SideNavigation/types.ts b/src/Shared/Components/SideNavigation/types.ts
@@ -0,0 +1,23 @@
+import { TooltipProps } from '@Common/Tooltip'
+
+export type SideNavigationItemBase = {
+    id: string
+    title: string
+    dataTestId: string
+}
+
+export type SideNavigationItemLink = SideNavigationItemBase & {
+    href: string
+    items?: never
+    tooltipProps?: TooltipProps
+}
+
+export type SideNavigationItemGroup = SideNavigationItemBase & {
+    items: Omit<SideNavigationItemLink, 'items'>[]
+    href?: never
+    tooltipProps?: never
+}
+
+export interface SideNavigationProps {
+    list: (SideNavigationItemLink | SideNavigationItemGroup)[]
+}
diff --git a/src/Shared/Components/index.ts b/src/Shared/Components/index.ts
@@ -97,6 +97,7 @@ export * from './ScannedByToolModal'
 export * from './Security'
 export * from './SelectPicker'
 export * from './ShowMoreText'
+export * from './SideNavigation'
 export * from './SSOProviderIcon'
 export * from './StatusComponent'
 export * from './Switch'
diff --git a/src/Shared/Hooks/useUserPreferences/types.ts b/src/Shared/Hooks/useUserPreferences/types.ts
@@ -52,7 +52,8 @@ export type NavigationItemID =
     | 'global-configuration-container-oci-registry'
     | 'global-configuration-authorization'
     | 'backup-and-restore-overview'
-    | 'backup-and-restore-item'
+    | 'backup-and-restore-backup-and-schedule'
+    | 'backup-and-restore-restores'
     | 'backup-and-restore-backup-repositories'
     | 'backup-and-restore-backup-locations'
     | 'backup-and-restore-history-and-logs'

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@devtron-labs/devtron-fe-common-lib",`
`3`		`- "version": "1.20.0-pre-4",`
	`3`	`+ "version": "1.20.0-pre-5",`
`4`	`4`	`"description": "Supporting common component library",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "dist/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,7 @@ const DTFocusTrap = ({`
`44`	`44`	`deactivateFocusOnEscape = true,`
`45`	`45`	`children,`
`46`	`46`	`initialFocus = undefined,`
	`47`	`+ returnFocusOnDeactivate = true,`
`47`	`48`	`}: DTFocusTrapType) => {`
`48`	`49`	`const [isFocusEnabled, setIsFocusEnabled] = useState(true)`
`49`	`50`
`@@ -91,6 +92,7 @@ const DTFocusTrap = ({`
`91`	`92`	`}`
`92`	`93`	`return false`
`93`	`94`	`},`
	`95`	`+ returnFocusOnDeactivate,`
`94`	`96`	`}}`
`95`	`97`	`>`
`96`	`98`	`{children}`