From 89862b2775703257b9dc2e19fbebde2c0d0fbda0 Mon Sep 17 00:00:00 2001
From: undergroundwires <undergroundwires@users.noreply.github.com>
Date: Thu, 9 Jan 2020 23:02:36 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8D=20support=20for=20search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  3 +
 src/App.vue                                   | 19 ++--
 src/application/Parser/ApplicationParser.ts   |  8 +-
 src/application/State/Filter/FilterResult.ts  | 18 ++++
 .../{IFilterMatches.ts => IFilterResult.ts}   |  5 +-
 src/application/State/Filter/IUserFilter.ts   |  4 +-
 src/application/State/Filter/UserFilter.ts    | 20 +++--
 src/application/application.yaml              |  1 +
 src/application/application.yaml.d.ts         |  1 +
 src/domain/Application.ts                     | 14 +--
 src/domain/IApplication.ts                    |  2 +
 .../Scripts/Grouping/TheGrouper.vue           | 36 ++++++--
 .../Scripts/ScriptsTree/ScriptNodeParser.ts   | 11 ++-
 .../Scripts/ScriptsTree/ScriptsTree.vue       | 33 ++++---
 src/presentation/Scripts/TheScripts.vue       | 86 +++++++++++++++----
 src/presentation/TheHeader.vue                |  9 +-
 src/presentation/TheSearchBar.vue             |  8 +-
 tests/unit/domain/Application.spec.ts         |  8 +-
 tests/unit/stubs/ApplicationStub.ts           |  4 +
 19 files changed, 202 insertions(+), 88 deletions(-)
 create mode 100644 src/application/State/Filter/FilterResult.ts
 rename src/application/State/Filter/{IFilterMatches.ts => IFilterResult.ts} (75%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f04ee14..45f47546 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@
 
 ## [Unreleased]
 
+- Added search
+- Some styling improvements
+
 ## [0.3.0] - 2020-01-09
 
 - Added support for grouping
diff --git a/src/App.vue b/src/App.vue
index 72e9da75..6f7a6cdd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,8 @@
 <template>
   <div id="app">
       <div class="wrapper">
-          <TheHeader class="row"
-                     github-url="https://github.com/undergroundwires/privacy.sexy" />
-          <!-- <TheSearchBar> </TheSearchBar> -->
+          <TheHeader class="row" />
+          <TheSearchBar class="row" />
           <TheScripts class="row"/>
           <TheCodeArea class="row" theme="xcode" />
           <TheCodeButtons class="row" />
@@ -15,20 +14,20 @@
 <script lang="ts">
 import { Component, Vue, Prop  } from 'vue-property-decorator';
 import { ApplicationState, IApplicationState } from '@/application/State/ApplicationState';
-import TheHeader from './presentation/TheHeader.vue';
-import TheFooter from './presentation/TheFooter.vue';
-import TheCodeArea from './presentation/TheCodeArea.vue';
-import TheCodeButtons from './presentation/TheCodeButtons.vue';
-import TheSearchBar from './presentation/TheSearchBar.vue';
-import TheScripts from './presentation/Scripts/TheScripts.vue';
+import TheHeader from '@/presentation/TheHeader.vue';
+import TheFooter from '@/presentation/TheFooter.vue';
+import TheCodeArea from '@/presentation/TheCodeArea.vue';
+import TheCodeButtons from '@/presentation/TheCodeButtons.vue';
+import TheSearchBar from '@/presentation/TheSearchBar.vue';
+import TheScripts from '@/presentation/Scripts/TheScripts.vue';
 
 @Component({
   components: {
     TheHeader,
     TheCodeArea,
     TheCodeButtons,
-    TheSearchBar,
     TheScripts,
+    TheSearchBar,
     TheFooter,
   },
 })
diff --git a/src/application/Parser/ApplicationParser.ts b/src/application/Parser/ApplicationParser.ts
index 7e732d20..03195e22 100644
--- a/src/application/Parser/ApplicationParser.ts
+++ b/src/application/Parser/ApplicationParser.ts
@@ -4,8 +4,6 @@ import applicationFile from 'js-yaml-loader!./../application.yaml';
 import { parseCategory } from './CategoryParser';
 
 export function parseApplication(): Application {
-    const name = applicationFile.name as string;
-    const version = applicationFile.version as number;
     const categories = new Array<Category>();
     if (!applicationFile.actions || applicationFile.actions.length <= 0) {
         throw new Error('Application does not define any action');
@@ -14,6 +12,10 @@ export function parseApplication(): Application {
         const category = parseCategory(action);
         categories.push(category);
     }
-    const app = new Application(name, version, categories);
+    const app = new Application(
+        applicationFile.name,
+        applicationFile.repositoryUrl,
+        applicationFile.version,
+        categories);
     return app;
 }
diff --git a/src/application/State/Filter/FilterResult.ts b/src/application/State/Filter/FilterResult.ts
new file mode 100644
index 00000000..e02b9204
--- /dev/null
+++ b/src/application/State/Filter/FilterResult.ts
@@ -0,0 +1,18 @@
+import { IFilterResult } from './IFilterResult';
+import { IScript } from '@/domain/Script';
+import { ICategory } from '@/domain/ICategory';
+
+export class FilterResult implements IFilterResult {
+    constructor(
+        public readonly scriptMatches: ReadonlyArray<IScript>,
+        public readonly categoryMatches: ReadonlyArray<ICategory>,
+        public readonly query: string) {
+        if (!query) { throw new Error('Query is empty or undefined'); }
+        if (!scriptMatches) { throw new Error('Script matches is undefined'); }
+        if (!categoryMatches) { throw new Error('Category matches is undefined'); }
+    }
+    public hasAnyMatches(): boolean {
+        return this.scriptMatches.length > 0
+         || this.categoryMatches.length > 0;
+    }
+}
diff --git a/src/application/State/Filter/IFilterMatches.ts b/src/application/State/Filter/IFilterResult.ts
similarity index 75%
rename from src/application/State/Filter/IFilterMatches.ts
rename to src/application/State/Filter/IFilterResult.ts
index 75207088..dc8308eb 100644
--- a/src/application/State/Filter/IFilterMatches.ts
+++ b/src/application/State/Filter/IFilterResult.ts
@@ -1,7 +1,8 @@
 import { IScript, ICategory } from '@/domain/ICategory';
 
-export interface IFilterMatches {
-    readonly scriptMatches: ReadonlyArray<IScript>;
+export interface IFilterResult {
     readonly categoryMatches: ReadonlyArray<ICategory>;
+    readonly scriptMatches: ReadonlyArray<IScript>;
     readonly query: string;
+    hasAnyMatches(): boolean;
 }
diff --git a/src/application/State/Filter/IUserFilter.ts b/src/application/State/Filter/IUserFilter.ts
index b0e49f37..ae159d9c 100644
--- a/src/application/State/Filter/IUserFilter.ts
+++ b/src/application/State/Filter/IUserFilter.ts
@@ -1,8 +1,8 @@
-import { IFilterMatches } from './IFilterMatches';
+import { IFilterResult } from './IFilterResult';
 import { ISignal } from '@/infrastructure/Events/Signal';
 
 export interface IUserFilter {
-    readonly filtered: ISignal<IFilterMatches>;
+    readonly filtered: ISignal<IFilterResult>;
     readonly filterRemoved: ISignal<void>;
     setFilter(filter: string): void;
     removeFilter(): void;
diff --git a/src/application/State/Filter/UserFilter.ts b/src/application/State/Filter/UserFilter.ts
index 6a61be9c..ae4e1df9 100644
--- a/src/application/State/Filter/UserFilter.ts
+++ b/src/application/State/Filter/UserFilter.ts
@@ -1,10 +1,11 @@
-import { IFilterMatches } from './IFilterMatches';
+import { FilterResult } from './FilterResult';
+import { IFilterResult } from './IFilterResult';
 import { Application } from '../../../domain/Application';
 import { IUserFilter } from './IUserFilter';
 import { Signal } from '@/infrastructure/Events/Signal';
 
 export class UserFilter implements IUserFilter {
-    public readonly filtered = new Signal<IFilterMatches>();
+    public readonly filtered = new Signal<IFilterResult>();
     public readonly filterRemoved = new Signal<void>();
 
     constructor(private application: Application) {
@@ -16,14 +17,17 @@ export class UserFilter implements IUserFilter {
             throw new Error('Filter must be defined and not empty. Use removeFilter() to remove the filter');
         }
         const filteredScripts = this.application.getAllScripts().filter(
-            (script) => script.name.toLowerCase().includes(filter.toLowerCase()) ||
+            (script) =>
+            script.name.toLowerCase().includes(filter.toLowerCase()) ||
             script.code.toLowerCase().includes(filter.toLowerCase()));
+        const filteredCategories = this.application.getAllCategories().filter(
+            (script) => script.name.toLowerCase().includes(filter.toLowerCase()));
 
-        const matches: IFilterMatches = {
-            scriptMatches: filteredScripts,
-            categoryMatches: null,
-            query: filter,
-        };
+        const matches = new FilterResult(
+            filteredScripts,
+            filteredCategories,
+            filter,
+        );
 
         this.filtered.notify(matches);
     }
diff --git a/src/application/application.yaml b/src/application/application.yaml
index fb16c5ff..ef7c4bed 100644
--- a/src/application/application.yaml
+++ b/src/application/application.yaml
@@ -1,5 +1,6 @@
 name: privacy.sexy
 version: 0.3.0
+repositoryUrl: https://github.com/undergroundwires/privacy.sexy
 actions:
     -
         category: Privacy cleanup
diff --git a/src/application/application.yaml.d.ts b/src/application/application.yaml.d.ts
index 1f4d9320..7a181a38 100644
--- a/src/application/application.yaml.d.ts
+++ b/src/application/application.yaml.d.ts
@@ -20,6 +20,7 @@ declare module 'js-yaml-loader!*' {
     interface ApplicationYaml {
         name: string;
         version: number;
+        repositoryUrl: string;
         actions: ReadonlyArray<YamlCategory>;
     }
 
diff --git a/src/domain/Application.ts b/src/domain/Application.ts
index 4610222b..5f11eef3 100644
--- a/src/domain/Application.ts
+++ b/src/domain/Application.ts
@@ -11,14 +11,12 @@ export class Application implements IApplication {
 
     constructor(
         public readonly name: string,
+        public readonly repositoryUrl: string,
         public readonly version: number,
         public readonly categories: ReadonlyArray<ICategory>) {
-        if (!name) {
-            throw Error('Application has no name');
-        }
-        if (!version) {
-            throw Error('Version cannot be zero');
-        }
+        if (!name) { throw Error('Application has no name'); }
+        if (!repositoryUrl) { throw Error('Application has no repository url'); }
+        if (!version) { throw Error('Version cannot be zero'); }
         this.flattened = flatten(categories);
         if (this.flattened.allCategories.length === 0) {
             throw new Error('Application must consist of at least one category');
@@ -48,6 +46,10 @@ export class Application implements IApplication {
     public getAllScripts(): IScript[] {
         return this.flattened.allScripts;
     }
+
+    public getAllCategories(): ICategory[] {
+        return this.flattened.allCategories;
+    }
 }
 
 function ensureNoDuplicates<TKey>(entities: ReadonlyArray<IEntity<TKey>>) {
diff --git a/src/domain/IApplication.ts b/src/domain/IApplication.ts
index c714662c..b5146c8e 100644
--- a/src/domain/IApplication.ts
+++ b/src/domain/IApplication.ts
@@ -3,6 +3,7 @@ import { ICategory } from '@/domain/ICategory';
 
 export interface IApplication {
     readonly name: string;
+    readonly repositoryUrl: string;
     readonly version: number;
     readonly categories: ReadonlyArray<ICategory>;
     readonly totalScripts: number;
@@ -12,6 +13,7 @@ export interface IApplication {
     findCategory(categoryId: number): ICategory | undefined;
     findScript(scriptId: string): IScript | undefined;
     getAllScripts(): ReadonlyArray<IScript>;
+    getAllCategories(): ReadonlyArray<ICategory>;
 }
 
 export { IScript } from '@/domain/IScript';
diff --git a/src/presentation/Scripts/Grouping/TheGrouper.vue b/src/presentation/Scripts/Grouping/TheGrouper.vue
index 8f6d30bb..4a04b557 100644
--- a/src/presentation/Scripts/Grouping/TheGrouper.vue
+++ b/src/presentation/Scripts/Grouping/TheGrouper.vue
@@ -4,12 +4,12 @@
         <span class="part">
             <span 
                 class="part"
-                v-bind:class="{ 'disabled': isGrouped, 'enabled': !isGrouped}"
-                @click="!isGrouped ? toggleGrouping() : undefined">Cards</span>
+                v-bind:class="{ 'disabled': cardsSelected, 'enabled': !cardsSelected}"
+                @click="groupByCard()">Cards</span>
             <span class="part">|</span>
             <span class="part"
-                v-bind:class="{ 'disabled': !isGrouped, 'enabled': isGrouped}"
-                @click="isGrouped ? toggleGrouping() : undefined">None</span>
+                v-bind:class="{ 'disabled': noneSelected, 'enabled': !noneSelected}"
+                @click="groupByNone()">None</span>
             </span>
     </div>
 </template>
@@ -22,12 +22,30 @@ import { Grouping } from './Grouping';
 
 @Component
 export default class TheGrouper extends StatefulVue {
-    public currentGrouping: Grouping;
-    public isGrouped = true;
+    public cardsSelected = false;
+    public noneSelected = false;
 
-    public toggleGrouping() {
-        this.currentGrouping = this.currentGrouping === Grouping.None ? Grouping.Cards : Grouping.None;
-        this.isGrouped = this.currentGrouping === Grouping.Cards;
+    private currentGrouping: Grouping;
+
+    public mounted() {
+        this.changeGrouping(Grouping.Cards);
+    }
+
+    public groupByCard() {
+        this.changeGrouping(Grouping.Cards);
+    }
+
+    public groupByNone() {
+        this.changeGrouping(Grouping.None);
+    }
+
+    private changeGrouping(newGrouping: Grouping) {
+        if (this.currentGrouping === newGrouping) {
+            return;
+        }
+        this.currentGrouping = newGrouping;
+        this.cardsSelected = newGrouping === Grouping.Cards;
+        this.noneSelected = newGrouping === Grouping.None;
         this.$emit('groupingChanged', this.currentGrouping);
     }
 }
diff --git a/src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts b/src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts
index bf25782f..b269e0d9 100644
--- a/src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts
+++ b/src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts
@@ -20,6 +20,13 @@ export function parseSingleCategory(categoryId: number, state: IApplicationState
   return tree;
 }
 
+export function getScriptNodeId(script: IScript): string {
+  return script.id;
+}
+export function getCategoryNodeId(category: ICategory): string {
+  return `${category.id}`;
+}
+
 function parseCategoryRecursively(
   parentCategory: ICategory,
   selection: IUserSelection): INode[] {
@@ -44,7 +51,7 @@ function parseCategoryRecursively(
 function convertCategoryToNode(
   category: ICategory, children: readonly INode[]): INode {
   return {
-    id: `${category.id}`,
+    id: getCategoryNodeId(category),
     text: category.name,
     selected: false,
     children,
@@ -54,7 +61,7 @@ function convertCategoryToNode(
 
 function convertScriptToNode(script: IScript, selection: IUserSelection): INode {
   return {
-    id: `${script.id}`,
+    id: getScriptNodeId(script),
     text: script.name,
     selected: selection.isSelected(script),
     children: undefined,
diff --git a/src/presentation/Scripts/ScriptsTree/ScriptsTree.vue b/src/presentation/Scripts/ScriptsTree/ScriptsTree.vue
index 03e1db70..c4812e73 100644
--- a/src/presentation/Scripts/ScriptsTree/ScriptsTree.vue
+++ b/src/presentation/Scripts/ScriptsTree/ScriptsTree.vue
@@ -1,12 +1,12 @@
 <template>
     <span id="container">
         <span v-if="nodes != null && nodes.length > 0">
-            <SelectableTree
-              :nodes="nodes"
-              :selectedNodeIds="selectedNodeIds"
-              :filterPredicate="filterPredicate"
-              :filterText="filterText"
-              v-on:nodeSelected="checkNodeAsync($event)">
+            <SelectableTree 
+                :nodes="nodes"
+                :selectedNodeIds="selectedNodeIds"
+                :filterPredicate="filterPredicate"
+                :filterText="filterText"
+                v-on:nodeSelected="checkNodeAsync($event)">
             </SelectableTree>
         </span>
         <span v-else>Nooo 😢</span>
@@ -19,9 +19,11 @@
   import { Category } from '@/domain/Category';
   import { IRepository } from '@/infrastructure/Repository/IRepository';
   import { IScript } from '@/domain/IScript';
+  import { ICategory } from '@/domain/ICategory';
+
   import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
-  import { IFilterMatches } from '@/application/State/Filter/IFilterMatches';
-  import { parseAllCategories, parseSingleCategory } from './ScriptNodeParser';
+  import { IFilterResult } from '@/application/State/Filter/IFilterResult';
+  import { parseAllCategories, parseSingleCategory, getScriptNodeId, getCategoryNodeId } from './ScriptNodeParser';
   import SelectableTree, { FilterPredicate } from './SelectableTree/SelectableTree.vue';
   import { INode } from './SelectableTree/INode';
 
@@ -37,11 +39,11 @@
     public selectedNodeIds?: string[] = null;
     public filterText?: string = null;
 
-    private matches?: IFilterMatches;
+    private filtered?: IFilterResult;
 
     public async mounted() {
-      // React to state changes
       const state = await this.getCurrentStateAsync();
+      // React to state changes
       state.selection.changed.on(this.handleSelectionChanged);
       state.filter.filterRemoved.on(this.handleFilterRemoved);
       state.filter.filtered.on(this.handleFiltered);
@@ -72,7 +74,10 @@
     }
 
     public filterPredicate(node: INode): boolean {
-      return this.matches.scriptMatches.some((script: IScript) => script.id === node.id);
+      return this.filtered.scriptMatches.some(
+        (script: IScript) => node.id === getScriptNodeId(script))
+        || this.filtered.categoryMatches.some(
+          (category: ICategory) => node.id === getCategoryNodeId(category));
     }
 
     private handleSelectionChanged(selectedScripts: ReadonlyArray<IScript>) {
@@ -83,9 +88,9 @@
       this.filterText = '';
     }
 
-    private handleFiltered(matches: IFilterMatches) {
-      this.filterText = matches.query;
-      this.matches = matches;
+    private handleFiltered(result: IFilterResult) {
+      this.filterText = result.query;
+      this.filtered = result;
     }
   }
 
diff --git a/src/presentation/Scripts/TheScripts.vue b/src/presentation/Scripts/TheScripts.vue
index 13e7b770..017c81c9 100644
--- a/src/presentation/Scripts/TheScripts.vue
+++ b/src/presentation/Scripts/TheScripts.vue
@@ -5,8 +5,18 @@
             <TheGrouper class="right"
                 v-on:groupingChanged="onGroupingChanged($event)" />
         </div>
-        <CardList v-if="showCards" />
-        <ScriptsTree v-if="showList" />
+        <div class="scripts">
+            <div v-if="!isSearching || searchHasMatches">
+                    <CardList v-if="showCards" />
+                    <div v-else-if="showList" class="tree">
+                        <ScriptsTree />
+                    </div>
+                    </div>
+                    <div v-else class="search-no-matches">
+                        Search has no matches 😞
+                        Feel free to extend the scripts <a :href="repositoryUrl" target="_blank" class="child github" >here</a>.
+            </div>
+        </div>
     </div>
 </template>
 
@@ -14,11 +24,13 @@
     import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
     import { Category } from '@/domain/Category';
     import { StatefulVue } from '@/presentation/StatefulVue';
+    import { Grouping } from './Grouping/Grouping';
+    import { IFilterResult } from '@/application/State/Filter/IFilterResult';
     import TheGrouper from '@/presentation/Scripts/Grouping/TheGrouper.vue';
     import TheSelector from '@/presentation/Scripts/Selector/TheSelector.vue';
     import ScriptsTree from '@/presentation/Scripts/ScriptsTree/ScriptsTree.vue';
     import CardList from '@/presentation/Scripts/Cards/CardList.vue';
-    import { Grouping } from './Grouping/Grouping';
+
 
     /** Shows content of single category or many categories */
     @Component({
@@ -30,33 +42,70 @@
     },
     })
     export default class TheScripts extends StatefulVue {
-        public showCards = true;
+        public showCards = false;
         public showList = false;
+        public repositoryUrl = '';
+        private isSearching = false;
+        private searchHasMatches = false;
 
-        @Prop() public data!: Category | Category[];
+        private currentGrouping: Grouping;
+
+        public async mounted() {
+            const state = await this.getCurrentStateAsync();
+            this.repositoryUrl = state.app.repositoryUrl;
+            state.filter.filterRemoved.on(() => {
+                this.isSearching = false;
+                this.updateGroups();
+            });
+            state.filter.filtered.on((result: IFilterResult) => {
+                this.isSearching = true;
+                this.searchHasMatches = result.hasAnyMatches();
+                this.updateGroups();
+            });
+        }
 
         public onGroupingChanged(group: Grouping) {
-            switch (group) {
-                case Grouping.Cards:
-                    this.showCards = true;
-                    this.showList = false;
-                    break;
-                case Grouping.None:
-                    this.showCards = false;
-                    this.showList = true;
-                    break;
-                default:
-                    throw new Error('Unknown grouping');
-            }
+            this.currentGrouping = group;
+            this.updateGroups();
+        }
+
+        private updateGroups(): void {
+            this.showCards = !this.isSearching && this.currentGrouping === Grouping.Cards;
+            this.showList = this.isSearching || this.currentGrouping === Grouping.None;
         }
     }
 </script>
 
 <style scoped lang="scss">
+@import "@/presentation/styles/colors.scss";
+@import "@/presentation/styles/fonts.scss";
+.scripts {
+    margin-top:10px;
+    .search-no-matches {
+        word-break:break-word;
+        color: $white;
+        text-transform: uppercase;
+        color: $light-gray;
+        font-size: 1.5em;
+        background-color: $slate;
+        padding:5%;
+        text-align:center;
+        > a {
+            color: $gray;
+        }
+    }
+    .tree {
+        padding-left: 3%;
+        margin-top: 15px; // Card margin
+    }
+}
 .help-container {
   display: flex;
   justify-content: space-between;
-
+  align-items: center;
+  .center {
+      justify-content: center;
+  }
   .left {
       justify-content: flex-start;
   }
@@ -64,4 +113,5 @@
       justify-content: flex-end;
   }
 }
+
 </style>
diff --git a/src/presentation/TheHeader.vue b/src/presentation/TheHeader.vue
index e1d339b3..11d6b5f2 100644
--- a/src/presentation/TheHeader.vue
+++ b/src/presentation/TheHeader.vue
@@ -2,7 +2,7 @@
     <div id="container">
       <h1 class="child title" >{{ title }}</h1>
       <h2 class="child subtitle">{{ subtitle }}</h2>
-      <a :href="githubUrl" target="_blank" class="child github" >
+      <a :href="repositoryUrl" target="_blank" class="child github" >
           <font-awesome-icon :icon="['fab', 'github']" size="3x"  />
       </a>
     </div>
@@ -14,14 +14,15 @@ import { StatefulVue } from './StatefulVue';
 
 @Component
 export default class TheHeader extends StatefulVue {
-  private title: string = '';
-  private subtitle: string = '';
-  @Prop() private githubUrl!: string;
+  public title = '';
+  public subtitle = '';
+  public repositoryUrl = '';
 
   public async mounted() {
     const state = await this.getCurrentStateAsync();
     this.title = state.app.name;
     this.subtitle = 'Enforce privacy & security on Windows';
+    this.repositoryUrl = state.app.repositoryUrl;
   }
 }
 </script>
diff --git a/src/presentation/TheSearchBar.vue b/src/presentation/TheSearchBar.vue
index 62daee56..ec78c7b0 100644
--- a/src/presentation/TheSearchBar.vue
+++ b/src/presentation/TheSearchBar.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
         <div class="search">
-            <input type="text" class="searchTerm" placeholder="Search for configurations"
+            <input type="text" class="searchTerm" placeholder="Search"
               @input="updateFilterAsync($event.target.value)" >
             <div class="iconWrapper">
                 <font-awesome-icon :icon="['fas', 'search']" />
@@ -16,8 +16,6 @@ import { StatefulVue } from './StatefulVue';
 
 @Component
 export default class TheSearchBar extends StatefulVue {
-
-
   public async updateFilterAsync(filter: |string) {
     const state = await this.getCurrentStateAsync();
     if (!filter) {
@@ -35,9 +33,6 @@ export default class TheSearchBar extends StatefulVue {
 @import "@/presentation/styles/fonts.scss";
 
 .container {
-    padding-top: 30px;
-    padding-right: 30%;
-    padding-left: 30%;
     font: $normal-font;
 }
 
@@ -49,6 +44,7 @@ export default class TheSearchBar extends StatefulVue {
 
 .searchTerm {
   width: 100%;
+  min-width: 60px;
   border: 1.5px solid $gray;
   border-right: none;
   height: 36px;
diff --git a/tests/unit/domain/Application.spec.ts b/tests/unit/domain/Application.spec.ts
index ba4d9dac..261abcf4 100644
--- a/tests/unit/domain/Application.spec.ts
+++ b/tests/unit/domain/Application.spec.ts
@@ -11,7 +11,7 @@ describe('Application', () => {
             new ScriptStub('S3').withIsRecommended(true),
             new ScriptStub('S4').withIsRecommended(true),
         ];
-        const sut = new Application('name', 2, [
+        const sut = new Application('name', 'repo', 2, [
             new CategoryStub(3).withScripts(expected[0], new ScriptStub('S1').withIsRecommended(false)),
             new CategoryStub(2).withScripts(expected[1], new ScriptStub('S2').withIsRecommended(false)),
         ]);
@@ -28,7 +28,7 @@ describe('Application', () => {
         const categories = [];
 
         // act
-        function construct() { return new Application('name', 2, categories); }
+        function construct() { return new Application('name', 'repo', 2, categories); }
 
         // assert
         expect(construct).to.throw('Application must consist of at least one category');
@@ -41,7 +41,7 @@ describe('Application', () => {
         ];
 
         // act
-        function construct() { return new Application('name', 2, categories); }
+        function construct() { return new Application('name', 'repo',  2, categories); }
 
         // assert
         expect(construct).to.throw('Application must consist of at least one script');
@@ -54,7 +54,7 @@ describe('Application', () => {
         ];
 
         // act
-        function construct() { return new Application('name', 2, categories); }
+        function construct() { return new Application('name', 'repo', 2, categories); }
 
         // assert
         expect(construct).to.throw('Application must consist of at least one recommended script');
diff --git a/tests/unit/stubs/ApplicationStub.ts b/tests/unit/stubs/ApplicationStub.ts
index c45b3b88..750e28b7 100644
--- a/tests/unit/stubs/ApplicationStub.ts
+++ b/tests/unit/stubs/ApplicationStub.ts
@@ -4,6 +4,7 @@ export class ApplicationStub implements IApplication {
     public readonly totalScripts = 0;
     public readonly totalCategories = 0;
     public readonly name = 'StubApplication';
+    public readonly repositoryUrl = 'https://privacy.sexy';
     public readonly version = 1;
     public readonly categories = new Array<ICategory>();
 
@@ -23,4 +24,7 @@ export class ApplicationStub implements IApplication {
     public getAllScripts(): ReadonlyArray<IScript> {
         throw new Error('Method not implemented.');
     }
+    public getAllCategories(): ReadonlyArray<ICategory> {
+        throw new Error('Method not implemented.');
+    }
 }