feat: Objects Accordion for Details redesign BED-6844

packages/javascript/bh-shared-ui/src/components/ExploreTable/ExploreTable.test.tsx

@@ -679,8 +679,6 @@ describe('ExploreTable', async () => {
 
         //fire sort
         await user.click(screen.getByText('Name'));
-        const testElem = screen.getByRole('button', { name: /name/i });
-        screen.debug(testElem);
 
         //up arrow visible, down arrow removed
         expect(within(screen.getByRole('button', { name: /name/i })).getByText('app-icon-sort-asc')).toBeVisible();

packages/javascript/bh-shared-ui/src/hooks/useAssetGroupTags/useAssetGroupTags.tsx

@@ -80,14 +80,19 @@ export const privilegeZonesKeys = {
     ruleDetail: (tagId: string | number, ruleId: string | number) =>
         [...privilegeZonesKeys.rulesByTag(tagId), 'ruleId', ruleId] as const,
     members: () => [...privilegeZonesKeys.all, 'members'] as const,
-    membersByTag: (tagId: string | number, sortOrder: SortOrder, environments: string[] = []) =>
-        [...privilegeZonesKeys.members(), 'tag', tagId, sortOrder, ...environments] as const,
+    membersByTag: (
+        tagId: string | number,
+        sortOrder: SortOrder,
+        environments: string[] = [],
+        primary_kind: string = 'all'
+    ) => [...privilegeZonesKeys.members(), 'tag', tagId, primary_kind, sortOrder, ...environments] as const,
     membersByTagAndRule: (
         tagId: string | number,
         ruleId: string | number | undefined,
         sortOrder: SortOrder,
-        environments: string[] = []
-    ) => ['tag', tagId, 'rule', ruleId, sortOrder, ...environments] as const,
+        environments: string[] = [],
+        primary_kind: string = 'all'
+    ) => ['tag', tagId, 'rule', ruleId, primary_kind, sortOrder, ...environments] as const,
     memberDetail: (tagId: string | number, memberId: string | number) =>
         [...privilegeZonesKeys.tagDetail(tagId), 'memberId', memberId] as const,
 
@@ -262,11 +267,19 @@ export const getAssetGroupTagMembers = (
     skip = 0,
     limit = PAGE_SIZE,
     sortOrder: SortOrder = 'asc',
-    environments?: string[]
+    environments?: string[],
+    primary_kind?: string
 ) =>
     createPaginatedFetcher<AssetGroupTagMemberListItem>(
         () =>
-            apiClient.getAssetGroupTagMembers(tagId, skip, limit, sortOrder === 'asc' ? 'name' : '-name', environments),
+            apiClient.getAssetGroupTagMembers(
+                tagId,
+                skip,
+                limit,
+                sortOrder === 'asc' ? 'name' : '-name',
+                environments,
+                primary_kind
+            ),
         'members',
         skip,
         limit
@@ -275,16 +288,24 @@ export const getAssetGroupTagMembers = (
 export const useTagMembersInfiniteQuery = (
     tagId: number | string | undefined,
     sortOrder: SortOrder,
-    environments?: string[]
+    environments?: string[],
+    primary_kind?: string
 ) =>
     useInfiniteQuery<{
         items: AssetGroupTagMemberListItem[];
         nextPageParam?: PageParam;
     }>({
-        queryKey: privilegeZonesKeys.membersByTag(tagId!, sortOrder, environments),
+        queryKey: privilegeZonesKeys.membersByTag(tagId!, sortOrder, environments, primary_kind),
         queryFn: ({ pageParam = { skip: 0, limit: PAGE_SIZE } }) => {
             if (!tagId) return Promise.reject('No tag ID provided for tag members request');
-            return getAssetGroupTagMembers(tagId, pageParam.skip, pageParam.limit, sortOrder, environments);
+            return getAssetGroupTagMembers(
+                tagId,
+                pageParam.skip,
+                pageParam.limit,
+                sortOrder,
+                environments,
+                primary_kind
+            );
         },
         getNextPageParam: (lastPage) => lastPage.nextPageParam,
         enabled: tagId !== undefined,
@@ -296,7 +317,8 @@ export const getAssetGroupTagRuleMembers = (
     skip: number = 0,
     limit: number = PAGE_SIZE,
     sortOrder: SortOrder = 'asc',
-    environments?: string[]
+    environments?: string[],
+    primary_kind?: string
 ) =>
     createPaginatedFetcher(
         () =>
@@ -306,7 +328,8 @@ export const getAssetGroupTagRuleMembers = (
                 skip,
                 limit,
                 sortOrder === 'asc' ? 'name' : '-name',
-                environments
+                environments,
+                primary_kind
             ),
         'members',
         skip,
@@ -317,17 +340,26 @@ export const useRuleMembersInfiniteQuery = (
     tagId: number | string | undefined,
     ruleId: number | string | undefined,
     sortOrder: SortOrder,
-    environments?: string[]
+    environments?: string[],
+    primary_kind?: string
 ) =>
     useInfiniteQuery<{
         items: AssetGroupTagMemberListItem[];
         nextPageParam?: PageParam;
     }>({
-        queryKey: privilegeZonesKeys.membersByTagAndRule(tagId!, ruleId, sortOrder, environments),
+        queryKey: privilegeZonesKeys.membersByTagAndRule(tagId!, ruleId, sortOrder, environments, primary_kind),
         queryFn: ({ pageParam = { skip: 0, limit: PAGE_SIZE } }) => {
             if (!tagId) return Promise.reject('No tag ID available to get rule members');
             if (!ruleId) return Promise.reject('No rule ID available to get rule members');
-            return getAssetGroupTagRuleMembers(tagId, ruleId, pageParam.skip, pageParam.limit, sortOrder, environments);
+            return getAssetGroupTagRuleMembers(
+                tagId,
+                ruleId,
+                pageParam.skip,
+                pageParam.limit,
+                sortOrder,
+                environments,
+                primary_kind
+            );
         },
         getNextPageParam: (lastPage) => lastPage.nextPageParam,
         enabled: tagId !== undefined && ruleId !== undefined,

packages/javascript/bh-shared-ui/src/mocks/factories/privilegeZones.ts

@@ -73,7 +73,7 @@ export const createRule = (tagId: number = 0, ruleId: number = 0) => {
     const data: AssetGroupTagSelector = {
         id: ruleId,
         asset_group_tag_id: tagId,
-        name: `tier-${tagId - 1}-rule-${ruleId}`,
+        name: `tag-${tagId - 1}-rule-${ruleId}`,
         allow_disable: faker.datatype.boolean(),
         description: faker.random.words(),
         is_default: faker.datatype.boolean(),
@@ -137,8 +137,8 @@ export const createObjects = (
         if (i === count) break;
 
         const name = Number.isNaN(ruleId)
-            ? `tier-${assetGroupId - 1}-object-${i}`
-            : `tier-${assetGroupId - 1}-rule-${ruleId}-object-${i}`;
+            ? `tag-${assetGroupId - 1}-object-${i}`
+            : `tag-${assetGroupId - 1}-rule-${ruleId}-object-${i}`;
 
         data.push({
             id: i,

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/Details.test.tsx

@@ -115,7 +115,7 @@ describe('Details', async () => {
         const objectsListItems = await within(objects).findAllByTestId('sort-button');
         expect(objectsListItems.length).toBeGreaterThan(0);
 
-        const object5 = await screen.findByText('tier-0-object-5');
+        const object5 = await screen.findByText('tag-0-object-5');
         await user.click(object5);
 
         await waitFor(async () => {
@@ -134,7 +134,7 @@ describe('Details', async () => {
 
         const rules = await screen.findByTestId('privilege-zones_details_rules-list');
         await within(rules).findAllByTestId('sort-button');
-        const rule7 = await within(rules).findByText('tier-0-rule-7');
+        const rule7 = await within(rules).findByText('tag-0-rule-7');
 
         await user.click(rule7);
 

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/DynamicDetails.tsx

@@ -31,8 +31,8 @@ import { LuxonFormat } from '../../../utils';
 import { Cypher } from '../Cypher/Cypher';
 import { PrivilegeZonesContext } from '../PrivilegeZonesContext';
 import { ZoneIcon } from '../ZoneIcon';
+import { getRuleSeedType, isRule, isTag } from '../utils';
 import ObjectCountPanel from './ObjectCountPanel';
-import { getRuleSeedType, isRule, isTag } from './utils';
 
 const DetailField: FC<{ label: string; value: string }> = ({ label, value }) => {
     return (

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/MembersList.tsx

@@ -21,8 +21,8 @@ import { NodeIcon, SortableHeader } from '../../../components';
 import { InfiniteQueryFixedList, InfiniteQueryFixedListProps } from '../../../components/InfiniteQueryFixedList';
 import { SortOrder } from '../../../types';
 import { cn } from '../../../utils';
+import { getListHeight } from '../utils';
 import { SelectedHighlight } from './SelectedHighlight';
-import { getListHeight } from './utils';
 
 interface MembersListProps {
     listQuery: UseInfiniteQueryResult<{

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/RulesList.tsx

@@ -22,8 +22,8 @@ import { SortableHeader } from '../../../components';
 import { InfiniteQueryFixedList, InfiniteQueryFixedListProps } from '../../../components/InfiniteQueryFixedList';
 import { SortOrder } from '../../../types';
 import { cn } from '../../../utils';
+import { getListHeight } from '../utils';
 import { SelectedHighlight } from './SelectedHighlight';
-import { getListHeight } from './utils';
 
 const LoadingRow = (_: number, style: React.CSSProperties) => (
     <div

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/SearchBar.tsx

@@ -27,7 +27,7 @@ import { useQuery } from 'react-query';
 import { AppIcon } from '../../../components';
 import { useDebouncedValue, usePZPathParams } from '../../../hooks';
 import { apiClient, cn, useAppNavigate } from '../../../utils';
-import { isRule, isTag } from './utils';
+import { isRule, isTag } from '../utils';
 
 type SectorMap =
     | { Zones: 'tags'; Rules: 'selectors'; Members: 'members' } // 'selectors' is the key in the API response so should not be updated to 'rules'

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/TagList.test.tsx

@@ -107,7 +107,7 @@ describe('List', async () => {
 
         render(<TagList title='Labels' listQuery={testQuery} selected={'1'} onSelect={() => {}} />);
 
-        expect(screen.getAllByTestId('privilege-zones_labels-list_loading-skeleton')).toHaveLength(3);
+        expect(screen.getAllByTestId('privilege-zones_tags-list_loading-skeleton')).toHaveLength(3);
     });
 
     it('handles data fetching errors', async () => {

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/TagList.tsx

@@ -14,7 +14,7 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { Button } from '@bloodhoundenterprise/doodleui';
+import { Button, Skeleton } from '@bloodhoundenterprise/doodleui';
 import { AssetGroupTag } from 'js-client-library';
 import { FC, useState } from 'react';
 import { UseQueryResult } from 'react-query';
@@ -23,9 +23,18 @@ import { useHighestPrivilegeTagId, usePZPathParams, usePrivilegeZoneAnalysis } f
 import { SortOrder } from '../../../types';
 import { cn } from '../../../utils';
 import { ZoneIcon } from '../ZoneIcon';
-import { itemSkeletons } from '../utils';
+import { isTag } from '../utils';
 import { SelectedHighlight } from './SelectedHighlight';
-import { isTag } from './utils';
+
+const ItemSkeleton = () => {
+    return (
+        <li
+            data-testid={`privilege-zones_tags-list_loading-skeleton`}
+            className='border-y border-neutral-light-3 dark:border-neutral-dark-3 relative w-full'>
+            <Skeleton className='h-10 rounded-none' />
+        </li>
+    );
+};
 
 type TagListProps = {
     title: 'Zones' | 'Labels';
@@ -73,9 +82,11 @@ export const TagList: FC<TagListProps> = ({ title, listQuery, selected, onSelect
             )}
             <ul>
                 {listQuery.isLoading ? (
-                    itemSkeletons.map((skeleton, index) => {
-                        return skeleton(title, index);
-                    })
+                    <>
+                        <ItemSkeleton />
+                        <ItemSkeleton />
+                        <ItemSkeleton />
+                    </>
                 ) : listQuery.isError ? (
                     <li className='border-y border-neutral-3 relative h-10 pl-2'>
                         <span className='text-base'>There was an error fetching this data</span>

packages/javascript/bh-shared-ui/src/views/PrivilegeZones/Details/index.tsx

@@ -21,6 +21,3 @@ export { EntityRulesInformation, SelectedDetails };
 
 import Details from './Details';
 export default Details;
-
-// import NewDetails from './NewDetails';
-// export default NewDetails;