katello 3.8.1 → 3.9.0.rc1

data/webpack/scenes/ModuleStreams/Details/ModuleStreamDetails.js

@@ -0,0 +1,147 @@
+import React, { Component } from 'react';
+import { Nav, NavItem, TabPane, TabContent, TabContainer, Grid, Row, Col } from 'patternfly-react';
+import BreadcrumbsBar from 'foremanReact/components/BreadcrumbBar';
+import { PropTypes } from 'prop-types';
+import { LoadingState } from '../../../move_to_pf/LoadingState';
+import api from '../../../services/api';
+import ModuleStreamDetailInfo from './ModuleStreamDetailInfo';
+import ModuleStreamDetailRepositories from './Repositories/ModuleStreamDetailRepositories';
+import ModuleStreamDetailArtifacts from './ModuleStreamDetailArtifacts';
+import ModuleStreamDetailProfiles from './Profiles/ModuleStreamDetailProfiles';
+
+class ModuleStreamDetails extends Component {
+  componentDidMount() {
+    this.updateModuleStream();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { match: { params: prevRouterParams } } = this.props;
+    const { match: { params: currentRouterParams } } = prevProps;
+    if (prevRouterParams.id && (prevRouterParams.id !== currentRouterParams.id)) {
+      this.updateModuleStream();
+    }
+  }
+
+  updateModuleStream = () => {
+    const moduleStreamId = parseInt(this.props.match.params.id, 10);
+    this.props.loadModuleStreamDetails(moduleStreamId);
+  };
+
+  handleBreadcrumbSwitcherItem = (e, url) => {
+    this.props.history.push(url);
+    e.preventDefault();
+  };
+
+  render() {
+    const { moduleStreamDetails } = this.props;
+    const {
+      loading, name, stream, profiles, repositories, artifacts,
+    } = moduleStreamDetails;
+
+    const resource = {
+      nameField: 'name',
+      resourceUrl: api.getApiUrl('/module_streams'),
+      switcherItemUrl: '/module_streams/:id',
+    };
+
+    return (
+      <div>
+        {!loading && <BreadcrumbsBar
+          onSwitcherItemClick={(e, url) => this.handleBreadcrumbSwitcherItem(e, url)}
+          data={{
+            isSwitchable: true,
+            breadcrumbItems: [
+              {
+                caption: __('Module Streams'),
+                onClick: () =>
+                  this.props.history.push('/module_streams'),
+              },
+              {
+                caption: `${name} ${stream}`,
+              },
+            ],
+            resource,
+          }}
+        />}
+
+        <LoadingState
+          loading={loading}
+          loadingText={__('Loading')}
+        >
+          <TabContainer id="module-stream-tabs-container" defaultActiveKey={1}>
+            <Grid bsClass="container-fluid">
+              <Row>
+                <Col sm={12}>
+                  <Nav bsClass="nav nav-tabs">
+                    <NavItem eventKey={1}>
+                      <div>{__('Details')}</div>
+                    </NavItem>
+                    <NavItem eventKey={2}>
+                      <div>{__('Repositories')}</div>
+                    </NavItem>
+                    <NavItem eventKey={3}>
+                      <div>{__('Profiles')}</div>
+                    </NavItem>
+                    <NavItem eventKey={4}>
+                      <div>{__('Artifacts')}</div>
+                    </NavItem>
+                  </Nav>
+                </Col>
+              </Row>
+              <TabContent animation={false}>
+                <TabPane eventKey={1}>
+                  <Row>
+                    <Col sm={12}>
+                      <ModuleStreamDetailInfo moduleStreamDetails={moduleStreamDetails} />
+                    </Col>
+                  </Row>
+                </TabPane>
+                <TabPane eventKey={2}>
+                  <Row>
+                    <Col sm={12}>
+                      {repositories && repositories.length ?
+                        <ModuleStreamDetailRepositories repositories={repositories} /> :
+                        __('No repositories to show')}
+                    </Col>
+                  </Row>
+                </TabPane>
+                <TabPane eventKey={3}>
+                  <Row>
+                    <Col sm={12}>
+                      {profiles && profiles.length ?
+                        <ModuleStreamDetailProfiles profiles={profiles} /> :
+                        __('No profiles to show')}
+                    </Col>
+                  </Row>
+                </TabPane>
+                <TabPane eventKey={4}>
+                  <Row>
+                    <Col sm={12}>
+                      {artifacts && artifacts.length ?
+                        <ModuleStreamDetailArtifacts artifacts={artifacts} /> :
+                        __('No artifacts to show')}
+                    </Col>
+                  </Row>
+                </TabPane>
+              </TabContent>
+            </Grid>
+          </TabContainer>
+        </LoadingState>
+      </div>
+    );
+  }
+}
+
+ModuleStreamDetails.propTypes = {
+  loadModuleStreamDetails: PropTypes.func.isRequired,
+  history: PropTypes.shape({ push: PropTypes.func.isRequired }).isRequired,
+  location: PropTypes.shape({}).isRequired,
+  match: PropTypes.shape({
+    params: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+    }).isRequired,
+  }).isRequired,
+  moduleStreamDetails: PropTypes.shape({}).isRequired,
+};
+
+export default ModuleStreamDetails;

data/webpack/scenes/ModuleStreams/Details/ModuleStreamDetailsActions.js

@@ -0,0 +1,25 @@
+import api from '../../../services/api';
+import {
+  MODULE_STREAM_DETAILS_REQUEST,
+  MODULE_STREAM_DETAILS_SUCCESS,
+  MODULE_STREAM_DETAILS_FAILURE,
+} from './ModuleStreamDetailsConstants';
+import { apiError } from '../../../move_to_foreman/common/helpers.js';
+
+export const loadModuleStreamDetails = moduleStreamId => (dispatch) => {
+  dispatch({ type: MODULE_STREAM_DETAILS_REQUEST });
+
+  return api
+    .get(`/module_streams/${moduleStreamId}`)
+    .then(({ data }) => {
+      dispatch({
+        type: MODULE_STREAM_DETAILS_SUCCESS,
+        response: data,
+      });
+    })
+    .catch((result) => {
+      dispatch(apiError(MODULE_STREAM_DETAILS_FAILURE, result));
+    });
+};
+
+export default loadModuleStreamDetails;

data/webpack/scenes/ModuleStreams/Details/ModuleStreamDetailsConstants.js

@@ -0,0 +1,3 @@
+export const MODULE_STREAM_DETAILS_REQUEST = 'MODULE_STREAM_DETAILS_REQUEST';
+export const MODULE_STREAM_DETAILS_SUCCESS = 'MODULE_STREAM_DETAILS_SUCCESS';
+export const MODULE_STREAM_DETAILS_FAILURE = 'MODULE_STREAM_DETAILS_FAILURE';

data/webpack/scenes/ModuleStreams/Details/ModuleStreamDetailsReducer.js

@@ -0,0 +1,33 @@
+import { initialApiState } from '../../../services/api';
+import {
+  MODULE_STREAM_DETAILS_REQUEST,
+  MODULE_STREAM_DETAILS_SUCCESS,
+  MODULE_STREAM_DETAILS_FAILURE,
+} from './ModuleStreamDetailsConstants';
+
+export default (state = initialApiState, action) => {
+  switch (action.type) {
+    case MODULE_STREAM_DETAILS_REQUEST: {
+      return state.set('loading', true);
+    }
+
+    case MODULE_STREAM_DETAILS_SUCCESS: {
+      const moduleStreamDetails = action.response;
+
+      return state.merge({
+        ...moduleStreamDetails,
+        loading: false,
+      });
+    }
+
+    case MODULE_STREAM_DETAILS_FAILURE: {
+      return state.merge({
+        error: action.payload.message,
+        loading: false,
+      });
+    }
+
+    default:
+      return state;
+  }
+};

data/webpack/scenes/ModuleStreams/Details/Profiles/ModuleStreamDetailProfiles.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'patternfly-react';
+import TableSchema from './TableSchema';
+
+const ModuleStreamDetailProfiles = ({ profiles }) => (
+  <div>
+    <Table.PfProvider columns={TableSchema}>
+      <Table.Header />
+      <Table.Body rows={profiles} rowKey="id" />
+    </Table.PfProvider>
+  </div>
+);
+
+ModuleStreamDetailProfiles.propTypes = {
+  profiles: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+};
+
+export default ModuleStreamDetailProfiles;

data/webpack/scenes/ModuleStreams/Details/Profiles/ProfileRpmsCellFormatter.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from 'patternfly-react';
+
+import './ProfileRpmsCellFormatter.scss';
+
+class ProfileRpmsCellFormatter extends Component {
+  constructor(props) {
+    super(props);
+    this.minAmount = 10;
+    this.state = {
+      expanded: false,
+      showAmount: this.minAmount,
+    };
+  }
+
+  onClick = () => {
+    const { rpms } = this.props;
+
+    this.setState(state => ({
+      expanded: !state.expanded,
+      showAmount: !state.expanded ? rpms.length : this.minAmount,
+    }));
+  };
+
+  iconName = () => (this.state.expanded ? 'angle-down' : 'angle-right');
+
+  render() {
+    const { rpms } = this.props;
+    const largeList = rpms.length > this.minAmount;
+
+    return (
+      <td>
+        {largeList && <Icon
+          className="expand-profile-rpms"
+          onClick={this.onClick}
+          name={this.iconName()}
+        />}
+        {rpms
+          .slice(0, this.state.showAmount)
+          .map(rpm => rpm.name)
+          .join(', ')}
+        {largeList && !this.state.expanded && ', ...'}
+      </td>
+    );
+  }
+}
+
+ProfileRpmsCellFormatter.propTypes = {
+  rpms: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+};
+
+export default ProfileRpmsCellFormatter;

data/webpack/scenes/ModuleStreams/Details/Profiles/ProfileRpmsCellFormatter.scss

@@ -0,0 +1,4 @@
+.expand-profile-rpms {
+  margin-right: 5px;
+  cursor: pointer;
+}

data/webpack/scenes/ModuleStreams/Details/Profiles/TableSchema.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {
+  headerFormatter,
+  cellFormatter,
+} from '../../../../move_to_foreman/components/common/table';
+import ProfileRpmsCellFormatter from './ProfileRpmsCellFormatter';
+
+const TableSchema = [
+  {
+    property: 'name',
+    header: {
+      label: __('Name'),
+      formatters: [headerFormatter],
+    },
+    cell: {
+      formatters: [cellFormatter],
+    },
+  },
+  {
+    property: 'rpms',
+    header: {
+      label: __('RPMs'),
+      formatters: [headerFormatter],
+    },
+    cell: {
+      formatters: [
+        (value, { rowData }) => (
+          <ProfileRpmsCellFormatter rpms={rowData.rpms} />
+        ),
+      ],
+    },
+  },
+];
+
+export default TableSchema;

data/webpack/scenes/ModuleStreams/Details/Profiles/__tests__/ModuleStreamDetailProfiles.test.js

@@ -0,0 +1,14 @@
+import ModuleStreamDetailProfiles from '../ModuleStreamDetailProfiles';
+import { testComponentSnapshotsWithFixtures } from '../../../../../move_to_pf/test-utils/testHelpers';
+import { details } from '../../__tests__/moduleStreamDetails.fixtures';
+
+const fixtures = {
+  'renders with profiles': {
+    profiles: details.profiles,
+  },
+};
+
+describe('Module stream detail profiles component', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(ModuleStreamDetailProfiles, fixtures));
+});

data/webpack/scenes/ModuleStreams/Details/Profiles/__tests__/ProfileRpmsCellFormatter.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import ProfileRpmCellFormatter from '../ProfileRpmsCellFormatter';
+import { details } from '../../__tests__/moduleStreamDetails.fixtures';
+
+jest.mock('../../../../../move_to_foreman/foreman_toast_notifications');
+
+describe('ProfileRpmCellFormatter', () => {
+  it('should render and expand on click', () => {
+    //  eslint-disable-next-line prefer-destructuring
+    const rpms = details.profiles[0].rpms;
+    const wrapper = shallow(<ProfileRpmCellFormatter
+      rpms={rpms}
+    />);
+
+    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.state('expanded')).toBeFalsy();
+    expect(wrapper.state('showAmount')).toBe(10);
+    wrapper.instance().onClick();
+    expect(wrapper.state('expanded')).toBeTruthy();
+    expect(wrapper.state('showAmount')).toBe(rpms.length);
+  });
+});

data/webpack/scenes/ModuleStreams/Details/Profiles/__tests__/__snapshots__/ModuleStreamDetailProfiles.test.js.snap

@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Module stream detail profiles component rendering renders with profiles 1`] = `
+<div>
+  <TablePfProvider
+    bordered={false}
+    className=""
+    columns={
+      Array [
+        Object {
+          "cell": Object {
+            "formatters": Array [
+              [Function],
+            ],
+          },
+          "header": Object {
+            "formatters": Array [
+              [Function],
+            ],
+            "label": "Name",
+          },
+          "property": "name",
+        },
+        Object {
+          "cell": Object {
+            "formatters": Array [
+              [Function],
+            ],
+          },
+          "header": Object {
+            "formatters": Array [
+              [Function],
+            ],
+            "label": "RPMs",
+          },
+          "property": "rpms",
+        },
+      ]
+    }
+    components={Object {}}
+    condensed={false}
+    dataTable={false}
+    hover={false}
+    inlineEdit={false}
+    striped={false}
+  >
+    <Header />
+    <Body
+      onRow={[Function]}
+      rowKey="id"
+      rows={
+        Array [
+          Object {
+            "id": 37,
+            "name": "default",
+            "rpms": Array [
+              Object {
+                "id": 108,
+                "name": "perl",
+              },
+              Object {
+                "id": 110,
+                "name": "foo",
+              },
+              Object {
+                "id": 111,
+                "name": "rpm_0",
+              },
+              Object {
+                "id": 112,
+                "name": "rpm_1",
+              },
+              Object {
+                "id": 113,
+                "name": "rpm_2",
+              },
+              Object {
+                "id": 114,
+                "name": "rpm_3",
+              },
+              Object {
+                "id": 115,
+                "name": "rpm_4",
+              },
+              Object {
+                "id": 116,
+                "name": "rpm_5",
+              },
+              Object {
+                "id": 117,
+                "name": "rpm_6",
+              },
+              Object {
+                "id": 118,
+                "name": "rpm_7",
+              },
+              Object {
+                "id": 119,
+                "name": "rpm_8",
+              },
+              Object {
+                "id": 120,
+                "name": "rpm_9",
+              },
+              Object {
+                "id": 121,
+                "name": "rpm_10",
+              },
+            ],
+          },
+          Object {
+            "id": 38,
+            "name": "minimal",
+            "rpms": Array [
+              Object {
+                "id": 84,
+                "name": "python2-avocado",
+              },
+            ],
+          },
+        ]
+      }
+    />
+  </TablePfProvider>
+</div>
+`;