diff --git a/locales/en/public.json b/locales/en/public.json index cb3cc5db8..771bc38d9 100644 --- a/locales/en/public.json +++ b/locales/en/public.json @@ -390,5 +390,9 @@ "SELECT": "Select a timezone", "TYPE_AHEAD": "Search a timezone" } + }, + "Topology": { + "GRAPH_VIEW": "Graph View", + "LIST_VIEW": "List View" } } diff --git a/src/app/Topology/Toolbar/TopologyToolbar.tsx b/src/app/Topology/Toolbar/TopologyToolbar.tsx index 3227a40d7..e603ddbb3 100644 --- a/src/app/Topology/Toolbar/TopologyToolbar.tsx +++ b/src/app/Topology/Toolbar/TopologyToolbar.tsx @@ -50,6 +50,7 @@ import { HelpButton } from './HelpButton'; import { QuickSearchButton } from './QuickSearchButton'; import { TopologyFilterChips } from './TopologyFilterChips'; import { TopologyFilters } from './TopologyFilters'; +import { useTranslation } from 'react-i18next'; export enum TopologyToolbarVariant { Graph = 'graph', @@ -65,6 +66,7 @@ export interface TopologyToolbarProps { export const TopologyToolbar: React.FC = ({ variant, visualization, isDisabled, ...props }) => { const isGraphView = variant === TopologyToolbarVariant.Graph; const dispatch = useDispatch(); + const { t } = useTranslation(); const [quicksearchOpen, setQuicksearchOpen] = React.useState(false); @@ -85,21 +87,21 @@ export const TopologyToolbar: React.FC = ({ variant, visua } }, [setQuicksearchOpen]); - const actionIcon = React.useMemo( + const modeIcon = React.useMemo( () => ( ), - [isGraphView, toggleView] + [isGraphView, toggleView, t] ); const shortcuts = React.useMemo(() => { @@ -192,7 +194,7 @@ export const TopologyToolbar: React.FC = ({ variant, visua ) : null} {!isDisabled ? {shortcuts} : null} - {actionIcon} + {modeIcon}