Skip to content

Commit d38eba1

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #14776 from vikram-raj/odc-7724
ODC-7724: Add guided tour in Admin perspective
2 parents e9d6ead + 5791afa commit d38eba1

18 files changed

Lines changed: 203 additions & 68 deletions

File tree

‎frontend/packages/console-app/console-extensions.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -655,7 +655,7 @@
655655
"perspective": "admin",
656656
"id": "home",
657657
"name": "%console-app~Home%",
658-
"dataAttributes": { "data-quickstart-id": "qs-nav-home" }
658+
"dataAttributes": { "data-quickstart-id": "qs-nav-home", "data-tour-id": "tour-home-nav" }
659659
}
660660
},
661661
{
@@ -674,7 +674,10 @@
674674
"perspective": "admin",
675675
"id": "workloads",
676676
"name": "%console-app~Workloads%",
677-
"dataAttributes": { "data-quickstart-id": "qs-nav-workloads" },
677+
"dataAttributes": {
678+
"data-quickstart-id": "qs-nav-workloads",
679+
"data-tour-id": "tour-workloads-nav"
680+
},
678681
"insertAfter": "operators"
679682
}
680683
},

‎frontend/packages/console-app/locales/en/console-app.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,17 @@
271271
"Access review rules": "Access review rules",
272272
"Incompatible file type": "Incompatible file type",
273273
"{{fileName}} cannot be uploaded. Only {{fileExtensions}} files are supported currently. Try another file.": "{{fileName}} cannot be uploaded. Only {{fileExtensions}} files are supported currently. Try another file.",
274+
"Access our new quick starts where you can learn more about creating or deploying an application using OpenShift Developer Console. You can also restart this tour anytime here.": "Access our new quick starts where you can learn more about creating or deploying an application using OpenShift Developer Console. You can also restart this tour anytime here.",
275+
"Set your individual console preferences including default views, language, import settings, and more.": "Set your individual console preferences including default views, language, import settings, and more.",
276+
"Stay up-to-date with everything OpenShift on our <2>blog</2> or continue to learn more in our <6>documentation</6>.": "Stay up-to-date with everything OpenShift on our <2>blog</2> or continue to learn more in our <6>documentation</6>.",
277+
"Welcome to the new OpenShift experience!": "Welcome to the new OpenShift experience!",
278+
"Our new update with OpenShift 4.19 gives a more modern look to help enhance your experience and streamline your workflow, such as improved navigation and infrastructure. Want us to show you around?": "Our new update with OpenShift 4.19 gives a more modern look to help enhance your experience and streamline your workflow, such as improved navigation and infrastructure. Want us to show you around?",
279+
"Here is where you can view all of your OpenShift enviroments, including your projects and inventory. You can also access APIs and software catalogs.": "Here is where you can view all of your OpenShift enviroments, including your projects and inventory. You can also access APIs and software catalogs.",
280+
"Software Catalog": "Software Catalog",
281+
"Add shared applications, services, event sources, or source-to-image builders to your project. Cluster administrators can customize the content made available in the catalog.": "Add shared applications, services, event sources, or source-to-image builders to your project. Cluster administrators can customize the content made available in the catalog.",
282+
"Help": "Help",
283+
"User Preferences": "User Preferences",
284+
"You’re ready to go!": "You’re ready to go!",
274285
"Red Hat OpenShift Lightspeed": "Red Hat OpenShift Lightspeed",
275286
"Meet OpenShift Lightspeed": "Meet OpenShift Lightspeed",
276287
"Unlock possibilities and enhance productivity with the AI-powered assistant's expert guidance in your OpenShift web console.": "Unlock possibilities and enhance productivity with the AI-powered assistant's expert guidance in your OpenShift web console.",
@@ -596,7 +607,6 @@
596607
"Select a perspective": "Select a perspective",
597608
"Select an option": "Select an option",
598609
"User Preferences {{activeTab}}": "User Preferences {{activeTab}}",
599-
"User Preferences": "User Preferences",
600610
"Set your individual preferences for the console experience. Any changes will be autosaved.": "Set your individual preferences for the console experience. Any changes will be autosaved.",
601611
"Only {{volumeMode}} volume mode is available for {{storageClass}} with {{accessMode}} access mode": "Only {{volumeMode}} volume mode is available for {{storageClass}} with {{accessMode}} access mode",
602612
"VolumeSnapshotClass with same provisioner as claim": "VolumeSnapshotClass with same provisioner as claim",

‎frontend/packages/console-app/src/components/guided-tour/GuidedTourText.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import * as React from 'react';
2+
import { Trans, useTranslation } from 'react-i18next';
3+
import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
4+
import { ConsoleLinkModel } from '@console/internal/models';
5+
import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
6+
7+
const HelpTourText: React.FC = () => {
8+
const { t } = useTranslation();
9+
return t(
10+
'console-app~Access our new quick starts where you can learn more about creating or deploying an application using OpenShift Developer Console. You can also restart this tour anytime here.',
11+
);
12+
};
13+
14+
export const helpTourText = <HelpTourText />;
15+
16+
const UserPrefrencesTourText: React.FC = () => {
17+
const { t } = useTranslation();
18+
return t(
19+
'console-app~Set your individual console preferences including default views, language, import settings, and more.',
20+
);
21+
};
22+
23+
export const userPreferencesTourText = <UserPrefrencesTourText />;
24+
25+
export const FinishTourText: React.FC = () => {
26+
const [consoleLinks] = useK8sWatchResource<K8sResourceKind[]>({
27+
isList: true,
28+
kind: referenceForModel(ConsoleLinkModel),
29+
optional: true,
30+
});
31+
const { t } = useTranslation();
32+
const openshiftBlogLink =
33+
consoleLinks.filter((link: K8sResourceKind) => link.metadata.name === 'openshift-blog')[0]?.spec
34+
?.href || 'https://developers.redhat.com/products/openshift/whats-new';
35+
// declaring openshiftHelpBase instead of importing because it throws error while using it as tour extension
36+
const openshiftHelpBase =
37+
window.SERVER_FLAGS.documentationBaseURL || 'https://docs.okd.io/latest/';
38+
return (
39+
<Trans t={t} ns="console-app">
40+
Stay up-to-date with everything OpenShift on our{' '}
41+
<a
42+
href={openshiftBlogLink}
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
data-test="openshift-blog-link"
46+
>
47+
blog
48+
</a>{' '}
49+
or continue to learn more in our{' '}
50+
<a
51+
href={openshiftHelpBase}
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
data-test="openshift-docs-link"
55+
>
56+
documentation
57+
</a>
58+
.
59+
</Trans>
60+
);
61+
};
62+
63+
export const finishTourText = <FinishTourText />;

frontend/packages/dev-console/src/components/guided-tour/__tests__/GuidedTourText.spec.tsx renamed to frontend/packages/console-app/src/components/guided-tour/__tests__/GuidedTourText.spec.tsx

File renamed without changes.

‎frontend/packages/console-app/src/components/guided-tour/index.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { TourDataType } from '@console/app/src/components/tour';
2+
import { finishTourText, helpTourText, userPreferencesTourText } from './GuidedTourText';
3+
4+
const getSelector = (id: string): string => `[data-tour-id="${id}"]`;
5+
6+
export const getGuidedTour = (): TourDataType => ({
7+
intro: {
8+
// t('console-app~Welcome to the new OpenShift experience!')
9+
heading: '%console-app~Welcome to the new OpenShift experience!%',
10+
// t('console-app~Our new update with OpenShift 4.19 gives a more modern look to help enhance your experience and streamline your workflow, such as improved navigation and infrastructure. Want us to show you around?')
11+
content:
12+
'%console-app~Our new update with OpenShift 4.19 gives a more modern look to help enhance your experience and streamline your workflow, such as improved navigation and infrastructure. Want us to show you around?%',
13+
},
14+
steps: [
15+
{
16+
placement: 'right',
17+
// t('console-app~Home')
18+
heading: '%console-app~Home%',
19+
// t('console-app~Here is where you can view all of your OpenShift enviroments, including your projects and inventory. You can also access APIs and software catalogs.')
20+
content:
21+
'%console-app~Here is where you can view all of your OpenShift enviroments, including your projects and inventory. You can also access APIs and software catalogs.%',
22+
selector: getSelector('tour-home-nav'),
23+
},
24+
{
25+
placement: 'right',
26+
// t('console-app~Software Catalog')
27+
heading: '%console-app~Software Catalog%',
28+
// t('console-app~Add shared applications, services, event sources, or source-to-image builders to your project. Cluster administrators can customize the content made available in the catalog.')
29+
content:
30+
'%console-app~Add shared applications, services, event sources, or source-to-image builders to your project. Cluster administrators can customize the content made available in the catalog.%',
31+
selector: getSelector('tour-software-catalog-nav'),
32+
expandableSelector: getSelector('tour-home-nav'),
33+
},
34+
{
35+
placement: 'bottom',
36+
// t('console-app~Help')
37+
heading: '%console-app~Help%',
38+
content: helpTourText,
39+
selector: getSelector('tour-help-button'),
40+
},
41+
{
42+
placement: 'bottom',
43+
// t('console-app~User Preferences')
44+
heading: '%console-app~User Preferences%',
45+
content: userPreferencesTourText,
46+
selector: getSelector('tour-user-button'),
47+
},
48+
],
49+
end: {
50+
// t('console-app~You’re ready to go!')
51+
heading: '%console-app~You’re ready to go!%',
52+
content: finishTourText,
53+
},
54+
});

‎frontend/packages/console-app/src/components/tour/StepComponent.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ type StepComponentProps = {
1212
showStepBadge?: boolean;
1313
nextButtonText: string;
1414
backButtonText: string;
15+
expandableSelector?: string;
1516
};
1617

1718
const StepComponent: React.FC<StepComponentProps> = ({
1819
heading,
1920
content,
21+
expandableSelector,
2022
selector,
2123
placement,
2224
nextButtonText,
@@ -35,6 +37,7 @@ const StepComponent: React.FC<StepComponentProps> = ({
3537
content={content}
3638
heading={heading}
3739
selector={selector}
40+
expandableSelector={expandableSelector}
3841
placement={placement}
3942
totalSteps={totalSteps}
4043
showStepBadge={showStepBadge}

‎frontend/packages/console-app/src/components/tour/TourStepComponent.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import StepHeader from './steps/StepHeader';
1010
import './TourStepComponent.scss';
1111

1212
type TourStepComponentProps = {
13+
expandableSelector?: string;
1314
selector?: string;
1415
placement?: string;
1516
heading: string;
@@ -29,6 +30,7 @@ const TourStepComponent: React.FC<TourStepComponentProps> = ({
2930
heading,
3031
content,
3132
selector,
33+
expandableSelector,
3234
showStepBadge,
3335
step,
3436
totalSteps,
@@ -64,7 +66,7 @@ const TourStepComponent: React.FC<TourStepComponentProps> = ({
6466
};
6567
return selector ? (
6668
<>
67-
<Spotlight selector={selector} />
69+
<Spotlight selector={selector} expandableSelector={expandableSelector} />
6870
<Popover
6971
placement={placement as PopoverPlacement}
7072
headerContent={header}

‎frontend/packages/console-app/src/components/tour/type.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export type Step = {
1111
selector?: string;
1212
showStepBadge?: boolean;
1313
showClose?: boolean;
14+
expandableSelector?: string;
1415
};
1516

1617
export type TourDataType = {

‎frontend/packages/console-app/src/plugin.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
ResourceDetailsPage,
2424
ResourceListPage,
2525
ResourceTabPage,
26+
GuidedTour,
2627
} from '@console/plugin-sdk';
2728
import { FLAGS } from '@console/shared/src/constants';
2829
import '@console/internal/i18n.js';
@@ -36,6 +37,7 @@ import {
3637
getControlPlaneHealth,
3738
getClusterOperatorHealthStatus,
3839
} from './components/dashboards-page/status';
40+
import { getGuidedTour } from './components/guided-tour';
3941
import { USER_PREFERENCES_BASE_URL } from './components/user-preferences/const';
4042
import * as models from './models';
4143
import {
@@ -53,6 +55,7 @@ type ConsumedExtensions =
5355
| DashboardsOverviewHealthPrometheusSubsystem
5456
| DashboardsOverviewInventoryItem
5557
| DashboardsOverviewHealthOperator<ClusterOperator>
58+
| GuidedTour
5659
| ResourceListPage
5760
| ResourceDetailsPage
5861
| ResourceTabPage;
@@ -268,6 +271,13 @@ const plugin: Plugin<ConsumedExtensions> = [
268271
).then((m) => m.ConsolePluginManifestPage),
269272
},
270273
},
274+
{
275+
type: 'GuidedTour',
276+
properties: {
277+
perspective: 'admin',
278+
tour: getGuidedTour(),
279+
},
280+
},
271281
];
272282

273283
export default plugin;

‎frontend/packages/console-shared/src/components/popover/Popover.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
.ocs-popover__arrow {
2-
height: 10px;
3-
width: 10px;
4-
transform: rotate(45deg);
1+
.ocs-popover {
2+
.ocs-popover__arrow {
3+
height: 10px;
4+
width: 10px;
5+
transform: rotate(45deg);
6+
}
57
}
68
.ocs-popover[x-placement^='top'] {
79
.ocs-popover__arrow {

0 commit comments

Comments
 (0)