Skip to content

Commit e43ca23

Browse files
TheRealJonTheRealJon
committed
NO-JIRA: Improve getting started message
1 parent 3bb267d commit e43ca23

File tree

5 files changed

+114
-123
lines changed

5 files changed

+114
-123
lines changed

‎frontend/packages/console-shared/src/components/empty-state/ConsoleEmptyState.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,10 @@ export const ConsoleEmptyState: React.FC<ConsoleEmptyStateProps> = ({
5252
ConsoleEmptyState.displayName = 'ConsoleEmptyState';
5353

5454
type ConsoleEmptyStateProps = Partial<EmptyStateProps> & {
55-
className?: string;
55+
variant?: EmptyStateProps['variant'];
5656
'data-test'?: string;
57-
Icon?: React.ComponentType;
57+
Icon?: EmptyStateProps['icon'];
5858
primaryActions?: React.ReactElement[];
5959
secondaryActions?: React.ReactElement[];
60-
title?: string | React.ReactElement;
61-
variant?: EmptyStateVariant;
60+
title?: EmptyStateProps['title'];
6261
};

‎frontend/public/components/namespace.jsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -766,14 +766,7 @@ const headerNoMetrics = () => projectTableHeader({ showMetrics: false, showActio
766766

767767
const ProjectNotFoundMessage = () => {
768768
const { t } = useTranslation();
769-
const canCreateNs = useFlag(FLAGS.CAN_CREATE_NS);
770-
const canCreateProject = useFlag(FLAGS.CAN_CREATE_PROJECT);
771-
const canCreate = canCreateNs || canCreateProject;
772-
return (
773-
<ConsoleEmptyState title={t('public~Welcome to OpenShift')}>
774-
<OpenShiftGettingStarted canCreate={canCreate} />
775-
</ConsoleEmptyState>
776-
);
769+
return <OpenShiftGettingStarted title={t('public~Welcome to OpenShift')} />;
777770
};
778771

779772
const ProjectEmptyMessage = () => {

‎frontend/public/components/start-guide.tsx

Lines changed: 106 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,134 @@
11
import * as _ from 'lodash-es';
22
import * as React from 'react';
3-
import { connect } from 'react-redux';
4-
import { Link } from 'react-router-dom-v5-compat';
5-
import { Button, Hint, HintTitle, HintBody } from '@patternfly/react-core';
6-
import { useTranslation, Trans } from 'react-i18next';
3+
import { useSelector } from 'react-redux';
4+
import { Button, ButtonVariant, Divider, EmptyStateVariant } from '@patternfly/react-core';
5+
import { useTranslation } from 'react-i18next';
76

87
import { FLAGS } from '@console/shared/src/constants';
98
import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace';
109
import { useActivePerspective } from '@console/dynamic-plugin-sdk';
11-
import { createProjectMessageStateToProps } from '../reducers/ui';
12-
import { Disabled, ExternalLink, openshiftHelpBase, LinkifyExternal } from './utils';
13-
import { connectToFlags } from '../reducers/connectToFlags';
10+
import { Disabled, openshiftHelpBase, LinkifyExternal, ConsoleEmptyState } from './utils';
1411
import { ProjectModel } from '../models';
1512
import { K8sResourceKind } from '../module/k8s/types';
1613
import { useCreateNamespaceOrProjectModal } from '@console/shared/src/hooks/useCreateNamespaceOrProjectModal';
14+
import { RootState } from '../redux';
15+
import { useFlag } from '@console/shared/src';
16+
import { ExternalLinkAltIcon, OpenshiftIcon } from '@patternfly/react-icons';
1717

18-
export const OpenShiftGettingStarted = connect(createProjectMessageStateToProps)(
19-
({ canCreate = true, createProjectMessage }: OpenShiftGettingStartedProps) => {
20-
const { t } = useTranslation();
21-
const [, setActiveNamespace] = useActiveNamespace();
22-
const [perspective] = useActivePerspective();
23-
const createNamespaceOrProjectModal = useCreateNamespaceOrProjectModal();
18+
export const OpenShiftGettingStarted: React.FCC<OpenShiftGettingStartedProps> = ({ title }) => {
19+
const { t } = useTranslation();
20+
const [, setActiveNamespace] = useActiveNamespace();
21+
const [perspective] = useActivePerspective();
22+
const canCreateNamespace = useFlag(FLAGS.CAN_CREATE_NS);
23+
const canCreateProject = useFlag(FLAGS.CAN_CREATE_PROJECT);
24+
const canCreate = canCreateNamespace || canCreateProject;
25+
const createProjectMessage = useSelector(({ UI }: RootState) => UI.get('createProjectMessage'));
26+
const createNamespaceOrProjectModal = useCreateNamespaceOrProjectModal();
27+
const onClickCreate = () =>
28+
createNamespaceOrProjectModal({
29+
onSubmit:
30+
perspective !== 'admin'
31+
? (project: K8sResourceKind) => {
32+
setActiveNamespace(project.metadata?.name);
33+
}
34+
: undefined,
35+
});
36+
37+
const primaryActions = canCreate
38+
? [
39+
<Button key="create-project-action" variant={ButtonVariant.primary} onClick={onClickCreate}>
40+
{t('public~Create a new Project')}
41+
</Button>,
42+
]
43+
: [];
2444

25-
return (
26-
<>
27-
{canCreate ? (
28-
<p>
29-
{t(
30-
'public~OpenShift helps you quickly develop, host, and scale applications. To get started, create a project for your application.',
31-
)}
32-
</p>
33-
) : (
34-
<p>
35-
{t(
36-
"public~OpenShift helps you quickly develop, host, and scale applications. To get started, you'll need a project. Currently, you can't create or access any projects.",
37-
)}
38-
{!createProjectMessage && (
39-
<>&nbsp;{t("public~You'll need to contact a cluster administrator for help.")}</>
40-
)}
41-
</p>
42-
)}
43-
{createProjectMessage && (
44-
<p className="co-pre-line">
45-
<LinkifyExternal>{createProjectMessage}</LinkifyExternal>
46-
</p>
47-
)}
45+
const secondaryActions = [
46+
<Button
47+
key="download-cli-tools"
48+
variant={ButtonVariant.link}
49+
component="a"
50+
href="/command-line-tools"
51+
>
52+
{t('public~Download command-line tools')}
53+
</Button>,
54+
<Button
55+
key="visit-docs"
56+
variant={ButtonVariant.link}
57+
component="a"
58+
href={openshiftHelpBase}
59+
target="_blank"
60+
rel="noopener noreferrer"
61+
icon={<ExternalLinkAltIcon />}
62+
>
63+
{t('public~View documentation')}
64+
</Button>,
65+
];
66+
return (
67+
<ConsoleEmptyState
68+
variant={EmptyStateVariant.xl}
69+
icon={OpenshiftIcon}
70+
title={title || t('public~Getting started in OpenShift')}
71+
primaryActions={primaryActions}
72+
secondaryActions={secondaryActions}
73+
>
74+
{canCreate ? (
4875
<p>
49-
<Trans t={t} ns="public">
50-
To learn more, visit the OpenShift{' '}
51-
<ExternalLink href={openshiftHelpBase}>documentation</ExternalLink>.
52-
</Trans>
76+
{t(
77+
'public~OpenShift helps you quickly develop, host, and scale applications. To get started, create a project for your application.',
78+
)}
5379
</p>
80+
) : (
5481
<p>
55-
<Trans t={t} ns="public">
56-
Download the <Link to="/command-line-tools">command-line tools</Link>
57-
</Trans>
82+
{t(
83+
"public~OpenShift helps you quickly develop, host, and scale applications. To get started, you'll need a project. Currently, you can't create or access any projects.",
84+
)}
85+
{!createProjectMessage &&
86+
t("public~ You'll need to contact a cluster administrator for help.")}
5887
</p>
59-
{canCreate ? (
60-
<Button
61-
variant="link"
62-
onClick={() =>
63-
createNamespaceOrProjectModal({
64-
onSubmit:
65-
perspective !== 'admin'
66-
? (project: K8sResourceKind) => {
67-
setActiveNamespace(project.metadata?.name);
68-
}
69-
: undefined,
70-
})
71-
}
72-
>
73-
{t('public~Create a new project')}
74-
</Button>
75-
) : null}
76-
</>
77-
);
78-
},
79-
);
88+
)}
89+
{createProjectMessage && (
90+
<p className="co-pre-line">
91+
<LinkifyExternal>{createProjectMessage}</LinkifyExternal>
92+
</p>
93+
)}
94+
</ConsoleEmptyState>
95+
);
96+
};
8097

8198
type WithStartGuide = <P>(
8299
WrappedComponent: React.ComponentType<P & WithStartGuideProps>,
83100
disable?: boolean,
84101
) => React.ComponentType<P>;
85102

86-
export const withStartGuide: WithStartGuide = (WrappedComponent, disable = true) =>
87-
connectToFlags<any>(
88-
FLAGS.SHOW_OPENSHIFT_START_GUIDE,
89-
FLAGS.CAN_CREATE_NS,
90-
FLAGS.CAN_CREATE_PROJECT,
91-
)(({ flags, ...rest }: any) => {
92-
const { kindObj } = rest;
93-
const kind = _.get(kindObj, 'kind', rest.kind);
94-
const { t } = useTranslation();
103+
export const withStartGuide: WithStartGuide = (WrappedComponent, disable = true) => (
104+
props: any,
105+
) => {
106+
const showOpenshiftStartGuide = useFlag(FLAGS.SHOW_OPENSHIFT_START_GUIDE);
107+
const { kindObj } = props;
108+
const kind = _.get(kindObj, 'kind', props.kind);
95109

96-
// The start guide does not need to be shown on the Projects list page.
97-
if (kind === ProjectModel.kind) {
98-
return <WrappedComponent {...rest} />;
99-
}
110+
// The start guide does not need to be shown on the Projects list page.
111+
if (kind === ProjectModel.kind || !showOpenshiftStartGuide) {
112+
return <WrappedComponent {...props} />;
113+
}
100114

101-
if (flags[FLAGS.SHOW_OPENSHIFT_START_GUIDE]) {
102-
return (
103-
<>
104-
<Hint className="pf-v6-u-m-md">
105-
<HintTitle>{t('public~Getting Started')}</HintTitle>
106-
<HintBody>
107-
<OpenShiftGettingStarted
108-
canCreate={flags[FLAGS.CAN_CREATE_NS] || flags[FLAGS.CAN_CREATE_PROJECT]}
109-
/>
110-
</HintBody>
111-
</Hint>
112-
{!disable || (rest.kindObj && !rest.kindObj.namespaced) ? (
113-
<WrappedComponent {...rest} noProjectsAvailable />
114-
) : (
115-
<Disabled>
116-
<WrappedComponent {...rest} noProjectsAvailable />
117-
</Disabled>
118-
)}
119-
</>
120-
);
121-
}
122-
return <WrappedComponent {...rest} />;
123-
});
115+
return (
116+
<>
117+
<OpenShiftGettingStarted />
118+
<Divider />
119+
{!disable || (props.kindObj && !props.kindObj.namespaced) ? (
120+
<WrappedComponent {...props} noProjectsAvailable />
121+
) : (
122+
<Disabled>
123+
<WrappedComponent {...props} noProjectsAvailable />
124+
</Disabled>
125+
)}
126+
</>
127+
);
128+
};
124129

125130
type OpenShiftGettingStartedProps = {
126-
canCreate: boolean;
127-
createProjectMessage: string;
131+
title?: string;
128132
};
129133

130134
export type WithStartGuideProps = {

‎frontend/public/locales/en/public.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1408,13 +1408,12 @@
14081408
"Show YAML": "Show YAML",
14091409
"Samples": "Samples",
14101410
"Snippets": "Snippets",
1411+
"Create a new Project": "Create a new Project",
1412+
"Download command-line tools": "Download command-line tools",
1413+
"Getting started in OpenShift": "Getting started in OpenShift",
14111414
"OpenShift helps you quickly develop, host, and scale applications. To get started, create a project for your application.": "OpenShift helps you quickly develop, host, and scale applications. To get started, create a project for your application.",
14121415
"OpenShift helps you quickly develop, host, and scale applications. To get started, you'll need a project. Currently, you can't create or access any projects.": "OpenShift helps you quickly develop, host, and scale applications. To get started, you'll need a project. Currently, you can't create or access any projects.",
1413-
"You'll need to contact a cluster administrator for help.": "You'll need to contact a cluster administrator for help.",
1414-
"To learn more, visit the OpenShift <2>documentation</2>.": "To learn more, visit the OpenShift <2>documentation</2>.",
1415-
"Download the <1>command-line tools</1>": "Download the <1>command-line tools</1>",
1416-
"Create a new project": "Create a new project",
1417-
"Getting Started": "Getting Started",
1416+
" You'll need to contact a cluster administrator for help.": " You'll need to contact a cluster administrator for help.",
14181417
"StatefulSet details": "StatefulSet details",
14191418
"StatefulSets": "StatefulSets",
14201419
"Retain": "Retain",

‎frontend/public/reducers/ui.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,6 @@ export default (state: UIState, action: UIAction): UIState => {
160160
return state;
161161
};
162162

163-
export const createProjectMessageStateToProps = ({ UI }: RootState) => {
164-
return { createProjectMessage: UI.get('createProjectMessage') as string };
165-
};
166-
167163
export const userStateToProps = (state: RootState) => {
168164
return { user: getUser(state) };
169165
};

0 commit comments

Comments
 (0)