mendersoftware / gui / 951400782

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

70.59
/src/js/components/helptips/onboardingcompletetip.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, useRef } from 'react';
15 
import { useDispatch, useSelector } from 'react-redux';
16 









17



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










18



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










19












20



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










21



import { setOnboardingComplete } from '../../actions/onboardingActions';










22



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










23



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










24



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










25



import DocsLink from '../common/docslink';










26



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










27



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










28



import { CompletionButton } from './deploymentcompletetip';










29












30



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




187✔





31



  const timer = useRef();




1✔





32



  const dispatch = useDispatch();




1✔





33



  const url = useSelector(getDemoDeviceAddress) || targetUrl;





1!





34












35



  useEffect(() => {




1✔





36



    dispatch(getDevicesByStatus(DeviceConstants.DEVICE_STATES.accepted))




1✔





37



      .then(tasks => {










38



        return Promise.all(tasks[tasks.length - 1].deviceAccu.ids.map(id => dispatch(getDeviceById(id))));




×







39



      })










40



      .finally(() => {










41



        timer.current = setTimeout(() => dispatch(setOnboardingComplete(true)), 120000);




×







42



      });










43



    return () => {




1✔





44



      dispatch(setOnboardingComplete(true));




1✔





45



      clearTimeout(timer.current);




1✔





46



    };










47



  }, []);










48












49



  return (




1✔





50



    <MenderTooltipClickable










51



      className="tooltip onboard-icon onboard-tip"










52



      id={onboardingSteps.ONBOARDING_FINISHED}










53



      onboarding










54



      startOpen










55



      style={anchor}










56



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










57



      title={










58



        <div className="content">










59



          <p>Great work! You updated your device with the new Release!</p>










60



          <div className="margin-bottom-small margin-top-small">










61



            Your device is now running the updated version of the software. At










62



            <div className="flexbox centered" style={{ margin: '5px 0' }}>










63



              {!url ? (





1!





64



                <Loader show={true} />










65



              ) : (










66



                <CompletionButton










67



                  className="button"










68



                  variant="text"










69



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










70



                  target="_blank"










71



                >{`Go to ${url}`}</CompletionButton>










72



              )}










73



            </div>










74



            you should now see &quot;Hello world&quot; in place of the webpage you saw previously. If you continue to see the webpage you saw previously you










75



            might have to refresh the page.










76



          </div>










77



          <p>You&apos;ve now got a good foundation in how to use Mender. Look for more help hints in the UI as you go along.</p>










78



          What next?










79



          <div>










80



            Proceed to one of the following tutorials (listed in recommended order):










81



            <ol>










82



              <li key="deploy-a-system-update">










83



                <DocsLink path="get-started/deploy-an-operating-system-update" title="Deploy an operating system update" />










84



              </li>










85



              <li key="deploy-a-container-update">










86



                <DocsLink path="get-started/deploy-a-container-update" title="Deploy a container update" />










87



              </li>










88



            </ol>










89



          </div>










90



          <div className="flexbox">










91



            <div style={{ flexGrow: 1 }} />










92



            <Button variant="contained" color="secondary" onClick={() => dispatch(setOnboardingComplete(true))}>




×







93



              Close










94



            </Button>










95



          </div>










96



        </div>










97



      }










98



    >










99



      <CheckCircleIcon />










100



    </MenderTooltipClickable>










101



  );










102



};










103












104



export default OnboardingCompleteTip;
























    

  • 

    •