Providing standard navigation for pipeline pages.

src/components/layout/Navigation/Navigation.js

@@ -10,7 +10,8 @@ import ExercisesNameContainer from '../../../containers/ExercisesNameContainer';
 import GroupsNameContainer from '../../../containers/GroupsNameContainer';
 import ShadowAssignmentNameContainer from '../../../containers/ShadowAssignmentNameContainer';
 import UsersNameContainer from '../../../containers/UsersNameContainer';
-import { AssignmentIcon, ExerciseIcon, GroupIcon, ShadowAssignmentIcon } from '../../icons';
+import PipelineNameContainer from '../../../containers/PipelineNameContainer';
+import { AssignmentIcon, ExerciseIcon, GroupIcon, PipelineIcon, ShadowAssignmentIcon } from '../../icons';
 
 import styles from './Navigation.less';
 
@@ -49,6 +50,7 @@ const Navigation = ({
   exerciseId = null,
   assignmentId = null,
   shadowId = null,
+  pipelineId = null,
   userId = null,
   emphasizeUser = false,
   links,
@@ -135,6 +137,21 @@ const Navigation = ({
             </span>
           )}
 
+          {pipelineId && (
+            <span>
+              <OverlayTrigger
+                placement="bottom"
+                overlay={
+                  <Tooltip id="pipelineIconTooltip">
+                    <FormattedMessage id="app.navigation.pipeline" defaultMessage="Pipeline" />
+                  </Tooltip>
+                }>
+                <PipelineIcon gapRight className="text-muted" />
+              </OverlayTrigger>
+              <PipelineNameContainer pipelineId={pipelineId} noLink />
+            </span>
+          )}
+
           {userId && !emphasizeUser && (
             <UsersNameContainer
               userId={userId}
@@ -167,6 +184,7 @@ Navigation.propTypes = {
   exerciseId: PropTypes.string,
   assignmentId: PropTypes.string,
   shadowId: PropTypes.string,
+  pipelineId: PropTypes.string,
   userId: PropTypes.string,
   emphasizeUser: PropTypes.bool,
   links: PropTypes.array,

src/components/layout/Navigation/PipelineNavigation.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import Navigation from './Navigation';
+import withLinks from '../../../helpers/withLinks';
+import { PipelineIcon, EditIcon } from '../../icons';
+
+const PipelineNavigation = ({
+  pipelineId,
+  canViewDetail = false,
+  canEdit = false,
+  links: { PIPELINE_URI_FACTORY, PIPELINE_EDIT_URI_FACTORY },
+}) => (
+  <Navigation
+    pipelineId={pipelineId}
+    links={[
+      canViewDetail && {
+        caption: <FormattedMessage id="app.navigation.pipeline" defaultMessage="Pipeline" />,
+        link: PIPELINE_URI_FACTORY(pipelineId),
+        icon: <PipelineIcon gapRight />,
+      },
+      canEdit && {
+        caption: <FormattedMessage id="app.navigation.edit" defaultMessage="Edit" />,
+        link: PIPELINE_EDIT_URI_FACTORY(pipelineId),
+        icon: <EditIcon gapRight />,
+      },
+    ]}
+  />
+);
+
+PipelineNavigation.propTypes = {
+  pipelineId: PropTypes.string.isRequired,
+  canViewDetail: PropTypes.bool,
+  canEdit: PropTypes.bool,
+  isLoggedInUser: PropTypes.bool,
+  links: PropTypes.object.isRequired,
+};
+
+export default withLinks(PipelineNavigation);

src/components/layout/Navigation/index.js

@@ -2,6 +2,7 @@ export { default as AssignmentNavigation } from './AssignmentNavigation';
 export { default as AssignmentSolutionNavigation } from './AssignmentSolutionNavigation';
 export { default as ExerciseNavigation } from './ExerciseNavigation';
 export { default as GroupNavigation } from './GroupNavigation';
+export { default as PipelineNavigation } from './PipelineNavigation';
 export { default as ReferenceSolutionNavigation } from './ReferenceSolutionNavigation';
 export { default as ShadowAssignmentNavigation } from './ShadowAssignmentNavigation';
 export { default as UserNavigation } from './UserNavigation';

src/containers/PipelineNameContainer/PipelineNameContainer.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { fetchPipelineIfNeeded } from '../../redux/modules/pipelines';
+import { getPipeline } from '../../redux/selectors/pipelines';
+import ResourceRenderer from '../../components/helpers/ResourceRenderer';
+import { LoadingIcon } from '../../components/icons';
+import withLinks from '../../helpers/withLinks';
+
+class PipelineNameContainer extends Component {
+  componentDidMount = () => this.props.loadPipelineIfNeeded();
+
+  componentDidUpdate(prevProps) {
+    if (this.props.pipelineId !== prevProps.pipelineId) {
+      this.props.loadPipelineIfNeeded();
+    }
+  }
+
+  render() {
+    const {
+      pipelineId,
+      pipeline,
+      noLink = false,
+      links: { PIPELINE_URI_FACTORY },
+    } = this.props;
+    return (
+      <ResourceRenderer
+        resource={pipeline}
+        loading={
+          <>
+            <LoadingIcon gapRight />
+            <FormattedMessage id="generic.loading" defaultMessage="Loading..." />
+          </>
+        }>
+        {pipeline =>
+          noLink ? <>{pipeline.name}</> : <Link to={PIPELINE_URI_FACTORY(pipelineId)}>{pipeline.name}</Link>
+        }
+      </ResourceRenderer>
+    );
+  }
+}
+
+PipelineNameContainer.propTypes = {
+  pipelineId: PropTypes.string.isRequired,
+  pipeline: ImmutablePropTypes.map,
+  noLink: PropTypes.bool,
+  loadPipelineIfNeeded: PropTypes.func.isRequired,
+  links: PropTypes.object.isRequired,
+};
+
+export default withLinks(
+  connect(
+    (state, { pipelineId }) => ({
+      pipeline: getPipeline(pipelineId)(state),
+    }),
+    (dispatch, { pipelineId }) => ({
+      loadPipelineIfNeeded: () => dispatch(fetchPipelineIfNeeded(pipelineId)),
+    })
+  )(PipelineNameContainer)
+);

src/containers/PipelineNameContainer/index.js

@@ -0,0 +1,2 @@
+import PipelineNameContainer from './PipelineNameContainer';
+export default PipelineNameContainer;

src/locales/cs.json

@@ -1073,6 +1073,7 @@
   "app.navigation.group": "Skupina",
   "app.navigation.groupAssignments": "Úlohy ve skupině",
   "app.navigation.groupInfo": "Info skupiny",
+  "app.navigation.pipeline": "Pipeline",
   "app.navigation.referenceSolution": "Referenční řešení",
   "app.navigation.shadowAssignment": "Stínová úloha",
   "app.navigation.solution": "Řešení",
@@ -1102,7 +1103,6 @@
   "app.passwordStrength.somewhatOk": "Šlo by to i lépe.",
   "app.passwordStrength.unknown": "...",
   "app.passwordStrength.worst": "Nevyhovující",
-  "app.pipeline.editSettings": "Upravit pipeline",
   "app.pipeline.exercises": "Úlohy:",
   "app.pipeline.failedDetail": "Načítání detailů pipeline selhalo. Ujistěte se prosím, že jste připojeni k Internetu a zkuste to později.",
   "app.pipeline.loadingDetail": "Načítám podrobnosti pipeline",

src/locales/en.json

@@ -1073,6 +1073,7 @@
   "app.navigation.group": "Group",
   "app.navigation.groupAssignments": "Group Assignments",
   "app.navigation.groupInfo": "Group Info",
+  "app.navigation.pipeline": "Pipeline",
   "app.navigation.referenceSolution": "Reference Solution",
   "app.navigation.shadowAssignment": "Shadow Assignment",
   "app.navigation.solution": "Solution",
@@ -1102,7 +1103,6 @@
   "app.passwordStrength.somewhatOk": "You can do better.",
   "app.passwordStrength.unknown": "...",
   "app.passwordStrength.worst": "Unsatisfactory",
-  "app.pipeline.editSettings": "Edit pipeline",
   "app.pipeline.exercises": "Exercises:",
   "app.pipeline.failedDetail": "Loading the details of the pipeline failed. Please make sure you are connected to the Internet and try again later.",
   "app.pipeline.loadingDetail": "Loading pipeline detail",

src/locales/whitelist_cs.json

@@ -112,6 +112,7 @@
   "app.homepage.githubLink",
   "app.homepage.title",
   "app.instancesTable.admin",
+  "app.navigation.pipeline",
   "app.passwordStrength.ok",
   "app.passwordStrength.unknown",
   "app.pipelines.boxesTable.port",

src/pages/EditPipeline/EditPipeline.js

@@ -8,6 +8,7 @@ import { reset } from 'redux-form';
 import { defaultMemoize } from 'reselect';
 
 import Page from '../../components/layout/Page';
+import { PipelineNavigation } from '../../components/layout/Navigation';
 import Box from '../../components/widgets/Box';
 import Callout from '../../components/widgets/Callout';
 import EditPipelineForm from '../../components/forms/EditPipelineForm';
@@ -26,7 +27,7 @@ import { runtimeEnvironmentsSelector } from '../../redux/selectors/runtimeEnviro
 import { isLoggedAsSuperAdmin } from '../../redux/selectors/users';
 
 import withLinks from '../../helpers/withLinks';
-import { arrayToObject } from '../../helpers/common';
+import { arrayToObject, hasPermissions } from '../../helpers/common';
 
 // convert pipeline data into initial structure for pipeline edit metadata form
 const perpareInitialPipelineData = ({ name, description, version, parameters, author }) => ({
@@ -114,7 +115,13 @@ class EditPipeline extends Component {
         icon={<EditIcon />}
         title={<FormattedMessage id="app.editPipeline.title" defaultMessage="Change Pipeline Settings and Contents" />}>
         {pipeline => (
-          <div>
+          <>
+            <PipelineNavigation
+              pipelineId={pipeline.id}
+              canViewDetail={hasPermissions(pipeline, 'viewDetail')}
+              canEdit={hasPermissions(pipeline, 'update')}
+            />
+
             <Row>
               <Col lg={12}>
                 <Callout variant="warning">
@@ -192,7 +199,7 @@ class EditPipeline extends Component {
                 </Box>
               </Col>
             </Row>
-          </div>
+          </>
         )}
       </Page>
     );