gdk-toogle 0.9.5 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 126d3207f78acad2e5a2af3959117efd93a9a6b210187afafb4b4b69e1db33b9
-  data.tar.gz: 26b6411779359a408db3f218e3e9d71d5f33538277c9cf276183c8756c63ede8
+  metadata.gz: 5b7fb4c9b37ce9f5712cc5635ff39bea2b3745179ea554dbe4b941f2a9472cab
+  data.tar.gz: 57a6c432b93d5dc0e88c52f46c653ca26338638f99f866c57e56dc5540a21692
 SHA512:
-  metadata.gz: 19cd5ab3ca2ecf53b0f4712ada95810c468a37e963d70cf726081dacf6797ce2cf63d9cc193c79d924a658e7d5effcb4042f1e5cc0f0210a11b4cc077a45b04a
-  data.tar.gz: 9f88ab74e9ed65a6ccdc031378d59b3310b52f2cdd0a8703d58f837cf7c357f9f2679b754fb525c99c1e7d934e81ef10e1c775f627ecad8c13da108b6aece209
+  metadata.gz: da4f86f837651e78dc12c7c61e2563cb8e099ff5a6a454e00226728906427243649190743cc36b46bcac34967551542afe8da58f5f5a35e5c6fd834412d434e4
+  data.tar.gz: 807b565d41e6f131a0811fb7e4d980f1c5a0a5ad5a61c892e81f3c9e6d4c2c614fe269bfadf8087465467deca63d3297080366ad1827b4abd302a09c5fb30e21

data/README.md

@@ -4,23 +4,76 @@ 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.
+This gem was written specifically for the GitLab codebase. It relies on
+GitLab's `Feature` classes, so mounting it in any other Rails app won't work
+(for developing Toogle itself there is a standalone dummy app, see below).
 
 ### Usage within the GitLab Development Kit
 
-The UI is availabe at http://gdk.test:3000/rails/features.
+The UI is available at http://gdk.test:3000/rails/features.
 
 ## Contributing
 
-Everyone can contribute.
+Everyone can contribute. Open issues and merge requests at
+https://gitlab.com/thutterer/toogle. Please make sure `rake` (specs and
+linter) passes before submitting.
 
-### How to run tests
+There is an `AGENTS.md` with the conventions and architecture notes that
+keep this codebase simple — worth a read, and keep it accurate when you
+change things.
 
-This is the default rake task. Just run `rake` with no arguments.
+### How to run it standalone
 
-The system specs in `spec/system` are configured to use Firefox as headless browser.
+The dummy app used for testing includes fake in-memory versions of GitLab's
+`Feature` and Flipper classes (see `spec/dummy/app/models/`), so you can
+develop the engine without a GDK:
 
-**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`.
+```sh
+cd spec/dummy
+bin/rails server
+```
+
+Then open http://localhost:3000/toogle. Toggled state lives in memory and
+resets on restart.
+
+To test your changes inside a real GDK, point GitLab's `Gemfile` at your
+local checkout:
+
+```ruby
+gem 'gdk-toogle', path: '~/Code/toogle', require: 'toogle'
+```
+
+### How to run tests and linting
+
+Run `rake` to run both the specs and the [standard](https://github.com/standardrb/standard)
+linter. They are also available separately as `rake spec` and `rake standard`
+(use `rake standard:fix` to autoformat).
+
+To lint automatically before each commit, enable the bundled git hook once:
+
+```sh
+git config core.hooksPath .githooks
+```
+
+The system specs in `spec/system` use headless Firefox by default. Set
+`CAPYBARA_DRIVER` to any registered Capybara driver to switch, e.g. if you
+don't have Firefox or only a Snap-installed one (incompatible with
+geckodriver):
+
+```sh
+CAPYBARA_DRIVER=selenium_chrome_headless bundle exec rspec
+```
+
+### How to cut a release
+
+1. Bump `Toogle::VERSION` in `lib/toogle/version.rb`.
+2. Add an entry to `CHANGELOG.md`.
+3. Commit, then tag: `git tag vX.Y.Z && git push --tags`.
+4. Build and push the gem: `rake build` then `gem push pkg/gdk-toogle-X.Y.Z.gem`.
+5. Bump the version constraint in GitLab's `Gemfile` to pick it up.
+
+Keep Ruby and gem versions at or below what GitLab itself runs (see
+`AGENTS.md`).
 
 ## Tech stack
 

data/Rakefile

@@ -13,4 +13,7 @@ require "rspec/core/rake_task"
 desc "Run all specs in spec directory"
 RSpec::Core::RakeTask.new(:spec)
 
-task default: :spec
+# Provides rake tasks `standard` and `standard:fix`
+require "standard/rake"
+
+task default: %i[spec standard]

data/app/assets/javascript/toogle/application.js

@@ -1,10 +1,41 @@
 document.addEventListener("alpine:init", () => {
-  Alpine.data("features", (indexUrl) => ({
+  Alpine.store("flash", {
+    message: "",
+
+    show(message) {
+      this.message = message;
+    },
+  });
+
+  const showFetchError = (error) => {
+    console.error("Error fetching data:", error);
+    Alpine.store("flash").show(
+      "Could not reach the server. Is your GDK running?"
+    );
+  };
+
+  const csrfToken = () =>
+    document.head.querySelector("meta[name=csrf-token]")?.content;
+
+  // Cap how many Defaults render at once. This is a search tool — the wanted
+  // flag is reachable by typing — so we never build the full ~700+ row DOM.
+  const MAX_DEFAULTS_SHOWN = 50;
+
+  Alpine.data("flags", (featuresUrl, definitionsUrl, shareName = "") => ({
     features: [],
-    indexUrl,
+    definitions: [],
+    query: "",
+    lastMoved: "",
+    moving: "",
+    selectedName: "",
+    max: MAX_DEFAULTS_SHOWN,
+    featuresUrl: featuresUrl.replace(/\/$/, ""),
+    definitionsUrl,
 
     init() {
-      fetch(this.indexUrl, {
+      const featuresLoaded = this.fetchFeatures();
+
+      const definitionsLoaded = fetch(this.definitionsUrl, {
         method: "GET",
         headers: {
           Accept: "application/json",
@@ -12,70 +43,174 @@ document.addEventListener("alpine:init", () => {
       })
         .then((response) => response.json())
         .then((data) => {
-          this.features = data;
+          this.definitions = data;
         })
-        .catch((error) => console.error("Error fetching data:", error));
+        .catch(showFetchError);
+
+      if (shareName) {
+        Promise.all([featuresLoaded, definitionsLoaded]).then(() =>
+          this.openDetails(shareName)
+        );
+      }
     },
 
-    toggleFeature(feature) {
-      const newState = feature.state === "enabled" ? "disabled" : "enabled";
-      fetch(`${this.indexUrl}/${feature.name}`, {
-        method: "PUT",
+    openDetails(name) {
+      this.selectedName = name;
+      history.replaceState({}, "", `${this.featuresUrl}/${name}`);
+      this.$refs.dialog.showModal();
+    },
+
+    closeDetails() {
+      this.selectedName = "";
+      history.replaceState({}, "", `${this.featuresUrl}/`);
+    },
+
+    // The dialog's subject, looked up live so it stays in sync after toggles.
+    selected() {
+      const feature = this.features.find((f) => f.name === this.selectedName);
+      if (feature) {
+        return {
+          state: feature.state,
+          definition: feature.definition,
+        };
+      }
+
+      const definition = this.definitions.find(
+        (d) => d.name === this.selectedName
+      );
+      if (definition) {
+        return {
+          state: definition.default_enabled ? "enabled" : "disabled",
+          definition,
+        };
+      }
+
+      return null;
+    },
+
+    toggleSelected() {
+      const feature = this.features.find((f) => f.name === this.selectedName);
+
+      if (feature) {
+        this.toggleFeature(feature);
+      } else {
+        this.toggleDefault(this.selected().definition);
+      }
+    },
+
+    fetchFeatures(movedName = "") {
+      return fetch(this.featuresUrl, {
+        method: "GET",
         headers: {
           Accept: "application/json",
-          "Content-Type": "application/json",
         },
-        body: JSON.stringify({
-          state: newState,
-        }),
-      }).then(() => {
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          if (movedName) {
+            this.animated(() => {
+              this.features = data;
+            }, movedName);
+          } else {
+            // Not animated: the initial load should not "fly in" rows.
+            this.features = data;
+          }
+        })
+        .catch(showFetchError);
+    },
+
+    // Animates the layout change, e.g. a row moving between the sections.
+    // Only the moving row gets a view-transition-name (see the view), so the
+    // browser snapshots one row, not all ~700 — keeping toggles fast no
+    // matter how many flags exist. The moved row then gets a short "shine".
+    async animated(applyChange, movedName = "") {
+      if (!document.startViewTransition || !movedName) return applyChange();
+
+      // Name the moving row before the browser snapshots the old state.
+      this.moving = movedName;
+      await this.$nextTick();
+
+      const transition = document.startViewTransition(() => {
+        applyChange();
+        return this.$nextTick();
+      });
+
+      await transition.finished.catch(() => {});
+      this.moving = "";
+      this.lastMoved = movedName;
+      setTimeout(() => {
+        if (this.lastMoved === movedName) this.lastMoved = "";
+      }, 1200);
+    },
+
+    filteredFeatures() {
+      return this.features.filter((f) => f.name.includes(this.query.trim()));
+    },
+
+    // All definitions matching the query, minus those already customized.
+    matchingDefinitions() {
+      const customized = this.features.map((f) => f.name);
+      return this.definitions.filter(
+        (d) =>
+          d.name.includes(this.query.trim()) && !customized.includes(d.name)
+      );
+    },
+
+    // Only the rows we actually render (capped); see MAX_DEFAULTS_SHOWN.
+    filteredDefinitions() {
+      return this.matchingDefinitions().slice(0, this.max);
+    },
+
+    defaultsCapped() {
+      return this.matchingDefinitions().length > this.max;
+    },
+
+    toggleFeature(feature) {
+      const newState = feature.state === "enabled" ? "disabled" : "enabled";
+
+      this.putState(feature.name, newState).then(() => {
         this.features = this.features.map((f) => {
           return f === feature ? { ...f, state: newState } : f;
         });
       });
     },
 
-    deleteFeature(featureName) {
-      const csrfToken = document.head.querySelector(
-        "meta[name=csrf-token]"
-      )?.content;
+    toggleDefault(definition) {
+      const newState = definition.default_enabled ? "disabled" : "enabled";
 
-      fetch(`${this.indexUrl}/${featureName}`, {
-        method: "DELETE",
+      this.putState(definition.name, newState).then(() =>
+        this.fetchFeatures(definition.name)
+      );
+    },
+
+    putState(featureName, state) {
+      return fetch(`${this.featuresUrl}/${featureName}`, {
+        method: "PUT",
         headers: {
           Accept: "application/json",
-          "X-CSRF-Token": csrfToken,
+          "Content-Type": "application/json",
+          "X-CSRF-Token": csrfToken(),
         },
-      }).then(() => {
-        this.features = this.features.filter((f) => f.name !== featureName);
-      });
+        body: JSON.stringify({ state }),
+      }).catch(showFetchError);
     },
-  }));
 
-  Alpine.data("toggle", (featureName, isChecked, indexUrl) => ({
-    name: featureName,
-    checked: isChecked,
-    indexUrl,
-
-    input: {
-      ["@change"]() {
-        const csrfToken = document.head.querySelector(
-          "meta[name=csrf-token]"
-        )?.content;
-
-        fetch(`${this.indexUrl}/${this.name}`, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-            "X-CSRF-Token": csrfToken,
-          },
-          body: JSON.stringify({
-            state: this.checked ? "disabled" : "enabled",
-          }),
-        }).then(() => {
-          window.location = this.indexUrl;
-        });
-      },
+    deleteFeature(featureName) {
+      fetch(`${this.featuresUrl}/${featureName}`, {
+        method: "DELETE",
+        headers: {
+          Accept: "application/json",
+          "X-CSRF-Token": csrfToken(),
+        },
+      })
+        .then(() => {
+          this.animated(() => {
+            this.features = this.features.filter(
+              (f) => f.name !== featureName
+            );
+          }, featureName);
+        })
+        .catch(showFetchError);
     },
   }));
 

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

@@ -4,15 +4,13 @@
 @import "layout";
 @import "utilities";
 
-@import "components/card";
-@import "components/scrollbox";
 @import "components/toggle";
 
 [x-cloak] {
   display: none !important;
 }
 
-#notice {
+.notice {
   background-color: #fc6d26;
   color: white;
   padding: 0.5rem;

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

@@ -15,11 +15,9 @@
   .handle {
     position: absolute;
     cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
+    inset: 0;
+    background-color: var(--color-track);
+    box-shadow: inset 0 1px 3px var(--color-shadow);
     transition: 0.2s;
 
     &:before {
@@ -29,10 +27,19 @@
       width: 26px;
       left: 4px;
       bottom: 4px;
-      background-color: white;
+      background-color: var(--color-thumb);
+      box-shadow: 0 1px 2px var(--color-shadow);
       transition: 0.2s;
     }
 
+    &:hover:before {
+      filter: brightness(1.1);
+    }
+
+    &:active:before {
+      transform: scale(0.92);
+    }
+
     &.round {
       border-radius: 34px;
     }
@@ -42,30 +49,37 @@
     }
   }
 
-  input:checked + .handle {
+  input:checked + .handle:before {
     background-color: var(--color-primary);
+    transform: translateX(26px);
   }
 
-  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:checked + .handle:active:before {
+    transform: translateX(26px) scale(0.92);
   }
 
-  input:disabled + .handle:before {
-    background-color: #ddd;
-    content: "N/A";
-    text-align: center;
-    color: white;
-    font-size: x-small;
-    line-height: 26px;
+  input:focus-visible + .handle {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
   }
 
+  /* Truly disabled (e.g. flag unknown on this branch): flat and washed out
+     into the page, nothing raised or sunken that could look clickable. */
   input:disabled + .handle {
     cursor: not-allowed;
+    background-color: var(--color-disabled);
+    box-shadow: none;
+
+    &:before,
+    &:hover:before {
+      content: "N/A";
+      text-align: center;
+      color: var(--color-text-muted);
+      font-size: x-small;
+      line-height: 26px;
+      background-color: transparent;
+      box-shadow: none;
+      filter: none;
+    }
   }
 }

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

@@ -44,11 +44,6 @@ footer a {
   color: var(--color-text);
 }
 
-input[type="submit"]:not(.small) {
-  font-size: large;
-  padding: 0.25rem;
-}
-
 input[type="search"],
 input[type="text"] {
   margin: 0.25rem 0;
@@ -71,18 +66,26 @@ input[type="text"] {
 
 input[type="search"],
 input[type="text"] {
-  color: hsl(var(--hue-primary), var(--saturation-bg), var(--lightness-fg));
-  background-color: hsl(
-    var(--hue-primary),
-    var(--saturation-bg),
-    var(--lightness-bg2)
-  );
+  color: var(--color-text);
+  background-color: var(--color-surface);
   border: none;
-  box-shadow: inset 1px 1px 2px var(--color-shadow);
+  box-shadow: inset 0 1px 3px var(--color-shadow);
+  transition: filter 0.15s;
+
+  &:not(:read-only):hover {
+    filter: brightness(1.05);
+  }
 }
 
 hr {
+  width: 100%;
   margin: 1.5rem 0;
+  border: none;
+  border-top: 1px solid var(--color-track);
+}
+
+::selection {
+  background-color: hsl(var(--hue-primary), 90%, 50%, 0.3);
 }
 
 code {
@@ -94,7 +97,7 @@ button {
   cursor: pointer;
   background-color: transparent;
   border: none;
-  border-radius: 0.125rem;
+  border-radius: 0.5rem;
   padding: 0.5rem;
   min-width: 1rem;
 
@@ -103,19 +106,36 @@ button {
   justify-content: center;
 
   font-size: large;
+  transition: 0.15s;
 
-  &:hover,
-  &:focus {
+  &:hover {
     background-color: var(--color-primary);
     color: white;
   }
 
-  &:focus {
+  /* Keyboard focus only: an offset ring, no fill, so a focused button and
+     a hovered neighbor stay clearly two separate things. */
+  &:focus-visible {
     outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
     opacity: 1 !important;
   }
 }
 
+.badge {
+  font-size: 0.75rem;
+  font-weight: bold;
+  padding: 0.125rem 0.5rem;
+  border-radius: 1rem;
+  background-color: var(--color-surface);
+  box-shadow: 0 1px 2px var(--color-shadow);
+
+  &.type {
+    background-color: var(--color-primary);
+    color: white;
+  }
+}
+
 ul {
   margin: 0;
   padding: 0;
@@ -135,11 +155,60 @@ dialog {
   border: none;
   outline: none;
 
+  /* Zoom/fade the dialog in and out. Browsers without @starting-style or
+     allow-discrete simply show and hide it instantly. */
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out,
+    display 0.2s allow-discrete, overlay 0.2s allow-discrete;
+
+  &[open] {
+    opacity: 1;
+    transform: scale(1);
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+
   &::backdrop {
+    background-color: rgba(0, 0, 0, 0);
+    transition: background-color 0.2s ease-out,
+      display 0.2s allow-discrete, overlay 0.2s allow-discrete;
+  }
+
+  &[open]::backdrop {
     background-color: rgba(0, 0, 0, 0.5);
+
+    @starting-style {
+      background-color: rgba(0, 0, 0, 0);
+    }
   }
 
-  > .card {
-    margin: 0;
+  > .details {
+    background-color: var(--color-page-bg);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    max-width: 100%;
+
+    header {
+      margin-bottom: 1rem;
+
+      h2 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .badges {
+        margin-top: 0.5rem;
+        gap: 0.5rem;
+      }
+    }
+
+    main {
+      gap: 0.5rem;
+    }
   }
 }

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

@@ -26,14 +26,13 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
     gap: 3rem;
 
     padding: 0 1rem;
     flex-grow: 1;
 
     &.with-sticky-search {
-      margin-top: 4rem;
+      margin-top: 2rem;
 
       .sticky-search {
         align-self: center;
@@ -60,6 +59,50 @@ body {
   }
 }
 
+.flags {
+  width: min(100%, 80ch);
+
+  section {
+    margin-top: 3rem;
+
+    h3 {
+      font-size: 0.875rem;
+      font-weight: bold;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--color-text-muted);
+    }
+
+    ul {
+      margin-top: 1rem;
+
+      > p {
+        color: var(--color-text-muted);
+      }
+    }
+  }
+
+  li.shine {
+    animation: shine-fade 1.2s ease-out;
+    border-radius: 2px;
+  }
+}
+
+@keyframes shine-fade {
+  from {
+    background-color: hsl(var(--hue-primary), 10%, 50%, 0.25);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
+.metadata {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+}
+
 li.feature-toggle {
   display: flex;
   flex-direction: column;
@@ -69,29 +112,15 @@ li.feature-toggle {
   .row {
     align-items: center;
     flex-grow: 1;
+    gap: 0.25rem;
 
     button {
       opacity: 0;
-      transition: 0.2s;
     }
   }
 
-  > .col {
-    padding: 0.5rem;
-  }
-
-  .more-info {
-    padding-left: 68px; /* toggle width */
-  }
-
-  .metadata {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.5rem;
-  }
-
   &:hover {
-    background-color: rgba(153, 153, 153, 0.1);
+    background-color: hsl(var(--hue-primary), 10%, 50%, 0.07);
 
     button {
       opacity: 1;

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

@@ -24,10 +24,6 @@
   flex-grow: 1;
 }
 
-.stretch {
-  align-self: stretch;
-}
-
 .gap {
   gap: 1em;
 }

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

@@ -1,28 +1,59 @@
 html {
+  color-scheme: light;
+
   --hue-primary: 35;
   --saturation-bg: 5%;
-  --lightness-bg0: 80%;
-  --lightness-bg1: 88%;
-  --lightness-bg2: 96%;
+  --lightness-bg0: 92%; /* page */
+  --lightness-bg2: 97%; /* raised surfaces: inputs, badges */
+  --lightness-track: 84%; /* toggle tracks, slightly sunken */
+  --lightness-thumb: 99%; /* toggle thumbs (off) */
+  --lightness-disabled: 88%; /* disabled toggles, washed out into the page */
   --lightness-fg: 10%;
-  --lightness-shadow: 50%;
+  --lightness-muted: 42%;
+  --lightness-shadow: 65%;
 
   --color-primary: hsl(var(--hue-primary), 90%, 50%);
   --color-text: hsl(var(--hue-primary), 0%, var(--lightness-fg));
+  --color-text-muted: hsl(var(--hue-primary), 5%, var(--lightness-muted));
   --color-shadow: hsl(0, var(--saturation-bg), var(--lightness-shadow));
   --color-page-bg: hsl(
     var(--hue-primary),
     var(--saturation-bg),
     var(--lightness-bg0)
   );
+  --color-surface: hsl(
+    var(--hue-primary),
+    var(--saturation-bg),
+    var(--lightness-bg2)
+  );
+  --color-track: hsl(
+    var(--hue-primary),
+    var(--saturation-bg),
+    var(--lightness-track)
+  );
+  --color-thumb: hsl(
+    var(--hue-primary),
+    var(--saturation-bg),
+    var(--lightness-thumb)
+  );
+  --color-disabled: hsl(
+    var(--hue-primary),
+    var(--saturation-bg),
+    var(--lightness-disabled)
+  );
 }
 
 @media (prefers-color-scheme: dark) {
   html:not(.light-mode) {
+    color-scheme: dark;
+
     --lightness-bg0: 8%;
-    --lightness-bg1: 16%;
-    --lightness-bg2: 24%;
+    --lightness-bg2: 16%;
+    --lightness-track: 22%;
+    --lightness-thumb: 70%;
+    --lightness-disabled: 12%;
     --lightness-fg: 90%;
-    --lightness-shadow: 4%;
+    --lightness-muted: 60%;
+    --lightness-shadow: 3%;
   }
 }

data/app/controllers/toogle/application_controller.rb

@@ -5,16 +5,13 @@ module Toogle
     #  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 :)
+    # Never cache: a stale page could show the wrong toggle state.
     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"
+      response.headers["Cache-Control"] = "no-store"
     end
   end
 end

data/app/controllers/toogle/definitions_controller.rb

@@ -1,10 +1,7 @@
 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
+      render json: Toogle::Definition.all
     end
   end
 end

data/app/controllers/toogle/features_controller.rb

@@ -1,7 +1,7 @@
 module Toogle
   class FeaturesController < ApplicationController
     def index
-      @features = Toogle::Feature.all
+      load_features
 
       respond_to do |format|
         format.html
@@ -12,10 +12,14 @@ module Toogle
     def show
       @definition = Toogle::Definition.find(params[:id])
       if @definition.nil?
-        flash[:notice] = "No feature defintion with name \"#{params[:id]}\" found."
+        flash.now[:notice] = "No feature definition with name \"#{params[:id]}\" found."
+      end
+      load_features
+
+      respond_to do |format|
+        format.html { render "index" }
+        format.json { render json: @features }
       end
-      index
-      render "index"
     end
 
     def update
@@ -51,5 +55,11 @@ module Toogle
         end
       end
     end
+
+    private
+
+    def load_features
+      @features = Toogle::Feature.all
+    end
   end
 end

data/app/models/toogle/definition.rb

@@ -2,7 +2,8 @@
 
 module Toogle
   class Definition
-    attr_accessor :name, :default_enabled
+    attr_reader :name, :default_enabled, :milestone, :type,
+      :feature_issue_url, :introduced_by_url, :rollout_issue_url
 
     def self.all
       ::Feature::Definition.definitions.map do |definition|
@@ -10,25 +11,25 @@ module Toogle
           name: definition[0].to_s,
           default_enabled: definition[1].default_enabled,
           milestone: definition[1].milestone,
+          type: definition[1].type,
+          feature_issue_url: definition[1].feature_issue_url,
           introduced_by_url: definition[1].introduced_by_url,
-          rollout_issue_url: definition[1].rollout_issue_url,
+          rollout_issue_url: definition[1].rollout_issue_url
         )
       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:, milestone: nil, introduced_by_url: nil, rollout_issue_url: nil)
+    def initialize(name:, default_enabled:, milestone: nil, type: nil,
+      feature_issue_url: nil, introduced_by_url: nil, rollout_issue_url: nil)
       @name = name
       @default_enabled = default_enabled
       @milestone = milestone
+      @type = type
+      @feature_issue_url = feature_issue_url
       @introduced_by_url = introduced_by_url
       @rollout_issue_url = rollout_issue_url
     end

data/app/models/toogle/feature.rb

@@ -2,18 +2,18 @@
 
 module Toogle
   class Feature
-    attr_accessor :name, :state, :definition
+    attr_reader :name, :state, :definition
 
     def self.all
-      definitions = Definition.all
+      definitions_by_name = Definition.all.index_by(&:name)
 
       Flipper::Adapters::ActiveRecord.new(
         feature_class: ::Feature::FlipperFeature,
         gate_class: ::Feature::FlipperGate
       ).get_all.map do |feature_name, feature_values|
-        feature_definition = Definition.find(feature_name)
+        feature_definition = definitions_by_name[feature_name]
         feature_state = if feature_definition
-          feature_values[:boolean] ? :enabled: :disabled
+          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.

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

@@ -3,12 +3,15 @@
   %head
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
     %meta(name="viewport" content="width=device-width, initial-scale=1.0")
+    -# GitLab's masked_referrer_url helper (Snowplow) crashes on referrers
+    -# pointing into this engine, because it cannot regenerate engine routes
+    -# with the main app's URL helpers. So never send a referrer.
+    %meta(name="referrer" content="no-referrer")
     %title Feature flags
     = csrf_meta_tags
     = csp_meta_tag
     = stylesheet_link_tag "toogle/application", media: "all"
     = javascript_include_tag 'toogle/application'
-    %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
@@ -34,14 +37,22 @@
           %path(d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z")
 
     %main.with-sticky-search
-      = yield
       - if notice.present?
-        #notice.d-flex.row.center.gap
+        .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
+      -# Client-side errors, e.g. fetch failures when the server is gone.
+      .notice.d-flex.row.center.gap(x-data x-show="$store.flash.message" x-cloak)
+        %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(x-text="$store.flash.message")
+
+      = yield
 
     %footer
       %a(href="https://gitlab.com/thutterer/toogle" target="_blank")

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

@@ -0,0 +1,7 @@
+-# The ⋯ button opening the details dialog. `subject` is the Alpine
+-# expression for the flag's name, e.g. "feature.name".
+%button(title="Show details" x-on:click="openDetails(#{subject})")
+  %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")
+    %circle(cx="12" cy="12" r="1")
+    %circle(cx="12" cy="5" r="1")
+    %circle(cx="12" cy="19" r="1")

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

@@ -1,76 +1,103 @@
-.sticky-search
-  .d-flex.col{
-    "x-data": "{query: '', show: false}",
-    "@click.outside": "show = false",
-    "@keyup.esc": "show = false"}
+.flags(x-data="flags('#{features_url}', '#{definitions_path}', '#{@definition&.name}')")
+  .sticky-search
     %input.large.w-100#search{
       "type": "search",
-      "placeholder": "Search and toggle feature flags",
-      "x-model.debounce.400ms": "query",
-      "x-ref": "search",
-      "x-on:input": "show = true",
-      "x-on:focus": "show = true"}
-    %template(x-if="show")
-      .d-flex.col.stretch{
-        "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()"}
+      "placeholder": "Search feature flags",
+      "x-model.debounce.400ms": "query"}
 
-.card
-  %h3 My feature flags
-  %small These features already use custom settings in this GDK.
+  %section
+    %h3 Customized in this GDK
 
-  %ul(x-data="features('#{features_url}')")
-    %template(x-for="feature in features" :key="feature.name")
-      %li.feature-toggle(x-data="{ showMore: false }"){"@click.outside": "showMore = false"}
-        .d-flex.row.nowrap
-          %template(x-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
-          %template(x-if="feature.state !== 'unknown'")
+    %ul.pinned
+      %template(x-for="feature in filteredFeatures()" :key="feature.name")
+        %li.feature-toggle{":style": "feature.name === moving ? `view-transition-name: flag-${feature.name}` : ''", ":class": "{shine: feature.name === lastMoved}"}
+          .d-flex.row.nowrap
+            %template(x-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
+            %template(x-if="feature.state !== 'unknown'")
+              %label.toggle
+                %input(type="checkbox" x-on:change="toggleFeature(feature)" :checked="feature.state === 'enabled'" :name="feature.name")
+                %span.handle.round
+
+            %code.grow.ellipsis(x-text="feature.name")
+
+            = render "details_button", subject: "feature.name"
+
+            %button(title="Forget this setting and use default" x-on:click="deleteFeature(feature.name)")
+              %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")
+      %p(x-show="!features.length") Nothing custom yet. Toggle any flag below.
+      %p(x-show="features.length && !filteredFeatures().length") No matches.
+
+  %section
+    %h3 Defaults from the code
+
+    %ul.defaults
+      %template(x-for="definition in filteredDefinitions()" :key="definition.name")
+        %li.feature-toggle{":style": "definition.name === moving ? `view-transition-name: flag-${definition.name}` : ''", ":class": "{shine: definition.name === lastMoved}"}
+          .d-flex.row.nowrap
             %label.toggle
-              %input(type="checkbox" x-on:change="toggleFeature(feature)" :checked="feature.state === 'enabled'" :name="feature.name")
-              %span.handle.round
+              %input(type="checkbox" x-on:change="toggleDefault(definition)" :checked="definition.default_enabled" :name="definition.name")
+              %span.handle.round(:title="definition.default_enabled ? 'Enabled by default. Click to disable.' : 'Disabled by default. Click to enable.'")
+
+            %code.grow.ellipsis(x-text="definition.name")
 
-          %code.grow.ellipsis(x-text="feature.name")
+            = render "details_button", subject: "definition.name"
+      %p(x-show="definitions.length && !matchingDefinitions().length")
+        No matches. Are you on the right branch?
+      %p(x-show="defaultsCapped()" x-text="`Showing first ${max} of ${matchingDefinitions().length}. Type to narrow down.`")
 
-          %button(title="Show more" 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")
-              %circle(cx="12" cy="12" r="1")
-              %circle(cx="12" cy="5" r="1")
-              %circle(cx="12" cy="19" r="1")
+  %dialog{"x-ref": "dialog", "@close": "closeDetails()", "@click.self": "$refs.dialog.close()"}
+    %template(x-if="selected()")
+      .details
+        %header
+          %h2
+            %template(x-if="selected().state === 'unknown'")
+              %label.toggle(title="This feature does not exist on the current branch.")
+                %input(type="checkbox" disabled)
+                %span.handle.round
+            %template(x-if="selected().state !== 'unknown'")
+              %label.toggle
+                %input(type="checkbox" x-on:change="toggleSelected()" :checked="selected().state === 'enabled'")
+                %span.handle.round
 
-          %button(title="Forget this setting and use default" x-on:click="deleteFeature(feature.name)")
-            %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")
+            %code(x-text="selectedName")
 
-        .d-flex.col.more-info{ "x-show": "showMore" }
-          .metadata
-            %strong Milestone
-            %span(x-text="feature.definition.milestone || '-'")
-            %strong Introduced by
-            %a(x-show="feature.definition.introduced_by_url"
-              x-text="`!${feature.definition.introduced_by_url?.split('/').at(-1)}`"
-              :href="feature.definition.introduced_by_url"
-              target="_blank")
-            %span(x-show="!feature.definition.introduced_by_url") -
-            %strong Rollout issue
-            %a(x-show="feature.definition.rollout_issue_url"
-              x-text="`#${feature.definition.rollout_issue_url?.split('/').at(-1)}`"
-              :href="feature.definition.rollout_issue_url"
-              target="_blank")
-            %span(x-show="!feature.definition.rollout_issue_url") -
+          .d-flex.row.badges(x-show="selected().definition")
+            %span.badge.type{"x-show": "selected().definition?.type",
+              "x-text": "selected().definition?.type"}
+            %span.badge{"x-show": "selected().definition?.milestone",
+              "x-text": "`since ${selected().definition?.milestone}`"}
+
+        %main.d-flex.col
+          %template(x-if="selected().definition")
+            .metadata
+              %strong Feature issue
+              %a{"x-show": "selected().definition.feature_issue_url",
+                "x-text": "`#${selected().definition.feature_issue_url?.split('/').at(-1)}`",
+                ":href": "selected().definition.feature_issue_url",
+                "target": "_blank"}
+              %span(x-show="!selected().definition.feature_issue_url") -
+              %strong Introduced by
+              %a{"x-show": "selected().definition.introduced_by_url",
+                "x-text": "`!${selected().definition.introduced_by_url?.split('/').at(-1)}`",
+                ":href": "selected().definition.introduced_by_url",
+                "target": "_blank"}
+              %span(x-show="!selected().definition.introduced_by_url") -
+              %strong Rollout issue
+              %a{"x-show": "selected().definition.rollout_issue_url",
+                "x-text": "`#${selected().definition.rollout_issue_url?.split('/').at(-1)}`",
+                ":href": "selected().definition.rollout_issue_url",
+                "target": "_blank"}
+              %span(x-show="!selected().definition.rollout_issue_url") -
+          %template(x-if="!selected().definition")
+            %p This feature does not exist on the current branch.
 
           %hr
           %small Share this URL with MR reviewers.
           .d-flex.row
-            %input.grow(x-ref="copyText" :value="`${indexUrl}${feature.name}`" type="text" readonly="readonly")
-            %button(x-on:click="$refs.copyText.select(); document.execCommand('copy');") Copy
-    %p(x-show="!features.length") No active feature flags in this GDK yet.
-
-= render "dialog"
+            %input.grow{":value": "`${featuresUrl}/${selectedName}`", "type": "text", "readonly": "readonly"}
+            %button(x-on:click="navigator.clipboard.writeText(`${featuresUrl}/${selectedName}`)") Copy

data/lib/toogle/version.rb

@@ -1,3 +1,3 @@
 module Toogle
-  VERSION = "0.9.5"
+  VERSION = "1.0.1"
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: gdk-toogle
 version: !ruby/object:Gem::Version
-  version: 0.9.5
+  version: 1.0.1
 platform: ruby
 authors:
 - Thomas Hutterer
-autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-29 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -94,8 +93,6 @@ files:
 - app/assets/config/toogle_manifest.js
 - app/assets/javascript/toogle/application.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/elements.css
 - app/assets/stylesheets/toogle/layout.css
@@ -107,9 +104,7 @@ files:
 - app/models/toogle/definition.rb
 - app/models/toogle/feature.rb
 - app/views/layouts/toogle/application.html.haml
-- app/views/toogle/definitions/index.html.haml
-- app/views/toogle/features/_dialog.html.haml
-- app/views/toogle/features/_toggle.html.haml
+- app/views/toogle/features/_details_button.html.haml
 - app/views/toogle/features/index.html.haml
 - config/routes.rb
 - lib/toogle.rb
@@ -123,7 +118,6 @@ metadata:
   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
@@ -138,8 +132,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
-signing_key: 
+rubygems_version: 4.0.12
 specification_version: 4
 summary: Toogle toggles feature flags
 test_files: []

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

@@ -1,11 +0,0 @@
-.card {
-  background-color: hsl(
-    var(--hue-primary),
-    var(--saturation-bg),
-    var(--lightness-bg1)
-  );
-  box-shadow: 0 10px 16px var(--color-shadow);
-  border-radius: 5px;
-  padding: 1rem;
-  max-width: 100%;
-}

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

@@ -1,26 +0,0 @@
-.scrollbox {
-  max-height: 20ch;
-  overflow: auto;
-  padding: 1rem 0;
-  word-break: break-all;
-
-  background-color: hsl(
-    var(--hue-primary),
-    var(--saturation-bg),
-    var(--lightness-bg2)
-  );
-  border: 2px solid
-    hsl(var(--hue-primary), var(--saturation-bg), var(--lightness-bg1));
-
-  border-style: ridge;
-
-  box-shadow: 0 5px 10px var(--color-shadow);
-
-  li {
-    padding: 0 1rem;
-
-    &:hover {
-      background-color: hsl(var(--hue-primary), 60%, var(--lightness-bg1));
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-%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}, '#{features_url}')")
-        %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

@@ -1,18 +0,0 @@
-%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, '#{features_url}')")
-          %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/_toggle.html.haml

@@ -1,8 +0,0 @@
-- 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.'")