🚀 0.4.2 release

Develop

CHANGELOG.md

@@ -2,7 +2,26 @@
 
 - All notable changes to this project will be documented in this file.
 
-## [Unreleased]
+## Unreleased
+
+-
+
+## [0.4.2] - 2020-02-29
+
+- Fixed search text font being defaulted to Arial.
+- Shortened `HKEY` paths in scripts
+
+## [0.4.1] - 2020-01-11
+
+- Fixed & improved search
+- Hiding grouping while searching
+- Showing search queries when searching
+
+## [0.4.0] - 2020-01-11
+
+- Added search
+- Some styling improvements
+- Better organization of scripts + more scripts
 
 ## [0.3.0] - 2020-01-09
 
@@ -27,7 +46,10 @@
 
 ## All releases
 
-- [Unreleased] : https://github.com/undergroundwires/privacy.sexy/compare/v0.3.0...HEAD
+- [Unreleased] : https://github.com/undergroundwires/privacy.sexy/compare/v0.4.2...HEAD
+- [v0.4.2] : https://github.com/undergroundwires/privacy.sexy/compare/v0.4.1...v0.4.2
+- [v0.4.1] : https://github.com/undergroundwires/privacy.sexy/compare/v0.4.0...v0.4.1
+- [v0.4.0] : https://github.com/undergroundwires/privacy.sexy/compare/v0.3.0...v0.4.0
 - [v0.3.0] : https://github.com/undergroundwires/privacy.sexy/compare/v0.2.0...v0.3.0
 - [v0.2.0] : https://github.com/undergroundwires/privacy.sexy/compare/v0.1.0...v0.2.0
 - [v0.1.0] : https://github.com/undergroundwires/privacy.sexy/releases/tag/v0.1.0

aws/scripts/deploy/invalidate-cloudfront-cache.sh

@@ -36,7 +36,7 @@ CLOUDFRONT_ARN=$(aws cloudformation describe-stacks \
             --output text \
             --profile $ROLE_PROFILE)
 if [ -z "$CLOUDFRONT_ARN" ]; then echo "Could not read CloudFront ARN"; exit 1; fi;
-echo :add-mask::$CLOUDFRONT_ARN
+echo ::add-mask::$CLOUDFRONT_ARN
 
 echo Syncing folder to S3
 aws cloudfront create-invalidation \

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,
   },
 })

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;
 }

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;
+    }
+}

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;
 }

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;

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) {
@@ -15,15 +16,19 @@ export class UserFilter implements IUserFilter {
         if (!filter) {
             throw new Error('Filter must be defined and not empty. Use removeFilter() to remove the filter');
         }
+        const filterLowercase = filter.toLocaleLowerCase();
         const filteredScripts = this.application.getAllScripts().filter(
-            (script) => script.name.toLowerCase().includes(filter.toLowerCase()) ||
-            script.code.toLowerCase().includes(filter.toLowerCase()));
+            (script) =>
+            script.name.toLowerCase().includes(filterLowercase) ||
+            script.code.toLowerCase().includes(filterLowercase));
+        const filteredCategories = this.application.getAllCategories().filter(
+            (script) => script.name.toLowerCase().includes(filterLowercase));
 
-        const matches: IFilterMatches = {
-            scriptMatches: filteredScripts,
-            categoryMatches: null,
-            query: filter,
-        };
+        const matches = new FilterResult(
+            filteredScripts,
+            filteredCategories,
+            filter,
+        );
 
         this.filtered.notify(matches);
     }

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>;
     }
 

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>>) {

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';

src/global.d.ts

@@ -37,6 +37,18 @@ declare module 'liquor-tree' {
         children: ReadonlyArray<ILiquorTreeNewNode> | undefined;
         data: ICustomLiquorTreeData;
     }
+    
+    // https://amsik.github.io/liquor-tree/#Component-Options
+    export interface ILiquorTreeOptions {
+        multiple: boolean;
+        checkbox: boolean;
+        checkOnSelect: boolean;
+        autoCheckChildren: boolean;
+        parentSelect: boolean;
+        keyboardNavigation: boolean;
+        deletion: (node: ILiquorTreeExistingNode) => void;
+        filter: ILiquorTreeFilter;
+    }
 
     // https://github.com/amsik/liquor-tree/blob/master/src/lib/Node.js
     interface ILiquorTreeNodeState {
@@ -58,7 +70,7 @@ declare module 'liquor-tree' {
     // https://github.com/amsik/liquor-tree/blob/master/src/components/TreeRoot.vue
     interface ILiquorTreeFilter {
         emptyText: string;
-        matcher(query: string, node: ILiquorTreeNewNode): boolean;
+        matcher(query: string, node: ILiquorTreeExistingNode): boolean;
     }
 
     const LiquorTree: PluginObject<any> & VueClass<any>;

src/presentation/Scripts/Cards/CardListItem.vue

@@ -52,7 +52,6 @@ export default class CardListItem extends StatefulVue {
     this.cardTitle = value ? await this.getCardTitleAsync(value) : undefined;
   }
 
-
   private async getCardTitleAsync(categoryId: number): Promise<string | undefined> {
       const state = await this.getCurrentStateAsync();
       const category = state.app.findCategory(this.categoryId);

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>
@@ -20,14 +20,35 @@ import { StatefulVue } from '@/presentation/StatefulVue';
 import { IApplicationState } from '@/application/State/IApplicationState';
 import { Grouping } from './Grouping';
 
+const DefaultGrouping = Grouping.Cards;
+
 @Component
 export default class TheGrouper extends StatefulVue {
-    public currentGrouping: Grouping;
-    public isGrouped = true;
 
-    public toggleGrouping() {
-        this.currentGrouping = this.currentGrouping === Grouping.None ? Grouping.Cards : Grouping.None;
-        this.isGrouped = this.currentGrouping === Grouping.Cards;
+    public cardsSelected = false;
+    public noneSelected = false;
+
+    private currentGrouping: Grouping;
+
+    public mounted() {
+        this.changeGrouping(DefaultGrouping);
+    }
+
+    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);
     }
 }

src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts

@@ -1,41 +1,46 @@
-import { IApplicationState, IUserSelection } from '@/application/State/IApplicationState';
+import { IApplication } from './../../../domain/IApplication';
 import { ICategory, IScript } from '@/domain/ICategory';
 import { INode } from './SelectableTree/INode';
 
-export function parseAllCategories(state: IApplicationState): INode[] | undefined {
+export function parseAllCategories(app: IApplication): INode[] | undefined {
   const nodes = new Array<INode>();
-  for (const category of state.app.categories) {
-    const children = parseCategoryRecursively(category, state.selection);
+  for (const category of app.categories) {
+    const children = parseCategoryRecursively(category);
     nodes.push(convertCategoryToNode(category, children));
   }
   return nodes;
 }
 
-export function parseSingleCategory(categoryId: number, state: IApplicationState): INode[] | undefined {
-  const category = state.app.findCategory(categoryId);
+export function parseSingleCategory(categoryId: number, app: IApplication): INode[] | undefined {
+  const category = app.findCategory(categoryId);
   if (!category) {
     throw new Error(`Category with id ${categoryId} does not exist`);
   }
-  const tree = parseCategoryRecursively(category, state.selection);
+  const tree = parseCategoryRecursively(category);
   return tree;
 }
 
+export function getScriptNodeId(script: IScript): string {
+  return script.id;
+}
+export function getCategoryNodeId(category: ICategory): string {
+  return `Category${category.id}`;
+}
+
 function parseCategoryRecursively(
-  parentCategory: ICategory,
-  selection: IUserSelection): INode[] {
+  parentCategory: ICategory): INode[] {
   if (!parentCategory) { throw new Error('parentCategory is undefined'); }
-  if (!selection) { throw new Error('selection is undefined'); }
 
   const nodes = new Array<INode>();
   if (parentCategory.subCategories && parentCategory.subCategories.length > 0) {
     for (const subCategory of parentCategory.subCategories) {
-      const subCategoryNodes = parseCategoryRecursively(subCategory, selection);
+      const subCategoryNodes = parseCategoryRecursively(subCategory);
       nodes.push(convertCategoryToNode(subCategory, subCategoryNodes));
     }
   }
   if (parentCategory.scripts && parentCategory.scripts.length > 0) {
     for (const script of parentCategory.scripts) {
-      nodes.push(convertScriptToNode(script, selection));
+      nodes.push(convertScriptToNode(script));
     }
   }
   return nodes;
@@ -44,19 +49,17 @@ function parseCategoryRecursively(
 function convertCategoryToNode(
   category: ICategory, children: readonly INode[]): INode {
   return {
-    id: `${category.id}`,
+    id: getCategoryNodeId(category),
     text: category.name,
-    selected: false,
     children,
     documentationUrls: category.documentationUrls,
   };
 }
 
-function convertScriptToNode(script: IScript, selection: IUserSelection): INode {
+function convertScriptToNode(script: IScript): INode {
   return {
-    id: `${script.id}`,
+    id: getScriptNodeId(script),
     text: script.name,
-    selected: selection.isSelected(script),
     children: undefined,
     documentationUrls: script.documentationUrls,
   };

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 
+                :initialNodes="nodes"
+                :selectedNodeIds="selectedNodeIds"
+                :filterPredicate="filterPredicate"
+                :filterText="filterText"
+                v-on:nodeSelected="checkNodeAsync($event)">
             </SelectableTree>
         </span>
         <span v-else>Nooo 😢</span>
@@ -19,9 +19,10 @@
   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';
 
@@ -33,15 +34,15 @@
   export default class ScriptsTree extends StatefulVue {
     @Prop() public categoryId?: number;
 
-    public nodes?: INode[] = null;
-    public selectedNodeIds?: string[] = null;
+    public nodes?: ReadonlyArray<INode> = null;
+    public selectedNodeIds?: ReadonlyArray<string> = [];
     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);
@@ -54,7 +55,7 @@
             return; // only interested in script nodes
         }
         const state = await this.getCurrentStateAsync();
-        if (node.selected) {
+        if (!this.selectedNodeIds.some((id) => id === node.id)) {
             state.selection.addSelectedScript(node.id);
         } else {
             state.selection.removeSelectedScript(node.id);
@@ -65,40 +66,36 @@
     public async initializeNodesAsync(categoryId?: number) {
       const state = await this.getCurrentStateAsync();
       if (categoryId) {
-        this.nodes = parseSingleCategory(categoryId, state);
+        this.nodes = parseSingleCategory(categoryId, state.app);
       } else {
-        this.nodes = parseAllCategories(state);
+        this.nodes = parseAllCategories(state.app);
       }
+      this.selectedNodeIds = state.selection.selectedScripts
+        .map((script) => getScriptNodeId(script));
     }
 
     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>) {
-      this.nodes = this.nodes.map((node: INode) => updateNodeSelection(node, selectedScripts));
+    private handleSelectionChanged(selectedScripts: ReadonlyArray<IScript>): void {
+      this.selectedNodeIds = selectedScripts
+          .map((node) => node.id);
     }
 
     private handleFilterRemoved() {
       this.filterText = '';
     }
 
-    private handleFiltered(matches: IFilterMatches) {
-      this.filterText = matches.query;
-      this.matches = matches;
+    private handleFiltered(result: IFilterResult) {
+      this.filterText = result.query;
+      this.filtered = result;
     }
   }
 
-  function updateNodeSelection(node: INode, selectedScripts: ReadonlyArray<IScript>): INode {
-    return {
-      id: node.id,
-      text: node.text,
-      selected: selectedScripts.some((script) => script.id === node.id),
-      children: node.children ? node.children.map((child) => updateNodeSelection(child, selectedScripts)) : [],
-      documentationUrls: node.documentationUrls,
-      };
-  }
-
 </script>
 
 <style scoped lang="scss">

src/presentation/Scripts/ScriptsTree/SelectableTree/INode.ts

@@ -3,5 +3,4 @@ export interface INode {
     readonly text: string;
     readonly documentationUrls: ReadonlyArray<string>;
     readonly children?: ReadonlyArray<INode>;
-    readonly selected: boolean;
 }

src/presentation/Scripts/ScriptsTree/SelectableTree/Node.vue

@@ -7,7 +7,7 @@
             <a :href="url"
                 :alt="url"
                 target="_blank" class="docs"
-                  v-tooltip.top-center="url"
+                v-tooltip.top-center="url"
                 v-on:click.stop>
                 <font-awesome-icon :icon="['fas', 'info-circle']" />
                 </a>

src/presentation/Scripts/ScriptsTree/SelectableTree/NodeTranslator.ts

@@ -0,0 +1,32 @@
+import { ILiquorTreeNewNode, ILiquorTreeExistingNode } from 'liquor-tree';
+import { INode } from './INode';
+
+// Functions to translate INode to LiqourTree models and vice versa for anti-corruption
+
+export function convertExistingToNode(liquorTreeNode: ILiquorTreeExistingNode): INode {
+    if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
+    return {
+        id: liquorTreeNode.id,
+        text: liquorTreeNode.data.text,
+        // selected: liquorTreeNode.states && liquorTreeNode.states.checked,
+        children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
+         ? [] : liquorTreeNode.children.map((childNode) => convertExistingToNode(childNode)),
+        documentationUrls: liquorTreeNode.data.documentationUrls,
+    };
+}
+
+export function toNewLiquorTreeNode(node: INode): ILiquorTreeNewNode {
+    if (!node) { throw new Error('node is undefined'); }
+    return {
+        id: node.id,
+        text: node.text,
+        state: {
+            checked: false,
+        },
+        children: (!node.children || node.children.length === 0) ? [] :
+         node.children.map((childNode) => toNewLiquorTreeNode(childNode)),
+        data: {
+            documentationUrls: node.documentationUrls,
+        },
+    };
+}

src/presentation/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue

@@ -1,8 +1,8 @@
 <template>
     <span>
-        <span v-if="initialNodes != null && initialNodes.length > 0">
+        <span v-if="initialLiquourTreeNodes != null && initialLiquourTreeNodes.length > 0">
             <tree :options="liquorTreeOptions"
-                  :data="this.initialNodes"
+                  :data="initialLiquourTreeNodes"
                   v-on:node:checked="nodeSelected($event)"
                   v-on:node:unchecked="nodeSelected($event)"
                   ref="treeElement"
@@ -18,9 +18,10 @@
 
 <script lang="ts">
     import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator';
-    import LiquorTree, { ILiquorTreeNewNode, ILiquorTreeExistingNode, ILiquorTree } from 'liquor-tree';
+    import LiquorTree, { ILiquorTreeNewNode, ILiquorTreeExistingNode, ILiquorTree, ILiquorTreeOptions } from 'liquor-tree';
     import Node from './Node.vue';
     import { INode } from './INode';
+    import { convertExistingToNode, toNewLiquorTreeNode } from './NodeTranslator';
     export type FilterPredicate = (node: INode) => boolean;
 
     /** Wrapper for Liquor Tree, reveals only abstracted INode for communication */
@@ -33,28 +34,31 @@
     export default class SelectableTree extends Vue {
         @Prop() public filterPredicate?: FilterPredicate;
         @Prop() public filterText?: string;
-        @Prop() public nodes?: INode[];
+        @Prop() public selectedNodeIds?: ReadonlyArray<string>;
+        @Prop() public initialNodes?: ReadonlyArray<INode>;
 
-        public initialNodes?: ILiquorTreeNewNode[] = null;
-        public liquorTreeOptions = this.getLiquorTreeOptions();
+        public initialLiquourTreeNodes?: ILiquorTreeNewNode[] = null;
+        public liquorTreeOptions = this.getDefaults();
+        public convertExistingToNode = convertExistingToNode;
 
         public mounted() {
-            // console.log('Mounted', 'initial nodes', this.nodes);
-            // console.log('Mounted', 'initial model', this.getLiquorTreeApi().model);
-
-            if (this.nodes) {
-                this.initialNodes = this.nodes.map((node) => this.toLiquorTreeNode(node));
+            if (this.initialNodes) {
+                const initialNodes = this.initialNodes.map((node) => toNewLiquorTreeNode(node));
+                if (this.selectedNodeIds) {
+                    recurseDown(initialNodes,
+                        (node) => node.state.checked = this.selectedNodeIds.includes(node.id));
+                }
+                this.initialLiquourTreeNodes = initialNodes;
             } else {
                 throw new Error('Initial nodes are null or empty');
             }
-
             if (this.filterText) {
                this.updateFilterText(this.filterText);
             }
         }
 
         public nodeSelected(node: ILiquorTreeExistingNode) {
-            this.$emit('nodeSelected', this.convertExistingToNode(node));
+            this.$emit('nodeSelected', convertExistingToNode(node));
             return;
         }
 
@@ -64,104 +68,28 @@
             if (!filterText) {
                 api.clearFilter();
             } else {
-                api.filter('filtered'); // text does not matter, it'll trigger the predicate
+                api.filter('filtered'); // text does not matter, it'll trigger the filterPredicate
             }
         }
 
-        @Watch('nodes', {deep: true})
-        public setSelectedStatus(nodes: |ReadonlyArray<INode>) {
-            if (!nodes || nodes.length === 0) {
-                throw new Error('Updated nodes are null or empty');
+        @Watch('selectedNodeIds')
+        public setSelectedStatus(selectedNodeIds: ReadonlyArray<string>) {
+            if (!selectedNodeIds) {
+                throw new Error('Selected nodes are undefined');
             }
-            // Update old node properties, re-setting it changes expanded status etc.
-            // It'll not be needed when this is merged: https://github.com/amsik/liquor-tree/pull/141
-            const updateCheckedState = (
-                oldNodes: ReadonlyArray<ILiquorTreeExistingNode>,
-                updatedNodes: ReadonlyArray<INode>): ILiquorTreeNewNode[] => {
-                    const newNodes = new Array<ILiquorTreeNewNode>();
-                    for (const oldNode of oldNodes) {
-                                for (const updatedNode of updatedNodes) {
-                                    if (oldNode.id === updatedNode.id) {
-                                        const newState = oldNode.states;
-                                        newState.checked = updatedNode.selected;
-                                        newNodes.push({
-                                            id: oldNode.id,
-                                            text: updatedNode.text,
-                                            children: oldNode.children == null ? [] :
-                                                updateCheckedState(
-                                                    oldNode.children,
-                                                    updatedNode.children),
-                                            state: newState,
-                                            data: {
-                                                documentationUrls: oldNode.data.documentationUrls,
-                                            },
-                                        });
-                                    }
-                                }
-                            }
-                    return newNodes;
-            };
-            const newModel = updateCheckedState(
-                this.getLiquorTreeApi().model, nodes);
-            this.getLiquorTreeApi().setModel(newModel);
-        }
-
-        private convertItem(liquorTreeNode: ILiquorTreeNewNode): INode {
-            if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
-            return {
-                id: liquorTreeNode.id,
-                text: liquorTreeNode.text,
-                selected: liquorTreeNode.state && liquorTreeNode.state.checked,
-                children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
-                 ? [] : liquorTreeNode.children.map((childNode) => this.convertItem(childNode)),
-                documentationUrls: liquorTreeNode.data.documentationUrls,
-            };
-        }
-
-        private convertExistingToNode(liquorTreeNode: ILiquorTreeExistingNode): INode {
-            if (!liquorTreeNode) { throw new Error('liquorTreeNode is undefined'); }
-            return {
-                id: liquorTreeNode.id,
-                text: liquorTreeNode.data.text,
-                selected: liquorTreeNode.states && liquorTreeNode.states.checked,
-                children: (!liquorTreeNode.children || liquorTreeNode.children.length === 0)
-                 ? [] : liquorTreeNode.children.map((childNode) => this.convertExistingToNode(childNode)),
-                documentationUrls: liquorTreeNode.data.documentationUrls,
-            };
-        }
-
-
-        private toLiquorTreeNode(node: INode): ILiquorTreeNewNode {
-            if (!node) { throw new Error('node is undefined'); }
-            return {
-                id: node.id,
-                text: node.text,
-                state: {
-                    checked: node.selected,
-                },
-                children: (!node.children || node.children.length === 0) ? [] :
-                 node.children.map((childNode) => this.toLiquorTreeNode(childNode)),
-                data: {
-                    documentationUrls: node.documentationUrls,
-                },
-            };
-        }
-
-        private getLiquorTreeOptions(): any {
-            return {
-                checkbox: true,
-                checkOnSelect: true,
-                deletion: (node) => !node.children || node.children.length === 0,
-                filter: {
-                    matcher: (query: string, node: ILiquorTreeExistingNode) => {
-                        if (!this.filterPredicate) {
-                            throw new Error('Cannot filter as predicate is null');
-                        }
-                        return this.filterPredicate(this.convertExistingToNode(node));
-                    },
-                    emptyText: '🕵️Hmm.. Can not see one 🧐',
-                },
-            };
+            const newNodes = updateCheckedState(this.getLiquorTreeApi().model, selectedNodeIds);
+            this.getLiquorTreeApi().setModel(newNodes);
+            /*  Alternative:
+                    this.getLiquorTreeApi().recurseDown((node) => {
+                                node.states.checked = selectedNodeIds.includes(node.id);
+                            });
+                Problem: Does not check their parent if all children are checked, because it does not
+                        trigger update on parent as we work with scripts not categories. */
+            /*  Alternative:
+                    this.getLiquorTreeApi().recurseDown((node) => {
+                            if(selectedNodeIds.includes(node.id)) { node.select(); } else { node.unselect(); }
+                    });
+                Problem: Emits nodeSelected() event again which will cause an infinite loop. */
         }
 
         private getLiquorTreeApi(): ILiquorTree {
@@ -170,8 +98,61 @@
             }
             return (this.$refs.treeElement as any).tree;
         }
+
+        private getDefaults(): ILiquorTreeOptions {
+            return {
+                multiple: true,
+                checkbox: true,
+                checkOnSelect: true,
+                autoCheckChildren: true,
+                parentSelect: false,
+                keyboardNavigation: true,
+                deletion: (node) => !node.children || node.children.length === 0,
+                filter: {
+                    matcher: (query: string, node: ILiquorTreeExistingNode) => {
+                        if (!this.filterPredicate) {
+                            throw new Error('Cannot filter as predicate is null');
+                        }
+                        return this.filterPredicate(convertExistingToNode(node));
+                    },
+                    emptyText: '🕵️Hmm.. Can not see one 🧐',
+                },
+            };
+        }
     }
 
+    function recurseDown(
+        nodes: ReadonlyArray<ILiquorTreeNewNode>,
+        handler: (node: ILiquorTreeNewNode) => void) {
+        for (const node of nodes) {
+            handler(node);
+            if (node.children) {
+                recurseDown(node.children, handler);
+            }
+        }
+    }
+
+    function updateCheckedState(
+        oldNodes: ReadonlyArray<ILiquorTreeExistingNode>,
+        selectedNodeIds: ReadonlyArray<string>): ReadonlyArray<ILiquorTreeNewNode> {
+        const result = new Array<ILiquorTreeNewNode>();
+        for (const oldNode of oldNodes) {
+            const newState = oldNode.states;
+            newState.checked = selectedNodeIds.some((id) => id === oldNode.id);
+            const newNode: ILiquorTreeNewNode = {
+                id: oldNode.id,
+                text: oldNode.data.text,
+                data: {
+                    documentationUrls: oldNode.data.documentationUrls,
+                },
+                children: oldNode.children == null ? [] :
+                        updateCheckedState(oldNode.children, selectedNodeIds),
+                state: newState,
+            };
+            result.push(newNode);
+        }
+        return result;
+    }
 </script>
 
 

src/presentation/Scripts/TheScripts.vue

@@ -3,10 +3,23 @@
         <div class="help-container">
             <TheSelector class="left" />
             <TheGrouper class="right"
-                v-on:groupingChanged="onGroupingChanged($event)" />
+                v-on:groupingChanged="onGroupingChanged($event)"
+                v-show="!this.isSearching" />
+        </div>
+        <div class="scripts">
+            <div v-if="!isSearching || searchHasMatches">
+                    <CardList v-if="this.showCards" />
+                    <div v-else-if="this.showList" class="tree">
+                        <div v-if="this.isSearching" class="search-query">
+                            Searching for "{{this.searchQuery | threeDotsTrim}}"</div>
+                        <ScriptsTree />
+                    </div>
+                    </div>
+                    <div v-else class="search-no-matches">
+                        Sorry, no matches for "{{this.searchQuery | threeDotsTrim}}" 😞
+                        Feel free to extend the scripts <a :href="repositoryUrl" target="_blank" class="child github" >here</a>.
+            </div>
         </div>
-        <CardList v-if="showCards" />
-        <ScriptsTree v-if="showList" />
     </div>
 </template>
 
@@ -14,11 +27,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({
@@ -28,35 +43,89 @@
         ScriptsTree,
         CardList,
     },
+    filters: {
+        threeDotsTrim(query: string) {
+            const threshold = 30;
+            if (query.length <= threshold - 3) {
+                return query;
+            }
+            return `${query.substr(0, threshold)}...`;
+        },
+    },
     })
     export default class TheScripts extends StatefulVue {
-        public showCards = true;
+        public showCards = false;
         public showList = false;
+        public repositoryUrl = '';
+        private searchQuery = '';
+        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.searchQuery = result.query;
+                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%;
+        padding-top: 15px;
+        padding-bottom: 15px;
+        .search-query {
+            display: flex;
+            justify-content: center;
+            color: $gray;
+        }
+    }
+}
 .help-container {
   display: flex;
   justify-content: space-between;
-
+  align-items: center;
+  .center {
+      justify-content: center;
+  }
   .left {
       justify-content: flex-start;
   }
@@ -64,4 +133,5 @@
       justify-content: flex-end;
   }
 }
+
 </style>

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>

src/presentation/TheSearchBar.vue

@@ -1,13 +1,11 @@
 <template>
-    <div class="container">
-        <div class="search">
-            <input type="text" class="searchTerm" placeholder="Search for configurations"
-              @input="updateFilterAsync($event.target.value)" >
-            <div class="iconWrapper">
-                <font-awesome-icon :icon="['fas', 'search']" />
-            </div>
-        </div>
-    </div>
+  <div class="search">
+      <input type="search" class="searchTerm" placeholder="Search"
+        @input="updateFilterAsync($event.target.value)" >
+      <div class="iconWrapper">
+          <font-awesome-icon :icon="['fas', 'search']" />
+      </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -16,8 +14,6 @@ import { StatefulVue } from './StatefulVue';
 
 @Component
 export default class TheSearchBar extends StatefulVue {
-
-
   public async updateFilterAsync(filter: |string) {
     const state = await this.getCurrentStateAsync();
     if (!filter) {
@@ -34,13 +30,6 @@ export default class TheSearchBar extends StatefulVue {
 @import "@/presentation/styles/colors.scss";
 @import "@/presentation/styles/fonts.scss";
 
-.container {
-    padding-top: 30px;
-    padding-right: 30%;
-    padding-left: 30%;
-    font: $normal-font;
-}
-
 .search {
   width: 100%;
   position: relative;
@@ -49,6 +38,7 @@ export default class TheSearchBar extends StatefulVue {
 
 .searchTerm {
   width: 100%;
+  min-width: 60px;
   border: 1.5px solid $gray;
   border-right: none;
   height: 36px;
@@ -57,6 +47,8 @@ export default class TheSearchBar extends StatefulVue {
   padding-right:10px;
   outline: none;
   color: $gray;
+    font-family: $normal-font;
+    font-size:1em;
 }
 
 .searchTerm:focus{

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');

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.');
+    }
 }