From 8d429ea71a9bdb006976954d36529e275a03b610 Mon Sep 17 00:00:00 2001
From: Kyle Watson <kyle.watson@devoteam.com>
Date: Mon, 27 Nov 2023 14:52:24 +0100
Subject: [PATCH] refactor(backstage-plugin): Move hook to own file

Move benchmark hook to it's own file.
Rename overview to benchmark for consistency.

Addresses #71
---
 .../DashboardComponent/DashboardComponent.tsx | 16 +++++++---------
 .../src/hooks/MetricBenchmarkHook.ts          | 18 ++++++++++++++++++
 .../src/{services => hooks}/MetricDataHook.ts | 19 ++-----------------
 3 files changed, 27 insertions(+), 26 deletions(-)
 create mode 100644 backstage-plugin/plugins/open-dora/src/hooks/MetricBenchmarkHook.ts
 rename backstage-plugin/plugins/open-dora/src/{services => hooks}/MetricDataHook.ts (59%)

diff --git a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
index 985c10b..7383c08 100644
--- a/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
+++ b/backstage-plugin/plugins/open-dora/src/components/DashboardComponent/DashboardComponent.tsx
@@ -10,12 +10,10 @@ import { getEntityRelations, useEntity } from '@backstage/plugin-catalog-react';
 import { CircularProgress, Grid } from '@material-ui/core';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useMetricBenchmark } from '../../hooks/MetricBenchmarkHook';
+import { useMetricData } from '../../hooks/MetricDataHook';
 import '../../i18n';
 import { MetricContext } from '../../services/MetricContext';
-import {
-  useMetricData,
-  useMetricOverview,
-} from '../../services/MetricDataHook';
 import { BarChartComponent } from '../BarChartComponent/BarChartComponent';
 import { DropdownComponent } from '../DropdownComponent/DropdownComponent';
 import { HighlightTextBoxComponent } from '../HighlightTextBoxComponent/HighlightTextBoxComponent';
@@ -51,15 +49,15 @@ const ChartGridItem = ({ type, label }: { type: string; label: string }) => {
   );
 };
 
-const OverviewGridItem = ({ type }: { type: string }) => {
+const BenchmarkGridItem = ({ type }: { type: string }) => {
   const [t] = useTranslation();
-  const { overview, error } = useMetricOverview(type);
+  const { benchmark, error } = useMetricBenchmark(type);
 
-  const testOrProgressComponent = overview ? (
+  const testOrProgressComponent = benchmark ? (
     <HighlightTextBoxComponent
       title=""
       text=""
-      highlight={t(`deployment_frequency.overall_labels.${overview}`)}
+      highlight={t(`deployment_frequency.overall_labels.${benchmark}`)}
       // to do: think of text colouring for different scenarios
       textColour="positiveHighlight"
     />
@@ -123,7 +121,7 @@ export const DashboardComponent = ({
                   </Grid>
                 </div>
               </Grid>
-              <OverviewGridItem type="df" />
+              <BenchmarkGridItem type="df" />
               <ChartGridItem
                 type="df_count"
                 label={t('deployment_frequency.labels.deployment_frequency')}
diff --git a/backstage-plugin/plugins/open-dora/src/hooks/MetricBenchmarkHook.ts b/backstage-plugin/plugins/open-dora/src/hooks/MetricBenchmarkHook.ts
new file mode 100644
index 0000000..b3679d5
--- /dev/null
+++ b/backstage-plugin/plugins/open-dora/src/hooks/MetricBenchmarkHook.ts
@@ -0,0 +1,18 @@
+import { useApi } from '@backstage/core-plugin-api';
+import { useEffect, useState } from 'react';
+import { dfBenchmarkKey } from '../models/DfBenchmarkData';
+import { groupDataServiceApiRef } from '../services/GroupDataService';
+
+export const useMetricBenchmark = (type: string) => {
+  const groupDataService = useApi(groupDataServiceApiRef);
+  const [benchmark, setDfBenchmark] = useState<dfBenchmarkKey | undefined>();
+  const [error, setError] = useState<Error | undefined>();
+
+  useEffect(() => {
+    groupDataService.retrieveBenchmarkData({ type: type }).then(response => {
+      setDfBenchmark(response.key);
+    }, setError);
+  }, [groupDataService, type]);
+
+  return { error: error, benchmark: benchmark };
+};
diff --git a/backstage-plugin/plugins/open-dora/src/services/MetricDataHook.ts b/backstage-plugin/plugins/open-dora/src/hooks/MetricDataHook.ts
similarity index 59%
rename from backstage-plugin/plugins/open-dora/src/services/MetricDataHook.ts
rename to backstage-plugin/plugins/open-dora/src/hooks/MetricDataHook.ts
index 0ae19d4..99c2a5d 100644
--- a/backstage-plugin/plugins/open-dora/src/services/MetricDataHook.ts
+++ b/backstage-plugin/plugins/open-dora/src/hooks/MetricDataHook.ts
@@ -1,9 +1,8 @@
 import { useApi } from '@backstage/core-plugin-api';
 import { useContext, useEffect, useState } from 'react';
-import { dfBenchmarkKey } from '../models/DfBenchmarkData';
 import { MetricData } from '../models/MetricData';
-import { groupDataServiceApiRef } from './GroupDataService';
-import { MetricContext } from './MetricContext';
+import { groupDataServiceApiRef } from '../services/GroupDataService';
+import { MetricContext } from '../services/MetricContext';
 
 export const useMetricData = (type: string) => {
   const groupDataService = useApi(groupDataServiceApiRef);
@@ -30,17 +29,3 @@ export const useMetricData = (type: string) => {
 
   return { error: error, chartData: chartData };
 };
-
-export const useMetricOverview = (type: string) => {
-  const groupDataService = useApi(groupDataServiceApiRef);
-  const [overview, setDfOverview] = useState<dfBenchmarkKey | undefined>();
-  const [error, setError] = useState<Error | undefined>();
-
-  useEffect(() => {
-    groupDataService.retrieveBenchmarkData({ type: type }).then(response => {
-      setDfOverview(response.key);
-    }, setError);
-  }, [groupDataService, type]);
-
-  return { error: error, overview: overview };
-};