Add initial functionality for Stackbit on integrations settings tab (#4113)

* Add initial functionality for Stackbit on integrations settings tab

* Add test for stackbit integration

* Adjust test

* switch check from grants to tokens

app/assets/stylesheets/settings.scss

@@ -352,6 +352,24 @@
       margin-top: 20px;
       width: 70%;
     }
+    .single-app-integration {
+      @include themeable(background, theme-container-background, #fff);
+      @include themeable(border, theme-border, 1px solid $light-medium-gray);
+      border-radius: 8px;
+      padding: 10px;
+      h2 {
+        margin: 0;
+        padding: 0;
+        font-size: 1.5em;
+      }
+      sup {
+        @include themeable(color, theme-secondary-color, $medium-gray);
+      }
+      img {
+        height: 1.0em;
+        margin-left: 5px;
+      }
+    }
   }
   .default-billing-message {
     margin: 10px 0px;

app/decorators/user_decorator.rb

@@ -83,4 +83,8 @@ class UserDecorator < ApplicationDecorator
     ]
     colors[id % 10]
   end
+
+  def stackbit_integration?
+    access_tokens.any?
+  end
 end

app/views/users/_integrations.html.erb

@@ -7,14 +7,31 @@
   <%= javascript_pack_tag "githubRepos", defer: true %>
 <% end %>
 
-<%= form_tag users_update_twitch_username_path do |f| %>
-  <h2>Live Streaming (Beta)</h2>
-  <div class="field">
-    <%= label_tag "user[twitch_username]", "Twitch Username" %>
-    <%= text_field_tag "user[twitch_username]", @user.twitch_username %>
-  </div>
-  <p><em>Add your Twitch username, and then checkout <a href="/live/<%= @user.username %>">dev.to/live/<%= @user.username %></a>.</em></p>
-  <p><em>It's a new thing we're trying out. Soon we'll be able to indicate when any community member is currently streaming.</em></p>
+<hr />
+<h3>Generate a personal blog from your DEV posts</h3>
+<div class="single-app-integration">
+  <% if current_user.decorate.stackbit_integration? %>
+    <h2>Connected to Stackbit <sup>beta</sup><img src="<%= asset_path("checkmark-green.svg") %>" /></h2>
+    <p style="font-size: 1.1em"><strong><a href="https://app.stackbit.com/create?ref=devto">Go to your Stackbit Dashboard</a></strong></p>
+  <% else %>
+    <h2>Connect to Stackbit <sup>beta</sup></h2>
+    <p>Automatically generate a self-hosted static blog feed from your DEV posts.</p>
+    <p style="font-size: 1.1em"><strong><a href="/connecting-with-stackbit">Get Started</a></strong></p>
+  <% end %>
+</div>
 
-  <%= submit_tag "SUBMIT", class: "cta" %>
-<% end %>
+<% if false # removed since isn't fully working right now %>
+  <hr />
+
+  <%= form_tag users_update_twitch_username_path do |f| %>
+    <h3>Live Streaming (Experimental)</h3>
+    <div class="field">
+      <%= label_tag "user[twitch_username]", "Twitch Username" %>
+      <%= text_field_tag "user[twitch_username]", @user.twitch_username %>
+    </div>
+    <p><em>Add your Twitch username, and then checkout <a href="/live/<%= @user.username %>">dev.to/live/<%= @user.username %></a>.</em></p>
+    <p><em>It's a new thing we're trying out. Soon we'll be able to indicate when any community member is currently streaming.</em></p>
+
+    <%= submit_tag "SUBMIT", class: "cta" %>
+  <% end %>
+<% end %>

spec/system/user/user_edits_integrations_spec.rb

@@ -19,7 +19,7 @@ RSpec.describe "User edits their integrations", type: :system, js: true do
   end
 
   describe "via visiting /settings" do
-    it "and sets a Twitch Username" do
+    xit "and sets a Twitch Username" do
       visit "/settings"
       expect(page).to have_current_path("/settings")
 
@@ -33,5 +33,20 @@ RSpec.describe "User edits their integrations", type: :system, js: true do
       visit "/settings/integrations"
       expect(find_field("Twitch Username").value).to eq "TestTwitchUser"
     end
+    it "has connect-to-stackbit prompt" do
+      visit "/settings"
+      expect(page).to have_current_path("/settings")
+
+      click_link "Integrations"
+      expect(page).to have_text("Connect to Stackbit")
+    end
+    it "has connected-to-stackbit prompt if already integrated" do
+      create(:doorkeeper_access_token, resource_owner: user)
+      visit "/settings"
+      expect(page).to have_current_path("/settings")
+
+      click_link "Integrations"
+      expect(page).to have_text("Connected to Stackbit")
+    end
   end
 end