From f29089a748e6812970834b3c70dc3dedff17e30c Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 26 Feb 2024 16:36:04 -0800
Subject: [PATCH] fix(messaging): show users w/o targets as disabled

---
 src/lib/components/collapsibleItem.svelte     | 35 ++++++++++++++++---
 .../messaging/userTargetsModal.svelte         | 30 +++++++++++-----
 2 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
index 736f2fe21..3420b555c 100644
--- a/src/lib/components/collapsibleItem.svelte
+++ b/src/lib/components/collapsibleItem.svelte
@@ -3,10 +3,11 @@
 
     export let withIndentation = false;
     export let open = false;
+    export let disabled = false;
 </script>
 
 <li class="collapsible-item">
-    <details class="collapsible-wrapper" bind:open>
+    <details class="collapsible-wrapper" class:is-disabled={disabled} bind:open>
         <!-- svelte-ignore a11y-no-redundant-roles -->
         <summary
             class="collapsible-button u-position-relative"
@@ -16,13 +17,18 @@
             tabindex="0">
             <slot name="beforetitle" />
             <div>
-                <span class="text"><slot name="title" /></span>
+                <span class="text" class:u-color-text-disabled={disabled}
+                    ><slot name="title" /></span>
                 {#if $$slots.subtitle}
-                    <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+                    <span class="collapsible-button-optional" class:u-color-text-disabled={disabled}
+                        ><slot name="subtitle" /></span>
                 {/if}
             </div>
             <div class="icon">
-                <span class="icon-cheveron-down u-font-size-20" aria-hidden="true" />
+                <span
+                    class="icon-cheveron-down u-font-size-20"
+                    class:u-color-text-disabled={disabled}
+                    aria-hidden="true" />
             </div>
         </summary>
         <div
@@ -33,3 +39,24 @@
         </div>
     </details>
 </li>
+
+<style lang="scss">
+    // TODO: remove once pink is updated
+    .collapsible-item {
+        .collapsible-wrapper.is-disabled {
+            &[open] .icon-cheveron-down {
+                rotate: unset;
+            }
+
+            cursor: not-allowed;
+            * {
+                cursor: not-allowed;
+            }
+            .collapsible {
+                &-content {
+                    display: none !important;
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/routes/console/project-[project]/messaging/userTargetsModal.svelte b/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
index 7552144aa..271f94ecc 100644
--- a/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
+++ b/src/routes/console/project-[project]/messaging/userTargetsModal.svelte
@@ -132,22 +132,20 @@
                     {@const selectedCount = user.targets.filter(
                         (target) => selected[target.$id]
                     ).length}
-                    <CollapsibleItem withIndentation>
+                    <CollapsibleItem withIndentation disabled={!user.targets.length}>
                         <svelte:fragment slot="beforetitle">
                             <InputCheckbox
                                 id={userId}
                                 size="small"
-                                disabled={user.targets.length > 0 &&
-                                    user.targets.every((target) => targetsById[target.$id])}
+                                disabled={!user.targets.length ||
+                                    (user.targets.length > 0 &&
+                                        user.targets.every((target) => targetsById[target.$id]))}
                                 checked={selectedCount > 0 && selectedCount === user.targets.length}
                                 on:change={(event) => onUserSelection(event, userId)} />
                         </svelte:fragment>
                         <svelte:fragment slot="title">
                             <span class="u-line-height-1-5">
-                                <span
-                                    class="body-text-1 u-bold"
-                                    style="color:hsl(var(--color-neutral-80))"
-                                    data-private>
+                                <span class="user-name body-text-1 u-bold" data-private>
                                     {#if user.name}
                                         {user.name}
                                     {:else if user.email}
@@ -161,7 +159,11 @@
                             </span>
                         </svelte:fragment>
                         <svelte:fragment slot="subtitle">
-                            ({selectedCount}/{user.targets.length} targets)
+                            {#if user.targets.length === 0}
+                                (0 targets)
+                            {:else}
+                                ({selectedCount}/{user.targets.length} targets)
+                            {/if}
                         </svelte:fragment>
                         <FormList>
                             {#each user.targets as target}
@@ -235,3 +237,15 @@
         <Button submit disabled={!hasSelection}>Add</Button>
     </svelte:fragment>
 </Modal>
+
+<style lang="scss">
+    :global(.collapsible-wrapper:not(.is-disabled)) {
+        .user-name {
+            color: hsl(var(--color-neutral-80));
+
+            :global(.theme-dark) & {
+                color: hsl(var(--color-neutral-20));
+            }
+        }
+    }
+</style>