rs-activeadmin-searchable_select 4.0.5

data/docs/for-next-session.md

@@ -0,0 +1,199 @@
+# Session Continuation Notes - ActiveAdmin Gems Standardization
+
+## Current Status
+Working on standardizing two ActiveAdmin gems:
+- `/data/activeadmin_trumbowyg` (rs-activeadmin_trumbowyg) - **FULLY WORKING v4.0.4** ✅
+  - Fixed critical CSS bundling issue using Tailwind CLI
+  - All CSS loading tests passing (4/4) ✅
+  - Updated tests to check for ActiveAdmin 4's actual HTML structure
+  - Fixed CI workflow to build and extract npm package (avoids vendor symlink issues)
+- `/data/activeadmin-searchable_select` (rs-activeadmin-searchable_select) - Needs updates ⚠️
+
+## Completed Tasks
+1. ✅ Fixed CI failures for both gems
+2. ✅ Standardized NPM package structure
+3. ✅ Forked both gems with new names (rs- prefix)
+4. ✅ Published NPM packages:
+   - `@rocket-sensei/activeadmin_trumbowyg@4.0.4`
+   - `@rocket-sensei/activeadmin-searchable_select@4.0.5`
+5. ✅ Updated documentation for ActiveAdmin 4 and Propshaft
+6. ✅ Both gems support ActiveAdmin 4.0.0.beta only
+7. ✅ Fixed jQuery loading issues with proper module exports
+8. ✅ Set up proper NPM package imports instead of esbuild aliases
+9. ✅ Created NPM scripts to copy both icons.svg and CSS from trumbowyg package
+10. ✅ Added generated assets to .gitignore
+11. ✅ Removed Tailwind dependencies and simplified CSS build
+12. ✅ Fixed assets to be served locally via Propshaft (no CDN)
+13. ✅ **FIXED CSS BUILD** - Now using Tailwind CLI with ActiveAdmin plugin
+   - Created `tailwind-active_admin.config.js` based on production app `/data/rslogin-ui/`
+   - Created `build_activeadmin_css.js` to properly bundle CSS
+   - CSS now includes: Tailwind base + Trumbowyg vendor CSS + custom styles
+   - Build command: `npm run build:css:activeadmin`
+   - Updated CSS loading tests to check for ActiveAdmin 4's actual HTML structure
+   - All CSS loading tests now passing (was checking for old `#header` instead of new Tailwind classes)
+14. ✅ **FIXED CI WORKFLOW** - Build and extract npm package to avoid vendor symlink issues
+   - Build npm package with `npm pack`
+   - Extract to `/tmp/npm-package`
+   - Install from extracted package instead of `file:../..`
+   - Completely avoids RSpec discovering vendor/bundle specs through symlinks
+
+## NEXT SESSION: Fix activeadmin-searchable_select
+
+### Main Issues to Fix
+1. **Test app needs Propshaft setup** (currently partially configured)
+   - File: `spec/internal/config/environment.rb` - Changed to use `:propshaft` ✅
+   - Still needs proper asset loading configuration
+
+2. **Test failures** - 1 test failing:
+   ```
+   spec/features/inline_ajax_setting_spec.rb:25 
+   # inline_ajax_options setting when ajax option set to true renders all options statically
+   ```
+   - Issue: JavaScript not loading properly in test environment
+   - The helper in `spec/internal/config/initializers/active_admin.rb` loads from `src/searchable_select/init.js`
+
+3. **Module namespace issues** (partially fixed):
+   - Fixed in: `lib/activeadmin/inputs/searchable_select_input.rb`
+   - Fixed in: `lib/activeadmin/inputs/filters/searchable_select_input.rb`
+   - Changed from `SearchableSelect::SelectInputExtension` to `ActiveAdmin::SearchableSelect::SelectInputExtension`
+
+### Test App Configuration Needed
+
+#### Current searchable_select test app structure:
+```
+spec/internal/
+├── app/
+│   └── assets/
+│       ├── builds/.keep (created)
+│       └── javascripts/
+│           ├── active_admin.js (Sprockets syntax - needs update)
+│           └── searchable_select_test.js (placeholder)
+├── config/
+│   ├── environment.rb (updated to use Propshaft ✅)
+│   └── initializers/
+│       ├── active_admin.rb (loads JS via helper - needs review)
+│       └── assets.rb (Sprockets config - needs update)
+└── (no package.json, no esbuild config)
+```
+
+#### CI Workflow Fix for searchable_select
+**CRITICAL**: Must use same approach as trumbowyg to avoid vendor/bundle symlink issues:
+1. Build npm package with `npm pack`
+2. Extract to `/tmp/npm-package`  
+3. Install from extracted package in test app
+4. See: `/data/activeadmin_trumbowyg/.github/workflows/ci.yml` lines 68-87
+
+### What searchable_select needs (adapt from trumbowyg):
+1. **esbuild.config.js** - Create based on `/data/activeadmin_trumbowyg/spec/internal/esbuild.config.js`
+   - Change alias from `'activeadmin_trumbowyg'` to `'activeadmin-searchable_select'`
+   - Point to `'../../src/index.js'`
+
+2. **package.json** - Create based on `/data/activeadmin_trumbowyg/spec/internal/package.json`
+   - Keep: esbuild, @activeadmin/activeadmin, jquery
+   - Add: select2 (instead of trumbowyg)
+   - Remove: trumbowyg, tailwindcss, @tailwindcss/forms
+
+3. **inject-jquery.js** - Copy `/data/activeadmin_trumbowyg/spec/internal/inject-jquery.js` as-is
+
+4. **app/js/active_admin.js** - Create based on `/data/activeadmin_trumbowyg/spec/internal/app/js/active_admin.js`
+   - Import activeadmin-searchable_select instead of activeadmin_trumbowyg
+
+### Security Issues Fixed in trumbowyg
+
+1. **Removed from trumbowyg** (unnecessary complexity):
+   - ✅ `spec/internal/build_css.js` - Removed
+   - ✅ `spec/internal/tailwind.config.mjs` - Removed
+   - ✅ Simplified to just copy CSS from npm package
+
+### Latest Fixes in trumbowyg (Session 2)
+
+1. **Icon serving fixed**:
+   - ✅ Icons now copied to both `app/assets/builds/` and `public/`
+   - ✅ Configurable SVG path via `window.TRUMBOWYG_SVG_PATH`
+   - ✅ Works with Propshaft in production and development
+
+2. **Documentation created**:
+   - ✅ Migration guide at `docs/guide-update-your-app.md`
+   - ✅ README updated with correct paths and instructions
+   - ✅ Clear Propshaft configuration documented
+
+2. **Docker setup** (low priority):
+   - `/data/activeadmin_trumbowyg/extra/` directory
+   - Safe but consider removing if not needed
+
+### Key Files to Reference from activeadmin_trumbowyg
+
+#### Working test app files to use as templates:
+- `/data/activeadmin_trumbowyg/spec/internal/esbuild.config.js` - Working esbuild config
+- `/data/activeadmin_trumbowyg/spec/internal/package.json` - Package dependencies for test app
+- `/data/activeadmin_trumbowyg/spec/internal/inject-jquery.js` - jQuery injection helper
+- `/data/activeadmin_trumbowyg/spec/internal/app/js/active_admin.js` - Working JS entry point
+- **NEW**: `/data/activeadmin_trumbowyg/spec/internal/tailwind-active_admin.config.js` - Tailwind config with ActiveAdmin plugin
+- **NEW**: `/data/activeadmin_trumbowyg/spec/internal/build_activeadmin_css.js` - CSS build script
+- `/data/activeadmin_trumbowyg/spec/rails_helper.rb` - Test configuration
+- `/data/activeadmin_trumbowyg/spec/internal/config/initializers/active_admin.rb` - ActiveAdmin config
+- `/data/activeadmin_trumbowyg/spec/internal/config/initializers/assets.rb` - Asset configuration
+- `/data/activeadmin_trumbowyg/spec/internal/config/initializers/trumbowyg.rb` - Gem-specific config
+
+#### Files REMOVED from trumbowyg (security warnings):
+- ✅ `/data/activeadmin_trumbowyg/spec/internal/build_css.js` - Deleted
+- ✅ `/data/activeadmin_trumbowyg/spec/internal/tailwind.config.mjs` - Deleted
+
+#### Broken test file from searchable_select:
+- `spec/internal/config/initializers/active_admin.rb` (lines 56-63):
+  ```ruby
+  def add_searchable_select_js(content)
+    content << '<script type="text/javascript">'
+    js_file_path = File.expand_path(
+      '../../../../src/searchable_select/init.js', __dir__
+    )
+    content << File.read(js_file_path)
+    content << '</script>'
+  end
+  ```
+
+### Testing Commands
+```bash
+# Test searchable_select
+cd /data/activeadmin-searchable_select
+bundle exec rspec spec/features/inline_ajax_setting_spec.rb
+
+# Test trumbowyg (all passing)
+cd /data/activeadmin_trumbowyg
+bundle exec rspec --fail-fast
+```
+
+### Key Decisions Made
+1. **No Sprockets support** - Only Propshaft for ActiveAdmin 4
+2. **Minimal test app setup** - Remove Tailwind/CSS build complexity
+3. **Standardize on esbuild** for JavaScript in test apps
+4. **Both gems must have identical structure** for maintainability
+
+### Important Notes
+- The `src/` directory in both gems contains the actual JavaScript code
+- Test apps should use the actual NPM package (`@rocket-sensei/activeadmin_trumbowyg`) via `file:../..` in package.json
+- Icons.svg must be copied from node_modules using NPM scripts (not committed to repo)
+- The gem exports proper ES modules with `setupAutoInit()` function
+- jQuery must be made global BEFORE importing Trumbowyg
+- Both gems already have proper NPM package configuration
+- The Ruby gem parts are working, just need test app fixes
+
+### Key Changes Made to activeadmin_trumbowyg
+1. **Module Structure**: Changed from auto-initializing to exporting functions (`setupAutoInit`)
+2. **Package Reference**: Test app uses `"@rocket-sensei/activeadmin_trumbowyg": "file:../.."`
+3. **Icon Handling**: Icons copied via NPM script, not stored in repo
+4. **Build Process**: `npm run build` now includes `copy:icons` step
+
+### Version Info
+- activeadmin_trumbowyg: **4.0.4 FULLY WORKING** ✅
+  - Gem: `rs-activeadmin_trumbowyg`
+  - NPM: `@rocket-sensei/activeadmin_trumbowyg`
+  - All CSS loading tests passing (4/4)
+  - Icons served correctly from `/trumbowyg/icons.svg`
+  - CSS properly bundled with Tailwind + ActiveAdmin plugin + Trumbowyg
+  - Documentation updated
+  - CI workflow fixed to build/extract npm package (avoids vendor symlinks)
+- activeadmin-searchable_select: 4.0.5 (needs similar updates)
+  - Gem: `rs-activeadmin-searchable_select`
+  - NPM: `@rocket-sensei/activeadmin-searchable_select`
+  - Needs: Tailwind CSS build, CI workflow fix, test app setup

data/docs/guide-update-your-app.md

@@ -0,0 +1,213 @@
+# Migration Guide: Updating to rs-activeadmin-searchable_select
+
+This guide will help you migrate from the original `activeadmin-searchable_select` gem to our forked and updated version `rs-activeadmin-searchable_select`.
+
+## Why Update?
+
+Our fork provides:
+- ✅ Full ActiveAdmin 4.0 support
+- ✅ Rails 8 and Propshaft compatibility  
+- ✅ Modern JavaScript bundler support (esbuild/webpack/importmap)
+- ✅ Proper NPM package distribution under @rocket-sensei scope
+- ✅ Fixed production build issues with select2
+- ✅ Improved test suite with static ActiveAdmin registrations
+- ✅ Active maintenance and support
+
+## Migration Steps
+
+### Step 1: Update your Gemfile
+
+Replace the old gem with our fork:
+
+```ruby
+# Remove this:
+# gem 'activeadmin-searchable_select'
+
+# Add this:
+gem 'rs-activeadmin-searchable_select', '~> 4.0'
+
+# For Rails 7, also ensure you have Propshaft:
+gem 'propshaft' # Rails 8 includes this by default
+```
+
+Then run:
+```bash
+bundle install
+```
+
+### Step 2: Update JavaScript Dependencies
+
+Remove old packages and install the new ones:
+
+```bash
+# Remove old packages if present
+npm uninstall @codevise/activeadmin-searchable_select
+
+# Install new packages
+npm install @rocket-sensei/activeadmin-searchable_select jquery select2
+```
+
+### Step 3: Update JavaScript Imports
+
+Update your `app/javascript/active_admin.js`:
+
+```javascript
+import "@activeadmin/activeadmin";
+import $ from 'jquery';
+import select2 from 'select2';
+
+// Critical: Initialize select2 on jQuery (fixes production builds)
+select2($);
+window.$ = window.jQuery = $;
+
+// Import the searchable select functionality
+import '@rocket-sensei/activeadmin-searchable_select';
+```
+
+### Step 4: Add Select2 CSS
+
+Add to your ActiveAdmin stylesheet (`app/assets/stylesheets/active_admin.css` or `.scss`):
+
+```css
+/* Import Select2 styles */
+@import url('https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css');
+
+/* Optional: Custom styling for searchable selects */
+.searchable-select-input {
+  width: 100%;
+}
+
+/* Fix for ActiveAdmin form layout */
+.select2-container {
+  min-width: 50%;
+}
+```
+
+### Step 5: For Importmap Users
+
+If you're using importmap instead of esbuild, add to `config/importmap.rb`:
+
+```ruby
+pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js"
+pin "select2", to: "https://ga.jspm.io/npm:select2@4.1.0-rc.0/dist/js/select2.full.js"
+pin "@rocket-sensei/activeadmin-searchable_select", to: "@rocket-sensei--activeadmin-searchable_select.js"
+```
+
+And update your `app/javascript/active_admin.js`:
+
+```javascript
+import "@activeadmin/activeadmin";
+import jquery from "jquery";
+import select2 from "select2";
+
+// Make jQuery available globally
+window.$ = window.jQuery = jquery;
+
+// Initialize select2
+select2(jquery);
+
+// Import searchable select
+import "@rocket-sensei/activeadmin-searchable_select";
+```
+
+### Step 6: Update Your ActiveAdmin Resources
+
+The API remains the same, but ensure your resources are configured correctly:
+
+```ruby
+ActiveAdmin.register Product do
+  # For forms
+  form do |f|
+    f.inputs do
+      f.input :category, as: :searchable_select, ajax: true
+      f.input :tags, as: :searchable_select, ajax: true, multiple: true
+    end
+    f.actions
+  end
+
+  # For filters
+  filter :category, as: :searchable_select, ajax: true
+  filter :tags, as: :searchable_select, ajax: true, multiple: true
+end
+
+# Define searchable select options endpoint
+ActiveAdmin.register Category do
+  searchable_select_options(
+    scope: Category.all,
+    text_attribute: :name
+  )
+end
+```
+
+## Troubleshooting
+
+### "select2 is not a function" Error
+
+This usually happens in production when select2 isn't properly initialized. Ensure:
+
+1. jQuery is loaded before select2
+2. `select2($)` is called to initialize it on jQuery
+3. jQuery is made globally available with `window.$ = window.jQuery = $`
+
+### Styles Not Loading
+
+1. Verify the Select2 CSS import is in your stylesheet
+2. Check that your build process includes the stylesheets
+3. Clear your browser cache and restart Rails server
+
+### Ajax Options Not Loading
+
+1. Ensure `searchable_select_options` is defined in the target resource
+2. Check browser console for any JavaScript errors
+3. Verify the AJAX URLs are correct in the network tab
+
+### Multiple Select Not Working
+
+Ensure you've added `multiple: true` to both the input and the corresponding association:
+
+```ruby
+# In your model
+has_many :tags
+
+# In your ActiveAdmin resource
+f.input :tags, as: :searchable_select, ajax: true, multiple: true
+```
+
+## Version Compatibility
+
+- **Ruby**: >= 3.0
+- **Rails**: >= 7.0 (optimized for Rails 8)
+- **ActiveAdmin**: ~> 4.0.0.beta
+- **Node.js**: >= 18.0
+
+## Differences from Original Gem
+
+1. **NPM Scope**: Package is now `@rocket-sensei/activeadmin-searchable_select`
+2. **Gem Name**: Gem is now `rs-activeadmin-searchable_select`
+3. **Better Production Support**: Fixed select2 initialization issues
+4. **Rails 8 Ready**: Full support for Propshaft and modern Rails
+5. **Improved Tests**: Static ActiveAdmin registrations for better test isolation
+
+## Need Help?
+
+If you encounter issues:
+1. Check that all JavaScript packages are installed
+2. Verify your bundler configuration
+3. Clear browser cache and Rails tmp/cache
+4. Check browser console for errors
+
+For bug reports or questions, please visit:
+https://github.com/glebtv/activeadmin-searchable_select/issues
+
+## Contributing
+
+We welcome contributions! Please:
+1. Fork the repository
+2. Create a feature branch
+3. Write tests for your changes
+4. Ensure all tests pass with `bundle exec rspec`
+5. Submit a pull request
+
+## License
+
+This gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/docs/propshaft-readme.md

@@ -0,0 +1,121 @@
+# Propshaft
+
+Propshaft is an asset pipeline library for Rails. It's built for an era where bundling assets to save on HTTP connections is no longer urgent, where JavaScript and CSS are either compiled by dedicated Node.js bundlers or served directly to the browsers, and where increases in bandwidth have made the need for minification less pressing. These factors allow for a dramatically simpler and faster asset pipeline compared to previous options, like [Sprockets](https://github.com/rails/sprockets-rails).
+
+So that's what Propshaft doesn't do. Here's what it does provide:
+
+1. **Configurable load path**: You can register directories from multiple places in your app and gems, and reference assets from all of these paths as though they were one.
+1. **Digest stamping**: All assets in the load path will be copied (or compiled) in a precompilation step for production that also stamps all of them with a digest hash, so you can use long-expiry cache headers for better performance. The digested assets can be referred to through their logical path because the processing leaves a manifest file that provides a way to translate.
+1. **Development server**: There's no need to precompile the assets in development. You can refer to them via the same asset_path helpers and they'll be served by a development server.
+1. **Basic compilers**: Propshaft was explicitly not designed to provide full transpiler capabilities. You can get that better elsewhere. But it does offer a simple input->output compiler setup that by default is used to translate `url(asset)` function calls in CSS to `url(digested-asset)` instead and source mapping comments likewise.
+
+
+## Installation
+
+With Rails 8, Propshaft is the default asset pipeline for new applications. With Rails 7, you can start a new application with propshaft using `rails new myapp -a propshaft`. For existing applications, check the [upgrade guide](https://github.com/rails/propshaft/blob/main/UPGRADING.md) which contains step-by-step instructions.
+
+## Usage
+
+Propshaft makes all the assets from all the paths it's been configured with through `config.assets.paths` available for serving and will copy all of them into `public/assets` when precompiling. This is unlike Sprockets, which did not copy over assets that hadn't been explicitly included in one of the bundled assets.
+
+You can however exempt directories that have been added through the `config.assets.excluded_paths`. This is useful if you're for example using `app/assets/stylesheets` exclusively as a set of inputs to a compiler like Dart Sass for Rails, and you don't want these input files to be part of the load path. (Remember you need to add full paths, like `Rails.root.join("app/assets/stylesheets")`).
+
+These assets can be referenced through their logical path using the normal helpers like `asset_path`, `image_tag`, `javascript_include_tag`, and all the other asset helper tags. These logical references are automatically converted into digest-aware paths in production when `assets:precompile` has been run (through a JSON mapping file found in `public/assets/.manifest.json`).
+
+## Referencing digested assets in CSS and JavaScript
+
+Propshaft will automatically convert asset references in CSS to use the digested file names. So `background: url("/bg/pattern.svg")` is converted to `background: url("/assets/bg/pattern-2169cbef.svg")` before the stylesheet is served.
+
+For JavaScript, you'll have to manually trigger this transformation by using the `RAILS_ASSET_URL` pseudo-method. It's used like this:
+
+```javascript
+export default class extends Controller {
+  init() {
+    this.img = RAILS_ASSET_URL("/icons/trash.svg")
+  }
+}
+```
+
+That'll turn into:
+
+```javascript
+export default class extends Controller {
+  init() {
+    this.img = "/assets/icons/trash-54g9cbef.svg"
+  }
+}
+```
+
+## Bypassing the digest step
+
+If you need to put multiple files that refer to each other through Propshaft, like a JavaScript file and its source map, you have to digest these files in advance to retain stable file names. Propshaft looks for the specific pattern of `-[digest].digested.js` as the postfix to any asset file as an indication that the file has already been digested.
+
+## Subresource Integrity (SRI)
+
+Propshaft supports Subresource Integrity (SRI) to help protect against malicious modifications of assets. SRI allows browsers to verify that resources fetched from CDNs or other sources haven't been tampered with by checking cryptographic hashes.
+
+### Enabling SRI
+
+To enable SRI support, configure the hash algorithm in your Rails application:
+
+```ruby
+config.assets.integrity_hash_algorithm = "sha384"
+```
+
+Valid hash algorithms include:
+- `"sha256"` - SHA-256 (most common)
+- `"sha384"` - SHA-384 (recommended for enhanced security)
+- `"sha512"` - SHA-512 (strongest)
+
+### Using SRI in your views
+
+Once configured, you can enable SRI by passing the `integrity: true` option to asset helpers:
+
+```erb
+<%= stylesheet_link_tag "application", integrity: true %>
+<%= javascript_include_tag "application", integrity: true %>
+```
+
+This generates HTML with integrity hashes:
+
+```html
+<link rel="stylesheet" href="/assets/application-abc123.css"
+      integrity="sha384-xyz789...">
+<script src="/assets/application-def456.js"
+        integrity="sha384-uvw012..."></script>
+```
+
+**Important**: SRI only works in secure contexts (HTTPS) or during local development. The integrity hashes are automatically omitted when serving over HTTP in production for security reasons.
+
+### Bulk stylesheet inclusion with SRI
+
+Propshaft extends `stylesheet_link_tag` with special symbols for bulk inclusion:
+
+```erb
+<%= stylesheet_link_tag :all, integrity: true %>  <!-- All stylesheets -->
+<%= stylesheet_link_tag :app, integrity: true %>  <!-- Only app/assets stylesheets -->
+```
+
+## Improving performance in development
+
+Before every request Propshaft checks if any asset was updated to decide if a cache sweep is needed. This verification is done using the application's configured file watcher which, by default, is `ActiveSupport::FileUpdateChecker`.
+
+If you have a lot of assets in your project, you can improve performance by adding the `listen` gem to the development group in your Gemfile, and this line to the `development.rb` environment file:
+
+```ruby
+config.file_watcher = ActiveSupport::EventedFileUpdateChecker
+```
+
+
+## Migrating from Sprockets
+
+Propshaft does a lot less than Sprockets, by design, so it might well be a fair bit of work to migrate if it's even desirable. This is particularly true if you rely on Sprockets to provide any form of transpiling, like CoffeeScript or Sass, or if you rely on any gems that do. You'll need to either stop transpiling or use a Node-based transpiler, like those in [`jsbundling-rails`](https://github.com/rails/jsbundling-rails) and [`cssbundling-rails`](https://github.com/rails/cssbundling-rails).
+
+On the other hand, if you're already bundling JavaScript and CSS through a Node-based setup, then Propshaft is going to slot in easily. Since you don't need another tool to bundle or transpile. Just to digest and serve.
+
+But for greenfield apps using the default import-map approach, Propshaft can also work well, if you're able to deal with vanilla CSS.
+
+
+## License
+
+Propshaft is released under the [MIT License](https://opensource.org/licenses/MIT).