[Manage] Use BUI page header (#7896)

* Parse and forward missing "kinds" settings from config - controlling what kinds to render tabs for

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>

* Move page header and tabs to BUI

The tabs used to be MUI tabs _inside_ the page. Moving to BUI PluginHeader means a lot of refactoring was necessary, to move providers outside this so that the header has access to provider contexts.

Support for the old frontend system is still there, so its ManagePage, ManagePageFilters and ManageTabs where moved into /src/components-ofs and the necessary refactoring of the NFS page was done in isolation.

No API breakage or changes - both OFS and NFS work as before.

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>

* changeset

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>

---------

Signed-off-by: Gustaf Räntilä <g.rantila@gmail.com>

Author: grantila

workspaces/manage/.changeset/giant-turtles-change.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-manage-react': patch
+---
+
+Use 'manage.kinds' config for deciding what kinds to use

workspaces/manage/.changeset/red-geckos-invite.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-manage': minor
+---
+
+The page header is now replaced with the new BUI page header instead of MUI (only in NFS)

workspaces/manage/packages/app-next/src/extensions/manage.tsx

@@ -17,8 +17,7 @@
 import { PropsWithChildren, useEffect, useState } from 'react';
 
 import { Entity } from '@backstage/catalog-model';
-import { HeaderLabel } from '@backstage/core-components';
-import { Skeleton } from '@backstage/ui';
+import { Button, Skeleton, Tooltip, TooltipTrigger } from '@backstage/ui';
 
 import {
   ManageEntityCardWidgetBlueprint,
@@ -32,10 +31,6 @@ import {
 import { ManageTechInsightsBlueprint } from '@backstage-community/plugin-manage-module-tech-insights';
 
 import { useTheme } from '@material-ui/core';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import Typography from '@mui/material/Typography';
 
 function Foo({
   name,
@@ -230,21 +225,10 @@ const label = ManageHeaderLabelBlueprint.make({
   params: defineParams =>
     defineParams({
       loader: async () => (
-        <HeaderLabel
-          label="Example toggle"
-          value={
-            <FormGroup row>
-              <FormControlLabel
-                control={<Switch name="manage-page-combined" color="primary" />}
-                label={
-                  <Typography sx={{ userSelect: 'none' }}>
-                    This does nothing
-                  </Typography>
-                }
-              />
-            </FormGroup>
-          }
-        />
+        <TooltipTrigger>
+          <Tooltip>Custom header action example</Tooltip>
+          <Button variant="tertiary">This does nothing</Button>
+        </TooltipTrigger>
       ),
     }),
 });

workspaces/manage/plugins/manage-react/report.api.md

@@ -782,6 +782,8 @@ export interface ManageStaticConfig {
   // (undocumented)
   kindOrder: string[];
   // (undocumented)
+  kinds: string[];
+  // (undocumented)
   showCombined: boolean;
   // (undocumented)
   showOrganizationChart: boolean;

workspaces/manage/plugins/manage-react/src/components/OwnedProvider/OwnedProvider.tsx

@@ -28,12 +28,12 @@ import { ErrorPanel } from '@backstage/core-components';
 import { Progress } from '../Progress';
 import { useKindOrder } from '../KindOrder';
 import { arrayify, joinKinds } from '../../utils';
-import { defaultKinds } from './types';
 import {
   type KindStarredType,
   KindStarred,
 } from '../CurrentKindProvider/types';
 import { Owners, manageApiRef } from '../../api';
+import { defaultKinds } from '../../config/types';
 
 interface OwnedEntitiesProviderContext {
   kinds: string[];

workspaces/manage/plugins/manage-react/src/config/parseStaticConfig.ts

@@ -16,7 +16,7 @@
 
 import { ConfigApi } from '@backstage/frontend-plugin-api';
 
-import { ManageStaticConfig } from './types';
+import { defaultKinds, ManageStaticConfig } from './types';
 
 /**
  * This is an internal utility function
@@ -26,6 +26,7 @@ import { ManageStaticConfig } from './types';
 export function parseStaticConfig(
   config: ConfigApi | undefined,
 ): ManageStaticConfig {
+  const kinds = config?.getOptionalStringArray('manage.kinds') ?? defaultKinds;
   const title = config?.getOptionalString('manage.title');
   const subtitle = config?.getOptionalString('manage.subtitle');
   const themeId = config?.getOptionalString('manage.themeId');
@@ -55,7 +56,12 @@ export function parseStaticConfig(
     config?.getOptionalStringArray('manage.order.columns') ?? []
   ).map(prefixColumnNodeId);
 
+  const lcKinds = Array.from(
+    new Set(kinds.map(kind => kind.toLocaleLowerCase('en-US'))),
+  );
+
   return {
+    kinds: lcKinds,
     title,
     subtitle,
     combined,

workspaces/manage/plugins/manage-react/src/config/types.ts

@@ -21,6 +21,7 @@ export interface ManageDynamicConfig {
 
 /** @public */
 export interface ManageStaticConfig {
+  kinds: string[];
   title: string | undefined;
   subtitle: string | undefined;
   themeId: string | undefined;
@@ -38,3 +39,13 @@ export interface ManageStaticConfig {
   widgetOrderContentBelow: string[];
   columnsOrder: string[];
 }
+
+/** @internal */
+export const defaultKinds = [
+  'System',
+  'Component',
+  'API',
+  'Template',
+  'Resource',
+  'Domain',
+];

workspaces/manage/plugins/manage/package.json

@@ -65,6 +65,7 @@
     "@backstage/ui": "backstage:^",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.15.16",
+    "@remixicon/react": "^4.8.0",
     "lodash": "^4.17.21",
     "react-use": "^17.5.0"
   },

workspaces/manage/plugins/manage/src/components-ofs/ManagePage/ManagePage.test.tsx

@@ -0,0 +1,146 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
+import {
+  CatalogApi,
+  catalogApiRef,
+  StarredEntitiesApi,
+  starredEntitiesApiRef,
+} from '@backstage/plugin-catalog-react';
+import { catalogPlugin } from '@backstage/plugin-catalog';
+import { Observable } from '@backstage/types';
+import { RELATION_OWNED_BY } from '@backstage/catalog-model';
+
+import {
+  ManageApi,
+  manageApiRef,
+} from '@backstage-community/plugin-manage-react';
+
+import { ManagePageImpl } from './ManagePageOld';
+import { ManageTabsImpl } from '../ManageTabs';
+
+const starredEntities: StarredEntitiesApi = {
+  toggleStarred: async () => {},
+  starredEntitie$: () =>
+    ({
+      subscribe: () => ({
+        unsubscribe: () => {},
+        closed: true,
+      }),
+    } as Observable<Set<string>>),
+};
+
+const mockCatalogApi: CatalogApi = {
+  getEntitiesByRefs: async () => {
+    return { items: [] };
+  },
+} satisfies Partial<CatalogApi> as any as CatalogApi;
+
+describe('ManagePage', () => {
+  it('should render an empty page if nothing owned', async () => {
+    const mockApi: ManageApi = {
+      getProviders: () => [],
+      getOwnersAndEntities: async () => ({
+        owners: { groups: [], ownerEntityRefs: [], user: undefined },
+        ownedEntities: [],
+      }),
+      kindOrder: [],
+      progressStyle: 'circular',
+    };
+
+    const apis = [
+      [manageApiRef, mockApi],
+      [catalogApiRef, mockCatalogApi],
+      [starredEntitiesApiRef, starredEntities],
+    ] as const;
+
+    const { getByText } = await renderInTestApp(
+      <TestApiProvider apis={apis}>
+        <ManagePageImpl subtitle="Things you own">
+          <ManageTabsImpl />
+        </ManagePageImpl>
+      </TestApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog': catalogPlugin.routes.catalogIndex,
+          '/catalog/:kind/:namespace/:name': catalogPlugin.routes.catalogEntity,
+        },
+      },
+    );
+
+    expect(getByText('Manage')?.tagName).toBe('H1');
+    expect(getByText('Things you own')).toBeDefined();
+    expect(
+      getByText("You and your team(s) don't own any entities"),
+    ).toBeDefined();
+  });
+
+  it('should render a table of owned entities', async () => {
+    const mockApi: ManageApi = {
+      getProviders: () => [],
+      getOwnersAndEntities: async () => ({
+        owners: {
+          groups: [],
+          ownerEntityRefs: ['user:default/guest'],
+          user: undefined,
+        },
+        ownedEntities: [
+          {
+            apiVersion: 'backstage.io/v1alpha1',
+            kind: 'Component',
+            metadata: {
+              name: 'foo',
+              title: 'The Foo',
+            },
+            relations: [
+              {
+                type: RELATION_OWNED_BY,
+                targetRef: 'user:default/guest',
+              },
+            ],
+          },
+        ],
+      }),
+      kindOrder: [],
+      progressStyle: 'circular',
+    };
+
+    const apis = [
+      [manageApiRef, mockApi],
+      [catalogApiRef, mockCatalogApi],
+      [starredEntitiesApiRef, starredEntities],
+    ] as const;
+
+    const { getByText } = await renderInTestApp(
+      <TestApiProvider apis={apis}>
+        <ManagePageImpl subtitle="Things you own">
+          <ManageTabsImpl />
+        </ManagePageImpl>
+      </TestApiProvider>,
+      {
+        mountedRoutes: {
+          '/catalog': catalogPlugin.routes.catalogIndex,
+          '/catalog/:kind/:namespace/:name': catalogPlugin.routes.catalogEntity,
+        },
+      },
+    );
+
+    expect(getByText('Manage')?.tagName).toBe('H1');
+    expect(getByText('Things you own')).toBeDefined();
+    expect(getByText('The Foo')).toBeDefined();
+  });
+});

workspaces/manage/plugins/manage/src/components-ofs/ManagePage/ManagePage.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentType, ReactNode, PropsWithChildren } from 'react';
+
+import { Content } from '@backstage/core-components';
+import { KindOrderProvider } from '@backstage-community/plugin-manage-react';
+
+import { useManagePageCombined } from '../ManagePageFilters';
+
+export interface ManagePageInnerProps {
+  combined: boolean | undefined;
+  headerComponent: ReactNode;
+  providers: (
+    | ComponentType<{ children?: ReactNode | undefined }>
+    | {
+        provider: ComponentType<{ children?: ReactNode | undefined }>;
+        props: Record<string, unknown>;
+      }
+  )[];
+}
+
+export function ManagePageInner(
+  props: PropsWithChildren<ManagePageInnerProps>,
+) {
+  const { combined, headerComponent, providers, children } = props;
+
+  // Initialize the state, set default value
+  useManagePageCombined(combined);
+
+  return (
+    <KindOrderProvider>
+      {providers.reduce(
+        (prev, Provider) =>
+          'provider' in Provider ? (
+            <Provider.provider {...Provider.props} children={prev} />
+          ) : (
+            <Provider children={prev} />
+          ),
+        <>
+          {headerComponent}
+          <Content noPadding>{children}</Content>
+        </>,
+      )}
+    </KindOrderProvider>
+  );
+}