From 1df308d072d95855d883f5d68d3719309d43791a Mon Sep 17 00:00:00 2001
From: Miciah Henderson <48624788+kiahjh@users.noreply.github.com>
Date: Fri, 29 Dec 2023 12:23:42 -0500
Subject: [PATCH 1/3] dash: made highlighting activity during suspension
 optional

---
 dash/app/cypress/e2e/onboarding.cy.ts         |  1 +
 dash/app/src/components/routes/User.tsx       |  4 ++
 dash/app/src/reducers/user-reducer.ts         |  4 ++
 dash/components/src/Users/EditUser.tsx        | 37 +++++++++++++++++--
 storybook/src/dash/Users/EditUser.stories.tsx |  8 ++--
 5 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/dash/app/cypress/e2e/onboarding.cy.ts b/dash/app/cypress/e2e/onboarding.cy.ts
index 58943ee4..f12b5072 100644
--- a/dash/app/cypress/e2e/onboarding.cy.ts
+++ b/dash/app/cypress/e2e/onboarding.cy.ts
@@ -9,6 +9,7 @@ describe(`dashboard onboarding nudges`, () => {
     screenshotsEnabled: false,
     screenshotsResolution: 1200,
     screenshotsFrequency: 30,
+    showSuspensionActivity: true,
     keychains: [],
     devices: [],
     createdAt: new Date().toISOString(),
diff --git a/dash/app/src/components/routes/User.tsx b/dash/app/src/components/routes/User.tsx
index 4807d1cb..e372c4a0 100644
--- a/dash/app/src/components/routes/User.tsx
+++ b/dash/app/src/components/routes/User.tsx
@@ -101,6 +101,10 @@ const UserRoute: React.FC = () => {
       setScreenshotsFrequency={(frequency) =>
         dispatch({ type: `setScreenshotsFrequency`, frequency })
       }
+      showSuspensionActivity={draft.showSuspensionActivity}
+      setShowSuspensionActivity={(show) =>
+        dispatch({ type: `setShowSuspensionActivity`, show })
+      }
       removeKeychain={(id) => dispatch({ type: `removeKeychain`, id })}
       keychains={draft.keychains}
       devices={original.devices.map(deviceProps)}
diff --git a/dash/app/src/reducers/user-reducer.ts b/dash/app/src/reducers/user-reducer.ts
index 80b67a65..14650bfb 100644
--- a/dash/app/src/reducers/user-reducer.ts
+++ b/dash/app/src/reducers/user-reducer.ts
@@ -15,6 +15,7 @@ export type Action =
   | { type: 'setScreenshotsResolution'; resolution: number }
   | { type: 'setScreenshotsFrequency'; frequency: number }
   | { type: 'setKeyloggingEnabled'; enabled: boolean }
+  | { type: 'setShowSuspensionActivity'; show: boolean }
   | { type: 'removeKeychain'; id: UUID }
   | { type: 'addKeychain'; keychain: KeychainSummary }
   | { type: 'setAddingKeychain'; keychain?: KeychainSummary | null };
@@ -50,6 +51,9 @@ function reducer(state: State, action: Action): State | undefined {
     case `setScreenshotsFrequency`:
       state.user.draft.screenshotsFrequency = action.frequency;
       return;
+    case `setShowSuspensionActivity`:
+      state.user.draft.showSuspensionActivity = action.show;
+      return;
     case `removeKeychain`:
       state.user.draft.keychains = state.user.draft.keychains.filter(
         (keychain) => keychain.id !== action.id,
diff --git a/dash/components/src/Users/EditUser.tsx b/dash/components/src/Users/EditUser.tsx
index 2c9c29dc..611eeaae 100644
--- a/dash/components/src/Users/EditUser.tsx
+++ b/dash/components/src/Users/EditUser.tsx
@@ -24,6 +24,8 @@ interface Props {
   setScreenshotsResolution(resolution: number): unknown;
   screenshotsFrequency: number;
   setScreenshotsFrequency(frequency: number): unknown;
+  showSuspensionActivity: boolean;
+  setShowSuspensionActivity(show: boolean): unknown;
   removeKeychain(id: UUID): unknown;
   keychains: Keychain[];
   devices: Subcomponents<typeof UserDevice>;
@@ -56,6 +58,8 @@ const EditUser: React.FC<Props> = ({
   setScreenshotsResolution,
   screenshotsFrequency,
   setScreenshotsFrequency,
+  showSuspensionActivity,
+  setShowSuspensionActivity,
   removeKeychain,
   keychains,
   devices,
@@ -184,8 +188,10 @@ const EditUser: React.FC<Props> = ({
               <h2 className="text-lg font-bold text-slate-700">Monitoring</h2>
               <div className="flex justify-between items-center bg-slate-100 my-3 p-4 sm:p-6 rounded-xl">
                 <div className="mr-3">
-                  <h3 className="font-medium text-slate-700">Enable keylogging</h3>
-                  <p className="text-slate-500 text-sm">
+                  <h3 className="font-medium text-slate-700 leading-tight">
+                    Enable keylogging
+                  </h3>
+                  <p className="text-slate-500 text-sm mt-1">
                     Sends reports of all keystrokes to your review
                   </p>
                 </div>
@@ -196,8 +202,10 @@ const EditUser: React.FC<Props> = ({
               >
                 <div className="flex justify-between items-center">
                   <div className="mr-3">
-                    <h3 className="font-medium text-slate-700">Enable screenshots</h3>
-                    <p className="text-slate-500 text-sm">
+                    <h3 className="font-medium text-slate-700 leading-tight">
+                      Enable screenshots
+                    </h3>
+                    <p className="text-slate-500 text-sm mt-1">
                       Periodically take a screenshot and upload for your review
                     </p>
                   </div>
@@ -228,7 +236,28 @@ const EditUser: React.FC<Props> = ({
                   />
                 </div>
               </div>
+              <div
+                className={cx(
+                  `flex justify-between items-center mt-4 p-6 bg-slate-100 rounded-xl transition-opacity duration-300`,
+                  !(screenshotsEnabled || keyloggingEnabled) &&
+                    `opacity-50 cursor-not-allowed pointer-events-none`,
+                )}
+              >
+                <div className="mr-3">
+                  <h3 className="font-medium text-slate-700 leading-tight">
+                    Highlight activity during filter suspensions
+                  </h3>
+                  <p className="text-slate-500 text-sm mt-1">
+                    Visually highlight activity that is recorded while filter is suspended
+                  </p>
+                </div>
+                <Toggle
+                  enabled={showSuspensionActivity}
+                  setEnabled={setShowSuspensionActivity}
+                />
+              </div>
             </div>
+
             <div className="mt-12 max-w-3xl">
               <h2 className="text-lg font-bold text-slate-700 mb-2">Keychains</h2>
               <div className="py-3 flex flex-col space-y-4">
diff --git a/storybook/src/dash/Users/EditUser.stories.tsx b/storybook/src/dash/Users/EditUser.stories.tsx
index 66390737..d299eb9d 100644
--- a/storybook/src/dash/Users/EditUser.stories.tsx
+++ b/storybook/src/dash/Users/EditUser.stories.tsx
@@ -17,15 +17,15 @@ export const Default: Story = props({
   id: `1`,
   isNew: false,
   name: `Little Jimmy`,
-  setName: () => {},
-  keyloggingEnabled: false,
-  setKeyloggingEnabled: () => {},
-  screenshotsEnabled: false,
+  keyloggingEnabled: true,
+  screenshotsEnabled: true,
   setScreenshotsEnabled: () => {},
   screenshotsFrequency: 120,
   setScreenshotsFrequency: () => {},
   screenshotsResolution: 1000,
   setScreenshotsResolution: () => {},
+  showSuspensionActivity: true,
+  setShowSuspensionActivity: () => {},
   saveButtonDisabled: true,
   onSave: () => {},
   onConfirmAddKeychain: () => {},

From f0a25db1b1f4904dbee3e3e8b6ec389b419c0ee0 Mon Sep 17 00:00:00 2001
From: Miciah Henderson <48624788+kiahjh@users.noreply.github.com>
Date: Mon, 1 Jan 2024 11:01:17 -0500
Subject: [PATCH 2/3] dash: added tests to make sure suspension activity
 indicator is hidden for opted-out users

---
 dash/app/cypress/e2e/activity.cy.ts           | 21 ++++++--
 .../routes/CombinedUsersActivityFeed.tsx      |  1 +
 .../components/routes/UserActivityFeed.tsx    |  1 +
 .../Activity/CombinedUsersActivityFeed.tsx    | 49 +++++++++++--------
 .../Activity/DeletableActivityChunks.tsx      | 37 +++++++++-----
 .../src/Users/Activity/UserActivityFeed.tsx   |  3 ++
 .../Activity/UserActivityFeed.stories.tsx     |  1 +
 storybook/src/story-helpers.ts                | 19 ++++---
 8 files changed, 90 insertions(+), 42 deletions(-)

diff --git a/dash/app/cypress/e2e/activity.cy.ts b/dash/app/cypress/e2e/activity.cy.ts
index d0c6ae67..186ee598 100644
--- a/dash/app/cypress/e2e/activity.cy.ts
+++ b/dash/app/cypress/e2e/activity.cy.ts
@@ -33,17 +33,21 @@ describe(`activity screens`, () => {
   it(`activity feed displays items in correct order`, () => {
     cy.interceptPql(`CombinedUsersActivityFeed`, [
       {
+        showSuspensionActivity: false,
         userName: `Bob`,
         numDeleted: 0,
-        items: [mock.screenshotActivityItem({ id: `screenshot-123` })],
+        items: [
+          mock.screenshotActivityItem({ id: `screenshot-123`, duringSuspension: true }),
+        ],
       },
       {
+        showSuspensionActivity: true,
         userName: `Suzy`,
         numDeleted: 1,
         items: [
           mock.screenshotActivityItem({ id: `screenshot-234` }),
-          mock.screenshotActivityItem({ id: `screenshot-345` }),
-          mock.screenshotActivityItem({ id: `screenshot-456` }),
+          mock.screenshotActivityItem({ id: `screenshot-345`, duringSuspension: true }),
+          mock.screenshotActivityItem({ id: `screenshot-456`, duringSuspension: true }),
           mock.keystrokeActivityItem({
             id: `ks-1`,
             ids: [`ks-1`, `ks-2`, `ks-3`], // <-- aggregated ids
@@ -66,6 +70,13 @@ describe(`activity screens`, () => {
     cy.testId(`page-heading`).first().should(`have.text`, `Suzy’s Activity`);
     cy.testId(`page-heading`).last().should(`have.text`, `Bob’s Activity`);
 
+    cy.testId(`single-user-sub-feed`).first().contains(`During filter suspension`);
+    // bob has `showSuspensionActivity: false`, so his feed should not have any highlighted suspension items
+    cy.testId(`single-user-sub-feed`)
+      .last()
+      .contains(`During filter suspension`)
+      .should(`not.exist`);
+
     cy.contains(`Approve all child activity`).click();
 
     cy.wait(`@DeleteActivityItems_v2`)
@@ -92,11 +103,13 @@ describe(`activity screens`, () => {
     );
     cy.interceptPql(`CombinedUsersActivityFeed`, [
       {
+        showSuspensionActivity: true,
         userName: `suzy`,
         numDeleted: 0,
         items: suzysItems,
       },
       {
+        showSuspensionActivity: true,
         userName: `jimmy`,
         numDeleted: 0,
         items: Array.from({ length: 130 }, (_, i) =>
@@ -117,11 +130,13 @@ describe(`activity screens`, () => {
 
     cy.interceptPql(`CombinedUsersActivityFeed`, [
       {
+        showSuspensionActivity: true,
         userName: `suzy`,
         numDeleted: 0,
         items: suzysItems,
       },
       {
+        showSuspensionActivity: true,
         userName: `jimmy`,
         numDeleted: 0,
         //                          vv -- only 30 remain
diff --git a/dash/app/src/components/routes/CombinedUsersActivityFeed.tsx b/dash/app/src/components/routes/CombinedUsersActivityFeed.tsx
index 3a5937ca..377667e6 100644
--- a/dash/app/src/components/routes/CombinedUsersActivityFeed.tsx
+++ b/dash/app/src/components/routes/CombinedUsersActivityFeed.tsx
@@ -50,6 +50,7 @@ const CombinedUsersActivityFeedRoute: React.FC = () => {
         .filter((user) => user.items.length > 0)
         .map((user) => ({
           userName: user.userName,
+          highlightSuspensionActivity: user.showSuspensionActivity,
           items: user.items.map(outputItemToActivityFeedItem),
         }))}
       numDeleted={query.data.reduce((acc, user) => acc + user.numDeleted, 0)}
diff --git a/dash/app/src/components/routes/UserActivityFeed.tsx b/dash/app/src/components/routes/UserActivityFeed.tsx
index e1b99e81..2fe93c85 100644
--- a/dash/app/src/components/routes/UserActivityFeed.tsx
+++ b/dash/app/src/components/routes/UserActivityFeed.tsx
@@ -51,6 +51,7 @@ const UserActivityFeedRoute: React.FC = () => {
       items={query.data.items
         .map(outputItemToActivityFeedItem)
         .filter((item) => !item.deleted)}
+      highlightSuspsensionActivity={query.data.showSuspensionActivity}
     />
   );
 };
diff --git a/dash/components/src/Users/Activity/CombinedUsersActivityFeed.tsx b/dash/components/src/Users/Activity/CombinedUsersActivityFeed.tsx
index 60a7097b..3fbf78ab 100644
--- a/dash/components/src/Users/Activity/CombinedUsersActivityFeed.tsx
+++ b/dash/components/src/Users/Activity/CombinedUsersActivityFeed.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import cx from 'classnames';
 import { Button } from '@shared/components';
 import { posessive } from '@shared/string';
 import type { ActivityFeedItem } from './UserActivityFeed';
@@ -11,7 +12,11 @@ import UserActivityHeader from './UserActivityHeader';
 
 interface Props {
   date: Date;
-  activity: Array<{ userName: string; items: ActivityFeedItem[] }>;
+  activity: Array<{
+    userName: string;
+    highlightSuspensionActivity: boolean;
+    items: ActivityFeedItem[];
+  }>;
   numDeleted: number;
   deleteItems(ids: UUID[]): unknown;
   chunkSize?: number;
@@ -51,30 +56,34 @@ const CombinedUsersActivityFeed: React.FC<Props> = ({
       <FeedHeader date={date} numItems={items.length} numDeleted={numDeleted} />
       {items.length > 0 ? (
         <ReviewDayWrapper>
-          {activity.map(({ userName, items }) => (
+          {activity.map(({ userName, highlightSuspensionActivity, items }) => (
             <div
               key={userName}
               className="flex flex-col justify-center space-y-4 md:border md:border-slate-200 md:rounded-3xl md:pt-6 lg:pt-8 md:px-4 lg:px-8 md:pb-0 md:bg-white/50"
+              data-test="single-user-sub-feed"
             >
               <UserActivityHeader>{userName}</UserActivityHeader>
-              <DeletableActivityChunks
-                items={items}
-                chunkSize={chunkSize}
-                deleteItems={deleteItems}
-              />
-              {items.length > 1 && (
-                <div className="flex justify-center pb-8">
-                  <Button
-                    type="button"
-                    onClick={() => deleteItems(items.map((item) => item.id))}
-                    color="secondary"
-                    className="ScrollTop mt-4"
-                  >
-                    <i className="fa-solid fa-thumbs-up mr-2" />
-                    Approve all {posessive(userName)} activity
-                  </Button>
-                </div>
-              )}
+              <div className={cx(`flex flex-col gap-4`, items.length === 1 && `pb-2`)}>
+                <DeletableActivityChunks
+                  items={items}
+                  chunkSize={chunkSize}
+                  deleteItems={deleteItems}
+                  highlightSuspensionActivity={highlightSuspensionActivity}
+                />
+                {items.length > 1 && (
+                  <div className="flex justify-center pb-8">
+                    <Button
+                      type="button"
+                      onClick={() => deleteItems(items.map((item) => item.id))}
+                      color="secondary"
+                      className="ScrollTop mt-4"
+                    >
+                      <i className="fa-solid fa-thumbs-up mr-2" />
+                      Approve all {posessive(userName)} activity
+                    </Button>
+                  </div>
+                )}
+              </div>
             </div>
           ))}
           <Button
diff --git a/dash/components/src/Users/Activity/DeletableActivityChunks.tsx b/dash/components/src/Users/Activity/DeletableActivityChunks.tsx
index 22b4f14c..ec695569 100644
--- a/dash/components/src/Users/Activity/DeletableActivityChunks.tsx
+++ b/dash/components/src/Users/Activity/DeletableActivityChunks.tsx
@@ -8,7 +8,8 @@ const DeletableActivityChunks: React.FC<{
   items: ActivityFeedItem[];
   chunkSize: number;
   deleteItems: (ids: UUID[]) => unknown;
-}> = ({ items, deleteItems, chunkSize }) => (
+  highlightSuspensionActivity: boolean;
+}> = ({ items, deleteItems, chunkSize, highlightSuspensionActivity }) => (
   <>
     {chunkedRenderTasks(items, chunkSize)
       .flat(1)
@@ -23,14 +24,29 @@ const DeletableActivityChunks: React.FC<{
               />
             );
           case `suspension_group`:
-            return (
-              <div
-                key={`${item.items[0]?.id ?? ``}-suspension-group`}
-                className="ml-2 md:-ml-6 mt-4 pl-4 md:pl-5 rounded-l-3xl border-4 border-r-0 border-red-500/60"
-              >
-                <div className="bg-slate-100 md:bg-slate-50 -mt-4 pl-3 font-medium text-lg text-red-600">
-                  During filter suspension
+            if (highlightSuspensionActivity) {
+              return (
+                <div
+                  key={`${item.items[0]?.id ?? ``}-suspension-group`}
+                  className="ml-2 md:-ml-6 mt-4 pl-4 md:pl-5 rounded-l-3xl border-4 border-r-0 border-red-500/60"
+                >
+                  <div className="bg-slate-100 md:bg-slate-50 -mt-4 pl-3 font-medium text-lg text-red-600">
+                    During filter suspension
+                  </div>
+                  <div className="flex flex-col gap-8 pt-2 pb-4">
+                    {item.items.map((item) => (
+                      <Item
+                        key={item.id}
+                        item={item}
+                        deleteItem={() => deleteItems([item.id])}
+                      />
+                    ))}
+                  </div>
+                  <div className="bg-slate-100 md:bg-slate-50 h-2 -mb-1 ml-8"></div>
                 </div>
+              );
+            } else {
+              return (
                 <div className="flex flex-col gap-8 pt-2 pb-4">
                   {item.items.map((item) => (
                     <Item
@@ -40,9 +56,8 @@ const DeletableActivityChunks: React.FC<{
                     />
                   ))}
                 </div>
-                <div className="bg-slate-100 md:bg-slate-50 h-2 -mb-1 ml-8"></div>
-              </div>
-            );
+              );
+            }
           default: // @link https://github.com/typescript-eslint/typescript-eslint/issues/2841
             return (
               <div
diff --git a/dash/components/src/Users/Activity/UserActivityFeed.tsx b/dash/components/src/Users/Activity/UserActivityFeed.tsx
index be283e7d..5c3eeca3 100644
--- a/dash/components/src/Users/Activity/UserActivityFeed.tsx
+++ b/dash/components/src/Users/Activity/UserActivityFeed.tsx
@@ -35,6 +35,7 @@ interface Props {
   numDeleted: number;
   deleteItems(ids: UUID[]): unknown;
   chunkSize?: number;
+  highlightSuspsensionActivity: boolean;
 }
 
 const UserActivityFeed: React.FC<Props> = ({
@@ -43,6 +44,7 @@ const UserActivityFeed: React.FC<Props> = ({
   numDeleted,
   deleteItems,
   chunkSize = 100,
+  highlightSuspsensionActivity,
 }) => {
   const navigate = useNavigate();
   return (
@@ -54,6 +56,7 @@ const UserActivityFeed: React.FC<Props> = ({
             items={items}
             chunkSize={chunkSize}
             deleteItems={deleteItems}
+            highlightSuspensionActivity={highlightSuspsensionActivity}
           />
           <Button
             className="ScrollTop self-center"
diff --git a/storybook/src/dash/Users/Activity/UserActivityFeed.stories.tsx b/storybook/src/dash/Users/Activity/UserActivityFeed.stories.tsx
index 3b2a339f..95a5fe5c 100644
--- a/storybook/src/dash/Users/Activity/UserActivityFeed.stories.tsx
+++ b/storybook/src/dash/Users/Activity/UserActivityFeed.stories.tsx
@@ -16,6 +16,7 @@ export const Default: Story = props({
   date: new Date(time.stable()),
   items: activity[2]?.items ?? [],
   numDeleted: 0,
+  highlightSuspsensionActivity: true,
   deleteItems: () => {},
 });
 
diff --git a/storybook/src/story-helpers.ts b/storybook/src/story-helpers.ts
index 62655c5c..ef84eec0 100644
--- a/storybook/src/story-helpers.ts
+++ b/storybook/src/story-helpers.ts
@@ -194,12 +194,13 @@ export const keychains = [
 export const activity = [
   {
     userName: `Little Jimmy`,
+    highlightSuspensionActivity: false,
     items: [
       keystrokeLine(
         `Xcode`,
         `importFoundationhereisareallylonglinethatwillcauseproblemspotentiallyblahblahblahlorem`,
       ),
-      screenshot(400, 600, true),
+      screenshot(400, 600, true, true), // during suspension, but not highlighted because of user setting
       keystrokeLine(`Brave`, `Hello world`),
       keystrokeLine(`Xcode`, `import Foundation`),
       screenshot(),
@@ -207,23 +208,25 @@ export const activity = [
   },
   {
     userName: `Henry`,
+    highlightSuspensionActivity: true,
     items: [
       keystrokeLine(`Firefox`, `turtles`),
-      screenshot(400, 600, true),
-      keystrokeLine(`Brave`, `Hello world`),
-      keystrokeLine(`Xcode`, `import Foundation`),
+      screenshot(400, 600, true, true),
+      keystrokeLine(`Brave`, `Hello world`, true),
+      keystrokeLine(`Xcode`, `import Foundation`, true),
       screenshot(),
       screenshot(),
-      keystrokeLine(`Messages`, `Sounds good, thanks`),
+      keystrokeLine(`Messages`, `Sounds good, thanks`, true),
       screenshot(),
     ],
   },
   {
     userName: `Sally`,
+    highlightSuspensionActivity: true,
     items: [
-      keystrokeLine(`Skype`, `No puedo nadar.`),
-      screenshot(800, 600, true),
-      keystrokeLine(`Brave`, `Hello world`),
+      keystrokeLine(`Skype`, `No puedo nadar.`, true),
+      screenshot(800, 600, true, true),
+      keystrokeLine(`Brave`, `Hello world`, true),
     ],
   },
 ];

From ba75f03ffb6ffe26862855dae4305bc85f9b4753 Mon Sep 17 00:00:00 2001
From: Miciah Henderson <48624788+kiahjh@users.noreply.github.com>
Date: Tue, 2 Jan 2024 09:52:07 -0500
Subject: [PATCH 3/3] dash: moved suspension highlighting logic to  function

---
 dash/app/src/components/routes/User.tsx       |  2 +-
 .../components/routes/UserActivityFeed.tsx    |  2 +-
 .../Activity/DeletableActivityChunks.tsx      | 43 +++++++------------
 .../src/Users/Activity/UserActivityFeed.tsx   |  6 +--
 .../__tests__/deletable-chunks.spec.ts        | 28 ++++++++++++
 dash/components/src/Users/EditUser.tsx        |  5 +--
 .../Activity/UserActivityFeed.stories.tsx     |  2 +-
 7 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/dash/app/src/components/routes/User.tsx b/dash/app/src/components/routes/User.tsx
index e372c4a0..dff4c4f6 100644
--- a/dash/app/src/components/routes/User.tsx
+++ b/dash/app/src/components/routes/User.tsx
@@ -44,7 +44,7 @@ const UserRoute: React.FC = () => {
         screenshotsEnabled: editableUser.draft.screenshotsEnabled,
         screenshotsFrequency: editableUser.draft.screenshotsFrequency,
         screenshotsResolution: editableUser.draft.screenshotsResolution,
-        showSuspensionActivity: true, // configurable in #209
+        showSuspensionActivity: editableUser.draft.showSuspensionActivity,
         isNew: editableUser.isNew ?? false,
         keychainIds: editableUser.draft.keychains.map(({ id }) => id),
       }),
diff --git a/dash/app/src/components/routes/UserActivityFeed.tsx b/dash/app/src/components/routes/UserActivityFeed.tsx
index 2fe93c85..030f382f 100644
--- a/dash/app/src/components/routes/UserActivityFeed.tsx
+++ b/dash/app/src/components/routes/UserActivityFeed.tsx
@@ -51,7 +51,7 @@ const UserActivityFeedRoute: React.FC = () => {
       items={query.data.items
         .map(outputItemToActivityFeedItem)
         .filter((item) => !item.deleted)}
-      highlightSuspsensionActivity={query.data.showSuspensionActivity}
+      highlightSuspensionActivity={query.data.showSuspensionActivity}
     />
   );
 };
diff --git a/dash/components/src/Users/Activity/DeletableActivityChunks.tsx b/dash/components/src/Users/Activity/DeletableActivityChunks.tsx
index ec695569..8a00b20a 100644
--- a/dash/components/src/Users/Activity/DeletableActivityChunks.tsx
+++ b/dash/components/src/Users/Activity/DeletableActivityChunks.tsx
@@ -11,7 +11,7 @@ const DeletableActivityChunks: React.FC<{
   highlightSuspensionActivity: boolean;
 }> = ({ items, deleteItems, chunkSize, highlightSuspensionActivity }) => (
   <>
-    {chunkedRenderTasks(items, chunkSize)
+    {chunkedRenderTasks(items, chunkSize, highlightSuspensionActivity)
       .flat(1)
       .map((item) => {
         switch (item.type) {
@@ -24,29 +24,14 @@ const DeletableActivityChunks: React.FC<{
               />
             );
           case `suspension_group`:
-            if (highlightSuspensionActivity) {
-              return (
-                <div
-                  key={`${item.items[0]?.id ?? ``}-suspension-group`}
-                  className="ml-2 md:-ml-6 mt-4 pl-4 md:pl-5 rounded-l-3xl border-4 border-r-0 border-red-500/60"
-                >
-                  <div className="bg-slate-100 md:bg-slate-50 -mt-4 pl-3 font-medium text-lg text-red-600">
-                    During filter suspension
-                  </div>
-                  <div className="flex flex-col gap-8 pt-2 pb-4">
-                    {item.items.map((item) => (
-                      <Item
-                        key={item.id}
-                        item={item}
-                        deleteItem={() => deleteItems([item.id])}
-                      />
-                    ))}
-                  </div>
-                  <div className="bg-slate-100 md:bg-slate-50 h-2 -mb-1 ml-8"></div>
+            return (
+              <div
+                key={`${item.items[0]?.id ?? ``}-suspension-group`}
+                className="ml-2 md:-ml-6 mt-4 pl-4 md:pl-5 rounded-l-3xl border-4 border-r-0 border-red-500/60"
+              >
+                <div className="bg-slate-100 md:bg-slate-50 -mt-4 pl-3 font-medium text-lg text-red-600">
+                  During filter suspension
                 </div>
-              );
-            } else {
-              return (
                 <div className="flex flex-col gap-8 pt-2 pb-4">
                   {item.items.map((item) => (
                     <Item
@@ -56,8 +41,9 @@ const DeletableActivityChunks: React.FC<{
                     />
                   ))}
                 </div>
-              );
-            }
+                <div className="bg-slate-100 md:bg-slate-50 h-2 -mb-1 ml-8"></div>
+              </div>
+            );
           default: // @link https://github.com/typescript-eslint/typescript-eslint/issues/2841
             return (
               <div
@@ -125,6 +111,7 @@ type ActivityRenderTask<T extends Chunkable> =
 export function chunkedRenderTasks<T extends Chunkable>(
   items: T[],
   chunkSize: number,
+  highlightSuspensionActivity: boolean,
 ): Array<ActivityRenderTask<T>[]> {
   const ids: UUID[] = [];
   const chunkedTasks: Array<ActivityRenderTask<T>[]> = [];
@@ -144,11 +131,11 @@ export function chunkedRenderTasks<T extends Chunkable>(
         (!item.duringSuspension && suspensionBuffer.length > 0) ||
         (isLastItem && item.duringSuspension);
 
-      if (item.duringSuspension) {
+      if (item.duringSuspension && highlightSuspensionActivity) {
         suspensionBuffer.push(item);
       }
 
-      if (finishingSuspension) {
+      if (finishingSuspension && highlightSuspensionActivity) {
         if (shouldBeMergedIntoSuspensionGroup(item, chunkItems, i)) {
           item.duringSuspension = true;
           suspensionBuffer.push(item);
@@ -158,7 +145,7 @@ export function chunkedRenderTasks<T extends Chunkable>(
         }
       }
 
-      if (!item.duringSuspension) {
+      if (!item.duringSuspension || !highlightSuspensionActivity) {
         tasks.push({ type: `item`, item });
       }
 
diff --git a/dash/components/src/Users/Activity/UserActivityFeed.tsx b/dash/components/src/Users/Activity/UserActivityFeed.tsx
index 5c3eeca3..031c09e5 100644
--- a/dash/components/src/Users/Activity/UserActivityFeed.tsx
+++ b/dash/components/src/Users/Activity/UserActivityFeed.tsx
@@ -35,7 +35,7 @@ interface Props {
   numDeleted: number;
   deleteItems(ids: UUID[]): unknown;
   chunkSize?: number;
-  highlightSuspsensionActivity: boolean;
+  highlightSuspensionActivity: boolean;
 }
 
 const UserActivityFeed: React.FC<Props> = ({
@@ -44,7 +44,7 @@ const UserActivityFeed: React.FC<Props> = ({
   numDeleted,
   deleteItems,
   chunkSize = 100,
-  highlightSuspsensionActivity,
+  highlightSuspensionActivity,
 }) => {
   const navigate = useNavigate();
   return (
@@ -56,7 +56,7 @@ const UserActivityFeed: React.FC<Props> = ({
             items={items}
             chunkSize={chunkSize}
             deleteItems={deleteItems}
-            highlightSuspensionActivity={highlightSuspsensionActivity}
+            highlightSuspensionActivity={highlightSuspensionActivity}
           />
           <Button
             className="ScrollTop self-center"
diff --git a/dash/components/src/Users/Activity/__tests__/deletable-chunks.spec.ts b/dash/components/src/Users/Activity/__tests__/deletable-chunks.spec.ts
index a3ea6553..5f63a773 100644
--- a/dash/components/src/Users/Activity/__tests__/deletable-chunks.spec.ts
+++ b/dash/components/src/Users/Activity/__tests__/deletable-chunks.spec.ts
@@ -9,6 +9,7 @@ describe(`chunkedRenderTasks()`, () => {
     const chunks = chunkedRenderTasks(
       [screenshot(), screenshot(), screenshot(), screenshot()],
       2,
+      true,
     );
     expect(simplify(chunks)).toMatchInlineSnapshot(`
       [
@@ -30,6 +31,7 @@ describe(`chunkedRenderTasks()`, () => {
         screenshot(),
       ],
       2,
+      true,
     );
     expect(simplify(chunks)).toMatchInlineSnapshot(`
       [
@@ -41,6 +43,28 @@ describe(`chunkedRenderTasks()`, () => {
     `);
   });
 
+  it(`should not highlight suspension activity when setting is off`, () => {
+    const chunks = chunkedRenderTasks(
+      [
+        screenshot({ duringSuspension: true }),
+        screenshot({ duringSuspension: true }),
+        screenshot(),
+        screenshot({ duringSuspension: true }),
+      ],
+      2,
+      false,
+    );
+    expect(simplify(chunks)).toMatchInlineSnapshot(`
+      [
+        "item(Screenshot)",
+        "item(Screenshot)",
+        "delete_btn",
+        "item(Screenshot)",
+        "item(Screenshot)",
+      ]
+    `);
+  });
+
   it(`handles suspensions across chunk boundaries`, () => {
     const chunks = chunkedRenderTasks(
       [
@@ -50,6 +74,7 @@ describe(`chunkedRenderTasks()`, () => {
         screenshot(),
       ],
       2,
+      true,
     );
     expect(simplify(chunks)).toMatchInlineSnapshot(`
       [
@@ -70,6 +95,7 @@ describe(`chunkedRenderTasks()`, () => {
         screenshot({ duringSuspension: true }),
       ],
       2,
+      true,
     );
     expect(simplify(chunks)).toMatchInlineSnapshot(`
       [
@@ -98,6 +124,7 @@ describe(`chunkedRenderTasks()`, () => {
         screenshot(),
       ],
       100,
+      true,
     );
     expect(simplify(chunks)).toMatchInlineSnapshot(`
       [
@@ -125,6 +152,7 @@ describe(`chunkedRenderTasks()`, () => {
         screenshot(),
       ],
       100,
+      true,
     );
     expect(simplify(chunks)).toMatchInlineSnapshot(`
       [
diff --git a/dash/components/src/Users/EditUser.tsx b/dash/components/src/Users/EditUser.tsx
index 611eeaae..628badf1 100644
--- a/dash/components/src/Users/EditUser.tsx
+++ b/dash/components/src/Users/EditUser.tsx
@@ -239,13 +239,12 @@ const EditUser: React.FC<Props> = ({
               <div
                 className={cx(
                   `flex justify-between items-center mt-4 p-6 bg-slate-100 rounded-xl transition-opacity duration-300`,
-                  !(screenshotsEnabled || keyloggingEnabled) &&
-                    `opacity-50 cursor-not-allowed pointer-events-none`,
+                  !(screenshotsEnabled || keyloggingEnabled) && `!hidden`,
                 )}
               >
                 <div className="mr-3">
                   <h3 className="font-medium text-slate-700 leading-tight">
-                    Highlight activity during filter suspensions
+                    Emphasize filter suspension activity
                   </h3>
                   <p className="text-slate-500 text-sm mt-1">
                     Visually highlight activity that is recorded while filter is suspended
diff --git a/storybook/src/dash/Users/Activity/UserActivityFeed.stories.tsx b/storybook/src/dash/Users/Activity/UserActivityFeed.stories.tsx
index 95a5fe5c..048dc4a3 100644
--- a/storybook/src/dash/Users/Activity/UserActivityFeed.stories.tsx
+++ b/storybook/src/dash/Users/Activity/UserActivityFeed.stories.tsx
@@ -16,7 +16,7 @@ export const Default: Story = props({
   date: new Date(time.stable()),
   items: activity[2]?.items ?? [],
   numDeleted: 0,
-  highlightSuspsensionActivity: true,
+  highlightSuspensionActivity: true,
   deleteItems: () => {},
 });