From dde444346d45e4017b7c581173b9f9b98c9e10ed Mon Sep 17 00:00:00 2001
From: Isaiah Thiessen <isaiah.thiessen@telus.com>
Date: Thu, 11 Aug 2022 15:00:07 -0700
Subject: [PATCH] fix: pull dynatraceBaseUrl from config, support [, ] for
 synthetics annotation

Signed-off-by: Isaiah Thiessen <isaiah.thiessen@telus.com>
---
 .../components/DynatraceTab/DynatraceTab.tsx   | 18 ++++--------------
 .../Problems/ProblemsList/ProblemsList.tsx     |  8 +++++---
 .../SyntheticsCard/SyntheticsCard.tsx          |  8 +++++---
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx b/plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx
index 59886a121d..3f58eed9dc 100644
--- a/plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx
+++ b/plugins/dynatrace/src/components/DynatraceTab/DynatraceTab.tsx
@@ -21,7 +21,6 @@ import {
   MissingAnnotationEmptyState,
 } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { ProblemsList } from '../Problems/ProblemsList';
 import { SyntheticsCard } from '../Synthetics/SyntheticsCard';
 import { isDynatraceAvailable } from '../../plugin';
@@ -33,9 +32,6 @@ import {
 export const DynatraceTab = () => {
   const { entity } = useEntity();
 
-  const configApi = useApi(configApiRef);
-  const dynatraceBaseUrl = configApi.getString('dynatrace.baseUrl');
-
   if (!isDynatraceAvailable(entity)) {
     return <MissingAnnotationEmptyState annotation={DYNATRACE_ID_ANNOTATION} />;
   }
@@ -52,24 +48,18 @@ export const DynatraceTab = () => {
         <Grid container spacing={2}>
           {dynatraceEntityId ? (
             <Grid item xs={12} lg={12}>
-              <ProblemsList
-                dynatraceEntityId={dynatraceEntityId}
-                dynatraceBaseUrl={dynatraceBaseUrl}
-              />
+              <ProblemsList dynatraceEntityId={dynatraceEntityId} />
             </Grid>
           ) : (
             ''
           )}
           {syntheticsIds
-            ?.replace(' ', '')
-            .split(',')
+            ?.split(/[ ,]/)
+            .filter(Boolean)
             .map(id => {
               return (
                 <Grid item xs={12} lg={12}>
-                  <SyntheticsCard
-                    syntheticsId={id}
-                    dynatraceBaseUrl={dynatraceBaseUrl}
-                  />
+                  <SyntheticsCard syntheticsId={id} />
                 </Grid>
               );
             })}
diff --git a/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx b/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx
index 8fb3f67934..2ee0dda48d 100644
--- a/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx
+++ b/plugins/dynatrace/src/components/Problems/ProblemsList/ProblemsList.tsx
@@ -20,14 +20,13 @@ import {
   ResponseErrorPanel,
   EmptyState,
 } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { ProblemsTable } from '../ProblemsTable';
 import { dynatraceApiRef, DynatraceProblem } from '../../../api';
 import { InfoCard } from '@backstage/core-components';
 
 type ProblemsListProps = {
   dynatraceEntityId: string;
-  dynatraceBaseUrl: string;
 };
 
 const cardContents = (
@@ -45,8 +44,11 @@ const cardContents = (
 };
 
 export const ProblemsList = (props: ProblemsListProps) => {
-  const { dynatraceEntityId, dynatraceBaseUrl } = props;
+  const { dynatraceEntityId } = props;
+  const configApi = useApi(configApiRef);
   const dynatraceApi = useApi(dynatraceApiRef);
+  const dynatraceBaseUrl = configApi.getString('dynatrace.baseUrl');
+
   const { value, loading, error } = useAsync(async () => {
     return dynatraceApi.getDynatraceProblems(dynatraceEntityId);
   }, [dynatraceApi, dynatraceEntityId]);
diff --git a/plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx b/plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx
index 531d7ef72f..6b51a1725c 100644
--- a/plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx
+++ b/plugins/dynatrace/src/components/Synthetics/SyntheticsCard/SyntheticsCard.tsx
@@ -17,13 +17,12 @@ import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 import { InfoCard } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, configApiRef } from '@backstage/core-plugin-api';
 import { dynatraceApiRef } from '../../../api';
 import { SyntheticsLocation } from '../SyntheticsLocation';
 
 type SyntheticsCardProps = {
   syntheticsId: string;
-  dynatraceBaseUrl: string;
 };
 
 const dynatraceMonitorPrefixes = (idPrefix: string): string => {
@@ -40,8 +39,11 @@ const dynatraceMonitorPrefixes = (idPrefix: string): string => {
 };
 
 export const SyntheticsCard = (props: SyntheticsCardProps) => {
-  const { syntheticsId, dynatraceBaseUrl } = props;
+  const { syntheticsId } = props;
+  const configApi = useApi(configApiRef);
   const dynatraceApi = useApi(dynatraceApiRef);
+  const dynatraceBaseUrl = configApi.getString('dynatrace.baseUrl');
+
   const { value, loading, error } = useAsync(async () => {
     return dynatraceApi.getDynatraceSyntheticFailures(syntheticsId);
   }, [dynatraceApi, syntheticsId]);