dash: moved suspension highlighting logic to function

gertrude-app · Jan 2, 2024 · ba75f03 · ba75f03
1 parent f0a25db
commit ba75f03
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 37 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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: () => {},
 });