fix: render both owned and t0 glyphs

Author: urangel

cmd/api/src/database/migration/migrations/v8.4.0.sql

@@ -44,13 +44,9 @@ JOIN permissions p
 ON CONFLICT DO NOTHING;
 
 
--- Explicitly set glyph values for the default asset_group_tags
 
+-- Explicitly set glyph values for the default asset_group_tags
 -- Find Tier Zero by position
-UPDATE asset_group_tags
-SET glyph = 'gem'
-WHERE position = 1;
+UPDATE asset_group_tags SET glyph = 'gem' WHERE position = 1;
 -- Find Owned by type
-UPDATE asset_group_tags
-SET glyph = 'skull'
-WHERE type = 3;
+UPDATE asset_group_tags SET glyph = 'skull' WHERE type = 3;

cmd/ui/src/views/Explore/GraphView.tsx

@@ -78,7 +78,7 @@ const GraphView: FC = () => {
     const isExploreTableSelected = useAppSelector((state) => state.global.view.isExploreTableSelected);
 
     const customIconsQuery = useCustomNodeKinds({ select: transformIconDictionary });
-    const tagGlyphMap = useTagGlyphs(glyphUtils, darkMode);
+    const tagGlyphs = useTagGlyphs(glyphUtils, darkMode);
 
     const autoDisplayTableEnabled = !exploreLayout && !isExploreTableSelected;
     const [autoDisplayTable, setAutoDisplayTable] = useExploreTableAutoDisplay(autoDisplayTableEnabled);
@@ -96,9 +96,9 @@ const GraphView: FC = () => {
             darkMode,
             customIcons: customIconsQuery?.data ?? {},
             hideNodes: displayTable,
-            tagGlyphMap,
+            tagGlyphs,
         };
-    }, [theme, darkMode, customIconsQuery.data, displayTable, tagGlyphMap]);
+    }, [theme, darkMode, customIconsQuery.data, displayTable, tagGlyphs]);
 
     // Initialize graph data for rendering with sigmajs
     useEffect(() => {

cmd/ui/src/views/Explore/utils.test.ts

@@ -84,15 +84,27 @@ describe('Explore utils', () => {
         it('uses sequentialLayout by default', () => {
             initGraph(
                 { nodes: {}, edges: [] },
-                { theme: mockTheme as Theme, hideNodes: false, customIcons: {}, darkMode: false, tagGlyphMap: {} }
+                {
+                    theme: mockTheme as Theme,
+                    hideNodes: false,
+                    customIcons: {},
+                    darkMode: false,
+                    tagGlyphs: {},
+                }
             );
 
             expect(layoutDagreSpy).toBeCalled();
         });
         it('dedupes edges before adding them to the graph', () => {
             const graph = initGraph(
                 { nodes: testNodes, edges: testEdgesWithDuplicate },
-                { theme: mockTheme as Theme, hideNodes: false, customIcons: {}, darkMode: false, tagGlyphMap: {} }
+                {
+                    theme: mockTheme as Theme,
+                    hideNodes: false,
+                    customIcons: {},
+                    darkMode: false,
+                    tagGlyphs: {},
+                }
             );
 
             expect(graph.edges().length).toEqual(3);

cmd/ui/src/views/Explore/utils.ts

@@ -15,7 +15,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Theme } from '@mui/material';
-import { GetIconInfo, IconDictionary, getGlyphFromKinds } from 'bh-shared-ui';
+import { GetIconInfo, IconDictionary, TagGlyphs, getGlyphFromKinds } from 'bh-shared-ui';
 import { MultiDirectedGraph } from 'graphology';
 import { random } from 'graphology-layout';
 import forceAtlas2 from 'graphology-layout-forceatlas2';
@@ -53,7 +53,7 @@ type GraphOptions = {
     darkMode: boolean;
     customIcons: IconDictionary;
     hideNodes: boolean;
-    tagGlyphMap: Record<string, string>;
+    tagGlyphs: TagGlyphs;
     themedOptions?: ThemedOptions;
 };
 
@@ -95,7 +95,7 @@ const initGraphNodes = (
     nodes: GraphNodes,
     options: GraphOptions & { themedOptions: ThemedOptions }
 ) => {
-    const { themedOptions, customIcons, hideNodes, tagGlyphMap } = options;
+    const { themedOptions, customIcons, hideNodes, tagGlyphs } = options;
 
     Object.keys(nodes).forEach((key: string) => {
         const node = nodes[key];
@@ -113,11 +113,20 @@ const initGraphNodes = (
         nodeParams.image = iconInfo.url || '';
         nodeParams.glyphs = [];
 
-        const glyphImage = getGlyphFromKinds(node.kinds, tagGlyphMap);
+        if (node.kinds.includes(tagGlyphs.owned)) {
+            nodeParams.type = 'glyphs';
+            nodeParams.glyphs.push({
+                location: GlyphLocation.BOTTOM_RIGHT,
+                image: tagGlyphs.ownedGlyph,
+                ...themedOptions.glyph.colors,
+            });
+        }
+
+        const glyphImage = getGlyphFromKinds(node.kinds, tagGlyphs);
         if (glyphImage) {
             nodeParams.type = 'glyphs';
             nodeParams.glyphs.push({
-                location: node.isOwnedObject ? GlyphLocation.BOTTOM_RIGHT : GlyphLocation.TOP_RIGHT,
+                location: GlyphLocation.TOP_RIGHT,
                 image: glyphImage,
                 ...themedOptions.glyph.colors,
             });

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

@@ -66,7 +66,7 @@ describe('AssetGroupEdit', () => {
 
     it('should display a total count of asset group members', async () => {
         const { screen } = await setup();
-        const count = screen.getByText('Total Count').nextSibling.textContent;
+        const count = screen.getByText('Total Count').nextSibling?.textContent;
         expect(count).toBe(memberCounts.total_count.toString());
     });
 
@@ -75,7 +75,7 @@ describe('AssetGroupEdit', () => {
         const input = screen.getByRole('combobox');
 
         await user.type(input, 'test');
-        expect(input.value).toEqual('test');
+        expect(input).toHaveAttribute('value', 'test');
 
         const result = await waitFor(() => screen.getByText('00001.TESTLAB.LOCAL'));
         expect(result).toBeInTheDocument();
@@ -86,8 +86,9 @@ describe('AssetGroupEdit', () => {
         const selection = searchResults[0];
 
         const input = screen.getByRole('combobox');
+
         await user.type(input, 'test');
-        expect(input.value).toEqual('test');
+        expect(input).toHaveAttribute('value', 'test');
 
         const result = await waitFor(() => screen.getByText(selection.name));
         await user.click(result);
@@ -105,7 +106,7 @@ describe('AssetGroupEdit', () => {
 
         const input = screen.getByRole('combobox');
         await user.type(input, 'test');
-        expect(input.value).toEqual('test');
+        expect(input).toHaveAttribute('value', 'test');
 
         const result = await waitFor(() => screen.getByText(selection.name));
         await user.click(result);

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

@@ -14,14 +14,13 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { Screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { AssetGroupMemberCountsResponse, AssetGroupMemberParams } from 'js-client-library';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { ActiveDirectoryNodeKind } from '../../graphSchema';
 import { createMockAssetGroupMemberParams, createMockMemberCounts } from '../../mocks/factories';
-import { act, render } from '../../test-utils';
+import { act, render, screen, waitFor } from '../../test-utils';
 import AssetGroupFilters, { FILTERABLE_PARAMS } from './AssetGroupFilters';
 
 const filterParams = createMockAssetGroupMemberParams();
@@ -48,7 +47,7 @@ describe('AssetGroupEdit', () => {
     }) => {
         const user = userEvent.setup();
         const handleFilterChange = vi.fn();
-        const screen: Screen = await act(async () => {
+        await act(async () => {
             return render(
                 <AssetGroupFilters
                     filterParams={options?.filterParams ?? {}}
@@ -57,11 +56,11 @@ describe('AssetGroupEdit', () => {
                 />
             );
         });
-        return { user, screen, handleFilterChange };
+        return { user, handleFilterChange };
     };
 
     it('renders a button that expands the filter section', async () => {
-        const { screen, user } = await setup({ filterParams, memberCounts });
+        const { user } = await setup({ filterParams, memberCounts });
         const filtersButton = screen.getByTestId('display-filters-button');
         const collapsedSection = screen.getByTestId('asset-group-filter-collapsible-section');
 
@@ -76,15 +75,15 @@ describe('AssetGroupEdit', () => {
     });
 
     it('indicates that filters are active', async () => {
-        const { screen } = await setup({ filterParams, memberCounts });
+        await setup({ filterParams, memberCounts });
 
         const activeFiltersDot = screen.getByTestId('active-filters-dot');
 
         expect(activeFiltersDot).toHaveStyle({ visibility: 'visible' });
     });
 
     it('indicates that filters are inactive', async () => {
-        const { screen } = await setup();
+        await setup();
 
         const activeFiltersDot = screen.getByTestId('active-filters-dot');
 
@@ -93,7 +92,7 @@ describe('AssetGroupEdit', () => {
 
     describe('Node Type dropdown filter', () => {
         it('displays the value from filterParams.node_type', async () => {
-            const { screen } = await setup({ filterParams, memberCounts });
+            await setup({ filterParams, memberCounts });
             const nodeTypeFilter = screen.getByTestId('asset-groups-node-type-filter');
             const nodeTypeFilterValue = nodeTypeFilter.firstChild?.nextSibling;
 
@@ -102,7 +101,7 @@ describe('AssetGroupEdit', () => {
         });
 
         it('lists all available node kinds as options to filter by', async () => {
-            const { screen, user } = await setup({ memberCounts });
+            const { user } = await setup({ memberCounts });
 
             await user.click(screen.getByTestId('display-filters-button'));
             await user.click(screen.getByLabelText('Node Type'));
@@ -117,7 +116,7 @@ describe('AssetGroupEdit', () => {
         });
 
         it('calls handleFilterChange when a node type is selected', async () => {
-            const { screen, user, handleFilterChange } = await setup({ memberCounts });
+            const { user, handleFilterChange } = await setup({ memberCounts });
 
             const expectedNodeKind = ActiveDirectoryNodeKind.Domain;
 
@@ -132,14 +131,14 @@ describe('AssetGroupEdit', () => {
 
     describe('Custom Member checkbox filter', () => {
         it("displays the checkbox as checked if the filter params value is 'true'", async () => {
-            const { screen } = await setup({ filterParams: { custom_member: 'eq:true' }, memberCounts });
+            await setup({ filterParams: { custom_member: 'eq:true' }, memberCounts });
             const checkbox = screen.getByTestId('asset-groups-custom-member-filter');
 
             expect((checkbox.firstChild as HTMLInputElement)?.checked).toBe(true);
         });
 
         it('invokes handleFilterChange with eq:false when clicked and custom_member filter is on', async () => {
-            const { screen, user, handleFilterChange } = await setup({ filterParams, memberCounts });
+            const { user, handleFilterChange } = await setup({ filterParams, memberCounts });
             const checkbox = screen.getByTestId('asset-groups-custom-member-filter');
 
             await user.click(checkbox);
@@ -149,7 +148,7 @@ describe('AssetGroupEdit', () => {
         });
 
         it('invokes handleFilterChange with eq:true when clicked and custom_member filter is off', async () => {
-            const { screen, user, handleFilterChange } = await setup();
+            const { user, handleFilterChange } = await setup();
             const checkbox = screen.getByTestId('asset-groups-custom-member-filter');
 
             await user.click(checkbox);
@@ -161,14 +160,14 @@ describe('AssetGroupEdit', () => {
 
     describe('Clear Filters button', () => {
         it('has a button with text Clear Filters', async () => {
-            const { screen } = await setup({ filterParams, memberCounts });
+            await setup({ filterParams, memberCounts });
             const clearFilersButton = screen.getByText('Clear Filters');
 
             expect(clearFilersButton).toBeInTheDocument();
         });
 
         it('calls handleFilterChange with all filter types and empty strings when clicked while filters are active', async () => {
-            const { screen, user, handleFilterChange } = await setup({ filterParams, memberCounts });
+            const { user, handleFilterChange } = await setup({ filterParams, memberCounts });
             const clearFilersButton = screen.getByText('Clear Filters');
 
             await user.click(clearFilersButton);
@@ -180,7 +179,7 @@ describe('AssetGroupEdit', () => {
         });
 
         it('is disabled if no filters are active', async () => {
-            const { screen } = await setup();
+            await setup();
             const clearFilersButton: HTMLButtonElement = screen.getByText('Clear Filters');
 
             expect(clearFilersButton.disabled).toBe(true);

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

@@ -15,27 +15,27 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import userEvent from '@testing-library/user-event';
-import { Screen, act, render } from '../../../test-utils';
+import { act, render, screen } from '../../../test-utils';
 import CodeController from './CodeController';
 
 describe('CodeController', () => {
     const defaultExpected = 'testing some code to display';
     const setup = async (code = defaultExpected) => {
         const user = userEvent.setup();
-        const screen: Screen = await act(async () => {
+        await act(async () => {
             return render(<CodeController>{code}</CodeController>);
         });
-        return { user, screen };
+        return { user };
     };
 
     it('displays the value thats passed via children', async () => {
-        const { screen } = await setup();
+        await setup();
 
         expect(screen.getByText(defaultExpected)).toBeInTheDocument();
     });
 
     it('defaults to wrapped and removes .wrapped class when unwrap btn is clicked', async () => {
-        const { screen, user } = await setup();
+        const { user } = await setup();
 
         expect(screen.getByText(defaultExpected).className.includes('wrapped')).toBeTruthy();
 
@@ -45,7 +45,7 @@ describe('CodeController', () => {
     });
 
     it('copys children value to clipboard after clicking the copy btn', async () => {
-        const { screen, user } = await setup();
+        const { user } = await setup();
 
         await user.click(screen.getByText('copy'));
 
@@ -56,7 +56,7 @@ describe('CodeController', () => {
 
     it('indicates the code container is scrollable when the code is unwrapped', async () => {
         const expected = Array(10).fill('testing large code block').join(' ');
-        const { screen, user } = await setup(expected);
+        const { user } = await setup(expected);
 
         await user.click(screen.getByText('Unwrap'));
 

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

@@ -130,6 +130,8 @@ export const glyphUtils: GlyphUtils = {
     transformer: glyphTransformer,
 };
 
+export const TagLabelPrefix = 'Tag_' as const;
+
 export const createGlyphMapFromTags = (
     tags: AssetGroupTag[] | undefined,
     utils: GlyphUtils,
@@ -141,11 +143,18 @@ export const createGlyphMapFromTags = (
     tags?.forEach((tag) => {
         const underscoredTagName = tag.name.split(' ').join('_');
 
-        if (tag.glyph !== null && qualifier(tag.glyph)) {
-            const glyphValue = transformer(tag.glyph, darkMode);
+        if (tag.glyph === null) return;
+        if (!qualifier(tag.glyph)) return;
+
+        const glyphValue = transformer(tag.glyph, darkMode);
 
-            if (glyphValue !== '') glyphMap[`Tag_${underscoredTagName}`] = glyphValue;
+        if (tag.type === AssetGroupTagTypeOwned) {
+            glyphMap.owned = `${TagLabelPrefix}${underscoredTagName}`;
+            glyphMap.ownedGlyph = glyphValue;
+            return;
         }
+
+        if (glyphValue !== '') glyphMap[`${TagLabelPrefix}${underscoredTagName}`] = glyphValue;
     });
 
     return glyphMap;
@@ -154,14 +163,17 @@ export const createGlyphMapFromTags = (
 export const getGlyphFromKinds = (kinds: string[] = [], tagGlyphMap: Record<string, string> = {}): string | null => {
     for (let index = kinds.length - 1; index > -1; index--) {
         const kind = kinds[index];
-        if (!kind.includes('Tag_')) continue;
+
+        if (!kind.includes(TagLabelPrefix)) continue;
 
         if (tagGlyphMap[kind]) return tagGlyphMap[kind];
     }
     return null;
 };
 
-export const useTagGlyphs = (glyphUtils: GlyphUtils, darkMode?: boolean) => {
+export type TagGlyphs = Record<string, string>;
+
+export const useTagGlyphs = (glyphUtils: GlyphUtils, darkMode?: boolean): TagGlyphs => {
     const [glyphMap, setGlyphMap] = useState<Record<string, string>>({});
     const tagsQuery = useAssetGroupTags();