FE api

mia-platform · Apr 23, 2024 · ed5d643 · ed5d643
1 parent 71a3447
commit ed5d643
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git a/app-config.yaml b/app-config.yaml
@@ -5,3 +5,5 @@ app:
 
 backend:
   baseUrl: http://localhost:7007
+  auth:
+     dangerouslyDisableDefaultAuthPolicy: true
diff --git a/packages/plugin-frontend/README.md b/packages/plugin-frontend/README.md
@@ -14,7 +14,9 @@ The first step is to install the plugin to your Backstage app:
 yarn workspace app add @mia-platform/backstage-plugin-frontend
 ```
 
-Once the plugin is installed in the App page `packages/app/src/App.tsx` add the route to our frontend page:
+Once the plugin is installed in the App page `packages/app/src/App.tsx` add the route to our frontend page.
+
+If you are using the [new backend system](https://github.com/mia-platform/backstage-plugin/blob/main/packages/plugin-backend/README.md#new-backend-system):
 
 ```tsx
 import { MiaPlatformPluginFrontendPage } from '@mia-platform/backstage-plugin-frontend';
@@ -24,6 +26,16 @@ import { MiaPlatformPluginFrontendPage } from '@mia-platform/backstage-plugin-fr
 <Route path="/mia-platform" element={<MiaPlatformPluginFrontendPage />} />;
 ```
 
+If you are using the [legacy backend system](https://github.com/mia-platform/backstage-plugin/blob/main/packages/plugin-backend/README.md#legacy-backend-system):
+
+```tsx
+import { MiaPlatformPluginFrontendPage } from '@mia-platform/backstage-plugin-frontend';
+
+// ...
+
+<Route path="/mia-platform" element={<MiaPlatformPluginFrontendPage apiPrefix="/mia-platform" />} />;
+```
+
 At the end on the Root page of your Backstage app `packages/app/src/components/Root/Root.tsx` add on the sidebar the Mia-Platform frontend page with its icon:
 
 ```tsx

diff --git a/...es/plugin-frontend/src/components/MiaProjectsFetchComponent/MiaProjectsFetchComponent.tsx b/...es/plugin-frontend/src/components/MiaProjectsFetchComponent/MiaProjectsFetchComponent.tsx
@@ -80,11 +80,12 @@ export type Project = {
 type DenseTableProps = {
   entities: Entity[];
   setBannerId: React.Dispatch<React.SetStateAction<string | undefined>>,
+  apiUrl: string
 };
 
-export const DenseTable = ({ entities, setBannerId }: DenseTableProps) => {
+const DenseTable = ({ entities, setBannerId, apiUrl }: DenseTableProps) => {
   const config = useApi(configApiRef)
-  const baseUrl = config.getString('backend.baseUrl')
+
   const appUrl = config.getString('app.baseUrl')
 
   const columns: TableColumn[] = [
@@ -108,11 +109,11 @@ export const DenseTable = ({ entities, setBannerId }: DenseTableProps) => {
       try {
         const uuid = window.crypto.randomUUID()
         setBannerId(uuid)
-        await fetch(`${baseUrl}/api/mia-platform/sync/company/${companyId}/project/${projectId}`)
+        await fetch(`${apiUrl}/sync/company/${companyId}/project/${projectId}`)
       }
       catch (exception) {
         /* empty */
-}
+      }
     }
 
     return {
@@ -139,9 +140,12 @@ export const DenseTable = ({ entities, setBannerId }: DenseTableProps) => {
 
 type Props = {
   setBannerId: React.Dispatch<React.SetStateAction<string | undefined>>,
+  apiUrl: string
 }
+
 type ComponentState = 'loading' | 'loaded' | Error
-export const MiaProjectsFetchComponent: React.FC<Props> = ({ setBannerId }) => {
+
+export const MiaProjectsFetchComponent: React.FC<Props> = ({ setBannerId, apiUrl }) => {
   const config = useApi(configApiRef)
   const [entities, setEntities] = useState<Entity[]>([])
   const [componentState, setComponentState] = useState<ComponentState>('loading')
@@ -187,7 +191,7 @@ export const MiaProjectsFetchComponent: React.FC<Props> = ({ setBannerId }) => {
       tables.push(
         <Content>
           <ContentHeader title={key} />
-          <DenseTable entities={groupedSystems[key]} setBannerId={setBannerId} />
+          <DenseTable apiUrl={apiUrl} entities={groupedSystems[key]} setBannerId={setBannerId} />
         </Content>
       )
     }

diff --git a/...es/plugin-frontend/src/components/MiaProjectsTableComponent/MiaProjectsTableComponent.tsx b/...es/plugin-frontend/src/components/MiaProjectsTableComponent/MiaProjectsTableComponent.tsx
@@ -28,16 +28,19 @@ import {
 import { MiaProjectsFetchComponent } from '../MiaProjectsFetchComponent';
 import { useApi, configApiRef } from '@backstage/core-plugin-api'
 
-export const MiaProjectsTableComponent = () => {
+export const MiaProjectsTableComponent = ({ apiPrefix }: { apiPrefix?: string }) => {
   const config = useApi(configApiRef)
+
   const baseUrl = config.getString('backend.baseUrl')
+  const url = `${baseUrl}/api${apiPrefix ?? '/catalog/modules/mia-platform'}`
+
   const [bannerId, setBannerId] = useState<string>()
 
   const syncAllProjects = async () => {
     try {
       const uuid = window.crypto.randomUUID()
       setBannerId(uuid)
-      await fetch(`${baseUrl}/api/mia-platform/sync`)
+      await fetch(`${url}/sync`)
     } catch (exception) {
       return
     }
@@ -56,7 +59,7 @@ export const MiaProjectsTableComponent = () => {
         </ContentHeader>
         <Grid container spacing={3} direction="column">
           <Grid item>
-            <MiaProjectsFetchComponent setBannerId={setBannerId} />
+            <MiaProjectsFetchComponent apiUrl={url} setBannerId={setBannerId} />
           </Grid>
         </Grid>
         {