Skip to content

Commit 4ad1808

Browse files
logonofflogonoff
committed
OCPBUGS-56629: use EmptyState for quick starts empty state
fixes https://issues.redhat.com/browse/OCPBUGS-56629 before: ![](https://i.imgur.com/pLdvTpc.png) after (non-admin user): ![](https://i.imgur.com/DqGPgmC.png) after (admin user): ![](https://i.imgur.com/pZ2vTI6.png)
1 parent 1bfa887 commit 4ad1808

File tree

5 files changed

+105
-8
lines changed

5 files changed

+105
-8
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -550,6 +550,11 @@
550550
"No PodDisruptionBudget": "No PodDisruptionBudget",
551551
"Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.": "Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.",
552552
"Quick starts": "Quick starts",
553+
"No {{label}} found": "No {{label}} found",
554+
"Configure quick starts to help users get started with your cluster.": "Configure quick starts to help users get started with your cluster.",
555+
"Ask a cluster administrator to configure quick starts.": "Ask a cluster administrator to configure quick starts.",
556+
"Configure quick starts": "Configure quick starts",
557+
"Learn more about quick starts": "Learn more about quick starts",
553558
"No results found": "No results found",
554559
"No results match the filter criteria. Remove filters or clear all filters to show results.": "No results match the filter criteria. Remove filters or clear all filters to show results.",
555560
"Clear all filters": "Clear all filters",
@@ -587,7 +592,6 @@
587592
"Your progress will be saved.": "Your progress will be saved.",
588593
"Copy to clipboard": "Copy to clipboard",
589594
"Successfully copied to clipboard!": "Successfully copied to clipboard!",
590-
"No {{label}} found": "No {{label}} found",
591595
"Not found": "Not found",
592596
"No quota": "No quota",
593597
"Zone and zones parameters must not be used at the same time": "Zone and zones parameters must not be used at the same time",

‎frontend/packages/console-app/src/components/quick-starts/QuickStartCatalogPage.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,27 @@ import { LoadingBox } from '@console/internal/components/utils';
55
import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
66
import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
77
import QuickStartsLoader from './loader/QuickStartsLoader';
8+
import { QuickStartEmptyState } from './QuickStartEmptyState';
89

910
const QuickStartCatalogPage: React.FC = () => {
10-
const { t } = useTranslation();
11+
const { t } = useTranslation('console-app');
1112
return (
1213
<>
13-
<DocumentTitle>{t('console-app~Quick Starts')}</DocumentTitle>
14+
<DocumentTitle>{t('Quick Starts')}</DocumentTitle>
1415
<PageHeading
15-
title={t('console-app~Quick Starts')}
16+
title={t('Quick Starts')}
1617
helpText={t(
17-
'console-app~Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.',
18+
'Learn how to create, import, and run applications on OpenShift with step-by-step instructions and tasks.',
1819
)}
1920
/>
2021
<QuickStartsLoader>
2122
{(quickStarts, loaded) =>
2223
loaded ? (
23-
<PfQuickStartCatalogPage showTitle={false} quickStarts={quickStarts} showFilter />
24+
quickStarts.length > 0 ? (
25+
<PfQuickStartCatalogPage showTitle={false} quickStarts={quickStarts} showFilter />
26+
) : (
27+
<QuickStartEmptyState />
28+
)
2429
) : (
2530
<LoadingBox />
2631
)

‎frontend/packages/console-app/src/components/quick-starts/QuickStartConfiguration.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,11 @@ const QuickStartConfiguration: React.FC<{ readonly: boolean }> = ({ readonly })
152152
};
153153

154154
return (
155-
<FormSection title={t('console-app~Quick starts')} data-test="quickstarts form-section">
155+
<FormSection
156+
title={t('console-app~Quick starts')}
157+
data-test="quickstarts form-section"
158+
id="quick-starts-configuration"
159+
>
156160
<DualListSelector
157161
availableOptionsTitle={t('console-app~Enabled')}
158162
chosenOptionsTitle={t('console-app~Disabled')}

‎frontend/packages/console-app/src/components/quick-starts/QuickStartEmptyState.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import {
2+
Button,
3+
EmptyState,
4+
EmptyStateBody,
5+
EmptyStateActions,
6+
EmptyStateFooter,
7+
EmptyStateVariant,
8+
Skeleton,
9+
} from '@patternfly/react-core';
10+
import { CubesIcon } from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
11+
import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
12+
import { WrenchIcon } from '@patternfly/react-icons/dist/esm/icons/wrench-icon';
13+
import { useTranslation } from 'react-i18next';
14+
import { QuickStartModel } from '@console/app/src/models';
15+
import { useAccessReview } from '@console/dynamic-plugin-sdk/src/app/components/utils/rbac';
16+
import { getReferenceForModel } from '@console/dynamic-plugin-sdk/src/utils/k8s';
17+
import { LinkTo } from '@console/shared/src/components/links/LinkTo';
18+
19+
const QUICK_START_DOCS_URL =
20+
'https://docs.redhat.com/en/documentation/openshift_container_platform/latest/html/web_console/creating-quick-start-tutorials';
21+
22+
export const QuickStartEmptyState = () => {
23+
const { t } = useTranslation('console-app');
24+
25+
const [canAddQuickStarts, loading] = useAccessReview({
26+
group: QuickStartModel.apiGroup,
27+
resource: QuickStartModel.kind,
28+
verb: 'create',
29+
});
30+
31+
return (
32+
<EmptyState
33+
titleText={t('No {{label}} found', { label: QuickStartModel.labelPlural })}
34+
headingLevel="h4"
35+
icon={loading ? Skeleton : canAddQuickStarts ? WrenchIcon : CubesIcon}
36+
variant={EmptyStateVariant.lg}
37+
>
38+
{!loading ? (
39+
<>
40+
<EmptyStateBody>
41+
{canAddQuickStarts
42+
? t('Configure quick starts to help users get started with your cluster.')
43+
: t('Ask a cluster administrator to configure quick starts.')}
44+
</EmptyStateBody>
45+
{canAddQuickStarts && (
46+
<EmptyStateFooter>
47+
<EmptyStateActions>
48+
<Button
49+
variant="primary"
50+
component={LinkTo('/cluster-configuration#quick-starts-configuration')}
51+
>
52+
{t('Configure quick starts')}
53+
</Button>
54+
</EmptyStateActions>
55+
<EmptyStateActions>
56+
<Button
57+
variant="link"
58+
component={LinkTo(`/k8s/cluster/${getReferenceForModel(QuickStartModel)}/~new`)}
59+
>
60+
{t('Create {{kind}}', { kind: QuickStartModel.kind })}
61+
</Button>
62+
<Button
63+
variant="link"
64+
target="_blank"
65+
rel="noopener noreferrer"
66+
component="a"
67+
href={QUICK_START_DOCS_URL}
68+
iconPosition="right"
69+
icon={<ExternalLinkAltIcon />}
70+
>
71+
{t('Learn more about quick starts')}
72+
</Button>
73+
</EmptyStateActions>
74+
</EmptyStateFooter>
75+
)}
76+
</>
77+
) : (
78+
<EmptyStateBody>
79+
<Skeleton />
80+
</EmptyStateBody>
81+
)}
82+
</EmptyState>
83+
);
84+
};

‎frontend/packages/dev-console/src/components/import/serverless-function/AddServerlessFunctionForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ enum SupportedRuntime {
4242
}
4343

4444
export const SERVERLESS_FUNCTION_DOCS_URL =
45-
'https://docs.openshift.com/serverless/latest/functions/serverless-functions-getting-started.html';
45+
'https://docs.redhat.com/en/documentation/red_hat_openshift_serverless/latest/html/functions/serverless-functions-getting-started';
4646

4747
const AddServerlessFunctionForm: React.FC<
4848
FormikProps<FormikValues> & AddServerlessFunctionFormProps

0 commit comments

Comments
 (0)