collavre_slack 0.2.1 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa613acb914f114910acfe095639ddc59da1e61f354027db1cd787f21771936c
-  data.tar.gz: 3920b7a19ff81f3e631056e68e94e6d635a3bf01bf27121d24b96867fa74b290
+  metadata.gz: 13a4005b2d4412089caa83e43e2be4868ce50aa024a77904e7644320d30a5cbb
+  data.tar.gz: c5a8501c5e9149b4648a10dc5eac2ede04451e0474cc0d59119f123b2d6763dd
 SHA512:
-  metadata.gz: b7a05dd936fe10a0ad171794034c69718f1916a6eaa5f6a2f9b35e70c2b973fb6d2aad40d2ef536d6c22d4fedf5760d8ab2ea4c42554ef63189eda635ff1fe72
-  data.tar.gz: 80ecdcf143752eced3b5fdce64d75fb788b4b541ad0ef68eb07d6a479a249ce33834147f3938ed524314c479799a1d2fe19d7227ba7a91e40e35618600284070
+  metadata.gz: 82d93fd5f769a694bb3afc27246b75f161b8f5d50afd9a09e1f1939eb26f5e774c193e9b6a2ce4d04c0ac5faf088c13abb6d693afdd0080463bd4b5ccb1fa463
+  data.tar.gz: 9de647749fb26de533513da779f9726185781071129c28080568402b8f30fb3037694175c7bf91f007f25acc005f07f44fc1186f49d01b15f719409633fe1a2a

data/app/assets/stylesheets/collavre_slack/slack_integration.css

@@ -1,3 +1,14 @@
+/* Slack channel search */
+.slack-channel-search {
+  width: 100%;
+  padding: 0.5em 0.75em;
+  margin-bottom: 0.5em;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  font-size: 0.95em;
+  box-sizing: border-box;
+}
+
 /* Slack channel selection */
 .slack-channel-item {
   padding: 0.5em 1em;
@@ -13,3 +24,36 @@
   background: var(--color-drag-over);
   border-left: 3px solid var(--color-secondary-active);
 }
+
+/* Slack badge in comments popup header */
+.slack-channel-badge {
+  display: none;
+  font-size: 0.7em;
+  font-weight: 600;
+  background: #4A154B;
+  color: white;
+  padding: 0.15em 0.45em;
+  border-radius: 4px;
+  margin-left: 0.5em;
+  cursor: pointer;
+  white-space: nowrap;
+  vertical-align: middle;
+  line-height: 1.4;
+}
+
+.slack-channel-badge:hover {
+  background: #611f64;
+}
+
+.slack-channel-tooltip {
+  display: none;
+  font-size: 0.75em;
+  color: var(--color-text-secondary);
+  margin-left: 0.4em;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.slack-channel-tooltip.visible {
+  display: inline;
+}

data/app/controllers/collavre_slack/creatives/slack_integrations_controller.rb

@@ -60,6 +60,17 @@ module CollavreSlack
         end
       end
 
+      # Lightweight endpoint for badge display — returns only existing links, no Slack API calls
+      def badge
+        target_creative = @creative.effective_origin
+        links = SlackChannelLink.where(creative: target_creative)
+        render json: {
+          links: links.map { |link|
+            { channel_name: link.channel_name }
+          }
+        }
+      end
+
       def destroy
         link = SlackChannelLink.find(params[:id])
         # Check against origin creative
@@ -86,10 +97,7 @@ module CollavreSlack
 
       def fetch_channels(slack_account)
         client = SlackClient.new(access_token: slack_account.access_token)
-        response = client.list_channels
-        return [] unless response[:ok]
-
-        (response[:channels] || []).map do |channel|
+        client.list_all_channels.map do |channel|
           { id: channel[:id], name: channel[:name] }
         end
       rescue StandardError => e

data/app/javascript/__tests__/slack_channel_list.test.js

@@ -0,0 +1,166 @@
+/**
+ * @jest-environment jsdom
+ */
+import { filterChannels, reconcileSelection, buildChannelViewModels } from '../slack_channel_list.js';
+
+const channels = [
+  { id: 'C01', name: 'general' },
+  { id: 'C02', name: 'random' },
+  { id: 'C03', name: 'engineering' },
+  { id: 'C04', name: 'design' },
+  { id: 'C05', name: 'general-kr' },
+];
+
+describe('filterChannels', () => {
+  test('returns all channels when query is empty', () => {
+    expect(filterChannels(channels, '')).toEqual(channels);
+    expect(filterChannels(channels, null)).toEqual(channels);
+    expect(filterChannels(channels, undefined)).toEqual(channels);
+  });
+
+  test('filters by substring match (case-insensitive)', () => {
+    const result = filterChannels(channels, 'gen');
+    expect(result).toEqual([
+      { id: 'C01', name: 'general' },
+      { id: 'C05', name: 'general-kr' },
+    ]);
+  });
+
+  test('is case-insensitive', () => {
+    expect(filterChannels(channels, 'DESIGN')).toEqual([
+      { id: 'C04', name: 'design' },
+    ]);
+  });
+
+  test('returns empty array when nothing matches', () => {
+    expect(filterChannels(channels, 'zzz')).toEqual([]);
+  });
+
+  test('returns empty array when channels list is empty', () => {
+    expect(filterChannels([], 'gen')).toEqual([]);
+  });
+});
+
+describe('reconcileSelection', () => {
+  test('returns null when no channel is selected', () => {
+    expect(reconcileSelection(null, channels)).toBeNull();
+  });
+
+  test('keeps selection when channel is in filtered list', () => {
+    const selected = { id: 'C01', name: 'general' };
+    expect(reconcileSelection(selected, channels)).toBe(selected);
+  });
+
+  test('clears selection when channel is filtered out', () => {
+    const selected = { id: 'C01', name: 'general' };
+    const filtered = [{ id: 'C04', name: 'design' }];
+    expect(reconcileSelection(selected, filtered)).toBeNull();
+  });
+
+  test('clears selection when filtered list is empty', () => {
+    const selected = { id: 'C01', name: 'general' };
+    expect(reconcileSelection(selected, [])).toBeNull();
+  });
+});
+
+describe('buildChannelViewModels', () => {
+  test('marks linked channels', () => {
+    const links = [{ channel_id: 'C02' }];
+    const result = buildChannelViewModels(channels, links, null);
+
+    const linkedItem = result.find(vm => vm.channel.id === 'C02');
+    expect(linkedItem.isLinked).toBe(true);
+
+    const unlinkedItem = result.find(vm => vm.channel.id === 'C01');
+    expect(unlinkedItem.isLinked).toBe(false);
+  });
+
+  test('marks selected channel', () => {
+    const selected = { id: 'C03', name: 'engineering' };
+    const result = buildChannelViewModels(channels, [], selected);
+
+    const selectedItem = result.find(vm => vm.channel.id === 'C03');
+    expect(selectedItem.isSelected).toBe(true);
+
+    const otherItem = result.find(vm => vm.channel.id === 'C01');
+    expect(otherItem.isSelected).toBe(false);
+  });
+
+  test('no channel is selected when selection is null', () => {
+    const result = buildChannelViewModels(channels, [], null);
+    expect(result.every(vm => !vm.isSelected)).toBe(true);
+  });
+
+  test('handles empty inputs', () => {
+    expect(buildChannelViewModels([], [], null)).toEqual([]);
+  });
+
+  test('channel can be both linked and selected', () => {
+    const selected = { id: 'C02', name: 'random' };
+    const links = [{ channel_id: 'C02' }];
+    const result = buildChannelViewModels(channels, links, selected);
+
+    const item = result.find(vm => vm.channel.id === 'C02');
+    expect(item.isLinked).toBe(true);
+    expect(item.isSelected).toBe(true);
+  });
+});
+
+describe('search → selection regression', () => {
+  test('selecting a channel then filtering it out clears selection', () => {
+    // User selects #general
+    const selected = { id: 'C01', name: 'general' };
+
+    // Then types "design" in search
+    const filtered = filterChannels(channels, 'design');
+    expect(filtered).toEqual([{ id: 'C04', name: 'design' }]);
+
+    // Selection should be cleared because #general is not in results
+    const reconciled = reconcileSelection(selected, filtered);
+    expect(reconciled).toBeNull();
+  });
+
+  test('selecting a channel then filtering to include it keeps selection', () => {
+    const selected = { id: 'C01', name: 'general' };
+    const filtered = filterChannels(channels, 'gen');
+
+    // #general is still in the results
+    const reconciled = reconcileSelection(selected, filtered);
+    expect(reconciled).toBe(selected);
+  });
+
+  test('clearing the search restores selection if channel exists', () => {
+    const selected = { id: 'C01', name: 'general' };
+
+    // Filter out, selection cleared
+    const filtered1 = filterChannels(channels, 'design');
+    const reconciled1 = reconcileSelection(selected, filtered1);
+    expect(reconciled1).toBeNull();
+
+    // Clear search — but reconcileSelection won't magically restore,
+    // it returns null because reconciled1 was already null
+    const filtered2 = filterChannels(channels, '');
+    const reconciled2 = reconcileSelection(reconciled1, filtered2);
+    expect(reconciled2).toBeNull();
+  });
+
+  test('full flow: filter → select → widen filter keeps new selection', () => {
+    // User types "des", sees only #design
+    const filtered1 = filterChannels(channels, 'des');
+    expect(filtered1).toEqual([{ id: 'C04', name: 'design' }]);
+
+    // User selects #design
+    const selected = { id: 'C04', name: 'design' };
+
+    // User clears search — #design is still in full list
+    const filtered2 = filterChannels(channels, '');
+    const reconciled = reconcileSelection(selected, filtered2);
+    expect(reconciled).toBe(selected);
+
+    // View models reflect selection correctly
+    const vms = buildChannelViewModels(filtered2, [], reconciled);
+    const designVm = vms.find(vm => vm.channel.id === 'C04');
+    expect(designVm.isSelected).toBe(true);
+    expect(vms.filter(vm => vm.isSelected)).toHaveLength(1);
+  });
+});

data/app/javascript/collavre_slack.js

@@ -1,3 +1,5 @@
+import { filterChannels, reconcileSelection, buildChannelViewModels } from './slack_channel_list.js';
+
 let slackIntegrationInitialized = false;
 
 if (!slackIntegrationInitialized) {
@@ -23,6 +25,7 @@ if (!slackIntegrationInitialized) {
     const addChannelBtn = document.getElementById('slack-add-channel-btn');
     const connectMessage = document.getElementById('slack-connect-message');
     const channelListEl = document.getElementById('slack-channel-list');
+    const channelSearchEl = document.getElementById('slack-channel-search');
     const channelSummaryEl = document.getElementById('slack-channel-summary');
 
     let creativeId = null;
@@ -250,31 +253,46 @@ if (!slackIntegrationInitialized) {
         });
     }
 
-    function renderChannelList() {
+    function renderChannelList(filter) {
       if (!channelListEl) return;
 
       channelListEl.innerHTML = '';
 
       if (availableChannels.length === 0) {
-        channelListEl.innerHTML = '<p style="padding:0.5em;color:var(--color-text-secondary);">No channels available</p>';
+        channelListEl.innerHTML = `<p style="padding:0.5em;color:var(--color-text-secondary);">${modal.dataset.noChannelsAvailable || 'No channels available'}</p>`;
+        return;
+      }
+
+      const filtered = filterChannels(availableChannels, filter);
+
+      // Clear selection if the selected channel is not in the filtered results
+      selectedChannel = reconcileSelection(selectedChannel, filtered);
+      nextBtn.disabled = !selectedChannel;
+
+      if (filtered.length === 0) {
+        channelListEl.innerHTML = `<p style="padding:0.5em;color:var(--color-text-secondary);">${modal.dataset.noMatchingChannels || 'No matching channels'}</p>`;
         return;
       }
 
-      availableChannels.forEach(function (channel) {
+      const viewModels = buildChannelViewModels(filtered, existingLinks, selectedChannel);
+
+      viewModels.forEach(function ({ channel, isLinked, isSelected }) {
         const div = document.createElement('div');
         div.className = 'slack-channel-item';
 
-        const isLinked = existingLinks.some(link => link.channel_id === channel.id);
-
         const linkedLabel = modal.dataset.linkedLabel || '(linked)';
         div.innerHTML = `
           <strong>#${channel.name}</strong>
           ${isLinked ? `<span style="color:green;margin-left:0.5em;">${linkedLabel}</span>` : ''}
         `;
 
+        if (isSelected) {
+          div.classList.add('active');
+        }
+
         if (!isLinked) {
           div.addEventListener('click', function () {
-            document.querySelectorAll('.slack-channel-item').forEach(el => {
+            channelListEl.querySelectorAll('.slack-channel-item').forEach(el => {
               el.classList.remove('active');
             });
             div.classList.add('active');
@@ -396,6 +414,7 @@ if (!slackIntegrationInitialized) {
       clearError();
       if (currentStep === 'connect') {
         currentStep = 'channels';
+        if (channelSearchEl) channelSearchEl.value = '';
         renderChannelList();
       } else if (currentStep === 'channels') {
         if (!selectedChannel) {
@@ -410,10 +429,17 @@ if (!slackIntegrationInitialized) {
 
     finishBtn.addEventListener('click', performLink);
 
+    if (channelSearchEl) {
+      channelSearchEl.addEventListener('input', function () {
+        renderChannelList(this.value);
+      });
+    }
+
     if (addChannelBtn) {
       addChannelBtn.addEventListener('click', function () {
         currentStep = 'channels';
         selectedChannel = null;
+        if (channelSearchEl) channelSearchEl.value = '';
         renderChannelList();
         updateStep();
       });
@@ -437,7 +463,7 @@ if (!slackIntegrationInitialized) {
             if (data.connected) {
               availableChannels = data.channels || [];
               existingLinks = data.links || [];
-              renderChannelList();
+              renderChannelList(channelSearchEl ? channelSearchEl.value : '');
             }
           })
           .catch(error => {
@@ -461,35 +487,79 @@ if (!slackIntegrationInitialized) {
   });
 
   // Slack badge for comments popup
+  // Store references for cleanup to avoid handler accumulation across popup opens
+  let slackBadgeClickHandler = null;
+  let slackDocumentClickHandler = null;
+  let slackBadgeRequestId = 0; // Guard against stale async responses
+
   document.addEventListener('comments-popup:opened', async function (event) {
     const { creativeId, badgeContainer } = event.detail;
     if (!badgeContainer || !creativeId) return;
 
+    // Increment request id to invalidate any in-flight fetch
+    const currentRequestId = ++slackBadgeRequestId;
+
     // Create or find slack badge element
     let badge = badgeContainer.querySelector('[data-slack-badge]');
     if (!badge) {
       badge = document.createElement('span');
       badge.setAttribute('data-slack-badge', '');
       badge.className = 'slack-channel-badge';
-      badge.style.cssText = 'display:none;font-size:0.75em;background:#4A154B;color:white;padding:0.15em 0.5em;border-radius:4px;margin-left:0.5em;';
       badgeContainer.appendChild(badge);
     }
 
+    // Clean up previous handlers before re-registering
+    if (slackBadgeClickHandler) {
+      badge.removeEventListener('click', slackBadgeClickHandler);
+      slackBadgeClickHandler = null;
+    }
+    if (slackDocumentClickHandler) {
+      document.removeEventListener('click', slackDocumentClickHandler);
+      slackDocumentClickHandler = null;
+    }
+
+    // Remove any existing tooltip
+    const existingTooltip = badgeContainer.querySelector('[data-slack-tooltip]');
+    if (existingTooltip) existingTooltip.remove();
+
     // Hide badge initially
     badge.style.display = 'none';
     badge.textContent = '';
 
     try {
-      const response = await fetch(`/slack/creatives/${creativeId}/slack_integrations`, {
+      const response = await fetch(`/slack/creatives/${creativeId}/slack_integrations/badge`, {
         headers: { Accept: 'application/json' }
       });
+
+      // Discard response if a newer popup open has occurred
+      if (currentRequestId !== slackBadgeRequestId) return;
+
       if (!response.ok) return;
 
       const data = await response.json();
       if (data.links && data.links.length > 0) {
-        const channelNames = data.links.map(link => `#${link.channel_name}`).join(', ');
-        badge.textContent = `Slack: ${channelNames}`;
+        badge.textContent = 'Slack';
         badge.style.display = 'inline-block';
+        badge.title = data.links.map(link => `#${link.channel_name}`).join(', ');
+
+        // Create tooltip element for click display
+        const tooltip = document.createElement('span');
+        tooltip.setAttribute('data-slack-tooltip', '');
+        tooltip.className = 'slack-channel-tooltip';
+        tooltip.textContent = data.links.map(link => `#${link.channel_name}`).join(', ');
+        badgeContainer.appendChild(tooltip);
+
+        slackBadgeClickHandler = function (e) {
+          e.stopPropagation();
+          tooltip.classList.toggle('visible');
+        };
+        badge.addEventListener('click', slackBadgeClickHandler);
+
+        // Close tooltip when clicking elsewhere
+        slackDocumentClickHandler = function () {
+          tooltip.classList.remove('visible');
+        };
+        document.addEventListener('click', slackDocumentClickHandler);
       }
     } catch (error) {
       console.warn('Failed to load Slack badge:', error);
@@ -500,10 +570,23 @@ if (!slackIntegrationInitialized) {
     const { badgeContainer } = event.detail;
     if (!badgeContainer) return;
 
+    // Invalidate any in-flight badge fetch so late responses are discarded
+    slackBadgeRequestId++;
+
     const badge = badgeContainer.querySelector('[data-slack-badge]');
     if (badge) {
       badge.style.display = 'none';
       badge.textContent = '';
+      if (slackBadgeClickHandler) {
+        badge.removeEventListener('click', slackBadgeClickHandler);
+        slackBadgeClickHandler = null;
+      }
+    }
+    if (slackDocumentClickHandler) {
+      document.removeEventListener('click', slackDocumentClickHandler);
+      slackDocumentClickHandler = null;
     }
+    const tooltip = badgeContainer.querySelector('[data-slack-tooltip]');
+    if (tooltip) tooltip.remove();
   });
 }

data/app/javascript/slack_channel_list.js

@@ -0,0 +1,47 @@
+/**
+ * Pure-logic helpers for the Slack channel list.
+ * Extracted so they can be unit-tested without a full DOM wizard.
+ */
+
+/**
+ * Filter channels by a search query (case-insensitive substring match on name).
+ * @param {Array<{id:string, name:string}>} channels
+ * @param {string} query
+ * @returns {Array<{id:string, name:string}>}
+ */
+export function filterChannels(channels, query) {
+  const q = (query || '').toLowerCase();
+  if (!q) return channels;
+  return channels.filter(ch => ch.name.toLowerCase().includes(q));
+}
+
+/**
+ * Decide whether selectedChannel should be cleared after a filter change.
+ * Returns the selectedChannel as-is if it still exists in `filtered`,
+ * or null if it has been filtered out.
+ *
+ * @param {{id:string, name:string}|null} selectedChannel
+ * @param {Array<{id:string, name:string}>} filtered
+ * @returns {{id:string, name:string}|null}
+ */
+export function reconcileSelection(selectedChannel, filtered) {
+  if (!selectedChannel) return null;
+  return filtered.some(ch => ch.id === selectedChannel.id) ? selectedChannel : null;
+}
+
+/**
+ * Build the view-model array consumed by the DOM renderer.
+ *
+ * @param {Array<{id:string, name:string}>} channels   – filtered channel list
+ * @param {Array<{channel_id:string}>}      links      – already-linked channels
+ * @param {{id:string}|null}                selected   – currently selected channel
+ * @returns {Array<{channel, isLinked:boolean, isSelected:boolean}>}
+ */
+export function buildChannelViewModels(channels, links, selected) {
+  const linkedIds = new Set(links.map(l => l.channel_id));
+  return channels.map(channel => ({
+    channel,
+    isLinked: linkedIds.has(channel.id),
+    isSelected: selected !== null && selected.id === channel.id,
+  }));
+}

data/app/services/collavre_slack/slack_client.rb

@@ -28,8 +28,26 @@ module CollavreSlack
       parse_response(response)
     end
 
-    def list_channels
-      get("conversations.list", limit: 1000, types: "public_channel,private_channel")
+    def list_channels(cursor: nil)
+      params = { limit: 200, types: "public_channel,private_channel" }
+      params[:cursor] = cursor if cursor.present?
+      get("conversations.list", params)
+    end
+
+    def list_all_channels
+      channels = []
+      cursor = nil
+
+      loop do
+        response = list_channels(cursor: cursor)
+        break unless response[:ok]
+
+        channels.concat(Array(response[:channels]))
+        cursor = response.dig(:response_metadata, :next_cursor)
+        break if cursor.blank?
+      end
+
+      channels
     end
 
     def list_messages(channel:, oldest: nil, cursor: nil)

data/app/views/collavre_slack/integrations/_modal.html.erb

@@ -14,6 +14,8 @@
      data-refresh="<%= t('collavre_slack.modal.refresh') %>"
      data-refresh-error="<%= t('collavre_slack.modal.refresh_error') %>"
      data-linked-label="<%= t('collavre_slack.modal.linked_label') %>"
+     data-no-channels-available="<%= t('collavre_slack.modal.no_channels_available') %>"
+     data-no-matching-channels="<%= t('collavre_slack.modal.no_matching_channels') %>"
      style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;align-items:center;justify-content:center;">
   <div class="popup-box" style="min-width:360px;max-width:90vw;">
     <button type="button" id="close-slack-modal" class="popup-close-btn">&times;</button>
@@ -41,6 +43,7 @@
 
     <div class="slack-wizard-step" id="slack-step-channels" style="display:none;">
       <p class="slack-modal-subtext"><%= t('collavre_slack.modal.choose_channel') %></p>
+      <input type="text" id="slack-channel-search" class="slack-channel-search" placeholder="<%= t('collavre_slack.modal.search_channels') %>" autocomplete="off">
       <div id="slack-channel-list" class="slack-list slack-modal-list-box" style="max-height:240px;overflow:auto;"></div>
     </div>
 

data/config/locales/en.yml

@@ -55,3 +55,6 @@ en:
       refresh: "Refresh"
       refresh_error: "Failed to refresh channels"
       linked_label: "(Linked)"
+      search_channels: "Search channels..."
+      no_channels_available: "No channels available"
+      no_matching_channels: "No matching channels"

data/config/locales/ko.yml

@@ -55,3 +55,6 @@ ko:
       refresh: "새로고침"
       refresh_error: "채널 목록을 새로고침하는데 실패했습니다"
       linked_label: "(연결됨)"
+      search_channels: "채널 검색..."
+      no_channels_available: "사용 가능한 채널이 없습니다"
+      no_matching_channels: "일치하는 채널이 없습니다"

data/config/routes.rb

@@ -3,7 +3,11 @@ CollavreSlack::Engine.routes.draw do
   get "/auth/slack/callback", to: "slack_auth#callback"
 
   resources :creatives, only: [] do
-    resources :slack_integrations, module: :creatives, only: [ :index, :create, :destroy ]
+    resources :slack_integrations, module: :creatives, only: [ :index, :create, :destroy ] do
+      collection do
+        get :badge
+      end
+    end
     resources :slack_messages, only: [ :create ]
   end
 

data/lib/collavre_slack/version.rb

@@ -1,3 +1,3 @@
 module CollavreSlack
-  VERSION = "0.2.1"
+  VERSION = "0.2.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: collavre_slack
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.3
 platform: ruby
 authors:
 - Collavre
@@ -81,7 +81,9 @@ files:
 - app/controllers/collavre_slack/slack_auth_controller.rb
 - app/controllers/collavre_slack/slack_events_controller.rb
 - app/controllers/collavre_slack/slack_messages_controller.rb
+- app/javascript/__tests__/slack_channel_list.test.js
 - app/javascript/collavre_slack.js
+- app/javascript/slack_channel_list.js
 - app/jobs/collavre_slack/application_job.rb
 - app/jobs/collavre_slack/slack_channel_sync_job.rb
 - app/jobs/collavre_slack/slack_inbound_message_delete_job.rb