diff --git a/redisinsight/ui/src/components/index.ts b/redisinsight/ui/src/components/index.ts
index c03eba1af0..13d69fa6c3 100644
--- a/redisinsight/ui/src/components/index.ts
+++ b/redisinsight/ui/src/components/index.ts
@@ -6,7 +6,6 @@ import DatabaseListModules from './database-list-modules/DatabaseListModules'
import DatabaseListOptions from './database-list-options/DatabaseListOptions'
import DatabaseOverview from './database-overview/DatabaseOverview'
import InputFieldSentinel from './input-field-sentinel/InputFieldSentinel'
-import PageBreadcrumbs from './page-breadcrumbs/PageBreadcrumbs'
import ContentEditable from './ContentEditable'
import Config from './config'
import SettingItem from './settings-item/SettingItem'
@@ -56,7 +55,6 @@ export {
DatabaseListOptions,
DatabaseOverview,
InputFieldSentinel,
- PageBreadcrumbs,
Config,
ContentEditable,
ConsentsSettings,
diff --git a/redisinsight/ui/src/components/page-breadcrumbs/PageBreadcrumbs.spec.tsx b/redisinsight/ui/src/components/page-breadcrumbs/PageBreadcrumbs.spec.tsx
deleted file mode 100644
index 097faf7cd0..0000000000
--- a/redisinsight/ui/src/components/page-breadcrumbs/PageBreadcrumbs.spec.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from 'uiSrc/utils/test-utils'
-import PageBreadcrumbs, { Breadcrumb } from './PageBreadcrumbs'
-
-const onClick = jest.fn()
-const breadcrumbs: Breadcrumb[] = [
- {
- text: 'first',
- href: '/',
- 'data-test-subject': 'first-link',
- onClick,
- },
- {
- text: 'second',
- href: '/',
- 'data-test-subject': 'second-link',
- },
- {
- text: 'third',
- },
-]
-
-describe('PageBreadcrumbs', () => {
- it('should render', () => {
- expect(render()).toBeTruthy()
- })
-
- it('should render properly', () => {
- const { container } = render()
- expect(
- container.querySelector('[data-test-subject="first-link"]'),
- ).toBeInTheDocument()
- })
-
- it('should call onClick', () => {
- const { container } = render()
- fireEvent.click(
- container.querySelector('[data-test-subject="first-link"]') as Element,
- )
- expect(onClick).toBeCalled()
- })
-})
diff --git a/redisinsight/ui/src/components/page-breadcrumbs/PageBreadcrumbs.tsx b/redisinsight/ui/src/components/page-breadcrumbs/PageBreadcrumbs.tsx
deleted file mode 100644
index c9a3ffd934..0000000000
--- a/redisinsight/ui/src/components/page-breadcrumbs/PageBreadcrumbs.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { ReactNode } from 'react'
-import { useHistory } from 'react-router-dom'
-import { EuiBreadcrumbs } from '@elastic/eui'
-import { EuiBreadcrumb } from '@elastic/eui/src/components/breadcrumbs/breadcrumbs'
-
-import { RiTooltip } from 'uiSrc/components'
-import { Spacer } from 'uiSrc/components/base/layout/spacer'
-import styles from './styles.module.scss'
-
-interface TooltipOption {
- label: string
- value: any
-}
-
-export interface Breadcrumb extends EuiBreadcrumb {
- text: string | ReactNode
- postfix?: string | ReactNode
- tooltipOptions?: TooltipOption[]
- href?: string
- 'data-test-subject'?: string
-}
-
-interface Props {
- breadcrumbs: Breadcrumb[]
-}
-
-const PageBreadcrumbs = (props: Props) => {
- const { breadcrumbs } = props
- const history = useHistory()
-
- const modifiedBreadcrumbs: EuiBreadcrumb[] = breadcrumbs.map((breadcrumb) => {
- const { tooltipOptions, ...modifiedBreadcrumb }: Breadcrumb = {
- ...breadcrumb,
- }
- const { href, onClick, text = '', postfix = '' } = breadcrumb
-
- if (href && !onClick) {
- modifiedBreadcrumb.onClick = (e) => {
- e.preventDefault()
- history.push(href)
- }
- }
-
- modifiedBreadcrumb.text = (
-
- {tooltipOptions?.length
- ? tooltipOptions.map(({ label, value }) => (
-
- {label}:
- {value}
-
- ))
- : text}
- >
- }
- >
- <>
-
- {text}
-
- {!!postfix && (
-
- {postfix}
-
- )}
- >
-
- )
-
- return modifiedBreadcrumb
- })
-
- return (
-
-
-
-
- )
-}
-
-export default PageBreadcrumbs
diff --git a/redisinsight/ui/src/components/page-breadcrumbs/index.ts b/redisinsight/ui/src/components/page-breadcrumbs/index.ts
deleted file mode 100644
index 0a33a85bf8..0000000000
--- a/redisinsight/ui/src/components/page-breadcrumbs/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import PageBreadcrumbs from './PageBreadcrumbs'
-
-export default PageBreadcrumbs
diff --git a/redisinsight/ui/src/components/page-breadcrumbs/styles.module.scss b/redisinsight/ui/src/components/page-breadcrumbs/styles.module.scss
deleted file mode 100644
index 705ebc10c8..0000000000
--- a/redisinsight/ui/src/components/page-breadcrumbs/styles.module.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.breadcrumbsWrapper {
- color: var(--euiTextSubduedColor);
- display: flex;
- height: 58px;
-
- :global(.euiBreadcrumb) {
- margin-bottom: 0;
- font-size: 13px;
- letter-spacing: -0.13px;
- font-weight: 500;
- color: var(--euiTextSubduedColor) !important;
-
- > span {
- display: inline-flex;
- align-items: center;
- max-width: 100%;
- vertical-align: super;
- }
-
- &:focus {
- background: none !important;
- }
-
- &:hover {
- color: var(--euiBreadcrumbActive) !important;
- }
- }
-
- :global(.euiBreadcrumb.euiLink.euiLink--subdued:focus) {
- animation: none !important;
- }
-
- :global(.euiBreadcrumb--last) {
- color: var(--euiBreadcrumbActive) !important;
- }
-
- :global(.euiBreadcrumbSeparator) {
- margin-right: 12px;
- width: 7px;
- height: 7px;
- margin-bottom: 4px;
- transform: rotate(45deg);
- border-right: 1px solid currentColor;
- border-top: 1px solid currentColor;
- background: none;
- }
-}
-
-.breadcrumbText {
- display: inline-block !important;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.breadcrumbPostfix {
- padding-left: 3px;
-}
-
-.tooltipItem {
- margin-bottom: 4px;
-}
-
-.tooltipItemValue {
- margin-left: 4px;
- font-weight: 300;
-}
-
-.tooltip {
- max-width: 372px !important;
-}