From f9e8b5eaaae0af2b39b93ab999bcca5f0904a3a8 Mon Sep 17 00:00:00 2001 From: Steve Faulkner Date: Thu, 13 May 2021 18:03:29 -0500 Subject: [PATCH] Remove Unused Knockout Components (#783) --- src/Explorer/ComponentRegisterer.test.ts | 8 - src/Explorer/ComponentRegisterer.ts | 4 - .../ErrorDisplayComponent.ts | 27 --- .../error-display-component.html | 6 - .../Controls/InputTypeahead/InputTypeahead.ts | 186 ------------------ .../InputTypeahead/input-typeahead.html | 19 -- tsconfig.strict.json | 1 - 7 files changed, 251 deletions(-) delete mode 100644 src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts delete mode 100644 src/Explorer/Controls/ErrorDisplayComponent/error-display-component.html delete mode 100644 src/Explorer/Controls/InputTypeahead/InputTypeahead.ts delete mode 100644 src/Explorer/Controls/InputTypeahead/input-typeahead.html diff --git a/src/Explorer/ComponentRegisterer.test.ts b/src/Explorer/ComponentRegisterer.test.ts index 16244a16c..ea9164787 100644 --- a/src/Explorer/ComponentRegisterer.test.ts +++ b/src/Explorer/ComponentRegisterer.test.ts @@ -4,14 +4,6 @@ import * as ko from "knockout"; import "./ComponentRegisterer"; describe("Component Registerer", () => { - it("should register input-typeahead component", () => { - expect(ko.components.isRegistered("input-typeahead")).toBe(true); - }); - - it("should register error-display component", () => { - expect(ko.components.isRegistered("error-display")).toBe(true); - }); - it("should register json-editor component", () => { expect(ko.components.isRegistered("json-editor")).toBe(true); }); diff --git a/src/Explorer/ComponentRegisterer.ts b/src/Explorer/ComponentRegisterer.ts index ff4c4f96e..4dc4c8923 100644 --- a/src/Explorer/ComponentRegisterer.ts +++ b/src/Explorer/ComponentRegisterer.ts @@ -2,14 +2,10 @@ import * as ko from "knockout"; import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent"; import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent"; import { EditorComponent } from "./Controls/Editor/EditorComponent"; -import { ErrorDisplayComponent } from "./Controls/ErrorDisplayComponent/ErrorDisplayComponent"; -import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead"; import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent"; import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3"; import * as PaneComponents from "./Panes/PaneComponents"; -ko.components.register("input-typeahead", new InputTypeaheadComponent()); -ko.components.register("error-display", new ErrorDisplayComponent()); ko.components.register("editor", new EditorComponent()); ko.components.register("json-editor", new JsonEditorComponent()); ko.components.register("diff-editor", new DiffEditorComponent()); diff --git a/src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts b/src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts deleted file mode 100644 index 0d54838f6..000000000 --- a/src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts +++ /dev/null @@ -1,27 +0,0 @@ -import template from "./error-display-component.html"; - -/** - * Helper class for ko component registration - * This component displays an error as designed in: - * https://microsoft.sharepoint.com/teams/DPX/Modern/DocDB/_layouts/15/WopiFrame.aspx?sourcedoc={66864d4a-f925-4cbe-9eb4-79f8d191a115}&action=edit&wd=target%28DocumentDB%20emulator%2Eone%7CE617D0A7-F77C-4968-B75A-1451049F4FEA%2FError%20notification%7CAA1E4BC9-4D72-472C-B40C-2437FA217226%2F%29 - * TODO: support "More details" - */ -export class ErrorDisplayComponent { - constructor() { - return { - viewModel: ErrorDisplayViewModel, - template, - }; - } -} - -/** - * Parameters for this component - */ -interface ErrorDisplayParams { - errorMsg: ko.Observable; // Primary message -} - -class ErrorDisplayViewModel { - public constructor(public params: ErrorDisplayParams) {} -} diff --git a/src/Explorer/Controls/ErrorDisplayComponent/error-display-component.html b/src/Explorer/Controls/ErrorDisplayComponent/error-display-component.html deleted file mode 100644 index ca4b301ce..000000000 --- a/src/Explorer/Controls/ErrorDisplayComponent/error-display-component.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
- Error - -
-
diff --git a/src/Explorer/Controls/InputTypeahead/InputTypeahead.ts b/src/Explorer/Controls/InputTypeahead/InputTypeahead.ts deleted file mode 100644 index 03a3b0d87..000000000 --- a/src/Explorer/Controls/InputTypeahead/InputTypeahead.ts +++ /dev/null @@ -1,186 +0,0 @@ -/** - * How to use this component: - * - * In your html markup, use: - * - * The parameters are documented below. - * - * Notes: - * - dynamic:true by default, this allows choices to change after initialization. - * To turn it off, use: - * typeaheadOverrideOptions: { dynamic:false } - * - */ - -import "jquery-typeahead"; -import template from "./input-typeahead.html"; - -/** - * Helper class for ko component registration - */ -export class InputTypeaheadComponent { - constructor() { - return { - viewModel: InputTypeaheadViewModel, - template, - }; - } -} - -export interface Item { - caption: string; - value: any; -} - -/** - * Parameters for this component - */ -interface InputTypeaheadParams { - /** - * List of choices available in the dropdown. - */ - choices: ko.ObservableArray; - - /** - * Gets updated when user clicks on the choice in the dropdown - */ - selection?: ko.Observable; - - /** - * The current string value of - */ - inputValue?: ko.Observable; - - /** - * Define what text you want as the input placeholder - */ - placeholder: string; - - /** - * Override default jquery-typeahead options - * WARNING: do not override input, source or callback to avoid breaking the components behavior. - */ - typeaheadOverrideOptions?: any; - - /** - * This function gets called when pressing ENTER on the input box - */ - submitFct?: (inputValue: string | null, selection: Item | null) => void; - - /** - * Typehead comes with a Search button that we normally remove. - * If you want to use it, turn this on - */ - showSearchButton?: boolean; -} - -interface OnClickItem { - matchedKey: string; - value: any; - caption: string; - group: string; -} - -interface Cache { - inputValue: string | null; - selection: Item | null; -} - -class InputTypeaheadViewModel { - private static instanceCount = 0; // Generate unique id for each component's typeahead instance - private instanceNumber: number; - private params: InputTypeaheadParams; - - private cache: Cache; - - public constructor(params: InputTypeaheadParams) { - this.instanceNumber = InputTypeaheadViewModel.instanceCount++; - this.params = params; - - this.params.choices.subscribe(this.initializeTypeahead.bind(this)); - this.cache = { - inputValue: null, - selection: null, - }; - } - - /** - * Must execute once ko is rendered, so that it can find the input element by id - */ - private initializeTypeahead() { - let params = this.params; - let cache = this.cache; - let options: any = { - input: `#${this.getComponentId()}`, //'.input-typeahead', - order: "asc", - minLength: 0, - searchOnFocus: true, - source: { - display: "caption", - data: () => { - return this.params.choices(); - }, - }, - callback: { - onClick: (_node: unknown, _a: unknown, item: OnClickItem) => { - cache.selection = item; - - if (params.selection) { - params.selection(item); - } - }, - onResult(_node: unknown, query: any) { - cache.inputValue = query; - if (params.inputValue) { - params.inputValue(query); - } - }, - }, - template: (_query: string, item: any) => { - // Don't display id if caption *IS* the id - return item.caption === item.value - ? "{{caption}}" - : "
{{caption}}
{{value}}
"; - }, - dynamic: true, - }; - - // Override options - if (params.typeaheadOverrideOptions) { - for (let p in params.typeaheadOverrideOptions) { - options[p] = params.typeaheadOverrideOptions[p]; - } - } - - ($ as any).typeahead(options); - } - - /** - * Get this component id - * @return unique id per instance - */ - private getComponentId(): string { - return `input-typeahead${this.instanceNumber}`; - } - - /** - * Executed once ko is done rendering bindings - * Use ko's "template: afterRender" callback to do that without actually using any template. - * Another way is to call it within setTimeout() in constructor. - */ - public afterRender(): void { - this.initializeTypeahead(); - } - - public submit(): void { - if (this.params.submitFct) { - this.params.submitFct(this.cache.inputValue, this.cache.selection); - } - } -} diff --git a/src/Explorer/Controls/InputTypeahead/input-typeahead.html b/src/Explorer/Controls/InputTypeahead/input-typeahead.html deleted file mode 100644 index 171fef8bf..000000000 --- a/src/Explorer/Controls/InputTypeahead/input-typeahead.html +++ /dev/null @@ -1,19 +0,0 @@ - -
-
-
- - - - - - -
-
-
- diff --git a/tsconfig.strict.json b/tsconfig.strict.json index 3ff54e123..7a8971ce1 100644 --- a/tsconfig.strict.json +++ b/tsconfig.strict.json @@ -38,7 +38,6 @@ "./src/Contracts/Versions.ts", "./src/Explorer/Controls/Dialog.tsx", "./src/Explorer/Controls/GitHub/GitHubStyleConstants.ts", - "./src/Explorer/Controls/InputTypeahead/InputTypeahead.ts", "./src/Explorer/Controls/SmartUi/InputUtils.ts", "./src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts", "./src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts",