refactor(core/presentation): Consolidate Checklist and ChecklistInput…

… components (#7077)

app/scripts/modules/amazon/src/serverGroup/AvailabilityZoneSelector.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { AccountService, Checklist } from '@spinnaker/core';
+import { AccountService, ChecklistInput } from '@spinnaker/core';
 
 export interface IAvailabilityZoneSelectorProps {
   region: string;
@@ -93,10 +93,10 @@ export class AvailabilityZoneSelector extends React.Component<
             {!usePreferredZones && (
               <div>
                 Restrict server group instances to:
-                <Checklist
-                  items={new Set(allZones)}
-                  checked={new Set(selectedZones)}
-                  onChange={this.handleSelectedZonesChanged}
+                <ChecklistInput
+                  stringOptions={allZones}
+                  value={selectedZones}
+                  onChange={(e: React.ChangeEvent<any>) => this.handleSelectedZonesChanged(e.target.value)}
                 />
               </div>
             )}

app/scripts/modules/core/src/forms/index.ts

@@ -1,2 +1 @@
-export * from './checklist/Checklist';
 export * from './mapEditor/MapEditor';

app/scripts/modules/core/src/pipeline/config/triggers/pipeline/PipelineTrigger.tsx

@@ -6,8 +6,7 @@ import { Observable, Subject } from 'rxjs';
 import { Application, ApplicationReader } from 'core/application';
 import { BaseTrigger, PipelineConfigService } from 'core/pipeline';
 import { IPipeline, IPipelineTrigger } from 'core/domain';
-import { Omit } from 'core/presentation';
-import { Checklist } from 'core/forms';
+import { ChecklistInput, Omit } from 'core/presentation';
 
 type IPipelineTriggerConfig = Omit<IPipelineTrigger, 'parentExecution' | 'parentPipelineId' | 'user' | 'rebake'>;
 
@@ -121,11 +120,11 @@ export class PipelineTrigger extends React.Component<IPipelineTriggerConfigProps
           <div className="form-group">
             <label className="col-md-3 sm-label-right">Pipeline Status</label>
             <div className="col-md-6">
-              <Checklist
+              <ChecklistInput
                 inline={true}
-                items={new Set(this.statusOptions)}
-                checked={new Set(status)}
-                onChange={(s: Set<string>) => this.onUpdateTrigger({ status: Array.from(s) })}
+                value={status}
+                stringOptions={this.statusOptions}
+                onChange={(e: React.ChangeEvent<any>) => this.onUpdateTrigger({ status: e.target.value })}
               />
             </div>
           </div>

app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.spec.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import { ChecklistInput } from './ChecklistInput';
+
+const noop = () => {};
+
+describe('<ChecklistInput />', () => {
+  it('initializes properly with provided values', () => {
+    const checkedOptions = ['a', 'b', 'c'];
+    const options = ['a', 'b', 'c', 'd'];
+    const component = mount(<ChecklistInput value={checkedOptions} stringOptions={options} onChange={noop} />);
+    expect(component.find('input[type="checkbox"]').length).toBe(4);
+    expect(component.find('input[type="checkbox"][checked=true]').length).toBe(3);
+  });
+
+  it('updates items when an item is added externally', () => {
+    const checkedOptions = ['a', 'b', 'c'];
+    const options = ['a', 'b', 'c', 'd'];
+    const component = mount(<ChecklistInput value={checkedOptions} stringOptions={options} onChange={noop} />);
+
+    expect(component.find('input[type="checkbox"]').length).toBe(4);
+    expect(component.find('input[type="checkbox"][checked=true]').length).toBe(3);
+    component.setProps({ stringOptions: options.concat('e') });
+    expect(component.find('input[type="checkbox"]').length).toBe(5);
+    expect(component.find('input[type="checkbox"][checked=true]').length).toBe(3);
+  });
+
+  it('updates items when an item is removed externally', () => {
+    const checkedOptions = ['a', 'b', 'c'];
+    const options = ['a', 'b', 'c', 'd'];
+    const component = mount(<ChecklistInput value={checkedOptions} stringOptions={options} onChange={noop} />);
+
+    expect(component.find('input[type="checkbox"]').length).toBe(4);
+    expect(component.find('input[type="checkbox"][checked=true]').length).toBe(3);
+    component.setProps({ stringOptions: options.filter(item => item !== 'c') });
+    expect(component.find('input[type="checkbox"]').length).toBe(3);
+    expect(component.find('input[type="checkbox"][checked=true]').length).toBe(2);
+  });
+
+  it('updates checked items when an item is checked externally', () => {
+    const checkedOptions = ['a', 'b', 'c'];
+    const options = ['a', 'b', 'c', 'd'];
+    const component = mount(<ChecklistInput value={checkedOptions} stringOptions={options} onChange={noop} />);
+
+    expect(component.find('input[type="checkbox"]').length).toBe(4);
+    expect(component.find('input[type="checkbox"][checked=true]').length).toBe(3);
+    component.setProps({ value: checkedOptions.concat('d') });
+    expect(component.find('input[type="checkbox"]').length).toBe(4);
+    expect(component.find('input[type="checkbox"][checked=true]').length).toBe(4);
+  });
+
+  it('updates checked items when an item is unchecked externally', () => {
+    const checkedOptions = ['a', 'b', 'c'];
+    const options = ['a', 'b', 'c', 'd'];
+    const component = mount(<ChecklistInput value={checkedOptions} stringOptions={options} onChange={noop} />);
+
+    expect(component.find('input[type="checkbox"]').length).toBe(4);
+    expect(component.find('input[type="checkbox"][checked=true]').length).toBe(3);
+    component.setProps({ value: checkedOptions.filter(item => item !== 'c') });
+    expect(component.find('input[type="checkbox"]').length).toBe(4);
+    expect(component.find('input[type="checkbox"][checked=true]').length).toBe(2);
+  });
+
+  it('shows the select all button when necessary', () => {
+    const checkedOptions = ['a', 'b', 'c'];
+    const options = ['a', 'b', 'c', 'd'];
+    const component = mount(
+      <ChecklistInput value={checkedOptions} stringOptions={options} onChange={noop} showSelectAll={true} />,
+    );
+    expect(component.find('a').length).toBe(1);
+  });
+
+  it('does not show the select all button when necessary', () => {
+    const checkedOptions = ['a', 'b', 'c'];
+    const options = ['a', 'b', 'c', 'd'];
+    const component = mount(
+      <ChecklistInput value={checkedOptions} stringOptions={options} onChange={noop} showSelectAll={false} />,
+    );
+    expect(component.find('a').length).toBe(0);
+  });
+
+  it('shows correct text for the select all button when not all the items are checked', () => {
+    const checkedOptions = ['a', 'b', 'c'];
+    const options = ['a', 'b', 'c', 'd'];
+    const component = mount(
+      <ChecklistInput value={checkedOptions} stringOptions={options} onChange={noop} showSelectAll={true} />,
+    );
+
+    expect(component.find('a').text()).toBe('Select All');
+  });
+
+  it('shows correct text for the select all button when all the items are checked', () => {
+    const checkedOptions = ['a', 'b', 'c', 'd'];
+    const options = ['a', 'b', 'c', 'd'];
+    const component = mount(
+      <ChecklistInput value={checkedOptions} stringOptions={options} onChange={noop} showSelectAll={true} />,
+    );
+
+    expect(component.find('a').text()).toBe('Deselect All');
+  });
+
+  it('passes an empty list to the onChange handler when deselect all clicked', () => {
+    const checkedOptions = ['a', 'b', 'c', 'd'];
+    const options = ['a', 'b', 'c', 'd'];
+    const onChange = (e: React.ChangeEvent<any>): void => {
+      expect(e.target.value.length).toBe(0);
+    };
+    const component = mount(
+      <ChecklistInput value={checkedOptions} stringOptions={options} onChange={onChange} showSelectAll={true} />,
+    );
+    component.find('a').simulate('click');
+  });
+
+  it('passes a complete list to the onChange handler when select all clicked', () => {
+    const checkedOptions = ['a'];
+    const options = ['a', 'b', 'c', 'd'];
+    const onChange = (e: React.ChangeEvent<any>): void => {
+      expect(e.target.value.length).toBe(4);
+    };
+    const component = mount(
+      <ChecklistInput value={checkedOptions} stringOptions={options} onChange={onChange} showSelectAll={true} />,
+    );
+    component.find('a').simulate('click');
+  });
+});