Default templates: Cleaned up ux, added case for added endpoint

Cleaned up and updated page picker a bit, allowing longer names to show,
clicking through to item without triggering popup, and updated to use
hidden attributes instead of styles.

Added phpunit tests to cover supporting entity-selector-templates
endpoint.

resources/js/components/page-picker.js

@@ -1,7 +1,7 @@
 import {Component} from './component';
 
 function toggleElem(elem, show) {
-    elem.style.display = show ? null : 'none';
+    elem.toggleAttribute('hidden', !show);
 }
 
 export class PagePicker extends Component {
@@ -21,6 +21,7 @@ export class PagePicker extends Component {
     setupListeners() {
         this.selectButton.addEventListener('click', this.showPopup.bind(this));
         this.display.parentElement.addEventListener('click', this.showPopup.bind(this));
+        this.display.addEventListener('click', e => e.stopPropagation());
 
         this.resetButton.addEventListener('click', () => {
             this.setValue('', '');

resources/sass/_layout.scss

@@ -270,10 +270,14 @@ body.flexbox {
   overflow: hidden;
 }
 
-.fill-height {
+.height-fill {
   height: 100%;
 }
 
+.height-auto {
+  height: auto !important;
+}
+
 .float {
   float: left;
   &.right {

resources/views/books/parts/form.blade.php

@@ -40,18 +40,19 @@
         <label for="template-manager">{{ trans('entities.books_default_template') }}</label>
     </button>
     <div refs="collapsible@content" class="collapse-content">
-        <div class="flex-container-row items-center gap-m justify-space-between pt-s pb-xs">
-            <p class="text-muted small my-none">
+        <div class="flex-container-row gap-l justify-space-between pb-xs wrap">
+            <p class="text-muted small my-none min-width-xs flex">
                 {{ trans('entities.books_default_template_explain') }}
             </p>
 
-
+            <div class="min-width-m">
                 @include('form.page-picker', [
                     'name' => 'default_template_id',
                     'placeholder' => trans('entities.books_default_template_select'),
                     'value' => $book?->default_template_id ?? null,
                 ])
             </div>
+        </div>
 
     </div>
 </div>

resources/views/form/page-picker.blade.php

@@ -1,13 +1,13 @@
 
 {{--Depends on entity selector popup--}}
 <div component="page-picker">
-    <div class="input-base overflow-hidden">
-        <span @if($value) style="display: none" @endif refs="page-picker@default-display" class="text-muted italic">{{ $placeholder }}</span>
-        <a @if(!$value) style="display: none" @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" refs="page-picker@display">#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::query()->visible()->find($value)->name ?? '' : '' }}</a>
+    <div class="input-base overflow-hidden height-auto">
+        <span @if($value) hidden @endif refs="page-picker@default-display" class="text-muted italic">{{ $placeholder }}</span>
+        <a @if(!$value) hidden @endif href="{{ url('/link/' . $value) }}" target="_blank" rel="noopener" class="text-page" refs="page-picker@display">#{{$value}}, {{$value ? \BookStack\Entities\Models\Page::query()->visible()->find($value)->name ?? '' : '' }}</a>
     </div>
     <br>
     <input refs="page-picker@input" type="hidden" value="{{$value}}" name="{{$name}}" id="{{$name}}">
-    <button @if(!$value) style="display: none" @endif type="button" refs="page-picker@reset-button" class="text-button">{{ trans('common.reset') }}</button>
-    <span refs="page-picker@button-seperator" @if(!$value) style="display: none" @endif class="sep">|</span>
+    <button @if(!$value) hidden @endif type="button" refs="page-picker@reset-button" class="text-button">{{ trans('common.reset') }}</button>
+    <span refs="page-picker@button-seperator" @if(!$value) hidden @endif class="sep">|</span>
     <button type="button" refs="page-picker@select-button" class="text-button">{{ trans('common.select') }}</button>
 </div>

resources/views/pages/edit.blade.php

@@ -4,7 +4,7 @@
 
 @section('content')
 
-    <div id="main-content" class="flex-fill flex fill-height">
+    <div id="main-content" class="flex-fill flex height-fill">
         <form action="{{ $page->getUrl() }}" autocomplete="off" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill">
             {{ csrf_field() }}
 

tests/Entity/EntitySearchTest.php

@@ -252,6 +252,31 @@ class EntitySearchTest extends TestCase
         $this->withHtml($resp)->assertElementContains($baseSelector, "You don't have the required permissions to select this item");
     }
 
+    public function test_entity_template_selector_search()
+    {
+        $templatePage = $this->entities->newPage(['name' => 'Template search test', 'html' => 'template test']);
+        $templatePage->template = true;
+        $templatePage->save();
+
+        $nonTemplatePage = $this->entities->newPage(['name' => 'Nontemplate page', 'html' => 'nontemplate', 'template' => false]);
+
+        // Visit both to make popular
+        $this->asEditor()->get($templatePage->getUrl());
+        $this->asEditor()->get($nonTemplatePage->getUrl());
+
+        $normalSearch = $this->get('/search/entity-selector-templates?term=test');
+        $normalSearch->assertSee($templatePage->name);
+        $normalSearch->assertDontSee($nonTemplatePage->name);
+
+        $normalSearch = $this->get('/search/entity-selector-templates?term=beans');
+        $normalSearch->assertDontSee($templatePage->name);
+        $normalSearch->assertDontSee($nonTemplatePage->name);
+
+        $defaultListTest = $this->get('/search/entity-selector-templates');
+        $defaultListTest->assertSee($templatePage->name);
+        $defaultListTest->assertDontSee($nonTemplatePage->name);
+    }
+
     public function test_sibling_search_for_pages()
     {
         $chapter = $this->entities->chapterHasPages();