Merge pull request #19679 from backstage/change-default-user-entity-relation-toggle

fix: change default entity toggle state for user entities

.changeset/long-flowers-sort.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Entity relations toggle should by default be aggregated for User entities

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.test.tsx

@@ -152,6 +152,27 @@ describe('OwnershipCard', () => {
     ],
   };
 
+  const userEntity: UserEntity = {
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'User',
+    metadata: {
+      name: 'the-user',
+    },
+    spec: {
+      memberOf: ['my-team'],
+    },
+    relations: [
+      {
+        type: 'memberOf',
+        targetRef: 'group:default/my-team',
+      },
+      {
+        type: 'memberOf',
+        targetRef: 'group:custom/some-team',
+      },
+    ],
+  };
+
   it('displays entity counts', async () => {
     const catalogApi: jest.Mocked<CatalogApi> = {
       getEntities: jest.fn(),
@@ -271,26 +292,6 @@ describe('OwnershipCard', () => {
   });
 
   it('links to the catalog with the user and groups filters from an user profile', async () => {
-    const userEntity: UserEntity = {
-      apiVersion: 'backstage.io/v1alpha1',
-      kind: 'User',
-      metadata: {
-        name: 'the-user',
-      },
-      spec: {
-        memberOf: ['my-team'],
-      },
-      relations: [
-        {
-          type: 'memberOf',
-          targetRef: 'group:default/my-team',
-        },
-        {
-          type: 'memberOf',
-          targetRef: 'group:custom/some-team',
-        },
-      ],
-    };
     const catalogApi: jest.Mocked<CatalogApi> = {
       getEntities: jest.fn(),
     } as any;
@@ -386,5 +387,74 @@ describe('OwnershipCard', () => {
 
       expect(getByTitle('Aggregated Relations')).toBeInTheDocument();
     });
+
+    it('defaults to aggregated for User entity kind', async () => {
+      const catalogApi: jest.Mocked<CatalogApi> = {
+        getEntities: jest.fn(),
+      } as any;
+
+      catalogApi.getEntities.mockImplementation(getEntitiesMock);
+
+      const { getByLabelText } = await renderInTestApp(
+        <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
+          <EntityProvider entity={userEntity}>
+            <OwnershipCard />
+          </EntityProvider>
+        </TestApiProvider>,
+        {
+          mountedRoutes: {
+            '/create': catalogIndexRouteRef,
+          },
+        },
+      );
+
+      expect(getByLabelText('Ownership Type Switch')).toBeChecked();
+    });
+
+    it('defaults to direct for all entity kinds except User', async () => {
+      const catalogApi: jest.Mocked<CatalogApi> = {
+        getEntities: jest.fn(),
+      } as any;
+
+      catalogApi.getEntities.mockImplementation(getEntitiesMock);
+
+      const { getByLabelText } = await renderInTestApp(
+        <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
+          <EntityProvider entity={groupEntity}>
+            <OwnershipCard />
+          </EntityProvider>
+        </TestApiProvider>,
+        {
+          mountedRoutes: {
+            '/create': catalogIndexRouteRef,
+          },
+        },
+      );
+
+      expect(getByLabelText('Ownership Type Switch')).not.toBeChecked();
+    });
+
+    it('defaults to provided relationsType', async () => {
+      const catalogApi: jest.Mocked<CatalogApi> = {
+        getEntities: jest.fn(),
+      } as any;
+
+      catalogApi.getEntities.mockImplementation(getEntitiesMock);
+
+      const { getByLabelText } = await renderInTestApp(
+        <TestApiProvider apis={[[catalogApiRef, catalogApi]]}>
+          <EntityProvider entity={userEntity}>
+            <OwnershipCard relationsType="direct" />
+          </EntityProvider>
+        </TestApiProvider>,
+        {
+          mountedRoutes: {
+            '/create': catalogIndexRouteRef,
+          },
+        },
+      );
+
+      expect(getByLabelText('Ownership Type Switch')).not.toBeChecked();
+    });
   });
 });

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx

@@ -25,7 +25,7 @@ import {
   Switch,
   Tooltip,
 } from '@material-ui/core';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ComponentsGrid } from './ComponentsGrid';
 import { EntityRelationAggregation } from './types';
 
@@ -71,10 +71,18 @@ export const OwnershipCard = (props: {
     hideRelationsToggle === undefined ? false : hideRelationsToggle;
   const classes = useStyles();
   const { entity } = useEntity();
+
+  const defaultRelationsType = entity.kind === 'User' ? 'aggregated' : 'direct';
   const [getRelationsType, setRelationsType] = useState(
-    relationsType || 'direct',
+    relationsType ?? defaultRelationsType,
   );
 
+  useEffect(() => {
+    if (!relationsType) {
+      setRelationsType(defaultRelationsType);
+    }
+  }, [setRelationsType, defaultRelationsType, relationsType]);
+
   return (
     <InfoCard title="Ownership" variant={variant}>
       {!relationsToggle && (
@@ -95,11 +103,11 @@ export const OwnershipCard = (props: {
                 <Switch
                   color="primary"
                   checked={getRelationsType !== 'direct'}
-                  onChange={() =>
-                    getRelationsType === 'direct'
-                      ? setRelationsType('aggregated')
-                      : setRelationsType('direct')
-                  }
+                  onChange={() => {
+                    const updatedRelationsType =
+                      getRelationsType === 'direct' ? 'aggregated' : 'direct';
+                    setRelationsType(updatedRelationsType);
+                  }}
                   name="pin"
                   inputProps={{ 'aria-label': 'Ownership Type Switch' }}
                 />