gdk-toogle 1.0.1 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5b7fb4c9b37ce9f5712cc5635ff39bea2b3745179ea554dbe4b941f2a9472cab
-  data.tar.gz: 57a6c432b93d5dc0e88c52f46c653ca26338638f99f866c57e56dc5540a21692
+  metadata.gz: 31e11a727853a15792bcdb3963066222752c19b30234d0dc63db07a360a44472
+  data.tar.gz: ddef44896dfda4944158d2e4204900b3df49d1c0c582973dc0efadc104122f57
 SHA512:
-  metadata.gz: da4f86f837651e78dc12c7c61e2563cb8e099ff5a6a454e00226728906427243649190743cc36b46bcac34967551542afe8da58f5f5a35e5c6fd834412d434e4
-  data.tar.gz: 807b565d41e6f131a0811fb7e4d980f1c5a0a5ad5a61c892e81f3c9e6d4c2c614fe269bfadf8087465467deca63d3297080366ad1827b4abd302a09c5fb30e21
+  metadata.gz: abcefb8b6457c45c10d5adb906deb4f25bc01f5202e0ac1cf17acc61da1d6d6c0ef4b32abd4aa8fbcb7e1fc00a6488d5ba0b429028d06e9649f24cbf4ce36052
+  data.tar.gz: d13585fdd22505d237f1166cc7d07b9c0233e66d1e6047ab7d945d68aa43dc08b09a67e8613b33298667e90c7049e5435d40e11d754756cd4ef92c4625e08cf5

data/README.md

@@ -10,7 +10,7 @@ GitLab's `Feature` classes, so mounting it in any other Rails app won't work
 
 ### Usage within the GitLab Development Kit
 
-The UI is available at http://gdk.test:3000/rails/features.
+The UI is available at http://gdk.test:4000/rails/features.
 
 ## Contributing
 
@@ -29,11 +29,12 @@ The dummy app used for testing includes fake in-memory versions of GitLab's
 develop the engine without a GDK:
 
 ```sh
+bundle install
 cd spec/dummy
 bin/rails server
 ```
 
-Then open http://localhost:3000/toogle. Toggled state lives in memory and
+Then open http://localhost:4000/toogle. Toggled state lives in memory and
 resets on restart.
 
 To test your changes inside a real GDK, point GitLab's `Gemfile` at your
@@ -80,7 +81,8 @@ Keep Ruby and gem versions at or below what GitLab itself runs (see
 One design goal of this little Rails engine was to keep it free of any dependencies, that GitLab uses today.
 Because, tomorrow we might decide to ditch one or the other tech we use today, and Toogle shouldn't break just because GitLab removes `sassc`, as an example (that actually happened during development).
 
-That's why Toogle only depends on the bare basics: `rails`, `sprockets` and `haml`.
+That's why Toogle only depends on the bare basics: `rails` and `haml`.
+It doesn't even use the host's asset pipeline: the engine serves its own CSS and JS files.
 
 ### Javascript
 

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

@@ -33,25 +33,20 @@ document.addEventListener("alpine:init", () => {
     definitionsUrl,
 
     init() {
-      const featuresLoaded = this.fetchFeatures();
-
-      const definitionsLoaded = fetch(this.definitionsUrl, {
-        method: "GET",
-        headers: {
-          Accept: "application/json",
-        },
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          this.definitions = data;
-        })
-        .catch(showFetchError);
+      const loading = this.reload();
 
       if (shareName) {
-        Promise.all([featuresLoaded, definitionsLoaded]).then(() =>
+        loading.then(() =>
           this.openDetails(shareName)
         );
       }
+
+      this.onReload = () => this.reload();
+      window.addEventListener("reload", this.onReload);
+    },
+
+    destroy() {
+      window.removeEventListener("reload", this.onReload);
     },
 
     openDetails(name) {
@@ -119,6 +114,27 @@ document.addEventListener("alpine:init", () => {
         .catch(showFetchError);
     },
 
+    fetchDefinitions() {
+      return fetch(this.definitionsUrl, {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+        },
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          this.definitions = data;
+        })
+        .catch(showFetchError);
+    },
+
+    reload() {
+      const featuresLoaded = this.fetchFeatures();
+      const definitionsLoaded = this.fetchDefinitions();
+
+      return Promise.all([featuresLoaded, definitionsLoaded])
+    },
+
     // 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
@@ -238,15 +254,39 @@ document.addEventListener("alpine:init", () => {
       ["@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");
-        }
+        document.documentElement.classList.toggle("dark-mode", this.isDark);
+        document.documentElement.classList.toggle("light-mode", !this.isDark);
       },
       ["x-bind:title"]() {
         return `Switch to ${this.isDark ? "Light Mode" : "Dark Mode"}`;
       },
     },
   }));
+
+  Alpine.data("gitBranchWatcher", (branch, branchUrl) => ({
+    branch,
+    branchUrl,
+
+    init() {
+      this.$watch("branch", () => {
+        this.$dispatch("reload")
+      });
+
+      window.addEventListener("focus", () => this.fetchCurrentBranch())
+    },
+
+    fetchCurrentBranch() {
+      fetch(this.branchUrl, {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+        },
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          this.branch = data;
+        })
+        .catch(showFetchError);
+    },
+  }))
 });

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

@@ -1,10 +1,10 @@
-@import "variables";
+@import "variables.css";
 
-@import "elements";
-@import "layout";
-@import "utilities";
+@import "elements.css";
+@import "layout.css";
+@import "utilities.css";
 
-@import "components/toggle";
+@import "components/toggle.css";
 
 [x-cloak] {
   display: none !important;

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

@@ -49,8 +49,11 @@
     }
   }
 
+  input:checked + .handle {
+    background-color: var(--color-on);
+  }
+
   input:checked + .handle:before {
-    background-color: var(--color-primary);
     transform: translateX(26px);
   }
 

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

@@ -15,6 +15,10 @@ body {
     position: sticky;
     top: 0;
     transition: 0.2s;
+
+    code {
+      color: var(--color-text-muted);
+    }
   }
 }
 

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

@@ -2,6 +2,7 @@ html {
   color-scheme: light;
 
   --hue-primary: 35;
+  --hue-on: 140;
   --saturation-bg: 5%;
   --lightness-bg0: 92%; /* page */
   --lightness-bg2: 97%; /* raised surfaces: inputs, badges */
@@ -11,8 +12,11 @@ html {
   --lightness-fg: 10%;
   --lightness-muted: 42%;
   --lightness-shadow: 65%;
+  --saturation-on: 60%; /* toggle track when on */
+  --lightness-on: 38%;
 
   --color-primary: hsl(var(--hue-primary), 90%, 50%);
+  --color-on: hsl(var(--hue-on), var(--saturation-on), var(--lightness-on));
   --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));
@@ -43,6 +47,7 @@ html {
   );
 }
 
+/* Keep in sync with the block below */
 @media (prefers-color-scheme: dark) {
   html:not(.light-mode) {
     color-scheme: dark;
@@ -55,5 +60,23 @@ html {
     --lightness-fg: 90%;
     --lightness-muted: 60%;
     --lightness-shadow: 3%;
+    --saturation-on: 45%;
+    --lightness-on: 48%;
   }
 }
+
+/* Keep in sync with the block above */
+html.dark-mode {
+  color-scheme: dark;
+
+  --lightness-bg0: 8%;
+  --lightness-bg2: 16%;
+  --lightness-track: 22%;
+  --lightness-thumb: 70%;
+  --lightness-disabled: 12%;
+  --lightness-fg: 90%;
+  --lightness-muted: 60%;
+  --lightness-shadow: 3%;
+  --saturation-on: 45%;
+  --lightness-on: 48%;
+}

data/app/controllers/toogle/assets_controller.rb

@@ -0,0 +1,29 @@
+module Toogle
+  # Serves our own CSS and JS instead of going through the host's asset
+  # pipeline: hosts that only serve precompiled assets, or whose web server
+  # answers /assets/* itself, never deliver them otherwise.
+  class AssetsController < ApplicationController
+    ROOT = Engine.root.join("app/assets")
+
+    # Only these files are served, so no path from the URL ever reaches the
+    # filesystem.
+    FILES = Dir[ROOT.join("{stylesheets,javascript}/**/*.{css,js}")]
+      .index_by { Pathname(_1).relative_path_from(ROOT).to_s }
+
+    # Static public files: nothing to protect, and Rails' cross-origin check
+    # would otherwise refuse to serve JavaScript to a <script> tag.
+    skip_forgery_protection
+
+    def show
+      file = FILES[params[:path]]
+      return head :not_found unless file
+
+      # Send the content, not the file: GitLab enables X-Sendfile, which hands
+      # file bodies to Workhorse, and Workhorse may run on another host (as in
+      # Caproni) where this path doesn't exist.
+      send_data File.read(file),
+        type: Mime::Type.lookup_by_extension(File.extname(file).delete(".")),
+        disposition: :inline
+    end
+  end
+end

data/app/controllers/toogle/branches_controller.rb

@@ -0,0 +1,7 @@
+module Toogle
+  class BranchesController < ApplicationController
+    def show
+      render json: GitRepo.current_branch.to_json
+    end
+  end
+end

data/app/services/toogle/git_repo.rb

@@ -0,0 +1,7 @@
+module Toogle
+  class GitRepo
+    def self.current_branch
+      `git rev-parse --abbrev-ref HEAD`.chomp
+    end
+  end
+end

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

@@ -1,5 +1,6 @@
 !!!
-%html{ class: ("light-mode" if request.cookies["toogle-dark"] == "false") }
+- theme_class = {"true" => "dark-mode", "false" => "light-mode"}[request.cookies["toogle-dark"]]
+%html{ class: theme_class }
   %head
     %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
     %meta(name="viewport" content="width=device-width, initial-scale=1.0")
@@ -10,15 +11,17 @@
     %title Feature flags
     = csrf_meta_tags
     = csp_meta_tag
-    = stylesheet_link_tag "toogle/application", media: "all"
-    = javascript_include_tag 'toogle/application'
+    %link(rel="stylesheet" media="all" href="#{asset_file_path("stylesheets/toogle/application.css", v: Toogle::VERSION)}")
+    %script(src="#{asset_file_path("javascript/toogle/application.js", v: Toogle::VERSION)}")
     %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
+        %div(x-data="gitBranchWatcher(#{Toogle::GitRepo.current_branch.to_json}, '#{branch_url}')")
+          = link_to main_app.root_path do
+            = render partial: "shared/logo", formats: :svg
+          %code(x-text="branch" title="Current git branch")
 
       %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")

data/config/routes.rb

@@ -1,4 +1,8 @@
 Toogle::Engine.routes.draw do
+  get "assets/*path", to: "assets#show", format: false, as: :asset_file
+
+  resource :branch, only: %i[show]
+
   resources :definitions, only: %i[index]
 
   # Keep this line last as it matches any URL

data/lib/toogle/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: gdk-toogle
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.2.0
 platform: ruby
 authors:
 - Thomas Hutterer
@@ -90,7 +90,6 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
-- app/assets/config/toogle_manifest.js
 - app/assets/javascript/toogle/application.js
 - app/assets/stylesheets/toogle/application.css
 - app/assets/stylesheets/toogle/components/toggle.css
@@ -99,10 +98,13 @@ files:
 - app/assets/stylesheets/toogle/utilities.css
 - app/assets/stylesheets/toogle/variables.css
 - app/controllers/toogle/application_controller.rb
+- app/controllers/toogle/assets_controller.rb
+- app/controllers/toogle/branches_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/services/toogle/git_repo.rb
 - app/views/layouts/toogle/application.html.haml
 - app/views/toogle/features/_details_button.html.haml
 - app/views/toogle/features/index.html.haml
@@ -132,7 +134,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.12
+rubygems_version: 4.0.22
 specification_version: 4
 summary: Toogle toggles feature flags
 test_files: []

data/app/assets/config/toogle_manifest.js

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