mendersoftware / gui / 951400782

Source File
Press 'n' to go to next uncovered line, 'b' for previous

57.14
/src/js/components/helptips/deploymentcompletetip.js
1 
// Copyright 2019 Northern.tech AS
2 
//
3 
//    Licensed under the Apache License, Version 2.0 (the "License");
4 
//    you may not use this file except in compliance with the License.
5 
//    You may obtain a copy of the License at
6 
//
7 
//        http://www.apache.org/licenses/LICENSE-2.0
8 
//
9 
//    Unless required by applicable law or agreed to in writing, software
10 
//    distributed under the License is distributed on an "AS IS" BASIS,
11 
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 
//    See the License for the specific language governing permissions and
13 
//    limitations under the License.
14 
import React, { useEffect } from 'react';
15 
import { useDispatch, useSelector } from 'react-redux';
16 
import { useNavigate } from 'react-router-dom';
17 









18



import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';










19



import { Button } from '@mui/material';










20



import { withStyles } from 'tss-react/mui';










21












22



import { getDevicesByStatus } from '../../actions/deviceActions';










23



import { advanceOnboarding, setOnboardingComplete, setShowCreateArtifactDialog } from '../../actions/onboardingActions';










24



import { selectRelease } from '../../actions/releaseActions';










25



import * as DeviceConstants from '../../constants/deviceConstants';










26



import { onboardingSteps } from '../../constants/onboardingConstants';










27



import { getDemoDeviceAddress } from '../../selectors';










28



import Tracking from '../../tracking';










29



import Loader from '../common/loader';










30



import { MenderTooltipClickable } from '../common/mendertooltip';










31












32



export const CompletionButton = withStyles(Button, ({ palette }) => ({




187✔





33



  root: {










34



    backgroundColor: palette.background.default,










35



    '&:hover': {










36



      backgroundColor: palette.background.default










37



    }










38



  }










39



}));










40












41



export const DeploymentCompleteTip = ({ anchor, targetUrl }) => {




187✔





42



  const navigate = useNavigate();




1✔





43



  const dispatch = useDispatch();




1✔





44



  const url = useSelector(getDemoDeviceAddress) || targetUrl;





1!





45












46



  useEffect(() => {




1✔





47



    dispatch(getDevicesByStatus(DeviceConstants.DEVICE_STATES.accepted));




1✔





48



    Tracking.event({ category: 'onboarding', action: onboardingSteps.DEPLOYMENTS_PAST_COMPLETED });




1✔





49



  }, []);










50












51



  const onClick = () => {




1✔





52



    const parametrizedAddress = `${url}/index.html?source=${encodeURIComponent(window.location)}`;




×







53



    window.open(parametrizedAddress, '_blank');




×







54



    dispatch(selectRelease());




×







55



    dispatch(advanceOnboarding(onboardingSteps.DEPLOYMENTS_PAST_COMPLETED_FAILURE));




×







56



    dispatch(setOnboardingComplete(false));




×







57



    dispatch(setShowCreateArtifactDialog(true));




×







58



    navigate('/releases');




×







59



  };










60












61



  return (




1✔





62



    <MenderTooltipClickable










63



      className="tooltip onboard-icon onboard-tip"










64



      id={onboardingSteps.DEPLOYMENTS_PAST_COMPLETED}










65



      onboarding










66



      startOpen










67



      style={anchor}










68



      PopperProps={{ style: { marginLeft: -30, marginTop: -20 } }}










69



      title={










70



        <div className="content">










71



          <p>Fantastic! You completed your first deployment!</p>










72



          <p>Your deployment is finished and your device is now running the updated software!</p>










73



          <div className="flexbox centered">










74



            {!url ? <Loader show={true} /> : <CompletionButton variant="text" onClick={onClick}>{`Go to ${url}`}</CompletionButton>}





1!





75



          </div>










76



          <p>and you should see the demo web application actually being run on the device.</p>










77



          <p>NOTE: if you have local network restrictions, you may need to check them if you have difficulty loading the page.</p>










78



          <a onClick={onClick}>Visit the web app running your device</a>










79



        </div>










80



      }










81



    >










82



      <CheckCircleIcon />










83



    </MenderTooltipClickable>










84



  );










85



};










86












87



export default DeploymentCompleteTip;
























    

  • 

    •