codecharta-visualization 1.119.0 → 1.120.0

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewLevel/mocks.ts

@@ -1,42 +0,0 @@
-import { NodeType } from "../../../../codeCharta.model"
-
-export const rootNode = {
-	name: "root",
-	path: "/root",
-	id: 0,
-	attributes: { unary: 2 },
-	type: NodeType.FOLDER,
-	isExcluded: false,
-	isFlattened: false,
-	children: [
-		{
-			name: "bigLeaf",
-			path: "/root/bigLeaf",
-			id: 1,
-			type: NodeType.FILE,
-			attributes: {},
-			isExcluded: false,
-			isFlattened: false
-		},
-		{
-			name: "ParentLeaf",
-			path: "/root/ParentLeaf",
-			id: 2,
-			type: NodeType.FOLDER,
-			attributes: { unary: 1 },
-			isExcluded: false,
-			isFlattened: false,
-			children: [
-				{
-					name: "smallLeaf",
-					path: "/root/ParentLeaf/smallLeaf",
-					id: 3,
-					type: NodeType.FILE,
-					attributes: {},
-					isExcluded: false,
-					isFlattened: false
-				}
-			]
-		}
-	]
-}

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewNodeSelector/mapTreeViewNode.selector.ts

@@ -1,17 +0,0 @@
-import { createSelector } from "@ngrx/store"
-import { klona } from "klona"
-
-import { accumulatedDataSelector } from "../../../../state/selectors/accumulatedData/accumulatedData.selector"
-import { sortingOrderAscendingSelector } from "../../../../state/store/appSettings/sortingOrderAscending/sortingOrderAscending.selector"
-import { sortingOrderSelector } from "../../../../state/store/dynamicSettings/sortingOption/sortingOrder.selector"
-import { sortNode } from "./sortNode"
-
-export const mapTreeViewNodeSelector = createSelector(
-	accumulatedDataSelector,
-	sortingOrderSelector,
-	sortingOrderAscendingSelector,
-	(accumulatedData, sortingOrder, sortingOrderAscending) => {
-		// use cloned map as it is sorted inline
-		return sortNode(klona(accumulatedData.unifiedMapNode), sortingOrder, sortingOrderAscending)
-	}
-)

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewNodeSelector/sortNode.spec.ts

@@ -1,33 +0,0 @@
-import { klona } from "klona"
-import {
-	VALID_NODE_NUMBERS_AND_DIACTRIC_CHARACHTERS,
-	VALID_NODE_NUMBERS_AND_DIACTRIC_CHARACHTERS_SORTED,
-	VALID_NODE_WITH_MULTIPLE_FOLDERS,
-	VALID_NODE_WITH_MULTIPLE_FOLDERS_REVERSED,
-	VALID_NODE_WITH_MULTIPLE_FOLDERS_SORTED_BY_NAME,
-	VALID_NODE_WITH_MULTIPLE_FOLDERS_SORTED_BY_UNARY
-} from "../../../../util/dataMocks"
-import { SortingOption } from "../../../../codeCharta.model"
-import { sortNode } from "./sortNode"
-
-describe("sortNode", () => {
-	it("should reverse order if 'sortingOrderAscending' is false", () => {
-		const node = klona(VALID_NODE_WITH_MULTIPLE_FOLDERS)
-		expect(sortNode(node, SortingOption.NAME, false)).toEqual(VALID_NODE_WITH_MULTIPLE_FOLDERS_REVERSED)
-	})
-
-	it("should sort by name, if sortingOption is set to SortingOption.NAME", () => {
-		const node = klona(VALID_NODE_WITH_MULTIPLE_FOLDERS)
-		expect(sortNode(node, SortingOption.NAME, true)).toEqual(VALID_NODE_WITH_MULTIPLE_FOLDERS_SORTED_BY_NAME)
-	})
-
-	it("should sort by unary value, if sortingOption is set to SortingOption.NUMBER_OF_FILES", () => {
-		const node = klona(VALID_NODE_WITH_MULTIPLE_FOLDERS)
-		expect(sortNode(node, SortingOption.NUMBER_OF_FILES, false)).toEqual(VALID_NODE_WITH_MULTIPLE_FOLDERS_SORTED_BY_UNARY)
-	})
-
-	it("should sort according to name accounting for numbers", () => {
-		const node = klona(VALID_NODE_NUMBERS_AND_DIACTRIC_CHARACHTERS)
-		expect(sortNode(node, SortingOption.NAME, true)).toEqual(VALID_NODE_NUMBERS_AND_DIACTRIC_CHARACHTERS_SORTED)
-	})
-})

package/app/codeCharta/ui/searchPanel/mapTreeView/mapTreeViewNodeSelector/sortNode.ts

@@ -1,48 +0,0 @@
-import { CodeMapNode, NodeType, SortingOption } from "../../../../codeCharta.model"
-
-type CompareFunction = (a: CodeMapNode, b: CodeMapNode) => number
-
-const nameCollator = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" })
-const sortByName: CompareFunction = (a, b) => nameCollator.compare(a.name, b.name)
-const sortByUnary: CompareFunction = (a, b) => a.attributes.unary - b.attributes.unary
-
-const getCompareFunction = (sortingOrder: SortingOption, sortingOrderAscending: boolean) => {
-	const compareFunction = sortingOrder === SortingOption.NUMBER_OF_FILES ? sortByUnary : sortByName
-	return sortingOrderAscending ? compareFunction : (a: CodeMapNode, b: CodeMapNode) => -1 * compareFunction(a, b)
-}
-
-const groupAndSortNodeByFilesAndFolders = (compareFunction: CompareFunction, node: CodeMapNode) => {
-	const folders: CodeMapNode[] = []
-	const files: CodeMapNode[] = []
-
-	for (const child of node.children) {
-		if (child.type === NodeType.FOLDER) {
-			folders.push(child)
-		} else {
-			files.push(child)
-		}
-	}
-
-	folders.sort(compareFunction)
-	files.sort(compareFunction)
-
-	return [...folders, ...files]
-}
-
-/** sort given node inplace */
-export const sortNode = (node: CodeMapNode, sortingOrder: SortingOption, sortingOrderAscending: boolean) => {
-	if (!node) {
-		return
-	}
-
-	for (let index = 0; index < node.children.length; index++) {
-		if (node.children[index].type === NodeType.FOLDER) {
-			node.children[index] = sortNode(node.children[index], sortingOrder, sortingOrderAscending)
-		}
-	}
-
-	const compareFunction = getCompareFunction(sortingOrder, sortingOrderAscending)
-	node.children = groupAndSortNodeByFilesAndFolders(compareFunction, node)
-
-	return node
-}

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.component.html

@@ -1,14 +0,0 @@
-<ng-container *ngIf="matchingFileCounters$ | async as matchingFileCounters">
-	<span class="box-rounded node-count" title="Files matching search pattern"
-		>{{ matchingFileCounters.fileCount }}<i class="fa fa-file"></i
-	></span>
-	<span class="box-rounded node-count" style="display: inline-flex" title="Files flattened"
-		>{{ matchingFileCounters.flattenCount
-		}}<img alt="flattenIcon" class="fa png-icon-files-counter" src="codeCharta/assets/flatten.png" />
-	</span>
-	<span class="box-rounded node-count" title="Files excluded">{{ matchingFileCounters.excludeCount }}<i class="fa fa-ban"></i></span>
-	<div class="sort-component">
-		<cc-sorting-button></cc-sorting-button>
-		<cc-sorting-option></cc-sorting-option>
-	</div>
-</ng-container>

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.component.scss

@@ -1,49 +0,0 @@
-cc-matching-files-counter {
-	.node-count {
-		background: #eee;
-		color: black;
-		padding: 4px 8px;
-		margin-right: 8px;
-	}
-
-	.node-count i {
-		margin-left: 6px;
-	}
-
-	.box-rounded {
-		display: inline-block;
-		font-weight: normal;
-		line-height: 17px;
-		font-size: 10pt;
-		margin-top: 2px;
-		min-width: 20px;
-		border-radius: 4px;
-		text-align: center;
-	}
-
-	.png-icon-files-counter {
-		width: 19px;
-		height: 16px;
-		margin-left: 6px;
-	}
-
-	cc-sorting-button button {
-		height: 25px;
-		background: #e6e6e6;
-		padding: 1px 8px;
-	}
-
-	cc-sorting-option .mat-mdc-select {
-		width: 105px;
-		padding: 2px 8px;
-		font-weight: normal;
-		line-height: 17px;
-		font-size: 10pt;
-	}
-
-	.sort-component {
-		margin-right: 3px;
-		display: inline-block;
-		color: black;
-	}
-}

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.component.spec.ts

@@ -1,40 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { render } from "@testing-library/angular"
-import { expect } from "@jest/globals"
-import { MatchingFilesCounterComponent } from "./matchingFilesCounter.component"
-import { MatchingFilesCounterModule } from "./matchingFilesCounter.module"
-import { provideMockStore } from "@ngrx/store/testing"
-import { matchingFilesCounterSelector } from "./selectors/matchingFilesCounter.selector"
-
-describe("MatchingFilesCounterComponent", () => {
-	beforeEach(() => {
-		TestBed.configureTestingModule({
-			imports: [MatchingFilesCounterModule],
-			providers: [
-				provideMockStore({
-					selectors: [
-						{
-							selector: matchingFilesCounterSelector,
-							value: {
-								fileCount: "2/3",
-								flattenCount: "1/1",
-								excludeCount: "0/1"
-							}
-						}
-					]
-				})
-			]
-		})
-	})
-
-	it("should render and show matching files counter data", async () => {
-		const { container } = await render(MatchingFilesCounterComponent, { excludeComponentDeclaration: true })
-		const searchContainer = container.querySelector("[title='Files matching search pattern']")
-		const flattenedContainer = container.querySelector("[title='Files flattened']")
-		const excludedContainer = container.querySelector("[title='Files excluded']")
-
-		expect(searchContainer.textContent).toMatch(/2\/3/)
-		expect(flattenedContainer.textContent).toMatch(/1\/1/)
-		expect(excludedContainer.textContent).toMatch(/0\/1/)
-	})
-})

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.component.ts

@@ -1,19 +0,0 @@
-import { Component, ViewEncapsulation } from "@angular/core"
-import { Store } from "@ngrx/store"
-import { Observable } from "rxjs"
-import { CcState } from "../../../codeCharta.model"
-import { MatchingFilesCounter, matchingFilesCounterSelector } from "./selectors/matchingFilesCounter.selector"
-
-@Component({
-	selector: "cc-matching-files-counter",
-	templateUrl: "./matchingFilesCounter.component.html",
-	styleUrls: ["./matchingFilesCounter.component.scss"],
-	encapsulation: ViewEncapsulation.None
-})
-export class MatchingFilesCounterComponent {
-	matchingFileCounters$: Observable<MatchingFilesCounter>
-
-	constructor(store: Store<CcState>) {
-		this.matchingFileCounters$ = store.select(matchingFilesCounterSelector)
-	}
-}

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/matchingFilesCounter.module.ts

@@ -1,14 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { NgModule } from "@angular/core"
-
-import { MaterialModule } from "../../../../material/material.module"
-import { SortingButtonComponent } from "../sortingButton/sortingButton.component"
-import { SortingOptionComponent } from "../sortingOption/sortingOption.component"
-import { MatchingFilesCounterComponent } from "./matchingFilesCounter.component"
-
-@NgModule({
-	imports: [CommonModule, MaterialModule],
-	declarations: [MatchingFilesCounterComponent, SortingButtonComponent, SortingOptionComponent],
-	exports: [MatchingFilesCounterComponent]
-})
-export class MatchingFilesCounterModule {}

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/selectors/matchingFilesCounter.selector.spec.ts

@@ -1,24 +0,0 @@
-import { NodeType, CodeMapNode, BlacklistItem } from "../../../../codeCharta.model"
-import { _calculateMatchingFilesCounter } from "./matchingFilesCounter.selector"
-
-describe("matchingFilesCounterSelector", () => {
-	it("should calculate matching files counter", () => {
-		const blacklist: BlacklistItem[] = [
-			{ path: "big Leaf", type: "exclude" },
-			{ path: "small leaf", type: "flatten" }
-		]
-		const searchedNodes: CodeMapNode[] = [
-			{ name: "small leaf", type: NodeType.FILE, path: "/root/Parent Leaf/small leaf" },
-			{ name: "other small leaf", type: NodeType.FILE, path: "/root/Parent Leaf/other small leaf" }
-		]
-		const codeMapNodes: CodeMapNode[] = [
-			...searchedNodes,
-			{ name: "big leaf", type: NodeType.FILE, path: "/root/big leaf", link: "https://www.google.de" }
-		]
-		expect(_calculateMatchingFilesCounter(searchedNodes, blacklist, codeMapNodes)).toEqual({
-			excludeCount: "0/1",
-			fileCount: "2/3",
-			flattenCount: "1/1"
-		})
-	})
-})

package/app/codeCharta/ui/searchPanel/matchingFilesCounter/selectors/matchingFilesCounter.selector.ts

@@ -1,39 +0,0 @@
-import { BlacklistItem, BlacklistType, CodeMapNode } from "../../../../codeCharta.model"
-import { searchedNodesSelector } from "../../../../state/selectors/searchedNodes/searchedNodes.selector"
-import { blacklistSelector } from "../../../../state/store/fileSettings/blacklist/blacklist.selector"
-import { isLeaf, isPathBlacklisted } from "../../../../util/codeMapHelper"
-import { codeMapNodesSelector } from "../../../../state/selectors/accumulatedData/codeMapNodes.selector"
-import { createSelector } from "@ngrx/store"
-
-const getBlacklistedFileCount = (blacklistType: BlacklistType, nodes: CodeMapNode[], blacklist: BlacklistItem[]) =>
-	nodes.reduce((count, node) => (isPathBlacklisted(node.path, blacklist, blacklistType) ? count + 1 : count), 0)
-
-export type MatchingFilesCounter = {
-	fileCount: string
-	flattenCount: string
-	excludeCount: string
-}
-
-export const _calculateMatchingFilesCounter = (searchedNodes: CodeMapNode[], blacklist: BlacklistItem[], allNodes: CodeMapNode[]) => {
-	const searchedNodeLeaves = searchedNodes.filter(node => isLeaf(node))
-	return {
-		fileCount: `${searchedNodeLeaves.length}/${allNodes.length}`,
-		flattenCount: `${getBlacklistedFileCount("flatten", searchedNodeLeaves, blacklist)}/${getBlacklistedFileCount(
-			"flatten",
-			allNodes,
-			blacklist
-		)}`,
-		excludeCount: `${getBlacklistedFileCount("exclude", searchedNodeLeaves, blacklist)}/${getBlacklistedFileCount(
-			"exclude",
-			allNodes,
-			blacklist
-		)}`
-	}
-}
-
-export const matchingFilesCounterSelector = createSelector(
-	searchedNodesSelector,
-	blacklistSelector,
-	codeMapNodesSelector,
-	_calculateMatchingFilesCounter
-)

package/app/codeCharta/ui/searchPanel/searchBar/blacklistSearchPattern.effect.spec.ts

@@ -1,66 +0,0 @@
-import { TestBed } from "@angular/core/testing"
-import { MatDialog } from "@angular/material/dialog"
-import { first, Subject } from "rxjs"
-import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
-import { blacklistSearchPattern, BlacklistSearchPatternEffect } from "./blacklistSearchPattern.effect"
-import { MockStore, provideMockStore } from "@ngrx/store/testing"
-import { searchPatternSelector } from "../../../state/store/dynamicSettings/searchPattern/searchPattern.selector"
-import { provideMockActions } from "@ngrx/effects/testing"
-import { Action } from "@ngrx/store"
-import { addBlacklistItemsIfNotResultsInEmptyMap } from "../../../state/store/fileSettings/blacklist/blacklist.actions"
-import { setSearchPattern } from "../../../state/store/dynamicSettings/searchPattern/searchPattern.actions"
-
-describe("BlacklistSearchPatternEffect", () => {
-	let effect: BlacklistSearchPatternEffect
-	let actions$: Subject<Action>
-	let doBlacklistItemsResultInEmptyMap$: Subject<{ resultsInEmptyMap: boolean }>
-	let store: MockStore
-
-	beforeEach(() => {
-		actions$ = new Subject()
-		doBlacklistItemsResultInEmptyMap$ = new Subject()
-
-		TestBed.configureTestingModule({
-			providers: [
-				BlacklistSearchPatternEffect,
-				{ provide: MatDialog, useValue: { open: jest.fn() } },
-				{ provide: AddBlacklistItemsIfNotResultsInEmptyMapEffect, useValue: { doBlacklistItemsResultInEmptyMap$ } },
-				provideMockStore({ selectors: [{ selector: searchPatternSelector, value: "" }] }),
-				provideMockActions(() => actions$)
-			]
-		})
-		effect = TestBed.inject(BlacklistSearchPatternEffect)
-		store = TestBed.inject(MockStore)
-	})
-
-	afterEach(() => {
-		actions$.complete()
-		doBlacklistItemsResultInEmptyMap$.complete()
-	})
-
-	it("should exclude pattern and reset search pattern", () => {
-		store.overrideSelector(searchPatternSelector, "needle")
-		store.refreshState()
-		const dispatchSpy = jest.spyOn(store, "dispatch")
-
-		let firedEffect
-		effect.excludeSearchPattern$.pipe(first()).subscribe(event => {
-			firedEffect = event
-		})
-		actions$.next(blacklistSearchPattern("exclude"))
-		expect(firedEffect).toEqual(addBlacklistItemsIfNotResultsInEmptyMap({ items: [{ type: "exclude", path: "*needle*" }] }))
-
-		doBlacklistItemsResultInEmptyMap$.next({ resultsInEmptyMap: false })
-		expect(dispatchSpy).toHaveBeenCalledWith(setSearchPattern({ value: "" }))
-	})
-
-	it("should not reset search pattern, when excluding from search bar failed / would result in an empty map", () => {
-		store.overrideSelector(searchPatternSelector, "root")
-		store.refreshState()
-		const dispatchSpy = jest.spyOn(store, "dispatch")
-
-		actions$.next(blacklistSearchPattern("exclude"))
-		doBlacklistItemsResultInEmptyMap$.next({ resultsInEmptyMap: true })
-		expect(dispatchSpy).not.toHaveBeenCalled()
-	})
-})

package/app/codeCharta/ui/searchPanel/searchBar/blacklistSearchPattern.effect.ts

@@ -1,71 +0,0 @@
-import { Injectable } from "@angular/core"
-import { Actions, createEffect, ofType } from "@ngrx/effects"
-import { Store } from "@ngrx/store"
-import { map, filter, withLatestFrom, tap, take, share } from "rxjs"
-import { BlacklistType, CcState } from "../../../codeCharta.model"
-import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
-import { setSearchPattern } from "../../../state/store/dynamicSettings/searchPattern/searchPattern.actions"
-import { searchPatternSelector } from "../../../state/store/dynamicSettings/searchPattern/searchPattern.selector"
-import { addBlacklistItems, addBlacklistItemsIfNotResultsInEmptyMap } from "../../../state/store/fileSettings/blacklist/blacklist.actions"
-import { parseBlacklistItems } from "./utils/parseBlacklistItems"
-
-type BlacklistSearchPatternAction = {
-	type: "BlacklistSearchPatternAction"
-	action: { type: BlacklistType }
-}
-
-export const blacklistSearchPattern = (type: BlacklistType): BlacklistSearchPatternAction => ({
-	type: "BlacklistSearchPatternAction",
-	action: { type }
-})
-
-@Injectable()
-export class BlacklistSearchPatternEffect {
-	constructor(
-		private actions$: Actions,
-		private store: Store<CcState>,
-		private addBlacklistItemsIfNotResultsInEmptyMapEffect: AddBlacklistItemsIfNotResultsInEmptyMapEffect
-	) {}
-
-	private searchPattern2BlacklistItems$ = this.actions$.pipe(
-		ofType<BlacklistSearchPatternAction>("BlacklistSearchPatternAction"),
-		withLatestFrom(this.store.select(searchPatternSelector)),
-		map(([blacklistSearchPatternAction, searchPattern]) => ({
-			type: blacklistSearchPatternAction.action.type,
-			blacklistItems: parseBlacklistItems(blacklistSearchPatternAction.action.type, searchPattern)
-		})),
-		share()
-	)
-
-	flattenSearchPattern$ = createEffect(
-		() =>
-			this.searchPattern2BlacklistItems$.pipe(
-				filter(searchPattern2BlacklistItems => searchPattern2BlacklistItems.type === "flatten"),
-				tap(searchPattern2BlacklistItems => {
-					this.store.dispatch(addBlacklistItems({ items: searchPattern2BlacklistItems.blacklistItems }))
-					this.store.dispatch(setSearchPattern({ value: "" }))
-				})
-			),
-		{ dispatch: false }
-	)
-
-	excludeSearchPattern$ = createEffect(() =>
-		this.searchPattern2BlacklistItems$.pipe(
-			filter(searchPattern2BlacklistItems => searchPattern2BlacklistItems.type === "exclude"),
-			tap(() => {
-				this.addBlacklistItemsIfNotResultsInEmptyMapEffect.doBlacklistItemsResultInEmptyMap$
-					.pipe(
-						take(1),
-						filter(doBlacklistItemsResultInEmptyMap => !doBlacklistItemsResultInEmptyMap.resultsInEmptyMap),
-						tap(() => {
-							this.store.dispatch(setSearchPattern({ value: "" }))
-						})
-					)
-					.subscribe()
-			}),
-			map(searchPattern2BlacklistItems =>
-				addBlacklistItemsIfNotResultsInEmptyMap({ items: searchPattern2BlacklistItems.blacklistItems })
-			)
-		)
-	)
-}

package/app/codeCharta/ui/searchPanel/searchBar/searchBar.component.html

@@ -1,37 +0,0 @@
-<i class="fa fa-search search-icon"></i>
-
-<div class="ccSearchInput">
-	<input type="text" placeholder="Search: *.js, **/app/*" [value]="searchPattern$ | async" (input)="setSearchPatternDebounced($event)" />
-	<button
-		*ngIf="!(isSearchPatternEmpty$ | async)"
-		(click)="resetSearchPattern()"
-		class="small-action-button clear-icon"
-		data-testid="search-bar-clear-button"
-	>
-		<i class="fa fa-times"></i>
-	</button>
-</div>
-
-<button [matMenuTriggerFor]="menu" class="small-action-button" title="Add to Blacklist">
-	<i class="fa fa-ellipsis-h"></i>
-</button>
-<mat-menu #menu="matMenu">
-	<button mat-menu-item disabled>Add Pattern to Blacklist</button>
-	<mat-divider></mat-divider>
-	<button
-		mat-menu-item
-		[disabled]="isFlattenPatternDisabled$ | async"
-		(click)="blacklistSearchPattern('flatten')"
-		data-testid="search-bar-flatten-button"
-	>
-		<i class="fa fa-eye-slash"></i> Flatten
-	</button>
-	<button
-		mat-menu-item
-		[disabled]="isExcludePatternDisabled$ | async"
-		(click)="blacklistSearchPattern('exclude')"
-		data-testid="search-bar-exclude-button"
-	>
-		<i class="fa fa-ban"></i> Exclude
-	</button>
-</mat-menu>

package/app/codeCharta/ui/searchPanel/searchBar/searchBar.component.scss

@@ -1,56 +0,0 @@
-cc-search-bar {
-	display: inline-block;
-
-	.search-icon {
-		margin-right: 8px;
-		min-width: 16px;
-	}
-
-	.ccSearchInput {
-		display: inline-block;
-		position: relative;
-
-		input {
-			width: 204px;
-			border-width: 0 0 1px;
-			border-color: lightgrey;
-			outline: 0;
-			font-size: 11pt;
-
-			&:focus {
-				border-width: 0 0 2px;
-				border-color: rgb(0, 150, 136);
-			}
-		}
-
-		> * {
-			vertical-align: middle;
-			display: inline-block;
-			position: relative;
-			top: -5px;
-			height: 30px;
-		}
-
-		.clear-icon {
-			position: absolute;
-			right: 0;
-			margin: 0;
-		}
-	}
-
-	.small-action-button {
-		margin: 0px 5px 0px 5px;
-	}
-
-	button {
-		background-color: transparent;
-		box-shadow: none;
-		margin-top: 2px;
-		font-size: 14px;
-
-		&:hover {
-			background-color: lightgrey;
-			border-radius: 50%;
-		}
-	}
-}

package/app/codeCharta/ui/searchPanel/searchBar/searchBar.component.spec.ts

@@ -1,89 +0,0 @@
-import { render, screen } from "@testing-library/angular"
-import { TestBed } from "@angular/core/testing"
-import { BlacklistSearchPatternEffect } from "./blacklistSearchPattern.effect"
-import { SearchBarComponent } from "./searchBar.component"
-import { SearchBarModule } from "./searchBar.module"
-import userEvent from "@testing-library/user-event"
-import { searchPatternSelector } from "../../../state/store/dynamicSettings/searchPattern/searchPattern.selector"
-import { AddBlacklistItemsIfNotResultsInEmptyMapEffect } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/addBlacklistItemsIfNotResultsInEmptyMap.effect"
-import { resultsInEmptyMap } from "../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/resultsInEmptyMap"
-import { MatDialog } from "@angular/material/dialog"
-import { State, Store, StoreModule } from "@ngrx/store"
-import { appReducers, setStateMiddleware } from "../../../state/store/state.manager"
-import { EffectsModule } from "@ngrx/effects"
-
-jest.mock("../../../state/effects/addBlacklistItemsIfNotResultsInEmptyMap/resultsInEmptyMap", () => ({
-	resultsInEmptyMap: jest.fn()
-}))
-
-const mockedResultsInEmptyMap = jest.mocked(resultsInEmptyMap)
-
-describe("cc-search-bar", () => {
-	const mockedDialog = { open: jest.fn() }
-
-	beforeEach(async () => {
-		TestBed.configureTestingModule({
-			imports: [
-				StoreModule.forRoot(appReducers, { metaReducers: [setStateMiddleware] }),
-				EffectsModule.forRoot([BlacklistSearchPatternEffect, AddBlacklistItemsIfNotResultsInEmptyMapEffect]),
-				SearchBarModule
-			],
-			providers: [{ provide: MatDialog, useValue: mockedDialog }]
-		})
-	})
-
-	it("should be a debounced field for search pattern with clear button if is not empty", async () => {
-		await render(SearchBarComponent, { excludeComponentDeclaration: true })
-		const store = TestBed.inject(Store)
-		const state = TestBed.inject(State)
-		const dispatchSpy = jest.spyOn(store, "dispatch")
-
-		expect(screen.queryByTestId("search-bar-clear-button")).toBe(null)
-
-		let searchField = screen.getByPlaceholderText("Search: *.js, **/app/*") as HTMLInputElement
-		await userEvent.type(searchField, "needle", { delay: 1 })
-
-		const clearButton = await screen.findByTestId("search-bar-clear-button")
-		expect(dispatchSpy).toHaveBeenCalledTimes(1)
-		expect(searchPatternSelector(state.getValue())).toBe("needle")
-
-		await userEvent.click(clearButton)
-
-		searchField = screen.getByPlaceholderText("Search: *.js, **/app/*")
-		expect(searchField.value).toBe("")
-		expect(searchPatternSelector(state.getValue())).toBe("")
-	})
-
-	it("should flatten pattern", async () => {
-		await render(SearchBarComponent, { excludeComponentDeclaration: true })
-		const state = TestBed.inject(State)
-
-		let searchField = screen.getByPlaceholderText("Search: *.js, **/app/*") as HTMLInputElement
-		await userEvent.type(searchField, "needle")
-		await screen.findByTestId("search-bar-clear-button")
-		await userEvent.click(screen.getByTitle("Add to Blacklist"))
-
-		await userEvent.click(await screen.findByTestId("search-bar-flatten-button"))
-
-		searchField = screen.getByPlaceholderText("Search: *.js, **/app/*")
-		expect(searchField.value).toBe("")
-		expect(state.getValue().fileSettings.blacklist[0]).toEqual({ type: "flatten", path: "*needle*" })
-	})
-
-	it("should exclude pattern", async () => {
-		mockedResultsInEmptyMap.mockImplementation(() => false)
-		await render(SearchBarComponent, { excludeComponentDeclaration: true })
-		const state = TestBed.inject(State)
-
-		let searchField = screen.getByPlaceholderText("Search: *.js, **/app/*") as HTMLInputElement
-		await userEvent.type(searchField, "needle")
-		await screen.findByTestId("search-bar-clear-button")
-		await userEvent.click(screen.getByTitle("Add to Blacklist"))
-
-		await userEvent.click(await screen.findByTestId("search-bar-exclude-button"))
-
-		searchField = screen.getByPlaceholderText("Search: *.js, **/app/*")
-		expect(searchField.value).toBe("")
-		expect(state.getValue().fileSettings.blacklist[0]).toEqual({ type: "exclude", path: "*needle*" })
-	})
-})