Minor Label Tweaks

applications/client/src/types/explore.ts

@@ -11,12 +11,10 @@ export enum InfoType {
 export enum Tabs {
 	BEACONS = 'beacons',
 	HOSTS = 'hosts',
-	// LANES = 'Lanes',
 	COMMANDS = 'commands',
 	COMMANDS_OVERVIEW = 'command-overview',
 	OPERATORS = 'operators',
 	COMMENTS = 'comments',
 	COMMENTS_LIST = 'comments_list',
-	// INFO = 'Info',
-	METADATA = 'Metadata',
+	METADATA = 'details',
 }

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

@@ -24,7 +24,7 @@ export const CommandOutput = observer<CommandOutputProps>(({ command }) => {
 			this.showAll = !this.showAll;
 		},
 		get commandOutputLines() {
-			const commandOutputLines = command?.outputLines.slice();
+			const commandOutputLines = command?.outputLines.slice(); // shallow copy to edit
 			if (commandOutputLines) {
 				while (commandOutputLines[0] === '') {
 					commandOutputLines.shift();
@@ -77,6 +77,9 @@ export const CommandOutput = observer<CommandOutputProps>(({ command }) => {
 			</div>
 			<div css={outputScrollWrapperStyle} cy-test="log-details">
 				<div css={outputOverflowWrapperStyle}>
+					<pre css={preStyles} cy-test="logInfo">
+						{command?.inputLog?.blob}
+					</pre>
 					{state.renderedLines?.length ? (
 						<>
 							<pre css={preStyles} cy-test="logInfo">

applications/client/src/views/Campaign/Explore/Panels/Comment/CommentsList.tsx

@@ -9,7 +9,7 @@ import {
 import { CoreTokens, FlexSplitter } from '@redeye/ui-styles';
 import { useQuery } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
-import { Bookmark16, Hashtag16, Playlist16, User16 } from '@carbon/icons-react';
+import { StarFilled16, Hashtag16, Playlist16, User16 } from '@carbon/icons-react';
 import type { ComponentProps } from 'react';
 import { useCallback, useMemo } from 'react';
 import { CampaignViews, Tabs } from '@redeye/client/types';
@@ -100,7 +100,7 @@ export const CommentsList = observer<CommentsListProps>(({ sort }) => {
 					/>
 					<IconLabel
 						cy-test="comment-count"
-						title="comments"
+						title="Comments"
 						value={presentationItem.count}
 						icon={semanticIcons.comment}
 					/>
@@ -111,7 +111,7 @@ export const CommentsList = observer<CommentsListProps>(({ sort }) => {
 });
 
 const getIcon = (itemId: string): any => {
-	if (itemId === 'favorited') return Bookmark16;
+	if (itemId === 'favorited') return StarFilled16;
 	if (itemId === 'procedural') return Playlist16;
 	if (itemId.slice(0, 5) === 'user-') return User16;
 	else return Hashtag16;

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

@@ -34,7 +34,7 @@ export const TabNames: (store: AppStore) => Record<Tabs, string> = (store: AppSt
 	[Tabs.OPERATORS]: 'Operators',
 	[Tabs.COMMENTS]: store.router.params.currentItem === 'comments_list' ? '' : 'Comments',
 	[Tabs.COMMENTS_LIST]: 'Comments',
-	[Tabs.METADATA]: 'Meta',
+	[Tabs.METADATA]: 'Details',
 });
 
 export enum CommentFilterOptions {

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

@@ -2,9 +2,10 @@ import { Alignment, Button, ButtonGroup, Classes, Intent, Position, TextArea } f
 import type { ItemPredicate } from '@blueprintjs/select';
 import { MultiSelect2 } from '@blueprintjs/select';
 import {
+	Add16,
 	ArrowRight16,
-	Bookmark16,
-	BookmarkFilled16,
+	Star16,
+	StarFilled16,
 	Chat16,
 	Checkmark16,
 	Edit16,
@@ -424,7 +425,7 @@ export const CommentBox = observer<CommentBoxProps>(
 						cy-test="fav-comment"
 						minimal
 						small
-						icon={<CarbonIcon icon={state.favorite ? BookmarkFilled16 : Bookmark16} />}
+						icon={<CarbonIcon icon={state.favorite ? StarFilled16 : Star16} />}
 						onClick={state.toggleFavorite}
 						disabled={!isRedTeam || isPresentationMode}
 					/>
@@ -508,22 +509,22 @@ export const CommentBox = observer<CommentBoxProps>(
 										if (e) e.stopPropagation();
 									},
 								}}
-								query={state.tagQuery}
-								onQueryChange={(query) => state.update('tagQuery', query)}
+								query={state.tagQuery && formatTag(state.tagQuery)}
+								onQueryChange={(query) => state.update('tagQuery', validateTag(query))}
 								items={state.autoTags}
 								fill
-								createNewItemPosition="first"
+								createNewItemPosition="last"
 								itemPredicate={filterTags}
 								selectedItems={state.tags}
 								onRemove={state.handleTagsRemove}
 								onItemSelect={state.handleTagsChange}
-								createNewItemFromQuery={(query) => query}
+								createNewItemFromQuery={(query) => validateTag(query)}
 								createNewItemRenderer={(item, active, handleClick: MouseEventHandler<HTMLElement>) => (
 									<MenuItem2
 										cy-test="add-tag"
-										icon="add"
+										icon={<CarbonIcon icon={Add16} />}
 										disabled={state.tags.includes(item)}
-										text={`#${item}`}
+										text={formatTag(validateTag(item))}
 										active={active}
 										onClick={handleClick}
 										shouldDismissPopover={false}
@@ -536,7 +537,7 @@ export const CommentBox = observer<CommentBoxProps>(
 										key={item}
 										onClick={handleClick}
 										disabled={modifiers.disabled}
-										text={`#${item}`}
+										text={formatTag(item)}
 										shouldDismissPopover={false}
 									/>
 								)}
@@ -775,12 +776,15 @@ const displayOptionStyle = css`
 `;
 
 const filterTags: ItemPredicate<string> = (query, tag, _index, exactMatch) => {
-	const normalizedTag = tag?.toLowerCase();
-	const normalizedQuery = query.toLowerCase();
+	const normalizedTag = validateTag(tag?.toLowerCase());
+	const normalizedQuery = validateTag(query.toLowerCase());
 
 	if (exactMatch) {
 		return normalizedTag === normalizedQuery;
 	} else {
 		return normalizedTag?.includes(normalizedQuery);
 	}
 };
+
+const validateTag = (tag: string) => tag.replaceAll('#', ''); // maybe remove special chars?
+const formatTag = (tag: string) => `#${tag}`;

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

@@ -9,8 +9,8 @@ type TextLabelProps = ComponentProps<'span'> & {
 	value?: ReactNode;
 	icon: CarbonIconProps['icon'];
 };
-export const IconLabel = observer<TextLabelProps>(({ value, icon, ...props }) => (
-	<Txt small css={{ marginRight: '0.5rem' }} {...props}>
+export const IconLabel = observer<TextLabelProps>(({ value, icon, title, ...props }) => (
+	<Txt small title={`${value?.toString()} ${title}`} css={{ marginRight: '0.5rem' }} {...props}>
 		<Txt>{value}</Txt>
 		<CarbonIcon
 			icon={icon}

applications/client/src/views/Campaign/Presentation/PresentationTopicItem.tsx

@@ -1,4 +1,4 @@
-import { BookmarkFilled20, Chat16, Chat20, Play16 } from '@carbon/icons-react';
+import { Star20, Chat16, Chat20, Play16 } from '@carbon/icons-react';
 import { css } from '@emotion/react';
 import { CarbonIcon } from '@redeye/client/components';
 import type { PresentationItemModel } from '@redeye/client/store';
@@ -24,7 +24,6 @@ export const PresentationTopicItem = observer<PresentationTopicItemProps>(({ pre
 				UtilityStyles.hoverRevealChildrenOpacity,
 				css`
 					padding: 0 2.5rem 0 3.5rem;
-					position: relative;
 					justify-content: space-between;
 					display: flex;
 				`,
@@ -44,15 +43,13 @@ export const PresentationTopicItem = observer<PresentationTopicItemProps>(({ pre
 				<CarbonIcon
 					css={css`
 						position: absolute;
-						top: 2px;
 						left: -1.5rem !important;
 					`}
 					icon={getIcon(presentationItem)}
 				/>
 				{presentationItem.key}
 			</RowTitle>
 			<IconLabel cy-test="count" value={presentationItem.count} icon={Chat16} title="Comments" />
-			{/* <PlayIcon icon={Play16} className={UtilityStyles.hoverRevealClassName} /> */}
 			<HeroButton
 				hover
 				className={UtilityStyles.hoverRevealClassName}
@@ -65,13 +62,13 @@ export const PresentationTopicItem = observer<PresentationTopicItemProps>(({ pre
 
 const heroButtonStyle = css`
 	position: absolute;
-	right: 0.75rem;
+	right: 0.25rem;
 	height: 2.5rem;
 	width: 2.5rem;
 `;
 
 const getIcon = (presentationItem: PresentationItemModel): any => {
-	if (presentationItem.id === 'favorited') return BookmarkFilled20;
+	if (presentationItem.id === 'favorited') return Star20;
 	if (presentationItem.id === 'all') return Chat20;
 	else return '';
 };

applications/redeye-e2e/src/integration/e2e/blueteam/meta-tab.cy.js → applications/redeye-e2e/src/integration/e2e/blueteam/details-tab.cy.js

@@ -1,10 +1,10 @@
 /// <reference types="cypress" />
 
-describe('Meta tab fields disabled', () => {
-	const camp = 'metatab';
+describe('Details tab fields disabled', () => {
+	const camp = 'detailstab';
 	const fileName = 'gt.redeye';
 
-	it('Cannot update beacon info via Meta tab', () => {
+	it('Cannot update beacon info via Details tab', () => {
 		// Upload campaign and open
 		cy.uploadCampaignBlue(camp, fileName);
 
@@ -13,9 +13,9 @@ describe('Meta tab fields disabled', () => {
 		// Go to Beacons tab
 		cy.clickBeaconsTab();
 
-		// Select beacon and go to Meta tab
+		// Select beacon and go to Details tab
 		cy.get('[cy-test=beacons-row]').eq(0).click();
-		cy.clickMetaTab();
+		cy.clickDetailsTab();
 
 		// Verify Display Name, TOD, and Type fields are disabled
 		cy.get('[cy-test=beacon-display-name]').should('be.disabled');

applications/redeye-e2e/src/integration/e2e/blueteam/hide-show-beacon.cy.js

@@ -33,14 +33,14 @@ describe('Hide a beacon', () => {
 		cy.showHiddenItems();
 	});
 
-	it('Verify Hide button is disabled in Meta tab', () => {
+	it('Verify Hide button is disabled in Details tab', () => {
 		// Search for new campaign by name
 		cy.selectCampaign(camp);
 
-		// Go to Beacons tab; open first beacon; go to Meta tab
+		// Go to Beacons tab; open first beacon; go to Detals tab
 		cy.clickBeaconsTab();
 		cy.get('[cy-test=beacons-row]').eq(0).click();
-		cy.clickMetaTab();
+		cy.clickDetailsTab();
 
 		// Verify unable to hide/show new beacons/host
 		cy.get('[cy-test=show-hide-this-beacon]').should('be.disabled');
@@ -57,7 +57,7 @@ describe('Hide a beacon', () => {
 		// Navigate to the Beacons tab and open kebab menu for first beacon
 		cy.clickBeaconsTab();
 		cy.get('[cy-test=beacons-row]').eq(0).click();
-		cy.clickMetaTab();
+		cy.clickDetailsTab();
 		cy.get('[cy-test=show-hide-this-beacon]').should('be.disabled');
 	});
 

applications/redeye-e2e/src/integration/e2e/redteam/meta-tab-links.cy.js → applications/redeye-e2e/src/integration/e2e/redteam/details-tab-links.cy.js

@@ -1,19 +1,19 @@
 /// <reference types="cypress" />
 
-describe('Links on Meta tab', () => {
-	const camp = 'metatablinks';
+describe('Links on Details tab', () => {
+	const camp = 'detailstablinks';
 	const fileName = 'gt.redeye';
 
-	it('Beacon metadata links redirect to correct location', () => {
+	it('Beacon details links redirect to correct location', () => {
 		cy.uploadCampaign(camp, fileName);
 
 		// Search for new campaign by name; go to Beacons tab
 		cy.selectCampaign(camp);
 		cy.clickBeaconsTab();
 
-		// Select first beacon; go to Meta tab
+		// Select first beacon; go to Details tab
 		cy.get('[cy-test=beacons-row]').eq(0).click();
-		cy.clickMetaTab();
+		cy.clickDetailsTab();
 
 		// Log location name under Links
 		cy.get('[cy-test=meta-link]')

applications/redeye-e2e/src/integration/e2e/redteam/hide-show-beacon.cy.js

@@ -4,15 +4,15 @@ function hideUnhideBeacon(beaconName) {
 	// Hide a beacon
 	cy.get('[cy-test=beacons-row]').contains(beaconName).click();
 	cy.contains('[cy-test=beaconName]', beaconName);
-	cy.clickMetaTab();
-	cy.showHideBeaconMetaTab();
+	cy.clickDetailsTab();
+	cy.showHideBeaconDetailsTab();
 }
 
 describe('Hide a beacon', () => {
 	const camp = 'hideshowbeacon';
 	const fileName = 'gt.redeye';
 
-	it('Hide beacon via Meta tab using toggle in left nav panel', () => {
+	it('Hide beacon via Details tab using toggle in left nav panel', () => {
 		cy.uploadCampaign(camp, fileName);
 
 		// Search for new campaign by name
@@ -55,7 +55,7 @@ describe('Hide a beacon', () => {
 			});
 	});
 
-	it('Hide beacon via Meta tab using toggle on main page', () => {
+	it('Hide beacon via Details tab using toggle on main page', () => {
 		// Toggle off switch for hidden beacons
 		cy.doNotShowHiddenItems();
 
@@ -154,16 +154,16 @@ describe('Hide a beacon', () => {
 			});
 	});
 
-	it('Verify Cancel button works from Meta tab', () => {
+	it('Verify Cancel button works from Details tab', () => {
 		// Search for new campaign by name
 		cy.selectCampaign(camp);
 
 		// Go to Beacons tab and select the first one
 		cy.clickBeaconsTab();
 		cy.get('[cy-test=beacons-row]').eq(0).click();
 
-		// Go to Meta tab and click show/hide link
-		cy.clickMetaTab();
+		// Go to Details tab and click show/hide link
+		cy.clickDetailsTab();
 		cy.get('[cy-test=show-hide-this-beacon]').click();
 
 		// Verify modal shows; click Cancel
@@ -174,7 +174,7 @@ describe('Hide a beacon', () => {
 		// Verify modal disappears
 		cy.verifyDialogBoxDisappears();
 
-		// Verify the Meta tab link says "Hide this beacon" vs. "Show"
+		// Verify the Details tab link says "Hide this beacon" vs. "Show"
 		cy.get('[cy-test=show-hide-this-beacon]').invoke('text').should('eq', 'Hide this beacon');
 	});