fix(scorecard): add threshold-based status colors to entities table (#2640)

* fix(scorecard): add threshold-based status colors to entities table

* improve query provider

* fix nfs mode

* resolve merge conflicts with main branch

* fix api reports

* fix api reports

* remove custome retry and refetchOnWindowFocus

* revert e2e

* fix nfs app

* fix customized title

* fix unit test

* fix e2e tests

* handle error on id not found

Author: Eswaraiahsapram

workspaces/scorecard/.changeset/plenty-lamps-dress.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-scorecard': patch
+---
+
+add threshold-based status colors to entities table

workspaces/scorecard/packages/app-legacy/e2e-tests/pages/ScorecardDrillDownPage.ts

@@ -65,10 +65,10 @@ export class ScorecardDrillDownPage {
     }
   }
 
-  async expectPageTitle(metricId: MetricId) {
+  async expectPageTitle(metricId: MetricId, customTitle?: string) {
     await expect(
       this.page.getByRole('heading', {
-        name: this.translations.metric[metricId].title,
+        name: customTitle ?? this.translations.metric[metricId].title,
         level: 1,
       }),
     ).toBeVisible();

workspaces/scorecard/packages/app-legacy/e2e-tests/scorecard.test.ts

@@ -710,7 +710,10 @@ test.describe('Scorecard Plugin Tests', () => {
           await scorecardDrillDownPage.expectOnPage('github.open_prs', {
             aggregationId: AGGREGATED_CARDS_METRIC_IDS.withGithubOpenPrs,
           });
-          await scorecardDrillDownPage.expectPageTitle('github.open_prs');
+          await scorecardDrillDownPage.expectPageTitle(
+            'github.open_prs',
+            githubAggregatedResponse.metadata.title,
+          );
           await scorecardDrillDownPage.expectDrillDownCardSnapshot(
             'github.open_prs',
             {
@@ -824,7 +827,10 @@ test.describe('Scorecard Plugin Tests', () => {
           await scorecardDrillDownPage.expectOnPage('jira.open_issues', {
             aggregationId: AGGREGATED_CARDS_METRIC_IDS.withJiraOpenIssuesKpi,
           });
-          await scorecardDrillDownPage.expectPageTitle('jira.open_issues');
+          await scorecardDrillDownPage.expectPageTitle(
+            'jira.open_issues',
+            jiraAggregatedResponse.metadata.title,
+          );
           await scorecardDrillDownPage.expectDrillDownCardSnapshot(
             'jira.open_issues',
             {

workspaces/scorecard/plugins/scorecard/package.json

@@ -64,6 +64,7 @@
     "@mui/icons-material": "5.18.0",
     "@mui/material": "5.18.0",
     "@red-hat-developer-hub/backstage-plugin-scorecard-common": "workspace:^",
+    "@tanstack/react-query": "^5.95.2",
     "date-fns": "^4.1.0",
     "react-use": "^17.2.4",
     "recharts": "^3.3.0"

workspaces/scorecard/plugins/scorecard/report.api.md

@@ -17,12 +17,12 @@ export const EntityScorecardContent: () => JSX_2.Element;
 export { ScorecardErrorStatusIcon };
 
 // @public
-export const ScorecardHomepageCard: (input: {
+export const ScorecardHomepageCard: (props: {
   metricId?: string;
   aggregationId?: string;
   showSubheader?: boolean;
   showInfo?: boolean;
-}) => JSX_2.Element | null;
+}) => JSX_2.Element;
 
 // @public
 export const ScorecardPage: () => JSX_2.Element;

workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx

@@ -16,7 +16,7 @@
 
 import { HomePageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';
 import type { RendererProps } from '@backstage/plugin-home-react';
-import { ScorecardHomepageCard } from '../../components/ScorecardHomepageSection';
+import { ScorecardHomepageCardWithProvider } from '../../components/ScorecardHomepageSection';
 
 const defaultCardLayout = {
   width: {
@@ -32,19 +32,19 @@ const defaultCardLayout = {
 } as const;
 
 function AggregatedCardWithDeprecatedMetricIdContent() {
-  return <ScorecardHomepageCard metricId="jira.open_issues" />;
+  return <ScorecardHomepageCardWithProvider metricId="jira.open_issues" />;
 }
 
 function AggregatedCardWithDefaultAggregationContent() {
-  return <ScorecardHomepageCard aggregationId="github.open_prs" />;
+  return <ScorecardHomepageCardWithProvider aggregationId="github.open_prs" />;
 }
 
 function AggregatedCardWithJiraOpenIssuesContent() {
-  return <ScorecardHomepageCard aggregationId="openIssuesKpi" />;
+  return <ScorecardHomepageCardWithProvider aggregationId="openIssuesKpi" />;
 }
 
 function AggregatedCardWithGithubOpenPrsContent() {
-  return <ScorecardHomepageCard aggregationId="openPrsKpi" />;
+  return <ScorecardHomepageCardWithProvider aggregationId="openPrsKpi" />;
 }
 
 function BorderlessHomeWidgetRenderer({ Content }: RendererProps) {

workspaces/scorecard/plugins/scorecard/src/alpha/extensions/scorecardPage.tsx

@@ -26,6 +26,8 @@ export const scorecardPage = PageBlueprint.make({
     path: '/scorecard/aggregations/:aggregationId/metrics/:metricId',
     routeRef: scorecardDrillDownRouteRef,
     loader: () =>
-      import('../../pages/ScorecardPage').then(m => <m.ScorecardPage />),
+      import('../../pages/ScorecardPage').then(m => (
+        <m.ScorecardPageWithProvider />
+      )),
   },
 });

workspaces/scorecard/plugins/scorecard/src/api/ScorecardQueryProvider.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useMemo } from 'react';
+import type { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+let queryClient: QueryClient | undefined;
+
+function getQueryClient() {
+  if (!queryClient) {
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: {
+          staleTime: 5 * 60 * 1000, // 5 minutes
+          gcTime: 5 * 60 * 1000, // 5 minutes
+          retry: 1,
+          refetchOnWindowFocus: false, // do not refetch when window regains focus
+        },
+      },
+    });
+  }
+  return queryClient;
+}
+
+/**
+ * uses a singleton QueryClient to ensure cache is shared across all scorecard components.
+ * @public
+ */
+export const ScorecardQueryProvider = ({
+  children,
+}: {
+  readonly children: ReactNode;
+}) => {
+  const client = useMemo(() => getQueryClient(), []);
+
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+};

workspaces/scorecard/plugins/scorecard/src/api/index.ts

@@ -29,6 +29,8 @@ import type {
 
 import type { GetAggregatedScorecardEntitiesOptions } from '../components/types';
 
+export { ScorecardQueryProvider } from './ScorecardQueryProvider';
+
 import type {
   ScorecardApi,
   ScorecardApiClientOptions,

workspaces/scorecard/plugins/scorecard/src/components/ScorecardHomepageSection/ErrorStatePanel.tsx

@@ -39,7 +39,7 @@ export const ErrorStatePanel = ({
     data,
     isLoading,
     error: metadataError,
-  } = useAggregationMetadata(aggregationId);
+  } = useAggregationMetadata({ aggregationId });
 
   const { title: cardTitle, description: cardDescription } =
     useMetricDisplayLabels({