Add snackbar component

gsa/.storybook/config.js

@@ -43,6 +43,7 @@ function loadStories() {
   require('../src/stories/mydialog.js');
   require('../src/stories/savedialog.js');
   require('../src/stories/containerdialog.js');
+  require('../src/stories/snackbar.js');
   // You can require as many stories as you need.
 }
 

gsa/src/stories/snackbar.js

@@ -0,0 +1,106 @@
+/* Copyright (C) 2019 Greenbone Networks GmbH
+ *
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+
+import styled from 'styled-components';
+
+import SnackbarCreator from '../web/components/snackbar/snackbar';
+import Button from '../web/components/form/button';
+import Theme from 'web/utils/theme';
+
+const BackgroundElement = styled.div`
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 100px;
+  margin: 5px 50px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  background-color: ${Theme.green};
+`;
+
+class DeleteButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: undefined,
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(value, name) {
+    this.setState({
+      message: {text: name},
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button name="Delete" title="Delete" onClick={this.handleClick} />
+        <SnackbarCreator message={this.state.message} />
+      </div>
+    );
+  }
+}
+
+class TestButtons extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: undefined,
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(value, name) {
+    this.setState({
+      message: {text: name},
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button name="Delete" title="Delete" onClick={this.handleClick} />
+        <Button name="Trashcan" title="Trashcan" onClick={this.handleClick} />
+        <Button name="Clone" title="Clone" onClick={this.handleClick} />
+
+        <SnackbarCreator message={this.state.message} />
+      </div>
+    );
+  }
+}
+
+storiesOf('Snackbar', module)
+  .add('with button', () => <DeleteButton />)
+  .add('with multiple buttons', () => <TestButtons />)
+  .add('with background element', () => (
+    <span>
+      <BackgroundElement>
+        <Button title="Test" />
+      </BackgroundElement>
+      <DeleteButton />
+    </span>
+  ));

gsa/src/web/components/snackbar/__tests__/__snapshots__/snackbar.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snackbar tests should render 1`] = `
+.c0 {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 100px;
+  margin: 5px 50px;
+  padding: 10px 50px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: space-around;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: space-around;
+  justify-content: space-around;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  z-index: 600;
+  box-shadow: 5px 5px 10px #787878;
+  box-sizing: border-box;
+  border-radius: 5px;
+  border: 1px solid #66c430;
+  background-color: #393637;
+  color: #fff;
+  font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+  -webkit-animation: eDClNj 5s ease-in-out;
+  animation: eDClNj 5s ease-in-out;
+}
+
+<span>
+  <div
+    class="c0"
+    data-testid="snackbar-container"
+  >
+    foo
+  </div>
+</span>
+`;

gsa/src/web/components/snackbar/__tests__/snackbar.js

@@ -0,0 +1,100 @@
+/* Copyright (C) 2019 Greenbone Networks GmbH
+ *
+ * SPDX-License-Identifier: GPL-2.0-or-later
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
+ */
+import React from 'react';
+
+import {render} from 'web/utils/testing';
+
+import SnackbarCreator from '../snackbar';
+
+describe('Snackbar tests', () => {
+  test('should render', () => {
+    const {rerender, element} = render(
+      <SnackbarCreator message={{text: undefined}} />,
+    );
+
+    rerender(<SnackbarCreator message={{text: 'foo'}} />);
+
+    expect(element).toMatchSnapshot();
+  });
+
+  test('should not render if text is undefined', () => {
+    const {queryByTestId} = render(
+      <SnackbarCreator message={{text: undefined}} />,
+    );
+
+    expect(queryByTestId('snackbar-container')).not.toBeInTheDocument();
+  });
+
+  test('should not render again if message stays the same', () => {
+    const {element, queryByTestId, rerender} = render(
+      <SnackbarCreator message={{text: undefined}} />,
+    );
+    const message = {text: 'foo'};
+
+    rerender(<SnackbarCreator message={message} />);
+
+    expect(element).toHaveTextContent('foo');
+
+    rerender(<SnackbarCreator message={message} />);
+
+    setTimeout(
+      () => expect(queryByTestId('snackbar-container')).not.toBeInTheDocument(),
+      5000,
+    );
+  });
+
+  test('should call handleClose', () => {
+    const {rerender, element} = render(
+      <SnackbarCreator message={{text: undefined}} />,
+    );
+
+    rerender(<SnackbarCreator message={{text: 'foo'}} />);
+
+    expect(element).toHaveTextContent('foo');
+    setTimeout(() => expect(element.handleClose()).toHaveBeenCalled(), 5000);
+  });
+
+  test('should close after 5 seconds', () => {
+    const {rerender, element} = render(
+      <SnackbarCreator message={{text: undefined}} />,
+    );
+
+    rerender(<SnackbarCreator message={{text: 'foo'}} />);
+
+    expect(element).toHaveTextContent('foo');
+    setTimeout(() => expect(element).not.toHaveTextContent('foo'), 5000);
+  });
+
+  test('should render multiple snackbars successively', () => {
+    const {rerender, element} = render(
+      <SnackbarCreator message={{text: undefined}} />,
+    );
+
+    rerender(<SnackbarCreator message={{text: 'foo'}} />);
+
+    expect(element).toHaveTextContent('foo');
+
+    rerender(<SnackbarCreator message={{text: 'bar'}} />);
+
+    expect(element).toHaveTextContent('foo');
+    expect(element).not.toHaveTextContent('bar');
+    setTimeout(() => expect(element).not.toHaveTextContent('foo'), 5000);
+    setTimeout(() => expect(element).toHaveTextContent('bar'), 5000);
+  });
+});