gdk-toogle 0.7.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: fc23503c85ec958b0051f3dd65ae20430ef7260df40441c6bc887b5caa1b3502
+  data.tar.gz: f88f8017af1429e311e216cab810197c4d4b5d9feafa327633dda26e84a70739
+SHA512:
+  metadata.gz: b99d1e496643408bfaee5ff88409e5136fb89fa895b36b8f94ee08210a4d9ae03fe578d4699e5552672fceb345bb9d83c82ee557147348057d712b73e7803ce5
+  data.tar.gz: d24eaa1a2864ab9734d242843f7fc5cda999946fe361fc13d3a023d7c312d9dded7fa78c51a02094a231c171a5e4f92bb972bb1474e254fe24e5c62cd3e70c27

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2023 Thomas Hutterer
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,34 @@
+# Toogle
+
+A Rails engine web-UI to quickly toggle feature flags in GDK.
+
+## Usage
+
+This gem was written specifically for the GitLab codebase. It won't work in any other Rails app.
+
+### Usage within the GitLab Development Kit
+
+This gem is still an experiment and not yet part of our `Gemfile`. So for now, to try out this gem, take the following steps:
+
+- `git clone` this repository to your machine.
+- Add `gem 'toogle', path: 'local_toogle_path_here'` to the Gemfile and `bundle`.
+- Add `mount Toogle::Engine, at: '/rails/toogle'` to `config/routes/development.rb`.
+- Restart the rails server to pick up the new route: `gdk restart rails-web`
+
+The UI is now availabe at http://gdk.test:3000/rails/toogle.
+
+## Contributing
+
+Everyone can contribute.
+
+### How to run tests
+
+This is the default rake task. Just run `rake` with no arguments.
+
+The system specs in `spec/system` are configured to use Firefox as headless browser.
+
+**Tip:** If you don't have Firefox installed on your machine, or if you are on Ubuntu and have Firefox installed only via Snap, you can switch to Chrome by changing the `driven_by` to `:selenium_chrome_headless` in `spec/rails_helper.rb`.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,16 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rspec/core"
+require "rspec/core/rake_task"
+
+desc "Run all specs in spec directory"
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/app/assets/config/toogle_manifest.js

@@ -0,0 +1 @@
+//= link toogle/application.css

data/app/assets/stylesheets/toogle/application.css

@@ -0,0 +1,22 @@
+@import "variables";
+
+@import "elements";
+@import "layout";
+@import "utilities";
+
+@import "components/card";
+@import "components/scrollbox";
+@import "components/toggle";
+
+@import "dark-mode";
+
+[x-cloak] {
+  display: none !important;
+}
+
+#notice {
+  background-color: #fc6d26;
+  color: white;
+  padding: 0.5rem;
+  border-radius: 5px;
+}

data/app/assets/stylesheets/toogle/components/card.css

@@ -0,0 +1,6 @@
+.card {
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  padding: 2rem;
+  box-shadow: 0 0.5rem 1rem #888;
+}

data/app/assets/stylesheets/toogle/components/scrollbox.css

@@ -0,0 +1,13 @@
+.scrollbox {
+  max-height: 20ch;
+  overflow: auto;
+  padding: 1em 0;
+  word-break: break-all;
+
+  background-color: white;
+  border: 2px solid #444;
+
+  li:hover {
+    background-color: rgba(153, 153, 153, 0.1);
+  }
+}

data/app/assets/stylesheets/toogle/components/toggle.css

@@ -0,0 +1,70 @@
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+  margin: 4px;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .handle {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: 0.2s;
+
+    &:before {
+      position: absolute;
+      content: "";
+      height: 26px;
+      width: 26px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      transition: 0.2s;
+    }
+
+    &.round {
+      border-radius: 34px;
+    }
+
+    &.round:before {
+      border-radius: 50%;
+    }
+  }
+
+  input:checked + .handle {
+    background-color: var(--color-primary);
+  }
+
+  input:focus + .handle {
+    outline: 4px solid var(--color-primary);
+  }
+
+  input:checked + .handle:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+
+  input:disabled + .handle:before {
+    background-color: #ddd;
+    content: "N/A";
+    text-align: center;
+    color: white;
+    font-size: x-small;
+    line-height: 26px;
+  }
+
+  input:disabled + .handle {
+    cursor: not-allowed;
+  }
+}

data/app/assets/stylesheets/toogle/dark-mode.css

@@ -0,0 +1,25 @@
+@media (prefers-color-scheme: dark) {
+  html:not(.light-mode) {
+    --page-bg: #181822;
+
+    color: #eee;
+
+    a {
+      color: #ddd;
+    }
+
+    button,
+    dialog {
+      color: #eee;
+    }
+
+    .card {
+      background-color: #282833;
+      box-shadow: 0 0.5rem 1rem #111;
+    }
+
+    .scrollbox {
+      background-color: #444;
+    }
+  }
+}

data/app/assets/stylesheets/toogle/elements.css

@@ -0,0 +1,121 @@
+html {
+  --page-bg: #ddd;
+
+  background-color: var(--page-bg);
+  transition: 0.2s;
+}
+
+body {
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+
+  > header {
+    position: sticky;
+    top: 0;
+    background-color: var(--page-bg);
+    transition: 0.2s;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  margin: 0;
+}
+
+a {
+  color: #222;
+  font-weight: bold;
+  text-decoration: none;
+  padding: 2px;
+  border-radius: 2px;
+  transition: outline 0.2s;
+
+  &:focus {
+    outline: 4px solid var(--color-primary);
+  }
+}
+
+input[type="submit"]:not(.small) {
+  font-size: large;
+  padding: 0.25rem;
+}
+
+input[type="search"] {
+  margin: 0.25rem 0;
+  padding: 0.75rem;
+  font-family: monospace;
+  border-radius: 0.5rem;
+
+  &.large {
+    font-size: large;
+  }
+}
+
+hr {
+  margin: 1.5rem 0;
+}
+
+code {
+  font-size: 1.25em;
+}
+
+button {
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  border-radius: 0.125rem;
+  padding: 0.5rem;
+  min-width: 1rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: large;
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-primary);
+    color: white;
+  }
+
+  &:focus {
+    outline: 4px solid var(--color-primary);
+    opacity: 1 !important;
+  }
+
+  > svg + span {
+    margin-left: 0.25em;
+  }
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+
+  &:not(:first-child) {
+    margin-top: 1rem;
+  }
+
+  li {
+    list-style-type: none;
+  }
+}
+
+dialog {
+  background-color: transparent;
+  border: none;
+  outline: none;
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  > .card {
+    margin: 0;
+  }
+}

data/app/assets/stylesheets/toogle/layout.css

@@ -0,0 +1,74 @@
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  margin: 0;
+
+  > header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+
+    padding: 1rem;
+    z-index: 2;
+
+    a,
+    span {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-weight: bold;
+    }
+  }
+
+  > main {
+    display: flex;
+    flex-direction: column-reverse;
+    width: 100ch;
+    max-width: 95%;
+    margin: auto;
+    gap: 3rem;
+    padding: 2rem 0;
+    flex-grow: 1;
+  }
+
+  > footer {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+    gap: 2em;
+    padding: 1rem;
+    font-size: smaller;
+  }
+}
+
+li.feature-toggle {
+  display: flex;
+  flex-direction: column;
+  padding: 0.125rem;
+  border-radius: 2px;
+
+  .row {
+    align-items: center;
+    flex-grow: 1;
+
+    button {
+      opacity: 0;
+      transition: 0.2s;
+    }
+  }
+
+  > .col {
+    padding: 0.5rem;
+  }
+
+  &:hover {
+    background-color: rgba(153, 153, 153, 0.1);
+
+    button {
+      opacity: 1;
+    }
+  }
+}

data/app/assets/stylesheets/toogle/utilities.css

@@ -0,0 +1,37 @@
+.d-flex {
+  display: flex;
+  flex-wrap: wrap;
+
+  &.center {
+    justify-content: center;
+    align-items: center;
+  }
+
+  &.row {
+    flex-direction: row;
+  }
+
+  &.col {
+    flex-direction: column;
+  }
+
+  &.nowrap {
+    flex-wrap: nowrap;
+  }
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.stretch {
+  align-self: stretch;
+}
+
+.gap {
+  gap: 1em;
+}
+
+.w-100 {
+  width: 100%;
+}

data/app/assets/stylesheets/toogle/variables.css

@@ -0,0 +1,3 @@
+:root {
+  --color-primary: #fca326;
+}

data/app/controllers/toogle/application_controller.rb

@@ -0,0 +1,20 @@
+module Toogle
+  class ApplicationController < ActionController::Base
+    # In order for Alpine to be able to execute plain strings from HTML attributes as JavaScript expressions,
+    # for example x-on:click="console.log()", it needs to rely on utilities that violate the "unsafe-eval"
+    #  content security policy.
+    content_security_policy false, if: -> { Rails.env.development? }
+
+    # Prevent all browser caching. Otherwise a cached version of a page might show the wrong toggle state.
+    # Also, it really doesn't matter on localhost :)
+    before_action :set_cache_headers
+
+    private
+
+    def set_cache_headers
+      response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
+      response.headers["Pragma"] = "no-cache"
+      response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"
+    end
+  end
+end

data/app/controllers/toogle/definitions_controller.rb

@@ -0,0 +1,10 @@
+module Toogle
+  class DefinitionsController < ApplicationController
+    # This controller is only used to fetch the long list of feature definitions async.
+    layout false
+
+    def index
+      @definitions = Toogle::Definition.unchanged
+    end
+  end
+end

data/app/controllers/toogle/features_controller.rb

@@ -0,0 +1,41 @@
+module Toogle
+  class FeaturesController < ApplicationController
+    def index
+      @features = Toogle::Feature.all
+    end
+
+    def show
+      @definition = Toogle::Definition.find(params[:id])
+      if @definition.nil?
+        flash[:notice] = "No feature defintion with name \"#{params[:id]}\" found."
+      end
+      index
+      render "index"
+    end
+
+    def update
+      id = params[:id].to_sym
+
+      if params[:state] == "enabled"
+        ::Feature.enable(id)
+      elsif params[:state] == "disabled"
+        ::Feature.disable(id)
+      end
+
+      respond_to do |format|
+        format.html do
+          redirect_to features_url
+        end
+
+        format.json do
+          head :ok
+        end
+      end
+    end
+
+    def destroy
+      ::Feature.remove(params[:id])
+      redirect_to features_url, status: :see_other
+    end
+  end
+end

data/app/models/toogle/definition.rb

@@ -0,0 +1,27 @@
+# A simple wrapper around GitLab's Feature:Definition class for easier use and testing.
+
+module Toogle
+  class Definition
+    attr_accessor :name, :default_enabled
+
+    def self.all
+      ::Feature::Definition.definitions.map do |definition|
+        new(name: definition[0].to_s, default_enabled: definition[1].default_enabled)
+      end
+    end
+
+    def self.unchanged
+      changed_features = Toogle::Feature.all.map(&:name)
+      all.reject { |definition| changed_features.include?(definition.name) }
+    end
+
+    def self.find(name)
+      all.find { |definition| definition.name == name }
+    end
+
+    def initialize(name:, default_enabled:)
+      @name = name
+      @default_enabled = default_enabled
+    end
+  end
+end

data/app/models/toogle/feature.rb

@@ -0,0 +1,31 @@
+# A simple wrapper around GitLab's Feature class for easier use and testing.
+
+module Toogle
+  class Feature
+    attr_accessor :name, :state
+
+    def self.all
+      definitions = Definition.all
+
+      Flipper::Adapters::ActiveRecord.new(
+        feature_class: ::Feature::FlipperFeature,
+        gate_class: ::Feature::FlipperGate
+      ).get_all.map do |feature_name, feature_values|
+        feature_exists_on_current_branch = definitions.any?{ |d| d.name == feature_name }
+        feature_state = if feature_exists_on_current_branch
+          feature_values[:boolean] ? :enabled: :disabled
+        else
+          # This usually happens when switching back from an unmerged feature
+          # branch that introduces a new flag, or when a flag got deleted.
+          :unknown
+        end
+        new(name: feature_name, state: feature_state)
+      end
+    end
+
+    def initialize(name:, state:)
+      @name = name
+      @state = state
+    end
+  end
+end

data/app/views/layouts/toogle/application.html.haml

@@ -0,0 +1,53 @@
+!!!
+%html{ class: ("light-mode" if request.cookies["toogle-dark"] == "false") }
+  %head
+    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
+    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
+    %title Feature flags
+    = csrf_meta_tags
+    = csp_meta_tag
+    = stylesheet_link_tag "toogle/application", media: "all"
+    %script(defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js")
+    %script(defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js")
+  %body
+    %header
+      %nav.d-flex.gap
+        = link_to main_app.root_path do
+          = render partial: "shared/logo", formats: :svg
+        %span ›
+        = link_to_unless_current "Feature flags", features_path do
+          %span Feature flags
+        - if @feature
+          %span ›
+          %span= @feature.name
+
+      %button(x-data="darkModeSwitcher" x-bind="button")
+        %svg(x-show="isDark" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+          -# 🔆
+          %circle(cx="12" cy="12" r="5")
+          %line(x1="12" y1="1" x2="12" y2="3")
+          %line(x1="12" y1="21" x2="12" y2="23")
+          %line(x1="4.22" y1="4.22" x2="5.64" y2="5.64")
+          %line(x1="18.36" y1="18.36" x2="19.78" y2="19.78")
+          %line(x1="1" y1="12" x2="3" y2="12")
+          %line(x1="21" y1="12" x2="23" y2="12")
+          %line(x1="4.22" y1="19.78" x2="5.64" y2="18.36")
+          %line(x1="18.36" y1="5.64" x2="19.78" y2="4.22")
+        %svg(x-show="!isDark" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+          -# 🌙
+          %path(d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z")
+
+    %main
+      - if notice.present?
+        #notice.d-flex.row.center.gap
+          %svg(width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+            %circle(cx="12" cy="12" r="10")
+            %line(x1="12" y1="16" x2="12" y2="12")
+            %line(x1="12" y1="8" x2="12.01" y2="8")
+          %span.grow= notice
+      = yield
+    %footer
+      %a(href="https://gitlab.com/thutterer/toogle" target="_blank")
+        = Toogle::VERSION
+
+    = render "alpine_components"

data/app/views/toogle/application/_alpine_components.html.haml

@@ -0,0 +1,56 @@
+:javascript
+  document.addEventListener("alpine:init", () => {
+    Alpine.data("toggle", (featureName, isChecked) => ({
+      name: featureName,
+      checked: isChecked,
+
+      input: {
+        ['@change']() {
+          fetch(`./${this.name}.json`, {
+            method: "PUT",
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({state: this.checked ? 'disabled' : 'enabled'})
+          }).then(() => {
+            // Always reload the page after change as a lazy way to move newly
+            // enabled feature flags into the top section.
+            // TODO: Either make this a classic form element or go full Alpine.
+            window.location = '#{features_url}'
+          })
+        },
+      },
+    }));
+
+    Alpine.data("darkModeSwitcher", () => ({
+      isDark: undefined,
+
+      init() {
+        const cookieValue = this.getCookieValue()
+        if (cookieValue) {
+          this.isDark = cookieValue === "true"
+        } else {
+          this.isDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+        }
+      },
+
+      getCookieValue() {
+        return document.cookie.match('(^|;)\\s*' + 'toogle-dark' + '\\s*=\\s*([^;]+)')?.pop() || ''
+      },
+
+      button: {
+        ['@click']() {
+          this.isDark = !this.isDark
+          document.cookie = `toogle-dark=${this.isDark}; SameSite=Strict`
+          if(this.isDark) {
+            document.documentElement.classList.remove('light-mode');
+          } else {
+            document.documentElement.classList.add('light-mode');
+          }
+        },
+        ['x-bind:title']() {
+          return `Switch to ${this.isDark ? 'Light Mode' : 'Dark Mode'}`
+        }
+      },
+    }));
+  });

data/app/views/toogle/definitions/index.html.haml

@@ -0,0 +1,9 @@
+%ul.scrollbox
+  - @definitions.each do |definition|
+    - name = definition.name
+    - enabled = definition.default_enabled
+    %li.d-flex.center.row.nowrap(x-show="$el.textContent.includes(query) || query == ''")
+      %label.toggle(x-data="toggle('#{name}', #{enabled})")
+        %input(type="checkbox" x-bind="input" x-model="checked"){checked: enabled}
+        %span.handle.round(:title="checked ? 'Enabled by default. Click to disable.' : 'Disabled by default. Click to enable.'")
+      %code.grow= name

data/app/views/toogle/features/_dialog.html.haml

@@ -0,0 +1,18 @@
+%dialog(x-ref="dialog" x-data="{enable: #{@definition.present?}, feature: '#{@definition&.name}', isAlreadyEnabled: #{@definition && @features.select {|f| f.state == :enabled }.map(&:name).include?(@definition.name) || false}}" x-init="if(enable) $refs.dialog.showModal()")
+  .card{"x-on:click.outside": "$refs.dialog.close()"}
+    %header
+      %h2
+        %label.toggle(x-data="toggle(feature, isAlreadyEnabled)")
+          %input(type="checkbox" x-bind="input" x-model="checked")
+          %span.handle.round
+
+        %code(x-text="feature")
+    %template(x-if="isAlreadyEnabled")
+      %main
+        %p
+          This feature is already enabled.
+          Click the toggle to disable it.
+    %template(x-if="!isAlreadyEnabled")
+      %main
+        %p
+          Click the toggle to enable this feature.

data/app/views/toogle/features/_remove.html.haml

@@ -0,0 +1,4 @@
+= button_to feature_path(feature.name), method: :delete, title: "Forget this setting and use default" do
+  %svg(xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+    %line(x1="18" y1="6" x2="6" y2="18")
+    %line(x1="6" y1="6" x2="18" y2="18")

data/app/views/toogle/features/_toggle.html.haml

@@ -0,0 +1,8 @@
+- if feature.state == :unknown
+  %label.toggle(title="This feature does not exist on the current branch.")
+    %input(type="checkbox" disabled){name: feature.name}
+    %span.handle.round
+- else
+  %label.toggle(x-data="toggle('#{feature.name}', #{feature.state == :enabled})")
+    %input(type="checkbox" x-bind="input" x-model="checked"){checked: feature.state == :enabled, name: feature.name}
+    %span.handle.round(:title="checked ? 'Enabled. Click to disable.' : 'Disabled. Click to enable.'")

data/app/views/toogle/features/index.html.haml

@@ -0,0 +1,51 @@
+.grow
+  .card
+    %h3 My feature flags
+    %small These features already use custom settings in this GDK.
+
+    - if @features.any?
+      %ul
+        - @features.each do |feature|
+          %li.feature-toggle(x-data="{ showMore: false }")
+            .d-flex.row
+              = render "toggle", feature: feature
+
+              %code.grow= feature.name
+
+              %button(title="Show Share URL" x-on:click="showMore = !showMore")
+                %svg(xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+                  %path(d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8")
+                  %polyline(points="16 6 12 2 8 6")
+                  %line(x1="12" y1="2" x2="12" y2="15")
+
+              = render "remove", feature: feature
+
+            .d-flex.col(x-show="showMore" x-data="{text: '#{request.url}#{feature.name}'}"){'@click.outside' => 'showMore = false'}
+              %small Share this URL with MR reviewers.
+              .d-flex.row
+                %input.grow(x-ref="copyText" x-model="text" type="text" readonly="readonly")
+                %button(x-on:click="$refs.copyText.select(); document.execCommand('copy');") Copy
+    - else
+      %p No active feature flags in this GDK yet.
+
+.grow.d-flex
+  .card.grow(style="align-self: center;")
+    %h3 Search and toggle feature flags
+    .d-flex.col{
+      "x-data": "{query: '', show: false}",
+      "@click.outside": 'show = false'}
+      %input.large.w-100#search{
+        "type": "search",
+        "x-model.debounce.400ms": "query",
+        "x-ref": "search",
+        "x-on:focus": "show = true"}
+      .d-flex.col.stretch{
+        "x-show": "show",
+        "x-anchor.bottom-start.offset.5" => "$refs.search",
+        "x-transition": nil}
+        .grow{
+          "data-url": definitions_path,
+          "x-data": "{}",
+          "x-init": "$el.innerHTML = await (await fetch($el.dataset.url)).text()"}
+
+= render "dialog"

data/config/routes.rb

@@ -0,0 +1,6 @@
+Toogle::Engine.routes.draw do
+  resources :definitions, only: %i[index]
+
+  # Keep this line last as it matches any URL
+  resources :features, only: %i[index show update destroy], path: "/"
+end

data/lib/toogle/engine.rb

@@ -0,0 +1,11 @@
+module Toogle
+  class Engine < ::Rails::Engine
+    isolate_namespace Toogle
+
+    config.generators do |g|
+      g.test_framework :rspec
+      g.assets false
+      g.helper false
+    end
+  end
+end

data/lib/toogle/version.rb

@@ -0,0 +1,3 @@
+module Toogle
+  VERSION = "0.7.0"
+end

data/lib/toogle.rb

@@ -0,0 +1,5 @@
+require "toogle/version"
+require "toogle/engine"
+
+module Toogle
+end

metadata

@@ -0,0 +1,147 @@
+--- !ruby/object:Gem::Specification
+name: gdk-toogle
+version: !ruby/object:Gem::Version
+  version: 0.7.0
+platform: ruby
+authors:
+- Thomas Hutterer
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2024-03-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.4.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 7.0.4.2
+- !ruby/object:Gem::Dependency
+  name: haml
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: capybara
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: selenium-webdriver
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Toogle is a Rails engine to toggle feature flags in GitLab development
+  environments.
+email:
+- thutterer@gitlab.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/toogle_manifest.js
+- app/assets/stylesheets/toogle/application.css
+- app/assets/stylesheets/toogle/components/card.css
+- app/assets/stylesheets/toogle/components/scrollbox.css
+- app/assets/stylesheets/toogle/components/toggle.css
+- app/assets/stylesheets/toogle/dark-mode.css
+- app/assets/stylesheets/toogle/elements.css
+- app/assets/stylesheets/toogle/layout.css
+- app/assets/stylesheets/toogle/utilities.css
+- app/assets/stylesheets/toogle/variables.css
+- app/controllers/toogle/application_controller.rb
+- app/controllers/toogle/definitions_controller.rb
+- app/controllers/toogle/features_controller.rb
+- app/models/toogle/definition.rb
+- app/models/toogle/feature.rb
+- app/views/layouts/toogle/application.html.haml
+- app/views/toogle/application/_alpine_components.html.haml
+- app/views/toogle/definitions/index.html.haml
+- app/views/toogle/features/_dialog.html.haml
+- app/views/toogle/features/_remove.html.haml
+- app/views/toogle/features/_toggle.html.haml
+- app/views/toogle/features/index.html.haml
+- config/routes.rb
+- lib/toogle.rb
+- lib/toogle/engine.rb
+- lib/toogle/version.rb
+homepage: https://gitlab.com/thutterer/toogle
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://gitlab.com/thutterer/toogle
+  source_code_uri: https://gitlab.com/thutterer/toogle
+  changelog_uri: https://gitlab.com/thutterer/toogle
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.4.10
+signing_key: 
+specification_version: 4
+summary: Toogle toggles feature flags
+test_files: []