From 7ce0a34613237d31c3917a48c1996b261f0f75bb Mon Sep 17 00:00:00 2001
From: Huiqing Li <forqing@gmail.com>
Date: Wed, 12 Jul 2023 16:03:35 -0700
Subject: [PATCH 1/4] edit/reply/delete comments in presentation mode

---
 .../views/Campaign/Explore/components/Comment/CommentBox.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
index 0b79447d..90cf9b3f 100644
--- a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
+++ b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
@@ -397,7 +397,7 @@ export const CommentBox = observer<CommentBoxProps>(
 
 		const isRedTeam = !store.appMeta.blueTeam;
 		const isPresentationMode = store.router.params.view === CampaignViews.PRESENTATION;
-		const showEditButtons = !isPresentationMode && isRedTeam;
+		const showEditButtons = isRedTeam;
 		const allowReply = isFullList && isRedTeam;
 		const allowEdit =
 			(store.auth.userName === annotation?.user || !annotation?.user) && !isAddingCommandToComment && isRedTeam;

From 9798798ec8d812a3f1cbf3272be0c594972348f0 Mon Sep 17 00:00:00 2001
From: Huiqing Li <forqing@gmail.com>
Date: Thu, 13 Jul 2023 11:02:19 -0700
Subject: [PATCH 2/4] allow edit comment only

---
 .../views/Campaign/Explore/components/Comment/CommentBox.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
index 90cf9b3f..826e253c 100644
--- a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
+++ b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
@@ -398,7 +398,7 @@ export const CommentBox = observer<CommentBoxProps>(
 		const isRedTeam = !store.appMeta.blueTeam;
 		const isPresentationMode = store.router.params.view === CampaignViews.PRESENTATION;
 		const showEditButtons = isRedTeam;
-		const allowReply = isFullList && isRedTeam;
+		const allowReply = !isPresentationMode && isFullList && isRedTeam;
 		const allowEdit =
 			(store.auth.userName === annotation?.user || !annotation?.user) && !isAddingCommandToComment && isRedTeam;
 		const isGrouped = (state.currentCommandIds?.length || 0) > 1;
@@ -658,7 +658,7 @@ export const CommentBox = observer<CommentBoxProps>(
 											/>
 										)}
 										{allowReply && <Button cy-test="reply" minimal small onClick={() => reply?.()} text="Reply" />}
-										{allowEdit && (
+										{allowEdit && !isPresentationMode && (
 											<>
 												<Button
 													cy-test="delete-comment"

From e9bd4009bd4e3173a811fda1240db481bf1d113a Mon Sep 17 00:00:00 2001
From: Huiqing Li <forqing@gmail.com>
Date: Tue, 18 Jul 2023 10:20:15 -0700
Subject: [PATCH 3/4] disable editting tag in ppt mode

---
 .../Explore/components/Comment/CommentBox.tsx | 144 +++++++++---------
 1 file changed, 73 insertions(+), 71 deletions(-)

diff --git a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
index 826e253c..e11c7c6e 100644
--- a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
+++ b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
@@ -474,79 +474,81 @@ export const CommentBox = observer<CommentBoxProps>(
 								placeholder="..."
 								autoFocus
 							/>
-							<MultiSelect2
-								cy-test="tag-input1"
-								css={formTagInputStyle}
-								placeholder="#Tags..."
-								tagInputProps={{
-									tagProps: { minimal: true },
-									leftIcon: (
-										<Flex css={{ height: 30, width: 30 }} alignSelf="center" align="center" justify="center">
-											<CarbonIcon cy-test="tag-input" icon={semanticIcons.tags} />
-										</Flex>
-									),
-									disabled: !state.editMode,
-									addOnBlur: true,
-									values: state.tags,
-								}}
-								popoverProps={{
-									minimal: true,
-									usePortal: true,
-									captureDismiss: true,
-									isOpen: state.tagQuery === '' && !state.tags.length ? undefined : !!state.tagQuery.length,
-									portalContainer: popoverRef?.current?.parentElement || document.body,
-									position: Position.RIGHT_TOP,
-									modifiers: {
-										preventOverflow: {
-											enabled: true,
+							{!isPresentationMode && (
+								<MultiSelect2
+									cy-test="tag-input1"
+									css={formTagInputStyle}
+									placeholder="#Tags..."
+									tagInputProps={{
+										tagProps: { minimal: true },
+										leftIcon: (
+											<Flex css={{ height: 30, width: 30 }} alignSelf="center" align="center" justify="center">
+												<CarbonIcon cy-test="tag-input" icon={semanticIcons.tags} />
+											</Flex>
+										),
+										disabled: !state.editMode,
+										addOnBlur: true,
+										values: state.tags,
+									}}
+									popoverProps={{
+										minimal: true,
+										usePortal: true,
+										captureDismiss: true,
+										isOpen: state.tagQuery === '' && !state.tags.length ? undefined : !!state.tagQuery.length,
+										portalContainer: popoverRef?.current?.parentElement || document.body,
+										position: Position.RIGHT_TOP,
+										modifiers: {
+											preventOverflow: {
+												enabled: true,
+											},
+											offset: {
+												enabled: true,
+											},
+											hide: { enabled: false },
 										},
-										offset: {
-											enabled: true,
+										onInteraction: (nextOpenState: boolean) => {
+											if (!nextOpenState) state.update('tagQuery', '');
 										},
-										hide: { enabled: false },
-									},
-									onInteraction: (nextOpenState: boolean) => {
-										if (!nextOpenState) state.update('tagQuery', '');
-									},
-									onClose: (e) => {
-										if (e) e.stopPropagation();
-									},
-								}}
-								query={state.tagQuery && formatTag(state.tagQuery)}
-								onQueryChange={(query) => state.update('tagQuery', validateTag(query))}
-								items={state.autoTags}
-								fill
-								createNewItemPosition="last"
-								itemPredicate={filterTags}
-								selectedItems={state.tags}
-								onRemove={state.handleTagsRemove}
-								onItemSelect={state.handleTagsChange}
-								createNewItemFromQuery={(query) => validateTag(query)}
-								createNewItemRenderer={(item, active, handleClick: MouseEventHandler<HTMLElement>) => (
-									<MenuItem2
-										cy-test="add-tag"
-										icon={<CarbonIcon icon={Add16} />}
-										disabled={state.tags.includes(item)}
-										text={formatTag(validateTag(item))}
-										active={active}
-										onClick={handleClick}
-										shouldDismissPopover={false}
-									/>
-								)}
-								itemRenderer={(item, { modifiers, handleClick }) => (
-									<MenuItem2
-										cy-test="tag-list-item"
-										active={modifiers.active}
-										key={item}
-										onClick={handleClick}
-										disabled={modifiers.disabled}
-										text={formatTag(item)}
-										shouldDismissPopover={false}
-									/>
-								)}
-								tagRenderer={(item) => item}
-								// onKeyUp={state.addTagIfSpaceBar}
-							/>
+										onClose: (e) => {
+											if (e) e.stopPropagation();
+										},
+									}}
+									query={state.tagQuery && formatTag(state.tagQuery)}
+									onQueryChange={(query) => state.update('tagQuery', validateTag(query))}
+									items={state.autoTags}
+									fill
+									createNewItemPosition="last"
+									itemPredicate={filterTags}
+									selectedItems={state.tags}
+									onRemove={state.handleTagsRemove}
+									onItemSelect={state.handleTagsChange}
+									createNewItemFromQuery={(query) => validateTag(query)}
+									createNewItemRenderer={(item, active, handleClick: MouseEventHandler<HTMLElement>) => (
+										<MenuItem2
+											cy-test="add-tag"
+											icon={<CarbonIcon icon={Add16} />}
+											disabled={state.tags.includes(item)}
+											text={formatTag(validateTag(item))}
+											active={active}
+											onClick={handleClick}
+											shouldDismissPopover={false}
+										/>
+									)}
+									itemRenderer={(item, { modifiers, handleClick }) => (
+										<MenuItem2
+											cy-test="tag-list-item"
+											active={modifiers.active}
+											key={item}
+											onClick={handleClick}
+											disabled={modifiers.disabled}
+											text={formatTag(item)}
+											shouldDismissPopover={false}
+										/>
+									)}
+									tagRenderer={(item) => item}
+									// onKeyUp={state.addTagIfSpaceBar}
+								/>
+							)}
 							{/* {store.router.params.currentItem === 'beacon' && ( <> // why is this check necessary? 
 
 							// BLDSTRIKE-591 Finish implementing creating/commenting on links

From ed4c471292e660c16a44f359a75d4f3292a38808 Mon Sep 17 00:00:00 2001
From: Huiqing Li <forqing@gmail.com>
Date: Thu, 20 Jul 2023 10:30:39 -0700
Subject: [PATCH 4/4] keep staging tags in edit mode

---
 .../Explore/components/Comment/CommentBox.tsx | 36 +++++++++++--------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
index e11c7c6e..75b8554a 100644
--- a/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
+++ b/applications/client/src/views/Campaign/Explore/components/Comment/CommentBox.tsx
@@ -405,6 +405,23 @@ export const CommentBox = observer<CommentBoxProps>(
 		const showGroupLink = isGrouped && !isFullList && !isPresentationMode && !isAddingCommandToComment && isRedTeam;
 		const isCurrentCommandInAnnotation = commandId && commandGroup?.commandIds?.includes(commandId);
 
+		const Tags = () => (
+			<Flex gap={4} align="center">
+				<CarbonIcon icon={semanticIcons.tags} css={{ color: CoreTokens.TextMuted }} />
+				{state.tags.length > 0 ? (
+					state.tags.map((tag) => (
+						<Txt muted small css={hashTagBeforeStyle} key={tag}>
+							{tag}
+						</Txt>
+					))
+				) : (
+					<Txt disabled small italic>
+						No Tags
+					</Txt>
+				)}
+			</Flex>
+		);
+
 		return (
 			<div {...props}>
 				<div css={headerWrapperStyle}>
@@ -474,7 +491,7 @@ export const CommentBox = observer<CommentBoxProps>(
 								placeholder="..."
 								autoFocus
 							/>
-							{!isPresentationMode && (
+							{!isPresentationMode ? (
 								<MultiSelect2
 									cy-test="tag-input1"
 									css={formTagInputStyle}
@@ -548,6 +565,8 @@ export const CommentBox = observer<CommentBoxProps>(
 									tagRenderer={(item) => item}
 									// onKeyUp={state.addTagIfSpaceBar}
 								/>
+							) : (
+								<Tags />
 							)}
 							{/* {store.router.params.currentItem === 'beacon' && ( <> // why is this check necessary? 
 
@@ -622,20 +641,7 @@ export const CommentBox = observer<CommentBoxProps>(
 							</Txt>
 						)}
 
-						<Flex gap={4} align="center">
-							<CarbonIcon icon={semanticIcons.tags} css={{ color: CoreTokens.TextMuted }} />
-							{state.tags.length > 0 ? (
-								state.tags.map((tag) => (
-									<Txt muted small css={hashTagBeforeStyle} key={tag}>
-										{tag}
-									</Txt>
-								))
-							) : (
-								<Txt disabled small italic>
-									No Tags
-								</Txt>
-							)}
-						</Flex>
+						<Tags />
 						{state.manualLink?.destination?.current && (
 							<Flex gap={4} align="center">
 								<CarbonIcon icon={semanticIcons.link} css={{ color: CoreTokens.TextMuted }} />