Add project link to optimizations breakdown page

https://issues.redhat.com/browse/COST-4527

src/routes/details/awsBreakdown/awsBreakdown.tsx

@@ -109,12 +109,12 @@ const mapStateToProps = createMapStateToProps<AwsBreakdownOwnProps, BreakdownSta
   const title = queryFromRoute[breakdownTitleKey] ? queryFromRoute[breakdownTitleKey] : groupByValue;
 
   return {
+    breadcrumbPath: formatPath(routes.awsDetails.path),
     costOverviewComponent: (
       <CostOverview costType={costType} currency={currency} groupBy={groupBy} query={queryFromRoute} report={report} />
     ),
     costType,
     currency,
-    defaultBreadcrumbPath: formatPath(routes.awsDetails.path),
     description: queryFromRoute[breakdownDescKey],
     detailsURL,
     emptyStateTitle: intl.formatMessage(messages.awsDetailsTitle),

src/routes/details/azureBreakdown/azureBreakdown.tsx

@@ -89,9 +89,9 @@ const mapStateToProps = createMapStateToProps<AzureOwnProps, BreakdownStateProps
   const title = queryFromRoute[breakdownTitleKey] ? queryFromRoute[breakdownTitleKey] : groupByValue;
 
   return {
+    breadcrumbPath: formatPath(routes.azureDetails.path),
     costOverviewComponent: <CostOverview currency={currency} groupBy={groupBy} report={report} />,
     currency,
-    defaultBreadcrumbPath: formatPath(routes.azureDetails.path),
     description: queryFromRoute[breakdownDescKey],
     detailsURL,
     emptyStateTitle: intl.formatMessage(messages.azureDetailsTitle),

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<BreakdownProps, BreakdownState> {
 
   public render() {
     const {
+      breadcrumbLabel,
+      breadcrumbPath,
       clusterInfoComponent,
       costDistribution,
       costType,
       currency,
       dataDetailsComponent,
-      defaultBreadcrumbPath,
       description,
       detailsURL,
       emptyStateTitle,
@@ -327,10 +329,11 @@ class BreakdownBase extends React.Component<BreakdownProps, BreakdownState> {
     return (
       <>
         <BreakdownHeader
-          breadcrumb={
-            router.location.state && router.location.state.details
+          breadcrumbLabel={breadcrumbLabel}
+          breadcrumbPath={
+            router?.location?.state?.details?.breadcrumbPath
               ? router.location.state.details.breadcrumbPath
-              : defaultBreadcrumbPath
+              : breadcrumbPath
           }
           clusterInfoComponent={clusterInfoComponent}
           dataDetailsComponent={dataDetailsComponent}

src/routes/details/components/breakdown/breakdownHeader.tsx

@@ -39,7 +39,8 @@ import { withRouter } from 'utils/router';
 import { styles } from './breakdownHeader.styles';
 
 interface BreakdownHeaderOwnProps extends RouterComponentProps {
-  breadcrumb?: string;
+  breadcrumbLabel?: string;
+  breadcrumbPath?: string;
   clusterInfoComponent?: React.ReactNode;
   costDistribution?: string;
   costType?: string;
@@ -80,17 +81,19 @@ class BreakdownHeader extends React.Component<BreakdownHeaderProps, any> {
   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 (
-      <Link to={breadcrumb} state={{ ...router.location.state }}>
-        {intl.formatMessage(messages.breakdownBackToDetails, {
-          value: intl.formatMessage(messages.breakdownBackToTitles, { value: tagPathsType }),
-          groupBy: groupByKey,
-        })}
+      <Link to={breadcrumbPath} state={{ ...router.location.state }}>
+        {breadcrumbLabel
+          ? breadcrumbLabel
+          : intl.formatMessage(messages.breakdownBackToDetails, {
+              value: intl.formatMessage(messages.breakdownBackToTitles, { value: tagPathsType }),
+              groupBy: groupByKey,
+            })}
       </Link>
     );
   };

src/routes/details/gcpBreakdown/gcpBreakdown.tsx

@@ -87,9 +87,9 @@ const mapStateToProps = createMapStateToProps<GcpBreakdownOwnProps, BreakdownSta
   );
 
   return {
+    breadcrumbPath: formatPath(routes.gcpDetails.path),
     costOverviewComponent: <CostOverview currency={currency} groupBy={groupBy} report={report} />,
     currency,
-    defaultBreadcrumbPath: formatPath(routes.gcpDetails.path),
     description: queryFromRoute[breakdownDescKey],
     detailsURL,
     emptyStateTitle: intl.formatMessage(messages.gcpDetailsTitle),

src/routes/details/ibmBreakdown/ibmBreakdown.tsx

@@ -87,9 +87,9 @@ const mapStateToProps = createMapStateToProps<IbmBreakdownOwnProps, BreakdownSta
   );
 
   return {
+    breadcrumbPath: formatPath(routes.ibmDetails.path),
     costOverviewComponent: <CostOverview currency={currency} groupBy={groupBy} report={report} />,
     currency,
-    defaultBreadcrumbPath: formatPath(routes.ibmDetails.path),
     description: queryFromRoute[breakdownDescKey],
     detailsURL,
     emptyStateTitle: intl.formatMessage(messages.ibmDetailsTitle),

src/routes/details/ociBreakdown/ociBreakdown.tsx

@@ -87,9 +87,9 @@ const mapStateToProps = createMapStateToProps<OciOwnProps, BreakdownStateProps>(
   );
 
   return {
+    breadcrumbPath: formatPath(routes.ociDetails.path),
     costOverviewComponent: <CostOverview currency={currency} groupBy={groupBy} report={report} />,
     currency,
-    defaultBreadcrumbPath: formatPath(routes.ociDetails.path),
     description: queryFromRoute[breakdownDescKey],
     detailsURL,
     emptyStateTitle: intl.formatMessage(messages.ociDetailsTitle),

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<OcpBreakdownOwnProps, BreakdownSta
     providersQueryString
   );
 
+  const breadcrumbLabel = queryFromRoute[breadcrumbLabelKey] ? queryFromRoute[breadcrumbLabelKey] : undefined;
   const title = queryFromRoute[breakdownTitleKey] ? queryFromRoute[breakdownTitleKey] : groupByValue;
 
   return {
+    breadcrumbLabel,
     clusterInfoComponent: groupBy === 'cluster' ? <ClusterInfo clusterId={groupByValue} /> : undefined,
     dataDetailsComponent: groupBy === 'cluster' ? <DataDetails clusterId={groupByValue} /> : undefined,
     costDistribution,
@@ -111,7 +113,6 @@ const mapStateToProps = createMapStateToProps<OcpBreakdownOwnProps, BreakdownSta
       />
     ),
     currency,
-    defaultBreadcrumbPath: formatPath(routes.ocpDetails.path),
     description: queryFromRoute[breakdownDescKey],
     detailsURL,
     emptyStateTitle: intl.formatMessage(messages.ocpDetailsTitle),

src/routes/details/ocpBreakdown/optimizations.tsx

@@ -24,7 +24,8 @@ const Optimizations: React.FC<OptimizationsProps> = () => {
   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 (
     <AsyncComponent
@@ -36,6 +37,7 @@ const Optimizations: React.FC<OptimizationsProps> = () => {
       cluster={clusterFilter}
       hideCluster={clusterFilter !== undefined}
       hideProject={groupBy === 'project'}
+      isOptimizationsPath={isOptimizationsPath}
       linkPath={formatPath(routes.optimizationsBreakdown.path)}
       linkState={{
         ...(location.state && location.state),

src/routes/details/rhelBreakdown/rhelBreakdown.tsx

@@ -89,9 +89,9 @@ const mapStateToProps = createMapStateToProps<RhelBreakdownOwnProps, BreakdownSt
   const title = queryFromRoute[breakdownTitleKey] ? queryFromRoute[breakdownTitleKey] : groupByValue;
 
   return {
+    breadcrumbPath: formatPath(routes.rhelDetails.path),
     costOverviewComponent: <CostOverview currency={currency} groupBy={groupBy} report={report} title={title} />,
     currency,
-    defaultBreadcrumbPath: formatPath(routes.rhelDetails.path),
     description: queryFromRoute[breakdownDescKey],
     detailsURL,
     emptyStateTitle: intl.formatMessage(messages.rhelDetailsTitle),

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<OptimizationsBreakdownProps> = () => {
-  const intl = useIntl();
-  const queryFromRoute = useQueryFromRoute();
-
   return (
     <div style={styles.container}>
-      <AsyncComponent
-        scope="costManagementMfe"
-        appName="cost-management-mfe"
-        module="./MfeOptimizationsBreakdown"
-        breadcrumbLabel={intl.formatMessage(messages.breakdownBackToOptimizations)}
-        breadcrumbPath={formatPath(routes.optimizationsDetails.path)}
-        id={queryFromRoute ? queryFromRoute.id : ''}
-      />
+      <AsyncComponent scope="costManagementMfe" appName="cost-management-mfe" module="./MfeOptimizationsBreakdown" />
     </div>
   );
 };

src/routes/optimizations/optimizationsDetails/optimizationsDetails.tsx

@@ -30,6 +30,7 @@ const OptimizationsDetails: React.FC<OptimizationsDetailsProps> = () => {
         linkState={{
           ...(location.state && location.state),
         }}
+        projectPath={formatPath(routes.ocpBreakdown.path)}
       />
     </div>
   );

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;
 }