diff --git a/frontend/packages/console-shared/src/components/empty-state/ConsoleEmptyState.tsx b/frontend/packages/console-shared/src/components/empty-state/ConsoleEmptyState.tsx index afb5882a2d7b..9cb30030e164 100644 --- a/frontend/packages/console-shared/src/components/empty-state/ConsoleEmptyState.tsx +++ b/frontend/packages/console-shared/src/components/empty-state/ConsoleEmptyState.tsx @@ -52,11 +52,10 @@ export const ConsoleEmptyState: React.FC = ({ ConsoleEmptyState.displayName = 'ConsoleEmptyState'; type ConsoleEmptyStateProps = Partial & { - className?: string; + variant?: EmptyStateProps['variant']; 'data-test'?: string; - Icon?: React.ComponentType; + Icon?: EmptyStateProps['icon']; primaryActions?: React.ReactElement[]; secondaryActions?: React.ReactElement[]; - title?: string | React.ReactElement; - variant?: EmptyStateVariant; + title?: EmptyStateProps['title']; }; diff --git a/frontend/public/components/namespace.jsx b/frontend/public/components/namespace.jsx index 034c94bba4a1..a7fe7197d44e 100644 --- a/frontend/public/components/namespace.jsx +++ b/frontend/public/components/namespace.jsx @@ -764,18 +764,6 @@ export const ProjectsTable = (props) => { const headerWithMetrics = () => projectTableHeader({ showMetrics: true, showActions: true }); const headerNoMetrics = () => projectTableHeader({ showMetrics: false, showActions: true }); -const ProjectNotFoundMessage = () => { - const { t } = useTranslation(); - const canCreateNs = useFlag(FLAGS.CAN_CREATE_NS); - const canCreateProject = useFlag(FLAGS.CAN_CREATE_PROJECT); - const canCreate = canCreateNs || canCreateProject; - return ( - - - - ); -}; - const ProjectEmptyMessage = () => { const { t } = useTranslation(); return ( @@ -835,7 +823,7 @@ export const ProjectList = ({ data, ...tableProps }) => { data={data} Header={showMetrics ? headerWithMetrics : headerNoMetrics} Row={ProjectTableRow} - NoDataEmptyMsg={ProjectNotFoundMessage} + NoDataEmptyMsg={OpenShiftGettingStarted} EmptyMsg={ProjectEmptyMessage} customData={customData} virtualize diff --git a/frontend/public/components/start-guide.tsx b/frontend/public/components/start-guide.tsx index e04da36c485f..f284c9995022 100644 --- a/frontend/public/components/start-guide.tsx +++ b/frontend/public/components/start-guide.tsx @@ -1,130 +1,131 @@ import * as _ from 'lodash-es'; import * as React from 'react'; -import { connect } from 'react-redux'; -import { Link } from 'react-router-dom-v5-compat'; -import { Button, Hint, HintTitle, HintBody } from '@patternfly/react-core'; -import { useTranslation, Trans } from 'react-i18next'; +import { useSelector } from 'react-redux'; +import { Button, ButtonVariant, Divider, EmptyStateVariant } from '@patternfly/react-core'; +import { useTranslation } from 'react-i18next'; import { FLAGS } from '@console/shared/src/constants'; import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace'; import { useActivePerspective } from '@console/dynamic-plugin-sdk'; -import { createProjectMessageStateToProps } from '../reducers/ui'; -import { Disabled, ExternalLink, openshiftHelpBase, LinkifyExternal } from './utils'; -import { connectToFlags } from '../reducers/connectToFlags'; +import { Disabled, openshiftHelpBase, LinkifyExternal, ConsoleEmptyState } from './utils'; import { ProjectModel } from '../models'; import { K8sResourceKind } from '../module/k8s/types'; import { useCreateNamespaceOrProjectModal } from '@console/shared/src/hooks/useCreateNamespaceOrProjectModal'; +import { RootState } from '../redux'; +import { useFlag } from '@console/shared/src'; +import { ClusterIcon, ExternalLinkAltIcon } from '@patternfly/react-icons'; -export const OpenShiftGettingStarted = connect(createProjectMessageStateToProps)( - ({ canCreate = true, createProjectMessage }: OpenShiftGettingStartedProps) => { - const { t } = useTranslation(); - const [, setActiveNamespace] = useActiveNamespace(); - const [perspective] = useActivePerspective(); - const createNamespaceOrProjectModal = useCreateNamespaceOrProjectModal(); +export const OpenShiftGettingStarted: React.FCC = () => { + const { t } = useTranslation(); + const [, setActiveNamespace] = useActiveNamespace(); + const [perspective] = useActivePerspective(); + const canCreateNamespace = useFlag(FLAGS.CAN_CREATE_NS); + const canCreateProject = useFlag(FLAGS.CAN_CREATE_PROJECT); + const canCreate = canCreateNamespace || canCreateProject; + const createProjectMessage = useSelector(({ UI }: RootState) => UI.get('createProjectMessage')); + const createNamespaceOrProjectModal = useCreateNamespaceOrProjectModal(); + const onClickCreate = () => + createNamespaceOrProjectModal({ + onSubmit: + perspective !== 'admin' + ? (project: K8sResourceKind) => { + setActiveNamespace(project.metadata?.name); + } + : undefined, + }); + + const primaryActions = canCreate + ? [ + , + ] + : []; - return ( - <> - {canCreate ? ( -

- {t( - 'public~OpenShift helps you quickly develop, host, and scale applications. To get started, create a project for your application.', - )} -

- ) : ( -

- {t( - "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.", - )} - {!createProjectMessage && ( - <> {t("public~You'll need to contact a cluster administrator for help.")} - )} -

- )} - {createProjectMessage && ( -

- {createProjectMessage} -

- )} + const secondaryActions = [ + , + , + ]; + return ( + + {canCreate ? ( +

{t('public~To get started, create a project for your application.')}

+ ) : (

- - To learn more, visit the OpenShift{' '} - documentation. - + {t( + "public~To get started, you'll need a project. Currently, you can't create or access any projects.", + )} + {!createProjectMessage && + t("public~ You'll need to contact a cluster administrator for help.")}

-

- - Download the command-line tools - + )} + {createProjectMessage && ( +

+ {createProjectMessage}

- {canCreate ? ( - - ) : null} - - ); - }, -); + )} +
+ ); +}; type WithStartGuide =

( WrappedComponent: React.ComponentType

, disable?: boolean, ) => React.ComponentType

; -export const withStartGuide: WithStartGuide = (WrappedComponent, disable = true) => - connectToFlags( - FLAGS.SHOW_OPENSHIFT_START_GUIDE, - FLAGS.CAN_CREATE_NS, - FLAGS.CAN_CREATE_PROJECT, - )(({ flags, ...rest }: any) => { - const { kindObj } = rest; - const kind = _.get(kindObj, 'kind', rest.kind); - const { t } = useTranslation(); +export const withStartGuide: WithStartGuide = (WrappedComponent, disable = true) => ( + props: any, +) => { + const showOpenshiftStartGuide = useFlag(FLAGS.SHOW_OPENSHIFT_START_GUIDE); + const { kindObj } = props; + const kind = _.get(kindObj, 'kind', props.kind); - // The start guide does not need to be shown on the Projects list page. - if (kind === ProjectModel.kind) { - return ; - } + // The start guide does not need to be shown on the Projects list page. + if (kind === ProjectModel.kind || !showOpenshiftStartGuide) { + return ; + } - if (flags[FLAGS.SHOW_OPENSHIFT_START_GUIDE]) { - return ( - <> - - {t('public~Getting Started')} - - - - - {!disable || (rest.kindObj && !rest.kindObj.namespaced) ? ( - - ) : ( - - - - )} - - ); - } - return ; - }); + return ( + <> + + + {!disable || (props.kindObj && !props.kindObj.namespaced) ? ( + + ) : ( + + + + )} + + ); +}; type OpenShiftGettingStartedProps = { - canCreate: boolean; - createProjectMessage: string; + title?: string; }; export type WithStartGuideProps = { diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json index 112c3fdd3088..a550ff033984 100644 --- a/frontend/public/locales/en/public.json +++ b/frontend/public/locales/en/public.json @@ -1077,7 +1077,6 @@ "No results match the filter criteria.": "No results match the filter criteria.", "Namespaces": "Namespaces", "Projects": "Projects", - "Welcome to OpenShift": "Welcome to OpenShift", "No matching Projects": "No matching Projects", "by name or display name": "by name or display name", "Project": "Project", @@ -1408,13 +1407,12 @@ "Show YAML": "Show YAML", "Samples": "Samples", "Snippets": "Snippets", - "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.", - "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.", - "You'll need to contact a cluster administrator for help.": "You'll need to contact a cluster administrator for help.", - "To learn more, visit the OpenShift <2>documentation.": "To learn more, visit the OpenShift <2>documentation.", - "Download the <1>command-line tools": "Download the <1>command-line tools", - "Create a new project": "Create a new project", - "Getting Started": "Getting Started", + "Create a new Project": "Create a new Project", + "Download command-line tools": "Download command-line tools", + "Hello, world!": "Hello, world!", + "To get started, create a project for your application.": "To get started, create a project for your application.", + "To get started, you'll need a project. Currently, you can't create or access any projects.": "To get started, you'll need a project. Currently, you can't create or access any projects.", + " You'll need to contact a cluster administrator for help.": " You'll need to contact a cluster administrator for help.", "StatefulSet details": "StatefulSet details", "StatefulSets": "StatefulSets", "Retain": "Retain", diff --git a/frontend/public/reducers/ui.ts b/frontend/public/reducers/ui.ts index ae89f829ade5..d294a1a4d61f 100644 --- a/frontend/public/reducers/ui.ts +++ b/frontend/public/reducers/ui.ts @@ -160,10 +160,6 @@ export default (state: UIState, action: UIAction): UIState => { return state; }; -export const createProjectMessageStateToProps = ({ UI }: RootState) => { - return { createProjectMessage: UI.get('createProjectMessage') as string }; -}; - export const userStateToProps = (state: RootState) => { return { user: getUser(state) }; };