Feature/1349 vault interactive tutorial

packages/coinstac-ui/app/render/components/consortia/consortia-list.jsx

@@ -24,7 +24,8 @@ import { v4 as uuid } from 'uuid';
 import MemberAvatar from '../common/member-avatar';
 import ListItem from '../common/list-item';
 import ListDeleteModal from '../common/list-delete-modal';
-import { tutorialChange } from '../../state/ducks/auth';
+import { PIPELINE_TUTORIAL_STEPS, VAULT_TUTORIAL_STEPS } from '../../constants/tutorial';
+import { pipelineTutorialChange, vaultTutorialChange } from '../../state/ducks/auth';
 import { deleteAllDataMappingsFromConsortium } from '../../state/ducks/maps';
 import { pullComputations } from '../../state/ducks/docker';
 import {
@@ -49,7 +50,6 @@ import { notifyInfo, notifyError, notifyWarning } from '../../state/ducks/notify
 import { start, finish } from '../../state/ducks/loading';
 import { startRun } from '../../state/ducks/runs';
 import { isUserInGroup, isUserOnlyOwner, pipelineNeedsDataMapping } from '../../utils/helpers';
-import STEPS from '../../constants/tutorial';
 import ErrorDialog from '../common/error-dialog';
 
 const MAX_LENGTH_CONSORTIA = 50;
@@ -673,14 +673,17 @@ class ConsortiaList extends Component {
       consortia,
       classes,
       auth,
-      tutorialChange,
+      pipelineTutorialChange,
+      vaultTutorialChange,
     } = this.props;
     const {
       search, showModal, showErrorDialog, errorMessage, errorTitle,
     } = this.state;
 
     const { memberConsortia, otherConsortia } = this.getConsortiaByOwner();
 
+    const { showPipelineTutorial, showVaultTutorial } = auth;
+
     return (
       <div>
         <div className="page-header">
@@ -745,11 +748,18 @@ class ConsortiaList extends Component {
           title={errorTitle}
           message={errorMessage}
         />
-        {!auth.isTutorialHidden && (
+        {showPipelineTutorial && (
+          <Joyride
+            steps={PIPELINE_TUTORIAL_STEPS.consortiaList}
+            disableScrollParentFix
+            callback={pipelineTutorialChange}
+          />
+        )}
+        {showVaultTutorial && (
           <Joyride
-            steps={STEPS.consortiaList}
+            steps={VAULT_TUTORIAL_STEPS.consortiaList}
             disableScrollParentFix
-            callback={tutorialChange}
+            callback={vaultTutorialChange}
           />
         )}
       </div>
@@ -780,7 +790,8 @@ ConsortiaList.propTypes = {
   startLoading: PropTypes.func.isRequired,
   finishLoading: PropTypes.func.isRequired,
   subscribeToUsersOnlineStatus: PropTypes.func.isRequired,
-  tutorialChange: PropTypes.func.isRequired,
+  pipelineTutorialChange: PropTypes.func.isRequired,
+  vaultTutorialChange: PropTypes.func.isRequired,
 };
 
 ConsortiaList.defaultProps = {
@@ -830,7 +841,8 @@ export default withStyles(styles)(
       pullComputations,
       deleteAllDataMappingsFromConsortium,
       startRun,
-      tutorialChange,
+      pipelineTutorialChange,
+      vaultTutorialChange,
       startLoading: start,
       finishLoading: finish,
     })(ConsortiaListWithData)

packages/coinstac-ui/app/render/components/consortia/consortium-about.jsx

@@ -21,7 +21,7 @@ import { omit } from 'lodash';
 import Select from '../common/react-select';
 import MemberAvatar from '../common/member-avatar';
 import StatusButtonWrapper from '../common/status-button-wrapper';
-import STEPS from '../../constants/tutorial';
+import { PIPELINE_TUTORIAL_STEPS, VAULT_TUTORIAL_STEPS } from '../../constants/tutorial';
 
 const styles = theme => ({
   textField: {
@@ -136,10 +136,12 @@ class ConsortiumAbout extends Component {
       users,
       classes,
       savingStatus,
-      isTutorialHidden,
+      showPipelineTutorial,
+      showVaultTutorial,
       saveConsortium,
       consortiumUsers,
-      tutorialChange,
+      pipelineTutorialChange,
+      vaultTutorialChange,
     } = this.props;
 
     const { newMember, isAddingMember } = this.state;
@@ -284,12 +286,20 @@ class ConsortiumAbout extends Component {
             </Box>
           )
         }
-        {!isTutorialHidden && (
+        {showPipelineTutorial && (
           <Joyride
-            steps={STEPS.consortiumAbout}
+            steps={PIPELINE_TUTORIAL_STEPS.consortiumAbout}
             continuous
             disableScrollParentFix
-            callback={tutorialChange}
+            callback={pipelineTutorialChange}
+          />
+        )}
+        {showVaultTutorial && (
+          <Joyride
+            steps={VAULT_TUTORIAL_STEPS.consortiumAbout}
+            continuous
+            disableScrollParentFix
+            callback={vaultTutorialChange}
           />
         )}
       </ValidatorForm>
@@ -305,12 +315,14 @@ ConsortiumAbout.propTypes = {
   user: PropTypes.object.isRequired,
   users: PropTypes.array,
   consortiumUsers: PropTypes.array,
-  isTutorialHidden: PropTypes.bool.isRequired,
+  showPipelineTutorial: PropTypes.bool.isRequired,
+  showVaultTutorial: PropTypes.bool.isRequired,
   addUserRole: PropTypes.func.isRequired,
   removeUserRole: PropTypes.func.isRequired,
   saveConsortium: PropTypes.func.isRequired,
   updateConsortium: PropTypes.func.isRequired,
-  tutorialChange: PropTypes.func.isRequired,
+  pipelineTutorialChange: PropTypes.func.isRequired,
+  vaultTutorialChange: PropTypes.func.isRequired,
 };
 
 ConsortiumAbout.defaultProps = {

packages/coinstac-ui/app/render/components/consortia/consortium-pipeline.jsx

@@ -10,7 +10,7 @@ import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import AddIcon from '@material-ui/icons/Add';
 import PropTypes from 'prop-types';
-import STEPS from '../../constants/tutorial';
+import { PIPELINE_TUTORIAL_STEPS, VAULT_TUTORIAL_STEPS } from '../../constants/tutorial';
 
 const styles = theme => ({
   tabTitle: {
@@ -46,8 +46,10 @@ function ConsortiumPipeline({
   owner,
   classes,
   pipelines,
-  isTutorialHidden,
-  tutorialChange,
+  showPipelineTutorial,
+  showVaultTutorial,
+  pipelineTutorialChange,
+  vaultTutorialChange,
   saveActivePipeline,
 }) {
   const activePipeline = useMemo(() => {
@@ -180,11 +182,18 @@ function ConsortiumPipeline({
           </div>
         </div>
       )}
-      {!isTutorialHidden && (
+      {showPipelineTutorial && (
         <Joyride
-          steps={STEPS.consortiumPipeline}
+          steps={PIPELINE_TUTORIAL_STEPS.consortiumPipeline}
           disableScrollParentFix
-          callback={tutorialChange}
+          callback={pipelineTutorialChange}
+        />
+      )}
+      {showVaultTutorial && (
+        <Joyride
+          steps={VAULT_TUTORIAL_STEPS.consortiumPipeline}
+          disableScrollParentFix
+          callback={vaultTutorialChange}
         />
       )}
     </div>
@@ -196,9 +205,11 @@ ConsortiumPipeline.propTypes = {
   consortium: PropTypes.object.isRequired,
   owner: PropTypes.bool.isRequired,
   pipelines: PropTypes.array.isRequired,
-  isTutorialHidden: PropTypes.bool.isRequired,
+  showPipelineTutorial: PropTypes.bool.isRequired,
+  showVaultTutorial: PropTypes.bool.isRequired,
   saveActivePipeline: PropTypes.func.isRequired,
-  tutorialChange: PropTypes.func.isRequired,
+  pipelineTutorialChange: PropTypes.func.isRequired,
+  vaultTutorialChange: PropTypes.func.isRequired,
 };
 
 export default withStyles(styles)(ConsortiumPipeline);

packages/coinstac-ui/app/render/components/consortia/consortium-tabs.jsx

@@ -13,7 +13,11 @@ import ConsortiumAbout from './consortium-about';
 import ConsortiumPipeline from './consortium-pipeline';
 import ConsortiumMembers from './consortium-members';
 import ConsortiumRuns from './consortium-runs';
-import { updateUserPerms, tutorialChange } from '../../state/ducks/auth';
+import {
+  updateUserPerms,
+  pipelineTutorialChange,
+  vaultTutorialChange,
+} from '../../state/ducks/auth';
 import {
   getAllAndSubProp,
   saveDocumentProp,
@@ -30,7 +34,7 @@ import {
 } from '../../state/graphql/functions';
 import { notifySuccess, notifyError } from '../../state/ducks/notifyAndLog';
 import { getGraphQLErrorMessage } from '../../utils/helpers';
-import STEPS from '../../constants/tutorial';
+import { PIPELINE_TUTORIAL_STEPS, VAULT_TUTORIAL_STEPS } from '../../constants/tutorial';
 
 const styles = theme => ({
   title: {
@@ -253,10 +257,11 @@ class ConsortiumTabs extends Component {
       removeUserRole,
       pipelines,
       classes,
-      tutorialChange,
+      pipelineTutorialChange,
+      vaultTutorialChange,
     } = this.props;
 
-    const { user, isTutorialHidden } = auth;
+    const { user, showPipelineTutorial, showVaultTutorial } = auth;
     const {
       selectedTabIndex,
       consortium,
@@ -279,8 +284,19 @@ class ConsortiumTabs extends Component {
             {title}
           </Typography>
         </div>
-        {!isTutorialHidden && isEditingConsortium && (
-          <Joyride steps={STEPS.consortiumTabs} disableScrollParentFix callback={tutorialChange} />
+        {showPipelineTutorial && isEditingConsortium && (
+          <Joyride
+            steps={PIPELINE_TUTORIAL_STEPS.consortiumTabs}
+            disableScrollParentFix
+            callback={pipelineTutorialChange}
+          />
+        )}
+        {showVaultTutorial && isEditingConsortium && (
+          <Joyride
+            steps={VAULT_TUTORIAL_STEPS.consortiumTabs}
+            disableScrollParentFix
+            callback={vaultTutorialChange}
+          />
         )}
         <Tabs
           value={this.getTabIndex()}
@@ -304,17 +320,21 @@ class ConsortiumTabs extends Component {
             user={user}
             users={users}
             savingStatus={savingStatus}
-            isTutorialHidden={isTutorialHidden || isEditingConsortium}
-            tutorialChange={tutorialChange}
+            showPipelineTutorial={showPipelineTutorial}
+            showVaultTutorial={showVaultTutorial}
+            pipelineTutorialChange={pipelineTutorialChange}
+            vaultTutorialChange={vaultTutorialChange}
           />
         )}
         {selectedTabIndex === 1 && (
           <ConsortiumPipeline
             consortium={consortium}
             owner={isOwner}
             pipelines={pipelines}
-            isTutorialHidden={isTutorialHidden}
-            tutorialChange={tutorialChange}
+            showPipelineTutorial={showPipelineTutorial}
+            showVaultTutorial={showVaultTutorial}
+            pipelineTutorialChange={pipelineTutorialChange}
+            vaultTutorialChange={vaultTutorialChange}
             saveActivePipeline={this.saveActivePipeline}
           />
         )}
@@ -360,7 +380,8 @@ ConsortiumTabs.propTypes = {
   saveConsortium: PropTypes.func.isRequired,
   saveActivePipeline: PropTypes.func.isRequired,
   subscribeToUsers: PropTypes.func,
-  tutorialChange: PropTypes.func.isRequired,
+  pipelineTutorialChange: PropTypes.func.isRequired,
+  vaultTutorialChange: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = ({ auth }) => ({
@@ -387,7 +408,8 @@ const connectedComponent = connect(
     notifySuccess,
     notifyError,
     updateUserPerms,
-    tutorialChange,
+    pipelineTutorialChange,
+    vaultTutorialChange,
   }
 )(ConsortiumTabsWithData);
 

packages/coinstac-ui/app/render/components/dashboard/dashboard-nav.jsx

@@ -19,10 +19,10 @@ import SecurityIcon from '@material-ui/icons/Security';
 import LanguageIcon from '@material-ui/icons/Language';
 
 import { isAdmin, isOwnerOfAnyHeadlessClient } from '../../utils/helpers';
-import STEPS from '../../constants/tutorial';
+import { PIPELINE_TUTORIAL_STEPS } from '../../constants/tutorial';
 
 const DashboardNav = ({
-  user, hasRunOfInterestInProgress, isTutorialHidden, tutorialChange,
+  user, hasRunOfInterestInProgress, showPipelineTutorial, pipelineTutorialChange,
 }, { router }) => (
   <Fragment>
     <List className="mainnav">
@@ -78,11 +78,11 @@ const DashboardNav = ({
         </ListItem>
       )}
     </List>
-    {!isTutorialHidden && router.location.pathname === '/dashboard' && (
+    {showPipelineTutorial && router.location.pathname === '/dashboard' && (
       <Joyride
-        steps={STEPS.dashboardNav}
+        steps={PIPELINE_TUTORIAL_STEPS.dashboardNav}
         disableScrollParentFix
-        callback={tutorialChange}
+        callback={pipelineTutorialChange}
       />
     )}
   </Fragment>
@@ -91,8 +91,8 @@ const DashboardNav = ({
 DashboardNav.propTypes = {
   user: PropTypes.object.isRequired,
   hasRunOfInterestInProgress: PropTypes.bool.isRequired,
-  isTutorialHidden: PropTypes.bool.isRequired,
-  tutorialChange: PropTypes.func.isRequired,
+  showPipelineTutorial: PropTypes.bool.isRequired,
+  pipelineTutorialChange: PropTypes.func.isRequired,
 };
 
 DashboardNav.contextTypes = {

packages/coinstac-ui/app/render/components/dashboard/dashboard.jsx

@@ -14,7 +14,7 @@ import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
 import UserAccountController from '../user/user-account-controller';
 import CoinstacAbbr from '../coinstac-abbr';
 import useApolloClient from '../../state/apollo-client';
-import { toggleTutorial, tutorialChange, refreshToken } from '../../state/ducks/auth';
+import { togglePipelineTutorial, pipelineTutorialChange, refreshToken } from '../../state/ducks/auth';
 import { notifyError } from '../../state/ducks/notifyAndLog';
 import {
   COMPUTATION_CHANGED_SUBSCRIPTION,
@@ -56,7 +56,7 @@ function Dashboard({
 
   const dispatch = useDispatch();
 
-  const [showTutorialModal, setShowTutorialModal] = useState(!auth.isTutorialHidden);
+  const [showTutorialModal, setShowTutorialModal] = useState(auth.showPipelineTutorial);
 
   const {
     data: consortiaData, subscribeToMore: subscribeToConsortia,
@@ -139,7 +139,7 @@ function Dashboard({
     setShowTutorialModal(false);
 
     if (neverShow) {
-      dispatch(toggleTutorial());
+      dispatch(togglePipelineTutorial());
     }
   };
 
@@ -158,8 +158,8 @@ function Dashboard({
         <DashboardNav
           user={auth.user}
           hasRunOfInterestInProgress={Boolean(runsOfInterestInProgress.length)}
-          isTutorialHidden={auth.isTutorialHidden}
-          tutorialChange={data => dispatch(tutorialChange(data))}
+          showPipelineTutorial={auth.showPipelineTutorial}
+          pipelineTutorialChange={data => dispatch(pipelineTutorialChange(data))}
         />
         <List>
           <ListItem>