Sources card (#32)

Adding Sources Card to Backstage
---
Co-authored-by: AlinaGoaga <goaga.alina@gmail.com>

Author: ahussein3

packages/app/src/components/catalog/EntityPage.tsx

@@ -62,6 +62,8 @@ import {
   FluxEntityOCIRepositoriesCard,
   FluxEntityKustomizationsCard,
   FluxEntityHelmRepositoriesCard,
+  FluxEntityDeploymentsCard,
+  FluxEntitySourcesCard,
 } from '@weaveworksoss/backstage-plugin-flux';
 
 const techdocsContent = (
@@ -168,6 +170,12 @@ const serviceEntityPage = (
         <Grid item md={12}>
           <FluxEntityOCIRepositoriesCard />
         </Grid>
+        <Grid item md={12}>
+          <FluxEntityDeploymentsCard />
+        </Grid>
+        <Grid item md={12}>
+          <FluxEntitySourcesCard />
+        </Grid>
       </Grid>
     </EntityLayout.Route>
 

plugins/backstage-plugin-flux/dev/index.tsx

@@ -35,6 +35,7 @@ import {
   newTestHelmRepository,
 } from './helpers';
 import { ReconcileRequestAnnotation } from '../src/hooks';
+import { FluxEntitySourcesCard } from '../src/components/FluxEntitySourcesCard';
 
 const fakeEntity: Entity = {
   apiVersion: 'backstage.io/v1alpha1',
@@ -450,5 +451,85 @@ createDevApp()
       </TestApiProvider>
     ),
   })
+  .addPage({
+    title: 'Sources',
+    path: '/sources',
+    element: (
+      <TestApiProvider
+        apis={[
+          [
+            configApiRef,
+            new ConfigReader({
+              gitops: { baseUrl: 'https://example.com/wego' },
+            }),
+          ],
+          [
+            kubernetesApiRef,
+            new StubKubernetesClient([
+              newTestHelmRepository(
+                'podinfo',
+                'https://stefanprodan.github.io/podinfo',
+              ),
+              newTestOCIRepository(
+                'podinfo',
+                'oci://ghcr.io/stefanprodan/manifests/podinfo',
+                { verify: true, verified: true },
+              ),
+              newTestOCIRepository(
+                'redis',
+                'oci://registry-1.docker.io/bitnamicharts/redis',
+              ),
+              newTestOCIRepository(
+                'postgresql',
+                'oci://registry-1.docker.io/bitnamicharts/postgresql',
+                { verify: true, verified: false },
+              ),
+              newTestOCIRepository(
+                'apache',
+                'oci://registry-1.docker.io/bitnamicharts/apache',
+                { ready: false },
+              ),
+              newTestOCIRepository(
+                'supabase',
+                'oci://registry-1.docker.io/bitnamicharts/supabase',
+                { verify: true, pending: true },
+              ),
+              newTestOCIRepository(
+                'mariadb',
+                'oci://registry-1.docker.io/bitnamicharts/mariadb',
+                { verify: true, verified: false },
+              ),
+              newTestGitRepository(
+                'podinfo',
+                'https://github.com/stefanprodan/podinfo',
+                { verify: true, verified: true },
+              ),
+              newTestGitRepository(
+                'weave-gitops',
+                'https://github.com/weaveworks/weave-gitops',
+              ),
+              newTestGitRepository(
+                'weaveworks-backstage',
+                'https://github.com/weaveworks/weaveworks-backstage',
+                { verify: true, verified: false },
+              ),
+              newTestGitRepository(
+                'weave-gitops-enterprise',
+                'https://github.com/weaveworks/weave-gitops-enterprise',
+              ),
+            ]),
+          ],
+
+          [kubernetesAuthProvidersApiRef, new StubKubernetesAuthProvidersApi()],
+        ]}
+      >
+        <EntityProvider entity={fakeEntity}>
+          <Content>
+            <FluxEntitySourcesCard />
+          </Content>
+        </EntityProvider>
+      </TestApiProvider>
+    ),
+  })
   .registerPlugin(weaveworksFluxPlugin)
   .render();

plugins/backstage-plugin-flux/src/components/FluxEntityDeploymentsCard/FluxDeploymentsTable.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableColumn, TableFilter } from '@backstage/core-components';
+import { TableColumn } from '@backstage/core-components';
 import {
   clusterNameFilteringColumn,
   idColumn,
@@ -11,6 +11,7 @@ import {
   repoColumn,
   sourceColumn,
   typeColumn,
+  filters,
 } from '../helpers';
 import { HelmChart, HelmRelease, Kustomization } from '../../objects';
 import { FluxEntityTable } from '../FluxEntityTable';
@@ -27,13 +28,6 @@ export const defaultColumns: TableColumn<Deployment>[] = [
   syncColumn(),
 ];
 
-const filters: TableFilter[] = [
-  {
-    column: 'Cluster name',
-    type: 'multiple-select',
-  },
-];
-
 type Props = {
   deployments: Deployment[];
   isLoading: boolean;

plugins/backstage-plugin-flux/src/components/FluxEntityGitRepositoriesCard/FluxEntityGitRepositoriesCard.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { InfoCard } from '@backstage/core-components';
+import { InfoCard, TableColumn } from '@backstage/core-components';
 import { useGitRepositories } from '../../hooks/query';
-import {
-  FluxGitRepositoriesTable,
-  defaultColumns,
-} from './FluxGitRepositoriesTable';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
+import {
+  gitOciDefaultColumns,
+  FluxSourcesTable,
+} from '../FluxEntitySourcesCard/FluxEntitySourcesTable';
+import { Source } from '../helpers';
 
 const GitRepositoriesPanel = () => {
   const { entity } = useEntity();
@@ -27,10 +28,10 @@ const GitRepositoriesPanel = () => {
 
   return (
     <InfoCard title="Git Repositories">
-      <FluxGitRepositoriesTable
-        gitRepositories={data || []}
+      <FluxSourcesTable
+        sources={data || []}
         isLoading={loading && !data}
-        columns={defaultColumns}
+        columns={gitOciDefaultColumns as TableColumn<Source>[]}
       />
     </InfoCard>
   );

plugins/backstage-plugin-flux/src/components/FluxEntityGitRepositoriesCard/FluxGitRepositoriesTable.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import { InfoCard } from '@backstage/core-components';
+import { InfoCard, TableColumn } from '@backstage/core-components';
 import { useHelmRepositories } from '../../hooks';
-import {
-  FluxHelmRepositoriesTable,
-  defaultColumns,
-} from './FluxHelmRepositoriesTable';
 import { WeaveGitOpsContext } from '../WeaveGitOpsContext';
+import {
+  helmDefaultColumns,
+  FluxSourcesTable,
+} from '../FluxEntitySourcesCard/FluxEntitySourcesTable';
+import { Source } from '../helpers';
 
 const HelmRepositoriesPanel = () => {
   const { entity } = useEntity();
@@ -27,10 +28,10 @@ const HelmRepositoriesPanel = () => {
 
   return (
     <InfoCard title="Helm Repositories">
-      <FluxHelmRepositoriesTable
-        helmRepositories={data || []}
+      <FluxSourcesTable
+        sources={data || []}
         isLoading={loading && !data}
-        columns={defaultColumns}
+        columns={helmDefaultColumns as TableColumn<Source>[]}
       />
     </InfoCard>
   );