fix setting nav tab

app/assets/stylesheets/site_connections.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the site_connections controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/

app/controllers/site_connections_controller.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class SiteConnectionsController < ApplicationController
+  before_action :get_site
+
+  def create
+    @site_connection = @site.site_connections.create
+    redirect_to site_site_connections_path(@site)
+  end
+
+  def destroy
+    @site_connection = @site.site_connections.find(params[:id])
+    @site_connection.destroy
+    redirect_to site_site_connections_path(@site)
+  end
+
+  def index
+    @site_connections = @site.site_connections
+  end
+
+  def get_site
+    @site = current_user.sites.find_by!(uuid: params[:site_id])
+  end
+end

app/helpers/application_helper.rb

@@ -106,4 +106,13 @@ def device_tab_class(tab_name)
       "hover:text-indigo-600 cursor-pointer"
     end
   end
+
+  def render_setting_nav_css(tab_name)
+    current = "cursor-default text-gray-900 dark:text-gray-100 rounded-md bg-gray-100 dark:bg-gray-900 hover:text-gray-900 hover:bg-gray-100 outline-none focus:outline-none focus:bg-gray-200 dark:focus:bg-gray-800"
+    none_current = "text-gray-600 dark:text-gray-400 rounded-md hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 outline-none focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:text-gray-100 dark:focus:bg-gray-800"
+    return current if params[:controller] == "settings" && params[:action] == "general" && tab_name.to_s == "general"
+    return current if params[:controller] == "site_connections" && params[:action] == "index" && tab_name.to_s == "site_connection"
+
+    none_current
+  end
 end

app/helpers/site_connections_helper.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+module SiteConnectionsHelper
+end

app/models/site_connection.rb

@@ -28,4 +28,9 @@ class SiteConnection < ApplicationRecord
   before_destroy do
     ApplicationHyperRecord.connection.execute(%Q[DROP USER IF EXISTS "#{site.uuid}"])
   end
+
+  # TODO replace host & port
+  def link
+    "postgresql://#{site.uuid}:#{password}@localhost:5432/#{ApplicationHyperRecord.connection.current_database}"
+  end
 end

app/views/settings/_nav.html.erb

@@ -10,25 +10,13 @@
   </form>
   <div class="hidden lg:block">
 
-    <a href="<%= general_site_settings_path(@site) %>" class="flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-900 dark:text-gray-100 rounded-md bg-gray-100 dark:bg-gray-900 hover:text-gray-900 hover:bg-gray-100 outline-none focus:outline-none focus:bg-gray-200 dark:focus:bg-gray-800 transition ease-in-out duration-150 cursor-default ">General</a>
+    <a href="<%= general_site_settings_path(@site) %>" class="flex items-center px-3 py-2 text-sm leading-5 font-medium  transition ease-in-out duration-150  <%= render_setting_nav_css(:general) %>">General</a>
 
 
 
-    <a href="<%= visibility_site_settings_path(@site) %>" class="flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 dark:text-gray-400 rounded-md hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 outline-none focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:text-gray-100 dark:focus:bg-gray-800 transition ease-in-out duration-150 mt-1">Visibility</a>
+    <a href="<%= site_site_connections_path(@site) %>" class="flex items-center px-3 py-2 text-sm leading-5 font-medium  transition ease-in-out duration-150  <%= render_setting_nav_css(:site_connection) %> mt-1">Connection</a>
 
 
-    <a href="/hackershare.dev/settings/goals" class="flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 dark:text-gray-400 rounded-md hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 outline-none focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:text-gray-100 dark:focus:bg-gray-800 transition ease-in-out duration-150 mt-1">Goals</a>
-
-
-
-    <a href="/hackershare.dev/settings/search-console" class="flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 dark:text-gray-400 rounded-md hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 outline-none focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:text-gray-100 dark:focus:bg-gray-800 transition ease-in-out duration-150 mt-1">Search Console</a>
-
-
-
-    <a href="/hackershare.dev/settings/email-reports" class="flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 dark:text-gray-400 rounded-md hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 outline-none focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:text-gray-100 dark:focus:bg-gray-800 transition ease-in-out duration-150 mt-1">Email reports</a>
-
-
-    <a href="/hackershare.dev/settings/danger-zone" class="flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 dark:text-gray-400 rounded-md hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 outline-none focus:outline-none focus:text-gray-900 focus:bg-gray-50 dark:focus:text-gray-100 dark:focus:bg-gray-800 transition ease-in-out duration-150 mt-1">Danger zone</a>
 
   </div>
 </div>

app/views/site_connections/index.html.erb

@@ -0,0 +1,43 @@
+<div class="container pt-6">
+  <a class="text-sm text-indigo-600 font-bold" href="<%= site_path(@site) %>">← Back to stats</a>
+  <div class="pb-5 border-b border-gray-200 dark:border-gray-500">
+    <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-gray-100 sm:text-3xl sm:leading-9 sm:truncate">
+      Settings for <%= @site.domain %>
+    </h2>
+  </div>
+  <div class="lg:grid lg:grid-cols-12 lg:gap-x-5 lg:mt-4">
+    <%= render partial: 'settings/nav' %>
+
+    <div class="space-y-6 lg:col-span-9 lg:mt-4">
+      <div class="shadow bg-white dark:bg-gray-800 sm:rounded-md sm:overflow-hidden py-6 px-4 sm:p-6">
+        <header class="relative">
+          <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">External Connections</h2>
+          <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">You can create multiple read-only connections to databases that are available for visual BI, such as superset metabase and cubejs.</p>
+          <a href="" target="_blank">
+                <svg class="w-6 h-6 absolute top-0 right-0 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
+          </a>
+        </header>
+
+        <div class="mt-6">
+          <% @site_connections.each do |conn| %>
+            <div class="flex relative w-full max-w-xl mt-2 text-sm">
+              <input type="text" id="<%= conn.id %>" readonly="readonly" value="<%= conn.link %>" class="transition bg-gray-100 dark:bg-gray-900 outline-none appearance-none border border-transparent rounded rounded-r-none w-full p-2 text-gray-700 dark:text-gray-300 focus:outline-none focus:border-gray-300 dark:focus:border-gray-500">
+              <button onclick="var input = document.getElementById('<%= conn.id %>'); input.focus(); input.select(); document.execCommand('copy');" href="javascript:void(0)" class="py-2 px-4 bg-gray-200 dark:bg-gray-850 text-indigo-800 dark:text-indigo-500 rounded-none border-r border-gray-300 dark:border-gray-500 hover:bg-gray-300 dark:hover:bg-gray-825">
+                <svg class="feather-sm" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+              </button>
+              <%= link_to site_site_connection_path(@site, conn), method: :delete, type: :button, remote: true, data: {confirm: "sure?"}, class: "py-2 px-4 bg-gray-200 dark:bg-gray-850 text-red-600 dark:text-red-500 rounded-l-none hover:bg-gray-300 dark:hover:bg-gray-825" do %>
+                <svg class="feather feather-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+              <% end %>
+
+
+            </div>
+          <% end %>
+          <% unless @site.site_connections.present? %>
+            <%= link_to "+ New", site_site_connections_path(@site), remote: true, method: :post, class: "button mt-4", data: {disable_with: disable_with_spinner('+ New')}  %>
+          <% end %>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>

config/routes.rb

@@ -20,6 +20,8 @@
     resources :browsers, only: [:index]
     resources :device_types, only: [:index]
     resources :oses, only: [:index]
+
+    resources :site_connections, only: [:index, :new, :show, :destroy, :create]
     member do
       get "snippet"
       get "debug"

test/controllers/site_connections_controller_test.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class SiteConnectionsControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end