diff --git a/src/routes/details/awsBreakdown/awsBreakdown.tsx b/src/routes/details/awsBreakdown/awsBreakdown.tsx index 1c6bbf6a1..9800a1a6a 100644 --- a/src/routes/details/awsBreakdown/awsBreakdown.tsx +++ b/src/routes/details/awsBreakdown/awsBreakdown.tsx @@ -109,12 +109,12 @@ const mapStateToProps = createMapStateToProps ), costType, currency, - defaultBreadcrumbPath: formatPath(routes.awsDetails.path), description: queryFromRoute[breakdownDescKey], detailsURL, emptyStateTitle: intl.formatMessage(messages.awsDetailsTitle), diff --git a/src/routes/details/azureBreakdown/azureBreakdown.tsx b/src/routes/details/azureBreakdown/azureBreakdown.tsx index cb7014dbe..455fe3c20 100644 --- a/src/routes/details/azureBreakdown/azureBreakdown.tsx +++ b/src/routes/details/azureBreakdown/azureBreakdown.tsx @@ -89,9 +89,9 @@ const mapStateToProps = createMapStateToProps, currency, - defaultBreadcrumbPath: formatPath(routes.azureDetails.path), description: queryFromRoute[breakdownDescKey], detailsURL, emptyStateTitle: intl.formatMessage(messages.azureDetailsTitle), diff --git a/src/routes/details/components/breakdown/breakdownBase.tsx b/src/routes/details/components/breakdown/breakdownBase.tsx index 756017622..52f401c60 100644 --- a/src/routes/details/components/breakdown/breakdownBase.tsx +++ b/src/routes/details/components/breakdown/breakdownBase.tsx @@ -55,13 +55,14 @@ interface BreakdownOwnProps extends RouterComponentProps { } export interface BreakdownStateProps { + breadcrumbLabel?: string; + breadcrumbPath?: string; // Default breadcrumb path clusterInfoComponent?: React.ReactNode; costDistribution?: string; costOverviewComponent?: React.ReactNode; costType?: string; currency?: string; dataDetailsComponent?: React.ReactNode; - defaultBreadcrumbPath?: string; description?: string; detailsURL?: string; emptyStateTitle?: string; @@ -280,12 +281,13 @@ class BreakdownBase extends React.Component { public render() { const { + breadcrumbLabel, + breadcrumbPath, clusterInfoComponent, costDistribution, costType, currency, dataDetailsComponent, - defaultBreadcrumbPath, description, detailsURL, emptyStateTitle, @@ -327,10 +329,11 @@ class BreakdownBase extends React.Component { return ( <> { public state: BreakdownHeaderState = { ...this.defaultState }; private getBackToLink = groupByKey => { - const { breadcrumb, intl, router, tagPathsType } = this.props; + const { breadcrumbLabel, breadcrumbPath, intl, router, tagPathsType } = this.props; - if (!breadcrumb) { + if (!breadcrumbPath) { return null; } return ( - - {intl.formatMessage(messages.breakdownBackToDetails, { - value: intl.formatMessage(messages.breakdownBackToTitles, { value: tagPathsType }), - groupBy: groupByKey, - })} + + {breadcrumbLabel + ? breadcrumbLabel + : intl.formatMessage(messages.breakdownBackToDetails, { + value: intl.formatMessage(messages.breakdownBackToTitles, { value: tagPathsType }), + groupBy: groupByKey, + })} ); }; diff --git a/src/routes/details/gcpBreakdown/gcpBreakdown.tsx b/src/routes/details/gcpBreakdown/gcpBreakdown.tsx index 6255147d8..e64ffb9d3 100644 --- a/src/routes/details/gcpBreakdown/gcpBreakdown.tsx +++ b/src/routes/details/gcpBreakdown/gcpBreakdown.tsx @@ -87,9 +87,9 @@ const mapStateToProps = createMapStateToProps, currency, - defaultBreadcrumbPath: formatPath(routes.gcpDetails.path), description: queryFromRoute[breakdownDescKey], detailsURL, emptyStateTitle: intl.formatMessage(messages.gcpDetailsTitle), diff --git a/src/routes/details/ibmBreakdown/ibmBreakdown.tsx b/src/routes/details/ibmBreakdown/ibmBreakdown.tsx index c2531ae2b..7b1478e45 100644 --- a/src/routes/details/ibmBreakdown/ibmBreakdown.tsx +++ b/src/routes/details/ibmBreakdown/ibmBreakdown.tsx @@ -87,9 +87,9 @@ const mapStateToProps = createMapStateToProps, currency, - defaultBreadcrumbPath: formatPath(routes.ibmDetails.path), description: queryFromRoute[breakdownDescKey], detailsURL, emptyStateTitle: intl.formatMessage(messages.ibmDetailsTitle), diff --git a/src/routes/details/ociBreakdown/ociBreakdown.tsx b/src/routes/details/ociBreakdown/ociBreakdown.tsx index 1e222391b..689d8bd82 100644 --- a/src/routes/details/ociBreakdown/ociBreakdown.tsx +++ b/src/routes/details/ociBreakdown/ociBreakdown.tsx @@ -87,9 +87,9 @@ const mapStateToProps = createMapStateToProps( ); return { + breadcrumbPath: formatPath(routes.ociDetails.path), costOverviewComponent: , currency, - defaultBreadcrumbPath: formatPath(routes.ociDetails.path), description: queryFromRoute[breakdownDescKey], detailsURL, emptyStateTitle: intl.formatMessage(messages.ociDetailsTitle), diff --git a/src/routes/details/ocpBreakdown/ocpBreakdown.tsx b/src/routes/details/ocpBreakdown/ocpBreakdown.tsx index e869e4cc1..bb6009e0e 100644 --- a/src/routes/details/ocpBreakdown/ocpBreakdown.tsx +++ b/src/routes/details/ocpBreakdown/ocpBreakdown.tsx @@ -23,7 +23,7 @@ import { providersQuery, providersSelectors } from 'store/providers'; import { reportActions, reportSelectors } from 'store/reports'; import { uiActions } from 'store/ui'; import { formatPath } from 'utils/paths'; -import { breakdownDescKey, breakdownTitleKey, platformCategoryKey } from 'utils/props'; +import { breadcrumbLabelKey, breakdownDescKey, breakdownTitleKey, platformCategoryKey } from 'utils/props'; import type { RouterComponentProps } from 'utils/router'; import { withRouter } from 'utils/router'; import { getCostDistribution, getCurrency } from 'utils/sessionStorage'; @@ -94,9 +94,11 @@ const mapStateToProps = createMapStateToProps : undefined, dataDetailsComponent: groupBy === 'cluster' ? : undefined, costDistribution, @@ -111,7 +113,6 @@ const mapStateToProps = createMapStateToProps ), currency, - defaultBreadcrumbPath: formatPath(routes.ocpDetails.path), description: queryFromRoute[breakdownDescKey], detailsURL, emptyStateTitle: intl.formatMessage(messages.ocpDetailsTitle), diff --git a/src/routes/details/ocpBreakdown/optimizations.tsx b/src/routes/details/ocpBreakdown/optimizations.tsx index a6e446545..05e8b903d 100644 --- a/src/routes/details/ocpBreakdown/optimizations.tsx +++ b/src/routes/details/ocpBreakdown/optimizations.tsx @@ -24,7 +24,8 @@ const Optimizations: React.FC = () => { const groupByValue = getGroupByValue(queryFromRoute); const otimizationsTab = location.search.indexOf('optimizationsTab') === -1 ? '&optimizationsTab=true' : ''; - const clusterFilter = queryState?.filter_by?.cluster ? queryState.filter_by.cluster : undefined; + const clusterFilter = queryState?.filter_by?.cluster; + const isOptimizationsPath = queryFromRoute?.optimizationsPath === 'true'; return ( = () => { cluster={clusterFilter} hideCluster={clusterFilter !== undefined} hideProject={groupBy === 'project'} + isOptimizationsPath={isOptimizationsPath} linkPath={formatPath(routes.optimizationsBreakdown.path)} linkState={{ ...(location.state && location.state), diff --git a/src/routes/details/rhelBreakdown/rhelBreakdown.tsx b/src/routes/details/rhelBreakdown/rhelBreakdown.tsx index c57ff7e12..ea5b92ec7 100644 --- a/src/routes/details/rhelBreakdown/rhelBreakdown.tsx +++ b/src/routes/details/rhelBreakdown/rhelBreakdown.tsx @@ -89,9 +89,9 @@ const mapStateToProps = createMapStateToProps, currency, - defaultBreadcrumbPath: formatPath(routes.rhelDetails.path), description: queryFromRoute[breakdownDescKey], detailsURL, emptyStateTitle: intl.formatMessage(messages.rhelDetailsTitle), diff --git a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx index 862f94742..63962ce2e 100644 --- a/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx +++ b/src/routes/optimizations/optimizationsBreakdown/optimizationsBreakdown.tsx @@ -1,10 +1,5 @@ import AsyncComponent from '@redhat-cloud-services/frontend-components/AsyncComponent'; -import messages from 'locales/messages'; import React from 'react'; -import { useIntl } from 'react-intl'; -import { routes } from 'routes'; -import { useQueryFromRoute } from 'utils/hooks'; -import { formatPath } from 'utils/paths'; import { styles } from './optimizationsBreakdown.styles'; @@ -15,19 +10,9 @@ interface OptimizationsBreakdownOwnProps { type OptimizationsBreakdownProps = OptimizationsBreakdownOwnProps; const OptimizationsBreakdown: React.FC = () => { - const intl = useIntl(); - const queryFromRoute = useQueryFromRoute(); - return (
- +
); }; diff --git a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx b/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx index 1042343e0..d116c9259 100644 --- a/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx +++ b/src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx @@ -30,6 +30,7 @@ const OptimizationsDetails: React.FC = () => { linkState={{ ...(location.state && location.state), }} + projectPath={formatPath(routes.ocpBreakdown.path)} /> ); diff --git a/src/routes/utils/queryState.ts b/src/routes/utils/queryState.ts index 8f9feea74..ce566d681 100644 --- a/src/routes/utils/queryState.ts +++ b/src/routes/utils/queryState.ts @@ -2,11 +2,11 @@ import type * as H from 'history'; import { cloneDeep } from 'lodash'; export function clearQueryState(location: H.Location, key: string) { - if (location?.state && location.state[key]) { + if (location?.state?.[key]) { location.state[key] = undefined; } } export function getQueryState(location: H.Location, key: string) { - return location?.state && location.state[key] ? cloneDeep(location.state[key]) : undefined; + return location?.state?.[key] ? cloneDeep(location.state[key]) : undefined; }