Migrate optimizations badge to federated module

fec.config.js

@@ -62,7 +62,7 @@ module.exports = {
     exposes: {
       './RootApp': path.resolve(__dirname, './src/appEntry.tsx'),
       // Shared component module path. Must include default export!
-      './OptimizationsBadge': path.resolve(__dirname, './src/modules/optimizationsBadge.tsx'),
+      './OptimizationsBadge': path.resolve(__dirname, './src/fed-modules/optimizationsBadge.tsx'),
     },
     shared: [
       { 'react-redux': { version: dependencies['react-redux'] } },

locales/data.json

@@ -10561,6 +10561,36 @@
         "value": "Optimizations"
       }
     ],
+    "optimizationsBadgeAll": [
+      {
+        "type": 0,
+        "value": "No Filter"
+      }
+    ],
+    "optimizationsBadgeDemo": [
+      {
+        "type": 0,
+        "value": "Optimizations Badge Demo"
+      }
+    ],
+    "optimizationsBadgeGroupBy": [
+      {
+        "type": 0,
+        "value": "Filtered by "
+      },
+      {
+        "type": 1,
+        "value": "groupBy"
+      },
+      {
+        "type": 0,
+        "value": "="
+      },
+      {
+        "type": 1,
+        "value": "groupByValue"
+      }
+    ],
     "optimizationsDetails": [
       {
         "offset": 0,

locales/translations.json

@@ -428,6 +428,9 @@
   "openShiftCloudInfrastructureDesc": "Infrastructure cost attributed to OpenShift Container Platform, based on a subset of cloud cost data.",
   "openShiftDesc": "Total cost for OpenShift Container Platform, comprising the infrastructure cost and cost calculated from metrics.",
   "optimizations": "Optimizations",
+  "optimizationsBadgeAll": "No Filter",
+  "optimizationsBadgeDemo": "Optimizations Badge Demo",
+  "optimizationsBadgeGroupBy": "Filtered by {groupBy}={groupByValue}",
   "optimizationsDetails": "{count, plural, =0 {No optimizations} =1 {{count} optimization} other {{count} optimizations}}",
   "optimizationsInfo": "Assess and monitor your usage so you can optimize your OpenShift resources.",
   "optimizationsInfoArialLabel": "A description of optimizations",

src/components/permissions/permissions.tsx

@@ -94,6 +94,7 @@ const PermissionsBase: React.FC<PermissionsProps> = ({
       case formatPath(routes.ocpBreakdownOptimizations.path):
       case formatPath(routes.ocpDetails.path):
         return ocp;
+      case formatPath(routes.optimizationsBadgeDemo.path):
       case formatPath(routes.optimizationsBreakdown.path):
       case formatPath(routes.optimizationsDetails.path):
         return ros;

src/modules/optimizationsBadge.tsx → src/fed-modules/optimizationsBadge.tsx

@@ -2,25 +2,29 @@
 import IntlProvider from '@redhat-cloud-services/frontend-components-translations/Provider';
 import { getLocale } from 'components/i18n';
 import React from 'react';
-import { OptimizationsBadge } from 'routes/components/optimizations';
+import { OptimizationsBadge } from 'routes/optimizations/optimizationsBadge';
 
 // eslint-disable-next-line no-restricted-imports
 import messages from '../../locales/data.json';
 
 export interface OptimizationsBadgeOwnProps {
-  // TBD...
+  filter?: string;
+  filterValue?: string;
 }
 
 type OptimizationsBadgeProps = OptimizationsBadgeOwnProps;
 
-const FMOptimizationsBadge: React.FC<OptimizationsBadgeProps> = () => {
+const MfeOptimizationsBadge: React.FC<OptimizationsBadgeProps> = ({
+  filter,
+  filterValue,
+}: OptimizationsBadgeOwnProps) => {
   const locale = getLocale();
 
   return (
     <IntlProvider defaultLocale="en" locale={locale} messages={messages[locale]} onError={console.log}>
-      <OptimizationsBadge />
+      <OptimizationsBadge filter={filter} filterValue={filterValue} />
     </IntlProvider>
   );
 };
 
-export default FMOptimizationsBadge;
+export default MfeOptimizationsBadge;

src/locales/messages.ts

@@ -2696,6 +2696,21 @@ export default defineMessages({
     description: 'Optimizations',
     id: 'optimizations',
   },
+  optimizationsBadgeDemo: {
+    defaultMessage: 'Optimizations Badge Demo',
+    description: 'Optimizations Badge Demo',
+    id: 'optimizationsBadgeDemo',
+  },
+  optimizationsBadgeDemoDefault: {
+    defaultMessage: 'No Filter',
+    description: 'No Filter',
+    id: 'optimizationsBadgeAll',
+  },
+  optimizationsBadgeDemoGroupBy: {
+    defaultMessage: 'Filtered by {groupBy}={groupByValue}',
+    description: 'Filtered by',
+    id: 'optimizationsBadgeGroupBy',
+  },
   optimizationsDetails: {
     defaultMessage: '{count, plural, =0 {No optimizations} =1 {{count} optimization} other {{count} optimizations}}',
     description: 'Recommendation details',

src/routes.tsx

@@ -18,6 +18,10 @@ const OciBreakdown = lazy(() => import(/* webpackChunkName: "ociBreakdown" */ 'r
 const OciDetails = lazy(() => import(/* webpackChunkName: "ociDetails" */ 'routes/details/ociDetails'));
 const OcpBreakdown = lazy(() => import(/* webpackChunkName: "ocpBreakdown" */ 'routes/details/ocpBreakdown'));
 const OcpDetails = lazy(() => import(/* webpackChunkName: "ocpDetails" */ 'routes/details/ocpDetails'));
+const OptimizationsBadgeDemo = lazy(
+  () =>
+    import(/* webpackChunkName: "recommendations" */ 'routes/optimizations/optimizationsBadge/optimizationsBadgeDemo')
+);
 const OptimizationsBreakdown = lazy(
   () => import(/* webpackChunkName: "recommendations" */ 'routes/optimizations/optimizationsBreakdown')
 );
@@ -92,6 +96,10 @@ const routes = {
     element: userAccess(OcpDetails),
     path: '/ocp',
   },
+  optimizationsBadgeDemo: {
+    element: userAccess(OptimizationsBadgeDemo),
+    path: '/optimizations/badge',
+  },
   optimizationsBreakdown: {
     element: userAccess(OptimizationsBreakdown),
     path: '/optimizations/breakdown',

src/routes/components/optimizations/index.ts

@@ -1,3 +1,2 @@
-export * from './optimizationsBadge';
 export * from './optimizationsTable';
 export * from './optimizationsToolbar';

src/routes/details/ocpBreakdown/ocpBreakdown.tsx

@@ -10,9 +10,9 @@ import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { routes } from 'routes';
-import { OptimizationsBadge } from 'routes/components/optimizations';
 import type { BreakdownStateProps } from 'routes/details/components/breakdown';
 import { BreakdownBase } from 'routes/details/components/breakdown';
+import { OptimizationsBadge } from 'routes/optimizations/optimizationsBadge';
 import { getGroupById, getGroupByValue } from 'routes/utils/groupBy';
 import { filterProviders } from 'routes/utils/providers';
 import { getQueryState } from 'routes/utils/queryState';

src/routes/optimizations/optimizationsBadge/index.ts

@@ -0,0 +1,2 @@
+export * from './optimizationsBadge';
+export { default as OptimizationsBadgeDemo } from './optimizationsBadgeDemo';

src/routes/components/optimizations/optimizationsBadge.tsx → src/routes/optimizations/optimizationsBadge/optimizationsBadge.tsx

@@ -1,24 +1,21 @@
 import { Badge } from '@patternfly/react-core';
-import type { Query } from 'api/queries/query';
 import { getQuery } from 'api/queries/query';
-import { parseQuery } from 'api/queries/rosQuery';
 import type { RosReport } from 'api/ros/ros';
 import { RosPathsType, RosType } from 'api/ros/ros';
 import type { AxiosError } from 'axios';
 import messages from 'locales/messages';
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
 import type { AnyAction } from 'redux';
 import type { ThunkDispatch } from 'redux-thunk';
-import { getGroupById, getGroupByValue } from 'routes/utils/groupBy';
 import type { RootState } from 'store';
 import { FetchStatus } from 'store/common';
 import { rosActions, rosSelectors } from 'store/ros';
 
 export interface OptimizationsBadgeOwnProps {
-  // TBD...
+  filter?: string;
+  filterValue?: string;
 }
 
 export interface OptimizationsBadgeStateProps {
@@ -33,30 +30,22 @@ type OptimizationsBadgeProps = OptimizationsBadgeOwnProps & OptimizationsBadgeSt
 const reportPathsType = RosPathsType.recommendations;
 const reportType = RosType.ros;
 
-const OptimizationsBadge: React.FC<OptimizationsBadgeProps> = () => {
-  const { report } = useMapToProps();
+const OptimizationsBadge: React.FC<OptimizationsBadgeProps> = ({ filter, filterValue }: OptimizationsBadgeOwnProps) => {
+  const { report } = useMapToProps({ filter, filterValue });
   const intl = useIntl();
 
   const count = report?.meta ? report.meta.count : 0;
 
   return <Badge screenReaderText={intl.formatMessage(messages.optimizationsDetails, { count })}>{count}</Badge>;
 };
 
-const useQueryFromRoute = () => {
-  const location = useLocation();
-  return parseQuery<Query>(location.search);
-};
-
-const useMapToProps = (): OptimizationsBadgeStateProps => {
+const useMapToProps = ({ filter, filterValue }: OptimizationsBadgeOwnProps): OptimizationsBadgeStateProps => {
   const dispatch: ThunkDispatch<RootState, any, AnyAction> = useDispatch();
-  const queryFromRoute = useQueryFromRoute();
-  const groupBy = getGroupById(queryFromRoute);
-  const groupByValue = getGroupByValue(queryFromRoute);
 
   // Don't need pagination here
   const reportQuery: any = {
-    ...(groupBy && {
-      [groupBy]: groupByValue, // project filter
+    ...(filter && {
+      [filter]: filterValue, // project filter
     }),
   };
 

src/routes/optimizations/optimizationsBadge/optimizationsBadgeDemo.tsx

@@ -0,0 +1,58 @@
+import { Card, CardBody, CardTitle, Grid, GridItem, PageSection, Title, TitleSizes } from '@patternfly/react-core';
+import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components/PageHeader';
+import messages from 'locales/messages';
+import React from 'react';
+import { useIntl } from 'react-intl';
+
+import { OptimizationsBadge } from './optimizationsBadge';
+
+interface OptimizationsDetailsOwnProps {
+  // TBD...
+}
+
+type OptimizationsDetailsProps = OptimizationsDetailsOwnProps;
+
+const OptimizationsBadgeDemo: React.FC<OptimizationsDetailsProps> = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <PageHeader>
+        <PageHeaderTitle title={intl.formatMessage(messages.optimizationsBadgeDemo)} />
+      </PageHeader>
+      <PageSection isFilled>
+        <Grid hasGutter md={6}>
+          <GridItem span={6}>
+            <Card>
+              <CardTitle>
+                <Title headingLevel="h2" size={TitleSizes.lg}>
+                  {intl.formatMessage(messages.optimizationsBadgeDemoGroupBy, {
+                    groupBy: 'project',
+                    groupByValue: 'openshift',
+                  })}
+                </Title>
+              </CardTitle>
+              <CardBody>
+                <OptimizationsBadge filter="project" filterValue="openshift" />
+              </CardBody>
+            </Card>
+          </GridItem>
+          <GridItem span={6}>
+            <Card>
+              <CardTitle>
+                <Title headingLevel="h2" size={TitleSizes.lg}>
+                  {intl.formatMessage(messages.optimizationsBadgeDemoDefault)}
+                </Title>
+              </CardTitle>
+              <CardBody>
+                <OptimizationsBadge />
+              </CardBody>
+            </Card>
+          </GridItem>
+        </Grid>
+      </PageSection>
+    </>
+  );
+};
+
+export default OptimizationsBadgeDemo;

src/utils/paths.ts

@@ -6,7 +6,7 @@ import { routes } from 'routes';
 // Note the basename does not include a release prefix (/beta, /preview, etc.), unlike the getBaseName function from
 // @redhat-cloud-services/frontend-components-utilities/helpers
 export const formatPath = path => {
-  const basename = '/openshift/cost-management-mfe';
+  const basename = '/microfrontend/cost-management-mfe';
   return path === routes.overview.path ? basename : `${basename}${path}`;
 };