Merge branch 'oversitsside-for-funksjoner' into spire-dev

Author: Aleksander Obrestad

packages/app/src/App.tsx

@@ -1,7 +1,7 @@
 import { ExplorePage } from '@backstage-community/plugin-explore';
 import { LighthousePage } from '@backstage-community/plugin-lighthouse';
 import { createApp } from '@backstage/app-defaults';
-import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
+import { AppRouter, FeatureFlagged, FlatRoutes } from '@backstage/core-app-api';
 import {
   AlertDisplay,
   OAuthRequestDialog,
@@ -55,6 +55,7 @@ import {
 } from '@kartverket/backstage-plugin-catalog-creator';
 import { NotificationsPage } from '@backstage/plugin-notifications';
 import { SignalsDisplay } from '@backstage/plugin-signals';
+import { FunctionsPage } from './components/functions/FunctionsPage';
 
 const app = createApp({
   __experimentalTranslations: {
@@ -131,6 +132,9 @@ const routes = (
       <HomePage />
     </Route>
     <Route path="/catalog" element={<CatalogIndexPage />} />
+    <FeatureFlagged with="show-functions-page">
+      <Route path="/functions" element={<FunctionsPage />} />
+    </FeatureFlagged>
     <Route
       path="/catalog/:namespace/:kind/:name"
       element={<CatalogEntityPage />}

packages/app/src/components/functions/FunctionsPage.tsx

@@ -0,0 +1,83 @@
+import { Grid } from '@material-ui/core';
+import {
+  CatalogTable,
+  CatalogTableColumnsFunc,
+} from '@backstage/plugin-catalog';
+import { Content, Header, InfoCard, Page } from '@backstage/core-components';
+import {
+  catalogApiRef,
+  EntityKindPicker,
+  EntityListProvider,
+} from '@backstage/plugin-catalog-react';
+import { EntityRelationsGraph } from '@backstage/plugin-catalog-graph';
+import { useApi } from '@backstage/core-plugin-api';
+import { useEffect, useState } from 'react';
+
+type RootEntityNamesType = {
+  kind: string;
+  namespace: string;
+  name: string;
+};
+
+const functionColumns: CatalogTableColumnsFunc = entityListContext => {
+  if (entityListContext.filters.kind?.value === 'function') {
+    return [
+      CatalogTable.columns.createNameColumn({ defaultKind: 'function' }),
+      CatalogTable.columns.createOwnerColumn(),
+      CatalogTable.columns.createSpecTypeColumn(),
+    ];
+  }
+
+  return CatalogTable.defaultColumnsFunc(entityListContext);
+};
+
+export const FunctionsPage = () => {
+  const [rootEntity, setRootEntity] = useState<RootEntityNamesType[]>([]);
+  const catalogApi = useApi(catalogApiRef);
+
+  useEffect(() => {
+    catalogApi.getEntities({ filter: { kind: 'function' } }).then(response => {
+      const filteredResponse = response.items.filter(item =>
+        item.metadata.name === 'rootfunction' ? item : null,
+      );
+      setRootEntity(
+        filteredResponse.map(item => ({
+          kind: item.kind,
+          namespace: item.metadata.namespace || 'default',
+          name: item.metadata.name,
+        })),
+      );
+    });
+  }, [catalogApi]);
+
+  return (
+    <Page themeId="functions">
+      <Header
+        title="Forretningsfunksjoner i Kartverket"
+        subtitle="Oversikt over hva Kartverket må kunne gjøre for å levere på sitt samfunnsoppdrag, og hvordan dette støttes av del-funksjoner, systemer og team."
+      />
+      <Content>
+        <EntityListProvider>
+          <Grid container spacing={3}>
+            <Grid item xs={12} md={6}>
+              <EntityKindPicker initialFilter="function" hidden />
+              <CatalogTable
+                title="Alle forretningsfunksjoner"
+                columns={functionColumns}
+              />
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <InfoCard title="Funksjonshierarki">
+                <EntityRelationsGraph
+                  rootEntityNames={rootEntity}
+                  kinds={['function']}
+                  maxDepth={2}
+                />
+              </InfoCard>
+            </Grid>
+          </Grid>
+        </EntityListProvider>
+      </Content>
+    </Page>
+  );
+};