Consolidated icon definitions (#162)

* consolidated icon definitions to shared ui

* moved svg object url logic back to bhce

* run license check

cmd/api/src/config/reflect_test.go

@@ -1,3 +1,19 @@
+// Copyright 2023 Specter Ops, Inc.
+//
+// Licensed under the Apache License, Version 2.0
+// 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.
+//
+// SPDX-License-Identifier: Apache-2.0
+
 package config_test
 
 import (

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

@@ -0,0 +1,50 @@
+// Copyright 2023 Specter Ops, Inc.
+//
+// Licensed under the Apache License, Version 2.0
+// 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.
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { icon } from '@fortawesome/fontawesome-svg-core';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { GLYPHS, GlyphDictionary, IconDictionary, NODE_ICON, UNKNOWN_ICON } from 'bh-shared-ui';
+
+const NODE_SCALE = '0.6';
+const GLYPH_SCALE = '0.5';
+const DEFAULT_ICON_COLOR = '#000000';
+
+// Adds object URLs to all icon and glyph definitions so that our fontawesome icons can be used by sigmajs node programs
+const appendSvgUrls = (icons: IconDictionary | GlyphDictionary, scale: string): void => {
+    Object.entries(icons).forEach(([type, value]) => {
+        if (value.url) return;
+
+        const color = (icons[type] as any).iconColor || DEFAULT_ICON_COLOR;
+        icons[type].url = getModifiedSvgUrlFromIcon(value.icon, scale, color);
+    });
+};
+
+const getModifiedSvgUrlFromIcon = (iconDefinition: IconDefinition, scale: string, color: string): string => {
+    const modifiedIcon = icon(iconDefinition, {
+        styles: { 'transform-origin': 'center', scale, color },
+    });
+
+    const svgString = modifiedIcon.html[0].replace(/<svg/, '<svg width="200" height="200"');
+    const svg = new Blob([svgString], { type: 'image/svg+xml' });
+    return URL.createObjectURL(svg);
+};
+
+// Append URLs for nodes, glyphs, and any additional utility icons
+appendSvgUrls(NODE_ICON, NODE_SCALE);
+appendSvgUrls(GLYPHS, GLYPH_SCALE);
+UNKNOWN_ICON.url = getModifiedSvgUrlFromIcon(UNKNOWN_ICON.icon, NODE_SCALE, DEFAULT_ICON_COLOR);
+
+export { NODE_ICON, GLYPHS, UNKNOWN_ICON };

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

@@ -29,9 +29,10 @@ import { GraphEdges, GraphNodes } from 'js-client-library';
 import isEmpty from 'lodash/isEmpty';
 import startCase from 'lodash/startCase';
 import { ZERO_VALUE_API_DATE } from 'src/constants';
-import { GLYPHS, GlyphKind, NODE_ICON, UNKNOWN_ICON } from 'src/icons';
+import { GlyphKind } from 'bh-shared-ui';
 import { GlyphLocation } from 'src/rendering/programs/node.glyphs';
 import { EdgeDirection, EdgeParams, NodeParams } from 'src/utils';
+import { NODE_ICON, GLYPHS, UNKNOWN_ICON } from './svgIcons';
 
 export let controller = new AbortController();
 

packages/javascript/bh-shared-ui/rollup.config.js

@@ -36,6 +36,7 @@ export default {
         '@emotion/react',
         '@emotion/styled',
         '@fortawesome/free-solid-svg-icons',
+        '@fortawesome/fontawesome-svg-core',
         '@fortawesome/react-fontawesome',
         '@reduxjs/toolkit',
         '@mui/material',

packages/javascript/bh-shared-ui/src/components/NodeIcon/NodeIcon.tsx

@@ -19,7 +19,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Box, Tooltip } from '@mui/material';
 import { Theme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
-import { NODE_ICON } from './constants';
+import { NODE_ICON } from '../../utils/icons';
 
 interface NodeIconProps {
     nodeType: string;

packages/javascript/bh-shared-ui/src/components/NodeIcon/index.ts

@@ -14,6 +14,6 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './constants';
+export * from '../../utils/icons';
 export * from './NodeIcon';
 export { default } from './NodeIcon';

cmd/ui/src/icons.ts → packages/javascript/bh-shared-ui/src/utils/icons.ts

@@ -14,7 +14,6 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { icon } from '@fortawesome/fontawesome-svg-core';
 import {
     faBox,
     faBoxOpen,
@@ -42,7 +41,7 @@ import {
     faQuestion,
     faMinus,
 } from '@fortawesome/free-solid-svg-icons';
-import { ActiveDirectoryNodeKind, AzureNodeKind } from 'bh-shared-ui';
+import { ActiveDirectoryNodeKind, AzureNodeKind } from '../graphSchema';
 
 export type IconInfo = {
     icon: IconDefinition;
@@ -64,10 +63,6 @@ export enum GlyphKind {
     COLLAPSE,
 }
 
-const NODE_SCALE = '0.6';
-const GLYPH_SCALE = '0.5';
-const DEFAULT_ICON_COLOR = '#000000';
-
 export const NODE_ICON: IconDictionary = {
     [ActiveDirectoryNodeKind.User]: {
         icon: faUser,
@@ -220,28 +215,3 @@ export const UNKNOWN_ICON: IconInfo = {
     icon: faQuestion,
     color: '#FFFFFF',
 };
-
-// Adds object URLs to all icon and glyph definitions so that our fontawesome icons can be used by sigmajs node programs
-const appendSvgUrls = (icons: IconDictionary | GlyphDictionary, scale: string): void => {
-    Object.entries(icons).forEach(([type, value]) => {
-        if (value.url) return;
-
-        const color = (icons[type] as any).iconColor || DEFAULT_ICON_COLOR;
-        icons[type].url = getModifiedSvgUrlFromIcon(value.icon, scale, color);
-    });
-};
-
-const getModifiedSvgUrlFromIcon = (iconDefinition: IconDefinition, scale: string, color: string): string => {
-    const modifiedIcon = icon(iconDefinition, {
-        styles: { 'transform-origin': 'center', scale, color },
-    });
-
-    const svgString = modifiedIcon.html[0].replace(/<svg/, '<svg width="200" height="200"');
-    const svg = new Blob([svgString], { type: 'image/svg+xml' });
-    return URL.createObjectURL(svg);
-};
-
-// Append URLs for nodes, glyphs, and any additional utility icons
-appendSvgUrls(NODE_ICON, NODE_SCALE);
-appendSvgUrls(GLYPHS, GLYPH_SCALE);
-UNKNOWN_ICON.url = getModifiedSvgUrlFromIcon(UNKNOWN_ICON.icon, NODE_SCALE, DEFAULT_ICON_COLOR);

packages/javascript/bh-shared-ui/src/utils/index.ts

@@ -20,3 +20,4 @@ export * from './exportGraphData';
 export * from './entityInfoDisplay';
 export * from './passwd';
 export * from './user';
+export * from './icons';