Merge pull request #181 from BESTSELLER/#174-dynamic-backend-url

Now pulls the baseUrl from the app-config.yml

src/components/HarborRepository/HarborRepository.test.js → src/components/HarborRepository/HarborRepository.test.jsx

@@ -1,7 +1,14 @@
+import { ConfigReader } from '@backstage/core-app-api'
+import { configApiRef } from '@backstage/core-plugin-api'
+import { TestApiProvider } from '@backstage/test-utils'
 import { act, render, screen } from '@testing-library/react'
 import React from 'react'
 import { HarborRepository } from './HarborRepository'
 
+const configApi = new ConfigReader({
+  backend: { baseUrl: 'http://localhost:7000' },
+})
+
 global.fetch = jest.fn(() =>
   Promise.resolve({
     json: () =>
@@ -40,11 +47,13 @@ describe('Harbor Repository', () => {
   it('loads repo info', async () => {
     await act(async () =>
       render(
-        <HarborRepository
-          project="project"
-          repository="component"
-          widget={false}
-        />
+        <TestApiProvider apis={[[configApiRef, configApi]]}>
+          <HarborRepository
+            project="project"
+            repository="component"
+            widget={false}
+          />
+        </TestApiProvider>
       )
     )
 

src/components/HarborRepository/HarborRepository.tsx

@@ -1,19 +1,19 @@
 import { Progress, Table } from '@backstage/core-components'
+import { configApiRef, useApi } from '@backstage/core-plugin-api'
 import React, { useState } from 'react'
 import ReactSpeedometer from 'react-d3-speedometer'
 import { useAsync } from 'react-use'
 import { columns } from './tableHeadings'
 
-function HarborRepository(props: RepositoryProps) {
+export function HarborRepository(props: RepositoryProps) {
   const [error, setError] = useState(false)
   const [errorMsg, setErrorMsg] = useState('')
   const [repository, setRepository] = useState<Repository[]>([])
 
+  const config = useApi(configApiRef)
+  const backendUrl = config.getString('backend.baseUrl')
+
   const { loading } = useAsync(async () => {
-    let backendUrl = window.location.origin
-    if (backendUrl.includes('3000')) {
-      backendUrl = backendUrl.replace('3000', '7000')
-    }
     const response = await fetch(
       `${backendUrl}/api/harbor/artifacts?project=${props.project}&repository=${props.repository}`
     )
@@ -139,5 +139,3 @@ interface Vulnerabilities {
   count: number
   severity: string
 }
-
-export { HarborRepository }