From 3203d3420067b6d250e1e4a55ca60b9034e18f11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Francesco=20Borz=C3=AC?= <borzifrancesco@gmail.com>
Date: Thu, 2 Apr 2020 01:19:36 +0200
Subject: [PATCH] refactor(buttons): reuse code + minor improvements (#561)

---
 .../select-conditions.component.html          |  9 +--
 .../select-conditions.module.ts               |  2 +
 .../creature-loot-template.module.ts          |  2 +
 .../creature-questitem.component.html         | 13 +---
 .../creature-questitem.module.ts              |  2 +
 .../creature-spawn.component.html             | 13 +---
 .../creature-spawn/creature-spawn.module.ts   |  2 +
 .../npc-trainer/npc-trainer.component.html    | 13 +---
 .../npc-trainer/npc-trainer.module.ts         |  2 +
 .../npc-vendor/npc-vendor.component.html      | 13 +---
 .../creature/npc-vendor/npc-vendor.module.ts  |  2 +
 .../pickpocketing-loot-template.module.ts     |  2 +
 ...sai-creature.component.integration.spec.ts |  2 +-
 .../sai-creature/sai-creature.module.ts       |  2 +
 .../select-creature.component.html            |  7 +-
 .../select-creature/select-creature.module.ts |  2 +
 .../skinning-loot-template.module.ts          |  2 +
 .../gameobject-loot-template.component.html   | 13 +---
 .../gameobject-loot-template.module.ts        |  2 +
 .../gameobject-questitem.component.html       | 13 +---
 .../gameobject-questitem.module.ts            |  2 +
 .../gameobject-spawn.component.html           | 13 +---
 .../gameobject-spawn.module.ts                |  2 +
 ...i-gameobject.component.integration.spec.ts |  2 +-
 .../sai-gameobject/sai-gameobject.module.ts   |  4 +-
 .../select-gameobject.component.html          |  7 +-
 .../select-gameobject.module.ts               |  2 +
 .../gossip-menu-option.component.html         | 13 +---
 .../gossip-menu-option.module.ts              |  2 +
 .../gossip-menu/gossip-menu.component.html    | 13 +---
 .../gossip/gossip-menu/gossip-menu.module.ts  |  2 +
 .../select-gossip.component.html              |  7 +-
 .../select-gossip/select-gossip.module.ts     |  2 +
 .../disenchant-loot-template.module.ts        |  2 +
 .../item-enchantment-template.component.html  | 13 +---
 .../item-enchantment-template.module.ts       |  2 +
 .../item-loot-template.component.html         | 13 +---
 .../item-loot-template.module.ts              |  2 +
 .../milling-loot-template.integration.spec.ts |  3 +-
 .../milling-loot-template.module.ts           |  2 +
 .../prospecting-loot-template.module.ts       |  2 +
 .../select-item/select-item.component.html    |  7 +-
 .../item/select-item/select-item.module.ts    |  2 +
 .../creature-questender.component.html        | 13 +---
 .../creature-questender.module.ts             |  2 +
 .../creature-queststarter.component.html      | 13 +---
 .../creature-queststarter.module.ts           |  2 +
 .../gameobject-questender.component.html      | 13 +---
 .../gameobject-questender.module.ts           |  2 +
 .../gameobject-queststarter.component.html    | 13 +---
 .../gameobject-queststarter.module.ts         |  2 +
 .../select-quest/select-quest.component.html  |  7 +-
 .../quest/select-quest/select-quest.module.ts |  2 +
 .../sai-search-existing.component.html        |  7 +-
 .../sai-search-existing.module.ts             |  2 +
 .../sql-editor/sql-editor.component.html      |  8 +-
 .../connection-window.component.scss          |  1 +
 .../sidebar/sidebar.component.html            | 12 ++-
 .../loot-template.component.html              | 13 +---
 .../modules/create/create.component.html      |  2 +-
 .../editor-buttons.component.html             | 12 +++
 .../editor-buttons.component.spec.ts          | 76 +++++++++++++++++++
 .../editor-buttons.component.ts               | 11 +++
 .../editor-buttons/editor-buttons.module.ts   | 16 ++++
 .../query-output/query-output.component.html  |  8 +-
 .../sai-editor/sai-editor.component.html      | 13 +---
 .../modules/sai-editor/sai-editor.module.ts   |  2 +
 .../search-button.component.html              |  6 ++
 .../search-button.component.spec.ts           | 63 +++++++++++++++
 .../search-button/search-button.component.ts  | 12 +++
 .../search-button/search-buttons.module.ts    | 16 ++++
 .../area-selector-modal.component.html        |  7 +-
 .../area-selector/area-selector.module.ts     |  2 +
 .../creature-selector-modal.component.html    |  7 +-
 .../creature-selector.module.ts               |  2 +
 .../faction-selector-modal.component.html     |  7 +-
 .../faction-selector.module.ts                |  2 +
 .../gameobject-selector-modal.component.html  |  7 +-
 .../gameobject-selector.module.ts             |  2 +
 .../holiday-selector-modal.component.html     |  7 +-
 .../holiday-selector.module.ts                |  2 +
 ...-enchantment-selector-modal.component.html |  7 +-
 .../item-enchantment-selector.module.ts       |  2 +
 ...xtended-cost-selector-modal.component.html |  7 +-
 .../item-extended-cost-selector.module.ts     |  2 +
 ...mit-category-selector-modal.component.html |  7 +-
 .../item-limit-category-selector.module.ts    |  2 +
 .../item-selector-modal.component.html        |  7 +-
 .../item-selector/item-selector.module.ts     |  2 +
 .../language-selector-modal.component.html    |  7 +-
 .../language-selector.module.ts               |  2 +
 .../map-selector-modal.component.html         |  7 +-
 .../map-selector/map-selector.module.ts       |  2 +
 .../quest-selector-modal.component.html       |  7 +-
 .../quest-selector/quest-selector.module.ts   |  2 +
 .../skill-selector-modal.component.html       |  7 +-
 .../skill-selector/skill-selector.module.ts   |  2 +
 .../spell-selector-modal.component.html       |  7 +-
 .../spell-selector/spell-selector.module.ts   |  2 +
 99 files changed, 369 insertions(+), 343 deletions(-)
 create mode 100644 src/app/shared/modules/editor-buttons/editor-buttons.component.html
 create mode 100644 src/app/shared/modules/editor-buttons/editor-buttons.component.spec.ts
 create mode 100644 src/app/shared/modules/editor-buttons/editor-buttons.component.ts
 create mode 100644 src/app/shared/modules/editor-buttons/editor-buttons.module.ts
 create mode 100644 src/app/shared/modules/search-button/search-button.component.html
 create mode 100644 src/app/shared/modules/search-button/search-button.component.spec.ts
 create mode 100644 src/app/shared/modules/search-button/search-button.component.ts
 create mode 100644 src/app/shared/modules/search-button/search-buttons.module.ts

diff --git a/src/app/features/conditions/select-conditions/select-conditions.component.html b/src/app/features/conditions/select-conditions/select-conditions.component.html
index fda2aa2ef1..f353e5047a 100644
--- a/src/app/features/conditions/select-conditions/select-conditions.component.html
+++ b/src/app/features/conditions/select-conditions/select-conditions.component.html
@@ -35,14 +35,9 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Limit">
       </div>
       <div class="col-sm-12 col-md-6 mt-1 mt-md-0">
+        <keira-search-button [searchService]="selectService"></keira-search-button>
         <button
-          class="btn btn-primary btn-sm mr-2"
-          id="search-btn"
-          [disabled]="selectService.queryForm.invalid"
-          (click)="selectService.onSearch()"
-        >Search existing</button>
-        <button
-          class="btn btn-success btn-sm mt-1 mt-sm-0"
+          class="btn btn-success btn-sm mt-1 ml-2 mt-sm-0"
           id="create-new-btn"
           [disabled]="selectService.queryForm.invalid"
           (click)="onCreateNew()"
diff --git a/src/app/features/conditions/select-conditions/select-conditions.module.ts b/src/app/features/conditions/select-conditions/select-conditions.module.ts
index 4f6c268cd9..7263551151 100644
--- a/src/app/features/conditions/select-conditions/select-conditions.module.ts
+++ b/src/app/features/conditions/select-conditions/select-conditions.module.ts
@@ -9,6 +9,7 @@ import { QueryOutputModule } from '@keira-shared/modules/query-output/query-outp
 import { SelectConditionsComponent } from './select-conditions.component';
 import { CreateModule } from '@keira-shared/modules/create/create.module';
 import { highlightOptions } from '@keira-config/highlight.config';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   declarations: [
@@ -22,6 +23,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
     CreateModule,
     HighlightModule.forRoot(highlightOptions),
     NgxDatatableModule,
+    SearchButtonsModule,
   ],
   exports: [
     SelectConditionsComponent,
diff --git a/src/app/features/creature/creature-loot-template/creature-loot-template.module.ts b/src/app/features/creature/creature-loot-template/creature-loot-template.module.ts
index 3cf0ae7f1b..4d4d1a4b8a 100644
--- a/src/app/features/creature/creature-loot-template/creature-loot-template.module.ts
+++ b/src/app/features/creature/creature-loot-template/creature-loot-template.module.ts
@@ -13,6 +13,7 @@ import { FlagsSelectorModule } from '@keira-shared/modules/selectors/flags-selec
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { CreatureLootTemplateService } from './creature-loot-template.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     ItemSelectorModule,
     FlagsSelectorModule,
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     CreatureLootTemplateComponent,
diff --git a/src/app/features/creature/creature-questitem/creature-questitem.component.html b/src/app/features/creature/creature-questitem/creature-questitem.component.html
index 64403e7c4f..e0f8ca2636 100644
--- a/src/app/features/creature/creature-questitem/creature-questitem.component.html
+++ b/src/app/features/creature/creature-questitem/creature-questitem.component.html
@@ -49,18 +49,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/creature/creature-questitem/creature-questitem.module.ts b/src/app/features/creature/creature-questitem/creature-questitem.module.ts
index dba530d11d..bdc2802759 100644
--- a/src/app/features/creature/creature-questitem/creature-questitem.module.ts
+++ b/src/app/features/creature/creature-questitem/creature-questitem.module.ts
@@ -11,6 +11,7 @@ import { CreatureQuestitemComponent } from './creature-questitem.component';
 import { ItemSelectorModule } from '@keira-shared/modules/selectors/item-selector/item-selector.module';
 import { CreatureQuestitemService } from './creature-questitem.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     ItemSelectorModule,
     ToastrModule.forRoot(toastrConfig),
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     CreatureQuestitemComponent,
diff --git a/src/app/features/creature/creature-spawn/creature-spawn.component.html b/src/app/features/creature/creature-spawn/creature-spawn.component.html
index e2aaecf78f..24477ac287 100644
--- a/src/app/features/creature/creature-spawn/creature-spawn.component.html
+++ b/src/app/features/creature/creature-spawn/creature-spawn.component.html
@@ -170,18 +170,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/creature/creature-spawn/creature-spawn.module.ts b/src/app/features/creature/creature-spawn/creature-spawn.module.ts
index 979b126a67..44b6104fa8 100644
--- a/src/app/features/creature/creature-spawn/creature-spawn.module.ts
+++ b/src/app/features/creature/creature-spawn/creature-spawn.module.ts
@@ -14,6 +14,7 @@ import { SingleValueSelectorModule } from '@keira-shared/modules/selectors/singl
 import { CreatureSpawnService } from './creature-spawn.service';
 import { MapSelectorModule } from '@keira-shared/modules/selectors/map-selector/map-selector.module';
 import { AreaSelectorModule } from '@keira-shared/modules/selectors/area-selector/area-selector.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -31,6 +32,7 @@ import { AreaSelectorModule } from '@keira-shared/modules/selectors/area-selecto
     SingleValueSelectorModule,
     MapSelectorModule,
     AreaSelectorModule,
+    EditorButtonsModule,
   ],
   exports: [
     CreatureSpawnComponent,
diff --git a/src/app/features/creature/npc-trainer/npc-trainer.component.html b/src/app/features/creature/npc-trainer/npc-trainer.component.html
index 716a21dcd1..d421227702 100644
--- a/src/app/features/creature/npc-trainer/npc-trainer.component.html
+++ b/src/app/features/creature/npc-trainer/npc-trainer.component.html
@@ -80,18 +80,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/creature/npc-trainer/npc-trainer.module.ts b/src/app/features/creature/npc-trainer/npc-trainer.module.ts
index 1f11b4426f..637e25e4d7 100644
--- a/src/app/features/creature/npc-trainer/npc-trainer.module.ts
+++ b/src/app/features/creature/npc-trainer/npc-trainer.module.ts
@@ -12,6 +12,7 @@ import { NpcTrainerComponent } from './npc-trainer.component';
 import { NpcTrainerService } from './npc-trainer.service';
 import { SpellSelectorModule } from '@keira-shared/modules/selectors/spell-selector/spell-selector.module';
 import { SkillSelectorModule } from '@keira-shared/modules/selectors/skill-selector/skill-selector.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -27,6 +28,7 @@ import { SkillSelectorModule } from '@keira-shared/modules/selectors/skill-selec
     NgxDatatableModule,
     SpellSelectorModule,
     SkillSelectorModule,
+    EditorButtonsModule,
   ],
   exports: [
     NpcTrainerComponent,
diff --git a/src/app/features/creature/npc-vendor/npc-vendor.component.html b/src/app/features/creature/npc-vendor/npc-vendor.component.html
index 442eb955a5..bb18efd846 100644
--- a/src/app/features/creature/npc-vendor/npc-vendor.component.html
+++ b/src/app/features/creature/npc-vendor/npc-vendor.component.html
@@ -82,18 +82,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/creature/npc-vendor/npc-vendor.module.ts b/src/app/features/creature/npc-vendor/npc-vendor.module.ts
index deecf3794d..7a63c17ef1 100644
--- a/src/app/features/creature/npc-vendor/npc-vendor.module.ts
+++ b/src/app/features/creature/npc-vendor/npc-vendor.module.ts
@@ -13,6 +13,7 @@ import { ItemSelectorModule } from '@keira-shared/modules/selectors/item-selecto
 import { NpcVendorService } from './npc-vendor.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
 import { ItemExtendedCostSelectorModule } from '@keira-shared/modules/selectors/item-extended-cost-selector/item-extended-cost-selector.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { ItemExtendedCostSelectorModule } from '@keira-shared/modules/selectors/
     ItemSelectorModule,
     IconModule,
     ItemExtendedCostSelectorModule,
+    EditorButtonsModule,
   ],
   exports: [
     NpcVendorComponent,
diff --git a/src/app/features/creature/pickpocketing-loot-template/pickpocketing-loot-template.module.ts b/src/app/features/creature/pickpocketing-loot-template/pickpocketing-loot-template.module.ts
index 2167f69758..5e2ce739a7 100644
--- a/src/app/features/creature/pickpocketing-loot-template/pickpocketing-loot-template.module.ts
+++ b/src/app/features/creature/pickpocketing-loot-template/pickpocketing-loot-template.module.ts
@@ -13,6 +13,7 @@ import { ItemSelectorModule } from '@keira-shared/modules/selectors/item-selecto
 import { FlagsSelectorModule } from '@keira-shared/modules/selectors/flags-selector/flags-selector.module';
 import { PickpocketingLootTemplateService } from './pickpocketing-loot-template.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     ItemSelectorModule,
     FlagsSelectorModule,
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     PickpocketingLootTemplateComponent,
diff --git a/src/app/features/creature/sai-creature/sai-creature.component.integration.spec.ts b/src/app/features/creature/sai-creature/sai-creature.component.integration.spec.ts
index 23478db645..ed38a8f13b 100644
--- a/src/app/features/creature/sai-creature/sai-creature.component.integration.spec.ts
+++ b/src/app/features/creature/sai-creature/sai-creature.component.integration.spec.ts
@@ -12,7 +12,7 @@ import { SaiCreatureHandlerService } from '../sai-creature-handler.service';
 
 class SaiCreaturePage extends MultiRowEditorPageObject<SaiCreatureComponent> {}
 
-describe('SaiEditorComponent integration tests', () => {
+describe('SaiCreatureComponent integration tests', () => {
   let component: SaiCreatureComponent;
   let fixture: ComponentFixture<SaiCreatureComponent>;
   let handlerService: SaiCreatureHandlerService;
diff --git a/src/app/features/creature/sai-creature/sai-creature.module.ts b/src/app/features/creature/sai-creature/sai-creature.module.ts
index 3bc3d7c16e..15d936236d 100644
--- a/src/app/features/creature/sai-creature/sai-creature.module.ts
+++ b/src/app/features/creature/sai-creature/sai-creature.module.ts
@@ -13,6 +13,7 @@ import { SingleValueSelectorModule } from '@keira-shared/modules/selectors/singl
 import { SaiCreatureComponent } from './sai-creature.component';
 import { SaiEditorModule } from '@keira-shared/modules/sai-editor/sai-editor.module';
 import { SaiCreatureEditorService } from './sai-creature-editor.service';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { SaiCreatureEditorService } from './sai-creature-editor.service';
     FlagsSelectorModule,
     SingleValueSelectorModule,
     SaiEditorModule,
+    EditorButtonsModule,
   ],
   exports: [
     SaiCreatureComponent,
diff --git a/src/app/features/creature/select-creature/select-creature.component.html b/src/app/features/creature/select-creature/select-creature.component.html
index 58871abae0..fd39fc317f 100644
--- a/src/app/features/creature/select-creature/select-creature.component.html
+++ b/src/app/features/creature/select-creature/select-creature.component.html
@@ -31,12 +31,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Limit">
       </div>
       <div class="col-2">
-        <button
-          class="btn btn-primary btn-sm"
-          id="search-btn"
-          [disabled]="selectService.queryForm.invalid"
-          (click)="selectService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="selectService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="selectService.query"></code>
diff --git a/src/app/features/creature/select-creature/select-creature.module.ts b/src/app/features/creature/select-creature/select-creature.module.ts
index 342b02c644..98f8aa959e 100644
--- a/src/app/features/creature/select-creature/select-creature.module.ts
+++ b/src/app/features/creature/select-creature/select-creature.module.ts
@@ -10,6 +10,7 @@ import { SelectCreatureComponent } from './select-creature.component';
 import { CreateModule } from '@keira-shared/modules/create/create.module';
 import { highlightOptions } from '@keira-config/highlight.config';
 import { SelectCreatureService } from './select-creature.service';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   declarations: [
@@ -23,6 +24,7 @@ import { SelectCreatureService } from './select-creature.service';
     CreateModule,
     HighlightModule.forRoot(highlightOptions),
     NgxDatatableModule,
+    SearchButtonsModule,
   ],
   exports: [
     SelectCreatureComponent,
diff --git a/src/app/features/creature/skinning-loot-template/skinning-loot-template.module.ts b/src/app/features/creature/skinning-loot-template/skinning-loot-template.module.ts
index eb1ce55a67..0650488bab 100644
--- a/src/app/features/creature/skinning-loot-template/skinning-loot-template.module.ts
+++ b/src/app/features/creature/skinning-loot-template/skinning-loot-template.module.ts
@@ -13,6 +13,7 @@ import { ItemSelectorModule } from '@keira-shared/modules/selectors/item-selecto
 import { FlagsSelectorModule } from '@keira-shared/modules/selectors/flags-selector/flags-selector.module';
 import { SkinningLootTemplateService } from './skinning-loot-template.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     ItemSelectorModule,
     FlagsSelectorModule,
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     SkinningLootTemplateComponent,
diff --git a/src/app/features/gameobject/gameobject-loot-template/gameobject-loot-template.component.html b/src/app/features/gameobject/gameobject-loot-template/gameobject-loot-template.component.html
index 52c1dc1675..10836a727c 100644
--- a/src/app/features/gameobject/gameobject-loot-template/gameobject-loot-template.component.html
+++ b/src/app/features/gameobject/gameobject-loot-template/gameobject-loot-template.component.html
@@ -116,18 +116,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/gameobject/gameobject-loot-template/gameobject-loot-template.module.ts b/src/app/features/gameobject/gameobject-loot-template/gameobject-loot-template.module.ts
index f88995085c..69856c9f56 100644
--- a/src/app/features/gameobject/gameobject-loot-template/gameobject-loot-template.module.ts
+++ b/src/app/features/gameobject/gameobject-loot-template/gameobject-loot-template.module.ts
@@ -14,6 +14,7 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { GameobjectLootTemplateService } from './gameobject-loot-template.service';
 import { GameobjectHandlerService } from '../gameobject-handler.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -30,6 +31,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     FlagsSelectorModule,
     NgxDatatableModule,
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     GameobjectLootTemplateComponent,
diff --git a/src/app/features/gameobject/gameobject-questitem/gameobject-questitem.component.html b/src/app/features/gameobject/gameobject-questitem/gameobject-questitem.component.html
index 9115fce998..43c1fcd419 100644
--- a/src/app/features/gameobject/gameobject-questitem/gameobject-questitem.component.html
+++ b/src/app/features/gameobject/gameobject-questitem/gameobject-questitem.component.html
@@ -50,18 +50,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/gameobject/gameobject-questitem/gameobject-questitem.module.ts b/src/app/features/gameobject/gameobject-questitem/gameobject-questitem.module.ts
index 912008fce9..23b2340b71 100644
--- a/src/app/features/gameobject/gameobject-questitem/gameobject-questitem.module.ts
+++ b/src/app/features/gameobject/gameobject-questitem/gameobject-questitem.module.ts
@@ -11,6 +11,7 @@ import { GameobjectQuestitemComponent } from './gameobject-questitem.component';
 import { ItemSelectorModule } from '@keira-shared/modules/selectors/item-selector/item-selector.module';
 import { GameobjectQuestitemService } from './gameobject-questitem.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     ItemSelectorModule,
     ToastrModule.forRoot(toastrConfig),
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     GameobjectQuestitemComponent,
diff --git a/src/app/features/gameobject/gameobject-spawn/gameobject-spawn.component.html b/src/app/features/gameobject/gameobject-spawn/gameobject-spawn.component.html
index f55f2a8aaf..9428a2ff61 100644
--- a/src/app/features/gameobject/gameobject-spawn/gameobject-spawn.component.html
+++ b/src/app/features/gameobject/gameobject-spawn/gameobject-spawn.component.html
@@ -141,18 +141,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/gameobject/gameobject-spawn/gameobject-spawn.module.ts b/src/app/features/gameobject/gameobject-spawn/gameobject-spawn.module.ts
index 55713778de..57e7552a71 100644
--- a/src/app/features/gameobject/gameobject-spawn/gameobject-spawn.module.ts
+++ b/src/app/features/gameobject/gameobject-spawn/gameobject-spawn.module.ts
@@ -14,6 +14,7 @@ import { SingleValueSelectorModule } from '@keira-shared/modules/selectors/singl
 import { GameobjectSpawnService } from './gameobject-spawn.service';
 import { MapSelectorModule } from '@keira-shared/modules/selectors/map-selector/map-selector.module';
 import { AreaSelectorModule } from '@keira-shared/modules/selectors/area-selector/area-selector.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -31,6 +32,7 @@ import { AreaSelectorModule } from '@keira-shared/modules/selectors/area-selecto
     SingleValueSelectorModule,
     MapSelectorModule,
     AreaSelectorModule,
+    EditorButtonsModule,
   ],
   exports: [
     GameobjectSpawnComponent,
diff --git a/src/app/features/gameobject/sai-gameobject/sai-gameobject.component.integration.spec.ts b/src/app/features/gameobject/sai-gameobject/sai-gameobject.component.integration.spec.ts
index f4a1c51337..66f47279fc 100644
--- a/src/app/features/gameobject/sai-gameobject/sai-gameobject.component.integration.spec.ts
+++ b/src/app/features/gameobject/sai-gameobject/sai-gameobject.component.integration.spec.ts
@@ -12,7 +12,7 @@ import { GameobjectHandlerService } from '../gameobject-handler.service';
 
 class SaiGameobjectPage extends MultiRowEditorPageObject<SaiGameobjectComponent> {}
 
-describe('SaiEditorComponent integration tests', () => {
+describe('SaiGameobjectComponent integration tests', () => {
   let component: SaiGameobjectComponent;
   let fixture: ComponentFixture<SaiGameobjectComponent>;
   let handlerService: SaiGameobjectHandlerService;
diff --git a/src/app/features/gameobject/sai-gameobject/sai-gameobject.module.ts b/src/app/features/gameobject/sai-gameobject/sai-gameobject.module.ts
index 14035ab40a..fec37d4186 100644
--- a/src/app/features/gameobject/sai-gameobject/sai-gameobject.module.ts
+++ b/src/app/features/gameobject/sai-gameobject/sai-gameobject.module.ts
@@ -13,6 +13,7 @@ import { SingleValueSelectorModule } from '@keira-shared/modules/selectors/singl
 import { SaiGameobjectComponent } from './sai-gameobject.component';
 import { SaiEditorModule } from '@keira-shared/modules/sai-editor/sai-editor.module';
 import { SaiGameobjectEditorService } from './sai-gameobject-editor.service';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -28,7 +29,8 @@ import { SaiGameobjectEditorService } from './sai-gameobject-editor.service';
     NgxDatatableModule,
     FlagsSelectorModule,
     SingleValueSelectorModule,
-    SaiEditorModule
+    SaiEditorModule,
+    EditorButtonsModule,
   ],
   exports: [
     SaiGameobjectComponent,
diff --git a/src/app/features/gameobject/select-gameobject/select-gameobject.component.html b/src/app/features/gameobject/select-gameobject/select-gameobject.component.html
index 07709d9a1c..d084a96989 100644
--- a/src/app/features/gameobject/select-gameobject/select-gameobject.component.html
+++ b/src/app/features/gameobject/select-gameobject/select-gameobject.component.html
@@ -27,12 +27,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Limit">
       </div>
       <div class="col-2">
-        <button
-          class="btn btn-primary btn-sm"
-          id="search-btn"
-          [disabled]="selectService.queryForm.invalid"
-          (click)="selectService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="selectService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="selectService.query"></code>
diff --git a/src/app/features/gameobject/select-gameobject/select-gameobject.module.ts b/src/app/features/gameobject/select-gameobject/select-gameobject.module.ts
index 50df930b08..da52baf1e7 100644
--- a/src/app/features/gameobject/select-gameobject/select-gameobject.module.ts
+++ b/src/app/features/gameobject/select-gameobject/select-gameobject.module.ts
@@ -10,6 +10,7 @@ import { SelectGameobjectComponent } from './select-gameobject.component';
 import { CreateModule } from '@keira-shared/modules/create/create.module';
 import { highlightOptions } from '@keira-config/highlight.config';
 import { SelectGameobjectService } from './select-gameobject.service';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   declarations: [
@@ -23,6 +24,7 @@ import { SelectGameobjectService } from './select-gameobject.service';
     CreateModule,
     HighlightModule.forRoot(highlightOptions),
     NgxDatatableModule,
+    SearchButtonsModule,
   ],
   exports: [
     SelectGameobjectComponent,
diff --git a/src/app/features/gossip/gossip-menu-option/gossip-menu-option.component.html b/src/app/features/gossip/gossip-menu-option/gossip-menu-option.component.html
index ab6f7994ab..016a4e66e2 100644
--- a/src/app/features/gossip/gossip-menu-option/gossip-menu-option.component.html
+++ b/src/app/features/gossip/gossip-menu-option/gossip-menu-option.component.html
@@ -134,18 +134,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/gossip/gossip-menu-option/gossip-menu-option.module.ts b/src/app/features/gossip/gossip-menu-option/gossip-menu-option.module.ts
index 8f0b89c14c..65592c297d 100644
--- a/src/app/features/gossip/gossip-menu-option/gossip-menu-option.module.ts
+++ b/src/app/features/gossip/gossip-menu-option/gossip-menu-option.module.ts
@@ -11,6 +11,7 @@ import { QueryOutputModule } from '@keira-shared/modules/query-output/query-outp
 import { GossipMenuOptionComponent } from './gossip-menu-option.component';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { GossipMenuOptionService } from './gossip-menu-option.service';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { GossipMenuOptionService } from './gossip-menu-option.service';
     ToastrModule.forRoot(toastrConfig),
     NgxDatatableModule,
     SingleValueSelectorModule,
+    EditorButtonsModule,
   ],
   exports: [
     GossipMenuOptionComponent,
diff --git a/src/app/features/gossip/gossip-menu/gossip-menu.component.html b/src/app/features/gossip/gossip-menu/gossip-menu.component.html
index 9b27f57ab7..9e976d478d 100644
--- a/src/app/features/gossip/gossip-menu/gossip-menu.component.html
+++ b/src/app/features/gossip/gossip-menu/gossip-menu.component.html
@@ -43,18 +43,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/gossip/gossip-menu/gossip-menu.module.ts b/src/app/features/gossip/gossip-menu/gossip-menu.module.ts
index aeaa197fdc..7d4ff4d7d1 100644
--- a/src/app/features/gossip/gossip-menu/gossip-menu.module.ts
+++ b/src/app/features/gossip/gossip-menu/gossip-menu.module.ts
@@ -10,6 +10,7 @@ import { QueryOutputModule } from '@keira-shared/modules/query-output/query-outp
 import { GossipMenuComponent } from './gossip-menu.component';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { GossipMenuService } from './gossip-menu.service';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -23,6 +24,7 @@ import { GossipMenuService } from './gossip-menu.service';
     TooltipModule.forRoot(),
     ToastrModule.forRoot(toastrConfig),
     NgxDatatableModule,
+    EditorButtonsModule,
   ],
   exports: [
     GossipMenuComponent,
diff --git a/src/app/features/gossip/select-gossip/select-gossip.component.html b/src/app/features/gossip/select-gossip/select-gossip.component.html
index 320a778f80..7a03f32be4 100644
--- a/src/app/features/gossip/select-gossip/select-gossip.component.html
+++ b/src/app/features/gossip/select-gossip/select-gossip.component.html
@@ -27,12 +27,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Limit">
       </div>
       <div class="col-2">
-        <button
-          class="btn btn-primary btn-sm"
-          id="search-btn"
-          [disabled]="selectService.queryForm.invalid"
-          (click)="selectService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="selectService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="selectService.query"></code>
diff --git a/src/app/features/gossip/select-gossip/select-gossip.module.ts b/src/app/features/gossip/select-gossip/select-gossip.module.ts
index 62764f4b64..2c842f7d40 100644
--- a/src/app/features/gossip/select-gossip/select-gossip.module.ts
+++ b/src/app/features/gossip/select-gossip/select-gossip.module.ts
@@ -10,6 +10,7 @@ import { SelectGossipComponent } from './select-gossip.component';
 import { CreateModule } from '@keira-shared/modules/create/create.module';
 import { highlightOptions } from '@keira-config/highlight.config';
 import { SelectGossipService } from './select-gossip.service';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   declarations: [
@@ -23,6 +24,7 @@ import { SelectGossipService } from './select-gossip.service';
     CreateModule,
     HighlightModule.forRoot(highlightOptions),
     NgxDatatableModule,
+    SearchButtonsModule,
   ],
   exports: [
     SelectGossipComponent,
diff --git a/src/app/features/item/disenchant-loot-template/disenchant-loot-template.module.ts b/src/app/features/item/disenchant-loot-template/disenchant-loot-template.module.ts
index 31f0a27d72..da9434d1a8 100644
--- a/src/app/features/item/disenchant-loot-template/disenchant-loot-template.module.ts
+++ b/src/app/features/item/disenchant-loot-template/disenchant-loot-template.module.ts
@@ -13,6 +13,7 @@ import { FlagsSelectorModule } from '@keira-shared/modules/selectors/flags-selec
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { DisenchantLootTemplateService } from './disenchant-loot-template.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     ItemSelectorModule,
     FlagsSelectorModule,
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     DisenchantLootTemplateComponent,
diff --git a/src/app/features/item/item-enchantment/item-enchantment-template.component.html b/src/app/features/item/item-enchantment/item-enchantment-template.component.html
index aaa8ee644d..cb847d6735 100644
--- a/src/app/features/item/item-enchantment/item-enchantment-template.component.html
+++ b/src/app/features/item/item-enchantment/item-enchantment-template.component.html
@@ -43,18 +43,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/item/item-enchantment/item-enchantment-template.module.ts b/src/app/features/item/item-enchantment/item-enchantment-template.module.ts
index 81afc0437c..bb88437637 100644
--- a/src/app/features/item/item-enchantment/item-enchantment-template.module.ts
+++ b/src/app/features/item/item-enchantment/item-enchantment-template.module.ts
@@ -9,6 +9,7 @@ import { TopBarModule } from '@keira-shared/modules/top-bar/top-bar.module';
 import { QueryOutputModule } from '@keira-shared/modules/query-output/query-output.module';
 import { ItemEnchantmentTemplateComponent } from './item-enchantment-template.component';
 import { ItemEnchantmentTemplateService } from './item-enchantment-template.service';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -21,6 +22,7 @@ import { ItemEnchantmentTemplateService } from './item-enchantment-template.serv
     QueryOutputModule,
     NgxDatatableModule,
     ToastrModule.forRoot(toastrConfig),
+    EditorButtonsModule,
   ],
   exports: [
     ItemEnchantmentTemplateComponent,
diff --git a/src/app/features/item/item-loot-template/item-loot-template.component.html b/src/app/features/item/item-loot-template/item-loot-template.component.html
index dbcdbe682c..0c68350d80 100644
--- a/src/app/features/item/item-loot-template/item-loot-template.component.html
+++ b/src/app/features/item/item-loot-template/item-loot-template.component.html
@@ -111,18 +111,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/item/item-loot-template/item-loot-template.module.ts b/src/app/features/item/item-loot-template/item-loot-template.module.ts
index 26954dd349..e1cb64032c 100644
--- a/src/app/features/item/item-loot-template/item-loot-template.module.ts
+++ b/src/app/features/item/item-loot-template/item-loot-template.module.ts
@@ -13,6 +13,7 @@ import { FlagsSelectorModule } from '@keira-shared/modules/selectors/flags-selec
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ItemLootTemplateService } from './item-loot-template.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     FlagsSelectorModule,
     NgxDatatableModule,
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     ItemLootTemplateComponent,
diff --git a/src/app/features/item/milling-loot-template/milling-loot-template.integration.spec.ts b/src/app/features/item/milling-loot-template/milling-loot-template.integration.spec.ts
index b5a1e3d068..c12da9f12c 100644
--- a/src/app/features/item/milling-loot-template/milling-loot-template.integration.spec.ts
+++ b/src/app/features/item/milling-loot-template/milling-loot-template.integration.spec.ts
@@ -190,7 +190,8 @@ describe('MillingLootTemplate integration tests', () => {
       expect(page.getEditorTableRowsCount()).toBe(3);
     });
 
-    it('deleting rows should correctly work', () => {
+    it('deleting rows should correctly work', async () => {
+      await page.whenStable();
       page.deleteRow(1);
       expect(page.getEditorTableRowsCount()).toBe(2);
       page.expectDiffQueryToContain(
diff --git a/src/app/features/item/milling-loot-template/milling-loot-template.module.ts b/src/app/features/item/milling-loot-template/milling-loot-template.module.ts
index d634749d7b..74905b3047 100644
--- a/src/app/features/item/milling-loot-template/milling-loot-template.module.ts
+++ b/src/app/features/item/milling-loot-template/milling-loot-template.module.ts
@@ -13,6 +13,7 @@ import { FlagsSelectorModule } from '@keira-shared/modules/selectors/flags-selec
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { MillingLootTemplateService } from './milling-loot-template.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     FlagsSelectorModule,
     NgxDatatableModule,
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     MillingLootTemplateComponent,
diff --git a/src/app/features/item/prospecting-loot-template/prospecting-loot-template.module.ts b/src/app/features/item/prospecting-loot-template/prospecting-loot-template.module.ts
index 5109e983b8..50f3932dd5 100644
--- a/src/app/features/item/prospecting-loot-template/prospecting-loot-template.module.ts
+++ b/src/app/features/item/prospecting-loot-template/prospecting-loot-template.module.ts
@@ -13,6 +13,7 @@ import { FlagsSelectorModule } from '@keira-shared/modules/selectors/flags-selec
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ProspectingLootTemplateService } from './prospecting-loot-template.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     FlagsSelectorModule,
     NgxDatatableModule,
     IconModule,
+    EditorButtonsModule,
   ],
   exports: [
     ProspectingLootTemplateComponent,
diff --git a/src/app/features/item/select-item/select-item.component.html b/src/app/features/item/select-item/select-item.component.html
index 7374390609..5c341be5d8 100644
--- a/src/app/features/item/select-item/select-item.component.html
+++ b/src/app/features/item/select-item/select-item.component.html
@@ -27,12 +27,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Limit">
       </div>
       <div class="col-2">
-        <button
-          class="btn btn-primary btn-sm"
-          id="search-btn"
-          [disabled]="selectService.queryForm.invalid"
-          (click)="selectService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="selectService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="selectService.query"></code>
diff --git a/src/app/features/item/select-item/select-item.module.ts b/src/app/features/item/select-item/select-item.module.ts
index 8c93fac759..49717efa6b 100644
--- a/src/app/features/item/select-item/select-item.module.ts
+++ b/src/app/features/item/select-item/select-item.module.ts
@@ -11,6 +11,7 @@ import { CreateModule } from '@keira-shared/modules/create/create.module';
 import { highlightOptions } from '@keira-config/highlight.config';
 import { SelectItemService } from './select-item.service';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     HighlightModule.forRoot(highlightOptions),
     NgxDatatableModule,
     IconModule,
+    SearchButtonsModule,
   ],
   exports: [
     SelectItemComponent,
diff --git a/src/app/features/quest/creature-questender/creature-questender.component.html b/src/app/features/quest/creature-questender/creature-questender.component.html
index 812d216ba6..cf9a204f6f 100644
--- a/src/app/features/quest/creature-questender/creature-questender.component.html
+++ b/src/app/features/quest/creature-questender/creature-questender.component.html
@@ -46,18 +46,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/quest/creature-questender/creature-questender.module.ts b/src/app/features/quest/creature-questender/creature-questender.module.ts
index b4bcf199f3..c08458f5ae 100644
--- a/src/app/features/quest/creature-questender/creature-questender.module.ts
+++ b/src/app/features/quest/creature-questender/creature-questender.module.ts
@@ -11,6 +11,7 @@ import { ToastrModule } from 'ngx-toastr';
 import { toastrConfig } from '@keira-config/toastr.config';
 import { CreatureSelectorModule } from '@keira-shared/modules/selectors/creature-selector/creature-selector.module';
 import { CreatureQuestenderService } from './creature-questender.service';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { CreatureQuestenderService } from './creature-questender.service';
     TooltipModule.forRoot(),
     ToastrModule.forRoot(toastrConfig),
     CreatureSelectorModule,
+    EditorButtonsModule,
   ],
   exports: [
     CreatureQuestenderComponent,
diff --git a/src/app/features/quest/creature-queststarter/creature-queststarter.component.html b/src/app/features/quest/creature-queststarter/creature-queststarter.component.html
index 812d216ba6..cf9a204f6f 100644
--- a/src/app/features/quest/creature-queststarter/creature-queststarter.component.html
+++ b/src/app/features/quest/creature-queststarter/creature-queststarter.component.html
@@ -46,18 +46,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/quest/creature-queststarter/creature-queststarter.module.ts b/src/app/features/quest/creature-queststarter/creature-queststarter.module.ts
index 03a2b37081..b8258bcb01 100644
--- a/src/app/features/quest/creature-queststarter/creature-queststarter.module.ts
+++ b/src/app/features/quest/creature-queststarter/creature-queststarter.module.ts
@@ -11,6 +11,7 @@ import { QueryOutputModule } from '@keira-shared/modules/query-output/query-outp
 import { CreatureQueststarterComponent } from './creature-queststarter.component';
 import { CreatureSelectorModule } from '@keira-shared/modules/selectors/creature-selector/creature-selector.module';
 import { CreatureQueststarterService } from './creature-queststarter.service';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { CreatureQueststarterService } from './creature-queststarter.service';
     TooltipModule.forRoot(),
     ToastrModule.forRoot(toastrConfig),
     CreatureSelectorModule,
+    EditorButtonsModule,
   ],
   exports: [
     CreatureQueststarterComponent,
diff --git a/src/app/features/quest/gameobject-questender/gameobject-questender.component.html b/src/app/features/quest/gameobject-questender/gameobject-questender.component.html
index 20265f75d9..77a0a49015 100644
--- a/src/app/features/quest/gameobject-questender/gameobject-questender.component.html
+++ b/src/app/features/quest/gameobject-questender/gameobject-questender.component.html
@@ -46,18 +46,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/quest/gameobject-questender/gameobject-questender.module.ts b/src/app/features/quest/gameobject-questender/gameobject-questender.module.ts
index a4bde9a2e0..2bb4d6b0e1 100644
--- a/src/app/features/quest/gameobject-questender/gameobject-questender.module.ts
+++ b/src/app/features/quest/gameobject-questender/gameobject-questender.module.ts
@@ -11,6 +11,7 @@ import { ToastrModule } from 'ngx-toastr';
 import { toastrConfig } from '@keira-config/toastr.config';
 import { GameobjectSelectorModule } from '@keira-shared/modules/selectors/gameobject-selector/gameobject-selector.module';
 import { GameobjectQuestenderService } from './gameobject-questender.service';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { GameobjectQuestenderService } from './gameobject-questender.service';
     TooltipModule.forRoot(),
     ToastrModule.forRoot(toastrConfig),
     GameobjectSelectorModule,
+    EditorButtonsModule,
   ],
   exports: [
     GameobjectQuestenderComponent,
diff --git a/src/app/features/quest/gameobject-queststarter/gameobject-queststarter.component.html b/src/app/features/quest/gameobject-queststarter/gameobject-queststarter.component.html
index 20265f75d9..77a0a49015 100644
--- a/src/app/features/quest/gameobject-queststarter/gameobject-queststarter.component.html
+++ b/src/app/features/quest/gameobject-queststarter/gameobject-queststarter.component.html
@@ -46,18 +46,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/features/quest/gameobject-queststarter/gameobject-queststarter.module.ts b/src/app/features/quest/gameobject-queststarter/gameobject-queststarter.module.ts
index 9829d49527..a29789ed2d 100644
--- a/src/app/features/quest/gameobject-queststarter/gameobject-queststarter.module.ts
+++ b/src/app/features/quest/gameobject-queststarter/gameobject-queststarter.module.ts
@@ -11,6 +11,7 @@ import { ToastrModule } from 'ngx-toastr';
 import { toastrConfig } from '@keira-config/toastr.config';
 import { GameobjectSelectorModule } from '@keira-shared/modules/selectors/gameobject-selector/gameobject-selector.module';
 import { GameobjectQueststarterService } from './gameobject-queststarter.service';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { GameobjectQueststarterService } from './gameobject-queststarter.service
     TooltipModule.forRoot(),
     ToastrModule.forRoot(toastrConfig),
     GameobjectSelectorModule,
+    EditorButtonsModule,
   ],
   exports: [
     GameobjectQueststarterComponent,
diff --git a/src/app/features/quest/select-quest/select-quest.component.html b/src/app/features/quest/select-quest/select-quest.component.html
index 5f74b5ddc6..93155f9f78 100644
--- a/src/app/features/quest/select-quest/select-quest.component.html
+++ b/src/app/features/quest/select-quest/select-quest.component.html
@@ -27,12 +27,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Limit">
       </div>
       <div class="col-2">
-        <button
-          class="btn btn-primary btn-sm"
-          id="search-btn"
-          [disabled]="selectService.queryForm.invalid"
-          (click)="selectService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="selectService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="selectService.query"></code>
diff --git a/src/app/features/quest/select-quest/select-quest.module.ts b/src/app/features/quest/select-quest/select-quest.module.ts
index 85d7f1b488..f73fbb7152 100644
--- a/src/app/features/quest/select-quest/select-quest.module.ts
+++ b/src/app/features/quest/select-quest/select-quest.module.ts
@@ -10,6 +10,7 @@ import { SelectQuestComponent } from './select-quest.component';
 import { CreateModule } from '@keira-shared/modules/create/create.module';
 import { highlightOptions } from '@keira-config/highlight.config';
 import { SelectQuestService } from './select-quest.service';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   declarations: [
@@ -23,6 +24,7 @@ import { SelectQuestService } from './select-quest.service';
     CreateModule,
     HighlightModule.forRoot(highlightOptions),
     NgxDatatableModule,
+    SearchButtonsModule,
   ],
   exports: [
     SelectQuestComponent,
diff --git a/src/app/features/smart-scripts/sai-search-existing/sai-search-existing.component.html b/src/app/features/smart-scripts/sai-search-existing/sai-search-existing.component.html
index f2a76b0c50..9fe6f494e8 100644
--- a/src/app/features/smart-scripts/sai-search-existing/sai-search-existing.component.html
+++ b/src/app/features/smart-scripts/sai-search-existing/sai-search-existing.component.html
@@ -29,12 +29,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Limit">
       </div>
       <div class="col-sm-12 col-md-6 mt-1 mt-md-0">
-        <button
-          class="btn btn-primary btn-sm mr-2"
-          id="search-btn"
-          [disabled]="selectService.queryForm.invalid"
-          (click)="selectService.onSearch()"
-        >Search existing</button>
+        <keira-search-button [searchService]="selectService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="selectService.query"></code>
diff --git a/src/app/features/smart-scripts/sai-search-existing/sai-search-existing.module.ts b/src/app/features/smart-scripts/sai-search-existing/sai-search-existing.module.ts
index d95dcf80a3..6fbf0a7c0d 100644
--- a/src/app/features/smart-scripts/sai-search-existing/sai-search-existing.module.ts
+++ b/src/app/features/smart-scripts/sai-search-existing/sai-search-existing.module.ts
@@ -8,6 +8,7 @@ import { SaiSearchExistingComponent } from './sai-search-existing.component';
 import { TopBarModule } from '@keira-shared/modules/top-bar/top-bar.module';
 import { QueryOutputModule } from '@keira-shared/modules/query-output/query-output.module';
 import { highlightOptions } from '@keira-config/highlight.config';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   declarations: [SaiSearchExistingComponent],
@@ -18,6 +19,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
     QueryOutputModule,
     HighlightModule.forRoot(highlightOptions),
     NgxDatatableModule,
+    SearchButtonsModule,
   ],
   exports: [SaiSearchExistingComponent],
 })
diff --git a/src/app/features/sql-editor/sql-editor.component.html b/src/app/features/sql-editor/sql-editor.component.html
index 69f8da7ddc..f72e75c4f6 100644
--- a/src/app/features/sql-editor/sql-editor.component.html
+++ b/src/app/features/sql-editor/sql-editor.component.html
@@ -9,8 +9,12 @@
 
   <div class="row">
     <div class="col-sm-7">
-      <button type="button" class="btn btn-secondary btn-sm mr-2" (click)="copy()" id="copy-btn">Copy</button>
-      <button type="button" class="btn btn-primary btn-sm" (click)="execute()" id="execute-btn">Execute (F9)</button>
+      <button type="button" class="btn btn-secondary btn-sm mr-2" (click)="copy()" id="copy-btn">
+        <i class="fa fa-copy fa-sm"></i> Copy
+      </button>
+      <button type="button" class="btn btn-primary btn-sm" (click)="execute()" id="execute-btn">
+        <i class="fa fa-bolt fa-sm"></i> Execute (F9)
+      </button>
     </div>
     <div class="col-sm-5">
       <div class="wiki-link">
diff --git a/src/app/main/connection-window/connection-window.component.scss b/src/app/main/connection-window/connection-window.component.scss
index 13fabbe193..b12ca5bdc4 100644
--- a/src/app/main/connection-window/connection-window.component.scss
+++ b/src/app/main/connection-window/connection-window.component.scss
@@ -98,6 +98,7 @@ $secondary-color-green: #b7e2ad;
 
           i {
             margin-right: 10px;
+            margin-bottom: 2px;
           }
         }
 
diff --git a/src/app/main/main-window/sidebar/sidebar.component.html b/src/app/main/main-window/sidebar/sidebar.component.html
index a10ce6054d..1ff4a0468f 100644
--- a/src/app/main/main-window/sidebar/sidebar.component.html
+++ b/src/app/main/main-window/sidebar/sidebar.component.html
@@ -38,15 +38,21 @@
         <ul>
 
           <li>
-            <a id="dashboard-toggle" href="#" [routerLink]="''">Dashboard</a>
+            <a id="dashboard-toggle" href="#" [routerLink]="''">
+              <i class="fa fa-tachometer-alt"></i> Dashboard
+            </a>
           </li>
 
           <li>
-            <a id="sql-editor-toggle" href="#" [routerLink]="'sql-editor'">SQL Editor</a>
+            <a id="sql-editor-toggle" href="#" [routerLink]="'sql-editor'">
+              <i class="fa fa-code"></i> SQL Editor
+            </a>
           </li>
 
           <li>
-            <a id="collapse-all" (click)="collapseAll()">Collapse All</a>
+            <a id="collapse-all" (click)="collapseAll()">
+              <i class="fas fa-angle-double-up"></i> Collapse All
+            </a>
           </li>
 
           <li class="sidebar-dropdown" [ngClass]="{ 'active': menuStates.creature === 'down' }">
diff --git a/src/app/shared/abstract/components/editors/loot-template/loot-template.component.html b/src/app/shared/abstract/components/editors/loot-template/loot-template.component.html
index 45a488cd65..de46003d58 100644
--- a/src/app/shared/abstract/components/editors/loot-template/loot-template.component.html
+++ b/src/app/shared/abstract/components/editors/loot-template/loot-template.component.html
@@ -116,18 +116,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <ngx-datatable
           id="editor-table"
diff --git a/src/app/shared/modules/create/create.component.html b/src/app/shared/modules/create/create.component.html
index 0880c14fa4..772aefff2f 100644
--- a/src/app/shared/modules/create/create.component.html
+++ b/src/app/shared/modules/create/create.component.html
@@ -16,7 +16,7 @@
         id="select-button"
         [disabled]="!isIdFree || !idModel"
         (click)="handlerService.select(true, idModel)"
-      >Select</button>
+      ><i class="fa fa-plus"></i> Select</button>
     </div>
   </div>
   <div class="col-12 mt-1" [hidden]="!idModel" id="id-free-status">
diff --git a/src/app/shared/modules/editor-buttons/editor-buttons.component.html b/src/app/shared/modules/editor-buttons/editor-buttons.component.html
new file mode 100644
index 0000000000..d31d3f0d8e
--- /dev/null
+++ b/src/app/shared/modules/editor-buttons/editor-buttons.component.html
@@ -0,0 +1,12 @@
+<button
+  id="delete-selected-row-btn"
+  class="btn btn-danger btn-sm mr-2"
+  (click)="editorService.deleteSelectedRow()"
+  [disabled]="editorService.selectedRowId === null"
+><i class="fa fa-trash fa-sm"></i> Delete selected row</button>
+
+<button
+  id="add-new-row-btn"
+  class="btn btn-success btn-sm"
+  (click)="editorService.addNewRow()"
+><i class="fa fa-plus fa-sm"></i> Add new row</button>
diff --git a/src/app/shared/modules/editor-buttons/editor-buttons.component.spec.ts b/src/app/shared/modules/editor-buttons/editor-buttons.component.spec.ts
new file mode 100644
index 0000000000..662a950339
--- /dev/null
+++ b/src/app/shared/modules/editor-buttons/editor-buttons.component.spec.ts
@@ -0,0 +1,76 @@
+import { async, TestBed } from '@angular/core/testing';
+import { Component, ViewChild } from '@angular/core';
+
+import { EditorButtonsComponent } from './editor-buttons.component';
+import { PageObject } from '@keira-testing/page-object';
+
+@Component({
+  template: `<keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>`
+})
+class TestHostComponent {
+  @ViewChild(EditorButtonsComponent) child: EditorButtonsComponent<null>;
+  editorService;
+}
+
+class EditorButtonsPage extends PageObject<TestHostComponent> {
+  get addBtn() { return this.query<HTMLButtonElement>('#add-new-row-btn'); }
+  get deleteBtn() { return this.query<HTMLButtonElement>('#delete-selected-row-btn'); }
+}
+
+describe('EditorButtonsComponent', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditorButtonsComponent, TestHostComponent ]
+    })
+      .compileComponents();
+  }));
+
+  const setup = () => {
+    const editorService = {
+      selectedRowId: 0, // intentionally set to 0, a falsy non-null value
+      deleteSelectedRow: jasmine.createSpy('deleteSelectedRow'),
+      addNewRow: jasmine.createSpy('addNewRow'),
+    };
+    const fixture = TestBed.createComponent(TestHostComponent);
+    const page = new EditorButtonsPage(fixture);
+    const host = fixture.componentInstance;
+    host.editorService = editorService;
+    fixture.detectChanges();
+    const component = host.child;
+    return { fixture, host, component, editorService, page };
+  };
+
+  describe('the delete button', () => {
+    it('should be enabled only when there is a selected row', () => {
+      const { editorService, page, fixture } = setup();
+      editorService.selectedRowId = null;
+      fixture.detectChanges();
+      expect(page.deleteBtn.disabled).toBe(true);
+
+      editorService.selectedRowId = 123;
+      fixture.detectChanges();
+      expect(page.deleteBtn.disabled).toBe(false);
+
+      editorService.selectedRowId = null;
+      fixture.detectChanges();
+      expect(page.deleteBtn.disabled).toBe(true);
+    });
+
+    it('when clicked, should call editorService.deleteSelectedRow()', () => {
+      const { editorService, page } = setup();
+      page.clickElement(page.deleteBtn);
+      expect(editorService.deleteSelectedRow).toHaveBeenCalledTimes(1);
+      expect(editorService.addNewRow).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('the add button', () => {
+    it('when clicked, should call editorService.addNewRow()', () => {
+      const { editorService, page } = setup();
+      page.clickElement(page.addBtn);
+      expect(editorService.addNewRow).toHaveBeenCalledTimes(1);
+      expect(editorService.deleteSelectedRow).toHaveBeenCalledTimes(0);
+    });
+  });
+});
diff --git a/src/app/shared/modules/editor-buttons/editor-buttons.component.ts b/src/app/shared/modules/editor-buttons/editor-buttons.component.ts
new file mode 100644
index 0000000000..14141e56db
--- /dev/null
+++ b/src/app/shared/modules/editor-buttons/editor-buttons.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { MultiRowEditorService } from '@keira-abstract/service/editors/multi-row-editor.service';
+import { TableRow } from '@keira-types/general';
+
+@Component({
+  selector: 'keira-editor-buttons',
+  templateUrl: './editor-buttons.component.html',
+})
+export class EditorButtonsComponent<T extends TableRow> {
+  @Input() editorService: MultiRowEditorService<T>;
+}
diff --git a/src/app/shared/modules/editor-buttons/editor-buttons.module.ts b/src/app/shared/modules/editor-buttons/editor-buttons.module.ts
new file mode 100644
index 0000000000..899efe447c
--- /dev/null
+++ b/src/app/shared/modules/editor-buttons/editor-buttons.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { EditorButtonsComponent } from './editor-buttons.component';
+
+
+
+@NgModule({
+  declarations: [EditorButtonsComponent],
+  exports: [
+    EditorButtonsComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class EditorButtonsModule { }
diff --git a/src/app/shared/modules/query-output/query-output.component.html b/src/app/shared/modules/query-output/query-output.component.html
index 14d1cff70d..35fc8e5446 100644
--- a/src/app/shared/modules/query-output/query-output.component.html
+++ b/src/app/shared/modules/query-output/query-output.component.html
@@ -13,8 +13,12 @@
   <keira-highlightjs-wrapper id="diff-query" [code]="editorService.diffQuery" [hidden]="showFullQuery()"></keira-highlightjs-wrapper>
   <keira-highlightjs-wrapper id="full-query" [code]="editorService.fullQuery" [hidden]="!showFullQuery()"></keira-highlightjs-wrapper>
 
-  <button type="button" class="btn btn-secondary btn-sm" (click)="copy()" id="copy-btn">Copy</button>
-  <button type="button" class="btn btn-primary btn-sm" (click)="execute()" id="execute-btn">Execute</button>
+  <button type="button" class="btn btn-secondary btn-sm" (click)="copy()" id="copy-btn">
+    <i class="fa fa-copy fa-sm"></i> Copy
+  </button>
+  <button type="button" class="btn btn-primary btn-sm" (click)="execute()" id="execute-btn">
+    <i class="fa fa-bolt fa-sm"></i> Execute
+  </button>
 
   <keira-query-error [error]="editorService.error"></keira-query-error>
 </ng-container>
diff --git a/src/app/shared/modules/sai-editor/sai-editor.component.html b/src/app/shared/modules/sai-editor/sai-editor.component.html
index bac5d56228..34877d6030 100644
--- a/src/app/shared/modules/sai-editor/sai-editor.component.html
+++ b/src/app/shared/modules/sai-editor/sai-editor.component.html
@@ -499,18 +499,7 @@
     <div class="row">
       <div class="col-12">
 
-        <button
-          id="delete-selected-row-btn"
-          class="btn btn-danger btn-sm mr-2"
-          (click)="editorService.deleteSelectedRow()"
-          [disabled]="editorService.selectedRowId === null"
-        >Delete selected row</button>
-
-        <button
-          id="add-new-row-btn"
-          class="btn btn-success btn-sm"
-          (click)="editorService.addNewRow()"
-        >Add new row</button>
+        <keira-editor-buttons [editorService]="editorService"></keira-editor-buttons>
 
         <button
           id="generate-comments-btn"
diff --git a/src/app/shared/modules/sai-editor/sai-editor.module.ts b/src/app/shared/modules/sai-editor/sai-editor.module.ts
index 98633e82ac..ffb94e5ca2 100644
--- a/src/app/shared/modules/sai-editor/sai-editor.module.ts
+++ b/src/app/shared/modules/sai-editor/sai-editor.module.ts
@@ -11,6 +11,7 @@ import { SaiEditorComponent } from './sai-editor.component';
 import { SaiTopBarComponent } from './sai-top-bar/sai-top-bar.component';
 import { FlagsSelectorModule } from '../selectors/flags-selector/flags-selector.module';
 import { TimedActionlistComponent } from './timed-actionlist/timed-actionlist.component';
+import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
 
 const components = [
   SaiEditorComponent,
@@ -29,6 +30,7 @@ const components = [
     TooltipModule.forRoot(),
     ToastrModule.forRoot(toastrConfig),
     NgxDatatableModule,
+    EditorButtonsModule,
   ]
 })
 export class SaiEditorModule { }
diff --git a/src/app/shared/modules/search-button/search-button.component.html b/src/app/shared/modules/search-button/search-button.component.html
new file mode 100644
index 0000000000..d17d3b5456
--- /dev/null
+++ b/src/app/shared/modules/search-button/search-button.component.html
@@ -0,0 +1,6 @@
+<button
+  id="search-btn"
+  class="btn btn-primary btn-sm"
+  [disabled]="searchService.queryForm.invalid"
+  (click)="searchService.onSearch()"
+><i class="fa fa-search"></i> Search</button>
diff --git a/src/app/shared/modules/search-button/search-button.component.spec.ts b/src/app/shared/modules/search-button/search-button.component.spec.ts
new file mode 100644
index 0000000000..b505459709
--- /dev/null
+++ b/src/app/shared/modules/search-button/search-button.component.spec.ts
@@ -0,0 +1,63 @@
+import { async, TestBed } from '@angular/core/testing';
+import { Component, ViewChild } from '@angular/core';
+
+import { SearchButtonComponent } from './search-button.component';
+import { PageObject } from '@keira-testing/page-object';
+
+@Component({
+  template: `<keira-search-button [searchService]="searchService"></keira-search-button>`
+})
+class TestHostComponent {
+  @ViewChild(SearchButtonComponent) child: SearchButtonComponent<null>;
+  searchService;
+}
+
+class EditorButtonsPage extends PageObject<TestHostComponent> {
+  get searchBtn() { return this.query<HTMLButtonElement>('#search-btn'); }
+}
+
+describe('EditorButtonsComponent', () => {
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchButtonComponent, TestHostComponent ]
+    })
+      .compileComponents();
+  }));
+
+  const setup = () => {
+    const searchService = {
+      queryForm: { invalid: false },
+      onSearch: jasmine.createSpy('onSearch'),
+    };
+    const fixture = TestBed.createComponent(TestHostComponent);
+    const page = new EditorButtonsPage(fixture);
+    const host = fixture.componentInstance;
+    host.searchService = searchService;
+    fixture.detectChanges();
+    const component = host.child;
+    return { fixture, host, component, searchService, page };
+  };
+
+  it('should be enabled only when the queryForm is valid', () => {
+    const { searchService, page, fixture } = setup();
+    searchService.queryForm.invalid = false;
+    fixture.detectChanges();
+    expect(page.searchBtn.disabled).toBe(false);
+
+    searchService.queryForm.invalid = true;
+    fixture.detectChanges();
+    expect(page.searchBtn.disabled).toBe(true);
+
+    searchService.queryForm.invalid = false;
+    fixture.detectChanges();
+    expect(page.searchBtn.disabled).toBe(false);
+  });
+
+  it('when clicked, should call searchService.onSearch()', () => {
+    const { searchService, page } = setup();
+    page.clickElement(page.searchBtn);
+    expect(searchService.onSearch).toHaveBeenCalledTimes(1);
+  });
+
+});
diff --git a/src/app/shared/modules/search-button/search-button.component.ts b/src/app/shared/modules/search-button/search-button.component.ts
new file mode 100644
index 0000000000..59efdd587a
--- /dev/null
+++ b/src/app/shared/modules/search-button/search-button.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+import { TableRow } from '@keira-types/general';
+import { SearchService } from '@keira-shared/modules/search/search.service';
+
+@Component({
+  selector: 'keira-search-button',
+  templateUrl: './search-button.component.html',
+})
+export class SearchButtonComponent<T extends TableRow> {
+  @Input() searchService: SearchService<T>;
+}
diff --git a/src/app/shared/modules/search-button/search-buttons.module.ts b/src/app/shared/modules/search-button/search-buttons.module.ts
new file mode 100644
index 0000000000..f4d8cccbde
--- /dev/null
+++ b/src/app/shared/modules/search-button/search-buttons.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SearchButtonComponent } from './search-button.component';
+
+
+
+@NgModule({
+  declarations: [SearchButtonComponent],
+  exports: [
+    SearchButtonComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class SearchButtonsModule { }
diff --git a/src/app/shared/modules/selectors/area-selector/area-selector-modal.component.html b/src/app/shared/modules/selectors/area-selector/area-selector-modal.component.html
index 1086caa2b5..eacaf5cea9 100644
--- a/src/app/shared/modules/selectors/area-selector/area-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/area-selector/area-selector-modal.component.html
@@ -19,12 +19,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/area-selector/area-selector.module.ts b/src/app/shared/modules/selectors/area-selector/area-selector.module.ts
index fe88c7c325..ae95906ba5 100644
--- a/src/app/shared/modules/selectors/area-selector/area-selector.module.ts
+++ b/src/app/shared/modules/selectors/area-selector/area-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     AreaSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/creature-selector/creature-selector-modal.component.html b/src/app/shared/modules/selectors/creature-selector/creature-selector-modal.component.html
index 0032903272..c64cee0ade 100644
--- a/src/app/shared/modules/selectors/creature-selector/creature-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/creature-selector/creature-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/creature-selector/creature-selector.module.ts b/src/app/shared/modules/selectors/creature-selector/creature-selector.module.ts
index 64a909d924..e7b9963ce1 100644
--- a/src/app/shared/modules/selectors/creature-selector/creature-selector.module.ts
+++ b/src/app/shared/modules/selectors/creature-selector/creature-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     CreatureSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/faction-selector/faction-selector-modal.component.html b/src/app/shared/modules/selectors/faction-selector/faction-selector-modal.component.html
index 54f1d0e3a1..e8610ecbbf 100644
--- a/src/app/shared/modules/selectors/faction-selector/faction-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/faction-selector/faction-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/faction-selector/faction-selector.module.ts b/src/app/shared/modules/selectors/faction-selector/faction-selector.module.ts
index c06127acf8..33c67ff396 100644
--- a/src/app/shared/modules/selectors/faction-selector/faction-selector.module.ts
+++ b/src/app/shared/modules/selectors/faction-selector/faction-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     FactionSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/gameobject-selector/gameobject-selector-modal.component.html b/src/app/shared/modules/selectors/gameobject-selector/gameobject-selector-modal.component.html
index d23c837fbb..6480bedf01 100644
--- a/src/app/shared/modules/selectors/gameobject-selector/gameobject-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/gameobject-selector/gameobject-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="gameobject-search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/gameobject-selector/gameobject-selector.module.ts b/src/app/shared/modules/selectors/gameobject-selector/gameobject-selector.module.ts
index adfd1e8159..a6e515f067 100644
--- a/src/app/shared/modules/selectors/gameobject-selector/gameobject-selector.module.ts
+++ b/src/app/shared/modules/selectors/gameobject-selector/gameobject-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     GameobjectSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/holiday-selector/holiday-selector-modal.component.html b/src/app/shared/modules/selectors/holiday-selector/holiday-selector-modal.component.html
index 87c62a0823..a97b01d613 100644
--- a/src/app/shared/modules/selectors/holiday-selector/holiday-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/holiday-selector/holiday-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/holiday-selector/holiday-selector.module.ts b/src/app/shared/modules/selectors/holiday-selector/holiday-selector.module.ts
index 7b949d861a..0bf285468e 100644
--- a/src/app/shared/modules/selectors/holiday-selector/holiday-selector.module.ts
+++ b/src/app/shared/modules/selectors/holiday-selector/holiday-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     HolidaySelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/item-enchantment-selector/item-enchantment-selector-modal.component.html b/src/app/shared/modules/selectors/item-enchantment-selector/item-enchantment-selector-modal.component.html
index c9c34f6972..a5ecef08eb 100644
--- a/src/app/shared/modules/selectors/item-enchantment-selector/item-enchantment-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/item-enchantment-selector/item-enchantment-selector-modal.component.html
@@ -19,12 +19,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/item-enchantment-selector/item-enchantment-selector.module.ts b/src/app/shared/modules/selectors/item-enchantment-selector/item-enchantment-selector.module.ts
index aaf0cd0799..95ed618bb7 100644
--- a/src/app/shared/modules/selectors/item-enchantment-selector/item-enchantment-selector.module.ts
+++ b/src/app/shared/modules/selectors/item-enchantment-selector/item-enchantment-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     ItemEnchantmentSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/item-extended-cost-selector/item-extended-cost-selector-modal.component.html b/src/app/shared/modules/selectors/item-extended-cost-selector/item-extended-cost-selector-modal.component.html
index 37ebfe7844..dd5dd2acb7 100644
--- a/src/app/shared/modules/selectors/item-extended-cost-selector/item-extended-cost-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/item-extended-cost-selector/item-extended-cost-selector-modal.component.html
@@ -40,12 +40,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/item-extended-cost-selector/item-extended-cost-selector.module.ts b/src/app/shared/modules/selectors/item-extended-cost-selector/item-extended-cost-selector.module.ts
index 67fb5d0d1f..62d24b81db 100644
--- a/src/app/shared/modules/selectors/item-extended-cost-selector/item-extended-cost-selector.module.ts
+++ b/src/app/shared/modules/selectors/item-extended-cost-selector/item-extended-cost-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     ItemExtendedCostSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/item-limit-category-selector/item-limit-category-selector-modal.component.html b/src/app/shared/modules/selectors/item-limit-category-selector/item-limit-category-selector-modal.component.html
index f47bc786cb..3dc383889c 100644
--- a/src/app/shared/modules/selectors/item-limit-category-selector/item-limit-category-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/item-limit-category-selector/item-limit-category-selector-modal.component.html
@@ -22,12 +22,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/item-limit-category-selector/item-limit-category-selector.module.ts b/src/app/shared/modules/selectors/item-limit-category-selector/item-limit-category-selector.module.ts
index 9ad89c1581..79d9b296eb 100644
--- a/src/app/shared/modules/selectors/item-limit-category-selector/item-limit-category-selector.module.ts
+++ b/src/app/shared/modules/selectors/item-limit-category-selector/item-limit-category-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     ItemLimitCategorySelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/item-selector/item-selector-modal.component.html b/src/app/shared/modules/selectors/item-selector/item-selector-modal.component.html
index 31049aae2a..bfdc197c50 100644
--- a/src/app/shared/modules/selectors/item-selector/item-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/item-selector/item-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/item-selector/item-selector.module.ts b/src/app/shared/modules/selectors/item-selector/item-selector.module.ts
index b483051b4f..e1e6de10b4 100644
--- a/src/app/shared/modules/selectors/item-selector/item-selector.module.ts
+++ b/src/app/shared/modules/selectors/item-selector/item-selector.module.ts
@@ -9,6 +9,7 @@ import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
 import { IconModule } from '@keira-shared/modules/icon/icon.module';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -25,6 +26,7 @@ import { IconModule } from '@keira-shared/modules/icon/icon.module';
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
     IconModule,
+    SearchButtonsModule,
   ],
   exports: [
     ItemSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/language-selector/language-selector-modal.component.html b/src/app/shared/modules/selectors/language-selector/language-selector-modal.component.html
index 11a47eb226..b2261a2160 100644
--- a/src/app/shared/modules/selectors/language-selector/language-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/language-selector/language-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/language-selector/language-selector.module.ts b/src/app/shared/modules/selectors/language-selector/language-selector.module.ts
index a6c17e6891..4b92cff705 100644
--- a/src/app/shared/modules/selectors/language-selector/language-selector.module.ts
+++ b/src/app/shared/modules/selectors/language-selector/language-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     LanguageSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/map-selector/map-selector-modal.component.html b/src/app/shared/modules/selectors/map-selector/map-selector-modal.component.html
index 0cf16ffb29..ba12ff5260 100644
--- a/src/app/shared/modules/selectors/map-selector/map-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/map-selector/map-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/map-selector/map-selector.module.ts b/src/app/shared/modules/selectors/map-selector/map-selector.module.ts
index 9cf675f24d..9067dd5ce3 100644
--- a/src/app/shared/modules/selectors/map-selector/map-selector.module.ts
+++ b/src/app/shared/modules/selectors/map-selector/map-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     MapSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/quest-selector/quest-selector-modal.component.html b/src/app/shared/modules/selectors/quest-selector/quest-selector-modal.component.html
index 1434496fc8..e647fc7b18 100644
--- a/src/app/shared/modules/selectors/quest-selector/quest-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/quest-selector/quest-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/quest-selector/quest-selector.module.ts b/src/app/shared/modules/selectors/quest-selector/quest-selector.module.ts
index 5fbbcda72d..01be807724 100644
--- a/src/app/shared/modules/selectors/quest-selector/quest-selector.module.ts
+++ b/src/app/shared/modules/selectors/quest-selector/quest-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     QuestSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/skill-selector/skill-selector-modal.component.html b/src/app/shared/modules/selectors/skill-selector/skill-selector-modal.component.html
index a53081bff9..f42f3d8f36 100644
--- a/src/app/shared/modules/selectors/skill-selector/skill-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/skill-selector/skill-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/skill-selector/skill-selector.module.ts b/src/app/shared/modules/selectors/skill-selector/skill-selector.module.ts
index f31ffa793e..b251a20cab 100644
--- a/src/app/shared/modules/selectors/skill-selector/skill-selector.module.ts
+++ b/src/app/shared/modules/selectors/skill-selector/skill-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     SkillSelectorBtnComponent,
diff --git a/src/app/shared/modules/selectors/spell-selector/spell-selector-modal.component.html b/src/app/shared/modules/selectors/spell-selector/spell-selector-modal.component.html
index 0f9ec5a6e8..3101c1970b 100644
--- a/src/app/shared/modules/selectors/spell-selector/spell-selector-modal.component.html
+++ b/src/app/shared/modules/selectors/spell-selector/spell-selector-modal.component.html
@@ -16,12 +16,7 @@
         <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
       </div>
       <div class="col-2">
-        <button
-          id="search-btn"
-          class="btn btn-primary btn-sm"
-          [disabled]="searchService.queryForm.invalid"
-          (click)="searchService.onSearch()"
-        >Search</button>
+        <keira-search-button [searchService]="searchService"></keira-search-button>
       </div>
     </div>
     <code [highlight]="searchService.query"></code>
diff --git a/src/app/shared/modules/selectors/spell-selector/spell-selector.module.ts b/src/app/shared/modules/selectors/spell-selector/spell-selector.module.ts
index 9e6e3786ab..8399981fa2 100644
--- a/src/app/shared/modules/selectors/spell-selector/spell-selector.module.ts
+++ b/src/app/shared/modules/selectors/spell-selector/spell-selector.module.ts
@@ -8,6 +8,7 @@ import { highlightOptions } from '@keira-config/highlight.config';
 import { HighlightModule } from 'ngx-highlightjs';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { ModalModule } from 'ngx-bootstrap';
+import { SearchButtonsModule } from '@keira-shared/modules/search-button/search-buttons.module';
 
 @NgModule({
   entryComponents: [
@@ -23,6 +24,7 @@ import { ModalModule } from 'ngx-bootstrap';
     NgxDatatableModule,
     ModalModule.forRoot(),
     HighlightModule.forRoot(highlightOptions),
+    SearchButtonsModule,
   ],
   exports: [
     SpellSelectorBtnComponent,