INTLY-997: Add github repo and last commit date to walkthrough overvi…

…ew (#445)

* prelim changes for metadata

* add redux

* working version

* fix test

* add get details by id

* final changes by id

* fix tests

git_client.js

@@ -13,7 +13,7 @@ function getRepoName(repoUrl) {
  *
  * A URL could contain a hash, which we're interpreting as a branch/tag separator,
  * we shouldn't include this.
- **/
+ * */
 function cleanupRepoUrl(repoUrl) {
   const parsed = url.parse(repoUrl);
   return `${parsed.protocol}//${parsed.host}${parsed.path}`;
@@ -25,21 +25,20 @@ function cleanupRepoUrl(repoUrl) {
  * If the URL has a hash at the end of it then this is used as the branch name.
  */
 function getCloneOptionsForRepo(repoUrl) {
-  let cloneOptions = [ '--depth', 1, '--single-branch' ];
+  let cloneOptions = ['--depth', 1, '--single-branch'];
   const parsed = url.parse(repoUrl);
-  if (!!parsed.hash) {
+  if (parsed.hash) {
     // From experimenting, parsed.hash starts with a hash symbol. Just in case.
     const branchName = parsed.hash[0] === '#' ? parsed.hash.substring(1) : parsed.hash;
     cloneOptions = cloneOptions.concat(['--branch', branchName]);
   }
   return cloneOptions;
 }
 
-exports.latestLog = (repoPath) => {
-  return simpleGit(repoPath)
-    .log([ '--max-count', 1 ])
+exports.latestLog = repoPath =>
+  simpleGit(repoPath)
+    .log(['--max-count', 1])
     .catch(err => console.error(err));
-}
 
 exports.cloneRepo = (repoUrl, targetDir) =>
   new Promise((resolve, reject) => {
@@ -56,9 +55,11 @@ exports.cloneRepo = (repoUrl, targetDir) =>
     simpleGit(__dirname)
       // Disable terminal prompts, so Git does not prompt for username/password on a clone.
       .clone(cleanRepoUrl, clonePath, cloneOpts)
-      .then(() => resolve({
-        localDir: clonePath,
-        repoName: cleanRepoUrl
-      }))
+      .then(() =>
+        resolve({
+          localDir: clonePath,
+          repoName: cleanRepoUrl
+        })
+      )
       .catch(reject);
   });

server.js

@@ -444,6 +444,15 @@ function getMockConfigData() {
             conditions: [{ status: 'True' }]
           }
         },
+        {
+          spec: {
+            clusterServiceClassExternalName: 'fuse-managed'
+          },
+          status: {
+            dashboardURL:'${process.env.OPENSHIFT_URL}',
+            conditions: [{ status: 'True' }]
+          }
+        },
         {
           spec: {
             clusterServiceClassExternalName: 'launcher'
@@ -569,4 +578,4 @@ function run() {
     });
 }
 
-run();
+run();

src/components/walkthroughDetails/walkthroughDetails.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Card, CardBody, TextContent } from '@patternfly/react-core';
+import { connect, reduxActions } from '../../redux';
+
+class WalkthroughDetails extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const { walkthroughInfo } = this.props;
+    return (
+      <Card>
+        <CardBody>
+          <TextContent className="integr8ly-walkthrough-resources pf-u-pl-md">
+            <h2>About this walkthrough</h2>
+            <h3>Details</h3>
+            <div className="pf-u-pb-sm">
+              <div className="pf-u-display-flex pf-u-justify-content-space-between">
+                <div>Source: </div>
+                <div>
+                  {walkthroughInfo.type === 'path' ? (
+                    <div>---</div>
+                  ) : (
+                    <div>
+                      <a href={walkthroughInfo.gitUrl} target="_blank" rel="noopener noreferrer">
+                        {walkthroughInfo.gitUrl === 'https://github.com/integr8ly/tutorial-web-app-walkthroughs.git'
+                          ? 'Red Hat'
+                          : 'Community'}
+                      </a>
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="pf-u-display-flex pf-u-justify-content-space-between">
+                <div>Last updated: </div>
+                <div>
+                  {walkthroughInfo.type === 'path' ? (
+                    <div>---</div>
+                  ) : (
+                    <div>{new Date(walkthroughInfo.commitDate).toLocaleDateString()}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </TextContent>
+        </CardBody>
+      </Card>
+    );
+  }
+}
+
+WalkthroughDetails.propTypes = {
+  walkthroughInfo: PropTypes.object
+};
+
+WalkthroughDetails.defaultProps = {
+  walkthroughInfo: { data: {} }
+};
+
+const mapDispatchToProps = dispatch => ({
+  getWalkthroughInfo: id => dispatch(reduxActions.walkthroughActions.getWalkthroughInfo(id))
+});
+
+const mapStateToProps = state => ({
+  ...state.walkthroughServiceReducers
+});
+
+const ConnectedWalkthroughDetails = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(WalkthroughDetails);
+
+export { ConnectedWalkthroughDetails as default, WalkthroughDetails };

src/components/walkthroughResources/walkthroughResources.js

@@ -93,7 +93,7 @@ class WalkthroughResources extends React.Component {
       <Card>
         <CardBody>
           <TextContent className="integr8ly-walkthrough-resources pf-u-pl-md">
-            <h2>Walkthrough Resources</h2>
+            <h3>Resources</h3>
             {this.state.resourceList}
             <div className={this.props.resources.length !== 0 ? 'hidden' : 'show'}>No resources available.</div>
           </TextContent>

src/pages/tutorial/__tests__/__snapshots__/tutorial.test.js.snap

@@ -5,6 +5,7 @@ exports[`TutorialPage Component should render the ConnectedTutorialPage componen
   getProgress={[Function]}
   getThread={[Function]}
   getWalkthrough={[Function]}
+  getWalkthroughInfo={[Function]}
   thread={
     Object {
       "pending": true,
@@ -180,6 +181,9 @@ exports[`TutorialPage Component should render the TutorialPage component fulfill
           xlOffset={null}
           xlRowSpan={null}
         >
+          <Connect(WalkthroughDetails)
+            className="integr8ly-landing-page-tutorial-dashboard-section-right"
+          />
           <Connect(WalkthroughResources)
             className="integr8ly-landing-page-tutorial-dashboard-section-right"
             resources={Array []}

src/pages/tutorial/tutorial.js

@@ -19,6 +19,7 @@ import {
 } from '@patternfly/react-core';
 import { ClockIcon } from '@patternfly/react-icons';
 import { connect, reduxActions } from '../../redux';
+import ConnectedWalkthroughDetails from '../../components/walkthroughDetails/walkthroughDetails';
 import WalkthroughResources from '../../components/walkthroughResources/walkthroughResources';
 import { parseWalkthroughAdoc } from '../../common/walkthroughHelpers';
 import { getDocsForWalkthrough, getDefaultAdocAttrs } from '../../common/docsHelpers';
@@ -29,12 +30,14 @@ class TutorialPage extends React.Component {
     const {
       getWalkthrough,
       getProgress,
+      getWalkthroughInfo,
       match: {
         params: { id }
       }
     } = this.props;
     getWalkthrough(id);
     getProgress();
+    getWalkthroughInfo(id);
   }
 
   getStarted(e, id) {
@@ -161,6 +164,7 @@ class TutorialPage extends React.Component {
                   rowSpan={2}
                   className="integr8ly-module-frame pf-u-display-none pf-u-display-block-on-md"
                 >
+                  <ConnectedWalkthroughDetails className="integr8ly-landing-page-tutorial-dashboard-section-right" />
                   <WalkthroughResources
                     className="integr8ly-landing-page-tutorial-dashboard-section-right"
                     resources={parsedThread.resources}
@@ -187,6 +191,7 @@ TutorialPage.propTypes = {
   thread: PropTypes.object,
   getWalkthrough: PropTypes.func,
   getProgress: PropTypes.func,
+  getWalkthroughInfo: PropTypes.func,
   user: PropTypes.object,
   walkthroughResources: PropTypes.object,
   middlewareServices: PropTypes.object
@@ -200,6 +205,7 @@ TutorialPage.defaultProps = {
     params: {}
   },
   getProgress: noop,
+  getWalkthroughInfo: noop,
   user: {},
   thread: null,
   getWalkthrough: noop,
@@ -214,7 +220,8 @@ TutorialPage.defaultProps = {
 const mapDispatchToProps = dispatch => ({
   getThread: (language, id) => dispatch(reduxActions.threadActions.getThread(language, id)),
   getWalkthrough: id => dispatch(reduxActions.threadActions.getCustomThread(id)),
-  getProgress: () => dispatch(reduxActions.userActions.getProgress())
+  getProgress: () => dispatch(reduxActions.userActions.getProgress()),
+  getWalkthroughInfo: id => dispatch(reduxActions.walkthroughActions.getWalkthroughInfo(id))
 });
 
 const mapStateToProps = state => ({

src/redux/actions/walkthroughActions.js

@@ -11,4 +11,9 @@ const getCustomWalkthroughs = () => ({
   payload: walkthroughServices.getCustomWalkthroughs()
 });
 
-export { getWalkthrough, getCustomWalkthroughs };
+const getWalkthroughInfo = id => ({
+  type: walkthroughTypes.GET_WALKTHROUGH_INFO,
+  payload: walkthroughServices.getWalkthroughInfo(id)
+});
+
+export { getWalkthrough, getCustomWalkthroughs, getWalkthroughInfo };

src/redux/constants/walkthroughConstants.js

@@ -1,4 +1,6 @@
 const GET_WALKTHROUGH_SERVICE = 'GET_WALKTHROUGH_SERVICE';
 const GET_WALKTHROUGH = 'GET_WALKTHROUGH';
 const GET_WALKTHROUGHS = 'GET_WALKTHROUGHS';
-export { GET_WALKTHROUGH, GET_WALKTHROUGHS, GET_WALKTHROUGH_SERVICE };
+const GET_WALKTHROUGH_INFO = 'GET_WALKTHROUGH_INFO';
+
+export { GET_WALKTHROUGH, GET_WALKTHROUGHS, GET_WALKTHROUGH_INFO, GET_WALKTHROUGH_SERVICE };

src/redux/reducers/walkthroughServiceReducers.js

@@ -12,6 +12,16 @@ const initialState = {
     data: [],
     services: {}
   },
+  walkthroughInfo: {
+    error: false,
+    errorStatus: null,
+    errorMessage: null,
+    pending: false,
+    fulfilled: false,
+    type: '',
+    gitUrl: '',
+    commitDate: null
+  },
   walkthroughResources: {}
 };
 
@@ -84,6 +94,33 @@ const walkthroughServiceReducers = (state = initialState, action) => {
           initialState
         }
       );
+    case REJECTED_ACTION(walkthroughTypes.GET_WALKTHROUGH_INFO):
+      return setStateProp(
+        'walkthroughInfo',
+        {
+          error: action.error,
+          errorMessage: action.payload.message
+        },
+        {
+          state,
+          initialState
+        }
+      );
+    case FULFILLED_ACTION(walkthroughTypes.GET_WALKTHROUGH_INFO):
+      return setStateProp(
+        'walkthroughInfo',
+        {
+          pending: false,
+          fulfilled: true,
+          type: action.payload.data.walkthroughLocation.type,
+          gitUrl: action.payload.data.walkthroughLocation.remote,
+          commitDate: action.payload.data.walkthroughLocation.commitDate
+        },
+        {
+          state,
+          initialState
+        }
+      );
 
     case FULFILLED_ACTION(walkthroughTypes.GET_WALKTHROUGH_SERVICE):
       createData = Object.assign({}, state.walkthroughServices.services);

src/services/walkthroughServices.js

@@ -145,4 +145,14 @@ const getCustomWalkthroughs = () =>
     })
   );
 
-export { getWalkthrough, getCustomWalkthroughs, prepareCustomWalkthroughNamespace };
+/**
+ * Retrieves the GitHub info for the installed walkthrough from the backend.
+ */
+const getWalkthroughInfo = id =>
+  axios(
+    serviceConfig({
+      url: `/about/walkthrough/${id}`
+    })
+  );
+
+export { getWalkthrough, getWalkthroughInfo, getCustomWalkthroughs, prepareCustomWalkthroughNamespace };