Show url name in Page tree (#1856)

* Show url_path of page in admin page tree The url_path of a page is useful information. We should always display it not only if the page redirects to external. * Format sitemap.scss with Prettier * Change the sitemap urlname background color The old color was too prominent for that information. * Show a legend on top of admin page trees * Use a left aligned column layout for page tree * Slighty more space for node page name and url * Eager load associated records in page tree serializer Now that we need the language and its site we should eager load them in the page tree serializer. Also the locker of a page should be eager loaded. On a site with ~300 pages loading the page tree went from 722ms to 221ms on my machine.
AlchemyCMS · Jun 2, 2020 · 8aa21c7 · 8aa21c7
1 parent 5434465
commit 8aa21c7
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 38 deletions.
diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -108,7 +108,7 @@ $form-right-width: 65% !default;
 $sitemap-line-height: 32px !default;
 $sitemap-page-background-color: rgba($white, 0.75) !default;
 $sitemap-page-hover-color: rgba($light_yellow, 0.5) !default;
-$sitemap-info-background-color: rgba($linked-color, 0.5) !default;
+$sitemap-info-background-color: rgba($white, 0.5) !default;
 $sitemap-highlight-color: rgba(#fffba5, 0.5) !default;
 
 $main-menu-width: 150px !default;

diff --git a/app/assets/stylesheets/alchemy/lists.scss b/app/assets/stylesheets/alchemy/lists.scss
@@ -13,14 +13,6 @@ ul.list {
   padding: 0;
   list-style-type: none;
 
-  &#layoutpages {
-    margin-top: 16px;
-
-    li {
-      margin-left: 8px;
-    }
-  }
-
   li {
     list-style-type: none;
     display: block;

diff --git a/app/assets/stylesheets/alchemy/nodes.scss b/app/assets/stylesheets/alchemy/nodes.scss
@@ -18,7 +18,7 @@
 
   .node_page,
   .node_url {
-    width: 200px;
+    width: 250px;
     max-width: 45%;
     white-space: nowrap;
     text-overflow: ellipsis;

diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss
@@ -1,3 +1,6 @@
+$sitemap-url-large-width: 250px;
+$sitemap-url-xlarge-width: 350px;
+
 #sort_panel {
   background: $light-gray;
   padding: 47px 0 8px 0;
@@ -28,23 +31,35 @@
   padding: 0 10px;
   margin: 2px;
   text-decoration: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 
   &.inactive {
     color: #656565;
   }
 }
 
-.redirect_url {
+.sitemap_url {
+  display: none;
   float: right;
-  text-align: right;
   background-color: $sitemap-info-background-color;
-  line-height: $sitemap-line-height;
+  line-height: $sitemap-line-height - 2px;
   font-size: $small-font-size;
-  padding: 0 2*$default-padding;
-  max-width: 45%;
+  padding: 0 2 * $default-padding;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  border: 1px solid $sitemap-page-background-color;
+
+  @media screen and (min-width: $large-screen-break-point) {
+    display: block;
+    width: $sitemap-url-large-width;
+  }
+
+  @media screen and (min-width: 1440px) {
+    width: $sitemap-url-xlarge-width;
+  }
 }
 
 .sitemap_line_spacer {
@@ -55,7 +70,7 @@
 
 .sitemap_page {
   height: $sitemap-line-height;
-  margin: 3*$default-margin 0;
+  margin: 3 * $default-margin 0;
   position: relative;
   transition: background-color $transition-duration;
 
@@ -89,13 +104,13 @@
   width: 32px;
   line-height: $sitemap-line-height;
   float: left;
-  padding: 0 2*$default-padding;
+  padding: 0 2 * $default-padding;
   text-align: center;
 }
 
 .sitemap_right_tools {
   height: $sitemap-line-height;
-  padding: 0 2*$default-padding;
+  padding: 0 2 * $default-padding;
   float: right;
 
   .sitemap_tool {
@@ -130,7 +145,9 @@
   &.sorting {
     padding-top: 100px;
 
-    .page_icon { cursor: move }
+    .page_icon {
+      cursor: move;
+    }
   }
 
   .page_folder {
@@ -183,25 +200,44 @@
 }
 
 #sitemap_heading {
+  display: flex;
   padding: 0;
-
-  .page_infos {
-    margin-right: 210px;
-    text-align: left;
-    float: right;
-    line-height: 28px;
-    background: transparent;
-  }
+  line-height: 28px;
 
   .page_name {
-    line-height: 28px;
     margin-left: 43px;
   }
+
+  .page_urlname {
+    display: none;
+    margin-left: auto;
+    padding-left: 2 * $default-padding;
+    padding-right: 2 * $default-padding;
+
+    @media screen and (min-width: $large-screen-break-point) {
+      display: block;
+      width: $sitemap-url-large-width;
+    }
+
+    @media screen and (min-width: 1440px) {
+      width: $sitemap-url-xlarge-width;
+    }
+  }
+
+  .page_status {
+    padding-left: 2 * $default-padding;
+    margin-right: 214px;
+    margin-left: auto;
+
+    @media screen and (min-width: $large-screen-break-point) {
+      margin-left: initial;
+    }
+  }
 }
 
 #page_filter_result {
   display: none;
-  margin-left: 2*$default-margin;
+  margin-left: 2 * $default-margin;
 }
 
 .alchemy-dialog {
@@ -213,6 +249,8 @@
     margin: 0;
     padding: 0 24px 8px 8px;
 
-    .page_icon { cursor: default }
+    .page_icon {
+      cursor: default;
+    }
   }
 }
diff --git a/app/serializers/alchemy/page_tree_serializer.rb b/app/serializers/alchemy/page_tree_serializer.rb
@@ -9,7 +9,7 @@ def attributes
     def pages
       tree = []
       path = [{id: object.parent_id, children: tree}]
-      page_list = object.self_and_descendants
+      page_list = object.self_and_descendants.includes({ language: :site }, :locker)
       base_level = object.level - 1
       # Load folded pages in advance
       folded_user_pages = FoldedPage.folded_for_user(opts[:user]).pluck(:page_id)
@@ -60,6 +60,7 @@ def page_hash(page, has_children, level, folded)
         redirects_to_external: page.definition['redirects_to_external'],
         urlname: page.urlname,
         external_urlname: page.definition['redirects_to_external'] ? page.external_urlname : nil,
+        url_path: page.url_path,
         level: level,
         root: level == 1,
         root_or_leaf: level == 1 || !has_children,

diff --git a/app/views/alchemy/admin/layoutpages/index.html.erb b/app/views/alchemy/admin/layoutpages/index.html.erb
@@ -30,6 +30,10 @@
 </div>
 <% end %>
 
-<ul class="list" id="layoutpages">
+<h4 id="sitemap_heading">
+  <span class="page_name"><%= Alchemy::Page.human_attribute_name(:name) %></span>
+</h4>
+
+<ul class="list" id="sitemap">
   <%= render partial: "layoutpage", collection: @layout_root.children %>
 </ul>
diff --git a/app/views/alchemy/admin/pages/_page.html.erb b/app/views/alchemy/admin/pages/_page.html.erb
@@ -159,12 +159,9 @@
         <span class="hint-bubble">{{status_titles.restricted}}</span>
       </span>
     </div>
-    {{#if redirects_to_external}}
-      <div class="redirect_url" title="{{urlname}}">
-        &raquo; <%= Alchemy.t('Redirects to') %>:
-        {{ external_urlname }}
-      </div>
-    {{/if}}
+    <div class="sitemap_url" title="{{url_path}}">
+      {{ url_path }}
+    </div>
     <div class="sitemap_sitename">
       {{#if redirects_to_external}}
         <span class="sitemap_pagename_link inactive">{{ name }}</span>

diff --git a/app/views/alchemy/admin/pages/_sitemap.html.erb b/app/views/alchemy/admin/pages/_sitemap.html.erb
@@ -1,4 +1,10 @@
 <div id="sitemap-wrapper">
+  <h4 id="sitemap_heading">
+    <span class="page_name"><%= Alchemy::Page.human_attribute_name(:name) %></span>
+    <span class="page_urlname"><%= Alchemy::Page.human_attribute_name(:urlname) %></span>
+    <span class="page_status"><%= Alchemy.t(:page_status) %></span>
+  </h4>
+
   <p class="loading"></p>
 </div>
 

diff --git a/spec/requests/alchemy/admin/pages_controller_spec.rb b/spec/requests/alchemy/admin/pages_controller_spec.rb
@@ -106,6 +106,8 @@ module Alchemy
           expect(page['name']).to eq(page_1.name)
           expect(page).to have_key('children')
           expect(page['children'].count).to eq(1)
+          expect(page).to have_key("url_path")
+          expect(page["url_path"]).to eq(page_1.url_path)
 
           page = page['children'].first
 
@@ -115,6 +117,8 @@ module Alchemy
           expect(page['name']).to eq(page_2.name)
           expect(page).to have_key('children')
           expect(page['children'].count).to eq(1)
+          expect(page).to have_key("url_path")
+          expect(page["url_path"]).to eq(page_2.url_path)
 
           page = page['children'].first
 
@@ -124,6 +128,8 @@ module Alchemy
           expect(page['name']).to eq(page_3.name)
           expect(page).to have_key('children')
           expect(page['children'].count).to eq(0)
+          expect(page).to have_key("url_path")
+          expect(page["url_path"]).to eq(page_3.url_path)
         end
 
         context "when branch is folded" do