All SavedScenario info menu options including abilities

Gemfile

@@ -85,6 +85,7 @@ group :development, :test do
   gem "rspec-rails"
   gem "factory_bot_rails"
   gem 'shoulda-matchers'
+  gem "rails-controller-testing"
 end
 
 group :development do

Gemfile.lock

@@ -310,6 +310,10 @@ GEM
       activesupport (= 7.2.1.1)
       bundler (>= 1.15.0)
       railties (= 7.2.1.1)
+    rails-controller-testing (1.0.5)
+      actionpack (>= 5.0.1.rc1)
+      actionview (>= 5.0.1.rc1)
+      activesupport (>= 5.0.1.rc1)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -499,6 +503,7 @@ DEPENDENCIES
   mysql2 (~> 0.5)
   puma (>= 5.0)
   rails (~> 7.2.1)
+  rails-controller-testing
   rake
   rdiscount (~> 2.2)
   rspec-rails

app/assets/stylesheets/application.tailwind.css

@@ -26,6 +26,11 @@
     @apply hover:text-midnight-200;
   }
 
+  .button-warning {
+    @apply bg-red-600;
+    @apply text-midnight-200;
+  }
+
   .logo {
     filter: brightness(0.25);
   }
@@ -44,8 +49,106 @@
 @import 'actiontext.css';
 
 
-input[type="email"], input[type="password"], input[type="text"] {
+input[type="email"], input[type="password"], input[type="text"], select {
   @apply border-gray-200 rounded-md bg-midnight-200;
 }
 
 
+/**
+  * Modal -----------------------------------------------------------------------------------------
+  */
+
+  @keyframes modal-backdrop-enter {
+  from {
+    @apply bg-gray-900/0 backdrop-blur-none;
+  }
+
+  to {
+    @apply bg-gray-900/75 backdrop-blur-sm;
+  }
+}
+
+@keyframes modal-backdrop-leave {
+  from {
+    @apply bg-gray-900/75 backdrop-blur-sm;
+  }
+
+  to {
+    @apply bg-gray-900/0 backdrop-blur-none;
+  }
+}
+
+.modal-backdrop {
+  @apply bg-gray-900/75 backdrop-blur-sm transition;
+
+  animation-iteration-count: 1;
+  animation: modal-backdrop-enter 0.15s ease-in-out;
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 40;
+}
+
+.modal-backdrop.modal-backdrop-leave {
+  @apply bg-gray-900/0 backdrop-blur-none;
+  animation-name: modal-backdrop-leave;
+}
+
+@keyframes modal-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1.0);
+  }
+}
+
+@keyframes modal-leave {
+  from {
+    opacity: 1;
+    transform: scale(1.0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+.modal {
+  @apply bg-white rounded-md shadow-xl text-sm;
+
+  animation-iteration-count: 1;
+  animation: modal-enter 0.15s ease-in-out;
+  opacity: 1;
+  transform: scale(1.0) translateY(0px);
+  width: 500px;
+  z-index: 50;
+}
+
+.modal.modal-leave {
+  animation-name: modal-leave;
+  opacity: 0;
+}
+
+.modal-wrapper {
+  @apply py-12;
+
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: fill-available;
+  justify-content: start;
+  left: 0;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 50;
+}

app/components/hovercard/component.html.erb

@@ -9,7 +9,7 @@
   <%# static card %>
   <%# should make text optional and setup the @path with turbo see: https://boringrails.com/articles/hovercards-stimulus/ %>
   <div class="relative opacity-0 transition delay-500 duration-300" data-hovercard-target="card">
-    <div data-tooltip-arrow class="absolute top-0 right-2 z-50 shadow-lg rounded-lg p-3 min-w-max-content bg-midnight-300 text-midnight-800">
+    <div data-tooltip-arrow class="absolute top-0 <%= placement_class %> z-50 shadow-lg rounded-lg p-3 min-w-max-content bg-midnight-300 text-midnight-800">
       <div class="flex space-x-3 items-center w-48 text-sm">
         <%= @text %>
       </div>

app/components/hovercard/component.rb

@@ -4,5 +4,6 @@
   class Component < ApplicationComponent
     option :path
     option :text, default: proc { "" }
+    option :placement_class, default: proc { 'right-2' }
   end
 end

app/components/hovercard_with_version/component.html.erb

@@ -0,0 +1,9 @@
+<%= render(Hovercard::Component.new(
+    path: '',
+    text: t("version.#{version}"),
+    placement_class: "left-2"
+  )) do %>
+  <div class="text-midnight-400 mt-5">
+    <%= "##{version}"%>
+  </div>
+<% end %>

app/components/hovercard_with_version/component.rb

@@ -0,0 +1,5 @@
+module HovercardWithVersion
+  class Component < ApplicationComponent
+    option :version
+  end
+end

app/components/modal_component.html.erb

@@ -17,32 +17,31 @@
         tabindex="-1"
       >
         <%# begin: header %>
-        <div class="border-b px-8 pt-5 pb-4 flex items-center">
-          <h2 class="text-lg font-semibold" id="modal-title">
-            <%= @title %>
-          </h2>
+        <div class="px-8 pt-5 pb-4 flex flex-col bg-midnight-300 rounded-t-md">
           <% if stimulus.enabled? %>
             <button
               class="
-                p-1
                 -mr-2
                 rounded
                 ml-auto
                 transition
-                text-gray-600
-                hover:bg-gray-200
-                active:bg-gray-300
+                text-midnight-800
+                hover:text-midnight-400
+                active:text-midnight-400
               "
               data-action="<%= stimulus.button_close_action %>"
               aria-label="Close"
             >
-              <%= inline_svg_tag("hero/20/x-mark.svg") %>
+              <%= heroicon 'x-circle', options: { class: 'w-6 h-6' } %>
             </button>
           <% end %>
+          <h2 class="text-xl text-midnight-800" id="modal-title">
+            <%= @title %>
+          </h2>
         </div>
         <%# end: header %>
         <%# begin: content %>
-        <div class="px-8 py-6 bg-gray-50 rounded-b">
+        <div class="px-8 py-6 bg-midnight-200 rounded-b">
           <%= content %>
         </div>
         <%# end: content %>

app/components/notice_banner/component.html.erb

@@ -0,0 +1,7 @@
+<div class="rounded-md border flex border-grey-200 p-2 px-5 mt-5 text-sm text-midnight-800">
+  <span class="mr-5"><%= heroicon @icon, options: { class: 'w-5 h-5' } %></span>
+  <span class="mr-2"><%= @text %></span>
+  <% if @path %>
+    <span class="underline hover:text-midnight-980"><%= link_to @button_text, @path, method: :put, data: { 'turbo-method': :put }%></span>
+  <% end %>
+</div>

app/components/notice_banner/component.rb

@@ -0,0 +1,8 @@
+module NoticeBanner
+  class Component < ApplicationComponent
+    option :text
+    option :path, default: proc { "" }
+    option :button_text, default: proc { "" }
+    option :icon, default: proc { 'information-circle' }
+  end
+end

app/components/notice_banner/trash_component.rb

@@ -0,0 +1,5 @@
+module NoticeBanner
+  class TrashComponent < Component
+    option :icon, default: proc { "trash" }
+  end
+end

app/components/saved_scenarios/feature/group_select_component.html.erb

@@ -0,0 +1,2 @@
+<%= form.label :group, t('scenario.group'), class: 'text-sm text-gray-400 mb-2'%>
+<%= form.select :group, options_for_select(featured_scenario_groups_collection), class: 'mb-2'%>

app/components/saved_scenarios/feature/group_select_component.rb

@@ -0,0 +1,9 @@
+module SavedScenarios::Feature
+  class GroupSelectComponent < ApplicationComponent
+    option :form
+
+    def featured_scenario_groups_collection
+      FeaturedScenario::GROUPS.map { |option| [ t("scenario.#{option}"), option ] }
+    end
+  end
+end

app/components/saved_scenarios/feature/owner_select_component.html.erb

@@ -0,0 +1,2 @@
+<%= form.label :owner_id, t('scenario.owner'), class: 'text-sm text-gray-400 mb-2'%>
+<%= form.select :owner_id, options_from_collection_for_select(FeaturedScenarioUser.all, "id", "name"), class: 'mb-2'%>

app/components/saved_scenarios/feature/owner_select_component.rb

@@ -0,0 +1,5 @@
+module SavedScenarios::Feature
+  class OwnerSelectComponent < ApplicationComponent
+    option :form
+  end
+end

app/components/saved_scenarios/saved_scenario_info/component.rb → app/components/saved_scenarios/info/component.rb

@@ -1,4 +1,4 @@
-module SavedScenarioInfo
+module SavedScenarios::Info
   class Component < ApplicationComponent
     option :path
     option :saved_scenario

app/components/saved_scenarios/info_users/component.html.erb

@@ -0,0 +1,15 @@
+<div class="flex flex-col">
+  <span class="text-sm text-midnight-400"><%= @title %></span>
+  <div>
+    <% @users.each do |user| %>
+      <%= render(Hovercard::Component.new(
+        path: '',
+        text: hover_text_for(user),
+        placement_class: "left-2"
+      )) do %>
+        <span class="inline-block bg-midnight-900 rounded-md h-8 w-8 mr-5 pt-1 mt-1 text-center text-midnight-200"><%= initials_for(user) %></span>
+      <% end %>
+    <% end %>
+  </div>
+</div>
+

app/components/saved_scenarios/info_users/component.rb

@@ -0,0 +1,28 @@
+module SavedScenarios::InfoUsers
+  class Component < ApplicationComponent
+    option :users
+    option :title
+    option :privacy, default: proc { true }
+
+    # Initials to show
+    def initials_for(saved_scenario_user)
+      saved_scenario_user.initials.capitalize
+    end
+
+    def hover_text_for(saved_scenario_user)
+      if saved_scenario_user.name.present?
+        "#{saved_scenario_user.name} (#{email_for(saved_scenario_user)})"
+      else
+        email_for(saved_scenario_user)
+      end
+    end
+
+    def email_for(saved_scenario_user)
+      if @privacy
+        saved_scenario_user.email.gsub(/^.*?(?=@)/, "\*\*\*")
+      else
+        saved_scenario_user.email
+      end
+    end
+  end
+end

app/components/saved_scenarios/saved_scenario_nav_item/component.html.erb → app/components/saved_scenarios/nav_item/component.html.erb

@@ -1,4 +1,4 @@
-<%= link_to @path, class: "flex p-2 pl-6 w-full transition text-sm #{css_classes}" do %>
+<%= link_to @path, class: "flex p-2 pl-6 w-full transition text-sm #{css_classes}", data: @data do %>
   <span class="mr-5"><%= heroicon @icon, options: { class: 'w-5 h-5' } %></span>
   <span><%= @title %></span>
 <% end %>

app/components/saved_scenarios/saved_scenario_nav_item/component.rb → app/components/saved_scenarios/nav_item/component.rb

@@ -1,18 +1,19 @@
-module SavedScenarioNavItem
+module SavedScenarios::NavItem
   class Component < ApplicationComponent
     option :path
     option :title
     option :icon
     option :active, default: proc { false }
     option :static, default: proc { false }
+    option :data, default: proc { {} }
 
     def css_classes
       if @active
         "text-midnight-800 rounded-md bg-midnight-600 hover:text-midnight-800"
       elsif @static
         "text-midnight-800 hover:underline"
       else
-        "text-midnight-400 hover:text-midnight-800"
+        "text-midnight-450 hover:text-midnight-800"
       end
     end
   end

app/components/saved_scenarios/publish_saved_scenario/component.html.erb → app/components/saved_scenarios/publish/component.html.erb

@@ -1,4 +1,4 @@
-<%= button_to path, method: :put, class: "flex p-2 pl-6 w-full transition text-sm text-midnight-800 hover:hover:underline" do %>
+<%= button_to path, method: :put, class: "flex p-2 pl-6 w-full transition #{available_css} text-sm text-midnight-800 hover:hover:underline" do %>
   <span class="mr-5"><%= heroicon icon, options: { class: 'w-5 h-5' } %></span>
   <span><%= @title %></span>
 <% end %>

app/components/saved_scenarios/publish_saved_scenario/component.rb → app/components/saved_scenarios/publish/component.rb

@@ -1,11 +1,12 @@
-module PublishSavedScenario
+module SavedScenarios::Publish
   class Component < ApplicationComponent
     option :path_on
     option :path_off
     option :icon_on
     option :icon_off
     option :title
     option :status
+    option :available, default: proc { false }
 
     def path
       @status ? @path_on : @path_off
@@ -14,5 +15,9 @@ def path
     def icon
       @status ? @icon_on : @icon_off
     end
+
+    def available_css
+      @available ? "" : "pointer-events-none"
+    end
   end
 end

app/components/saved_scenarios/saved_scenario_row/component.rb → app/components/saved_scenarios/row/component.rb

@@ -1,11 +1,11 @@
-module SavedScenarioRow
+module SavedScenarios::Row
   class Component < ApplicationComponent
     option :path
     option :saved_scenario
 
     # Initials to show
     def initials_for(saved_scenario_user)
-      saved_scenario_user.user_email.first.capitalize
+      saved_scenario_user.initials.capitalize
     end
 
     def first_owner