Remove unused KO dynamic-list component (#838)

src/Explorer/ComponentRegisterer.test.ts

@@ -1,14 +0,0 @@
-jest.mock("monaco-editor");
-
-import * as ko from "knockout";
-import "./ComponentRegisterer";
-
-describe("Component Registerer", () => {
-  it("should register json-editor component", () => {
-    expect(ko.components.isRegistered("json-editor")).toBe(true);
-  });
-
-  it("should register dynamic-list component", () => {
-    expect(ko.components.isRegistered("dynamic-list")).toBe(true);
-  });
-});

src/Explorer/ComponentRegisterer.ts

@@ -1,10 +1,8 @@
 import * as ko from "knockout";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
-import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
 
 ko.components.register("editor", new EditorComponent());
 ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
-ko.components.register("dynamic-list", DynamicListComponent);

src/Explorer/Controls/DynamicList/DynamicList.test.ts

@@ -1,64 +0,0 @@
-import * as ko from "knockout";
-import { DynamicListComponent, DynamicListParams, DynamicListItem } from "./DynamicListComponent";
-
-const $ = (selector: string) => document.querySelector(selector) as HTMLElement;
-
-function buildComponent(buttonOptions: any) {
-  document.body.innerHTML = DynamicListComponent.template as any;
-  const vm = new DynamicListComponent.viewModel(buttonOptions);
-  ko.applyBindings(vm);
-}
-
-describe("Dynamic List Component", () => {
-  const mockPlaceHolder = "Write here";
-  const mockButton = "Add something";
-  const mockValue = "/someText";
-  const mockAriaLabel = "Add ariaLabel";
-  const items: ko.ObservableArray<DynamicListItem> = ko.observableArray<DynamicListItem>();
-
-  function buildListOptions(
-    items: ko.ObservableArray<DynamicListItem>,
-    placeholder?: string,
-    mockButton?: string
-  ): DynamicListParams {
-    return {
-      placeholder: placeholder,
-      listItems: items,
-      buttonText: mockButton,
-      ariaLabel: mockAriaLabel,
-    };
-  }
-
-  afterEach(() => {
-    ko.cleanNode(document);
-  });
-
-  describe("Rendering", () => {
-    it("should display button text", () => {
-      const params = buildListOptions(items, mockPlaceHolder, mockButton);
-      buildComponent(params);
-      expect($(".dynamicListItemAdd").textContent).toContain(mockButton);
-    });
-  });
-
-  describe("Behavior", () => {
-    it("should add items to the list", () => {
-      const params = buildListOptions(items, mockPlaceHolder, mockButton);
-      buildComponent(params);
-      $(".dynamicListItemAdd").click();
-      expect(items().length).toBe(1);
-      const input = document.getElementsByClassName("dynamicListItem").item(0).children[0];
-      input.setAttribute("value", mockValue);
-      input.dispatchEvent(new Event("change"));
-      input.dispatchEvent(new Event("blur"));
-      expect(items()[0].value()).toBe(mockValue);
-    });
-
-    it("should remove items from the list", () => {
-      const params = buildListOptions(items, mockPlaceHolder);
-      buildComponent(params);
-      $(".dynamicListItemDelete").click();
-      expect(items().length).toBe(0);
-    });
-  });
-});

src/Explorer/Controls/DynamicList/DynamicListComponent.less

@@ -1,59 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.dynamicList {
-    width: 100%;
-
-    .dynamicListContainer {
-        .dynamicListItem {
-            justify-content: space-around;
-            margin-bottom: @MediumSpace;
-
-            input {
-                width: @newCollectionPaneInputWidth;
-                margin: auto;
-                font-size: @mediumFontSize;
-                padding: @SmallSpace @DefaultSpace;
-                color: @BaseDark;
-            }
-
-            .dynamicListItemDelete {
-                padding: @SmallSpace @SmallSpace @DefaultSpace;
-                margin-left: @SmallSpace;
-
-                &:hover {
-                    .hover();
-                }
-
-                &:active {
-                    .active();
-                }
-
-                img {
-                    .dataExplorerIcons();
-                }
-            }
-        }
-    }
-
-    .dynamicListItemNew {
-        margin-top: @LargeSpace;
-
-        .dynamicListItemAdd {
-            padding: @DefaultSpace;
-            cursor: pointer;
-
-            &:hover {
-                .hover();
-            }
-
-            &:active {
-                .active();
-            }
-
-            img {
-                .dataExplorerIcons();
-                margin: 0px @SmallSpace @SmallSpace 0px; 
-            }
-        }
-    }
-}

src/Explorer/Controls/DynamicList/DynamicListComponent.ts

@@ -1,117 +0,0 @@
-/**
- * Dynamic list:
- *
- * Creates a list of dynamic inputs that can be populated and deleted.
- *
- * How to use in your markup:
- * <dynamic-list params="{ listItems: anObservableArrayOfDynamicListItem, placeholder: 'Text to display in placeholder',  ariaLabel: 'Text for aria-label', buttonText: 'Add item' }">
- * </dynamic-list>
- *
- */
-
-import * as ko from "knockout";
-import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
-import { KeyCodes } from "../../../Common/Constants";
-import template from "./dynamic-list.html";
-
-/**
- * Parameters for this component
- */
-export interface DynamicListParams {
-  /**
-   * Observable list of items to update
-   */
-  listItems: ko.ObservableArray<DynamicListItem>;
-
-  /**
-   * Placeholder text to use on inputs
-   */
-  placeholder?: string;
-
-  /**
-   * Text to use as aria-label
-   */
-  ariaLabel: string;
-
-  /**
-   * Text for the button to add items
-   */
-  buttonText?: string;
-
-  /**
-   * Callback triggered when the template is bound to the component (for testing purposes)
-   */
-  onTemplateReady?: () => void;
-}
-
-/**
- * Item in the dynamic list
- */
-export interface DynamicListItem {
-  value: ko.Observable<string>;
-}
-
-export class DynamicListViewModel extends WaitsForTemplateViewModel {
-  public placeholder: string;
-  public ariaLabel: string;
-  public buttonText: string;
-  public newItem: ko.Observable<string>;
-  public isTemplateReady: ko.Observable<boolean>;
-  public listItems: ko.ObservableArray<DynamicListItem>;
-
-  public constructor(options: DynamicListParams) {
-    super();
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady && options.onTemplateReady) {
-        options.onTemplateReady();
-      }
-    });
-
-    const params: DynamicListParams = options;
-    const paramsPlaceholder: string = params.placeholder;
-    const paramsButtonText: string = params.buttonText;
-    this.placeholder = paramsPlaceholder || "Write a value";
-    this.ariaLabel = "Unique keys";
-    this.buttonText = paramsButtonText || "Add item";
-    this.listItems = params.listItems || ko.observableArray<DynamicListItem>();
-    this.newItem = ko.observable("");
-  }
-
-  public removeItem = (data: any, event: MouseEvent | KeyboardEvent): void => {
-    const context = ko.contextFor(event.target as Node);
-    this.listItems.splice(context.$index(), 1);
-    document.getElementById("addUniqueKeyBtn").focus();
-  };
-
-  public onRemoveItemKeyPress = (data: any, event: KeyboardEvent, source: any): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.removeItem(data, event);
-      (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public addItem(): void {
-    this.listItems.push({ value: ko.observable("") });
-    (document.querySelector(".dynamicListItem:last-of-type input") as HTMLElement).focus();
-  }
-
-  public onAddItemKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
-      this.addItem();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-}
-
-/**
- * Helper class for ko component registration
- */
-export const DynamicListComponent = {
-  viewModel: DynamicListViewModel,
-  template,
-};

src/Explorer/Controls/DynamicList/dynamic-list.html

@@ -1,34 +0,0 @@
-<div class="dynamicList" data-bind="setTemplateReady: true">
-  <div class="dynamicListContainer" data-bind="foreach: listItems">
-    <div class="dynamicListItem">
-      <input
-        id="uniqueKeyItems"
-        type="text"
-        autocomplete="off"
-        data-bind="value: value, attr: {placeholder: $parent.placeholder, 'aria-label': $parent.ariaLabel}"
-      />
-      <span
-        class="dynamicListItemDelete"
-        title="Remove item"
-        role="button"
-        aria-label="Remove item"
-        tabindex="0"
-        data-bind="click: $parent.removeItem, event: { keydown: $parent.onRemoveItemKeyPress }"
-      >
-        <img src="/delete.svg" alt="Remove item" />
-      </span>
-    </div>
-  </div>
-  <div class="dynamicListItemNew">
-    <span
-      class="dynamicListItemAdd"
-      id="addUniqueKeyBtn"
-      role="button"
-      aria-label="Add unique key"
-      tabindex="0"
-      data-bind="click: addItem, event: { keydown: onAddItemKeyPress }"
-    >
-      <img src="/Add-property.svg" data-bind="attr: {alt: buttonText}" /> <span data-bind="text: buttonText"></span>
-    </span>
-  </div>
-</div>

src/Main.tsx

@@ -30,7 +30,6 @@ import { ResourceTree } from "./Common/ResourceTree";
 import "./Explorer/Controls/Accordion/AccordionComponent.less";
 import "./Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.less";
 import { Dialog } from "./Explorer/Controls/Dialog";
-import "./Explorer/Controls/DynamicList/DynamicListComponent.less";
 import "./Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.less";
 import "./Explorer/Controls/JsonEditor/JsonEditorComponent.less";
 import "./Explorer/Controls/Notebook/NotebookTerminalComponent.less";