Add possibility to search products from dashboard

features/admin/searching_products_via_the_dashboard_search_field.feature

@@ -0,0 +1,24 @@
+@admin_dashboard
+Feature: Searching products via the search field
+    In order to search for products easily
+    As an Administrator
+    I want to be able to search for products from any admin page
+
+    Background:
+        Given the store operates on a channel named "WEB-POLAND"
+        And there is product "Onion" available in this channel
+        And I am logged in as an administrator
+
+    @ui @no-api
+    Scenario: Searching for a product via the dashboard search field
+        When I open administration dashboard
+        And I search for product "Onion" via the navbar
+        Then I should see a single product in the list
+        And I should see a product with name "Onion"
+
+    @ui @no-api
+    Scenario: Searching for a product via the menu search field
+        When I open administration dashboard
+        And I search for product "Onion" via the menu
+        Then I should see a single product in the list
+        And I should see a product with name "Onion"

src/Sylius/Behat/Context/Ui/Admin/DashboardContext.php

@@ -17,6 +17,7 @@
 use FriendsOfBehat\PageObjectExtension\Page\UnexpectedPageException;
 use Sylius\Behat\Page\Admin\DashboardPageInterface;
 use Sylius\Component\Core\Model\ChannelInterface;
+use Sylius\Component\Core\Model\ProductInterface;
 use Webmozart\Assert\Assert;
 
 final class DashboardContext implements Context
@@ -81,6 +82,22 @@ public function iChooseChannel(string $channelName): void
         $this->dashboardPage->chooseChannel($channelName);
     }
 
+    /**
+     * @When I search for product :product via the navbar
+     */
+    public function iSearchForProductViaTheNavbar(ProductInterface $product): void
+    {
+        $this->dashboardPage->searchForProductViaNavbar($product);
+    }
+
+    /**
+     * @When I search for product :product via the menu
+     */
+    public function iSearchForProductViaTheMenu(ProductInterface $product): void
+    {
+        $this->dashboardPage->searchForProductViaSidebar($product);
+    }
+
     /**
      * @When I log out
      */

src/Sylius/Behat/Page/Admin/DashboardPage.php

@@ -17,6 +17,7 @@
 use Behat\Mink\Session;
 use FriendsOfBehat\PageObjectExtension\Page\SymfonyPage;
 use Sylius\Behat\Service\Accessor\TableAccessorInterface;
+use Sylius\Component\Core\Model\ProductInterface;
 use Symfony\Component\Routing\RouterInterface;
 
 class DashboardPage extends SymfonyPage implements DashboardPageInterface
@@ -124,6 +125,16 @@ public function chooseNextPeriod(): void
         usleep(500000);
     }
 
+    public function searchForProductViaNavbar(ProductInterface $productName): void
+    {
+        $this->searchForProductIn($productName->getName(), 'product_navbar_search');
+    }
+
+    public function searchForProductViaSidebar(ProductInterface $productName): void
+    {
+        $this->searchForProductIn($productName->getName(), 'product_sidebar_search');
+    }
+
     public function getRouteName(): string
     {
         return 'sylius_admin_dashboard';
@@ -145,9 +156,18 @@ protected function getDefinedElements(): array
             'new_customers' => '#new-customers',
             'new_orders' => '#new-orders',
             'order_list' => '#orders',
+            'product_navbar_search' => '[data-test-navbar-product-search]',
+            'product_sidebar_search' => '[data-test-sidebar-product-search]',
             'sub_header' => '.ui.header .content .sub.header',
             'total_sales' => '#total-sales',
             'year_split_by_months_statistics_button' => 'button[data-stats-button="year"]',
         ]);
     }
+
+    private function searchForProductIn(string $productName, string $searchForm): void
+    {
+        $form = $this->getElement($searchForm);
+        $form->find('css', 'input')->setValue($productName);
+        $form->find('css', 'button')->click();
+    }
 }

src/Sylius/Behat/Page/Admin/DashboardPageInterface.php

@@ -14,6 +14,7 @@
 namespace Sylius\Behat\Page\Admin;
 
 use FriendsOfBehat\PageObjectExtension\Page\SymfonyPageInterface;
+use Sylius\Component\Core\Model\ProductInterface;
 
 interface DashboardPageInterface extends SymfonyPageInterface
 {
@@ -44,4 +45,8 @@ public function chooseMonthSplitByDaysInterval(): void;
     public function choosePreviousPeriod(): void;
 
     public function chooseNextPeriod(): void;
+
+    public function searchForProductViaNavbar(ProductInterface $productName): void;
+
+    public function searchForProductViaSidebar(ProductInterface $productName): void;
 }

src/Sylius/Behat/Resources/config/suites/ui/admin/dashboard.yaml

@@ -28,6 +28,7 @@ default:
 
                 - sylius.behat.context.ui.admin.dashboard
                 - sylius.behat.context.ui.admin.login
+                - sylius.behat.context.ui.admin.managing_products
                 - sylius.behat.context.ui.admin.notification
                 - sylius.behat.context.ui.browser
 

src/Sylius/Bundle/AdminBundle/Menu/MainMenuBuilder.php

@@ -34,7 +34,8 @@ public function createMenu(array $options): ItemInterface
     {
         $menu = $this->factory->createItem('root');
 
-        $this->addDashboardSubmenu($menu);
+        $this->addSearchForm($menu);
+        $this->addDashboardItem($menu);
         $this->addCatalogSubMenu($menu);
         $this->addSalesSubMenu($menu);
         $this->addCustomersSubMenu($menu);
@@ -47,7 +48,15 @@ public function createMenu(array $options): ItemInterface
         return $menu;
     }
 
-    private function addDashboardSubmenu(ItemInterface $menu): void
+    private function addSearchForm(ItemInterface $menu): void
+    {
+        $menu
+            ->addChild('search')
+            ->setExtra('template', '@SyliusAdmin/shared/crud/common/sidebar/search.html.twig')
+        ;
+    }
+
+    private function addDashboardItem(ItemInterface $menu): void
     {
         $menu
             ->addChild('dashboard')

src/Sylius/Bundle/AdminBundle/templates/shared/crud/common/navbar/menu/search.html.twig

@@ -1,12 +1,10 @@
-<form action="#" method="get" autocomplete="off" novalidate="">
-    <div class="input-icon">
-        <input type="text" placeholder="Search..." aria-label="Search in website" class="form-control      ">
-        <span class="input-icon-addon">
-            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
-                <path d="M21 21l-6 -6"></path>
-            </svg>
-        </span>
+{% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon %}
+
+<form action="{{ path('sylius_admin_product_index') }}" method="get" {{ sylius_test_html_attribute('navbar-product-search') }}>
+    <div class="input-group">
+        <input type="text" name="criteria[search][value]" placeholder="{{ 'sylius.ui.search_products'|trans }}..." class="form-control">
+        <button type="submit" class="btn">
+            {{ icon({icon: 'search', class: 'icon icon-tabler mx-1'}) }}
+        </button>
     </div>
 </form>

src/Sylius/Bundle/AdminBundle/templates/shared/crud/common/sidebar/menu/menu.html.twig

@@ -10,7 +10,11 @@
 
 {% block list %}
     {% for item in item.children %}
-        {{ block('item') }}
+        {% if item.extras.template is defined %}
+            {% include item.extras.template %}
+        {% else %}
+            {{ block('item') }}
+        {% endif %}
     {% endfor %}
 {% endblock %}
 
@@ -77,7 +81,11 @@
 
 {% block childrenList %}
     {% for item in item.children %}
-        {{ block('childItem') }}
+        {% if item.extras.template is defined %}
+            {% include item.extras.template %}
+        {% else %}
+            {{ block('childItem') }}
+        {% endif %}
     {% endfor %}
 {% endblock %}
 

src/Sylius/Bundle/AdminBundle/templates/shared/crud/common/sidebar/search.html.twig

@@ -0,0 +1,10 @@
+{% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon %}
+
+<form action="{{ path('sylius_admin_product_index') }}" method="get" class="mb-3 mt-3 mt-md-0" {{ sylius_test_html_attribute('sidebar-product-search') }}>
+    <div class="input-group">
+        <input type="text" name="criteria[search][value]" placeholder="{{ 'sylius.ui.search_products'|trans }}..." class="form-control">
+        <button type="submit" class="btn">
+            {{ icon({icon: 'search', class: 'icon icon-tabler mx-0'}) }}
+        </button>
+    </div>
+</form>