foreman-tasks 1.0.0 → 1.0.1

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

@@ -1,22 +1,21 @@
 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 { object, action } from '@theforeman/stories';
 
 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')}
-    />
-  ));
+export default {
+  title: 'TasksDashboard/TasksLabelsRow',
+  component: TasksLabelsRow,
+};
+
+export const Basic = () => (
+  <TasksLabelsRow
+    query={object('query', {
+      state: 'running',
+      mode: 'last',
+      time: TASKS_DASHBOARD_AVAILABLE_TIMES.H24,
+    })}
+    updateQuery={action('updateQuery')}
+  />
+);

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
-import { shallow } from 'enzyme';
+import { testComponentSnapshotsWithFixtures, shallow } from '@theforeman/test';
 
 import { getQueryKeyText, getQueryValueText } from '../../TasksDashboardHelper';
 import TasksLabelsRow from './TasksLabelsRow';

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

@@ -0,0 +1,57 @@
+import { Meta, Story, Preview, Props, action } from '@theforeman/stories';
+
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../../../TasksDashboardConstants';
+import TimeDropDown from './TimeDropDown';
+
+<Meta
+  title="TasksDashboard/TasksTimeRow/TimeDropDown"
+  component={TimeDropDown}
+/>
+
+# TimeDropDown
+
+Render a dropdown with the available dashboard times to render.
+
+<Props of={TimeDropDown} />
+
+The available-times defined as a constant at `Components/TasksDashboard/TasksDashboardConstants.js`:
+
+```js
+import { TASKS_DASHBOARD_AVAILABLE_TIMES } from './Components/TasksDashboard/TasksDashboardConstants';
+```
+
+To set the current selected time, set the `selectedTime` prop to `TASKS_DASHBOARD_AVAILABLE_TIMES.H24`.
+
+<Preview>
+  <Story name="24 hours">
+    <TimeDropDown
+      id="time-period-dropdown"
+      selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.H24}
+      onChange={action('onChange')}
+    />
+  </Story>
+</Preview>
+
+To set the current selected time, set the `selectedTime` prop to `TASKS_DASHBOARD_AVAILABLE_TIMES.H12`.
+
+<Preview>
+  <Story name="12 hours">
+    <TimeDropDown
+      id="time-period-dropdown"
+      selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.H12}
+      onChange={action('onChange')}
+    />
+  </Story>
+</Preview>
+
+To set the current selected time, set the `selectedTime` prop to `TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK`.
+
+<Preview>
+  <Story name="week">
+    <TimeDropDown
+      id="time-period-dropdown"
+      selectedTime={TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK}
+      onChange={action('onChange')}
+    />
+  </Story>
+</Preview>

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 
 import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../../../TasksDashboardConstants';
 import TimeDropDown from './TimeDropDown';

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

@@ -1,22 +1,40 @@
-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';
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useState } from 'react';
+import { select, action } from '@theforeman/stories';
 
 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')}
-    />
-  ));
+export default {
+  title: 'TasksDashboard/TasksTimeRow',
+  component: TasksTimeRow,
+};
+
+export const withState = () => {
+  const [time, updateTime] = useState(TASKS_DASHBOARD_AVAILABLE_TIMES.H24);
+
+  return <TasksTimeRow time={time} updateTime={updateTime} />;
+};
+
+export const withKnobs = () => (
+  <TasksTimeRow
+    time={select(
+      'time',
+      TASKS_DASHBOARD_AVAILABLE_TIMES,
+      TASKS_DASHBOARD_AVAILABLE_TIMES.H24
+    )}
+    updateTime={action('updateTime')}
+  />
+);
+
+export const with24Hours = () => (
+  <TasksTimeRow time={TASKS_DASHBOARD_AVAILABLE_TIMES.H24} />
+);
+
+export const with12Hours = () => (
+  <TasksTimeRow time={TASKS_DASHBOARD_AVAILABLE_TIMES.H12} />
+);
+
+export const withWeek = () => (
+  <TasksTimeRow time={TASKS_DASHBOARD_AVAILABLE_TIMES.WEEK} />
+);

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 
 import { TASKS_DASHBOARD_AVAILABLE_TIMES } from '../../TasksDashboardConstants';
 import TasksTimeRow from './TasksTimeRow';

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

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 
 import TasksDashboard from '../TasksDashboard';
 

data/webpack/ForemanTasks/Components/TasksDashboard/__tests__/TasksDashboardActions.test.js

@@ -1,4 +1,4 @@
-import { testActionSnapshotWithFixtures } from 'react-redux-test-utils';
+import { testActionSnapshotWithFixtures } from '@theforeman/test';
 import API from 'foremanReact/API';
 import { timeToHoursNumber } from '../TasksDashboardHelper';
 import {

data/webpack/ForemanTasks/Components/TasksDashboard/__tests__/TasksDashboardReducer.test.js

@@ -1,4 +1,4 @@
-import { testReducerSnapshotWithFixtures } from 'react-redux-test-utils';
+import { testReducerSnapshotWithFixtures } from '@theforeman/test';
 
 import {
   FOREMAN_TASKS_DASHBOARD_INIT,

data/webpack/ForemanTasks/Components/TasksDashboard/__tests__/TasksDashboardSelectors.test.js

@@ -1,4 +1,4 @@
-import { testSelectorsSnapshotWithFixtures } from 'react-redux-test-utils';
+import { testSelectorsSnapshotWithFixtures } from '@theforeman/test';
 import {
   selectTasksDashboard,
   selectTime,

data/webpack/ForemanTasks/Components/TasksTable/Components/CancelConfirm.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { Button } from 'patternfly-react';
+import ForemanModal from 'foremanReact/components/ForemanModal';
+import {
+  CANCEL_CONFIRM_MODAL_ID,
+  RESUME_CONFIRM_MODAL_ID,
+  CANCEL_SELECTED_CONFIRM_MODAL_ID,
+  RESUME_SELECTED_CONFIRM_MODAL_ID,
+} from '../TasksTableConstants';
+
+export const CancelConfirm = ({ closeModal, action, selectedRowsLen, id }) => (
+  <ForemanModal title={__('Cancel Selected Tasks')} id={id}>
+    <ForemanModal.Header />
+    {sprintf(
+      __(
+        `This will cancel %s task(s), putting them in the stopped state. Are you sure?`
+      ),
+      selectedRowsLen
+    )}
+    <ForemanModal.Footer>
+      <Button onClick={closeModal}>{__('No')}</Button>
+      <Button
+        bsStyle="primary"
+        onClick={() => {
+          action();
+          closeModal();
+        }}
+      >
+        {__('Yes')}
+      </Button>
+    </ForemanModal.Footer>
+  </ForemanModal>
+);
+
+CancelConfirm.propTypes = {
+  closeModal: PropTypes.func.isRequired,
+  selectedRowsLen: PropTypes.number.isRequired,
+  action: PropTypes.func,
+  id: PropTypes.oneOf([
+    CANCEL_CONFIRM_MODAL_ID,
+    RESUME_CONFIRM_MODAL_ID,
+    CANCEL_SELECTED_CONFIRM_MODAL_ID,
+    RESUME_SELECTED_CONFIRM_MODAL_ID,
+  ]).isRequired,
+};
+
+CancelConfirm.defaultProps = {
+  action: () => null,
+};
+
+export default CancelConfirm;

data/webpack/ForemanTasks/Components/TasksTable/Components/ConfirmationModals.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  CANCEL_CONFIRM_MODAL_ID,
+  RESUME_CONFIRM_MODAL_ID,
+  CANCEL_SELECTED_CONFIRM_MODAL_ID,
+  RESUME_SELECTED_CONFIRM_MODAL_ID,
+} from '../TasksTableConstants';
+import { CancelConfirm } from './CancelConfirm';
+import { ResumeConfirm } from './ResumeConfirm';
+
+export const ConfirmationModals = ({
+  modalProps,
+  tasksActions,
+  selectedRowsLen,
+}) => (
+  <React.Fragment>
+    <CancelConfirm
+      closeModal={modalProps.cancelModal.setModalClosed}
+      action={tasksActions.cancelTask}
+      selectedRowsLen={1}
+      id={CANCEL_CONFIRM_MODAL_ID}
+    />
+    <ResumeConfirm
+      closeModal={modalProps.resumeModal.setModalClosed}
+      action={tasksActions.resumeTask}
+      selectedRowsLen={1}
+      id={RESUME_CONFIRM_MODAL_ID}
+    />
+    <CancelConfirm
+      closeModal={modalProps.cancelSelectedModal.setModalClosed}
+      action={tasksActions.cancelSelectedTasks}
+      selectedRowsLen={selectedRowsLen}
+      id={CANCEL_SELECTED_CONFIRM_MODAL_ID}
+    />
+    <ResumeConfirm
+      closeModal={modalProps.resumeSelectedModal.setModalClosed}
+      action={tasksActions.resumeSelectedTasks}
+      selectedRowsLen={selectedRowsLen}
+      id={RESUME_SELECTED_CONFIRM_MODAL_ID}
+    />
+  </React.Fragment>
+);
+
+ConfirmationModals.propTypes = {
+  modalProps: PropTypes.object.isRequired,
+  selectedRowsLen: PropTypes.number.isRequired,
+  tasksActions: PropTypes.shape({
+    cancelTask: PropTypes.func,
+    resumeTask: PropTypes.func,
+    cancelSelectedTasks: PropTypes.func,
+    resumeSelectedTasks: PropTypes.func,
+  }).isRequired,
+};
+
+export default ConfirmationModals;

data/webpack/ForemanTasks/Components/TasksTable/Components/ResumeConfirm.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { Button } from 'patternfly-react';
+import ForemanModal from 'foremanReact/components/ForemanModal';
+import {
+  CANCEL_CONFIRM_MODAL_ID,
+  RESUME_CONFIRM_MODAL_ID,
+  CANCEL_SELECTED_CONFIRM_MODAL_ID,
+  RESUME_SELECTED_CONFIRM_MODAL_ID,
+} from '../TasksTableConstants';
+
+export const ResumeConfirm = ({ closeModal, action, selectedRowsLen, id }) => (
+  <ForemanModal title={__('Resume Selected Tasks')} id={id}>
+    {sprintf(
+      __(
+        `This will resume %s task(s), putting them in the running state. Are you sure?`
+      ),
+      selectedRowsLen
+    )}
+    <ForemanModal.Footer>
+      <Button onClick={closeModal}>{__('No')}</Button>
+      <Button
+        bsStyle="primary"
+        onClick={() => {
+          action();
+          closeModal();
+        }}
+      >
+        {__('Yes')}
+      </Button>
+    </ForemanModal.Footer>
+  </ForemanModal>
+);
+
+ResumeConfirm.propTypes = {
+  closeModal: PropTypes.func.isRequired,
+  selectedRowsLen: PropTypes.number.isRequired,
+  action: PropTypes.func,
+  id: PropTypes.oneOf([
+    CANCEL_CONFIRM_MODAL_ID,
+    RESUME_CONFIRM_MODAL_ID,
+    CANCEL_SELECTED_CONFIRM_MODAL_ID,
+    RESUME_SELECTED_CONFIRM_MODAL_ID,
+  ]).isRequired,
+};
+
+ResumeConfirm.defaultProps = {
+  action: () => null,
+};
+
+export default ResumeConfirm;

data/webpack/ForemanTasks/Components/TasksTable/Components/__test__/ActionSelectButton.test.js

@@ -1,4 +1,4 @@
-import { testComponentSnapshotsWithFixtures } from 'react-redux-test-utils';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
 
 import { ActionSelectButton } from '../ActionSelectButton';
 

data/webpack/ForemanTasks/Components/TasksTable/Components/__test__/CancelConfirm.test.js

@@ -0,0 +1,26 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import { CancelConfirm } from '../CancelConfirm';
+import {
+  CANCEL_CONFIRM_MODAL_ID,
+  CANCEL_SELECTED_CONFIRM_MODAL_ID,
+} from '../../TasksTableConstants';
+
+const baseProps = {
+  closeModal: () => null,
+  selectedRowsLen: 1,
+  action: () => null,
+};
+const fixtures = {
+  'renders CANCEL modal': {
+    ...baseProps,
+    id: CANCEL_CONFIRM_MODAL_ID,
+  },
+  'renders CANCEL_SELECTED modal': {
+    ...baseProps,
+    id: CANCEL_SELECTED_CONFIRM_MODAL_ID,
+  },
+};
+
+describe('CancelConfirm', () =>
+  testComponentSnapshotsWithFixtures(CancelConfirm, fixtures));

data/webpack/ForemanTasks/Components/TasksTable/Components/__test__/ConfirmationModals.test.js

@@ -0,0 +1,24 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import { ConfirmationModals } from '../ConfirmationModals';
+
+const fixtures = {
+  'renders ConfirmationModals': {
+    modalProps: {
+      cancelSelectedModal: { setModalClosed: jest.fn() },
+      resumeSelectedModal: { setModalClosed: jest.fn() },
+      cancelModal: { setModalClosed: jest.fn() },
+      resumeModal: { setModalClosed: jest.fn() },
+    },
+    selectedRowsLen: 7,
+    tasksActions: {
+      cancelTask: jest.fn(),
+      resumeTask: jest.fn(),
+      cancelSelectedTasks: jest.fn(),
+      resumeSelectedTasks: jest.fn(),
+    },
+  },
+};
+
+describe('ConfirmationModals', () =>
+  testComponentSnapshotsWithFixtures(ConfirmationModals, fixtures));

data/webpack/ForemanTasks/Components/TasksTable/Components/__test__/ResumeConfirm.test.js

@@ -0,0 +1,26 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+
+import { ResumeConfirm } from '../ResumeConfirm';
+import {
+  RESUME_CONFIRM_MODAL_ID,
+  RESUME_SELECTED_CONFIRM_MODAL_ID,
+} from '../../TasksTableConstants';
+
+const baseProps = {
+  closeModal: () => null,
+  selectedRowsLen: 3,
+  action: () => null,
+};
+const fixtures = {
+  'renders RESUME modal': {
+    ...baseProps,
+    id: RESUME_CONFIRM_MODAL_ID,
+  },
+  'renders RESUME_SELECTED modal': {
+    ...baseProps,
+    id: RESUME_SELECTED_CONFIRM_MODAL_ID,
+  },
+};
+
+describe('ResumeConfirm', () =>
+  testComponentSnapshotsWithFixtures(ResumeConfirm, fixtures));