- restored the original disabled button behavior

Author: andrew-goldstein

x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.test.tsx

@@ -4,7 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getPinIcon } from './';
+import { mount } from 'enzyme';
+import React from 'react';
+
+import { TimelineType } from '../../../../../common/types/timeline';
+
+import { getPinIcon, Pin } from './';
+
+interface ButtonIcon {
+  isDisabled: boolean;
+}
 
 describe('pin', () => {
   describe('getPinRotation', () => {
@@ -16,4 +25,62 @@ describe('pin', () => {
       expect(getPinIcon(false)).toEqual('pin');
     });
   });
+
+  describe('disabled button behavior', () => {
+    test('the button is enabled when allowUnpinning is true, and timelineType is NOT `template` (the default)', () => {
+      const allowUnpinning = true;
+      const wrapper = mount(
+        <Pin allowUnpinning={allowUnpinning} onClick={jest.fn()} pinned={false} />
+      );
+
+      expect(
+        (wrapper.find('[data-test-subj="pin"]').first().props() as ButtonIcon).isDisabled
+      ).toBe(false);
+    });
+
+    test('the button is disabled when allowUnpinning is false, and timelineType is NOT `template` (the default)', () => {
+      const allowUnpinning = false;
+      const wrapper = mount(
+        <Pin allowUnpinning={allowUnpinning} onClick={jest.fn()} pinned={false} />
+      );
+
+      expect(
+        (wrapper.find('[data-test-subj="pin"]').first().props() as ButtonIcon).isDisabled
+      ).toBe(true);
+    });
+
+    test('the button is disabled when allowUnpinning is true, and timelineType is `template`', () => {
+      const allowUnpinning = true;
+      const timelineType = TimelineType.template;
+      const wrapper = mount(
+        <Pin
+          allowUnpinning={allowUnpinning}
+          onClick={jest.fn()}
+          pinned={false}
+          timelineType={timelineType}
+        />
+      );
+
+      expect(
+        (wrapper.find('[data-test-subj="pin"]').first().props() as ButtonIcon).isDisabled
+      ).toBe(true);
+    });
+
+    test('the button is disabled when allowUnpinning is false, and timelineType is `template`', () => {
+      const allowUnpinning = false;
+      const timelineType = TimelineType.template;
+      const wrapper = mount(
+        <Pin
+          allowUnpinning={allowUnpinning}
+          onClick={jest.fn()}
+          pinned={false}
+          timelineType={timelineType}
+        />
+      );
+
+      expect(
+        (wrapper.find('[data-test-subj="pin"]').first().props() as ButtonIcon).isDisabled
+      ).toBe(true);
+    });
+  });
 });

x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.tsx

@@ -34,7 +34,7 @@ export const Pin = React.memo<Props>(
         iconSize={iconSize}
         iconType={getPinIcon(pinned)}
         onClick={onClick}
-        isDisabled={isTemplate}
+        isDisabled={isTemplate || !allowUnpinning}
       />
     );
   }