Add "Don't show this again" message to large-pipeline-warning (#381)

Allow users to turn off the large-pipeline-warning permanently via the UI. They can reenable it using the 'sizewarning' flag.

src/components/large-pipeline-warning/index.js

@@ -1,17 +1,18 @@
 import React from 'react';
 import classnames from 'classnames';
 import { connect } from 'react-redux';
-import { toggleIgnoreLargeWarning } from '../../actions';
+import { changeFlag, toggleIgnoreLargeWarning } from '../../actions';
 import { getVisibleNodes } from '../../selectors/nodes';
 import { getTriggerLargeGraphWarning } from '../../selectors/layout';
 import Button from '@quantumblack/kedro-ui/lib/components/button';
 import './large-pipeline-warning.css';
 
 export const LargePipelineWarning = ({
-  theme,
+  onDisable,
+  onHide,
   nodes,
-  onToggleIgnoreLargeWarning,
   sidebarVisible,
+  theme,
   visible,
 }) => {
   return visible ? (
@@ -27,9 +28,17 @@ export const LargePipelineWarning = ({
         while to render. You can use the sidebar controls to select a smaller
         graph.
       </p>
-      <Button theme={theme} onClick={() => onToggleIgnoreLargeWarning(true)}>
+      <Button theme={theme} onClick={onHide}>
         Render it anyway
       </Button>
+      <Button
+        theme={theme}
+        onClick={onDisable}
+        size="small"
+        mode="secondary"
+        animation="wipe">
+        Don't show this again
+      </Button>
     </div>
   ) : null;
 };
@@ -42,8 +51,11 @@ export const mapStateToProps = (state) => ({
 });
 
 export const mapDispatchToProps = (dispatch) => ({
-  onToggleIgnoreLargeWarning: (value) => {
-    dispatch(toggleIgnoreLargeWarning(value));
+  onDisable: () => {
+    dispatch(changeFlag('sizewarning', false));
+  },
+  onHide: () => {
+    dispatch(toggleIgnoreLargeWarning(true));
   },
 });
 

src/components/large-pipeline-warning/large-pipeline-warning.scss

@@ -2,9 +2,13 @@
 
 .pipeline-warning {
   position: absolute;
-  top: calc(50% - 14em);
+  top: 0;
   left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   width: calc((100% - #{$sidebar-width-closed}));
+  height: 100%;
   text-align: center;
   transform: translateX($sidebar-width-closed);
   transition: transform 0.4s ease, width ease 0.4s;
@@ -15,32 +19,35 @@
       transform: translateX($sidebar-width-open);
     }
   }
+}
 
-  %warning-text {
-    width: 90%;
-    margin-right: auto;
-    margin-left: auto;
-  }
+%warning-text {
+  width: 90%;
+  margin: 0 auto;
+}
 
-  &__title {
-    @extend %warning-text;
-    margin-bottom: 0.6em;
-    font-weight: normal;
-    font-size: 2.8em;
+.pipeline-warning__title {
+  @extend %warning-text;
+  margin-bottom: 0.6em;
+  font-weight: normal;
+  font-size: 2.8em;
 
-    @media (min-width: $sidebar-width-breakpoint) {
-      font-size: 3.8em;
-    }
+  @media (min-width: $sidebar-width-breakpoint) {
+    font-size: 3.8em;
   }
+}
 
-  &__subtitle {
-    @extend %warning-text;
-    max-width: 30em;
-    margin-bottom: 2.4em;
-    font-size: 1.4em;
+.pipeline-warning__subtitle {
+  @extend %warning-text;
+  max-width: 30em;
+  margin-bottom: 2.4em;
+  font-size: 1.4em;
 
-    @media (min-width: $sidebar-width-breakpoint) {
-      font-size: 1.5em;
-    }
+  @media (min-width: $sidebar-width-breakpoint) {
+    font-size: 1.5em;
   }
 }
+
+.pipeline-warning .kui-button:first-of-type {
+  margin-bottom: 1.2em;
+}

src/components/large-pipeline-warning/large-pipeline-warning.test.js

@@ -1,33 +1,47 @@
 import React from 'react';
-import ConnectedModal, {
+import {
   LargePipelineWarning,
   mapStateToProps,
   mapDispatchToProps,
 } from './index';
 import { mockState, setup } from '../../utils/state.mock';
 
-describe('large modal', () => {
+describe('LargePipelineWarning', () => {
   it('renders without crashing', () => {
     const mockFn = jest.fn();
     const props = {
-      onToggleIgnoreLargeWarning: mockFn,
+      onDisable: mockFn,
+      onHide: mockFn,
       nodes: [],
       visible: true,
     };
     const wrapper = setup.mount(<LargePipelineWarning {...props} />);
     expect(wrapper.find('.pipeline-warning').length).toBe(1);
   });
 
-  it('clicking the render anyways button will toggle the graph to display', () => {
+  it('will call onHide upon clicking the "render anyway" button', () => {
     const mockFn = jest.fn();
     const props = {
-      onToggleIgnoreLargeWarning: mockFn,
+      onDisable: () => {},
+      onHide: mockFn,
       nodes: [],
       visible: true,
     };
     const wrapper = setup.mount(<LargePipelineWarning {...props} />);
+    wrapper.find('.kui-button__btn').at(0).simulate('click');
+    expect(mockFn.mock.calls.length).toBe(1);
+  });
 
-    wrapper.find('.kui-button__btn').simulate('click');
+  it('will call onDisable upon clicking the "Don\'t show this again" button', () => {
+    const mockFn = jest.fn();
+    const props = {
+      onDisable: mockFn,
+      onHide: () => {},
+      nodes: [],
+      visible: true,
+    };
+    const wrapper = setup.mount(<LargePipelineWarning {...props} />);
+    wrapper.find('.kui-button__btn').at(1).simulate('click');
     expect(mockFn.mock.calls.length).toBe(1);
   });
 
@@ -41,10 +55,11 @@ describe('large modal', () => {
     expect(mapStateToProps(mockState.animals)).toEqual(expectedResult);
   });
 
-  it('mapDispatchToProps', () => {
+  it('maps dispatch to props', () => {
     const dispatch = jest.fn();
     const expectedResult = {
-      onToggleIgnoreLargeWarning: expect.any(Function),
+      onDisable: expect.any(Function),
+      onHide: expect.any(Function),
     };
     expect(mapDispatchToProps(dispatch)).toEqual(expectedResult);
   });

src/config.js

@@ -44,7 +44,7 @@ export const flags = {
   sizewarning: {
     description: 'Show a warning before rendering very large graphs',
     default: true,
-    icon: '⚠️',
+    icon: '🐳',
   },
 };