Update Comment Manual Link UI // Commented Out

.gitignore

@@ -4,7 +4,8 @@ node_modules
 dist
 build
 @redeye/darwin-x64
-dev-databases
+applications/server/dev-databases
+applications/server/campaign
 .eslintcache
 
 .yarn/*
@@ -25,7 +26,6 @@ junit.xml
 .vim
 .nova
 
-server/.env
 [diff]
     tool = vscode
 [difftool "vscode"]

applications/client/src/components/highlightPattern.tsx

@@ -0,0 +1,42 @@
+import { UtilityStyles } from '@redeye/ui-styles';
+import type { ReactNode } from 'react';
+
+// Sanitize input for use in regex
+function sanitizeRegex(text: string): string {
+	return (text ?? '').replace(/[#-.]|[[-^]|[?|{}]/g, '\\$&');
+}
+
+function tokenize(str) {
+	return str.split(/\s/gi);
+}
+
+function createRegex(pattern: string) {
+	return `(?:${tokenize(sanitizeRegex(pattern)).join('|')})`;
+}
+
+export const highlightPattern = (text?: string, pattern?: string): ReactNode => {
+	if (!text) return null;
+	if (!pattern) return text;
+
+	const regEx = new RegExp(createRegex(pattern), 'ig');
+	const splitText = text?.split?.(regEx) || '';
+	if (splitText.length <= 1) return text;
+
+	const matches = text.match(regEx);
+	if (!matches) return text;
+
+	return splitText.reduce<ReactNode[]>(
+		(arr, element, index) =>
+			matches[index]
+				? [
+						...arr,
+						element,
+						// eslint-disable-next-line react/no-array-index-key
+						<span key={`${element}-${index}`} css={UtilityStyles.textHighlight}>
+							{matches[index]}
+						</span>,
+				  ]
+				: [...arr, element],
+		[]
+	);
+};

applications/client/src/components/index.ts

@@ -13,6 +13,7 @@ export * from './ScrollBox';
 export * from './VirtualizedList';
 export * from './create-sorter';
 export * from './is-defined-guard';
+export * from './highlightPattern';
 export * from './mobx-create-state';
 export * from './utils-time';
 export * from './utils';

applications/client/src/views/Campaign/Explore/Panels/Command/CommandContainer.tsx

@@ -1,7 +1,7 @@
 import { Classes } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { createState } from '@redeye/client/components/mobx-create-state';
-import type { CommandModel } from '@redeye/client/store';
+import type { CommandModel, LinkModel } from '@redeye/client/store';
 import { useStore } from '@redeye/client/store';
 import type { UUID } from '@redeye/client/types/uuid';
 import { Command, CommandOutput, CommentCount, InfoRow } from '@redeye/client/views';
@@ -10,8 +10,9 @@ import { reaction } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
 import { Suspense, useEffect } from 'react';
+import { CarbonIcon, semanticIcons } from '@redeye/client/components';
 import { MitreTechniqueIcons } from '../../components/MitreTechniqueIcons';
-import { CheckForAddedLink } from '../../components/Comment/CheckForAddedLink';
+import { getManualCommandLinks } from '../../components/Comment/CheckForAddedLink';
 
 type CommandContainerProps = ComponentProps<'div'> & {
 	command?: CommandModel;
@@ -41,6 +42,9 @@ export const CommandContainer = observer<CommandContainerProps>(
 	}) => {
 		const store = useStore();
 		const state = createState({
+			manualLink: getManualCommandLinks(commandId, Array.from(store?.graphqlStore.links.values()))[0] as
+				| LinkModel
+				| undefined,
 			get active() {
 				return store.router.params.activeItem === 'command' && store.router.params.activeItemId === state.commandId;
 			},
@@ -97,6 +101,7 @@ export const CommandContainer = observer<CommandContainerProps>(
 				),
 			[]
 		);
+
 		return (
 			<div cy-test="command-info" css={wrapperStyle} {...props}>
 				<div css={[UtilityStyles.hoverRevealChildrenVisibility, gridWrapperStyle]}>
@@ -120,10 +125,9 @@ export const CommandContainer = observer<CommandContainerProps>(
 								showPath={showPath}
 							/>
 						</Suspense>
-						{/* add icon for added beacon link */}
 						<MitreTechniqueIcons mitreAttackIds={state.command?.mitreTechniques} />
-						{store.router.params.currentItem === 'beacon' && (
-							<CheckForAddedLink commandID={commandId} containerOrBox="container" toggleLinkedFlag={() => {}} />
+						{store.router.params.currentItem === 'beacon' && state.manualLink != null && (
+							<CarbonIcon icon={semanticIcons.link} />
 						)}
 					</InfoRow>
 					{!hideCommentButton && (

applications/client/src/views/Campaign/Explore/components/Comment/BeaconSuggest.tsx

@@ -0,0 +1,80 @@
+import type { ItemPredicate, ItemRenderer, Suggest2Props } from '@blueprintjs/select';
+import { Suggest2 } from '@blueprintjs/select';
+import type { BeaconModel } from '@redeye/client/store';
+import { useStore } from '@redeye/client/store';
+import { MenuItem2 } from '@blueprintjs/popover2';
+import { observer } from 'mobx-react-lite';
+import { Txt } from '@redeye/ui-styles';
+import { BeaconSuggestedRow } from './BeaconSuggestedRow';
+
+export type BeaconSuggestProps = Partial<Suggest2Props<BeaconModel>> & {
+	commandString: string;
+};
+
+export const BeaconSuggest = observer<BeaconSuggestProps>(
+	({ commandString, onItemSelect: _onItemSelect, popoverProps, ...suggestProps }: BeaconSuggestProps) => {
+		const store = useStore();
+		const beacons = Array.from(store.graphqlStore.beacons.values() || []);
+
+		const onItemSelect: BeaconSuggestProps['onItemSelect'] = (item) => {
+			_onItemSelect?.(item);
+		};
+
+		const findBeacon: ItemPredicate<BeaconModel> = (query, beaconModel) => {
+			const { displayName = '', beaconName = '', host } = beaconModel;
+			const { hostName = '' } = host?.current || {};
+			const beaconContext = beaconModel.meta[0]?.current.username || '';
+			// add serverName too?
+			return [hostName, displayName, beaconName, beaconContext].join(' ').toLowerCase().includes(query.toLowerCase());
+		};
+
+		const renderMenuItem: ItemRenderer<BeaconModel> = (beaconModel, { handleClick, modifiers, query }) => {
+			if (!modifiers.matchesPredicate) {
+				return null;
+			}
+			return (
+				<MenuItem2
+					key={beaconModel.id}
+					onClick={handleClick}
+					labelElement={commandString}
+					shouldDismissPopover={false}
+					text={<BeaconSuggestedRow beaconModel={beaconModel} query={query} />}
+					{...modifiers}
+				/>
+			);
+		};
+
+		const inputValueRenderer: BeaconSuggestProps['inputValueRenderer'] = (item) =>
+			`${item.host?.current.displayName} / ${item.displayName}`;
+
+		return (
+			<Suggest2
+				items={beacons}
+				itemPredicate={findBeacon}
+				itemRenderer={renderMenuItem}
+				inputValueRenderer={inputValueRenderer}
+				popoverProps={{
+					minimal: true,
+					hasBackdrop: true,
+					...popoverProps,
+				}}
+				onItemSelect={onItemSelect}
+				noResults={noResults}
+				resetOnQuery
+				fill
+				{...suggestProps}
+			/>
+		);
+	}
+);
+
+const noResults = (
+	<MenuItem2
+		disabled
+		text={
+			<Txt disabled italic>
+				No Results
+			</Txt>
+		}
+	/>
+);