963002358

pending completion

Build # 963002358

Build Type

Pull #3870

gitlab-ci

Committed by

mzedel

Commit Message

chore: cleaned up left over onboarding tooltips & aligned with updated design

Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>

Pull Request Pull Request #3870: MEN-5413

Run Details

4348 of 6319 branches covered (68.81%)

95 of 122 new or added lines in 24 files covered. (77.87%)

1734 existing lines in 160 files now uncovered.

8174 of 9951 relevant lines covered (82.14%)

178.12 hits per line

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

56.14

/src/js/utils/onboardingmanager.js

// Copyright 2019 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React from 'react';

import BaseOnboardingTip from '../components/helptips/baseonboardingtip';
import OnboardingCompleteTip from '../components/helptips/onboardingcompletetip';
import {
  DashboardOnboardingPendings,
  DashboardOnboardingState,
  DeploymentsInprogress,
  DeploymentsPast,
  DeploymentsPastCompletedFailure,
  DevicePendingTip,
  DevicesAcceptedOnboarding,
  DevicesDeployReleaseOnboarding,
  DevicesPendingAcceptingOnboarding,
  DevicesPendingDelayed,
  GetStartedTip,
  SchedulingAllDevicesSelection,
  SchedulingArtifactSelection,
  SchedulingGroupSelection,
  SchedulingReleaseToDevices
} from '../components/helptips/onboardingtips';
import { yes } from '../constants/appConstants';
import { DEPLOYMENT_STATES } from '../constants/deploymentConstants';
import { onboardingSteps as stepNames } from '../constants/onboardingConstants';

export const onboardingSteps = {
  [stepNames.DASHBOARD_ONBOARDING_START]: {
    condition: { min: stepNames.ONBOARDING_START },
    specialComponent: <GetStartedTip />
  },
  [stepNames.DEVICES_PENDING_ONBOARDING_START]: {
    condition: { min: stepNames.DASHBOARD_ONBOARDING_START, max: stepNames.DEVICES_PENDING_ONBOARDING },
    fallbackStep: stepNames.DASHBOARD_ONBOARDING_START,
    specialComponent: <DevicePendingTip />
  },
  [stepNames.DEVICES_DELAYED_ONBOARDING]: {
    condition: { min: stepNames.DASHBOARD_ONBOARDING_START },
    component: DevicesPendingDelayed,
    fallbackStep: stepNames.DASHBOARD_ONBOARDING_START,
    extra: ({ deviceConnection }) => {
      const now = new Date();
      const then = new Date(deviceConnection);
      then.setMinutes(then.getMinutes() + 5);
      return !!deviceConnection && then < now;
    }
  },
  [stepNames.DEVICES_PENDING_ONBOARDING]: {
    condition: { min: stepNames.DASHBOARD_ONBOARDING_START },
    component: DashboardOnboardingState,
    fallbackStep: stepNames.DASHBOARD_ONBOARDING_START
  },
  [stepNames.DEVICES_PENDING_ACCEPTING_ONBOARDING]: {
    condition: { min: stepNames.DEVICES_PENDING_ONBOARDING, max: stepNames.DEVICES_ACCEPTED_ONBOARDING },
    component: DevicesPendingAcceptingOnboarding
  },
  [stepNames.DASHBOARD_ONBOARDING_PENDINGS]: {
    condition: { min: stepNames.DEVICES_PENDING_ONBOARDING },
    component: DashboardOnboardingPendings
  },
  [stepNames.DEVICES_ACCEPTED_ONBOARDING]: {
    condition: { min: stepNames.DASHBOARD_ONBOARDING_PENDINGS },
    specialComponent: <DevicesAcceptedOnboarding />
  },
  [stepNames.DEVICES_DEPLOY_RELEASE_ONBOARDING]: {
    condition: {},
    component: DevicesDeployReleaseOnboarding
  },
  [stepNames.SCHEDULING_ALL_DEVICES_SELECTION]: {
    condition: { min: stepNames.DEVICES_ACCEPTED_ONBOARDING, max: stepNames.DEPLOYMENTS_INPROGRESS },
    component: SchedulingAllDevicesSelection
  },
  [stepNames.SCHEDULING_GROUP_SELECTION]: {
    condition: { min: stepNames.DEVICES_ACCEPTED_ONBOARDING, max: stepNames.DEPLOYMENTS_INPROGRESS },
    component: SchedulingGroupSelection
  },
  [stepNames.SCHEDULING_ARTIFACT_SELECTION]: {
    condition: { min: stepNames.SCHEDULING_ALL_DEVICES_SELECTION, max: stepNames.DEPLOYMENTS_INPROGRESS },
    component: SchedulingArtifactSelection
  },
  [stepNames.SCHEDULING_RELEASE_TO_DEVICES]: {
    condition: { min: stepNames.SCHEDULING_ARTIFACT_SELECTION, max: stepNames.DEPLOYMENTS_INPROGRESS },
    component: SchedulingReleaseToDevices
  },
  [stepNames.DEPLOYMENTS_INPROGRESS]: {
    condition: {},
    component: DeploymentsInprogress
  },
  [stepNames.DEPLOYMENTS_PAST]: {
    condition: { min: stepNames.DEPLOYMENTS_INPROGRESS, extra: () => !window.location.pathname.includes(DEPLOYMENT_STATES.finished) },
    component: DeploymentsPast
  },
  [stepNames.DEPLOYMENTS_PAST_COMPLETED]: {
    condition: { max: stepNames.DEPLOYMENTS_PAST_COMPLETED_FAILURE },
    specialComponent: <OnboardingCompleteTip targetUrl="destination-unreachable" />
  },
  [stepNames.DEPLOYMENTS_PAST_COMPLETED_FAILURE]: {
    condition: { max: stepNames.ONBOARDING_CANCELED },
    component: DeploymentsPastCompletedFailure
  },
  [stepNames.ONBOARDING_CANCELED]: {
    condition: {},
    specialComponent: <div />
  }
};

const getOnboardingStepCompleted = (id, onboardingState) => {
  const { progress, complete, showHelptips, showTips } = onboardingState;
  const keys = Object.keys(onboardingSteps);
  const {
    condition: { min = id, max = id },
    extra,
    progressIndex
  } = Object.entries(onboardingSteps).reduce(
    (accu, [key, value], index) => {
      accu = key === id ? { ...accu, ...value } : accu;
      accu.progressIndex = key === progress ? index : accu.progressIndex;
      return accu;
    },
    { progressIndex: 0, extra: yes, condition: { min: id, max: id } }
  );
  return (
    !complete &&
    showHelptips &&
    showTips &&
    progressIndex >= keys.findIndex(step => step === min) &&
    progressIndex <= keys.findIndex(step => step === max) &&
    extra(onboardingState)
  );
};

export const getOnboardingComponentFor = (id, componentProps, params = {}, previousComponent = null) => {
  const step = onboardingSteps[id];
  const isValid = getOnboardingStepCompleted(id, componentProps);
  if (!isValid) {
    return previousComponent;
  }
  if (step.specialComponent) {
    // const Component = step.specialComponent
    return React.cloneElement(step.specialComponent, params);
  }
  const component = step.component(componentProps);
  return <BaseOnboardingTip id={id} component={component} progress={step.progress || params.progress || null} {...params} />;
};

export const applyOnboardingFallbacks = progress => {
  const step = onboardingSteps[progress];
  if (step && step.fallbackStep) {
    return step.fallbackStep;
  }
  return progress;
};

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 from 'react';
15
16	import BaseOnboardingTip from '../components/helptips/baseonboardingtip';
17	import OnboardingCompleteTip from '../components/helptips/onboardingcompletetip';
18	import {
19	DashboardOnboardingPendings,
20	DashboardOnboardingState,
21	DeploymentsInprogress,
22	DeploymentsPast,
23	DeploymentsPastCompletedFailure,
24	DevicePendingTip,
25	DevicesAcceptedOnboarding,
26	DevicesDeployReleaseOnboarding,
27	DevicesPendingAcceptingOnboarding,
28	DevicesPendingDelayed,
29	GetStartedTip,
30	SchedulingAllDevicesSelection,
31	SchedulingArtifactSelection,
32	SchedulingGroupSelection,
33	SchedulingReleaseToDevices
34	} from '../components/helptips/onboardingtips';
35	import { yes } from '../constants/appConstants';
36	import { DEPLOYMENT_STATES } from '../constants/deploymentConstants';
37	import { onboardingSteps as stepNames } from '../constants/onboardingConstants';
38
39	export const onboardingSteps = {	185✔
40	[stepNames.DASHBOARD_ONBOARDING_START]: {
41	condition: { min: stepNames.ONBOARDING_START },
42	specialComponent: <GetStartedTip />
43	},
44	[stepNames.DEVICES_PENDING_ONBOARDING_START]: {
45	condition: { min: stepNames.DASHBOARD_ONBOARDING_START, max: stepNames.DEVICES_PENDING_ONBOARDING },
46	fallbackStep: stepNames.DASHBOARD_ONBOARDING_START,
47	specialComponent: <DevicePendingTip />
48	},
49	[stepNames.DEVICES_DELAYED_ONBOARDING]: {
50	condition: { min: stepNames.DASHBOARD_ONBOARDING_START },
51	component: DevicesPendingDelayed,
52	fallbackStep: stepNames.DASHBOARD_ONBOARDING_START,
53	extra: ({ deviceConnection }) => {
NEW 54	const now = new Date();	×
NEW 55	const then = new Date(deviceConnection);	×
NEW 56	then.setMinutes(then.getMinutes() + 5);	×
NEW 57	return !!deviceConnection && then < now;	×
58	}
59	},
60	[stepNames.DEVICES_PENDING_ONBOARDING]: {
61	condition: { min: stepNames.DASHBOARD_ONBOARDING_START },
62	component: DashboardOnboardingState,
63	fallbackStep: stepNames.DASHBOARD_ONBOARDING_START
64	},
65	[stepNames.DEVICES_PENDING_ACCEPTING_ONBOARDING]: {
66	condition: { min: stepNames.DEVICES_PENDING_ONBOARDING, max: stepNames.DEVICES_ACCEPTED_ONBOARDING },
67	component: DevicesPendingAcceptingOnboarding
68	},
69	[stepNames.DASHBOARD_ONBOARDING_PENDINGS]: {
70	condition: { min: stepNames.DEVICES_PENDING_ONBOARDING },
71	component: DashboardOnboardingPendings
72	},
73	[stepNames.DEVICES_ACCEPTED_ONBOARDING]: {
74	condition: { min: stepNames.DASHBOARD_ONBOARDING_PENDINGS },
75	specialComponent: <DevicesAcceptedOnboarding />
76	},
77	[stepNames.DEVICES_DEPLOY_RELEASE_ONBOARDING]: {
78	condition: {},
79	component: DevicesDeployReleaseOnboarding
80	},
81	[stepNames.SCHEDULING_ALL_DEVICES_SELECTION]: {
82	condition: { min: stepNames.DEVICES_ACCEPTED_ONBOARDING, max: stepNames.DEPLOYMENTS_INPROGRESS },
83	component: SchedulingAllDevicesSelection
84	},
85	[stepNames.SCHEDULING_GROUP_SELECTION]: {
86	condition: { min: stepNames.DEVICES_ACCEPTED_ONBOARDING, max: stepNames.DEPLOYMENTS_INPROGRESS },
87	component: SchedulingGroupSelection
88	},
89	[stepNames.SCHEDULING_ARTIFACT_SELECTION]: {
90	condition: { min: stepNames.SCHEDULING_ALL_DEVICES_SELECTION, max: stepNames.DEPLOYMENTS_INPROGRESS },
91	component: SchedulingArtifactSelection
92	},
93	[stepNames.SCHEDULING_RELEASE_TO_DEVICES]: {
94	condition: { min: stepNames.SCHEDULING_ARTIFACT_SELECTION, max: stepNames.DEPLOYMENTS_INPROGRESS },
95	component: SchedulingReleaseToDevices
96	},
97	[stepNames.DEPLOYMENTS_INPROGRESS]: {
98	condition: {},
99	component: DeploymentsInprogress
100	},
101	[stepNames.DEPLOYMENTS_PAST]: {
UNCOV 102	condition: { min: stepNames.DEPLOYMENTS_INPROGRESS, extra: () => !window.location.pathname.includes(DEPLOYMENT_STATES.finished) },	×
103	component: DeploymentsPast
104	},
105	[stepNames.DEPLOYMENTS_PAST_COMPLETED]: {
106	condition: { max: stepNames.DEPLOYMENTS_PAST_COMPLETED_FAILURE },
107	specialComponent: <OnboardingCompleteTip targetUrl="destination-unreachable" />
108	},
109	[stepNames.DEPLOYMENTS_PAST_COMPLETED_FAILURE]: {
110	condition: { max: stepNames.ONBOARDING_CANCELED },
111	component: DeploymentsPastCompletedFailure
112	},
113	[stepNames.ONBOARDING_CANCELED]: {
114	condition: {},
115	specialComponent: <div />
116	}
117	};
118
119	const getOnboardingStepCompleted = (id, onboardingState) => {	185✔
120	const { progress, complete, showHelptips, showTips } = onboardingState;	2,106✔
121	const keys = Object.keys(onboardingSteps);	2,106✔
122	const {
123	condition: { min = id, max = id },	1,813✔
124	extra,
125	progressIndex
126	} = Object.entries(onboardingSteps).reduce(	2,106✔
127	(accu, [key, value], index) => {
128	accu = key === id ? { ...accu, ...value } : accu;	35,802✔
129	accu.progressIndex = key === progress ? index : accu.progressIndex;	35,802✔
130	return accu;	35,802✔
131	},
132	{ progressIndex: 0, extra: yes, condition: { min: id, max: id } }
133	);
134	return (	2,106✔
135	!complete &&	6,278!
136	showHelptips &&
137	showTips &&
UNCOV 138	progressIndex >= keys.findIndex(step => step === min) &&	×
UNCOV 139	progressIndex <= keys.findIndex(step => step === max) &&	×
140	extra(onboardingState)
141	);
142	};
143
144	export const getOnboardingComponentFor = (id, componentProps, params = {}, previousComponent = null) => {	185!
145	const step = onboardingSteps[id];	2,106✔
146	const isValid = getOnboardingStepCompleted(id, componentProps);	2,106✔
147	if (!isValid) {	2,106!
148	return previousComponent;	2,106✔
149	}
UNCOV 150	if (step.specialComponent) {	×
151	// const Component = step.specialComponent
UNCOV 152	return React.cloneElement(step.specialComponent, params);	×
153	}
UNCOV 154	const component = step.component(componentProps);	×
UNCOV 155	return <BaseOnboardingTip id={id} component={component} progress={step.progress \|\| params.progress \|\| null} {...params} />;	×
156	};
157
158	export const applyOnboardingFallbacks = progress => {	185✔
159	const step = onboardingSteps[progress];	9✔
160	if (step && step.fallbackStep) {	9!
UNCOV 161	return step.fallbackStep;	×
162	}
163	return progress;	9✔
164	};

mendersoftware / gui / 963002358

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

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