Fixed theming of the page header label and the organization view for …

…groups

Signed-off-by: Gustaf Räntilä <[email protected]>

workspaces/manage/.changeset/late-lions-confess.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-manage': patch
+---
+
+Fixed theming issue in header label, and improved the organization view with better UI for zooming and toggles for different view options

workspaces/manage/examples/org.yaml

@@ -15,3 +15,21 @@ metadata:
 spec:
   type: team
   children: []
+---
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: employees
+spec:
+  type: team
+  children: []
+---
+apiVersion: backstage.io/v1alpha1
+kind: Group
+metadata:
+  name: acme-corp
+spec:
+  type: team
+  children:
+    - guests
+    - employees

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

@@ -386,6 +386,35 @@ export function useOwnedKinds(onlyOwned?: boolean): string[];
 // @public
 export function useOwners(): Owners;
 
+// @public
+export function usePosition(
+  element: Element | undefined,
+): UsePositionResult | undefined;
+
+// @public (undocumented)
+export interface UsePositionClientSize {
+  // (undocumented)
+  height: number;
+  // (undocumented)
+  width: number;
+}
+
+// @public (undocumented)
+export interface UsePositionElementPosition {
+  // (undocumented)
+  left: number;
+  // (undocumented)
+  top: number;
+}
+
+// @public (undocumented)
+export interface UsePositionResult {
+  // (undocumented)
+  client: UsePositionClientSize;
+  // (undocumented)
+  element: UsePositionElementPosition;
+}
+
 // @public (undocumented)
 export interface UserSettingsContextResult<T extends JsonValue> {
   // (undocumented)

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

@@ -86,7 +86,7 @@ export function ManageTabContentFullHeight({
   }, []);
 
   return (
-    <div id="fpp" ref={setRef} style={style}>
+    <div ref={setRef} style={style}>
       {children}
     </div>
   );

workspaces/manage/plugins/manage-react/src/components/TabContentFullHeight/index.ts

@@ -15,3 +15,9 @@
  */
 export type { TabContentFullHeightProps } from './TabContentFullHeight';
 export { ManageTabContentFullHeight } from './TabContentFullHeight';
+export type {
+  UsePositionClientSize,
+  UsePositionElementPosition,
+  UsePositionResult,
+} from './usePosition';
+export { usePosition } from './usePosition';

workspaces/manage/plugins/manage-react/src/components/TabContentFullHeight/usePosition.ts

@@ -17,21 +17,28 @@ import { useMemo, useState } from 'react';
 
 import { useResizeObserver } from './useResizeObserver';
 
+/** @public */
 export interface UsePositionClientSize {
   width: number;
   height: number;
 }
 
+/** @public */
 export interface UsePositionElementPosition {
   left: number;
   top: number;
 }
 
+/** @public */
 export interface UsePositionResult {
   client: UsePositionClientSize;
   element: UsePositionElementPosition;
 }
 
+/**
+ * Calculate the position of an element, and the size of the client window.
+ * @public
+ */
 export function usePosition(element: Element | undefined) {
   const [clientSize, setClientSize] = useState<
     UsePositionClientSize | undefined

workspaces/manage/plugins/manage-react/src/index.ts

@@ -65,7 +65,11 @@ export type {
 export type {
   ManageTabContentFullHeight,
   TabContentFullHeightProps,
+  UsePositionClientSize,
+  UsePositionElementPosition,
+  UsePositionResult,
 } from './components/TabContentFullHeight';
+export { usePosition } from './components/TabContentFullHeight';
 
 export type {
   CreateUserSettingsContextOptions,

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

@@ -14,6 +14,7 @@ import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { RoutedTabs } from '@backstage/core-components';
 import { RouteRef } from '@backstage/core-plugin-api';
+import { SwitchProps } from '@mui/material/Switch';
 import { TableOptions } from '@backstage/core-components';
 
 // @public
@@ -71,6 +72,13 @@ export interface ManageKindOptions {
 // @public (undocumented)
 export const ManagePage: ManagePageImpl;
 
+// @public
+export function ManagePageFilters({
+  switchColor,
+}: {
+  switchColor?: SwitchColor;
+}): React_2.JSX.Element;
+
 // @public
 export function ManagePageImpl<SupportedKinds extends string>(
   props: PropsWithChildren<ManagePageProps<SupportedKinds> & HeaderProps>,
@@ -121,11 +129,21 @@ export interface ManageTabsProps {
 export const OrganizationGraph: OrganizationGraphImpl;
 
 // @public
-export function OrganizationGraphImpl(): React_2.JSX.Element;
+export function OrganizationGraphImpl({
+  enableWholeOrganization,
+}: OrganizationGraphProps): React_2.JSX.Element;
+
+// @public
+export interface OrganizationGraphProps {
+  enableWholeOrganization?: boolean;
+}
 
 // @public (undocumented)
 export type SubRouteTab = ComponentProps<typeof RoutedTabs>['routes'][number];
 
+// @public
+export type SwitchColor = SwitchProps['color'];
+
 // @public (undocumented)
 export type TableColumn = ManageColumnSimple | ManageColumnModule;
 
@@ -138,5 +156,14 @@ export type TableRow = {
 // @public
 export function TabOrderCard(): React_2.JSX.Element;
 
+// @public
+export function useManagePageCombined(
+  defaultValue?: boolean,
+): [
+  value: boolean | undefined,
+  setValue: (value: boolean) => void,
+  isSettled: boolean,
+];
+
 // (No @packageDocumentation comment for this package)
 ```

workspaces/manage/plugins/manage/src/components/ManagePageFilters/ManagePageFilters.tsx

@@ -18,19 +18,36 @@ import React, { useCallback } from 'react';
 import { makeStyles } from '@mui/styles';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
+import Switch, { SwitchProps } from '@mui/material/Switch';
 import Typography from '@mui/material/Typography';
 
+import { HeaderLabel } from '@backstage/core-components';
+
 import { useManagePageCombined } from './useFilters';
 
-const useStyles = makeStyles(theme => ({
+/**
+ * Color of the page header switch
+ * @public
+ */
+export type SwitchColor = SwitchProps['color'];
+
+const useStyles = makeStyles(() => ({
   label: {
-    color: theme.page.fontColor,
     userSelect: 'none',
   },
 }));
 
-export function ManagePageFilters() {
+/**
+ * Filter component for the page header, showing a switch to toggle between
+ * combined and separate entity tabs.
+ *
+ * @public
+ */
+export function ManagePageFilters({
+  switchColor = 'primary',
+}: {
+  switchColor?: SwitchColor;
+}) {
   const { label } = useStyles();
   const [combined, setCombined] = useManagePageCombined();
 
@@ -42,18 +59,23 @@ export function ManagePageFilters() {
   );
 
   return (
-    <FormGroup row>
-      <FormControlLabel
-        control={
-          <Switch
-            checked={combined ?? false}
-            onChange={handleChange}
-            name="manage-page-combined"
-            color="primary"
+    <HeaderLabel
+      label="Entity tabs"
+      value={
+        <FormGroup row>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={combined ?? false}
+                onChange={handleChange}
+                name="manage-page-combined"
+                color={switchColor}
+              />
+            }
+            label={<Typography className={label}>Combine</Typography>}
           />
-        }
-        label={<Typography className={label}>Combine entities</Typography>}
-      />
-    </FormGroup>
+        </FormGroup>
+      }
+    />
   );
 }

workspaces/manage/plugins/manage/src/components/ManagePageFilters/index.ts

@@ -13,5 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+export type { SwitchColor } from './ManagePageFilters';
 export { ManagePageFilters } from './ManagePageFilters';
 export { useManagePageCombined } from './useFilters';

workspaces/manage/plugins/manage/src/components/ManagePageFilters/useFilters.ts

@@ -15,6 +15,11 @@
  */
 import { useUserSettings } from '@backstage-community/plugin-manage-react';
 
+/**
+ * Hook to return whether the entity tabs are combined or not.
+ *
+ * @public
+ */
 export function useManagePageCombined(defaultValue?: boolean) {
   return useUserSettings<boolean>('$manage-page-filter', 'combined', {
     defaultValue,