fix: Navigation 2.0 - various improvements

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.19.4-pre-1",
+    "version": "1.19.4-pre-2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

src/Common/Constants.ts

@@ -52,6 +52,9 @@ export const PATTERNS = {
 
 const GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP = '/global-config/templates/devtron-apps'
 
+const APPLICATION_MANAGEMENT_ROOT = '/application-management'
+const COST_VISIBILITY_ROOT = '/cost-visibility'
+
 export const URLS = {
     LOGIN: '/login',
     LOGIN_SSO: '/login/sso',
@@ -90,14 +93,17 @@ export const URLS = {
     GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_DETAIL: `${GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP}/detail/:appId`,
     LICENSE_AUTH: '/license-auth',
     GLOBAL_CONFIG_EDIT_CLUSTER: '/global-config/cluster-env/edit/:clusterId',
-    COST_VISIBILITY_OVERVIEW: '/cost-visibility/overview',
-    COST_BREAKDOWN_ROUTE: '/cost-visibility/breakdown/:breakdownViewType',
-    COST_BREAKDOWN_CLUSTERS: `/cost-visibility/breakdown/${CostBreakdownViewType.CLUSTERS}`,
-    COST_BREAKDOWN_ENVIRONMENTS: `/cost-visibility/breakdown/${CostBreakdownViewType.ENVIRONMENTS}`,
-    COST_BREAKDOWN_PROJECTS: `/cost-visibility/breakdown/${CostBreakdownViewType.PROJECTS}`,
-    COST_BREAKDOWN_APPLICATIONS: `/cost-visibility/breakdown/${CostBreakdownViewType.APPLICATIONS}`,
+    COST_VISIBILITY: COST_VISIBILITY_ROOT,
+    COST_VISIBILITY_OVERVIEW: `${COST_VISIBILITY_ROOT}/overview`,
+    COST_BREAKDOWN_ROUTE: `${COST_VISIBILITY_ROOT}/breakdown/:breakdownViewType`,
+    COST_BREAKDOWN_CLUSTERS: `${COST_VISIBILITY_ROOT}/breakdown/${CostBreakdownViewType.CLUSTERS}`,
+    COST_BREAKDOWN_ENVIRONMENTS: `${COST_VISIBILITY_ROOT}/breakdown/${CostBreakdownViewType.ENVIRONMENTS}`,
+    COST_BREAKDOWN_PROJECTS: `${COST_VISIBILITY_ROOT}/breakdown/${CostBreakdownViewType.PROJECTS}`,
+    COST_BREAKDOWN_APPLICATIONS: `${COST_VISIBILITY_ROOT}/breakdown/${CostBreakdownViewType.APPLICATIONS}`,
     COST_BREAKDOWN_ITEM_NAME: `:${CostBreakdownItemViewParamsType.ITEM_NAME}`,
-    COST_CONFIGURATIONS: '/cost-visibility/configurations',
+    COST_CONFIGURATIONS: `${COST_VISIBILITY_ROOT}/configurations`,
+    APPLICATION_MANAGEMENT: APPLICATION_MANAGEMENT_ROOT,
+    APPLICATION_MANAGEMENT_OVERVIEW: `${APPLICATION_MANAGEMENT_ROOT}/overview`,
 } as const
 
 export const ROUTES = {

src/Common/SearchBar/SearchBar.component.tsx

@@ -16,10 +16,8 @@
 
 import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react'
 
-import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
-import { ReactComponent as Search } from '@Icons/ic-search.svg'
 import { useRegisterShortcut } from '@Common/Hooks'
-import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components'
+import { Button, ButtonStyleType, ButtonVariantType, Icon } from '@Shared/Components'
 import { ComponentSizeType } from '@Shared/constants'
 
 import { debounce, noop } from '../Helper'
@@ -160,9 +158,14 @@ const SearchBar = ({
             <div
                 className={`search-bar search-bar--${variant} ${noBackgroundAndBorder ? 'dc__no-border dc__no-background dc__hover-n50' : 'bg__secondary en-2 dc__hover-border-n300'} focus-within-border-b5 dc__block w-100 min-w-200 dc__position-rel br-4 bw-1 ${getSearchBarHeightFromSize(size)}`}
             >
-                <Search
-                    className={`search-bar__icon dc__position-abs icon-dim-16 ${variant === 'sidenav' ? 'icon-fill__sidenav' : 'icon-color-n6'}`}
-                />
+                <span
+                    className="search-bar__icon dc__position-abs icon-dim-16"
+                    style={
+                        variant === 'sidenav' ? { ['--overrideIconColor' as string]: 'var(--sidenav-input-icon)' } : {}
+                    }
+                >
+                    <Icon name="ic-magnifying-glass" color="N600" />
+                </span>
                 <input
                     placeholder="Search"
                     data-variant={variant}
@@ -180,9 +183,11 @@ const SearchBar = ({
                 />
                 {/* TODO: Sync with product since it should have ic-enter in case of not applied */}
                 {showClearButton ? (
-                    <div className="flex search-bar__clear-button dc__position-abs dc__transparent">
+                    <div
+                        className={`flex search-bar__clear-btn search-bar__clear-btn--${variant} dc__position-abs dc__transparent`}
+                    >
                         <Button
-                            icon={<ICCross />}
+                            icon={<Icon name="ic-close-small" color={null} />}
                             size={ComponentSizeType.xs}
                             variant={ButtonVariantType.borderLess}
                             style={ButtonStyleType.negativeGrey}

src/Common/SearchBar/searchBar.scss

@@ -34,6 +34,7 @@
     &#{$root}--sidenav {
         background: transparent;
         border-color: var(--sidenav-input-border);
+        min-width: 0;
 
         &:hover {
             border-color: var(--sidenav-input-border-hover);
@@ -59,17 +60,21 @@
         top: 50%;
         left: 8px;
         transform: translateY(-50%);
-
-        *[fill^='#'] {
-            fill: var(--sidenav-input-icon);
-        }
     }
 
-    &__clear-button {
-        right: 0;
+    &__clear-btn {
+        right: 2px;
         top: 50%;
         transform: translateY(-50%);
         z-index: 1;
+
+        &#{$root}__clear-btn--sidenav {
+            .button {
+                svg *[stroke^='#']:not([data-style-override='false']) {
+                    stroke: var(--sidenav-input-icon);
+                }
+            }
+        }
     }
 
     &__kbd-shortcut {

src/Shared/Components/Icon/Icon.tsx

@@ -27,6 +27,7 @@ import { ReactComponent as ICBrain } from '@IconsV2/ic-brain.svg'
 import { ReactComponent as ICBrowser } from '@IconsV2/ic-browser.svg'
 import { ReactComponent as ICBug } from '@IconsV2/ic-bug.svg'
 import { ReactComponent as ICBuildColor } from '@IconsV2/ic-build-color.svg'
+import { ReactComponent as ICBuilding } from '@IconsV2/ic-building.svg'
 import { ReactComponent as ICCalendar } from '@IconsV2/ic-calendar.svg'
 import { ReactComponent as ICCancelled } from '@IconsV2/ic-cancelled.svg'
 import { ReactComponent as ICCardStack } from '@IconsV2/ic-card-stack.svg'
@@ -60,6 +61,7 @@ import { ReactComponent as ICCopy } from '@IconsV2/ic-copy.svg'
 import { ReactComponent as ICCpu } from '@IconsV2/ic-cpu.svg'
 import { ReactComponent as ICCrown } from '@IconsV2/ic-crown.svg'
 import { ReactComponent as ICCube } from '@IconsV2/ic-cube.svg'
+import { ReactComponent as ICDatabaseBackup } from '@IconsV2/ic-database-backup.svg'
 import { ReactComponent as ICDelete } from '@IconsV2/ic-delete.svg'
 import { ReactComponent as ICDeleteDots } from '@IconsV2/ic-delete-dots.svg'
 import { ReactComponent as ICDeleteLightning } from '@IconsV2/ic-delete-lightning.svg'
@@ -274,6 +276,7 @@ export const iconMap = {
     'ic-browser': ICBrowser,
     'ic-bug': ICBug,
     'ic-build-color': ICBuildColor,
+    'ic-building': ICBuilding,
     'ic-calendar': ICCalendar,
     'ic-cancelled': ICCancelled,
     'ic-card-stack': ICCardStack,
@@ -307,6 +310,7 @@ export const iconMap = {
     'ic-cpu': ICCpu,
     'ic-crown': ICCrown,
     'ic-cube': ICCube,
+    'ic-database-backup': ICDatabaseBackup,
     'ic-delete-dots': ICDeleteDots,
     'ic-delete-lightning': ICDeleteLightning,
     'ic-delete': ICDelete,

src/Shared/Components/TreeView/TreeView.scss

@@ -16,6 +16,10 @@
 
 .tree-view {
     &__container {
+        .icon-with-divider {
+            grid-template-rows: 24px auto;
+        }
+
         .tree-view__divider {
             background-color: var(--N200);
 
@@ -51,11 +55,13 @@
         }
 
         &--item-container {
-            &:has(.tree-view__container__nav-link--active), &:has(.tree-view__container__nav-link--active):hover {
+            &:has(.tree-view__container__nav-link--active),
+            &:has(.tree-view__container__nav-link--active):hover {
                 background-color: var(--B100);
             }
 
-            &--sidenav:has(.tree-view__container__nav-link--active), &--sidenav:has(.tree-view__container__nav-link--active):hover {
+            &--sidenav:has(.tree-view__container__nav-link--active),
+            &--sidenav:has(.tree-view__container__nav-link--active):hover {
                 background-color: var(--sidenav-subsection-item-selected);
             }
         }

src/Shared/Hooks/useUserPreferences/types.ts

@@ -24,22 +24,23 @@ export type NavigationItemID =
     | 'application-management-application-groups'
     | 'application-management-chart-store'
     | 'application-management-bulk-edit'
+    | 'application-management-application-templates'
+    | 'application-management-projects'
     | 'application-management-configurations'
     | 'application-management-policies'
-    | 'application-management-others'
     | 'infrastructure-management-overview'
     | 'infrastructure-management-resource-browser'
-    | 'infrastructure-management-intercepted-changes'
     | 'infrastructure-management-resource-watcher'
     | 'infrastructure-management-catalog-framework'
     | 'software-release-management-overview'
-    | 'software-release-management-software-release'
+    | 'software-release-management-release-hub'
+    | 'software-release-management-tenants'
     | 'cost-visibility-overview'
     | 'cost-visibility-cost-breakdown'
     | 'cost-visibility-configurations'
     | 'security-center-overview'
-    | 'security-center-application-security'
-    | 'security-center-security-policies'
+    | 'security-center-security-scans'
+    | 'security-center-security-policy'
     | 'automation-and-enablement-jobs'
     | 'automation-and-enablement-alerting'
     | 'automation-and-enablement-incident-response'
@@ -50,6 +51,11 @@ export type NavigationItemID =
     | 'global-configuration-cluster-and-environments'
     | 'global-configuration-container-oci-registry'
     | 'global-configuration-authorization'
+    | 'backup-and-restore-overview'
+    | 'backup-and-restore-item'
+    | 'backup-and-restore-backup-repositories'
+    | 'backup-and-restore-backup-locations'
+    | 'backup-and-restore-history-and-logs'
 
 export type NavigationSubMenuItemID =
     | 'application-management-configurations-gitops'
@@ -68,8 +74,6 @@ export type NavigationSubMenuItemID =
     | 'application-management-policies-tag-policy'
     | 'application-management-policies-filter-conditions'
     | 'application-management-policies-lock-deployment-configuration'
-    | 'application-management-others-application-templates'
-    | 'application-management-others-projects'
     | 'cost-visibility-cost-breakdown-clusters'
     | 'cost-visibility-cost-breakdown-environments'
     | 'cost-visibility-cost-breakdown-projects'