/* * 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 { useCallback, useMemo, useState, type CSSProperties } from 'react'; import { useNavigate } from 'react-router-dom'; import { Box, Card, CardBody, Grid, Switch } from '@backstage/ui'; import { Direction, EntityNode, EntityRelationsGraph, } from '@backstage/plugin-catalog-graph'; import { getCompoundEntityRef, parseEntityRef } from '@backstage/catalog-model'; import { EmptyState } from '@backstage/core-components'; import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api'; import { entityRouteRef, humanizeEntityRef, } from '@backstage/plugin-catalog-react'; import { useOwners, usePosition, } from '@backstage-community/plugin-manage-react'; const styleControlsCard: CSSProperties = { position: 'absolute', backgroundColor: 'var(--bui-bg-neutral-2)', width: 'fit-content', userSelect: 'none', }; const styleControlsCardContent: CSSProperties = { paddingInline: `var(--bui-space-3) !important`, }; /** @public */ export interface OrganizationGraphProps { /** * Whether to enable the whole organization view. Defaults to true. */ enableWholeOrganization?: boolean; } /** * An organization view for the current user. * * @public */ export function OrganizationGraphImpl({ enableWholeOrganization = true, }: OrganizationGraphProps) { const [wholeOrg, setWholeOrg] = useState(false); const [leftRight, setLeftRight] = useState(false); const [graphElement, setGraphElement] = useState( undefined, ); const graphElementSize = usePosition(graphElement); const { ownerEntityRefs, user, groups } = useOwners(); const userEntityRef = useMemo(() => { return ownerEntityRefs .map(entityRef => parseEntityRef(entityRef)) .find( compoundEntityRef => compoundEntityRef.kind.toLocaleLowerCase('en-US') === 'user', ); }, [ownerEntityRefs]); const navigate = useNavigate(); const analytics = useAnalytics(); const catalogEntityRoute = useRouteRef(entityRouteRef); const onNodeClick = useCallback( (node: EntityNode) => { const entity = node.entity ? getCompoundEntityRef(node.entity) : parseEntityRef(node.id); const path = catalogEntityRoute({ kind: entity.kind.toLocaleLowerCase('en-US'), namespace: entity.namespace.toLocaleLowerCase('en-US'), name: entity.name, }); analytics.captureEvent( 'click', node.entity.metadata.title ?? humanizeEntityRef(entity), { attributes: { to: path } }, ); navigate(path); }, [catalogEntityRoute, navigate, analytics], ); const setRef = useCallback((el: Element | null) => { setGraphElement(el ?? undefined); }, []); const availHeight = useMemo( () => !graphElementSize ? 0 : graphElementSize.client.height - graphElementSize.element.top, [graphElementSize], ); const renderLabel = useCallback(() => null, []); const entitySet = useMemo( () => (wholeOrg ? undefined : [...(user ? [user] : []), ...groups]), [wholeOrg, user, groups], ); if (!userEntityRef) { return ; } return (

{enableWholeOrganization && ( )}

); }