Fixing pipeline fork function, adjusting pipeline detail page accordingly.

Author: krulis-martin

src/components/Exercises/ExerciseDetail/ExerciseDetail.js

@@ -11,7 +11,7 @@ import DifficultyIcon from '../DifficultyIcon';
 import ResourceRenderer from '../../helpers/ResourceRenderer';
 import withLinks from '../../../helpers/withLinks';
 import UsersNameContainer from '../../../containers/UsersNameContainer';
-import Icon, { SuccessOrFailureIcon, UserIcon, VisibleIcon, CodeIcon, TagIcon } from '../../icons';
+import Icon, { SuccessOrFailureIcon, UserIcon, VisibleIcon, CodeIcon, TagIcon, ForkIcon } from '../../icons';
 import { getLocalizedDescription } from '../../../helpers/localizedData';
 import { LocalizedExerciseName } from '../../helpers/LocalizedNames';
 import EnvironmentsList from '../../helpers/EnvironmentsList';
@@ -197,7 +197,7 @@ const ExerciseDetail = ({
         {forkedFrom && (
           <tr>
             <td className="text-center text-muted shrink-col em-padding-left em-padding-right">
-              <Icon icon="code-branch" />
+              <ForkIcon />
             </td>
             <th className="text-nowrap">
               <FormattedMessage id="app.exercise.forked" defaultMessage="Forked from" />:

src/components/Pipelines/ParametersList/ParametersList.js

@@ -48,7 +48,7 @@ const pipelineParameterMapping = parameter => {
 };
 
 const ParametersList = ({ parameters }) => (
-  <Table>
+  <Table className="my-0">
     <tbody>
       {Object.keys(parameters).map(parameterName => (
         <tr key={parameterName}>

src/components/Pipelines/PipelineDetail/PipelineDetail.js

@@ -3,80 +3,71 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Table } from 'react-bootstrap';
 
+import PipelineNameContainer from '../../../containers/PipelineNameContainer';
 import Box from '../../widgets/Box';
 import Markdown from '../../widgets/Markdown';
 import DateTime from '../../widgets/DateTime';
+import Explanation from '../../widgets/Explanation';
 import UsersNameContainer from '../../../containers/UsersNameContainer';
-import ExercisesNameContainer from '../../../containers/ExercisesNameContainer';
-import Icon, { UserIcon, CodeIcon } from '../../icons';
+import Icon, { UserIcon, CodeIcon, ForkIcon } from '../../icons';
 import EnvironmentsList from '../../helpers/EnvironmentsList';
 import Version from '../../widgets/Version/Version';
 import ParametersList from '../ParametersList/ParametersList';
 
 const PipelineDetail = ({
   author,
-  exercisesIds,
-  name,
   description = '',
   createdAt,
   updatedAt,
   version,
   runtimeEnvironments,
   parameters,
+  forkedFrom = null,
 }) => (
-  <Box title={name} noPadding unlimitedHeight>
-    <Table responsive size="sm">
+  <Box
+    title={<FormattedMessage id="app.pipeline.properties" defaultMessage="Pipeline properties" />}
+    noPadding
+    unlimitedHeight>
+    <Table responsive size="sm" className="mb-1">
       <tbody>
-        {Boolean(author) && (
-          <tr>
-            <td className="text-center shrink-col em-padding-left em-padding-right">
-              <UserIcon />
-            </td>
-            <th>
-              <FormattedMessage id="generic.author" defaultMessage="Author" />:
-            </th>
-            <td>
-              <UsersNameContainer userId={author} link />
-            </td>
-          </tr>
-        )}
-
         <tr>
-          <td className="text-center shrink-col em-padding-left em-padding-right">
-            <Icon icon={['far', 'file-alt']} />
+          <td className="text-center shrink-col px-2 text-muted">
+            <UserIcon />
           </td>
-          <th className="text-nowrap">
-            <FormattedMessage id="app.pipeline.title" defaultMessage="Pipeline Detail" />
+          <th>
+            <FormattedMessage id="generic.author" defaultMessage="Author" />:
           </th>
           <td>
-            <Markdown source={description} />
+            {author ? (
+              <UsersNameContainer userId={author} link />
+            ) : (
+              <i className="text-muted">
+                ReCodEx
+                <Explanation id="no-author">
+                  <FormattedMessage
+                    id="app.pipeline.noAuthorExplanation"
+                    defaultMessage="This is a system pipeline. There is no explicit author."
+                  />
+                </Explanation>
+              </i>
+            )}
           </td>
         </tr>
 
         <tr>
-          <td className="text-center shrink-col em-padding-left em-padding-right">
-            <Icon icon="puzzle-piece" />
+          <td className="text-center shrink-col px-2 text-muted">
+            <Icon icon={['far', 'file-alt']} />
           </td>
-          <th>
-            <FormattedMessage id="app.pipeline.exercises" defaultMessage="Exercises:" />
+          <th className="text-nowrap">
+            <FormattedMessage id="app.pipeline.description" defaultMessage="Description" />:
           </th>
           <td>
-            {exercisesIds.length !== 0 ? (
-              exercisesIds.map(exerciseId => (
-                <div key={exerciseId}>
-                  <ExercisesNameContainer exerciseId={exerciseId} />
-                </div>
-              ))
-            ) : (
-              <i>
-                <FormattedMessage id="app.pipeline.publicExercise" defaultMessage="Public" />
-              </i>
-            )}
+            <Markdown source={description} />
           </td>
         </tr>
 
         <tr>
-          <td className="text-center shrink-col em-padding-left em-padding-right">
+          <td className="text-center shrink-col px-2 text-muted">
             <CodeIcon />
           </td>
           <th className="text-nowrap">
@@ -88,7 +79,7 @@ const PipelineDetail = ({
         </tr>
 
         <tr>
-          <td className="text-center shrink-col em-padding-left em-padding-right">
+          <td className="text-center shrink-col px-2 text-muted">
             <Icon icon="stream" />
           </td>
           <th className="text-nowrap">
@@ -100,7 +91,7 @@ const PipelineDetail = ({
         </tr>
 
         <tr>
-          <td className="text-center shrink-col em-padding-left em-padding-right">
+          <td className="text-center shrink-col px-2 text-muted">
             <Icon icon={['far', 'clock']} />
           </td>
           <th>
@@ -112,26 +103,39 @@ const PipelineDetail = ({
         </tr>
 
         <tr>
-          <td className="text-center shrink-col em-padding-left em-padding-right">
+          <td className="text-center shrink-col px-2 text-muted">
             <Icon icon={['far', 'copy']} />
           </td>
           <th>
-            <FormattedMessage id="app.pipeline.version" defaultMessage="Version:" />
+            <FormattedMessage id="app.pipeline.version" defaultMessage="Version" />:
           </th>
           <td>
             <Version version={version} createdAt={createdAt} updatedAt={updatedAt} />
           </td>
         </tr>
+
+        {forkedFrom && (
+          <tr>
+            <td className="text-center shrink-col px-2 text-muted">
+              <ForkIcon />
+            </td>
+            <th>
+              <FormattedMessage id="app.pipeline.forkedFrom" defaultMessage="Forked from" />:
+            </th>
+            <td>
+              <PipelineNameContainer pipelineId={forkedFrom} />
+            </td>
+          </tr>
+        )}
       </tbody>
     </Table>
   </Box>
 );
 
 PipelineDetail.propTypes = {
   id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
   author: PropTypes.string,
-  exercisesIds: PropTypes.array.isRequired,
+  forkedFrom: PropTypes.string,
   description: PropTypes.string,
   createdAt: PropTypes.number.isRequired,
   updatedAt: PropTypes.number.isRequired,

src/components/forms/ForkExerciseForm/ForkExerciseForm.js

@@ -11,7 +11,7 @@ import { SelectField } from '../Fields';
 import SubmitButton from '../SubmitButton';
 import Button, { TheButtonGroup } from '../../widgets/TheButton';
 import Callout from '../../widgets/Callout';
-import Icon, { WarningIcon } from '../../icons';
+import { WarningIcon, ForkIcon } from '../../icons';
 import { forkStatuses } from '../../../redux/modules/exercises';
 import { getFork } from '../../../redux/selectors/exercises';
 import ResourceRenderer from '../../helpers/ResourceRenderer';
@@ -124,7 +124,7 @@ class ForkExerciseForm extends Component {
                       hasSucceeded={submitSucceeded}
                       hasFailed={submitFailed}
                       handleSubmit={handleSubmit}
-                      defaultIcon={<Icon icon="code-branch" gapRight />}
+                      defaultIcon={<ForkIcon gapRight />}
                       noShadow
                       confirmQuestion={
                         <FormattedMessage

src/components/forms/ForkPipelineForm/ForkPipelineForm.css

@@ -52,6 +52,7 @@ export const ExpandCollapseIcon = ({ isOpen = false, ...props }) =>
   );
 export const FailureIcon = props => <Icon className="text-danger" {...props} icon="times" />;
 export const FaqIcon = props => <Icon {...props} icon={['far', 'question-circle']} />;
+export const ForkIcon = props => <Icon {...props} icon="code-branch" />;
 export const GroupIcon = ({ organizational = false, archived = false, ...props }) => (
   <Icon {...props} icon={organizational ? 'sitemap' : archived ? 'archive' : 'users'} />
 );

src/components/forms/ForkPipelineForm/ForkPipelineForm.js

@@ -811,7 +811,7 @@ class PipelineEditContainer extends Component {
 
               <TheButtonGroup>
                 <Button variant="primary" onClick={this.acknowledgeNewVersion} disabled={this.state.submitting}>
-                  <Icon icon={['far', 'meh']} gapRight />
+                  <Icon icon={['far', 'smile']} gapRight />
                   <FormattedMessage id="generic.acknowledge" defaultMessage="Acknowledge" />
                 </Button>
                 <Button variant="success" onClick={this.reload} disabled={this.state.submitting}>