Quick Meta button update

applications/client/src/views/Campaign/Explore/Panels/Beacon/Beacon.tsx

@@ -3,8 +3,17 @@ import { ViewOff16 } from '@carbon/icons-react';
 import { dateShortFormat, semanticIcons } from '@redeye/client/components';
 import type { BeaconModel } from '@redeye/client/store';
 import { useStore } from '@redeye/client/store';
+import { InfoType } from '@redeye/client/types';
 import { TimeStatus } from '@redeye/client/types/timeline';
-import { IconLabel, InfoRow, RowMuted, RowTime, RowTitle, useToggleHidden } from '@redeye/client/views';
+import {
+	IconLabel,
+	InfoRow,
+	RowMuted,
+	RowTime,
+	RowTitle,
+	ToggleHiddenDialog,
+	useToggleHidden,
+} from '@redeye/client/views';
 import { FlexSplitter } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
@@ -23,7 +32,7 @@ export const BeaconRow = observer<BeaconProps>(({ beacon, ...props }) => {
 		[beacon.displayName, beacon.server?.displayName]
 	);
 
-	const [, mutateToggleHidden] = useToggleHidden(
+	const [toggleHidden, mutateToggleHidden] = useToggleHidden(
 		async () =>
 			await store.graphqlStore.mutateToggleBeaconHidden({
 				campaignId: store.campaign?.id!,
@@ -45,8 +54,8 @@ export const BeaconRow = observer<BeaconProps>(({ beacon, ...props }) => {
 			</RowTime>
 			<RowTitle className={skeletonClass}>{beacon?.displayName || `${beacon.server?.displayName}`}</RowTitle>
 			<RowMuted className={skeletonClass}>{beacon.meta?.[0]?.maybeCurrent?.username}</RowMuted>
-			{beacon?.hidden && <IconLabel title="Hidden" icon={ViewOff16} />}
 			<FlexSplitter />
+			{beacon?.hidden && <IconLabel title="Hidden" icon={ViewOff16} />}
 			<MitreTechniqueIcons mitreAttackIds={beacon.mitreTechniques} />
 			<IconLabel
 				cy-test="row-command-count"
@@ -55,7 +64,22 @@ export const BeaconRow = observer<BeaconProps>(({ beacon, ...props }) => {
 				icon={semanticIcons.commands}
 				className={skeletonClass}
 			/>
-			<QuickMeta modal={beacon} mutateToggleHidden={mutateToggleHidden} />
+			<QuickMeta
+				modal={beacon}
+				mutateToggleHidden={mutateToggleHidden}
+				disabled={!!store.appMeta.blueTeam}
+				click={() => toggleHidden.update('showHide', true)}
+			/>
+			<ToggleHiddenDialog
+				isOpen={toggleHidden.showHide}
+				infoType={InfoType.BEACON}
+				isHiddenToggled={!!beacon?.hidden}
+				onClose={(e) => {
+					e.stopPropagation();
+					toggleHidden.update('showHide', false);
+				}}
+				onHide={() => mutateToggleHidden.mutate()}
+			/>
 		</InfoRow>
 	);
 });

applications/client/src/views/Campaign/Explore/Panels/Host/Host.tsx

@@ -2,8 +2,8 @@ import { ViewOff16 } from '@carbon/icons-react';
 import { CarbonIcon, dateShortFormat, dateShortPlaceholder, semanticIcons } from '@redeye/client/components';
 import type { HostModel } from '@redeye/client/store';
 import { useStore } from '@redeye/client/store';
-import { TimeStatus } from '@redeye/client/types';
-import { IconLabel, InfoRow, RowTime, RowTitle, useToggleHidden } from '@redeye/client/views';
+import { InfoType, TimeStatus } from '@redeye/client/types';
+import { IconLabel, InfoRow, RowTime, RowTitle, ToggleHiddenDialog, useToggleHidden } from '@redeye/client/views';
 import { FlexSplitter, Txt } from '@redeye/ui-styles';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
@@ -18,7 +18,7 @@ export const HostRow = observer<HostRowProps>(({ host, ...props }) => {
 
 	if (!host) return null;
 
-	const [, mutateToggleHidden] = useToggleHidden(async () =>
+	const [toggleHidden, mutateToggleHidden] = useToggleHidden(async () =>
 		host.cobaltStrikeServer
 			? await store.graphqlStore.mutateToggleServerHidden({
 					campaignId: store.campaign?.id!,
@@ -48,15 +48,30 @@ export const HostRow = observer<HostRowProps>(({ host, ...props }) => {
 					{host.displayName}
 				</Txt>
 			</RowTitle>
-			{host?.hidden && <IconLabel title="Hidden" icon={ViewOff16} />}
 			<FlexSplitter />
+			{host?.hidden && <IconLabel title="Hidden" icon={ViewOff16} />}
 			{!host.cobaltStrikeServer && (
 				<>
 					<IconLabel cy-test="row-command-count" title="Commands" value={host.commandsCount} icon={semanticIcons.commands} />
 					<IconLabel cy-test="row-beacon-count" value={host.beaconCount} title="Beacons" icon={semanticIcons.beacon} />
 				</>
 			)}
-			<QuickMeta modal={host} mutateToggleHidden={mutateToggleHidden} />
+			<QuickMeta
+				modal={host}
+				mutateToggleHidden={mutateToggleHidden}
+				disabled={!!store.appMeta.blueTeam}
+				click={() => toggleHidden.update('showHide', true)}
+			/>
+			<ToggleHiddenDialog
+				isOpen={toggleHidden.showHide}
+				infoType={host.cobaltStrikeServer ? InfoType.SERVER : InfoType.HOST}
+				isHiddenToggled={!!host?.hidden}
+				onClose={(e) => {
+					e.stopPropagation();
+					toggleHidden.update('showHide', false);
+				}}
+				onHide={() => mutateToggleHidden.mutate()}
+			/>
 		</InfoRow>
 	);
 });

applications/client/src/views/Campaign/Explore/Panels/Meta/HideDialog.tsx

@@ -41,7 +41,8 @@ export const ToggleHiddenDialog = observer<Props>(
 							intent={Intent.PRIMARY}
 							rightIcon={<CarbonIcon icon={isHiddenToggled ? View16 : ViewOff16} />}
 							loading={loading}
-							onClick={() => {
+							onClick={(e) => {
+								e.stopPropagation();
 								setLoading(true);
 								onHide();
 							}}

applications/client/src/views/Campaign/Explore/Panels/QuickMeta.tsx

@@ -1,4 +1,4 @@
-import { Menu, MenuItem, Position } from '@blueprintjs/core';
+import { Button, Menu, MenuItem, Position } from '@blueprintjs/core';
 import { Popover2 } from '@blueprintjs/popover2';
 import { OverflowMenuVertical16, View16, ViewOff16 } from '@carbon/icons-react';
 import { css } from '@emotion/react';
@@ -12,10 +12,12 @@ import type { ComponentProps } from 'react';
 
 type HostRowProps = ComponentProps<'div'> & {
 	modal: HostModel | ServerModel | BeaconModel;
-	mutateToggleHidden: UseMutationResult<any, unknown, void, unknown>;
+	mutateToggleHidden?: UseMutationResult<any, unknown, void, unknown>;
+	disabled?: boolean;
+	click?: () => void;
 };
 
-export const QuickMeta = observer<HostRowProps>(({ modal, mutateToggleHidden }) => {
+export const QuickMeta = observer<HostRowProps>(({ modal, mutateToggleHidden, click, disabled = false }) => {
 	if (!modal) return null;
 
 	return (
@@ -35,6 +37,7 @@ export const QuickMeta = observer<HostRowProps>(({ modal, mutateToggleHidden })
 			content={
 				<Menu>
 					<MenuItem
+						disabled={disabled}
 						text={`${modal?.hidden ? 'Show ' : 'Hide '} ${
 							modal instanceof BeaconModel
 								? 'Beacon'
@@ -45,13 +48,14 @@ export const QuickMeta = observer<HostRowProps>(({ modal, mutateToggleHidden })
 						icon={<CarbonIcon icon={modal?.hidden ? View16 : ViewOff16} css={iconStyle(!!modal?.hidden)} />}
 						onClick={(e) => {
 							e.stopPropagation();
-							mutateToggleHidden.mutate();
+							// mutateToggleHidden?.mutate();
+							click?.();
 						}}
 					/>
 				</Menu>
 			}
 		>
-			<CarbonIcon icon={OverflowMenuVertical16} css={[iconStyle(), hoverStyle]} />
+			<Button icon={<CarbonIcon icon={OverflowMenuVertical16} />} minimal small css={buttonStyle} />
 		</Popover2>
 	);
 });
@@ -61,8 +65,9 @@ const iconStyle = (show?: boolean) => css`
 	color: ${show ? CoreTokens.TextBody : CoreTokens.TextDisabled} !important;
 `;
 
-const hoverStyle = css`
-	:hover {
-		color: ${CoreTokens.TextBody} !important;
+const buttonStyle = css`
+	margin: 0 -8px 0 -4px;
+	&:not(:hover) {
+		opacity: 0.3;
 	}
 `;

applications/client/src/views/Campaign/Explore/components/IconLabel.tsx

@@ -12,7 +12,7 @@ type TextLabelProps = ComponentProps<'span'> & {
 export const IconLabel = observer<TextLabelProps>(({ value, icon, ...props }) => (
 	<span
 		css={css`
-			margin-right: 1rem;
+			margin-right: 0.5rem;
 		`}
 		{...props}
 	>
@@ -21,7 +21,7 @@ export const IconLabel = observer<TextLabelProps>(({ value, icon, ...props }) =>
 			icon={icon}
 			css={css`
 				color: ${CoreTokens.TextDisabled} !important;
-				margin-left: 0.25rem;
+				margin-left: 2px;
 			`}
 		/>
 	</span>