foreman-tasks 0.15.1 → 0.15.2

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksLabelsRow/TasksLabelsRow.scss

@@ -0,0 +1,26 @@
+@import '~patternfly/dist/sass/patternfly/_color-variables.scss';
+
+.tasks-labels-row {
+  margin: 0;
+  padding: 0 10px;
+  .title {
+    font-weight: 600;
+    font-size: 13px;
+  }
+  .label {
+    font-size: 100%;
+
+    margin-left: 5px;
+    margin-right: 5px;
+    a {
+      padding-left: 10px;
+    }
+  }
+  .pficon-close {
+    color: $color-pf-white;
+  }
+  .compound-label-pf {
+    margin-left: 0;
+    margin: 10px;
+  }
+}

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksLabelsRow/TasksLabelsRow.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, object } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { Grid } from 'patternfly-react';
+
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../TasksDashboardConstants';
+import TasksLabelsRow from './TasksLabelsRow';
+
+storiesOf('TasksDashboard/TasksLabelsRow', module)
+  .addDecorator(withKnobs)
+  .addDecorator(storyFn => <Grid style={{ padding: 40 }}>{storyFn()}</Grid>)
+  .add('TasksLabelsRow', () => (
+    <TasksLabelsRow
+      query={object('query', {
+        state: 'running',
+        mode: 'last',
+        time: TASKS_DASHBOARD_AVAILABLE_TIMES.H24,
+      })}
+      deleteQueryKey={action('deleteQueryKey')}
+    />
+  ));

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksLabelsRow/TasksLabelsRow.test.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { shallow } from 'enzyme';
+
+import { getQueryKeyText, getQueryValueText } from '../../TasksDashboardHelper';
+import TasksLabelsRow from './TasksLabelsRow';
+
+jest.mock('../../TasksDashboardHelper');
+
+getQueryKeyText.mockImplementation(val => val);
+getQueryValueText.mockImplementation(val => val);
+
+const fixtures = {
+  'render with minimal props': {},
+  'render with props': {
+    query: { some: 'query' },
+    updateQuery: jest.fn(),
+  },
+};
+
+describe('TasksLabelsRow', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(TasksLabelsRow, fixtures));
+
+  describe('triggering', () => {
+    it('should trigger updateQuery when label delete-click', () => {
+      const updateQuery = jest.fn();
+      const query = { some: 'query', someOther: 'some-query' };
+
+      const component = shallow(
+        <TasksLabelsRow query={query} updateQuery={updateQuery} />
+      );
+      const labels = component.find('Label');
+
+      const firstLabel = labels.first();
+      const secondLabel = labels.at(1);
+
+      firstLabel.simulate('removeClick');
+      expect(updateQuery).toHaveBeenCalledWith({ someOther: 'some-query' });
+
+      secondLabel.simulate('removeClick');
+      expect(updateQuery).toHaveBeenCalledWith({ some: 'query' });
+    });
+
+    it('should trigger updateQuery when -clear-all- click', () => {
+      const updateQuery = jest.fn();
+      const query = { some: 'query', someOther: 'some-query' };
+
+      const component = shallow(
+        <TasksLabelsRow query={query} updateQuery={updateQuery} />
+      );
+      component.find('Button').simulate('click');
+
+      expect(updateQuery).toHaveBeenCalledWith({});
+    });
+  });
+});

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksLabelsRow/__snapshots__/TasksLabelsRow.test.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TasksLabelsRow rendering render with minimal props 1`] = `
+<Row
+  bsClass="row"
+  className="tasks-labels-row"
+  componentClass="div"
+>
+  <span
+    className="title"
+  >
+    Active Filters:
+  </span>
+</Row>
+`;
+
+exports[`TasksLabelsRow rendering render with props 1`] = `
+<Row
+  bsClass="row"
+  className="tasks-labels-row"
+  componentClass="div"
+>
+  <span
+    className="title"
+  >
+    Active Filters:
+  </span>
+  <Label
+    bsStyle="info"
+    key="some"
+    onRemoveClick={[Function]}
+    type="default"
+  >
+    some = query
+  </Label>
+  <Button
+    active={false}
+    block={false}
+    bsClass="btn"
+    bsStyle="link"
+    disabled={false}
+    onClick={[Function]}
+  >
+    Clear All Filters
+  </Button>
+</Row>
+`;

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/Components/TimeDropDown/TimeDropDown.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DropdownButton, MenuItem } from 'patternfly-react';
+import { noop } from 'foremanReact/common/helpers';
+
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../../../TasksDashboardConstants';
+import { getQueryValueText } from '../../../../TasksDashboardHelper';
+
+const TimeDropDown = ({ id, className, selectedTime, onChange, ...props }) => {
+  const availableTimes = Object.keys(TASKS_DASHBOARD_AVAILABLE_TIMES).map(
+    key => ({
+      key,
+      text: getQueryValueText(key),
+      active: key === selectedTime,
+    })
+  );
+
+  return (
+    <DropdownButton
+      id={id}
+      className={className}
+      title={getQueryValueText(selectedTime)}
+      {...props}
+    >
+      {availableTimes.map(({ key, text, active }) => (
+        <MenuItem
+          key={key}
+          active={active}
+          onClick={() => active || onChange(key)}
+        >
+          {text}
+        </MenuItem>
+      ))}
+    </DropdownButton>
+  );
+};
+
+TimeDropDown.propTypes = {
+  id: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  selectedTime: PropTypes.oneOf(Object.keys(TASKS_DASHBOARD_AVAILABLE_TIMES)),
+  onChange: PropTypes.func,
+};
+
+TimeDropDown.defaultProps = {
+  className: '',
+  selectedTime: TASKS_DASHBOARD_AVAILABLE_TIMES.H24,
+  onChange: noop,
+};
+
+export default TimeDropDown;

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/Components/TimeDropDown/TimeDropDown.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { withCardsDecorator } from '../../../../../../../stories/decorators';
+
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../../../TasksDashboardConstants';
+import TimeDropDown from './TimeDropDown';
+
+storiesOf('TasksDashboard/TasksTimeRow', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withCardsDecorator)
+  .add('TimeDropDown', () => (
+    <TimeDropDown
+      id="time-period-dropdown"
+      selectedTime={select(
+        'selectedTime',
+        TASKS_DASHBOARD_AVAILABLE_TIMES,
+        TASKS_DASHBOARD_AVAILABLE_TIMES.H24
+      )}
+      onChange={action('onChange')}
+    />
+  ));

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/Components/TimeDropDown/TimeDropDown.test.js

@@ -0,0 +1,19 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../../../TasksDashboardConstants';
+import TimeDropDown from './TimeDropDown';
+
+const createRequiredProps = () => ({ id: 'some-id' });
+
+const fixtures = {
+  'render with minimal props': { ...createRequiredProps() },
+  'render with all props': {
+    ...createRequiredProps(),
+    className: 'some-class',
+    selectedTime: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+    onChange: jest.fn(),
+  },
+};
+
+describe('TimeDropDown', () =>
+  testComponentSnapshotsWithFixtures(TimeDropDown, fixtures));

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/Components/TimeDropDown/__snapshots__/TimeDropDown.test.js.snap

@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TimeDropDown render with all props 1`] = `
+<DropdownButton
+  className="some-class"
+  id="some-id"
+  title="week"
+>
+  <MenuItem
+    active={false}
+    bsClass="dropdown"
+    disabled={false}
+    divider={false}
+    header={false}
+    key="H24"
+    onClick={[Function]}
+  >
+    24h
+  </MenuItem>
+  <MenuItem
+    active={false}
+    bsClass="dropdown"
+    disabled={false}
+    divider={false}
+    header={false}
+    key="H12"
+    onClick={[Function]}
+  >
+    12h
+  </MenuItem>
+  <MenuItem
+    active={true}
+    bsClass="dropdown"
+    disabled={false}
+    divider={false}
+    header={false}
+    key="WEEK"
+    onClick={[Function]}
+  >
+    week
+  </MenuItem>
+</DropdownButton>
+`;
+
+exports[`TimeDropDown render with minimal props 1`] = `
+<DropdownButton
+  className=""
+  id="some-id"
+  title="24h"
+>
+  <MenuItem
+    active={true}
+    bsClass="dropdown"
+    disabled={false}
+    divider={false}
+    header={false}
+    key="H24"
+    onClick={[Function]}
+  >
+    24h
+  </MenuItem>
+  <MenuItem
+    active={false}
+    bsClass="dropdown"
+    disabled={false}
+    divider={false}
+    header={false}
+    key="H12"
+    onClick={[Function]}
+  >
+    12h
+  </MenuItem>
+  <MenuItem
+    active={false}
+    bsClass="dropdown"
+    disabled={false}
+    divider={false}
+    header={false}
+    key="WEEK"
+    onClick={[Function]}
+  >
+    week
+  </MenuItem>
+</DropdownButton>
+`;

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/TasksTimeRow.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row } from 'patternfly-react';
+import { noop } from 'foremanReact/common/helpers';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+import { timePropType } from '../../TasksDashboardPropTypes';
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../TasksDashboardConstants';
+import TimeDropDown from './Components/TimeDropDown/TimeDropDown';
+import './TasksTimeRow.scss';
+
+const TasksTimeRow = ({ time, updateTime }) => (
+  <Row className="tasks-time-row">
+    <span className="time-label">{__('With focus on last')}</span>
+    <TimeDropDown
+      id="tasks-dashboard-time-period-dropdown"
+      selectedTime={time}
+      onChange={updateTime}
+    />
+  </Row>
+);
+
+TasksTimeRow.propTypes = {
+  time: timePropType,
+  updateTime: PropTypes.func,
+};
+
+TasksTimeRow.defaultProps = {
+  time: TASKS_DASHBOARD_AVAILABLE_TIMES.H24,
+  updateTime: noop,
+};
+
+export default TasksTimeRow;

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/TasksTimeRow.scss

@@ -0,0 +1,11 @@
+.tasks-time-row {
+  margin: 0;
+  padding: 0 10px;
+
+  .time-label {
+    font-size: 130%;
+    font-weight: bold;
+    margin-right: 10px;
+    vertical-align: middle;
+  }
+}

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/TasksTimeRow.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { withCardsDecorator } from '../../../../../stories/decorators';
+
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../TasksDashboardConstants';
+import TasksTimeRow from './TasksTimeRow';
+
+storiesOf('TasksDashboard/TasksTimeRow', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withCardsDecorator)
+  .add('TasksTimeRow', () => (
+    <TasksTimeRow
+      time={select(
+        'time',
+        TASKS_DASHBOARD_AVAILABLE_TIMES,
+        TASKS_DASHBOARD_AVAILABLE_TIMES.H24
+      )}
+      updateTime={action('updateTime')}
+    />
+  ));

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/TasksTimeRow.test.js

@@ -0,0 +1,15 @@
+import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../TasksDashboardConstants';
+import TasksTimeRow from './TasksTimeRow';
+
+const fixtures = {
+  'render with minimal props': {},
+  'render with props': {
+    time: TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK,
+    updateTime: jest.fn(),
+  },
+};
+
+describe('TasksTimeRow', () =>
+  testComponentSnapshotsWithFixtures(TasksTimeRow, fixtures));

data/webpack/ForemanTasks/Components/TasksDashboard/Components/TasksTimeRow/__snapshots__/TasksTimeRow.test.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TasksTimeRow render with minimal props 1`] = `
+<Row
+  bsClass="row"
+  className="tasks-time-row"
+  componentClass="div"
+>
+  <span
+    className="time-label"
+  >
+    With focus on last
+  </span>
+  <TimeDropDown
+    className=""
+    id="tasks-dashboard-time-period-dropdown"
+    onChange={[Function]}
+    selectedTime="H24"
+  />
+</Row>
+`;
+
+exports[`TasksTimeRow render with props 1`] = `
+<Row
+  bsClass="row"
+  className="tasks-time-row"
+  componentClass="div"
+>
+  <span
+    className="time-label"
+  >
+    With focus on last
+  </span>
+  <TimeDropDown
+    className=""
+    id="tasks-dashboard-time-period-dropdown"
+    onChange={[MockFunction]}
+    selectedTime="WEEK"
+  />
+</Row>
+`;