collavre_slack 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa613acb914f114910acfe095639ddc59da1e61f354027db1cd787f21771936c
-  data.tar.gz: 3920b7a19ff81f3e631056e68e94e6d635a3bf01bf27121d24b96867fa74b290
+  metadata.gz: 50c834145802449d01365be47375e1d4bbb4a05a2622abee20449d75b24c8c2c
+  data.tar.gz: d7b9d88bad8aac159618cd4f336937aea08e43362c2c2891304a0a895bfd2ece
 SHA512:
-  metadata.gz: b7a05dd936fe10a0ad171794034c69718f1916a6eaa5f6a2f9b35e70c2b973fb6d2aad40d2ef536d6c22d4fedf5760d8ab2ea4c42554ef63189eda635ff1fe72
-  data.tar.gz: 80ecdcf143752eced3b5fdce64d75fb788b4b541ad0ef68eb07d6a479a249ce33834147f3938ed524314c479799a1d2fe19d7227ba7a91e40e35618600284070
+  metadata.gz: b1c34b49e220e6b2cd44e1978f5b3b9fd088d2f18d85f6e8628817486ae7ecf110e2f09a81cf25fb6ea9f6aa4e3a76fcbba61970067a3a5fb866495a82d9050b
+  data.tar.gz: 60b924d455319f87ea3de4ab8a340fb7b93b20df413cb1e96d5e3c78bacb09d94888eda06f0ed08028072e3cae19265b3c88aa5403856147dd0bb7c2766b67cc

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;

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

@@ -86,10 +86,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;
       }
 
-      availableChannels.forEach(function (channel) {
+      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;
+      }
+
+      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 => {

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/lib/collavre_slack/version.rb

@@ -1,3 +1,3 @@
 module CollavreSlack
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
 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.2
 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