openproject-primer_view_components 0.64.1 → 0.66.0

data/app/components/primer/open_project/sub_header.rb

@@ -10,6 +10,9 @@ module Primer
       HIDDEN_FILTER_TARGET_SELECTOR = "sub-header.hiddenItemsOnExpandedFilter"
       SHOWN_FILTER_TARGET_SELECTOR = "sub-header.shownItemsOnExpandedFilter"
 
+      MOBILE_ACTIONS_DISPLAY = [:flex, :none].freeze
+      DESKTOP_ACTIONS_DISPLAY = [:none, :flex].freeze
+
       # A button or custom content that will render on the right-hand side of the component.
       #
       # To render a button, call the `with_button` method, which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Button) %>.
@@ -17,25 +20,63 @@ module Primer
       # To render custom content, call the `with_button_component` method and pass a block that returns HTML.
       renders_many :actions, types: {
         button: {
-          renders: lambda { |icon: nil, **kwargs|
-            if icon
-              Primer::Beta::IconButton.new(icon: icon, **kwargs)
+          renders: lambda { |icon_only: false, leading_icon:, label:, **kwargs, &block|
+            if label.nil? || label.empty?
+              raise ArgumentError, "You need to provide a valid label."
+            end
+
+            kwargs[:icon] = leading_icon
+
+            kwargs[:aria] ||= merge_aria(
+              kwargs,
+              { aria: { label: label } }
+            )
+
+            icon_args = kwargs.deep_dup
+
+            if icon_only
+              Primer::Beta::IconButton.new(**icon_args)
             else
-              Primer::Beta::Button.new(**kwargs)
+              @mobile_actions ||= []
+              mobile_component =  Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
+                                                               **icon_args)
+              @mobile_actions.push({ component: mobile_component, block: block})
+
+              Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
             end
           },
         },
-        component: {
-          # A generic slot to render whatever component you like on the right side
+        button_group: {
           renders: lambda { |**kwargs|
-            deny_tag_argument(**kwargs)
-            kwargs[:tag] = :div
-            Primer::BaseComponent.new(**kwargs)
+            Primer::OpenProject::SubHeader::ButtonGroup.new(**kwargs)
+          },
+        },
+        menu: {
+          renders: lambda { |icon_only: false, leading_icon:, label:, button_arguments: {}, **kwargs, &block|
+            if label.nil? || label.empty?
+              raise ArgumentError, "You need to provide a valid label."
+            end
+
+            kwargs[:leading_icon] = leading_icon
+            kwargs[:label] = label
+            kwargs[:button_arguments] = button_arguments
+
+            @mobile_actions ||= []
+            mobile_component =  Primer::OpenProject::SubHeader::Menu.new(icon_only: true,
+                                                                         display: MOBILE_ACTIONS_DISPLAY,
+                                                                         **kwargs)
+            @mobile_actions.push({ component: mobile_component, block: block})
+
+            Primer::OpenProject::SubHeader::Menu.new(icon_only: icon_only,display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
           },
         }
       }
 
       renders_one :filter_input, lambda { |name:, label:, **system_arguments|
+        if label.nil? || label.empty?
+          raise ArgumentError, "You need to provide a valid label."
+        end
+
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "SubHeader-filterInput",
@@ -62,6 +103,7 @@ module Primer
         @mobile_filter_trigger = Primer::Beta::IconButton.new(icon: system_arguments[:leading_visual][:icon],
                                                               display: [:inline_flex, :none],
                                                               aria: { label: label },
+                                                              mr: 2,
                                                               "data-action": "click:sub-header#expandFilterInput",
                                                               "data-targets": HIDDEN_FILTER_TARGET_SELECTOR)
 
@@ -83,18 +125,25 @@ module Primer
       # To render custom content, call the `with_filter_component` method and pass a block that returns HTML.
       renders_one :filter_button, types: {
         button: {
-          renders: lambda { |icon: nil, **kwargs|
-            kwargs[:classes] = class_names(
-              kwargs[:classes],
-              "SubHeader-filterButton"
+          renders: lambda { |icon_only: false, leading_icon: :filter, mobile_label: I18n.t("button_filter"), **kwargs|
+            kwargs[:mr] ||= 2
+            kwargs[:icon] = leading_icon
+
+            kwargs[:aria] ||= merge_aria(
+              kwargs,
+              { aria: { label: mobile_label } }
             )
-            kwargs[:data] ||= {}
-            kwargs[:data][:targets] ||= HIDDEN_FILTER_TARGET_SELECTOR
 
-            if icon
-              Primer::Beta::IconButton.new(icon: icon, **kwargs)
+            icon_args = kwargs.deep_dup
+            icon_args = set_as_hidden_filter_target(icon_args)
+
+            if icon_only
+              Primer::Beta::IconButton.new(**icon_args)
             else
-              Primer::Beta::Button.new(**kwargs)
+              @mobile_filter_button =  Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
+                                                                    **icon_args)
+
+              Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
             end
           },
 
@@ -105,8 +154,7 @@ module Primer
           renders: lambda { |**kwargs|
             deny_tag_argument(**kwargs)
             kwargs[:tag] = :div
-            kwargs[:data] ||= {}
-            kwargs[:data][:targets] ||= HIDDEN_FILTER_TARGET_SELECTOR
+            kwargs = set_as_hidden_filter_target(kwargs)
 
             Primer::BaseComponent.new(**kwargs)
           },
@@ -115,6 +163,21 @@ module Primer
         }
       }
 
+      renders_one :segmented_control, lambda { |**system_arguments, &block|
+          deny_tag_argument(**system_arguments)
+          system_arguments[:mr] ||= 2
+          system_arguments = set_as_hidden_filter_target(system_arguments)
+
+          @segmented_control_block = block
+          @mobile_segmented_control = Primer::OpenProject::SubHeader::SegmentedControl.new(
+            hide_labels: true,
+            display: MOBILE_ACTIONS_DISPLAY,
+            **system_arguments
+          )
+
+          Primer::OpenProject::SubHeader::SegmentedControl.new(display: DESKTOP_ACTIONS_DISPLAY, **system_arguments)
+      }
+
       renders_one :text, lambda { |**system_arguments|
         system_arguments[:font_weight] ||= :bold
 
@@ -138,7 +201,9 @@ module Primer
 
         @filter_container = Primer::BaseComponent.new(tag: :div,
                                                       classes: "SubHeader-filterContainer",
-                                                      display: [:none, :flex],
+                                                      display: DESKTOP_ACTIONS_DISPLAY,
+
+                                                      mr: 2,
                                                       data: { targets: SHOWN_FILTER_TARGET_SELECTOR })
 
         @system_arguments[:classes] = class_names(
@@ -146,6 +211,25 @@ module Primer
           system_arguments[:classes]
         )
       end
+
+      def before_render
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input
+        )
+      end
+
+      def set_as_hidden_filter_target(system_arguments)
+        system_arguments[:data] ||= {}
+        system_arguments[:data] = merge_data(
+            system_arguments, {
+            data: {
+              targets: HIDDEN_FILTER_TARGET_SELECTOR,
+            }
+          }
+        )
+        system_arguments
+      end
     end
   end
 end

data/app/components/primer/open_project/tree_view/icon.html.erb

@@ -0,0 +1 @@
+<%= render(Primer::Beta::Octicon.new(**@system_arguments)) %>

data/app/components/primer/open_project/tree_view/icon.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # An icon for a `TreeView` node.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class Icon < Primer::Component
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+        def initialize(**system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:focusable] = "false"
+          @system_arguments[:display] = :inline_block
+          @system_arguments[:overflow] = :visible
+          @system_arguments[:style] = "vertical-align: text-bottom;"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/icon_pair.html.erb

@@ -0,0 +1,13 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <% if expanded_icon? %>
+    <div data-target="tree-view-icon-pair.expandedIcon" <%= expanded? ? "" : "hidden" %>>
+      <%= expanded_icon %>
+    </div>
+  <% end %>
+
+  <% if collapsed_icon? %>
+    <div data-target="tree-view-icon-pair.collapsedIcon" <%= expanded? ? "hidden" : "" %>>
+      <%= collapsed_icon %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/tree_view/icon_pair.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # A pair of icons for a `TreeView` sub-tree that displays distinct icons when the sub-tree is
+      # expanded and collapsed.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class IconPair < Primer::Component
+        # The expanded icon.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        renders_one :expanded_icon, lambda { |**system_arguments|
+          Icon.new(**system_arguments)
+        }
+
+        # The collapsed icon.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        renders_one :collapsed_icon, lambda { |**system_arguments|
+          Icon.new(**system_arguments)
+        }
+
+        # Whether or not this icon is expanded.
+        #
+        # @return [Boolean]
+        attr_reader :expanded
+        alias expanded? expanded
+
+        # @param expanded [Boolean] If true, the expanded icon is shown and the collapsed icon is hidden, etc.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(expanded: false, **system_arguments)
+          @expanded = expanded
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :"tree-view-icon-pair"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/leading_action.html.erb

@@ -0,0 +1,3 @@
+<div class="TreeViewItemLeadingAction" aria-hidden="true">
+  <%= render(@action) %>
+</div>

data/app/components/primer/open_project/tree_view/leading_action.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # The leading action for `TreeView` nodes.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class LeadingAction < Primer::Component
+        # @param action [ViewComponent::Base] A component or other renderable to use as the action button etc.
+        def initialize(action:)
+          @action = action
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/leaf_node.html.erb

@@ -0,0 +1,18 @@
+<%= render(@node) do |node| %>
+  <% if leading_action? %>
+    <% node.with_leading_action do %>
+      <%= leading_action %>
+    <% end %>
+  <% end %>
+  <% if leading_visual? %>
+    <% node.with_leading_visual do %>
+      <%= leading_visual %>
+    <% end %>
+  <% end %>
+  <% if trailing_visual? %>
+    <% node.with_trailing_visual do %>
+      <%= trailing_visual %>
+    <% end %>
+  <% end %>
+  <% node.with_text_content { @label } %>
+<% end %>

data/app/components/primer/open_project/tree_view/leaf_node.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # A `TreeView` leaf node.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class LeafNode < Primer::Component
+        # @!parse
+        #   # Adds a leading visual icon rendered to the left of the node's label.
+        #   #
+        #   # @param label [String] A label describing the visual, displayed only to screen readers.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        #   def with_leading_visual_icon(label: nil, **system_arguments, &block)
+        #   end
+
+        renders_one :leading_visual, types: {
+          icon: lambda { |label: nil, **system_arguments|
+            merge_system_arguments!(
+              aria: { describedby: leading_visual_label_id }
+            )
+
+            Visual.new(
+              id: leading_visual_label_id,
+              visual: Icon.new(**system_arguments),
+              label: label
+            )
+          }
+        }
+
+        # @!parse
+        #   # Adds a leading action rendered to the left of the node's label and any leading visuals or checkboxes.
+        #   #
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::IconButton) %>.
+        #   def with_leading_action_button(**system_arguments, &block)
+        #   end
+
+        renders_one :leading_action, types: {
+          button: lambda { |**system_arguments|
+            LeadingAction.new(
+              action: Primer::Beta::IconButton.new(
+                scheme: :invisible,
+                **system_arguments
+              )
+            )
+          }
+        }
+
+        # @!parse
+        #   # Adds a trailing visual icon rendered to the right of the node's label.
+        #   #
+        #   # @param label [String] A label describing the visual, displayed only to screen readers.
+        #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        #   def with_trailing_visual_icon(label: nil, **system_arguments, &block)
+        #   end
+
+        renders_one :trailing_visual, types: {
+          icon: lambda { |label: nil, **system_arguments|
+            Visual.new(
+              id: nil,
+              visual: Icon.new(**system_arguments),
+              label: label
+            )
+          }
+        }
+
+        delegate :current?, :merge_system_arguments!, to: :@node
+
+        # @param label [String] The node's label, i.e. it's textual content.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Node) %>.
+        def initialize(label:, **system_arguments)
+          @label = label
+          @system_arguments = system_arguments
+          @system_arguments[:data] = merge_data(
+            @system_arguments,
+            data: { "node-type": "leaf" }
+          )
+
+          @node = Primer::OpenProject::TreeView::Node.new(**@system_arguments)
+        end
+
+        private
+
+        def base_id
+          @base_id ||= self.class.generate_id
+        end
+
+        def leading_visual_label_id
+          @leading_visual_id ||= "#{base_id}-leading-visual-label"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/loading_failure_message.html.erb

@@ -0,0 +1,13 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", color: :danger)) %>
+  <span><%= @text %></span>
+  <div></div> <!-- spacer -->
+  <%= render(Primer::Beta::Button.new(
+    size: :small,
+    scheme: :default,
+    style: "justify-self: start",
+    **@retry_button_arguments
+  )) do %>
+    <%= @retry_button_label %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/tree_view/loading_failure_message.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # A `TreeView` loading failure message.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class LoadingFailureMessage < Primer::Component
+        DEFAULT_TEXT = "Something went wrong"
+        DEFAULT_RETRY_BUTTON_LABEL = "Retry"
+
+        # @param text [String] The failure message to display.
+        # @param retry_button_label [String] The text shown on the retry button.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(text: DEFAULT_TEXT, retry_button_label: DEFAULT_RETRY_BUTTON_LABEL, **system_arguments)
+          @text = text
+          @retry_button_label = retry_button_label
+          @retry_button_arguments = system_arguments.delete(:retry_button_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            @system_arguments.delete(:classes),
+            "TreeViewFailureMessage"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/node.html.erb

@@ -0,0 +1,32 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <div class="TreeViewItemContainer" style="--level: <%= level %>;">
+    <div style="grid-area: spacer; display: flex;">
+      <div style="width: 100%; display: flex;">
+        <% (0...(level - 1)).each do %>
+          <div class="TreeViewItemLevelLine"></div>
+        <% end %>
+      </div>
+    </div>
+    <% if toggle? %>
+      <%= toggle %>
+    <% end %>
+    <% if leading_action? %>
+      <%= leading_action %>
+    <% end %>
+    <div id="<%= content_id %>" class="TreeViewItemContent">
+      <% if @select_variant == :multiple %>
+        <div aria-hidden="true" class="TreeViewItemCheckbox" tabindex="-1">
+          <div class="FormControl-checkbox"></div>
+        </div>
+      <% end %>
+      <% if leading_visual? %>
+        <%= leading_visual %>
+      <% end %>
+      <span class="TreeViewItemContentText"><%= text_content %></span>
+      <% if trailing_visual? %>
+        <%= trailing_visual %>
+      <% end %>
+    </div>
+  </div>
+  <%= content %>
+<% end %>

data/app/components/primer/open_project/tree_view/node.rb

@@ -0,0 +1,155 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # A generic `TreeView` node.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class Node < Primer::Component
+        # Generic leading action slot
+        renders_one :leading_action
+
+        # Generic leading visual slot
+        renders_one :leading_visual
+
+        # Generic trailing visual slot
+        renders_one :trailing_visual
+
+        # Generic toggle button slot
+        renders_one :toggle
+
+        # Generic text content slot (for node's label)
+        renders_one :text_content
+
+        # Wether or not this node is the current node.
+        #
+        # @return [Boolean]
+        attr_reader :current
+        alias current? current
+
+        # This node's checked state.
+        #
+        # @return [String]
+        attr_reader :checked
+
+        # This node's select variant (i.e. check box variant).
+        #
+        # @return [Symbol]
+        attr_reader :select_variant
+
+        DEFAULT_SELECT_VARIANT = :none
+        SELECT_VARIANT_OPTIONS = [
+          :multiple,
+          DEFAULT_SELECT_VARIANT
+        ].freeze
+
+        DEFAULT_CHECKED_STATE = false
+        CHECKED_STATES = [
+          DEFAULT_CHECKED_STATE,
+          true,
+          "mixed"
+        ]
+
+        # @param path [Array<String>] The node's "path," i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path.
+        # @param current [Boolean] Whether or not this node is the current node. The current node is styled differently than regular nodes and is the first element that receives focus when tabbing to the `TreeView` component.
+        # @param select_variant [Symbol] Controls the type of checkbox that appears. <%= one_of(Primer::OpenProject::TreeView::Node::SELECT_VARIANT_OPTIONS) %>
+        # @param checked [Boolean | String] The checked state of the node's checkbox. <%= one_of(Primer::OpenProject::TreeView::Node::CHECKED_STATES) %>
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>.
+        def initialize(
+          path:,
+          current: false,
+          select_variant: DEFAULT_SELECT_VARIANT,
+          checked: DEFAULT_CHECKED_STATE,
+          **system_arguments
+        )
+          @system_arguments = deny_tag_argument(**system_arguments)
+
+          @path = path
+          @current = current
+          @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
+          @checked = fetch_or_fallback(CHECKED_STATES, checked, DEFAULT_CHECKED_STATE)
+
+          @system_arguments[:tag] = :li
+          @system_arguments[:role] = :treeitem
+          @system_arguments[:tabindex] = current? ? 0 : -1
+          @system_arguments[:classes] = class_names(
+            @system_arguments.delete(:classes),
+            "TreeViewItem"
+          )
+
+          @system_arguments[:aria] = merge_aria(
+            @system_arguments, {
+              aria: {
+                level: level,
+                selected: false,
+                checked: checked,
+                labelledby: content_id
+              }
+            }
+          )
+
+          @system_arguments[:data] = merge_data(
+            @system_arguments,
+            { data: { path: @path.to_json } }
+          )
+
+          return unless current?
+
+          @system_arguments[:aria] = merge_aria(
+            @system_arguments,
+            { aria: { current: true } }
+          )
+        end
+
+        # The numeric depth of this node.
+        #
+        # @return [Integer] This node's depth.
+        def level
+          @level ||= @path.size
+        end
+
+        # Merges the given arguments into the current hash of system arguments provided when the component was
+        # initially constructed. This method can be used to add additional arguments just before rendering.
+        #
+        # @param other_arguments [Hash] The other hash of system arguments to merge into the current one.
+        def merge_system_arguments!(**other_arguments)
+          @system_arguments[:aria] = merge_aria(
+            @system_arguments,
+            other_arguments
+          )
+
+          @system_arguments[:data] = merge_data(
+            @system_arguments,
+            other_arguments
+          )
+
+          @system_arguments.merge!(**other_arguments)
+        end
+
+        private
+
+        def before_render
+          if leading_visual?
+          end
+
+          if leading_action?
+            @system_arguments[:data] = merge_data(
+              @system_arguments,
+              { data: { "has-leading-action": true } }
+            )
+          end
+        end
+
+        def content_id
+          @content_id ||= "#{base_id}-content"
+        end
+
+        def base_id
+          @base_id ||= self.class.generate_id
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/skeleton_loader.html.erb

@@ -0,0 +1,23 @@
+<% unless loading_failure_message? %>
+  <% with_loading_failure_message  # set the default %>
+<% end %>
+
+<%= render(Primer::BaseComponent.new(tag: :"tree-view-include-fragment", src: @src, loading: :lazy, data: { target: "tree-view-sub-tree-node.subTree tree-view-sub-tree-node.includeFragment", path: @container.path.to_json }, hidden: @container.expanded?, accept: "text/fragment+html")) do %>
+  <%= render(@container) do %>
+    <%= render(Primer::OpenProject::TreeView::Node.new(path: [*@container.path, :loader])) do |node| %>
+      <% node.with_text_content do %>
+        <div data-target="tree-view-sub-tree-node.loadingIndicator">
+          <% @count.times do %>
+            <span class="TreeViewSkeletonItemContainerStyle TreeViewItemSkeleton">
+              <%= render(Primer::OpenProject::SkeletonBox.new(width: "16px")) %>
+              <%= render(Primer::OpenProject::SkeletonBox.new(width: "100%", classes: "TreeItemSkeletonTextStyles")) %>
+            </span>
+          <% end %>
+        </div>
+        <div data-target="tree-view-sub-tree-node.loadingFailureMessage" hidden>
+          <%= loading_failure_message %>
+        </div>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>