ref(bulk-controller): Add selectedIds prop option (#24172)

docs-ui/components/bulkController.stories.js

@@ -33,6 +33,8 @@ const dummy = [
   },
 ];
 
+const pageIds = dummy.map(d => d.id);
+
 export default {
   title: 'Core/Tables/BulkController',
   component: BulkController,
@@ -40,7 +42,8 @@ export default {
 
 export const _BulkController = () => (
   <BulkController
-    pageIds={dummy.map(d => d.id)}
+    pageIds={pageIds}
+    defaultSelectedIds={pageIds.slice(0, 2)}
     allRowsCount={23}
     columnsCount={3}
     bulkLimit={1000}

src/sentry/static/sentry/app/components/bulkController/index.tsx

@@ -66,13 +66,22 @@ type Props = {
    * Maximum number of rows that can be bulk manipulated at once (used in BulkNotice)
    */
   bulkLimit?: number;
+  /**
+   * Array of default selected ids
+   */
+  defaultSelectedIds?: string[];
 };
 
 class BulkController extends React.Component<Props, State> {
-  state: State = {
-    selectedIds: [],
-    isAllSelected: false,
-  };
+  state: State = this.getInitialState();
+
+  getInitialState() {
+    const {defaultSelectedIds, pageIds} = this.props;
+    return {
+      selectedIds: intersection(defaultSelectedIds ?? [], pageIds),
+      isAllSelected: false,
+    };
+  }
 
   static getDerivedStateFromProps(props: Readonly<Props>, state: State) {
     return {

tests/js/spec/components/bulkController/index.spec.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-
-import {shallow} from 'sentry-test/enzyme';
-
-import BulkController from 'app/components/bulkController';
-
-describe('BulkController', function () {
-  let wrapper, renderProp, toggleRow, selectPage, deselectPage, selectAll, unselectAll;
-
-  beforeEach(function () {
-    renderProp = jest.fn();
-    wrapper = shallow(
-      <BulkController allRowsCount={32} pageIds={[1, 2, 3]} columnsCount={4}>
-        {({
-          isAllSelected,
-          isPageSelected,
-          selectedIds,
-          onRowToggle,
-          onAllRowsToggle,
-          onPageRowsToggle,
-        }) => {
-          renderProp(isAllSelected, isPageSelected, selectedIds);
-          return (
-            <React.Fragment>
-              {isPageSelected && 'whole page selected'}
-              {isAllSelected && 'everything selected'}
-              <button data-test-id="selectAll" onClick={() => onAllRowsToggle(true)} />
-              <button data-test-id="selectPage" onClick={() => onPageRowsToggle(true)} />
-              <button data-test-id="unselectAll" onClick={() => onAllRowsToggle(false)} />
-              <button
-                data-test-id="deselectPage"
-                onClick={() => onPageRowsToggle(false)}
-              />
-              <button data-test-id="toggleRow" onClick={() => onRowToggle(2)} />
-            </React.Fragment>
-          );
-        }}
-      </BulkController>
-    );
-    toggleRow = wrapper.find('[data-test-id="toggleRow"]');
-    selectPage = wrapper.find('[data-test-id="selectPage"]');
-    deselectPage = wrapper.find('[data-test-id="deselectPage"]');
-    selectAll = wrapper.find('[data-test-id="selectAll"]');
-    unselectAll = wrapper.find('[data-test-id="unselectAll"]');
-  });
-
-  it('sets the defaults', function () {
-    expect(renderProp).toHaveBeenLastCalledWith(false, false, []);
-  });
-
-  it('toggles single item', function () {
-    toggleRow.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(false, false, [2]);
-    toggleRow.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(false, false, []);
-  });
-
-  it('toggles the page', function () {
-    toggleRow.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(false, false, [2]);
-    selectPage.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(false, true, [2, 1, 3]);
-    deselectPage.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(false, false, []);
-  });
-
-  it('toggles everything', function () {
-    toggleRow.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(false, false, [2]);
-    selectAll.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(true, true, [1, 2, 3]);
-    unselectAll.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(false, false, []);
-  });
-
-  it('deselects one after having everything selected', function () {
-    selectAll.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(true, true, [1, 2, 3]);
-    toggleRow.simulate('click');
-    expect(renderProp).toHaveBeenLastCalledWith(false, false, [1, 3]);
-  });
-});

tests/js/spec/components/bulkController/index.spec.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+
+import {shallow} from 'sentry-test/enzyme';
+
+import BulkController from 'app/components/bulkController';
+
+function renderedComponent(
+  renderProp: Function,
+  pageIds: string[],
+  defaultSelectedIds?: string[]
+) {
+  return shallow(
+    <BulkController
+      allRowsCount={32}
+      pageIds={pageIds}
+      defaultSelectedIds={defaultSelectedIds}
+      columnsCount={4}
+    >
+      {({
+        isAllSelected,
+        isPageSelected,
+        selectedIds,
+        onRowToggle,
+        onAllRowsToggle,
+        onPageRowsToggle,
+      }) => {
+        renderProp(isAllSelected, isPageSelected, selectedIds);
+        return (
+          <React.Fragment>
+            {isPageSelected && 'whole page selected'}
+            {isAllSelected && 'everything selected'}
+            <button data-test-id="selectAll" onClick={() => onAllRowsToggle(true)} />
+            <button data-test-id="selectPage" onClick={() => onPageRowsToggle(true)} />
+            <button data-test-id="unselectAll" onClick={() => onAllRowsToggle(false)} />
+            <button data-test-id="deselectPage" onClick={() => onPageRowsToggle(false)} />
+            <button data-test-id="toggleRow" onClick={() => onRowToggle('2')} />
+          </React.Fragment>
+        );
+      }}
+    </BulkController>
+  );
+}
+
+describe('BulkController', function () {
+  const pageIds = ['1', '2', '3'];
+  const renderProp = jest.fn();
+
+  let wrapper: any,
+    toggleRow: any,
+    selectPage: any,
+    deselectPage: any,
+    selectAll: any,
+    unselectAll: any;
+
+  describe('renders', function () {
+    beforeEach(function () {
+      wrapper = renderedComponent(renderProp, pageIds);
+      toggleRow = wrapper.find('[data-test-id="toggleRow"]');
+      selectPage = wrapper.find('[data-test-id="selectPage"]');
+      deselectPage = wrapper.find('[data-test-id="deselectPage"]');
+      selectAll = wrapper.find('[data-test-id="selectAll"]');
+      unselectAll = wrapper.find('[data-test-id="unselectAll"]');
+    });
+
+    it('sets the defaults', function () {
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, []);
+    });
+
+    it('toggles single item', function () {
+      toggleRow.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, ['2']);
+      toggleRow.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, []);
+    });
+
+    it('toggles the page', function () {
+      toggleRow.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, ['2']);
+      selectPage.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(false, true, ['2', '1', '3']);
+      deselectPage.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, []);
+    });
+
+    it('toggles everything', function () {
+      toggleRow.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, ['2']);
+      selectAll.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(true, true, ['1', '2', '3']);
+      unselectAll.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, []);
+    });
+
+    it('deselects one after having everything selected', function () {
+      selectAll.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(true, true, ['1', '2', '3']);
+      toggleRow.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, ['1', '3']);
+    });
+  });
+
+  describe('with default selectIds', function () {
+    it('sets the defaults', function () {
+      wrapper = renderedComponent(renderProp, pageIds, ['2']);
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, ['2']);
+    });
+
+    it('page is selected by default', function () {
+      wrapper = renderedComponent(renderProp, pageIds, pageIds);
+      expect(renderProp).toHaveBeenLastCalledWith(false, true, pageIds);
+    });
+
+    it('toggle the last unchecked option, should change button selectAll to true', function () {
+      const defaultSelectedIds = ['1', '3'];
+      wrapper = renderedComponent(renderProp, pageIds, defaultSelectedIds);
+      expect(renderProp).toHaveBeenLastCalledWith(false, false, defaultSelectedIds);
+      toggleRow.simulate('click');
+      expect(renderProp).toHaveBeenLastCalledWith(false, true, [
+        ...defaultSelectedIds,
+        '2',
+      ]);
+    });
+  });
+});