CLI demo

Gemfile

@@ -6,10 +6,11 @@ gem 'puma'
 gem 'bcrypt'
 gem 'faker'
 
-flipper_version = '~> 1.2.2'
+flipper_version = { git: "https://github.com/flippercloud/flipper", ref: "ef9a631858c582b53b6d0ab7bcc557e0c477a685" }
 gem 'flipper-cloud', flipper_version
 gem 'flipper-ui', flipper_version
 gem 'flipper-active_record', flipper_version
+gem 'ansi-to-html'
 
 group :development, :test do
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

Gemfile.lock

@@ -1,3 +1,23 @@
+GIT
+  remote: https://github.com/flippercloud/flipper
+  revision: ef9a631858c582b53b6d0ab7bcc557e0c477a685
+  ref: ef9a631858c582b53b6d0ab7bcc557e0c477a685
+  specs:
+    flipper (1.2.2)
+      concurrent-ruby (< 2)
+    flipper-active_record (1.2.2)
+      activerecord (>= 4.2, < 8)
+      flipper (~> 1.2.2)
+    flipper-cloud (1.2.2)
+      flipper (~> 1.2.2)
+    flipper-ui (1.2.2)
+      erubi (>= 1.0.0, < 2.0.0)
+      flipper (~> 1.2.2)
+      rack (>= 1.4, < 4)
+      rack-protection (>= 1.5.3, < 5.0.0)
+      rack-session (>= 1.0.2, < 3.0.0)
+      sanitize (< 7)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -77,6 +97,7 @@ GEM
       tzinfo (~> 2.0)
     addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
+    ansi-to-html (0.0.3)
     base64 (0.2.0)
     bcrypt (3.1.20)
     bigdecimal (3.1.6)
@@ -108,19 +129,6 @@ GEM
     faker (3.2.3)
       i18n (>= 1.8.11, < 2)
     ffi (1.16.3)
-    flipper (1.2.2)
-      concurrent-ruby (< 2)
-    flipper-active_record (1.2.2)
-      activerecord (>= 4.2, < 8)
-      flipper (~> 1.2.2)
-    flipper-cloud (1.2.2)
-      flipper (~> 1.2.2)
-    flipper-ui (1.2.2)
-      erubi (>= 1.0.0, < 2.0.0)
-      flipper (~> 1.2.2)
-      rack (>= 1.4, < 4)
-      rack-protection (>= 1.5.3, <= 4.0.0)
-      sanitize (< 7)
     globalid (1.2.1)
       activesupport (>= 6.1)
     hashdiff (1.1.0)
@@ -264,14 +272,15 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
+  ansi-to-html
   bcrypt
   byebug
   capybara
   dotenv-rails
   faker
-  flipper-active_record (~> 1.2.2)
-  flipper-cloud (~> 1.2.2)
-  flipper-ui (~> 1.2.2)
+  flipper-active_record!
+  flipper-cloud!
+  flipper-ui!
   listen
   puma
   rails

app/controllers/cli_controller.rb

@@ -0,0 +1,6 @@
+class CliController < ApplicationController
+  def execute
+    @status, @output = WebCli.run(params[:prompt])
+    render layout: false
+  end
+end

app/models/web_cli.rb

@@ -0,0 +1,28 @@
+require 'flipper/cli'
+
+class WebCli < Flipper::CLI
+  def self.run(input)
+    output = StringIO.new
+
+    # Prentend this a TTY so we get colorization
+    def output.tty?
+      true
+    end
+
+    status = new(stdout: output, stderr: output).run(Shellwords.split(input.to_s))
+
+    [status, output.string]
+  end
+
+  # Override to not exit and return default status of 0
+  def run(args)
+    super
+    0
+  rescue SystemExit => e
+    e.status
+  end
+
+  def load_environment!
+    # already loaded, so no need
+  end
+end

app/views/cli/execute.html.erb

@@ -0,0 +1,2 @@
+<span class="text-white-50">$</span> flipper <%= params[:prompt] %>
+<%=raw Ansi::To::Html.new(h(@output)).to_html(:xterm) %>

app/views/cli/show.html.erb

@@ -0,0 +1,50 @@
+<label for="prompt" class="d-block text-bg-dark p-4 font-monospace overflow-auto rounded-4" style="height: 60vh;">
+  <pre id="history" class="fs-6"></pre>
+
+  <%= form_tag do %>
+    <div class="d-flex align-items-center">
+      <div>
+        <%= tag.span "$", class: @status && @status > 0 ? 'text-danger' : 'text-white-50' %>
+        flipper
+      </div>
+      <div class="ps-2">
+        <input type="text" name="prompt" id="prompt" value="--help" class="form-control-plaintext text-bg-dark">
+      </div>
+    </div>
+  <% end %>
+</label>
+
+<% content_for :footer do %>
+  <%= page_footer(__FILE__) %>
+<% end %>
+
+<script>
+const history = document.getElementById('history');
+const prompt = document.getElementById('prompt');
+const form = document.querySelector('form')
+
+form.addEventListener('submit', function(event) {
+  event.preventDefault();
+
+  const { action, method } = event.target;
+  const body = new FormData(event.target);
+
+  fetch(action, { method, body }).then(response => {
+    if(!response.ok) {
+      throw new Error(response);
+    }
+
+    response.text().then(html => {
+      history.innerHTML += html;
+      prompt.scrollIntoView();
+    });
+  });
+
+  // Reset prompt
+  prompt.value = '';
+});
+
+// Submit the default prompt on load
+form.requestSubmit();
+prompt.focus();
+</script>

app/views/layouts/application.html.erb

@@ -42,13 +42,15 @@
 
 
       <div class="row mb-3">
-        <main class="col col-12 col-xl-6 ps-xl-4 pe-xl-5 mx-auto">
+        <main class="col col-12<% if content_for?(:aside) %>col-xl-6 ps-xl-4 pe-xl-5 mx-auto<% end %>">
           <%= yield %>
         </main>
 
-        <aside class="col col-12 col-xl-6 mx-auto">
-          <%= yield :aside %>
-        </aside>
+        <% if content_for?(:aside) %>
+          <aside class="col col-12 col-xl-6 mx-auto">
+            <%= yield :aside %>
+          </aside>
+        <% end %>
       </div>
     </div>
 

app/views/shared/_page_footer.html.erb

@@ -1,10 +1,15 @@
 <footer class="d-flex justify-content-between border-top gap-3 my-5 py-4">
   <div class="d-flex justify-content-center gap-2">
-    <span class="fw-bold"></span>
     <a target="_blank" rel="noreferrer" class="link-offset-2 link-underline link-underline-opacity-25 icon-link" href="/flipper">
       <%= icon 'toggles' %>
       Flipper UI
     </a>
+
+    <a target="_blank" rel="noreferrer" class="ms-4 link-offset-2 link-underline link-underline-opacity-25 icon-link" href="/cli">
+      <%=icon 'terminal' %>
+      Command Line
+    </a>
+
   </div>
   <div class="d-flex justify-content-center gap-2">
     <span class="fw-bold">View Source</span>
@@ -15,4 +20,4 @@
       <code><%= locals[:file] %></code>
     </a>
   </div>
-</footer>
+</footer>

config/routes.rb

@@ -18,6 +18,8 @@
   get 'example/index', as: :examples
   get 'example/:slug', to: "example#show", as: :example
 
+  get "cli", to: "cli#show", as: :cli
+  post "cli", to: "cli#execute"
 
   get 'connect/:token', to: "cloud#connect", as: :cloud_connect